@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/action-bar/ActionBar.js

@@ -1,17 +1,17 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import P, { forwardRef as T, useCallback as j, isValidElement as z } from "react";
-import { uyTv as D } from "@payfit/unity-themes";
-import { Toolbar as R, Group as y } from "react-aria-components";
+import P, { forwardRef as T, useCallback as R, isValidElement as j } from "react";
+import { uyTv as z } from "@payfit/unity-themes";
+import { Toolbar as D, Group as y } from "react-aria-components";
 import { useIntl as S, FormattedMessage as l } from "react-intl";
 import { Button as _ } from "../button/Button.js";
 import { IconButton as E } from "../icon-button/IconButton.js";
 import { Icon as F } from "../icon/Icon.js";
 import { Menu as G } from "../menu/Menu.js";
 import { MenuContent as K } from "../menu/parts/MenuContent.js";
-import { MenuItem as L } from "../menu/parts/MenuItem.js";
-import { MenuTrigger as O } from "../menu/parts/MenuTrigger.js";
+import { MenuTrigger as L } from "../menu/parts/MenuTrigger.js";
+import { RawMenuItem as O } from "../menu/parts/RawMenuItem.js";
 import { ActionBarAction as U } from "./parts/ActionBarAction.js";
-const V = D({
+const V = z({
   slots: {
     base: [
       "uy:bg-surface-inverted uy:text-content-inverted",
@@ -46,14 +46,14 @@ const V = D({
     const { base: g, selectionArea: x, selectionCountText: A, actionArea: M } = V(), m = S(), s = a !== void 0 && typeof r == "function", k = i["aria-keyshortcuts"] !== void 0, B = p ?? m.formatMessage({
       id: "unity:component:action-bar:toolbar-label",
       defaultMessage: "Bulk actions toolbar"
-    }), I = j(() => {
+    }), I = R(() => {
       if (s) {
         const e = r;
         return a.map((o, N) => e(o, N));
       }
       return r;
-    }, [r, a, s]), C = !!r || "actions" in i && i.actions.length > 0, w = s ? a.filter((e) => e.variant !== "primary") : P.Children.map(r, (e) => {
-      if (!z(e) || e.type !== U)
+    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, C = s ? a.filter((e) => e.variant !== "primary") : P.Children.map(r, (e) => {
+      if (!j(e) || e.type !== U)
         return null;
       const o = e.props;
       return o.variant === "primary" ? null : {
@@ -66,7 +66,7 @@ const V = D({
       };
     })?.filter(Boolean);
     return /* @__PURE__ */ n(
-      R,
+      D,
       {
         ...i,
         id: d,
@@ -126,7 +126,7 @@ const V = D({
               ]
             }
           ),
-          C && /* @__PURE__ */ n(
+          w && /* @__PURE__ */ n(
             y,
             {
               className: M(),
@@ -135,7 +135,7 @@ const V = D({
               children: [
                 I(),
                 /* @__PURE__ */ t("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(G, { children: [
-                  /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
+                  /* @__PURE__ */ t(L, { asChild: !0, children: /* @__PURE__ */ t(
                     E,
                     {
                       icon: "DotsThreeOutlined",
@@ -144,8 +144,8 @@ const V = D({
                       color: "inverted"
                     }
                   ) }),
-                  /* @__PURE__ */ t(K, { children: w.map((e) => /* @__PURE__ */ t(
-                    L,
+                  /* @__PURE__ */ t(K, { children: C.map((e) => /* @__PURE__ */ t(
+                    O,
                     {
                       onAction: () => {
                         e.onPress?.({});

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

@@ -1,10 +1,10 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as H, useState as k } from "react";
-import { uyTv as F } from "@payfit/unity-themes";
-import { useFocusVisible as E, useHover as x, useFocus as N } from "@react-aria/interactions";
-import { useObjectRef as S, mergeProps as p } from "@react-aria/utils";
-import { useButton as U } from "react-aria";
-const V = F({
+import { jsx as H } from "react/jsx-runtime";
+import { forwardRef as k, useState as F, useMemo as E } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useFocusVisible as x, useHover as S, useFocus as U } from "@react-aria/interactions";
+import { useObjectRef as V, mergeProps as f } from "@react-aria/utils";
+import { useButton as j } from "react-aria";
+const w = N({
   base: "uy:group",
   variants: {
     isUnstyled: {
@@ -19,45 +19,48 @@ const V = F({
   defaultVariants: {
     isUnstyled: !1
   }
-}), j = H((f, e) => {
+}), A = k((v, e) => {
   const {
     asElement: l = "div",
-    isUnstyled: m = !1,
-    className: v,
+    isUnstyled: d = !1,
+    className: c,
     children: o,
     ...s
-  } = f;
-  e = S(e);
-  const { isFocusVisible: i } = E(), { isHovered: a, hoverProps: d } = x({
+  } = v;
+  e = V(e);
+  const { isFocusVisible: i } = x(), { isHovered: a, hoverProps: u } = S({
     onHoverStart: s.onHoverStart,
     onHoverEnd: s.onHoverEnd,
     onHoverChange: s.onHoverChange,
     isDisabled: s.isDisabled
-  }), [t, D] = k(!1), { focusProps: c } = N({
+  }), [t, D] = F(!1), { focusProps: b } = U({
     onFocusChange: D,
     isDisabled: s.isDisabled
-  }), { buttonProps: u, isPressed: r } = U(
+  }), { buttonProps: m, isPressed: n } = j(
     {
       ...s,
       isDisabled: s.isDisabled,
       elementType: l
     },
     e
-  ), y = l, g = (n) => {
+  ), y = E(
+    () => w({ isUnstyled: d, className: c }),
+    [c, d]
+  ), g = l, C = (r) => {
     if (s.isDisabled) {
-      n.preventDefault(), n.stopPropagation();
+      r.preventDefault(), r.stopPropagation();
       return;
     }
-    const b = p(u, d, c);
-    b.onClick && b.onClick(n);
-  }, P = p(u, d, c), { onClick: w, ...h } = P;
-  return /* @__PURE__ */ C(
-    y,
+    const p = f(m, u, b);
+    p.onClick && p.onClick(r);
+  }, P = f(m, u, b), { onClick: M, ...h } = P;
+  return /* @__PURE__ */ H(
+    g,
     {
       ...h,
-      onClick: g,
-      className: V({ isUnstyled: m, className: v }),
-      ...r && { "data-pressed": r },
+      onClick: C,
+      className: y,
+      ...n && { "data-pressed": n },
       ...t && { "data-focused": t },
       ...a && { "data-hovered": a },
       ...s.isDisabled && { "data-disabled": s.isDisabled },
@@ -65,7 +68,7 @@ const V = F({
       ref: e,
       children: typeof o == "function" ? o({
         isHovered: a,
-        isPressed: r,
+        isPressed: n,
         isFocused: t,
         isDisabled: !!s.isDisabled,
         isFocusVisible: i,
@@ -75,7 +78,7 @@ const V = F({
     }
   );
 });
-j.displayName = "Actionable";
+A.displayName = "Actionable";
 export {
-  j as Actionable
+  A as Actionable
 };

package/dist/esm/components/alert/Alert.js

@@ -1,13 +1,13 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b } from "react";
 import { uyTv as g } from "@payfit/unity-themes";
-import { CircularIconButton as m } from "../icon-button/CircularIconButton.js";
-import { Icon as p } from "../icon/Icon.js";
-const w = g({
+import { CircularIconButton as a } from "../icon-button/CircularIconButton.js";
+import { Icon as w } from "../icon/Icon.js";
+const p = g({
   slots: {
-    base: "uy:p-200 uy:flex uy:gap-200 uy:border uy:border-solid uy:rounded-100",
-    content: "uy:flex uy:flex-col uy:flex-1 uy:gap-200 uy:pt-50 uy:pb-100",
-    icon: "uy:mt-50"
+    base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
+    content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200",
+    icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
   },
   variants: {
     variant: {
@@ -28,43 +28,55 @@ const w = g({
   defaultVariants: {
     variant: "info"
   }
-}), v = {
+}), x = {
   info: { src: "InfoFilled", color: "content.info" },
   warning: { src: "WarningFilled", color: "content.warning" },
   success: { src: "CheckCircleFilled", color: "content.success" },
   danger: { src: "WarningCircleFilled", color: "content.danger" }
-}, x = b(
+}, h = b(
   ({
-    children: o,
+    children: c,
     variant: e,
-    isDismissable: s,
-    onDismiss: n,
-    dismissButtonLabel: a,
-    ...t
-  }, c) => {
-    const { base: i, content: l, icon: u } = w({ variant: e }), d = v[e], y = {
+    isDismissable: o,
+    onDismiss: s,
+    dismissButtonLabel: n,
+    ...l
+  }, i) => {
+    const { base: u, content: d, icon: y } = p({ variant: e }), f = x[e], m = {
       role: e === "danger" ? "alert" : "status",
       "aria-live": e === "danger" ? "assertive" : "polite",
       "aria-atomic": !0,
       "aria-relevant": "additions removals"
     };
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ t(
       "div",
       {
         "data-dd-privacy": "mask",
-        ref: c,
-        className: i(),
-        ...y,
-        ...t,
+        ref: i,
+        className: u(),
+        ...m,
+        ...l,
         children: [
-          /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
-          /* @__PURE__ */ r("section", { className: l(), children: o }),
-          s && /* @__PURE__ */ r(
-            m,
+          /* @__PURE__ */ t("div", { className: y(), children: [
+            /* @__PURE__ */ r(w, { size: 24, ...f, alt: `${e} alert` }),
+            o && /* @__PURE__ */ r(
+              a,
+              {
+                title: n,
+                icon: "CloseOutlined",
+                onPress: s,
+                className: "uy:sm:hidden"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("section", { className: d(), children: c }),
+          o && /* @__PURE__ */ r(
+            a,
             {
-              title: a,
+              title: n,
               icon: "CloseOutlined",
-              onPress: n
+              onPress: s,
+              className: "uy:hidden uy:sm:flex"
             }
           )
         ]
@@ -72,7 +84,7 @@ const w = g({
     );
   }
 );
-x.displayName = "Alert";
+h.displayName = "Alert";
 export {
-  x as Alert
+  h as Alert
 };

package/dist/esm/components/alert/parts/AlertTitle.js

@@ -1,15 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { Text as m } from "../../text/Text.js";
-const l = i(
-  ({ children: e, asElement: t = "h3", ...o }, a) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
-    m,
+import { forwardRef as a } from "react";
+import { Text as i } from "../../text/Text.js";
+const l = a(
+  ({ children: e, asElement: t = "h3", ...m }, o) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
+    i,
     {
       variant: "h4",
       asElement: t,
-      ref: a,
-      className: "uy:pt-50",
-      ...o,
+      ref: o,
+      className: "uy:sm:pt-50",
+      ...m,
       children: e
     }
   ) })

package/dist/esm/components/app-layout/AppLayout.d.ts

@@ -23,5 +23,7 @@ export type AppLayoutProps = PropsWithChildren<{
 /**
  * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
  * Use this when you need a complex layout with a persistent navigation menu.
+ *
+ *  On mobile devices, the menu appears above the content, and the content area becomes scrollable while the menu remains static.
  */
 export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-layout/AppLayout.js

@@ -37,36 +37,36 @@ const w = x({
   }
 });
 function R({
-  children: y,
-  menu: l,
-  header: a,
+  children: l,
+  menu: a,
+  header: r,
   footer: u,
-  withoutContentPadding: n = !1
+  withoutContentPadding: p = !1
 }) {
-  const r = v(null), { height: o = 0 } = g({
-    ref: r,
+  const o = v(null), { height: y = 0 } = g({
+    ref: o,
     box: "border-box"
-  }), { body: p, header: s, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
-    withoutContentPadding: n
+  }), { body: s, header: n, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
+    withoutContentPadding: p
   }), m = {
-    "--uy-app-layout-menu-height": `calc(100dvh - ${o}px)`,
-    "--uy-app-layout-header-sticky-offset": `${o}px`
+    "--uy-app-layout-menu-height": `calc(100dvh - ${y}px)`,
+    "--uy-app-layout-header-sticky-offset": `${y}px`
   };
-  return /* @__PURE__ */ t("div", { className: p(), style: m, children: [
-    a && /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    r && /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
-        className: s(),
+        ref: o,
+        className: n(),
         role: "alert",
         "aria-live": "assertive",
-        children: a
+        children: r
       }
     ),
     /* @__PURE__ */ t("div", { className: i(), children: [
-      /* @__PURE__ */ e("div", { className: d(), children: l }),
+      a && /* @__PURE__ */ e("div", { className: d(), children: a }),
       /* @__PURE__ */ t("div", { className: c(), children: [
-        /* @__PURE__ */ e("div", { className: f(), children: y }),
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
         u && /* @__PURE__ */ e("footer", { className: h(), children: u })
       ] })
     ] })

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

@@ -12,7 +12,7 @@ import { Menu as j } from "../../menu/Menu.js";
 import { MenuContent as k } from "../../menu/parts/MenuContent.js";
 import { MenuHeader as E } from "../../menu/parts/MenuHeader.js";
 import { useAppMenuContext as S } from "./AppMenu.context.js";
-const N = (t) => /* @__PURE__ */ l(
+const w = (t) => /* @__PURE__ */ l(
   V,
   {
     "aria-label": `${t.title} avatar`,
@@ -30,12 +30,12 @@ const N = (t) => /* @__PURE__ */ l(
 ), B = ({
   avatar: t,
   avatarPair: a,
-  title: o,
+  title: n,
   uploadAvatarCallback: y,
   uploadAvatarLabel: s,
   uploadAvatarDescription: r
 }) => {
-  const [n, u] = v(!0), c = O(), i = () => {
+  const [o, u] = v(!0), c = O(), i = () => {
     a && u((f) => !f);
   }, d = 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"
@@ -58,12 +58,12 @@ const N = (t) => /* @__PURE__ */ l(
       },
       children: [
         /* @__PURE__ */ e(
-          N,
+          w,
           {
             avatar: t,
             avatarPair: a,
-            title: o,
-            isPairAvatarVisible: n
+            title: n,
+            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: [
@@ -90,11 +90,11 @@ const N = (t) => /* @__PURE__ */ l(
 }, b = ({
   asMenuHeader: t = !1,
   avatar: a,
-  avatarPair: o,
+  avatarPair: n,
   badgeLabel: y,
   description: s,
   menuTriggerDescription: r,
-  title: n,
+  title: o,
   uploadAvatarCallback: u,
   uploadAvatarLabel: c,
   uploadAvatarDescription: i
@@ -103,18 +103,18 @@ const N = (t) => /* @__PURE__ */ l(
     B,
     {
       avatar: a,
-      avatarPair: o,
-      title: n,
+      avatarPair: n,
+      title: o,
       uploadAvatarLabel: c,
       uploadAvatarDescription: i,
       uploadAvatarCallback: u
     }
   ) : /* @__PURE__ */ e(
-    N,
+    w,
     {
       avatar: a,
-      avatarPair: o,
-      title: n,
+      avatarPair: n,
+      title: o,
       isPairAvatarVisible: !0
     }
   ) }),
@@ -125,7 +125,7 @@ const N = (t) => /* @__PURE__ */ l(
         id: "profile-button-label",
         className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
         "data-dd-privacy": "mask",
-        children: n
+        children: o
       }
     ),
     /* @__PURE__ */ e(
@@ -156,17 +156,17 @@ const N = (t) => /* @__PURE__ */ l(
 ] }), D = ({
   avatar: t,
   avatarPair: a,
-  badgeLabel: o,
+  badgeLabel: n,
   children: y,
   computeSlot: s,
   description: r,
-  title: n,
+  title: o,
   menuTriggerDescription: u,
   uploadAvatarCallback: c,
   uploadAvatarLabel: i,
   uploadAvatarDescription: d
 }) => {
-  const { isMobileMenuOpen: f } = S(), [w, p] = v(!1), m = A(null), P = g(
+  const { isMobileMenuOpen: f } = S(), [N, p] = v(!1), m = A(null), P = 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]",
@@ -184,7 +184,7 @@ const N = (t) => /* @__PURE__ */ l(
           x,
           {
             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-hover uy:not-aria-disabled:active:bg-surface-neutral-active uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-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",
+            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: () => {
@@ -195,10 +195,10 @@ const N = (t) => /* @__PURE__ */ l(
               {
                 avatar: t,
                 avatarPair: a,
-                badgeLabel: o,
+                badgeLabel: n,
                 description: r,
                 menuTriggerDescription: u,
-                title: n,
+                title: o,
                 uploadAvatarCallback: c,
                 uploadAvatarLabel: i,
                 uploadAvatarDescription: d
@@ -206,17 +206,17 @@ const N = (t) => /* @__PURE__ */ l(
             )
           }
         ),
-        /* @__PURE__ */ e(j, { isOpen: w, onOpenChange: p, children: /* @__PURE__ */ l(k, { width: 312, placement: "top left", triggerRef: m, children: [
+        /* @__PURE__ */ e(j, { isOpen: N, onOpenChange: p, children: /* @__PURE__ */ l(k, { width: 312, placement: "top left", triggerRef: m, children: [
           /* @__PURE__ */ e(E, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
             b,
             {
               asMenuHeader: !0,
               avatar: t,
               avatarPair: a,
-              badgeLabel: o,
+              badgeLabel: n,
               description: r,
               menuTriggerDescription: u,
-              title: n,
+              title: o,
               uploadAvatarCallback: c,
               uploadAvatarLabel: i,
               uploadAvatarDescription: d

package/dist/esm/components/app-menu/parts/AppMenuHeader.d.ts

@@ -1,9 +1,91 @@
 import { ReactNode } from 'react';
-export interface AppMenuHeader {
-    environment: 'production' | 'working' | 'testing' | 'development' | 'local';
-    linkHref: string;
-    linkLabel: string;
+export interface AppMenuHeaderProps {
+    /**
+     * The application environment. Determines which brand logo variant to display.
+     */
+    environment: 'prod' | 'staging' | 'dev' | 'local';
+    /**
+     * Accessible label for the brand logo link.
+     */
+    brandLabel: string;
+    /**
+     * Optional notification component to display in the header.
+     */
     notificationsComponent?: ReactNode;
+    /**
+     * Optional search component to display in the header.
+     */
     searchComponent?: ReactNode;
+    /**
+     * Render function for the brand logo link. Enables integration with any routing library.
+     * Provides href and children (the logo component) for flexible link implementation.
+     * Defaults to React Aria's Link component, which works with Unity's RouterProvider for router-agnostic behavior.
+     * @example
+     * ```tsx
+     * // With Tanstack Router
+     * import { Link } from '@tanstack/react-router'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With React Router v5/v6
+     * import { Link } from 'react-router-dom'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With plain HTML link
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <a href={href}>{children}</a>
+     *   )}
+     * />
+     * ```
+     */
+    renderLink?: (props: {
+        children: ReactNode;
+    }) => ReactNode;
 }
-export declare const AppMenuHeader: ({ environment, linkHref, linkLabel, notificationsComponent, searchComponent, }: AppMenuHeader) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The header section of the AppMenu component, displaying the PayFit brand logo, search, and notifications.
+ * Provides a router-agnostic approach through a render prop pattern for the brand logo link.
+ * @param props - Component props
+ * @param props.environment - The application environment (determines brand logo variant)
+ * @param props.brandLabel - Accessible label for the brand logo link
+ * @param props.notificationsComponent - Optional notification component to display
+ * @param props.searchComponent - Optional search component to display
+ * @param props.renderLink - Optional render function for custom link implementation
+ * @example
+ * ```tsx
+ * import { AppMenuHeader } from '@payfit/unity-components'
+ *
+ * function AppShell() {
+ *   return (
+ *     <AppMenu>
+ *       <AppMenuHeader
+ *         environment="production"
+ *         linkHref="/"
+ *         linkLabel="PayFit Home"
+ *       />
+ *     </AppMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The brand logo automatically adapts based on the environment prop (production displays standard logo, others display pre-production variants)
+ * - By default, uses React Aria's Link component which integrates with Unity's RouterProvider
+ * - For router-specific implementations, pass a custom `renderLink` function with your router's Link component
+ * - On mobile viewports, displays a menu toggle button; on desktop, displays the brand logo with optional search and notifications
+ * @see {@link AppMenuHeaderProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/app-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+export declare const AppMenuHeader: ({ environment, brandLabel: linkLabel, notificationsComponent, searchComponent, renderLink, }: AppMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;