@payfit/unity-components 3.23.23 → 3.23.25

package/dist/esm/core/components/bottom-sheet/BottomSheet.d.ts

@@ -1,5 +1,6 @@
-import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+import { SheetProps, SheetTrigger } from 'react-aria-components/Sheet';
 export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-variants').ClassValue | {
@@ -37,7 +38,7 @@ export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
     wrapper: string[];
     content: string[];
 }>>;
-export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
+export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>>, Omit<SheetProps, 'className' | 'style' | 'children'> {
     /**
      * Controls whether the sheet can be dismissed by clicking outside or using escape key.
      * @default true
@@ -86,13 +87,13 @@ export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof
  *   BottomSheetContent,
  *   BottomSheetFooter,
  *   Button,
- *   DialogTrigger
+ *   SheetTrigger
  * } from '@payfit/unity-components'
  *
  * // Uncontrolled example
  * function BasicExample() {
  *   return (
- *     <DialogTrigger>
+ *     <SheetTrigger>
  *       <Button>Open bottom sheet</Button>
  *       <BottomSheet>
  *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
@@ -102,7 +103,7 @@ export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof
  *           <Button variant="primary">Save</Button>
  *         </BottomSheetFooter>
  *       </BottomSheet>
- *     </DialogTrigger>
+ *     </SheetTrigger>
  *   )
  * }
  *
@@ -134,4 +135,4 @@ export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof
  * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
  */
 declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
-export { BottomSheet };
+export { BottomSheet, SheetTrigger };

package/dist/esm/core/components/bottom-sheet/BottomSheet.js

@@ -2,10 +2,9 @@ import { BottomSheetDragIndicator as e } from "./parts/BottomSheetDragIndicator.
 import { forwardRef as t } from "react";
 import { uyTv as n } from "@payfit/unity-themes";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Dialog as a } from "react-aria-components/Dialog";
-import { Modal as o, ModalOverlay as s } from "react-aria-components/Modal";
+import { Sheet as a, SheetBackdrop as o, SheetContent as s, SheetOverlay as c, SheetTrigger as l } from "react-aria-components/Sheet";
 //#region src/core/components/bottom-sheet/BottomSheet.tsx
-var c = n({ slots: {
+var u = n({ slots: {
 	overlay: [
 		"uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
 		"uy:backdrop-blur-sm uy:bg-utility-backdrop/65",
@@ -21,28 +20,34 @@ var c = n({ slots: {
 		"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out"
 	],
 	content: ["uy:flex uy:flex-col uy:h-full uy:min-h-[40svh] uy:overflow-hidden uy:outline-none"]
-} }), l = t(({ children: t, isOpen: n, onOpenChange: l, defaultOpen: u, isDismissable: d = !0, isKeyboardDismissDisabled: f = !1, ...p }, m) => {
-	let { overlay: h, wrapper: g, content: _ } = c();
-	return /* @__PURE__ */ r(s, {
-		className: h(),
+} }), d = t(({ children: t, isOpen: n, onOpenChange: l, defaultOpen: d, isDismissable: f = !0, isKeyboardDismissDisabled: p = !1, ...m }, h) => {
+	let { overlay: g, wrapper: _, content: v } = u();
+	return /* @__PURE__ */ i(c, {
+		"data-unity-component": "BottomSheet",
+		className: g(),
 		isOpen: n,
 		onOpenChange: l,
-		defaultOpen: u,
-		isDismissable: d,
-		isKeyboardDismissDisabled: f,
-		children: /* @__PURE__ */ i(o, {
-			"data-dd-privacy": "allow",
-			...p,
-			ref: m,
-			className: g(),
-			"data-unity-bottom-sheet": !0,
-			children: [/* @__PURE__ */ r(e, {}), /* @__PURE__ */ r(a, {
+		defaultOpen: d,
+		preventDismissal: !f,
+		children: [/* @__PURE__ */ r(o, {}), /* @__PURE__ */ r("div", {
+			className: "uy:contents",
+			onKeyDownCapture: (e) => {
+				!p || e.key !== "Escape" || (e.preventDefault(), e.stopPropagation());
+			},
+			children: /* @__PURE__ */ i(a, {
+				"data-dd-privacy": "allow",
+				...m,
+				ref: h,
 				className: _(),
-				children: t
-			})]
-		})
+				"data-unity-bottom-sheet": !0,
+				children: [/* @__PURE__ */ r(e, {}), /* @__PURE__ */ r(s, {
+					className: v(),
+					children: t
+				})]
+			})
+		})]
 	});
 });
-l.displayName = "BottomSheet";
+d.displayName = "BottomSheet";
 //#endregion
-export { l as BottomSheet, c as bottomSheet };
+export { d as BottomSheet, l as SheetTrigger, u as bottomSheet };

package/dist/esm/core/components/bottom-sheet/parts/BottomSheetDragIndicator.js

@@ -2,15 +2,15 @@ import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listen
 import { useContext as t, useRef as n } from "react";
 import { uyTv as r } from "@payfit/unity-themes";
 import { jsx as i } from "react/jsx-runtime";
-import { OverlayTriggerStateContext as a } from "react-aria-components/Dialog";
-import { useDrag as o } from "@use-gesture/react";
+import { useDrag as a } from "@use-gesture/react";
+import { OverlayTriggerStateContext as o } from "react-aria-components/Dialog";
 //#region src/core/components/bottom-sheet/parts/BottomSheetDragIndicator.tsx
 var s = r({ slots: {
 	base: ["uy:md:hidden uy:mx-auto uy:py-100 uy:w-500", "uy:cursor-grab uy:touch-action-none"],
 	indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
 } }), c = 100;
 function l() {
-	let r = n(null), l = t(a), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = o((e) => {
+	let r = n(null), l = t(o), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = a((e) => {
 		let { movement: [t, n], direction: [i, a], intentional: o, cancel: s, last: u, event: d } = e;
 		if (!p) {
 			s();

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface MenuContextValue {
+    compact: boolean;
+}
+export declare function MenuProvider({ children, compact, }: PropsWithChildren<{
+    compact?: boolean;
+}>): import('react/jsx-runtime').JSX.Element;
+export declare function useMenuContext(): MenuContextValue;
+export {};

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

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/menu/Menu.context.tsx
+var r = e({ compact: !1 });
+function i({ children: e, compact: t = !1 }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { compact: t },
+		children: e
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as MenuProvider, a as useMenuContext };

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

@@ -1,12 +1,57 @@
 import { MenuTriggerProps } from 'react-aria-components/Menu';
 import { PopoverProps } from 'react-aria-components/Popover';
-type MenuProps = Omit<MenuTriggerProps, 'className' | 'style'> & {
+export interface MenuProps extends Omit<MenuTriggerProps, 'className' | 'style'> {
+    /** Renders all menu content with a denser spacing treatment. */
+    compact?: boolean;
+    /** Positions the menu popover relative to its trigger. */
     placement?: PopoverProps['placement'];
+    /** Adds classes to the Unity popover that wraps the menu content. */
     popoverClassName?: string;
+    /** Forwards a ref to the element used to position the popover. */
     triggerRef?: PopoverProps['triggerRef'];
-};
-export declare function Menu({ defaultOpen, children, popoverClassName, triggerRef, placement, ...rest }: MenuProps): import('react/jsx-runtime').JSX.Element;
+}
+/**
+ * Gives people a keyboard-accessible list of actions or navigation choices.
+ *
+ * Compose `Menu` with exactly two children: a `MenuTrigger` and a
+ * `MenuContent`. React Aria manages opening, focus restoration, keyboard
+ * navigation, and dismissal while Unity supplies the menu surface and item
+ * styling.
+ * @param props - Trigger behavior, popover positioning, and menu content.
+ * @param props.children - A `MenuTrigger` followed by a `MenuContent`.
+ * @param props.compact - Renders all menu content with compact spacing.
+ * @param props.defaultOpen - Opens the menu when it first renders.
+ * @param props.placement - Positions the menu relative to its trigger.
+ * @param props.popoverClassName - Adds classes to the menu popover.
+ * @param props.triggerRef - Forwards a ref to the popover positioning element.
+ * @see {@link MenuProps} for all available props.
+ * @see {@link MenuSubmenu} for nested action menus.
+ * @example
+ * ```tsx
+ * import {
+ *   Menu,
+ *   MenuContent,
+ *   MenuTrigger,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * export function ActionsMenu() {
+ *   return (
+ *     <Menu>
+ *       <MenuTrigger>Actions</MenuTrigger>
+ *       <MenuContent>
+ *         <RawMenuItem onAction={() => console.log('Save')}>Save</RawMenuItem>
+ *         <RawMenuItem href="/settings">Settings</RawMenuItem>
+ *       </MenuContent>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * Keep the trigger and content as direct children of `Menu`. Use
+ * `MenuSubmenu` inside `MenuContent` instead of nesting a second `Menu`.
+ */
+export declare function Menu({ defaultOpen, compact, children, popoverClassName, triggerRef, placement, ...rest }: MenuProps): import('react/jsx-runtime').JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }
-export {};

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

@@ -1,22 +1,25 @@
-import e from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { MenuTrigger as i, Popover as a } from "react-aria-components/Menu";
+import { MenuProvider as e } from "./Menu.context.js";
+import { menuPopover as t } from "./menu.variants.js";
+import n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MenuTrigger as a, Popover as o } from "react-aria-components/Menu";
 //#region src/core/components/menu/Menu.tsx
-var o = t({ base: "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" });
-function s({ defaultOpen: t, children: s, popoverClassName: c, triggerRef: l, placement: u, ...d }) {
-	let [f, p] = e.Children.toArray(s);
-	if (!f || !p) throw Error("Menu must have a trigger and a menu content");
-	return /* @__PURE__ */ r(i, {
-		defaultOpen: t,
-		...d,
-		children: [f, /* @__PURE__ */ n(a, {
-			triggerRef: l,
-			placement: u,
-			className: o({ className: c }),
-			"data-dd-privacy": "allow",
-			children: p
-		})]
+function s({ defaultOpen: s, compact: c = !1, children: l, popoverClassName: u, triggerRef: d, placement: f, ...p }) {
+	let [m, h] = n.Children.toArray(l);
+	if (!m || !h) throw Error("Menu must have a trigger and a menu content");
+	return /* @__PURE__ */ r(e, {
+		compact: c,
+		children: /* @__PURE__ */ i(a, {
+			defaultOpen: s,
+			...p,
+			children: [m, /* @__PURE__ */ r(o, {
+				triggerRef: d,
+				placement: f,
+				className: t({ className: u }),
+				"data-dd-privacy": "allow",
+				children: h
+			})]
+		})
 	});
 }
 s.displayName = "Menu";

package/dist/esm/core/components/menu/menu.variants.d.ts

@@ -0,0 +1 @@
+export declare const menuPopover: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;

package/dist/esm/core/components/menu/menu.variants.js

@@ -0,0 +1,9 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/menu/menu.variants.ts
+var t = e({ base: [
+	"uy:flex uy:flex-col uy:justify-start uy:items-start uy:p-100",
+	"uy:max-h-[var(--popover-available-height,100dvh)] uy:overflow-x-hidden uy:overflow-y-auto",
+	"uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300"
+] });
+//#endregion
+export { t as menuPopover };

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

@@ -1,14 +1,51 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { MenuProps as ReactAriaMenuProps } from 'react-aria-components/Menu';
-interface MenuContent {
+export interface MenuContentProps {
+    /** Sets a fixed width for the menu panel. */
     width?: number;
-    /** Add custom classes to the menu content */
+    /** Adds custom classes to the menu panel. */
     className?: string;
+    /** Controls whether items can be selected and which selection model to use. */
     selectionMode?: ReactAriaMenuProps<object>['selectionMode'];
+    /** Controls the selected item keys for selection-enabled menus. */
     selectedKeys?: ReactAriaMenuProps<object>['selectedKeys'];
+    /** Renders custom content when the menu has no items. */
+    renderEmptyState?: ReactNode | (() => ReactNode);
 }
-export declare function MenuContent({ children, width, className, selectionMode, selectedKeys, }: PropsWithChildren<MenuContent>): import('react/jsx-runtime').JSX.Element;
+/**
+ * Provides the keyboard-navigable list inside a `Menu` or `MenuSubmenu`.
+ *
+ * Use `MenuContent` for actions, links, sections, and custom empty states.
+ * The panel uses Unity's menu sizing by default and keeps item focus and
+ * selection semantics provided by React Aria.
+ * @param props - Menu items, sizing, selection, and empty-state content.
+ * @param props.children - `RawMenuItem`, `MenuSection`, `MenuSeparator`, or
+ *   `MenuSubmenu` elements.
+ * @param props.width - Sets a fixed panel width in pixels.
+ * @param props.className - Adds custom classes to the menu panel.
+ * @param props.selectionMode - Enables single or multiple item selection.
+ * @param props.selectedKeys - Controls the selected item keys.
+ * @param props.renderEmptyState - Renders when the menu contains no items.
+ * @see {@link MenuContentProps} for all available props.
+ * @see {@link RawMenuItem} for the standard item composition.
+ * @example
+ * ```tsx
+ * import {
+ *   MenuContent,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * <MenuContent>
+ *   <RawMenuItem>Cut</RawMenuItem>
+ *   <RawMenuItem>Copy</RawMenuItem>
+ * </MenuContent>
+ * ```
+ * @remarks
+ * The default panel width is at least 192px and at most 384px, including when
+ * the menu renders an empty state. Pass `renderEmptyState` when the menu can
+ * legitimately have no actions.
+ */
+export declare function MenuContent({ children, width, className, selectionMode, selectedKeys, renderEmptyState, }: PropsWithChildren<MenuContentProps>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuContent {
     var displayName: string;
 }
-export {};

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

@@ -1,21 +1,26 @@
+import { useMenuContext as e } from "../Menu.context.js";
 import "react";
-import { uyMerge as e, uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-import { Menu as r } from "react-aria-components/Menu";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { Menu as i } from "react-aria-components/Menu";
 //#region src/core/components/menu/parts/MenuContent.tsx
-var i = t({ base: ["uy:outline-none", "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width)"] });
-function a({ children: t, width: a, className: o, selectionMode: s, selectedKeys: c }) {
-	return /* @__PURE__ */ n(r, {
-		className: e(i(), o),
-		selectionMode: s,
-		selectedKeys: c,
+var a = n({ base: ["uy:outline-none", "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width) uy:max-w-(--uy-menu-content-max-width)"] });
+function o({ children: n, width: o, className: s, selectionMode: c, selectedKeys: l, renderEmptyState: u }) {
+	let { compact: d } = e(), f = typeof u == "function" ? u : u === void 0 ? void 0 : () => u;
+	return /* @__PURE__ */ r(i, {
+		className: t(a(), s),
+		selectionMode: c,
+		selectedKeys: l,
+		renderEmptyState: f,
+		"data-compact": d,
 		style: {
-			"--uy-menu-content-width": a ? `${a}px` : "auto",
-			"--uy-menu-content-min-width": a ? "" : "calc(var(--uy-spacing) * 40)"
+			"--uy-menu-content-width": o ? `${o}px` : "auto",
+			"--uy-menu-content-min-width": o ? "0px" : "calc(var(--uy-spacing) * 24)",
+			"--uy-menu-content-max-width": o ? `${o}px` : "calc(var(--uy-spacing) * 48)"
 		},
-		children: t
+		children: n
 	});
 }
-a.displayName = "MenuContent";
+o.displayName = "MenuContent";
 //#endregion
-export { a as MenuContent };
+export { o as MenuContent };

package/dist/esm/core/components/menu/parts/MenuHeader.d.ts

@@ -1,9 +1,19 @@
 import { PropsWithChildren } from 'react';
-interface MenuHeaderProps {
+export interface MenuHeaderProps {
+    /** Adds classes to the header element. */
     className?: string;
 }
+/**
+ * Adds a non-interactive heading above a group of menu items.
+ *
+ * Use `MenuHeader` for contextual text that is not a selectable section
+ * heading. Use `MenuSection` when the heading labels a semantic group of
+ * actions.
+ * @param props - Header content and optional classes.
+ * @param props.children - The non-interactive heading content.
+ * @param props.className - Adds classes to the header element.
+ */
 export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuHeader {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/MenuHeader.js

@@ -1,14 +1,16 @@
-import { MenuSeparator as e } from "./MenuSeparator.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { MenuSection as r } from "react-aria-components/Menu";
-import { Header as i } from "react-aria-components/Header";
+import { useMenuContext as e } from "../Menu.context.js";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { MenuSection as i } from "react-aria-components/Menu";
+import { Header as a } from "react-aria-components/Header";
 //#region src/core/components/menu/parts/MenuHeader.tsx
-function a({ children: a, className: o }) {
-	return /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t(i, {
-		className: `uy:p-100 ${o}`,
-		children: a
-	}), /* @__PURE__ */ t(e, {})] });
+function o({ children: o, className: s }) {
+	let { compact: c } = e();
+	return /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n(a, {
+		className: `uy:px-100 ${c ? "uy:py-50" : "uy:py-100"} ${s ?? ""}`,
+		children: o
+	}), /* @__PURE__ */ n(t, {})] });
 }
-a.displayName = "MenuHeader";
+o.displayName = "MenuHeader";
 //#endregion
-export { a as MenuHeader };
+export { o as MenuHeader };

package/dist/esm/core/components/menu/parts/MenuSection.d.ts

@@ -1,5 +1,5 @@
 import { MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components/Menu';
-interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
+export interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
     /**
      * The label rendered above the section's items.
      * Always present in the DOM for accessibility; use `isTitleHidden` to hide it visually.
@@ -10,13 +10,20 @@ interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProp
      * @default false
      */
     isTitleHidden?: boolean;
+    /**
+     * Adds a separator after the section.
+     * @default false
+     */
+    withDivider?: boolean;
+    /** Adds classes to the section root. */
     className?: string;
 }
 /**
  * `MenuSection` groups related menu items under a labelled heading inside a `MenuContent` panel.
  * The section title provides both visual context and an accessible label for assistive technologies.
  * Use multiple `MenuSection` blocks separated by `MenuSeparator` to divide a menu into distinct
- * named categories.
+ * named categories. Set `compact` on the parent `Menu` to use the compact
+ * spacing for the section and its items.
  *
  * For collection-based rendering pass an `items` array and a render function as children.
  * For static content pass `RawMenuItem` elements directly as children.
@@ -75,8 +82,7 @@ interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProp
  *   visually distinct groups within a single menu
  * @see {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/core/components/menu/parts/MenuSection.tsx Source code on GitHub}
  */
-export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, ...rest }: MenuSectionProps<TItemType>): import('react/jsx-runtime').JSX.Element;
+export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, withDivider, ...rest }: MenuSectionProps<TItemType>): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuSection {
     var displayName: string;
 }
-export {};

package/dist/esm/core/components/menu/parts/MenuSection.js

@@ -1,34 +1,53 @@
-import { uyTv as e } from "@payfit/unity-themes";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { MenuSection as r } from "react-aria-components/Menu";
-import { Header as i } from "react-aria-components/Header";
-import { Collection as a } from "react-aria-components/Collection";
+import { useMenuContext as e } from "../Menu.context.js";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MenuSection as a } from "react-aria-components/Menu";
+import { Header as o } from "react-aria-components/Header";
+import { Collection as s } from "react-aria-components/Collection";
 //#region src/core/components/menu/parts/MenuSection.tsx
-var o = e({
+var c = n({
 	slots: {
-		base: [""],
-		header: ["uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral-enabled"]
+		base: ["uy:group/menu-section uy:w-full"],
+		header: ["uy:w-full uy:overflow-clip uy:px-150 uy:py-125 uy:sm:py-100 uy:typography-body-strong uy:text-content-neutral-enabled"]
 	},
-	variants: { isTitleHidden: {
-		true: { header: "uy:sr-only" },
-		false: { header: "" }
-	} },
-	defaultVariants: { isTitleHidden: !1 }
+	variants: {
+		compact: {
+			true: { header: "uy:px-100 uy:py-100 uy:sm:py-50" },
+			false: { header: "" }
+		},
+		isTitleHidden: {
+			true: { header: "uy:sr-only" },
+			false: { header: "" }
+		}
+	},
+	defaultVariants: {
+		compact: !1,
+		isTitleHidden: !1
+	}
 });
-function s({ children: e, items: s, className: c, title: l, isTitleHidden: u, ...d }) {
-	let { base: f, header: p } = o({ isTitleHidden: u });
-	return /* @__PURE__ */ n(r, {
-		...d,
-		className: f({ className: c }),
-		children: [/* @__PURE__ */ t(i, {
-			className: p(),
-			children: l
-		}), /* @__PURE__ */ t(a, {
-			items: s,
-			children: e
-		})]
+function l({ children: n, items: l, className: u, title: d, isTitleHidden: f, withDivider: p = !1, ...m }) {
+	let { compact: h } = e(), { base: g, header: _ } = c({
+		isTitleHidden: f,
+		compact: h
+	});
+	return /* @__PURE__ */ i(a, {
+		...m,
+		"data-compact": h || void 0,
+		className: g({ className: u }),
+		children: [
+			/* @__PURE__ */ r(o, {
+				className: _(),
+				children: d
+			}),
+			/* @__PURE__ */ r(s, {
+				items: l,
+				children: n
+			}),
+			p && /* @__PURE__ */ r(t, {})
+		]
 	});
 }
-s.displayName = "MenuSection";
+l.displayName = "MenuSection";
 //#endregion
-export { s as MenuSection };
+export { l as MenuSection };

package/dist/esm/core/components/menu/parts/MenuSeparator.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Separates related groups of actions inside a `MenuContent` panel.
+ *
+ * Use `MenuSeparator` between item groups when spacing alone would not make
+ * the menu's categories clear.
+ */
 export declare function MenuSeparator(): import('react/jsx-runtime').JSX.Element;
 export declare namespace MenuSeparator {
     var displayName: string;

package/dist/esm/core/components/menu/parts/MenuSeparator.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { Separator as t } from "react-aria-components/Separator";
 //#region src/core/components/menu/parts/MenuSeparator.tsx
 function n() {
-	return /* @__PURE__ */ e(t, { className: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100 uy:mb-100" });
+	return /* @__PURE__ */ e(t, { className: "uy:h-[1px] uy:bg-border-neutral uy:w-full uy:mt-100 uy:mb-100" });
 }
 n.displayName = "MenuSeparator";
 //#endregion

package/dist/esm/core/components/menu/parts/MenuSubmenu.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { SubmenuTriggerProps as AriaSubmenuTriggerProps } from 'react-aria-components/Menu';
+export interface MenuSubmenuProps extends Omit<AriaSubmenuTriggerProps, 'children'> {
+    /**
+     * The submenu trigger item followed by its menu content.
+     */
+    children: [ReactElement, ReactElement];
+}
+/**
+ * Adds a keyboard-accessible nested menu to a `MenuContent` panel.
+ *
+ * Use `MenuSubmenu` when an action needs a second level of choices. React Aria
+ * manages focus, pointer interaction, arrow-key navigation, and `Escape`
+ * dismissal; Unity adds the submenu caret to the trigger item automatically.
+ * @param props - React Aria submenu behavior and the two-part composition.
+ * @param props.children - Exactly two children: the trigger `RawMenuItem`,
+ *   followed by its `MenuContent`.
+ * @see {@link MenuSubmenuProps} for all available props.
+ * @example
+ * ```tsx
+ * import {
+ *   MenuContent,
+ *   MenuSubmenu,
+ *   RawMenuItem,
+ * } from '@payfit/unity-components'
+ *
+ * <MenuContent>
+ *   <MenuSubmenu>
+ *     <RawMenuItem>Share</RawMenuItem>
+ *     <MenuContent>
+ *       <RawMenuItem>SMS</RawMenuItem>
+ *       <RawMenuItem>Email</RawMenuItem>
+ *     </MenuContent>
+ *   </MenuSubmenu>
+ * </MenuContent>
+ * ```
+ * @remarks
+ * Nest another `MenuSubmenu` inside the child `MenuContent` to create deeper
+ * levels. Add a `suffix` to the trigger item when it also needs a badge or
+ * other trailing content; Unity displays it before the submenu caret.
+ */
+export declare function MenuSubmenu({ children, ...rest }: MenuSubmenuProps): ReactElement;
+export declare namespace MenuSubmenu {
+    var displayName: string;
+}