@payfit/unity-components 0.0.0-alpha.6 → 0.0.0-alpha.7

package/dist/cjs/index.d.ts

@@ -5,7 +5,13 @@ export * from './components/alert/parts/AlertContent.js';
 export * from './components/alert/parts/AlertTitle.js';
 export * from './components/anchor/Anchor.js';
 export * from './components/app-layout/AppLayout.js';
+export * from './components/app-menu/AppMenu.js';
+export * from './components/app-menu/parts/AppMenuHeader.js';
+export * from './components/app-menu/parts/AppMenuFooter.js';
+export * from './components/app-menu/parts/AppMenuNavContent.js';
+export * from './components/app-menu/parts/AppMenu.context.js';
 export * from './components/avatar/Avatar.js';
+export * from './components/avatar/utils.js';
 export * from './components/avatar/parts/AvatarFallback.js';
 export * from './components/avatar/parts/AvatarImage.js';
 export * from './components/avatar/parts/AvatarPair.js';
@@ -13,6 +19,12 @@ export * from './components/badge/Badge.js';
 export * from './components/breadcrumbs/Breadcrumbs.js';
 export * from './components/breadcrumbs/parts/Breadcrumb.js';
 export * from './components/button/Button.js';
+export * from './components/checkbox/Checkbox.js';
+export * from './components/checkbox-field/CheckboxField.js';
+export * from './components/checkbox-group/CheckboxGroup.js';
+export * from './components/checkbox-group-field/CheckboxGroupField.js';
+export * from './components/date-picker/DatePicker.js';
+export * from './components/date-picker-field/DatePickerField.js';
 export * from './components/dialog/Dialog.js';
 export * from './components/dialog/parts/DialogActions.js';
 export * from './components/dialog/parts/DialogContent.js';
@@ -21,11 +33,20 @@ export * from './components/flex/Flex.js';
 export * from './components/flex/Flex.variants.js';
 export * from './components/flex/FlexItem.js';
 export * from './components/form/Form.js';
+export * from './components/form-field/FormField.js';
+export * from './components/form-field/parts/FormControl.js';
+export * from './components/form-field/parts/FormContextualLink.js';
+export * from './components/form-field/parts/FormFeedbackText.js';
+export * from './components/form-field/parts/FormHelperText.js';
+export * from './components/form-field/parts/FormLabel.js';
+export * from './components/full-page-loader/FullPageLoader.js';
 export * from './components/grid/Grid.js';
 export * from './components/grid/Grid.variants.js';
 export * from './components/grid/GridItem.js';
 export * from './components/icon/Icon.js';
 export * from './components/icon-button/IconButton.js';
+export * from './components/input/Input.js';
+export * from './components/label/Label.js';
 export * from './components/link/Link.js';
 export * from './components/menu/Menu.js';
 export * from './components/menu/parts/MenuContent.js';
@@ -40,6 +61,12 @@ export * from './components/payfit-brand/PayFitBrand.js';
 export * from './components/payfit-brand/PayFitPreprod.js';
 export * from './components/pill/Pill.js';
 export * from './components/progress-bar/ProgressBar.js';
+export * from './components/select/parts/SelectButton.js';
+export * from './components/select/parts/SelectOption.js';
+export * from './components/select/parts/SelectOptionGroup.js';
+export * from './components/select/parts/SelectOptionHelper.js';
+export * from './components/select/Select.js';
+export * from './components/select-field/SelectField.js';
 export * from './components/spinner/Spinner.js';
 export * from './components/tabs/Tabs.js';
 export * from './components/tabs/parts/Tab.js';
@@ -47,9 +74,12 @@ export * from './components/tabs/parts/TabList.js';
 export * from './components/tabs/parts/TabPanel.js';
 export * from './components/text/Text.js';
 export * from './components/text/Text.variants.js';
+export * from './components/text-area/TextArea.js';
+export * from './components/text-field/TextField.js';
 export * from './components/toast/toast.js';
 export * from './components/toast/ToastManager.js';
 export * from './hooks/use-breakpoint-listener.js';
 export * from './hooks/use-media-query.js';
+export * from './hooks/use-form.js';
 export * from './providers/router/RouterProvider.js';
 export * from './providers/router/integrations/UnityReactRouterV5Provider.js';

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./components/actionable/Actionable.js"),s=require("./components/alert/Alert.js"),c=require("./components/alert/parts/AlertActions.js"),l=require("./components/alert/parts/AlertContent.js"),q=require("./components/alert/parts/AlertTitle.js"),d=require("./components/anchor/Anchor.js"),g=require("./components/app-layout/AppLayout.js"),A=require("./components/avatar/Avatar.js"),m=require("./components/avatar/parts/AvatarFallback.js"),T=require("./components/avatar/parts/AvatarImage.js"),v=require("./components/avatar/parts/AvatarPair.js"),I=require("./components/badge/Badge.js"),P=require("./components/breadcrumbs/Breadcrumbs.js"),b=require("./components/breadcrumbs/parts/Breadcrumb.js"),B=require("./components/button/Button.js"),M=require("./components/dialog/Dialog.js"),p=require("./components/dialog/parts/DialogActions.js"),F=require("./components/dialog/parts/DialogContent.js"),y=require("./components/dialog/parts/DialogTitle.js"),e=require("./components/flex/Flex.js"),r=require("./components/flex/Flex.variants.js"),t=require("./components/flex/FlexItem.js"),x=require("./components/form/Form.js"),D=require("./components/grid/Grid.js"),n=require("./components/grid/Grid.variants.js"),S=require("./components/grid/GridItem.js"),k=require("./components/icon/Icon.js"),C=require("./components/icon-button/IconButton.js"),G=require("./components/link/Link.js"),L=require("./components/menu/Menu.js"),N=require("./components/menu/parts/MenuContent.js"),R=require("./components/menu/parts/MenuHeader.js"),f=require("./components/menu/parts/MenuItem.js"),O=require("./components/menu/parts/MenuSeparator.js"),_=require("./components/menu/parts/MenuTrigger.js"),h=require("./components/nav/Nav.js"),H=require("./components/nav/parts/NavGroup.js"),a=require("./components/nav/parts/NavItem.js"),Q=require("./components/payfit-brand/PayFitBrand.js"),U=require("./components/payfit-brand/PayFitPreprod.js"),V=require("./components/pill/Pill.js"),j=require("./components/progress-bar/ProgressBar.js"),w=require("./components/spinner/Spinner.js"),z=require("./components/tabs/Tabs.js"),E=require("./components/tabs/parts/Tab.js"),J=require("./components/tabs/parts/TabList.js"),K=require("./components/tabs/parts/TabPanel.js"),W=require("./components/text/Text.js"),X=require("./components/text/Text.variants.js"),Y=require("./components/toast/toast.js"),o=require("./components/toast/ToastManager.js"),Z=require("./hooks/use-breakpoint-listener.js"),$=require("./hooks/use-media-query.js"),i=require("./providers/router/RouterProvider.js"),ee=require("./providers/router/integrations/UnityReactRouterV5Provider.js"),re=require("react-aria-components");exports.Actionable=u.Actionable;exports.Alert=s.Alert;exports.AlertActions=c.AlertActions;exports.AlertContent=l.AlertContent;exports.AlertTitle=q.AlertTitle;exports.Anchor=d.Anchor;exports.AppLayout=g.AppLayout;exports.Avatar=A.Avatar;exports.AvatarFallback=m.AvatarFallback;exports.AvatarImage=T.AvatarImage;exports.AvatarPair=v.AvatarPair;exports.Badge=I.Badge;exports.Breadcrumbs=P.Breadcrumbs;exports.Breadcrumb=b.Breadcrumb;exports.Button=B.Button;exports.Dialog=M.Dialog;exports.DialogActions=p.DialogActions;exports.DialogContent=F.DialogContent;exports.DialogTitle=y.DialogTitle;exports.Flex=e.Flex;exports.Stack=e.Stack;exports.flex=r.flex;exports.flexItem=r.flexItem;exports.FlexItem=t.FlexItem;exports.StackItem=t.StackItem;exports.Form=x.Form;exports.Grid=D.Grid;exports.grid=n.grid;exports.gridItem=n.gridItem;exports.GridItem=S.GridItem;exports.Icon=k.Icon;exports.IconButton=C.IconButton;exports.Link=G.Link;exports.Menu=L.Menu;exports.MenuContent=N.MenuContent;exports.MenuHeader=R.MenuHeader;exports.MenuItem=f.MenuItem;exports.MenuSeparator=O.MenuSeparator;exports.MenuTrigger=_.MenuTrigger;exports.Nav=h.Nav;exports.NavGroup=H.NavGroup;exports.NavItem=a.NavItem;exports.navItemBase=a.navItemBase;exports.PayFitBrand=Q.PayFitBrand;exports.PayFitBrandPreprod=U.PayFitBrandPreprod;exports.Pill=V.Pill;exports.ProgressBar=j.ProgressBar;exports.Spinner=w.Spinner;exports.Tabs=z.Tabs;exports.Tab=E.Tab;exports.TabList=J.TabList;exports.TabPanel=K.TabPanel;exports.Text=W.Text;exports.text=X.text;exports.toast=Y.toast;exports.TOAST_CONFIG=o.TOAST_CONFIG;exports.ToastManager=o.ToastManager;exports.useBreakpointListener=Z.useBreakpointListener;exports.useMediaQuery=$.useMediaQuery;exports.RouterProvider=i.RouterProvider;exports.useRouter=i.useRouter;exports.UnityReactRouterV5Provider=ee.UnityReactRouterV5Provider;Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>re.DialogTrigger});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./components/actionable/Actionable.js"),d=require("./components/alert/Alert.js"),F=require("./components/alert/parts/AlertActions.js"),A=require("./components/alert/parts/AlertContent.js"),x=require("./components/alert/parts/AlertTitle.js"),m=require("./components/anchor/Anchor.js"),b=require("./components/app-layout/AppLayout.js"),g=require("./components/app-menu/AppMenu.js"),T=require("./components/app-menu/parts/AppMenuHeader.js"),M=require("./components/app-menu/parts/AppMenuFooter.js"),P=require("./components/app-menu/parts/AppMenuNavContent.js"),e=require("./components/app-menu/parts/AppMenu.context.js"),k=require("./components/avatar/Avatar.js"),C=require("./components/avatar/utils.js"),v=require("./components/avatar/parts/AvatarFallback.js"),I=require("./components/avatar/parts/AvatarImage.js"),S=require("./components/avatar/parts/AvatarPair.js"),B=require("./components/badge/Badge.js"),L=require("./components/breadcrumbs/Breadcrumbs.js"),G=require("./components/breadcrumbs/parts/Breadcrumb.js"),y=require("./components/button/Button.js"),r=require("./components/checkbox/Checkbox.js"),D=require("./components/checkbox-field/CheckboxField.js"),t=require("./components/checkbox-group/CheckboxGroup.js"),h=require("./components/checkbox-group-field/CheckboxGroupField.js"),O=require("./components/date-picker/DatePicker.js"),N=require("./components/date-picker-field/DatePickerField.js"),H=require("./components/dialog/Dialog.js"),R=require("./components/dialog/parts/DialogActions.js"),f=require("./components/dialog/parts/DialogContent.js"),_=require("./components/dialog/parts/DialogTitle.js"),o=require("./components/flex/Flex.js"),n=require("./components/flex/Flex.variants.js"),i=require("./components/flex/FlexItem.js"),U=require("./components/form/Form.js"),Q=require("./components/form-field/FormField.js"),V=require("./components/form-field/parts/FormControl.js"),j=require("./components/form-field/parts/FormContextualLink.js"),w=require("./components/form-field/parts/FormFeedbackText.js"),z=require("./components/form-field/parts/FormHelperText.js"),E=require("./components/form-field/parts/FormLabel.js"),u=require("./components/full-page-loader/FullPageLoader.js"),J=require("./components/grid/Grid.js"),a=require("./components/grid/Grid.variants.js"),K=require("./components/grid/GridItem.js"),W=require("./components/icon/Icon.js"),X=require("./components/icon-button/IconButton.js"),Y=require("./components/input/Input.js"),Z=require("./components/label/Label.js"),$=require("./components/link/Link.js"),ee=require("./components/menu/Menu.js"),re=require("./components/menu/parts/MenuContent.js"),te=require("./components/menu/parts/MenuHeader.js"),oe=require("./components/menu/parts/MenuItem.js"),ne=require("./components/menu/parts/MenuSeparator.js"),ie=require("./components/menu/parts/MenuTrigger.js"),ue=require("./components/nav/Nav.js"),ae=require("./components/nav/parts/NavGroup.js"),c=require("./components/nav/parts/NavItem.js"),ce=require("./components/payfit-brand/PayFitBrand.js"),se=require("./components/payfit-brand/PayFitPreprod.js"),le=require("./components/pill/Pill.js"),pe=require("./components/progress-bar/ProgressBar.js"),qe=require("./components/select/parts/SelectButton.js"),de=require("./components/select/parts/SelectOption.js"),Fe=require("./components/select/parts/SelectOptionGroup.js"),Ae=require("./components/select/parts/SelectOptionHelper.js"),xe=require("./components/select/Select.js"),me=require("./components/select-field/SelectField.js"),be=require("./components/spinner/Spinner.js"),ge=require("./components/tabs/Tabs.js"),Te=require("./components/tabs/parts/Tab.js"),Me=require("./components/tabs/parts/TabList.js"),Pe=require("./components/tabs/parts/TabPanel.js"),ke=require("./components/text/Text.js"),Ce=require("./components/text/Text.variants.js"),s=require("./components/text-area/TextArea.js"),ve=require("./components/text-field/TextField.js"),Ie=require("./components/toast/toast.js"),l=require("./components/toast/ToastManager.js"),Se=require("./hooks/use-breakpoint-listener.js"),Be=require("./hooks/use-media-query.js"),Le=require("./hooks/use-form.js"),p=require("./providers/router/RouterProvider.js"),Ge=require("./providers/router/integrations/UnityReactRouterV5Provider.js"),ye=require("react-aria-components");exports.Actionable=q.Actionable;exports.Alert=d.Alert;exports.AlertActions=F.AlertActions;exports.AlertContent=A.AlertContent;exports.AlertTitle=x.AlertTitle;exports.Anchor=m.Anchor;exports.AppLayout=b.AppLayout;exports.AppMenu=g.AppMenu;exports.AppMenuHeader=T.AppMenuHeader;exports.AppMenuFooter=M.AppMenuFooter;exports.AppMenuNavContent=P.AppMenuNavContent;exports.AppMenuContext=e.AppMenuContext;exports.AppMenuContextProvider=e.AppMenuContextProvider;exports.useAppMenuContext=e.useAppMenuContext;exports.Avatar=k.Avatar;exports.getInitials=C.getInitials;exports.AvatarFallback=v.AvatarFallback;exports.AvatarImage=I.AvatarImage;exports.AvatarPair=S.AvatarPair;exports.Badge=B.Badge;exports.Breadcrumbs=L.Breadcrumbs;exports.Breadcrumb=G.Breadcrumb;exports.Button=y.Button;exports.Checkbox=r.Checkbox;exports.checkbox=r.checkbox;exports.CheckboxField=D.CheckboxField;exports.CheckboxGroup=t.CheckboxGroup;exports.checkboxGroup=t.checkboxGroup;exports.CheckboxGroupField=h.CheckboxGroupField;exports.DatePicker=O.DatePicker;exports.DatePickerField=N.DatePickerField;exports.Dialog=H.Dialog;exports.DialogActions=R.DialogActions;exports.DialogContent=f.DialogContent;exports.DialogTitle=_.DialogTitle;exports.Flex=o.Flex;exports.Stack=o.Stack;exports.flex=n.flex;exports.flexItem=n.flexItem;exports.FlexItem=i.FlexItem;exports.StackItem=i.StackItem;exports.Form=U.Form;exports.FormField=Q.FormField;exports.FormControl=V.FormControl;exports.FormContextualLink=j.FormContextualLink;exports.FormFeedbackText=w.FormFeedbackText;exports.FormHelperText=z.FormHelperText;exports.FormLabel=E.FormLabel;exports.FullPageLoader=u.FullPageLoader;exports.fullPageLoader=u.fullPageLoader;exports.Grid=J.Grid;exports.grid=a.grid;exports.gridItem=a.gridItem;exports.GridItem=K.GridItem;exports.Icon=W.Icon;exports.IconButton=X.IconButton;exports.Input=Y.Input;exports.Label=Z.Label;exports.Link=$.Link;exports.Menu=ee.Menu;exports.MenuContent=re.MenuContent;exports.MenuHeader=te.MenuHeader;exports.MenuItem=oe.MenuItem;exports.MenuSeparator=ne.MenuSeparator;exports.MenuTrigger=ie.MenuTrigger;exports.Nav=ue.Nav;exports.NavGroup=ae.NavGroup;exports.NavItem=c.NavItem;exports.navItemBase=c.navItemBase;exports.PayFitBrand=ce.PayFitBrand;exports.PayFitBrandPreprod=se.PayFitBrandPreprod;exports.Pill=le.Pill;exports.ProgressBar=pe.ProgressBar;exports.SelectButton=qe.SelectButton;exports.SelectOption=de.SelectOption;exports.SelectOptionGroup=Fe.SelectOptionGroup;exports.SelectOptionHelper=Ae.SelectOptionHelper;exports.Select=xe.Select;exports.SelectField=me.SelectField;exports.Spinner=be.Spinner;exports.Tabs=ge.Tabs;exports.Tab=Te.Tab;exports.TabList=Me.TabList;exports.TabPanel=Pe.TabPanel;exports.Text=ke.Text;exports.text=Ce.text;exports.TextArea=s.TextArea;exports.textArea=s.textArea;exports.TextField=ve.TextField;exports.toast=Ie.toast;exports.TOAST_CONFIG=l.TOAST_CONFIG;exports.ToastManager=l.ToastManager;exports.useBreakpointListener=Se.useBreakpointListener;exports.useMediaQuery=Be.useMediaQuery;exports.useUnityForm=Le.useUnityForm;exports.RouterProvider=p.RouterProvider;exports.useRouter=p.useRouter;exports.UnityReactRouterV5Provider=Ge.UnityReactRouterV5Provider;Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>ye.DialogTrigger});

package/dist/cjs/providers/router/RouterProvider.d.ts

@@ -30,7 +30,7 @@ export interface RouterProviderProps extends ComponentProps<typeof AriaRouterPro
  *
  * By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `RouterProvider` component configures all Unity components that support it to navigate using the client side router you provide. Set this up once in the root of your app, and any component with the href prop will automatically navigate using your router.
  */
-export declare function RouterProvider({ isActive, children, ...routerProps }: RouterProviderProps): JSX.Element;
+export declare function RouterProvider({ isActive, children, ...routerProps }: RouterProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RouterProvider {
     var displayName: string;
 }

package/dist/cjs/providers/router/integrations/UnityReactRouterV5Provider.d.ts

@@ -3,4 +3,4 @@ import { PropsWithChildren } from 'react';
  * Provider that integrates Unity's RouterProvider with React Router v5.
  * Handles navigation and active state detection automatically.
  */
-export declare function UnityReactRouterV5Provider({ children, }: PropsWithChildren<unknown>): JSX.Element;
+export declare function UnityReactRouterV5Provider({ children, }: PropsWithChildren<unknown>): import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ interface AnchorProps {
  * 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): JSX.Element;
+    ({ children, position, offset, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Anchor };

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

@@ -14,9 +14,14 @@ export type AppLayoutProps = PropsWithChildren<{
      * @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.
  */
-export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, }: AppLayoutProps): JSX.Element;
+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.mjs

@@ -1,7 +1,7 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useRef as h } from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as v } from "react";
 import { tv as x } from "tailwind-variants";
-import { useResizeObserver as v } from "usehooks-ts";
+import { useResizeObserver as w } from "usehooks-ts";
 const b = x({
   slots: {
     body: "uy-h-screen uy-relative uy-overflow-hidden",
@@ -13,46 +13,58 @@ const b = x({
     menu: ["uy-w-full", "md:uy-max-w-app-menu"],
     contentWrapper: [
       "uy-flex uy-flex-col",
-      "uy-flex-grow uy-overflow-y-auto uy-relative",
-      "md:uy-pl-100"
+      "uy-flex-grow uy-overflow-y-auto uy-relative"
     ],
-    content: ["uy-flex-1", "md:uy-pr-300 md:uy-pt-250"],
+    content: ["uy-flex-1"],
     footer: ["uy-hidden", "md:uy-block"]
+  },
+  variants: {
+    withoutContentPadding: {
+      false: {
+        content: ["md:uy-pr-300", "md:uy-pt-250"],
+        contentWrapper: ["md:uy-pl-100"]
+      },
+      true: {
+        content: [],
+        contentWrapper: []
+      }
+    }
   }
 });
-function k({
+function R({
   children: l,
   menu: y,
-  header: r,
-  footer: u
+  header: o,
+  footer: r,
+  withoutContentPadding: n = !1
 }) {
-  const t = h(null), { height: a = 0 } = v({
-    ref: t,
+  const u = v(null), { height: a = 0 } = w({
+    ref: u,
     box: "border-box"
-  }), { body: s, header: i, menu: p, layoutWrapper: d, contentWrapper: c, content: n, footer: f } = b(), m = {
+  }), { body: s, header: p, menu: i, layoutWrapper: c, contentWrapper: d, content: f, footer: h } = b({ withoutContentPadding: n }), m = {
     "--uy-app-layout-menu-height": `calc(100dvh - ${a}px)`,
     "--uy-app-layout-header-sticky-offset": `${a}px`
   };
-  return /* @__PURE__ */ o("div", { className: s(), style: m, children: [
-    r && /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    o && /* @__PURE__ */ e(
       "div",
       {
-        ref: t,
-        className: i(),
+        ref: u,
+        className: p(),
         role: "alert",
         "aria-live": "assertive",
-        children: r
+        children: o
       }
     ),
-    /* @__PURE__ */ o("div", { className: d(), children: [
-      /* @__PURE__ */ e("div", { className: p(), children: y }),
-      /* @__PURE__ */ o("div", { className: c(), children: [
-        /* @__PURE__ */ e("main", { className: n(), children: l }),
-        u && /* @__PURE__ */ e("footer", { className: f(), children: u })
+    /* @__PURE__ */ t("div", { className: c(), children: [
+      /* @__PURE__ */ e("div", { className: i(), children: y }),
+      /* @__PURE__ */ t("div", { className: d(), children: [
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
+        r && /* @__PURE__ */ e("footer", { className: h(), children: r })
       ] })
     ] })
   ] });
 }
 export {
-  k as AppLayout
+  R as AppLayout
 };

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

@@ -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.mjs

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { AppMenuContextProvider as u } from "./parts/AppMenu.context.mjs";
+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 md:uy-max-w-app-menu md:uy-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.mts

@@ -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.mjs

@@ -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.mts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.mjs';
+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;
+};
+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, }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface AppMenuHeader {
+    environment: 'production' | 'working' | 'testing' | 'development' | 'local';
+    linkHref: string;
+    linkLabel: string;
+    notificationsComponent?: ReactNode;
+    searchComponent?: ReactNode;
+}
+export declare const AppMenuHeader: ({ environment, linkHref, linkLabel, notificationsComponent, searchComponent, }: AppMenuHeader) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useIntl as p } from "react-intl";
+import { Link as m } from "react-router-dom";
+import { IconButton as s } from "../../icon-button/IconButton.mjs";
+import { PayFitBrand as c } from "../../payfit-brand/PayFitBrand.mjs";
+import { PayFitBrandPreprod as y } from "../../payfit-brand/PayFitPreprod.mjs";
+import { useAppMenuContext as f } from "./AppMenu.context.mjs";
+const N = ({
+  environment: o,
+  linkHref: a,
+  linkLabel: t,
+  notificationsComponent: r,
+  searchComponent: l
+}) => {
+  const { isMobileMenuOpen: n, toggleMobileMenu: u } = f(), d = p();
+  return /* @__PURE__ */ i("header", { className: "uy-flex uy-flex-col uy-gap-y-200 uy-pl-25 uy-pr-25", children: [
+    /* @__PURE__ */ e("div", { className: "uy-block md:uy-hidden", children: /* @__PURE__ */ e(
+      s,
+      {
+        variant: "ghost",
+        color: "neutral",
+        icon: n ? "CloseOutlined" : "ListOutlined",
+        label: d.formatMessage({
+          id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+          defaultMessage: n ? "Close navigation" : "Open navigation"
+        }),
+        onClick: u,
+        "aria-expanded": n,
+        "aria-controls": "app-menu-nav-container app-menu-profile-button"
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: "uy-hidden uy-justify-between uy-items-center md:uy-flex", children: [
+      /* @__PURE__ */ e(m, { to: a, children: o === "production" ? /* @__PURE__ */ e(c, { label: t, width: 104 }) : /* @__PURE__ */ e(y, { label: t, env: o }) }),
+      r
+    ] }),
+    /* @__PURE__ */ e("div", { className: "uy-hidden md:uy-flex", children: l })
+  ] });
+};
+export {
+  N as AppMenuHeader
+};

package/dist/esm/components/app-menu/parts/AppMenuNavContent.d.mts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type AppMenuNavContentProps = {
+    children: ReactNode;
+};
+export declare const AppMenuNavContent: ({ children }: AppMenuNavContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-menu/parts/AppMenuNavContent.mjs

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { twMerge as y } from "tailwind-merge";
+import { useAppMenuContext as a } from "./AppMenu.context.mjs";
+const r = ({ children: e }) => {
+  const { isMobileMenuOpen: u } = a(), o = y(
+    "uy-flex-col uy-overflow-y-auto uy-overflow-x-hidden uy-gap-y-100 uy-pl-200 uy-pr-200 uy-pb-200 uy-scroll-py-100 md:uy-flex",
+    "uy-bg-canvas md:uy-bg-[transparent]",
+    "uy-absolute uy-top-800 uy-left-0 uy-right-0 uy-z-10 uy-h-svh md:uy-static md:uy-w-auto md:uy-pl-50 md:uy-pr-50 md:uy-pb-50",
+    "data-[mobile-open=false]:uy-hidden md:data-[mobile-open=false]:uy-flex data-[mobile-open=true]:uy-flex"
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: o,
+      "data-mobile-open": u,
+      id: "app-menu-nav-container",
+      children: e
+    }
+  );
+};
+export {
+  r as AppMenuNavContent
+};