@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/app-menu/parts/AppMenuHeader.js

@@ -1,41 +1,41 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useIntl as p } from "react-intl";
-import { Link as m } from "react-router-dom";
-import { IconButton as s } from "../../icon-button/IconButton.js";
-import { PayFitBrand as c } from "../../payfit-brand/PayFitBrand.js";
-import { PayFitBrandPreprod as y } from "../../payfit-brand/PayFitPreprod.js";
-import { useAppMenuContext as f } from "./AppMenu.context.js";
-const N = ({
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { Link as m } from "react-aria-components";
+import { useIntl as s } from "react-intl";
+import { IconButton as c } from "../../icon-button/IconButton.js";
+import { PayFitBrand as y } from "../../payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as f } from "../../payfit-brand/PayFitPreprod.js";
+import { useAppMenuContext as h } from "./AppMenu.context.js";
+const O = ({
   environment: o,
-  linkHref: a,
-  linkLabel: t,
-  notificationsComponent: r,
-  searchComponent: l
+  brandLabel: a,
+  notificationsComponent: t,
+  searchComponent: i,
+  renderLink: l = ({ children: e }) => /* @__PURE__ */ n(m, { href: "/", children: e })
 }) => {
-  const { isMobileMenuOpen: n, toggleMobileMenu: u } = f(), d = p();
-  return /* @__PURE__ */ i("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
-    /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ e(
-      s,
+  const { isMobileMenuOpen: e, toggleMobileMenu: u } = h(), d = s(), p = o === "prod" ? /* @__PURE__ */ n(y, { label: a, width: 104 }) : /* @__PURE__ */ n(f, { label: a, env: o });
+  return /* @__PURE__ */ r("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
+    /* @__PURE__ */ n("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(
+      c,
       {
         variant: "ghost",
         color: "neutral",
-        icon: n ? "CloseOutlined" : "ListOutlined",
+        icon: e ? "CloseOutlined" : "ListOutlined",
         label: d.formatMessage({
-          id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
-          defaultMessage: n ? "Close navigation" : "Open navigation"
+          id: e ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+          defaultMessage: e ? "Close navigation" : "Open navigation"
         }),
         onClick: u,
-        "aria-expanded": n,
+        "aria-expanded": e,
         "aria-controls": "app-menu-nav-container app-menu-profile-button"
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
-      /* @__PURE__ */ e(m, { to: a, children: o === "production" ? /* @__PURE__ */ e(c, { label: t, width: 104 }) : /* @__PURE__ */ e(y, { label: t, env: o }) }),
-      r
+    /* @__PURE__ */ r("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
+      l({ children: p }),
+      t
     ] }),
-    /* @__PURE__ */ e("div", { className: "uy:hidden uy:md:flex", children: l })
+    /* @__PURE__ */ n("div", { className: "uy:hidden uy:md:flex", children: i })
   ] });
 };
 export {
-  N as AppMenuHeader
+  O as AppMenuHeader
 };

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

@@ -7,8 +7,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -20,7 +18,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
@@ -29,8 +26,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -42,7 +37,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
@@ -51,8 +45,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -64,7 +56,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];

package/dist/esm/components/autocomplete/Autocomplete.js

@@ -1,34 +1,33 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { forwardRef as R, useRef as A, useState as B, useCallback as O } from "react";
-import { uyTv as W } from "@payfit/unity-themes";
-import { useId as k } from "react-aria";
-import { ComboBox as C, Input as z } from "react-aria-components";
-import { useIntl as T } from "react-intl";
-import { useResizeObserver as j } from "usehooks-ts";
-import { Icon as f } from "../icon/Icon.js";
+import { forwardRef as R, useRef as A, useState as O, useCallback as W } from "react";
+import { uyTv as k } from "@payfit/unity-themes";
+import { useId as C } from "react-aria";
+import { ComboBox as z, Input as T } from "react-aria-components";
+import { useIntl as j } from "react-intl";
+import { useResizeObserver as B } from "usehooks-ts";
+import { Icon as y } from "../icon/Icon.js";
 import { Spinner as D } from "../spinner/Spinner.js";
 import { Text as P } from "../text/Text.js";
 import { AutocompleteClearButton as E } from "./parts/AutocompleteClearButton.js";
 import { AutocompletePanel as G } from "./parts/AutocompletePanel.js";
-const L = W({
+const L = k({
   slots: {
     base: [
-      "uy:group uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled",
-      "uy:enabled:border-border-form-enabled uy:enabled:bg-surface-danger-enabled uy:enabled:border-border-form-enabled",
-      "uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:focus-visible:border-border-form-focus uy:focus-visible:bg-surface-form-focus",
-      "uy:active:border-border-form-active",
-      "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled",
-      "uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error"
+      "uy:group uy:transition-colors uy:w-full uy:flex uy:gap-100 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
+      "uy:enabled:bg-surface-form-high-enabled",
+      'uy:has-data-[focus-visible="true"]:outline-none uy:has-data-[focus-visible="true"]:ring-2 uy:has-data-[focus-visible="true"]:ring-utility-focus-ring uy:has-data-[focus-visible="true"]:ring-offset-2 uy:has-data-[focus-visible="true"]:bg-surface-form-high-focus',
+      "uy:active:border uy:active:border-solid uy:active:border-border-form-active",
+      "uy:data-[disabled=true]:border uy:data-[disabled=true]:border-solid uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-high-disabled",
+      "uy:data-[invalid=true]:border uy:data-[invalid=true]:border-solid uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-high-error"
     ],
     input: [
       "uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
       "uy:enabled:text-content-form-enabled",
-      "uy:hover:text-content-form-hover",
-      "uy:focus-visible:text-content-form-focus",
+      "uy:data-[hovered]:text-content-form-hover",
+      "uy:data-[focus-visible]:text-content-form-focus",
       "uy:active:text-content-form-active",
-      "uy:group-data-[invalid=true]:bg-surface-form-error"
+      "uy:group-data-[invalid=true]:bg-surface-form-high-error"
     ],
-    clearButton: [],
     icon: [
       "uy:self-center",
       "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
@@ -42,16 +41,14 @@ const L = W({
   variants: {
     isReadOnly: {
       true: {
-        base: "uy:bg-surface-form-disabled",
+        base: "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-high-disabled",
         icon: "uy:text-content-neutral-lowest-disabled",
-        button: "uy:bg-surface-form-error uy:text-content-neutral-disabled",
-        clearButton: "uy:hidden",
-        input: "uy:bg-surface-form-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
+        input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
       },
       false: {
         base: [
-          "uy:bg-surface-form-enabled",
-          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover uy:data-[disabled=true]:cursor-not-allowed"
+          "uy:bg-surface-form-high-enabled",
+          "uy:has-data-[hovered]:bg-surface-form-high-hover uy:data-[disabled=true]:cursor-not-allowed"
         ],
         icon: "uy:text-content-neutral-lowest",
         input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest uy:group-data-[disabled=true]:cursor-not-allowed"
@@ -61,48 +58,48 @@ const L = W({
 }), U = ({
   intl: a,
   placeholder: r,
-  isDisabled: t
-}) => t ? "" : r || a.formatMessage({
+  isDisabled: o
+}) => o ? "" : r || a.formatMessage({
   id: "unity:component:autocomplete:placeholder",
   defaultMessage: "Search"
 }), $ = (a, r) => {
   const {
-    placeholder: t,
-    isDisabled: l,
-    isInvalid: d,
+    placeholder: o,
+    isDisabled: d,
+    isInvalid: l,
     isReadOnly: u,
-    items: m,
-    children: y,
-    loadingState: i,
+    items: f,
+    children: m,
+    loadingState: n,
     name: b,
     feedbackText: p,
-    ...g
-  } = a, n = T(), o = A(null), [h, v] = B(null), c = k(), x = O(() => {
-    o.current && v(`${o.current.offsetWidth}px`);
-  }, [o]);
-  j({ ref: o, onResize: x });
-  const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S, clearButton: F } = L({
+    ...h
+  } = a, i = j(), t = A(null), [g, v] = O(null), c = C(), x = W(() => {
+    t.current && v(`${t.current.offsetWidth}px`);
+  }, [t]);
+  B({ ref: t, onResize: x });
+  const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S } = L({
     isReadOnly: u
   });
   return /* @__PURE__ */ s("search", { ref: r, children: [
     /* @__PURE__ */ s(
-      C,
+      z,
       {
         className: w(),
         name: b,
-        isInvalid: d,
-        isDisabled: l || u,
+        isInvalid: l,
+        isDisabled: d || u,
         isReadOnly: u,
-        ref: o,
-        "aria-label": n.formatMessage({
+        ref: t,
+        "aria-label": i.formatMessage({
           id: "unity:component:autocomplete:placeholder",
           defaultMessage: "Search"
         }),
-        items: m,
-        ...g,
+        items: f,
+        ...h,
         children: [
           /* @__PURE__ */ e(
-            f,
+            y,
             {
               src: "MagnifyingGlassOutlined",
               className: M(),
@@ -110,30 +107,30 @@ const L = W({
             }
           ),
           /* @__PURE__ */ e(
-            z,
+            T,
             {
               className: I(),
               "aria-describedby": c,
-              placeholder: U({ intl: n, placeholder: t, isDisabled: l })
+              placeholder: U({ intl: i, placeholder: o, isDisabled: d })
             }
           ),
           /* @__PURE__ */ s("div", { className: S(), children: [
             /* @__PURE__ */ e(
-              f,
+              y,
               {
                 className: N(),
                 src: "WarningCircleOutlined",
                 color: "content.form.invalid",
-                alt: n.formatMessage({
+                alt: i.formatMessage({
                   id: "unity:component:form-field:form-input:error:alt",
                   defaultMessage: "Error"
                 })
               }
             ),
-            i && i !== "error" && i !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
+            n && n !== "error" && n !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
               D,
               {
-                label: n.formatMessage({
+                label: i.formatMessage({
                   id: "unity:component:common:loading:label",
                   defaultMessage: "Loading..."
                 }),
@@ -146,15 +143,15 @@ const L = W({
               E,
               {
                 isReadOnly: u,
-                isDisabled: l
+                isDisabled: d
               }
             )
           ] }),
-          /* @__PURE__ */ e(G, { panelWidth: h, searchRef: o, children: y })
+          /* @__PURE__ */ e(G, { panelWidth: g, searchRef: t, children: m })
         ]
       }
     ),
-    d && /* @__PURE__ */ e(
+    l && /* @__PURE__ */ e(
       P,
       {
         id: c,
@@ -163,8 +160,8 @@ const L = W({
       }
     )
   ] });
-}, q = R(function(r, t) {
-  return $(r, t);
+}, q = R(function(r, o) {
+  return $(r, o);
 });
 q.displayName = "Autocomplete";
 export {

package/dist/esm/components/autocomplete/parts/AutocompleteItem.js

@@ -1,5 +1,5 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
 import { uyTv as n } from "@payfit/unity-themes";
 import { ListBoxItem as d } from "react-aria-components";
 const i = n({
@@ -7,24 +7,24 @@ const i = n({
     "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
     "uy:enabled:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
     "uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed",
-    "uy:data-[focus-visible]:outline-offset-2 uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:bg-surface-neutral-focus uy:data-[focus-visible]:text-content-neutral-focus",
+    'uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring uy:data-[focus-visible="true"]:bg-surface-neutral-focus uy:data-[focus-visible="true"]:text-content-neutral-focus',
     "uy:data-[disabled]:text-content-neutral-disabled"
   ],
   variants: {
     isDisabled: {
-      false: "uy:hover:bg-surface-neutral-hover",
+      false: 'uy:data-[hovered="true"]:bg-surface-neutral-hover',
       true: "uy:cursor-not-allowed"
     }
   }
-}), y = r(
-  ({ children: e, isDisabled: t, textValue: u, ...a }, o) => /* @__PURE__ */ l(
+}), y = l(
+  ({ children: e, isDisabled: t, textValue: u, ...a }, r) => /* @__PURE__ */ s(
     d,
     {
       ...a,
       isDisabled: t,
       textValue: u,
-      ref: o,
-      className: ({ isDisabled: s }) => i({ isDisabled: s }),
+      ref: r,
+      className: ({ isDisabled: o }) => i({ isDisabled: o }),
       children: e
     }
   )

package/dist/esm/components/avatar/Avatar.variants.js

@@ -10,7 +10,7 @@ const e = a({
     },
     variant: {
       circle: "uy:rounded-circle",
-      square: ""
+      square: "uy:aspect-square"
     }
   },
   compoundVariants: [

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -1,12 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as p from "react";
-import { uyTv as t, uyMerge as f } from "@payfit/unity-themes";
-import * as l from "@radix-ui/react-avatar";
-import { useAvatarContext as b } from "../Avatar.context.js";
-import { avatarBase as n } from "../Avatar.variants.js";
-import { getInitials as v } from "../utils.js";
-const h = t({
-  extend: n,
+import * as m from "react";
+import { uyTv as n, uyMerge as b } from "@payfit/unity-themes";
+import * as e from "@radix-ui/react-avatar";
+import { useAvatarContext as f } from "../Avatar.context.js";
+import { avatarBase as s } from "../Avatar.variants.js";
+import { getInitials as h } from "../utils.js";
+const v = n({
+  extend: s,
   slots: {
     base: "uy:absolute uy:overflow-hidden",
     background: "",
@@ -28,9 +28,9 @@ const h = t({
       }
     }
   }
-}), w = t({
-  extend: n,
-  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-low",
+}), w = n({
+  extend: s,
+  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
   variants: {
     size: {
       xs: "uy:typography-body-small-strong",
@@ -40,47 +40,46 @@ const h = t({
       xl: "uy:typography-h2"
     }
   }
-}), x = p.forwardRef(({ variant: u, color: s, children: i, ...r }, y) => {
-  const c = b(), { size: e, variant: o } = c;
+}), x = m.forwardRef(({ variant: u, color: i, children: y, ...r }, o) => {
+  const c = f(), { size: t, variant: l } = c;
   if (u === "placeholder") {
-    const { base: d, background: g, foreground: m } = h({
-      color: s,
-      size: e,
-      variant: o
+    const { base: d, background: g, foreground: p } = v({
+      color: i,
+      size: t,
+      variant: l
     });
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ a(e.Fallback, { ref: o, role: "presentation", ...r, children: /* @__PURE__ */ a(
       "svg",
       {
         role: "img",
         "aria-hidden": !0,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 16 16",
-        className: f(d(), g()),
-        ...r,
+        className: b(d(), g()),
         children: /* @__PURE__ */ a(
           "path",
           {
-            className: m(),
+            className: p(),
             fillRule: "evenodd",
             d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
             clipRule: "evenodd"
           }
         )
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ a(
-    l.Fallback,
+    e.Fallback,
     {
-      ref: y,
+      ref: o,
       role: "presentation",
-      className: w({ size: e, variant: o }),
+      className: w({ size: t, variant: l }),
       ...r,
-      children: v(i)
+      children: h(y)
     }
   );
 });
-x.displayName = l.Fallback.displayName;
+x.displayName = e.Fallback.displayName;
 export {
   x as AvatarFallback
 };

package/dist/esm/components/badge/Badge.js

@@ -9,7 +9,7 @@ const g = y({
       success: "uy:bg-surface-success-low uy:text-content-success-high",
       warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
       danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
-      neutral: "uy:bg-surface-neutral-low uy:text-content-neutral",
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral",
       promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
       attention: "uy:bg-surface-danger uy:text-content-inverted",
       numeric: "uy:bg-surface-info-low uy:text-content-info-high",

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import { createContext as i, useContext as u } from "react";
-const e = i({
+import { useContext as i, createContext as u } from "react";
+const e = u({
   wrap: "wrap",
   isMobile: !1,
   isStaticApi: !1
@@ -14,7 +14,7 @@ function m({
   return /* @__PURE__ */ s(e.Provider, { value: { wrap: t, isMobile: o, isStaticApi: n }, children: r });
 }
 function d() {
-  const r = u(e);
+  const r = i(e);
   if (!r)
     throw new Error(
       "useBreadcrumbsContext must be used within an BreadcrumbsProvider"

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

@@ -1,33 +1,41 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from 'react';
 import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
 import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
-import { BreadcrumbProps } from './parts/Breadcrumb.js';
+import { Breadcrumb } from './parts/Breadcrumb.js';
 import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
-export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<never>, 'onAction'> {
     items?: never;
     /**
-     * The breadcrumb list to render (static api)
+     * The breadcrumb list to render (static API)
      */
     children: ReactNode;
     /**
-     * If the breadcrumbs should wrap or not
+     * Whether the breadcrumbs should wrap or not
      */
     wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
 }
-export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+export interface BreadcrumbsWithItemProps<TItem extends {
+    label: string;
+}> extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<TItem>, 'onAction'> {
     /**
      * The list of items to render, when using the dynamic API.
      */
-    items: BreadcrumbProps[];
+    items: TItem[];
     /**
-     * The function renderer to render each part of the breadcrumbs (dynamic api)
+     * The render function for each breadcrumb item (dynamic API)
      */
-    children: (item: BreadcrumbProps) => ReactNode;
+    children: (item: TItem) => ReactElement<ComponentPropsWithoutRef<typeof Breadcrumb>>;
     /**
-     * If the breadcrumbs should wrap or not
+     * Whether the breadcrumbs should wrap or not
      */
     wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
 }
-declare const Breadcrumbs: import('react').ForwardRefExoticComponent<(BreadcrumbsProps | BreadcrumbsWithItemProps) & import('react').RefAttributes<HTMLOListElement>>;
+declare const Breadcrumbs: (<TItem extends {
+    label: string;
+}>(props: (BreadcrumbsProps | BreadcrumbsWithItemProps<TItem>) & {
+    ref?: Ref<HTMLOListElement>;
+}) => ReactNode) & {
+    displayName: string;
+};
 export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -1,30 +1,41 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m, Fragment as d } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as d, Fragment as m } from "react";
 import { Breadcrumbs as p } from "react-aria-components";
 import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.js";
-import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.js";
-import { breadcrumbsVariant as l } from "./Breadcrumbs.variant.js";
-const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(d, { children: t(a) }, `${a.label}${a.href}`)), w = m(({ items: o, children: r, wrap: t = "nowrap", ...a }, i) => {
-  const { base: c } = l({ wrap: t }), n = u(), s = n === "xs" || n === "sm";
-  return /* @__PURE__ */ e(
-    f,
+import { BreadcrumbsProvider as l } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
+const b = (a, o, n) => a ? o.length === 0 ? null : n(o.at(o.length === 1 ? 0 : -2)) : o.map((r, t) => {
+  const e = "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`;
+  return /* @__PURE__ */ s(m, { children: n(r) }, e);
+});
+function B({
+  items: a,
+  children: o,
+  wrap: n = "nowrap",
+  ...r
+}, t) {
+  const { base: e } = f({ wrap: n }), i = u(), c = i === "xs" || i === "sm";
+  return /* @__PURE__ */ s(
+    l,
     {
-      wrap: t,
-      isMobile: s,
-      isStaticApi: o === void 0,
-      children: /* @__PURE__ */ e(
+      wrap: n,
+      isMobile: c,
+      isStaticApi: a === void 0,
+      children: /* @__PURE__ */ s(
         p,
         {
           "data-dd-privacy": "allow",
-          ref: i,
-          className: c(),
-          ...a,
-          children: o ? b(s, o, r) : r
+          ref: t,
+          className: e(),
+          ...r,
+          children: a ? b(c, a, o) : o
         }
       )
     }
   );
-});
+}
+const y = d(B);
+y.displayName = "Breadcrumbs";
 export {
-  w as Breadcrumbs
+  y as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -2,7 +2,7 @@ import { uyTv as a } from "@payfit/unity-themes";
 const r = a({
   slots: {
     base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
-    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:sm:items-center"
+    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:items-center"
   },
   variants: {
     wrap: {