@payfit/unity-components 0.0.0-alpha.15 → 0.0.0-alpha.17

package/dist/esm/components/actionable/Actionable.d.ts

@@ -4,9 +4,11 @@ export interface ActionableProps extends AriaButtonProps {
     className?: string;
     /** set to true to remove the Actionable's base styles */
     isUnstyled?: boolean;
+    /** The HTML element to render the actionable as. */
+    asElement?: 'span' | 'div';
 }
 /**
  * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
  */
-declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Actionable };

package/dist/esm/components/actionable/Actionable.js

@@ -1,31 +1,72 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Button as i } from "react-aria-components";
-import { twMerge as n } from "tailwind-merge";
-import { tv as d } from "tailwind-variants";
-const m = d({
+import { jsx as D } from "react/jsx-runtime";
+import { forwardRef as H, useState as k } from "react";
+import { useFocusVisible as F, useHover as E, useFocus as w } from "@react-aria/interactions";
+import { useObjectRef as x, mergeProps as c } from "@react-aria/utils";
+import { useButton as N } from "react-aria";
+import { twMerge as S } from "tailwind-merge";
+import { tv as U } from "tailwind-variants";
+const V = U({
   base: "group",
   variants: {
     isUnstyled: {
       true: "",
-      false: "disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled"
+      false: "aria-disabled:uy-cursor-not-allowed aria-disabled:uy-text-content-neutral-disabled"
     }
   },
   defaultVariants: {
     isUnstyled: !1
   }
-}), f = l(
-  ({ children: t, className: e, isUnstyled: a = !1, ...o }, r) => /* @__PURE__ */ s(
-    i,
+}), j = H((d, s) => {
+  const {
+    asElement: i = "div",
+    isUnstyled: u = !1,
+    className: m,
+    children: o,
+    ...e
+  } = d;
+  s = x(s);
+  const { isFocusVisible: p } = F(), { isHovered: f, hoverProps: r } = E({
+    onHoverStart: e.onHoverStart,
+    onHoverEnd: e.onHoverEnd,
+    onHoverChange: e.onHoverChange,
+    isDisabled: e.isDisabled
+  }), [b, g] = k(!1), { focusProps: n } = w({
+    onFocusChange: g,
+    isDisabled: e.isDisabled
+  }), { buttonProps: a, isPressed: v } = N(
     {
-      ref: r,
-      className: n(m({ isUnstyled: a }), e),
-      ...o,
-      children: t
+      ...e,
+      elementType: i
+    },
+    s
+  ), P = i, C = (t) => {
+    if (e.isDisabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
     }
-  )
-);
-f.displayName = "Actionable";
+    const l = c(a, r, n);
+    l.onClick && l.onClick(t);
+  }, h = c(a, r, n), { onClick: A, ...y } = h;
+  return /* @__PURE__ */ D(
+    P,
+    {
+      ...y,
+      onClick: C,
+      className: S(V({ isUnstyled: u }), m),
+      ref: s,
+      children: typeof o == "function" ? o({
+        isHovered: f,
+        isPressed: v,
+        isFocused: b,
+        isDisabled: !!e.isDisabled,
+        isFocusVisible: p,
+        isPending: !1,
+        defaultChildren: null
+      }) : o
+    }
+  );
+});
+j.displayName = "Actionable";
 export {
-  f as Actionable
+  j as Actionable
 };

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

@@ -1,48 +1,47 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { useState as M, isValidElement as N, cloneElement as w } from "react";
-import { FormattedMessage as p, useIntl as P } from "react-intl";
-import { twMerge as b } from "tailwind-merge";
-import { Actionable as g } from "../../actionable/Actionable.js";
-import { Avatar as V } from "../../avatar/Avatar.js";
-import { AvatarFallback as z } from "../../avatar/parts/AvatarFallback.js";
-import { AvatarImage as F } from "../../avatar/parts/AvatarImage.js";
-import { Badge as H } from "../../badge/Badge.js";
-import { Icon as h } from "../../icon/Icon.js";
-import { Menu as I } from "../../menu/Menu.js";
-import { MenuContent as j } from "../../menu/parts/MenuContent.js";
-import { MenuHeader as A } from "../../menu/parts/MenuHeader.js";
-import { MenuTrigger as E } from "../../menu/parts/MenuTrigger.js";
-import { useAppMenuContext as O } from "./AppMenu.context.js";
-const v = (t) => /* @__PURE__ */ u(
-  V,
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as g, useRef as I, isValidElement as O, cloneElement as V } from "react";
+import { FormattedMessage as v, useIntl as z } from "react-intl";
+import { twMerge as h } from "tailwind-merge";
+import { Actionable as x } from "../../actionable/Actionable.js";
+import { Avatar as F } from "../../avatar/Avatar.js";
+import { AvatarFallback as H } from "../../avatar/parts/AvatarFallback.js";
+import { AvatarImage as j } from "../../avatar/parts/AvatarImage.js";
+import { Badge as A } from "../../badge/Badge.js";
+import { Icon as M } from "../../icon/Icon.js";
+import { Menu as E } from "../../menu/Menu.js";
+import { MenuContent as S } from "../../menu/parts/MenuContent.js";
+import { MenuHeader as B } from "../../menu/parts/MenuHeader.js";
+import { useAppMenuContext as C } from "./AppMenu.context.js";
+const N = (t) => /* @__PURE__ */ l(
+  F,
   {
     "aria-label": `${t.title} avatar`,
     size: "md",
     variant: "square",
     "aria-labelledby": "profile-button-label",
     children: [
-      /* @__PURE__ */ e(F, { src: t.avatar, alt: t.title ?? "" }),
-      /* @__PURE__ */ e(z, { variant: "initials", delayMs: 100, children: t.title }),
-      t.avatarPair && N(t.avatarPair) && w(t.avatarPair, {
+      /* @__PURE__ */ e(j, { src: t.avatar, alt: t.title ?? "" }),
+      /* @__PURE__ */ e(H, { variant: "initials", delayMs: 100, children: t.title }),
+      t.avatarPair && O(t.avatarPair) && V(t.avatarPair, {
         isHidden: !t.isPairAvatarVisible
       })
     ]
   }
-), S = ({
+), R = ({
   avatar: t,
-  avatarPair: r,
-  title: a,
-  uploadAvatarCallback: l,
+  avatarPair: n,
+  title: u,
+  uploadAvatarCallback: a,
   uploadAvatarLabel: c,
-  uploadAvatarDescription: n
+  uploadAvatarDescription: r
 }) => {
-  const [o, s] = M(!0), y = P(), i = () => {
-    r && s((m) => !m);
-  }, d = b(
+  const [o, s] = g(!0), y = z(), i = () => {
+    n && s((f) => !f);
+  }, d = h(
     "uy-group uy-relative uy-leading-[0] uy-rounded-75 focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2"
   );
-  return /* @__PURE__ */ u(
-    g,
+  return /* @__PURE__ */ l(
+    x,
     {
       "aria-describedby": "profile-picture-change-desc",
       "aria-label": c || y.formatMessage({
@@ -55,21 +54,21 @@ const v = (t) => /* @__PURE__ */ u(
       onFocus: i,
       onBlur: i,
       onPress: () => {
-        l == null || l();
+        a == null || a();
       },
       children: [
         /* @__PURE__ */ e(
-          v,
+          N,
           {
             avatar: t,
-            avatarPair: r,
-            title: a,
+            avatarPair: n,
+            title: u,
             isPairAvatarVisible: o
           }
         ),
-        /* @__PURE__ */ u("div", { className: "uy-flex uy-pointer-events-none uy-opacity-0 group-hover:uy-opacity-70 group-hover:uy-pointer-events-auto group-focus-visible:uy-opacity-70 group-focus-visible:uy-pointer-events-auto uy-bg-utility-backdrop uy-rounded-circle uy-absolute uy-top-0 uy-left-0 uy-w-full uy-h-full uy-transition-all uy-duration-200 uy-items-center uy-justify-center", children: [
+        /* @__PURE__ */ l("div", { className: "uy-flex uy-pointer-events-none uy-opacity-0 group-hover:uy-opacity-70 group-hover:uy-pointer-events-auto group-focus-visible:uy-opacity-70 group-focus-visible:uy-pointer-events-auto uy-bg-utility-backdrop uy-rounded-circle uy-absolute uy-top-0 uy-left-0 uy-w-full uy-h-full uy-transition-all uy-duration-200 uy-items-center uy-justify-center", children: [
           /* @__PURE__ */ e(
-            h,
+            M,
             {
               alt: "Camera",
               color: "content.inverted",
@@ -77,8 +76,8 @@ const v = (t) => /* @__PURE__ */ u(
               src: "CameraOutlined"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "uy-sr-only", id: "profile-picture-change-desc", children: n || /* @__PURE__ */ e(
-            p,
+          /* @__PURE__ */ e("span", { className: "uy-sr-only", id: "profile-picture-change-desc", children: r || /* @__PURE__ */ e(
+            v,
             {
               id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
               defaultMessage: "Press enter to change profile picture"
@@ -88,38 +87,38 @@ const v = (t) => /* @__PURE__ */ u(
       ]
     }
   );
-}, f = ({
+}, b = ({
   asMenuHeader: t = !1,
-  avatar: r,
-  avatarPair: a,
-  badgeLabel: l,
+  avatar: n,
+  avatarPair: u,
+  badgeLabel: a,
   description: c,
-  menuTriggerDescription: n,
+  menuTriggerDescription: r,
   title: o,
   uploadAvatarCallback: s,
   uploadAvatarLabel: y,
   uploadAvatarDescription: i
-}) => /* @__PURE__ */ u("div", { className: "uy-min-w-[240px] uy-w-full uy-flex uy-items-center", children: [
+}) => /* @__PURE__ */ l("div", { className: "uy-min-w-[240px] uy-w-full uy-flex uy-items-center", children: [
   /* @__PURE__ */ e("div", { className: "uy-mr-150 uy-flex uy-items-center", children: s ? /* @__PURE__ */ e(
-    S,
+    R,
     {
-      avatar: r,
-      avatarPair: a,
+      avatar: n,
+      avatarPair: u,
       title: o,
       uploadAvatarLabel: y,
       uploadAvatarDescription: i,
       uploadAvatarCallback: s
     }
   ) : /* @__PURE__ */ e(
-    v,
+    N,
     {
-      avatar: r,
-      avatarPair: a,
+      avatar: n,
+      avatarPair: u,
       title: o,
       isPairAvatarVisible: !0
     }
   ) }),
-  /* @__PURE__ */ u("div", { className: "uy-flex uy-flex-col uy-text-left uy-leading-125 uy-min-w-[50%] uy-flex-grow", children: [
+  /* @__PURE__ */ l("div", { className: "uy-flex uy-flex-col uy-text-left uy-leading-125 uy-min-w-[50%] uy-flex-grow", children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -137,16 +136,16 @@ const v = (t) => /* @__PURE__ */ u(
         children: c
       }
     ),
-    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy-sr-only", children: n || /* @__PURE__ */ e(
-      p,
+    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy-sr-only", children: r || /* @__PURE__ */ e(
+      v,
       {
         id: "unity:component:app-menu:footer:profile-button:description",
         defaultMessage: "Press this button to open the profile menu."
       }
     ) })
   ] }),
-  /* @__PURE__ */ e("div", { className: "uy-p-100", children: t ? /* @__PURE__ */ e(H, { className: "uy-capitalize", variant: "neutral", children: l }) : /* @__PURE__ */ e(
-    h,
+  /* @__PURE__ */ e("div", { className: "uy-p-100", children: t ? /* @__PURE__ */ e(A, { className: "uy-capitalize", variant: "neutral", children: a }) : /* @__PURE__ */ e(
+    M,
     {
       src: "CaretUpDownOutlined",
       alt: "open",
@@ -154,79 +153,81 @@ const v = (t) => /* @__PURE__ */ u(
       color: "content.neutral.low"
     }
   ) })
-] }), k = ({
+] }), D = ({
   avatar: t,
-  avatarPair: r,
-  badgeLabel: a,
-  children: l,
+  avatarPair: n,
+  badgeLabel: u,
+  children: a,
   computeSlot: c,
-  description: n,
+  description: r,
   title: o,
   menuTriggerDescription: s,
   uploadAvatarCallback: y,
   uploadAvatarLabel: i,
   uploadAvatarDescription: d
 }) => {
-  const { isMobileMenuOpen: m } = O(), x = b(
+  const { isMobileMenuOpen: f } = C(), [w, m] = g(!1), p = I(null), P = h(
     "uy-fixed uy-bottom-0 uy-left-0 uy-right-0 uy-z-10 uy-bg-canvas",
     "uy-p-150",
     "md:uy-static md:uy-mt-auto md:uy-p-0 md:uy-bg-[transparent]",
     "data-[mobile-open=false]:uy-hidden md:data-[mobile-open=false]:uy-block data-[mobile-open=true]:uy-block"
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ l(
     "aside",
     {
-      className: x,
-      "data-mobile-open": m,
+      className: P,
+      "data-mobile-open": f,
       id: "app-menu-profile-button",
       children: [
         c,
-        /* @__PURE__ */ u(I, { children: [
-          /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
-            g,
-            {
-              className: "uy-rounded-75 uy-px-150 uy-py-100 uy-w-full enabled:hover:uy-bg-surface-neutral-hover enabled:active:uy-bg-surface-neutral-active enabled:data-[pressed]:uy-bg-surface-neutral-active enabled:focus-visible:uy-outline-none enabled:focus-visible:uy-ring-2 enabled:focus-visible:uy-ring-utility-focus-ring enabled:focus-visible:uy-ring-offset-2",
-              "aria-labelledby": "profile-button-label",
-              "aria-describedby": "profile-button-description",
-              children: /* @__PURE__ */ e(
-                f,
-                {
-                  avatar: t,
-                  avatarPair: r,
-                  badgeLabel: a,
-                  description: n,
-                  menuTriggerDescription: s,
-                  title: o,
-                  uploadAvatarCallback: y,
-                  uploadAvatarLabel: i,
-                  uploadAvatarDescription: d
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ u(j, { width: 312, placement: "top left", children: [
-            /* @__PURE__ */ e(A, { className: "uy-rounded-75", children: /* @__PURE__ */ e(
-              f,
+        /* @__PURE__ */ e(
+          x,
+          {
+            ref: p,
+            className: "uy-rounded-75 uy-px-150 uy-py-100 uy-w-full enabled:hover:uy-bg-surface-neutral-hover enabled:active:uy-bg-surface-neutral-active enabled:data-[pressed]:uy-bg-surface-neutral-active enabled:focus-visible:uy-outline-none enabled:focus-visible:uy-ring-2 enabled:focus-visible:uy-ring-utility-focus-ring enabled:focus-visible:uy-ring-offset-2",
+            "aria-labelledby": "profile-button-label",
+            "aria-describedby": "profile-button-description",
+            onPress: () => {
+              m(!0);
+            },
+            children: /* @__PURE__ */ e(
+              b,
               {
-                asMenuHeader: !0,
                 avatar: t,
-                avatarPair: r,
-                badgeLabel: a,
-                description: n,
+                avatarPair: n,
+                badgeLabel: u,
+                description: r,
                 menuTriggerDescription: s,
                 title: o,
                 uploadAvatarCallback: y,
                 uploadAvatarLabel: i,
                 uploadAvatarDescription: d
               }
-            ) }),
-            l
-          ] })
-        ] })
+            )
+          }
+        ),
+        /* @__PURE__ */ e(E, { isOpen: w, onOpenChange: m, children: /* @__PURE__ */ l(S, { width: 312, placement: "top left", triggerRef: p, children: [
+          /* @__PURE__ */ e(B, { className: "uy-rounded-75", children: /* @__PURE__ */ e(
+            b,
+            {
+              asMenuHeader: !0,
+              avatar: t,
+              avatarPair: n,
+              badgeLabel: u,
+              description: r,
+              menuTriggerDescription: s,
+              title: o,
+              uploadAvatarCallback: y,
+              uploadAvatarLabel: i,
+              uploadAvatarDescription: d
+            }
+          ) }),
+          a
+        ] }) })
       ]
     }
   );
 };
 export {
-  k as AppMenuFooter
+  D as AppMenuFooter
 };

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.d.ts

@@ -4,17 +4,17 @@ import { VariantProps } from 'tailwind-variants';
 export declare const autocompleteItemGroup: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            separator?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
-            separator?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -24,17 +24,17 @@ export declare const autocompleteItemGroup: import('tailwind-variants').TVReturn
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            separator?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            separator?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -48,9 +48,9 @@ export declare const autocompleteItemGroup: import('tailwind-variants').TVReturn
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            separator?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/esm/components/autocomplete/parts/AutocompletePanel.d.ts

@@ -5,15 +5,15 @@ import { AutocompleteProps } from '../Autocomplete.js';
 export declare const autocompletePanel: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            list?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
-            list?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -22,15 +22,15 @@ export declare const autocompletePanel: import('tailwind-variants').TVReturnType
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            list?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            list?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -42,8 +42,8 @@ export declare const autocompletePanel: import('tailwind-variants').TVReturnType
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            list?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -6,7 +6,7 @@ import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.
 const g = x({
   slots: {
     overlay: [
-      "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto",
+      "uy-fixed uy-inset-0 uy-z-30 uy-overflow-y-auto",
       "uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
       "data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"
     ],

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.d.ts

@@ -3,18 +3,18 @@ import { VariantProps } from 'tailwind-variants';
 export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
     };
@@ -26,18 +26,18 @@ export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
     };
@@ -54,9 +54,9 @@ export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
     };

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

@@ -15,7 +15,7 @@ export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBre
      */
     wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
 }
-export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant> {
+export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
     /**
      * The list of items to render, when using the dynamic API.
      */

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

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

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -5,5 +5,5 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
     /** The text of the breadcrumb */
     label: string;
 }
-declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLSpanElement | HTMLLIElement>>;
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
 export { Breadcrumb };