@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/alert/parts/AlertContent.d.ts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.js';
+type ContentElements = 'div' | 'p' | 'span';
+export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+};
+declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertContent };

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

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Text as n } from "../../text/Text.js";
+const a = m(
+  ({ children: r, ...t }, o) => /* @__PURE__ */ e(n, { variant: "body", ref: o, ...t, children: r })
+);
+a.displayName = "AlertContent";
+export {
+  a as AlertContent
+};

package/dist/esm/components/alert/parts/AlertTitle.d.ts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.js';
+type TitleElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type AlertTitleProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+};
+declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertTitle };

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

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+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: o,
+      className: "uy:sm:pt-50",
+      ...m,
+      children: e
+    }
+  ) })
+);
+l.displayName = "AlertTitle";
+export {
+  l as AlertTitle
+};

package/dist/esm/components/anchor/Anchor.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export type AnchorPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface AnchorProps {
+    children: [ReactElement, ReactElement];
+    position?: AnchorPosition;
+    offset?: number | [number, number];
+}
+/**
+ * The Anchor component is a primitive used to anchor a small component to a larger one in any of the large component's corners.
+ */
+declare const Anchor: {
+    ({ children, position, offset, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Anchor };

package/dist/esm/components/anchor/Anchor.js

@@ -0,0 +1,49 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { useMemo as h, cloneElement as n } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+const m = f({
+  slots: {
+    root: "uy:relative uy:inline-block uy:leading-[0]",
+    main: "uy:relative uy:leading-[0]",
+    anchor: "uy:absolute uy:leading-[0] uy:scale-100"
+  },
+  variants: {
+    position: {
+      "top-left": {
+        anchor: "uy:origin-top-left uy:-translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-left-[var(--anchor-offset-x)]"
+      },
+      "top-right": {
+        anchor: "uy:origin-top-right uy:translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-right-[var(--anchor-offset-x)]"
+      },
+      "bottom-right": {
+        anchor: "uy:origin-bottom-right uy:translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-right-[var(--anchor-offset-y)]"
+      },
+      "bottom-left": {
+        anchor: "uy:origin-bottom-left uy:-translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-left-[var(--anchor-offset-y)]"
+      }
+    }
+  }
+}), p = ({
+  children: e,
+  position: y = "top-right",
+  offset: t = 0
+}) => {
+  const [o, r] = e;
+  if (!o || !r)
+    throw new Error("Badge component requires exactly 2 children");
+  const i = h(() => Array.isArray(t) ? {
+    "--anchor-offset-x": `${t[0]}px`,
+    "--anchor-offset-y": `${t[1]}px`
+  } : {
+    "--anchor-offset-x": `${t}px`,
+    "--anchor-offset-y": `${t}px`
+  }, [t]), { root: l, main: s, anchor: c } = m({ position: y });
+  return /* @__PURE__ */ u("div", { className: l(), style: i, children: [
+    /* @__PURE__ */ a("div", { className: s(), children: n(o) }),
+    /* @__PURE__ */ a("div", { className: c(), children: n(r) })
+  ] });
+};
+p.displayName = "Anchor";
+export {
+  p as Anchor
+};

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

@@ -0,0 +1,29 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type AppLayoutProps = PropsWithChildren<{
+    /**
+     * The header component to be displayed at the top of the layout
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * The menu component to be displayed on the side of the layout
+     */
+    menu: ReactNode;
+    /**
+     * The footer component to be displayed at the bottom of the layout
+     * @default undefined
+     */
+    footer?: ReactNode;
+    /**
+     * Removes the padding top and right for the content
+     * @default: false
+     */
+    withoutContentPadding?: boolean;
+}>;
+/**
+ * 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

@@ -0,0 +1,77 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as v } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { useResizeObserver as g } from "usehooks-ts";
+const w = x({
+  slots: {
+    body: "uy:h-screen uy:relative uy:overflow-hidden",
+    header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
+    layoutWrapper: [
+      "uy:flex uy:flex-col uy:w-full uy:mt-(--uy-app-layout-header-sticky-offset) uy:h-(--uy-app-layout-menu-height)",
+      "uy:md:flex-row"
+    ],
+    menu: ["uy:w-full", "uy:md:max-w-app-menu"],
+    contentWrapper: [
+      "uy:flex uy:flex-col",
+      "uy:flex-grow uy:overflow-y-auto uy:relative",
+      // Remove padding when it contains a Page component
+      "uy:md:[&:has([data-unity-page])]:pl-0"
+    ],
+    content: [
+      "uy:flex-1",
+      "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"
+    ],
+    footer: ["uy:hidden", "uy:md:block"]
+  },
+  variants: {
+    withoutContentPadding: {
+      false: {
+        content: ["uy:md:pr-300", "uy:md:pt-250", "&:has()"],
+        contentWrapper: ["uy:md:pl-100"]
+      },
+      true: {
+        content: [],
+        contentWrapper: []
+      }
+    }
+  }
+});
+function R({
+  children: l,
+  menu: a,
+  header: r,
+  footer: u,
+  withoutContentPadding: p = !1
+}) {
+  const o = v(null), { height: y = 0 } = g({
+    ref: o,
+    box: "border-box"
+  }), { 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 - ${y}px)`,
+    "--uy-app-layout-header-sticky-offset": `${y}px`
+  };
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    r && /* @__PURE__ */ e(
+      "div",
+      {
+        ref: o,
+        className: n(),
+        role: "alert",
+        "aria-live": "assertive",
+        children: r
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: i(), children: [
+      a && /* @__PURE__ */ e("div", { className: d(), children: a }),
+      /* @__PURE__ */ t("div", { className: c(), children: [
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
+        u && /* @__PURE__ */ e("footer", { className: h(), children: u })
+      ] })
+    ] })
+  ] });
+}
+export {
+  R as AppLayout
+};

package/dist/esm/components/app-menu/AppMenu.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface AppMenuProps {
+    children: ReactNode;
+}
+declare const AppMenu: {
+    ({ children }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AppMenu };

package/dist/esm/components/app-menu/AppMenu.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { AppMenuContextProvider as u } from "./parts/AppMenu.context.js";
+const a = ({ children: p }) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: "uy:relative uy:z-[1] uy:flex uy:flex-col uy:p-150 uy:gap-y-300 uy:md:max-w-app-menu uy:md:h-full",
+    "data-dd-privacy": "allow",
+    children: p
+  }
+) });
+a.displayName = "AppMenu";
+export {
+  a as AppMenu
+};

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type AppMenuContextValue = {
+    isMobileMenuOpen: boolean;
+    toggleMobileMenu: () => void;
+};
+export declare const AppMenuContext: import('react').Context<AppMenuContextValue>;
+export declare function AppMenuContextProvider({ children, }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function useAppMenuContext(): AppMenuContextValue;
+export {};

package/dist/esm/components/app-menu/parts/AppMenu.context.js

@@ -0,0 +1,25 @@
+import { jsx as M } from "react/jsx-runtime";
+import { createContext as i, useState as l, useContext as r } from "react";
+const e = i({
+  isMobileMenuOpen: !1,
+  toggleMobileMenu: () => null
+});
+function a({
+  children: n
+}) {
+  const [t, o] = l(!1), u = {
+    toggleMobileMenu: () => {
+      o((s) => !s);
+    },
+    isMobileMenuOpen: t
+  };
+  return /* @__PURE__ */ M(e.Provider, { value: u, children: n });
+}
+function f() {
+  return r(e);
+}
+export {
+  e as AppMenuContext,
+  a as AppMenuContextProvider,
+  f as useAppMenuContext
+};

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

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.js';
+type CommonProps = {
+    avatar?: string;
+    avatarPair?: ReactElement<AvatarPairProps>;
+    title?: string;
+    description?: ReactNode;
+    badgeLabel?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Press this button to open the profile menu.
+     */
+    menuTriggerDescription?: string;
+    uploadAvatarCallback?: () => void;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is "Press enter to change profile picture"
+     */
+    uploadAvatarDescription?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is Change profile picture
+     */
+    uploadAvatarLabel?: string;
+    /**
+     * This slot is used to render the update notification.
+     */
+    updateNotificationSlot?: ReactNode;
+};
+export type AppMenuFooterProps = CommonProps & {
+    children?: ReactNode;
+    computeSlot?: ReactNode;
+};
+export type AppMenuFooterHeaderProps = CommonProps & {
+    asMenuHeader?: boolean;
+};
+export declare const AppMenuFooter: ({ avatar, avatarPair, badgeLabel, children, computeSlot, description, title, menuTriggerDescription, uploadAvatarCallback, uploadAvatarLabel, uploadAvatarDescription, updateNotificationSlot, }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,247 @@
+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 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 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 { 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`,
+    size: "md",
+    variant: "square",
+    "aria-labelledby": "profile-button-label",
+    children: [
+      /* @__PURE__ */ e(H, { src: t.avatar, alt: t.title ?? "" }),
+      /* @__PURE__ */ e(F, { variant: "initials", delayMs: 100, children: t.title }),
+      t.avatarPair && I(t.avatarPair) && O(t.avatarPair, {
+        isHidden: !t.isPairAvatarVisible
+      })
+    ]
+  }
+), q = ({
+  avatar: t,
+  avatarPair: r,
+  title: u,
+  uploadAvatarCallback: d,
+  uploadAvatarLabel: s,
+  uploadAvatarDescription: i
+}) => {
+  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__ */ 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: y,
+      onHoverStart: a,
+      onHoverEnd: a,
+      onFocus: a,
+      onBlur: a,
+      onPress: () => {
+        d?.();
+      },
+      children: [
+        /* @__PURE__ */ e(
+          M,
+          {
+            avatar: t,
+            avatarPair: r,
+            title: u,
+            isPairAvatarVisible: o
+          }
+        ),
+        /* @__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(
+            x,
+            {
+              alt: "Camera",
+              color: "content.inverted",
+              size: 24,
+              src: "CameraOutlined"
+            }
+          ),
+          /* @__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",
+              defaultMessage: "Press enter to change profile picture"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, b = ({
+  asMenuHeader: t = !1,
+  avatar: r,
+  avatarPair: u,
+  badgeLabel: d,
+  description: s,
+  menuTriggerDescription: i,
+  title: o,
+  uploadAvatarCallback: l,
+  uploadAvatarLabel: c,
+  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: r,
+      avatarPair: u,
+      title: o,
+      uploadAvatarLabel: c,
+      uploadAvatarDescription: a,
+      uploadAvatarCallback: l
+    }
+  ) : /* @__PURE__ */ e(
+    M,
+    {
+      avatar: r,
+      avatarPair: u,
+      title: o,
+      isPairAvatarVisible: !0
+    }
+  ) }),
+  /* @__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",
+      {
+        id: "profile-button-label",
+        className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
+        "data-dd-privacy": "mask",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "uy:typography-body-small uy:text-content-neutral-low",
+        "data-dd-privacy": "allow",
+        children: s
+      }
+    ),
+    !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",
+        defaultMessage: "Press this button to open the profile menu."
+      }
+    ) })
+  ] }),
+  /* @__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",
+      size: 20,
+      color: "content.neutral.low"
+    }
+  ) })
+] }), te = ({
+  avatar: t,
+  avatarPair: r,
+  badgeLabel: u,
+  children: d,
+  computeSlot: s,
+  description: i,
+  title: o,
+  menuTriggerDescription: l,
+  uploadAvatarCallback: c,
+  uploadAvatarLabel: a,
+  uploadAvatarDescription: y,
+  updateNotificationSlot: m
+}) => {
+  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__ */ n(
+    "aside",
+    {
+      className: A,
+      "data-mobile-open": N,
+      id: "app-menu-profile-button",
+      children: [
+        s,
+        m,
+        /* @__PURE__ */ n(
+          k,
+          {
+            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
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  te as AppMenuFooter
+};

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

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+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;
+}
+/**
+ * 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;