@payfit/unity-components 2.31.0 → 2.31.1

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
       ]
     }
   );

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,5 +1,5 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import o, { useState as j, useCallback as B, useMemo as D } from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import s, { useState as j, useCallback as B, useMemo as D } from "react";
 import { uyTv as S } from "@payfit/unity-themes";
 import { Button as _ } from "react-aria-components/Button";
 import $ from "../../../hooks/use-id.js";
@@ -8,6 +8,7 @@ import { navItemBase as z } from "./RawNavItem.js";
 const H = S({
   extend: z,
   slots: {
+    base: "uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid",
     caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
     contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
     content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
@@ -15,6 +16,14 @@ const H = S({
   variants: {
     expanded: {
       true: {
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active",
+          "uy:theme-rebrand:bg-surface-neutral uy:theme-rebrand:border-border-neutral uy:theme-rebrand:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
         caret: "uy:rotate-180",
         contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
         label: "uy:typography-body-strong",
@@ -24,30 +33,31 @@ const H = S({
         caret: "uy:rotate-0",
         contentWrapper: "uy:max-h-0 uy:overflow-hidden",
         content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
-        label: "uy:typography-body"
+        label: "uy:typography-body",
+        base: "uy:theme-rebrand:border-transparent"
       }
     }
   }
 });
 function M({
-  children: d,
-  label: p,
-  prefix: l,
-  suffix: y,
-  defaultExpanded: f = !1,
-  isExpanded: r,
+  children: m,
+  label: y,
+  prefix: o,
+  suffix: p,
+  defaultExpanded: b = !1,
+  isExpanded: l,
   onToggle: i,
-  ...N
+  ...f
 }) {
-  const u = $(), [x, b] = j(f), n = r !== void 0, a = n ? r : x, C = B(() => {
-    n || b((e) => !e), i?.(!a);
-  }, [n, a, i]), h = o.Children.map(d, (e) => o.isValidElement(e) ? o.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, m = `${u}-content`, {
+  const u = $(), [x, h] = j(b), n = l !== void 0, a = n ? l : x, N = B(() => {
+    n || h((e) => !e), i?.(!a);
+  }, [n, a, i]), C = s.Children.map(m, (e) => s.isValidElement(e) ? s.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, d = `${u}-content`, {
     baseClassName: v,
     prefixClassName: g,
-    labelClassName: I,
-    suffixClassName: W,
-    contentClassName: E,
-    contentWrapperClassName: w,
+    labelClassName: w,
+    suffixClassName: I,
+    contentClassName: W,
+    contentWrapperClassName: E,
     caretClassName: G
   } = D(() => {
     const e = H({ level: 0, expanded: a });
@@ -61,21 +71,21 @@ function M({
       caretClassName: e.caret()
     };
   }, [a]);
-  return /* @__PURE__ */ s("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ r("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ r(
       _,
       {
         id: c,
         className: v,
-        onPress: C,
+        onPress: N,
         "aria-expanded": a,
-        "aria-controls": m,
-        ...N,
+        "aria-controls": d,
+        ...f,
         children: [
-          l && /* @__PURE__ */ t("span", { className: g, children: l({ isExpanded: a }) }),
-          /* @__PURE__ */ t("span", { className: I, children: p }),
-          /* @__PURE__ */ s("span", { className: W, role: "presentation", children: [
-            y,
+          o && /* @__PURE__ */ t("span", { className: g, children: o({ isExpanded: a }) }),
+          /* @__PURE__ */ t("span", { className: w, children: y }),
+          /* @__PURE__ */ r("span", { className: I, role: "presentation", children: [
+            p,
             /* @__PURE__ */ t(
               k,
               {
@@ -93,16 +103,16 @@ function M({
     /* @__PURE__ */ t(
       "div",
       {
-        className: w,
+        className: E,
         style: { maxHeight: a ? 1e3 : 0 },
         children: /* @__PURE__ */ t(
           "ul",
           {
-            id: m,
-            className: E,
+            id: d,
+            className: W,
             "aria-labelledby": c,
             "aria-hidden": !a,
-            children: h
+            children: C
           }
         )
       }

package/dist/esm/components/nav/parts/RawNavItem.d.ts

@@ -57,8 +57,8 @@ export declare const navItemBase: import('tailwind-variants').TVReturnType<{
 declare const navItem: import('tailwind-variants').TVReturnType<{
     isActive: {
         true: {
-            base: string;
-            prefix: string;
+            base: string[];
+            prefix: string[];
             label: string;
         };
         false: {
@@ -160,8 +160,8 @@ export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWi
 export declare const RawNavItem: import('react').ForwardRefExoticComponent<Pick<VariantProps<import('tailwind-variants').TVReturnType<{
     isActive: {
         true: {
-            base: string;
-            prefix: string;
+            base: string[];
+            prefix: string[];
             label: string;
         };
         false: {

package/dist/esm/components/nav/parts/RawNavItem.js

@@ -1,17 +1,21 @@
-import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { jsx as u, jsxs as N } from "react/jsx-runtime";
 import { forwardRef as C, useMemo as I } from "react";
-import { uyTv as i, uyMerge as j } from "@payfit/unity-themes";
+import { uyTv as y, uyMerge as j } from "@payfit/unity-themes";
 import { Button as R } from "react-aria-components/Button";
 import { Link as A } from "react-aria-components/Link";
 import { useRouter as k } from "../../../providers/router/RouterProvider.js";
-const B = i({
+const B = y({
   slots: {
     base: [
-      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
-      "uy:hover:bg-surface-neutral-low-hover uy:active:bg-surface-neutral-low-active uy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:theme-legacy:rounded-75 uy:theme-rebrand:rounded-100 uy:outline-0 uy:transition-all uy:min-h-5.5 uy:md:min-h-auto",
+      "uy:bg-transparent uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid uy:theme-rebrand:border-transparent",
+      "uy:theme-legacy:data-[hovered]:bg-surface-neutral-low-hover",
+      "uy:theme-rebrand:data-[hovered]:bg-surface-neutral-lowest-hover uy:theme-rebrand:data-[hovered]:border-border-neutral-lowest-hover",
+      "uy:theme-legacy:active:bg-surface-neutral-low-active uy:theme-legacy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:theme-rebrand:active:bg-surface-neutral-lowest-active uy:theme-rebrand:active:border-border-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:border-border-neutral-lowest-pressed",
       "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
     ],
-    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    prefix: "uy:theme-legacy:p-25 uy:theme-rebrand:px-25 uy:empty:hidden uy:text-content-neutral-low",
     suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
     label: [
       "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
@@ -30,13 +34,19 @@ const B = i({
       false: ""
     }
   }
-}), M = i({
+}), M = y({
   extend: B,
   variants: {
     isActive: {
       true: {
-        base: "uy:bg-surface-neutral-low-active",
-        prefix: "uy:text-content-neutral",
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active uy:theme-rebrand:data-[level=1]:bg-surface-neutral-lowest-active",
+          "uy:theme-rebrand:data-[level=0]:bg-surface-neutral uy:theme-rebrand:data-[level=0]:border-1 uy:theme-rebrand:data-[level=0]:border-solid uy:theme-rebrand:data-[level=0]:border-border-neutral uy:theme-rebrand:data-[level=0]:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
         label: "uy:typography-body-strong"
       },
       false: {
@@ -48,53 +58,54 @@ const B = i({
   }
 }), _ = C(
   ({
-    children: y,
-    level: r = 0,
+    children: d,
+    level: s = 0,
     prefix: l,
     suffix: n,
-    onPress: c,
+    onPress: i,
     href: t,
-    isCurrent: f,
-    isDisabled: s = !1,
-    isExact: p = !1,
-    ...m
-  }, d) => {
-    const o = k(), b = t ? A : R, e = o && t ? o.isActive(t, p) : f, {
-      rawNavItemClassName: v,
-      labelClassName: x,
+    isCurrent: c,
+    isDisabled: r = !1,
+    isExact: m = !1,
+    ...b
+  }, p) => {
+    const o = k(), f = t ? A : R, e = o && t ? o.isActive(t, m) : c, {
+      rawNavItemClassName: h,
+      labelClassName: v,
       prefixClassName: g,
-      suffixClassName: N
+      suffixClassName: x
     } = I(() => {
-      const a = M({ level: r, isActive: e, isDisabled: s });
+      const a = M({ level: s, isActive: e, isDisabled: r });
       return {
         rawNavItemClassName: j(a.base(), a.label()),
         prefixClassName: a.prefix(),
         suffixClassName: a.suffix(),
         labelClassName: a.label()
       };
-    }, [e, s, r]), w = Object.assign(
+    }, [e, r, s]), w = Object.assign(
       {},
       e !== void 0 && {
         "data-current": e,
         "aria-current": e ? "page" : void 0
       },
-      !t && { tabIndex: s ? -1 : void 0 }
+      !t && { tabIndex: r ? -1 : void 0 }
     );
-    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
-      b,
+    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ N(
+      f,
       {
         ...w,
-        ...m,
-        ref: d,
-        className: v,
+        ...b,
+        ref: p,
+        className: h,
         href: t,
-        onPress: c,
-        isDisabled: s,
-        "data-level": r,
+        onPress: i,
+        isDisabled: r,
+        "data-level": s,
+        "data-selected": e,
         children: [
           l && /* @__PURE__ */ u("span", { className: g, children: l({ isCurrent: e ?? !1 }) }),
-          /* @__PURE__ */ u("span", { className: x, children: y }),
-          n && /* @__PURE__ */ u("span", { className: N, children: n })
+          /* @__PURE__ */ u("span", { className: v, children: d }),
+          n && /* @__PURE__ */ u("span", { className: x, children: n })
         ]
       }
     ) });

package/i18n/en-GB.json

@@ -15,8 +15,8 @@
   "unity:component:action-bar:key-shortcuts-text": "Use {keyShortcuts} to focus the action bar",
   "unity:component:action-bar:clear-selection-button": "Clear selection",
   "unity:component:action-bar:group:label": "Selection information",
-  "unity:component:app-menu:header:menu-open": "Open navigation",
-  "unity:component:app-menu:header:menu-close": "Close navigation",
+  "unity:component:app-menu:header:menu-open": "Menu",
+  "unity:component:app-menu:header:menu-close": "Close",
   "unity:component:app-menu:footer:profile-button:description": "Press this button to open the profile menu.",
   "unity:component:app-menu:footer:profile-button:avatar:change": "Change profile picture",
   "unity:component:app-menu:footer:profile-button:avatar:change-description": "Press enter to change profile picture",

package/i18n/es-ES.json

@@ -15,8 +15,8 @@
   "unity:component:action-bar:key-shortcuts-text": "Use {keyShortcuts} para enfocar la barra de acciones",
   "unity:component:action-bar:clear-selection-button": "Borrar selección",
   "unity:component:action-bar:group:label": "Información de selección",
-  "unity:component:app-menu:header:menu-open": "Abrir navegación",
-  "unity:component:app-menu:header:menu-close": "Cerrar navegación",
+  "unity:component:app-menu:header:menu-open": "Menú",
+  "unity:component:app-menu:header:menu-close": "Cerrar",
   "unity:component:app-menu:footer:profile-button:description": "Presione este botón para abrir el menú de perfil.",
   "unity:component:app-menu:footer:profile-button:avatar:change": "Cambiar foto de perfil",
   "unity:component:app-menu:footer:profile-button:avatar:change-description": "Presione enter para cambiar la foto de perfil",

package/i18n/fr-FR.json

@@ -15,8 +15,8 @@
   "unity:component:action-bar:key-shortcuts-text": "Appuyez sur {keyShortcuts} pour accéder à la barre d'actions",
   "unity:component:action-bar:clear-selection-button": "Effacer la sélection",
   "unity:component:action-bar:group:label": "Informations de sélection",
-  "unity:component:app-menu:header:menu-open": "Ouvrir la navigation",
-  "unity:component:app-menu:header:menu-close": "Fermer la navigation",
+  "unity:component:app-menu:header:menu-open": "Menu",
+  "unity:component:app-menu:header:menu-close": "Fermer",
   "unity:component:app-menu:footer:profile-button:description": "Appuyez sur ce bouton pour ouvrir le menu du profil.",
   "unity:component:app-menu:footer:profile-button:avatar:change": "Changer la photo de profil",
   "unity:component:app-menu:footer:profile-button:avatar:change-description": "Appuyez sur Entrée pour modifier la photo de profil",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.31.0",
+  "version": "2.31.1",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.31.0",
+    "@payfit/unity-illustrations": "2.31.1",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.31.0",
-    "@payfit/unity-themes": "2.31.0",
+    "@payfit/unity-icons": "2.31.1",
+    "@payfit/unity-themes": "2.31.1",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -89,9 +89,9 @@
     "@figma/code-connect": "1.4.3",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.31.0",
-    "@payfit/unity-illustrations": "2.31.0",
-    "@payfit/unity-themes": "2.31.0",
+    "@payfit/unity-icons": "2.31.1",
+    "@payfit/unity-illustrations": "2.31.1",
+    "@payfit/unity-themes": "2.31.1",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",