@payfit/unity-components 2.31.0 → 2.31.2

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

@@ -1,18 +1,19 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { useState as v, useRef as C, isValidElement as I, cloneElement as O } from "react";
 import { uyMerge as g } from "@payfit/unity-themes";
 import { FormattedMessage as h, useIntl as V } from "react-intl";
-import { Actionable as x } from "../../actionable/Actionable.js";
+import { Actionable as w } from "../../actionable/Actionable.js";
 import { Avatar as z } from "../../avatar/Avatar.js";
 import { AvatarFallback as F } from "../../avatar/parts/AvatarFallback.js";
 import { AvatarImage as H } from "../../avatar/parts/AvatarImage.js";
 import { Badge as j } from "../../badge/Badge.js";
-import { Icon as M } from "../../icon/Icon.js";
+import { Icon as x } from "../../icon/Icon.js";
 import { Menu as k } from "../../menu/Menu.js";
 import { MenuContent as E } from "../../menu/parts/MenuContent.js";
 import { MenuHeader as S } from "../../menu/parts/MenuHeader.js";
-import { useAppMenuContext as B } from "./AppMenu.context.js";
-const w = (t) => /* @__PURE__ */ l(
+import { MenuTrigger as B } from "../../menu/parts/MenuTrigger.js";
+import { useAppMenuContext as R } from "./AppMenu.context.js";
+const M = (t) => /* @__PURE__ */ n(
   z,
   {
     "aria-label": `${t.title} avatar`,
@@ -27,48 +28,48 @@ const w = (t) => /* @__PURE__ */ l(
       })
     ]
   }
-), R = ({
+), q = ({
   avatar: t,
-  avatarPair: a,
-  title: n,
-  uploadAvatarCallback: y,
+  avatarPair: r,
+  title: u,
+  uploadAvatarCallback: d,
   uploadAvatarLabel: s,
-  uploadAvatarDescription: r
+  uploadAvatarDescription: i
 }) => {
-  const [o, u] = v(!0), c = V(), i = () => {
-    a && u((f) => !f);
-  }, d = g(
+  const [o, l] = v(!0), c = V(), a = () => {
+    r && l((m) => !m);
+  }, y = g(
     "uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"
   );
-  return /* @__PURE__ */ l(
-    x,
+  return /* @__PURE__ */ n(
+    w,
     {
       "aria-describedby": "profile-picture-change-desc",
       "aria-label": s || c.formatMessage({
         id: "unity:component:app-menu:footer:profile-button:avatar:change",
         defaultMessage: "Change profile picture"
       }),
-      className: d,
-      onHoverStart: i,
-      onHoverEnd: i,
-      onFocus: i,
-      onBlur: i,
+      className: y,
+      onHoverStart: a,
+      onHoverEnd: a,
+      onFocus: a,
+      onBlur: a,
       onPress: () => {
-        y?.();
+        d?.();
       },
       children: [
         /* @__PURE__ */ e(
-          w,
+          M,
           {
             avatar: t,
-            avatarPair: a,
-            title: n,
+            avatarPair: r,
+            title: u,
             isPairAvatarVisible: o
           }
         ),
-        /* @__PURE__ */ l("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-90 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-75 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__ */ n("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-90 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-75 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(
-            M,
+            x,
             {
               alt: "Camera",
               color: "content.inverted",
@@ -76,7 +77,7 @@ const w = (t) => /* @__PURE__ */ l(
               src: "CameraOutlined"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: r || /* @__PURE__ */ e(
+          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: i || /* @__PURE__ */ e(
             h,
             {
               id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
@@ -89,36 +90,36 @@ const w = (t) => /* @__PURE__ */ l(
   );
 }, b = ({
   asMenuHeader: t = !1,
-  avatar: a,
-  avatarPair: n,
-  badgeLabel: y,
+  avatar: r,
+  avatarPair: u,
+  badgeLabel: d,
   description: s,
-  menuTriggerDescription: r,
+  menuTriggerDescription: i,
   title: o,
-  uploadAvatarCallback: u,
+  uploadAvatarCallback: l,
   uploadAvatarLabel: c,
-  uploadAvatarDescription: i
-}) => /* @__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: u ? /* @__PURE__ */ e(
-    R,
+  uploadAvatarDescription: a
+}) => /* @__PURE__ */ n("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: l ? /* @__PURE__ */ e(
+    q,
     {
-      avatar: a,
-      avatarPair: n,
+      avatar: r,
+      avatarPair: u,
       title: o,
       uploadAvatarLabel: c,
-      uploadAvatarDescription: i,
-      uploadAvatarCallback: u
+      uploadAvatarDescription: a,
+      uploadAvatarCallback: l
     }
   ) : /* @__PURE__ */ e(
-    w,
+    M,
     {
-      avatar: a,
-      avatarPair: n,
+      avatar: r,
+      avatarPair: u,
       title: o,
       isPairAvatarVisible: !0
     }
   ) }),
-  /* @__PURE__ */ l("div", { className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow", children: [
+  /* @__PURE__ */ n("div", { className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow", children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -136,7 +137,7 @@ const w = (t) => /* @__PURE__ */ l(
         children: s
       }
     ),
-    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: r || /* @__PURE__ */ e(
+    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: i || /* @__PURE__ */ e(
       h,
       {
         id: "unity:component:app-menu:footer:profile-button:description",
@@ -144,8 +145,8 @@ const w = (t) => /* @__PURE__ */ l(
       }
     ) })
   ] }),
-  /* @__PURE__ */ e("div", { className: "uy:p-100", children: t ? /* @__PURE__ */ e(j, { className: "uy:capitalize", variant: "neutral", children: y }) : /* @__PURE__ */ e(
-    M,
+  /* @__PURE__ */ e("div", { className: "uy:p-100", children: t ? /* @__PURE__ */ e(j, { className: "uy:capitalize", variant: "neutral", children: d }) : /* @__PURE__ */ e(
+    x,
     {
       src: "CaretUpDownOutlined",
       alt: "open",
@@ -153,27 +154,27 @@ const w = (t) => /* @__PURE__ */ l(
       color: "content.neutral.low"
     }
   ) })
-] }), L = ({
+] }), te = ({
   avatar: t,
-  avatarPair: a,
-  badgeLabel: n,
-  children: y,
+  avatarPair: r,
+  badgeLabel: u,
+  children: d,
   computeSlot: s,
-  description: r,
+  description: i,
   title: o,
-  menuTriggerDescription: u,
+  menuTriggerDescription: l,
   uploadAvatarCallback: c,
-  uploadAvatarLabel: i,
-  uploadAvatarDescription: d,
-  updateNotificationSlot: f
+  uploadAvatarLabel: a,
+  uploadAvatarDescription: y,
+  updateNotificationSlot: m
 }) => {
-  const { isMobileMenuOpen: N } = B(), [P, p] = v(!1), m = C(null), A = g(
+  const { isMobileMenuOpen: N } = R(), [P, f] = v(!1), p = C(null), A = g(
     "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-10 uy:bg-canvas",
     "uy:p-150",
     "uy:md:static uy:md:mt-auto uy:md:p-0 uy:md:bg-[transparent]",
     "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block"
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "aside",
     {
       className: A,
@@ -181,55 +182,66 @@ const w = (t) => /* @__PURE__ */ l(
       id: "app-menu-profile-button",
       children: [
         s,
-        f,
-        /* @__PURE__ */ e(
-          x,
+        m,
+        /* @__PURE__ */ n(
+          k,
           {
-            ref: m,
-            className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:not-aria-disabled:active:bg-surface-neutral-low-active uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-active uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
-            "aria-labelledby": "profile-button-label",
-            "aria-describedby": "profile-button-description",
-            onPress: () => {
-              p(!0);
-            },
-            children: /* @__PURE__ */ e(
-              b,
-              {
-                avatar: t,
-                avatarPair: a,
-                badgeLabel: n,
-                description: r,
-                menuTriggerDescription: u,
-                title: o,
-                uploadAvatarCallback: c,
-                uploadAvatarLabel: i,
-                uploadAvatarDescription: d
-              }
-            )
+            isOpen: P,
+            onOpenChange: f,
+            placement: "top left",
+            triggerRef: p,
+            children: [
+              /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(
+                w,
+                {
+                  ref: p,
+                  className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:theme-legacy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:theme-rebrand:not-aria-disabled:hover:bg-surface-neutral-lowest-hover uy:theme-legacy:not-aria-disabled:active:bg-surface-neutral-low-active uy:theme-rebrand:not-aria-disabled:active:bg-surface-neutral-lowest-active uy:theme-legacy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-rebrand:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
+                  "aria-labelledby": "profile-button-label",
+                  "aria-describedby": "profile-button-description",
+                  onPress: () => {
+                    f(!0);
+                  },
+                  children: /* @__PURE__ */ e(
+                    b,
+                    {
+                      avatar: t,
+                      avatarPair: r,
+                      badgeLabel: u,
+                      description: i,
+                      menuTriggerDescription: l,
+                      title: o,
+                      uploadAvatarCallback: c,
+                      uploadAvatarLabel: a,
+                      uploadAvatarDescription: y
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ n(E, { width: 312, children: [
+                /* @__PURE__ */ e(S, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
+                  b,
+                  {
+                    asMenuHeader: !0,
+                    avatar: t,
+                    avatarPair: r,
+                    badgeLabel: u,
+                    description: i,
+                    menuTriggerDescription: l,
+                    title: o,
+                    uploadAvatarCallback: c,
+                    uploadAvatarLabel: a,
+                    uploadAvatarDescription: y
+                  }
+                ) }),
+                d
+              ] })
+            ]
           }
-        ),
-        /* @__PURE__ */ e(k, { isOpen: P, onOpenChange: p, children: /* @__PURE__ */ l(E, { width: 312, placement: "top left", triggerRef: m, children: [
-          /* @__PURE__ */ e(S, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
-            b,
-            {
-              asMenuHeader: !0,
-              avatar: t,
-              avatarPair: a,
-              badgeLabel: n,
-              description: r,
-              menuTriggerDescription: u,
-              title: o,
-              uploadAvatarCallback: c,
-              uploadAvatarLabel: i,
-              uploadAvatarDescription: d
-            }
-          ) }),
-          y
-        ] }) })
+        )
       ]
     }
   );
 };
 export {
-  L as AppMenuFooter
+  te as AppMenuFooter
 };

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

@@ -1,41 +1,51 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { Link as m } from "react-aria-components/Link";
-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,
-  brandLabel: a,
+import { useIntl as c } from "react-intl";
+import { useBreakpointListener as y, isMobileBreakpoint as f } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as h } from "../../button/Button.js";
+import { PayFitBrand as b } from "../../payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as g } from "../../payfit-brand/PayFitPreprod.js";
+import { useAppMenuContext as x } from "./AppMenu.context.js";
+const j = ({
+  environment: r,
+  brandLabel: i,
   notificationsComponent: t,
-  searchComponent: i,
-  renderLink: l = ({ children: e }) => /* @__PURE__ */ n(m, { href: "/", children: e })
+  searchComponent: l,
+  renderLink: s = ({ children: n }) => /* @__PURE__ */ e(m, { href: "/", children: n })
 }) => {
-  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: e ? "CloseOutlined" : "ListOutlined",
-        label: d.formatMessage({
-          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": e,
-        "aria-controls": "app-menu-nav-container app-menu-profile-button"
-      }
-    ) }),
-    /* @__PURE__ */ r("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
-      l({ children: p }),
-      t
+  const { isMobileMenuOpen: n, toggleMobileMenu: p } = x(), d = c(), u = y(), a = f(u);
+  return /* @__PURE__ */ o("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
+    /* @__PURE__ */ o("div", { className: "uy:flex uy:items-center", children: [
+      /* @__PURE__ */ e("div", { className: "uy:flex-1", children: s({ children: r === "prod" ? /* @__PURE__ */ e(
+        b,
+        {
+          label: i,
+          width: a ? 36 : 104,
+          showOnlyMonogram: a
+        }
+      ) : /* @__PURE__ */ e(g, { label: i, env: r }) }) }),
+      /* @__PURE__ */ o("div", { className: "uy:flex uy:gap-150", children: [
+        t,
+        /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ e(
+          h,
+          {
+            variant: "ghost",
+            color: "neutral",
+            prefixIcon: n ? "CloseOutlined" : "ListOutlined",
+            onPress: p,
+            "aria-expanded": n,
+            "aria-controls": "app-menu-nav-container app-menu-profile-button",
+            children: d.formatMessage({
+              id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+              defaultMessage: n ? "Close navigation" : "Open navigation"
+            })
+          }
+        ) })
+      ] })
     ] }),
-    /* @__PURE__ */ n("div", { className: "uy:hidden uy:md:flex", children: i })
+    /* @__PURE__ */ e("div", { className: "uy:hidden uy:md:flex", children: l })
   ] });
 };
 export {
-  O as AppMenuHeader
+  j as AppMenuHeader
 };

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

@@ -58,7 +58,7 @@ function G({
   triggerAriaLabel: o
 }) {
   return /* @__PURE__ */ b(R, { className: n, children: [
-    /* @__PURE__ */ b(T, { children: [
+    /* @__PURE__ */ b(T, { placement: "bottom start", children: [
       /* @__PURE__ */ a(K, { asChild: !0, children: /* @__PURE__ */ a(
         $,
         {
@@ -75,7 +75,7 @@ function G({
           )
         }
       ) }),
-      /* @__PURE__ */ a(H, { width: 248, placement: "bottom start", children: r.map((e) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a(H, { width: 248, children: r.map((e) => /* @__PURE__ */ a(
         L,
         {
           ...e.menuItemProps,

package/dist/esm/components/menu/Menu.d.ts

@@ -1,6 +1,10 @@
 import { MenuTriggerProps } from 'react-aria-components/Menu';
-type MenuProps = Omit<MenuTriggerProps, 'className' | 'style'>;
-export declare function Menu({ defaultOpen, children, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
+import { PopoverProps } from 'react-aria-components/Popover';
+type MenuProps = Omit<MenuTriggerProps, 'className' | 'style'> & {
+    placement?: PopoverProps['placement'];
+    triggerRef?: PopoverProps['triggerRef'];
+};
+export declare function Menu({ defaultOpen, children, triggerRef, placement, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }

package/dist/esm/components/menu/Menu.js

@@ -1,7 +1,29 @@
-import { jsx as o } from "react/jsx-runtime";
-import { MenuTrigger as i } from "react-aria-components/Menu";
-function m({ defaultOpen: r, children: e, ...n }) {
-  return /* @__PURE__ */ o(i, { defaultOpen: r, ...n, children: e });
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import y from "react";
+import { MenuTrigger as l, Popover as s } from "react-aria-components/Menu";
+function m({
+  defaultOpen: u,
+  children: o,
+  triggerRef: t,
+  placement: n,
+  ...a
+}) {
+  const [r, e] = y.Children.toArray(o);
+  if (!r || !e)
+    throw new Error("Menu must have a trigger and a menu content");
+  return /* @__PURE__ */ d(l, { defaultOpen: u, ...a, children: [
+    r,
+    /* @__PURE__ */ i(
+      s,
+      {
+        triggerRef: t,
+        placement: n,
+        className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300",
+        "data-dd-privacy": "allow",
+        children: e
+      }
+    )
+  ] });
 }
 m.displayName = "Menu";
 export {

package/dist/esm/components/menu/parts/MenuContent.d.ts

@@ -1,8 +1,14 @@
 import { PropsWithChildren } from 'react';
 import { PopoverProps } from 'react-aria-components/Popover';
 interface MenuContent {
+    /**
+     * @deprecated move it to the root Menu component
+     */
     placement?: PopoverProps['placement'];
     width?: number;
+    /**
+     * @deprecated move it to the root Menu component
+     */
     triggerRef?: PopoverProps['triggerRef'];
 }
 export declare function MenuContent({ children, placement, width, triggerRef, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/menu/parts/MenuContent.js

@@ -1,24 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Popover as a, Menu as y } from "react-aria-components/Menu";
-function d({
-  children: r,
-  placement: o,
-  width: u,
-  triggerRef: t
+import { uyTv as u } from "@payfit/unity-themes";
+import { Menu as o } from "react-aria-components/Menu";
+const m = u({
+  base: [
+    "uy:outline-none",
+    "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width)"
+  ]
+});
+function i({
+  children: t,
+  placement: r,
+  width: n,
+  triggerRef: c
 }) {
-  const n = u ? `uy:w-[${u}px] uy:min-w-[${u}px]` : "";
   return /* @__PURE__ */ e(
-    a,
+    o,
     {
-      triggerRef: t,
-      placement: o,
-      className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300",
-      "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ e(y, { autoFocus: "first", className: `${u ? "" : "uy:min-w-[320px]"} ${n}`, children: r })
+      className: m(),
+      style: {
+        "--uy-menu-content-width": n ? `${n}px` : "auto",
+        "--uy-menu-content-min-width": n ? "" : "calc(var(--uy-spacing) * 40)"
+      },
+      children: t
     }
   );
 }
-d.displayName = "MenuContent";
+i.displayName = "MenuContent";
 export {
-  d as MenuContent
+  i as MenuContent
 };

package/dist/esm/components/menu/parts/RawMenuItem.js

@@ -1,29 +1,37 @@
-import { jsxs as s, jsx as y } from "react/jsx-runtime";
-import { uyMerge as i } from "@payfit/unity-themes";
-import { MenuItem as l } from "react-aria-components/Menu";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { uyTv as l } from "@payfit/unity-themes";
+import { MenuItem as d } from "react-aria-components/Menu";
+const y = l({
+  base: [
+    "uy:cursor-pointer",
+    "uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral",
+    "uy:not-aria-disabled:data-[hovered=true]:bg-surface-neutral-hover",
+    "uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-pressed",
+    "uy:active:bg-surface-neutral-active",
+    "uy:focus-visible:outline-none uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-offset-2 uy:data-[focus-visible=true]:outline-utility-focus-ring",
+    "uy:aria-disabled:text-content-neutral-disabled uy:aria-disabled:cursor-not-allowed"
+  ]
+});
 function c({
   prefix: e,
-  children: u,
-  href: t,
-  onAction: r,
-  className: a,
-  isDisabled: n,
-  ...o
+  children: t,
+  href: u,
+  onAction: a,
+  className: r,
+  isDisabled: o,
+  ...s
 }) {
-  return /* @__PURE__ */ s(
-    l,
+  return /* @__PURE__ */ i(
+    d,
     {
-      href: t,
-      isDisabled: n,
-      onAction: r,
-      className: i(
-        "uy:cursor-pointer uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral uy:hover:bg-surface-neutral-hover uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-utility-focus-ring uy:active:bg-surface-neutral-active",
-        a
-      ),
-      ...o,
+      href: u,
+      isDisabled: o,
+      onAction: a,
+      className: y({ className: r }),
+      ...s,
       children: [
-        /* @__PURE__ */ y("div", { className: "uy:text-content-neutral-low", children: e || null }),
-        u
+        /* @__PURE__ */ n("div", { className: "uy:text-content-neutral-low", children: e || null }),
+        t
       ]
     }
   );