@phillips/seldon 1.246.0 → 1.247.0

package/dist/_virtual/index12.js

@@ -1,4 +1,4 @@
-var a = {};
+var r = {};
 export {
-  a as __exports
+  r as __exports
 };

package/dist/_virtual/index13.js

@@ -1,4 +1,4 @@
-var r = {};
+var a = {};
 export {
-  r as __exports
+  a as __exports
 };

package/dist/assets/formatted/Search.js

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import { memo as m, forwardRef as f } from "react";
-import { kebabCase as c } from "../../node_modules/change-case/dist/index.js";
-const g = m(
-  f((l, o) => {
-    const { color: r, height: d, width: a, title: e, titleId: n } = l, t = n || c(e || "");
+import { kebabCase as h } from "../../node_modules/change-case/dist/index.js";
+const u = m(
+  f((t, o) => {
+    const { color: r, height: d, width: a, title: e, titleId: n } = t, l = e ? n || h(e) : void 0;
     return /* @__PURE__ */ s(
       "svg",
       {
@@ -12,12 +12,11 @@ const g = m(
         viewBox: "0 0 24 24",
         height: d,
         width: a,
-        role: "img",
         ref: o,
-        "aria-labelledby": t,
-        ...l,
+        ...l ? { role: "img", "aria-labelledby": l } : { "aria-hidden": !0 },
+        ...t,
         children: [
-          e ? /* @__PURE__ */ i("title", { id: t, children: e }) : null,
+          e && l ? /* @__PURE__ */ i("title", { id: l, children: e }) : null,
           /* @__PURE__ */ i(
             "path",
             {
@@ -33,5 +32,5 @@ const g = m(
   })
 );
 export {
-  g as default
+  u as default
 };

package/dist/components/Input/utils.js

@@ -30,8 +30,10 @@ import "../LinkList/LinkList.js";
 import "../Modal/Modal.js";
 import "../Navigation/Navigation.js";
 import "../Navigation/NavigationItem/NavigationItem.js";
-import "../Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import "../Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.js";
+import "../Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.js";
 import "../Navigation/NavigationList/NavigationList.js";
+import "../Navigation/NavigationSubmenu/NavigationSubmenu.js";
 import "../Pagination/Pagination.js";
 import "../PinchZoom/PinchZoom.js";
 import "../Row/Row.js";
@@ -92,7 +94,7 @@ import "../../patterns/CountryPicker/CountryPicker.js";
 import "../../patterns/ProgressWizard/ProgressWizard.js";
 import "../../patterns/ProgressWizard/types.js";
 import "../../patterns/PhoneNumberInput/PhoneNumberInput.js";
-const Lp = () => ({
+const Op = () => ({
   adornment: `${p}-input__wrapper__adornment`,
   emptyValidation: `${p}-input__empty-validation`,
   input: `${p}-input__input`,
@@ -104,5 +106,5 @@ const Lp = () => ({
   wrapperInput: `${p}-input__wrapper__input`
 });
 export {
-  Lp as getInputClassNames
+  Op as getInputClassNames
 };

package/dist/components/Navigation/Navigation.js

@@ -1,36 +1,60 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import e, { forwardRef as u } from "react";
-import { findChildrenOfType as s, findChildrenExcludingTypes as x, px as l } from "../../utils/index.js";
-import E from "../../_virtual/index.js";
-import { HeaderContext as N } from "../../site-furniture/Header/Header.js";
-import d from "./NavigationList/NavigationList.js";
-import m from "../../patterns/LanguageSelector/LanguageSelector.js";
-import { SSRMediaQuery as S } from "../../providers/SeldonProvider/utils.js";
-const y = u(
-  ({ children: i, className: c, id: a, visible: f = !0, ...p }, v) => {
-    const { isSearchExpanded: n } = e.useContext(N), o = s(i, d)?.[0], g = x(i, [d, m]), t = s(i, m)?.[0];
-    return /* @__PURE__ */ r(
-      "nav",
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import e, { forwardRef as C } from "react";
+import { findChildrenOfType as f, findChildrenExcludingTypes as M, px as a } from "../../utils/index.js";
+import u from "../../_virtual/index.js";
+import { HeaderContext as R } from "../../site-furniture/Header/Header.js";
+import p from "./NavigationList/NavigationList.js";
+import v from "../../patterns/LanguageSelector/LanguageSelector.js";
+import { SSRMediaQuery as l } from "../../providers/SeldonProvider/utils.js";
+import V from "../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { Viewport as T, Root as $ } from "../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+const w = C(
+  ({ "aria-label": h, children: t, className: S, id: s, visible: g = !0, dir: O, ...x }, _) => {
+    const { isSearchExpanded: n, activeSubmenuId: b, setActiveSubmenuId: E } = e.useContext(R), o = f(t, p)?.[0], N = M(t, [p, v]), r = f(t, v)?.[0], d = b ?? "", y = /* @__PURE__ */ c(
+      "div",
       {
-        role: "navigation",
-        "data-testid": a,
-        id: a,
-        style: { "--visible": f ? "visible" : "hidden" },
-        className: E(`${l}-nav`, c),
-        ...p,
-        ref: v,
-        children: /* @__PURE__ */ h("div", { className: `${l}-nav__list-container`, children: [
-          g,
-          e.isValidElement(o) ? e.cloneElement(o, { isOffScreen: n }) : void 0,
-          /* @__PURE__ */ r(S.Media, { lessThan: "md", children: e.isValidElement(t) && t ? e.cloneElement(t, {
+        className: u(`${a}-nav__list-container`, {
+          [`${a}-nav__list-container--search-expanded`]: n
+        }),
+        children: [
+          N,
+          /* @__PURE__ */ i(l.Media, { lessThan: "md", children: e.isValidElement(o) ? e.cloneElement(o, {
+            isOffScreen: n,
+            isMobile: !0
+          }) : void 0 }),
+          /* @__PURE__ */ i(l.Media, { greaterThanOrEqual: "md", children: e.isValidElement(o) ? /* @__PURE__ */ c(V, { enabled: !!d, allowPinchZoom: !0, removeScrollBar: !1, children: [
+            e.cloneElement(o, {
+              isOffScreen: n,
+              isMobile: !1
+            }),
+            /* @__PURE__ */ i(T, { className: `${a}-nav__radix-viewport` })
+          ] }) : void 0 }),
+          /* @__PURE__ */ i(l.Media, { lessThan: "md", children: e.isValidElement(r) && r ? e.cloneElement(r, {
             isHidden: n
           }) : void 0 })
-        ] })
+        ]
+      }
+    );
+    return /* @__PURE__ */ i(
+      $,
+      {
+        "aria-label": h ?? "Main navigation",
+        "data-testid": s,
+        id: s,
+        style: { "--visible": g ? "visible" : "hidden" },
+        className: u(`${a}-nav`, `${a}-nav__radix-root`, S),
+        delayDuration: 0,
+        skipDelayDuration: 300,
+        value: d,
+        onValueChange: (m) => E(m === "" ? null : m),
+        ref: _,
+        ...x,
+        children: y
       }
     );
   }
 );
-y.displayName = "Navigation";
+w.displayName = "Navigation";
 export {
-  y as default
+  w as default
 };

package/dist/components/Navigation/Navigation.stories.d.ts

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import('./Navigation').NavigationProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Navigation').NavigationProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
     tags: string[];
     parameters: {
         docs: {

package/dist/components/Navigation/NavigationItem/NavigationItem.d.ts

@@ -30,6 +30,14 @@ export interface NavigationItemProps extends ComponentProps<'li'> {
      * Element to render within the navigation item, renders <Link> by default
      */
     element?: ElementType<LinkProps>;
+    /**
+     * When false (desktop), render as NavigationMenu.Item + Link for arrow-key navigation. Set by NavigationList.
+     */
+    isMobile?: boolean;
+    /**
+     * When true (desktop submenu), wrap link in NavigationMenu.Link so Radix closes the submenu on click
+     */
+    asRadixSubmenuLink?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Navigation/NavigationItem/NavigationItem.js

@@ -1,47 +1,48 @@
-import { jsx as i, jsxs as _ } from "react/jsx-runtime";
-import { px as a } from "../../../utils/index.js";
-import n from "../../../_virtual/index.js";
-import v from "../../Link/Link.js";
-import { LinkVariants as $ } from "../../Link/types.js";
-import { forwardRef as N } from "react";
-const h = N(
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { px as t } from "../../../utils/index.js";
+import d from "../../../_virtual/index.js";
+import x from "../../Link/Link.js";
+import { LinkVariants as L } from "../../Link/types.js";
+import { forwardRef as C } from "react";
+import { Item as I, Link as c } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+const g = C(
   ({
-    badge: e,
-    className: r = "",
-    href: s,
-    isViewAllLink: l = !1,
-    label: m,
-    navGroup: o,
-    navType: t,
-    onClick: c,
-    element: d = v,
-    ...f
-  }, p) => /* @__PURE__ */ i(
-    "li",
-    {
-      ...f,
-      onClick: c,
-      "data-testid": `nav-item-${m}`,
-      className: n(`${a}-nav__item`, `${a}-nav__item--${o}`, r),
-      ref: p,
-      children: /* @__PURE__ */ _(
-        d,
-        {
-          className: n({
-            [`${a}-nav__item--view-all`]: l
-          }),
-          href: s,
-          variant: t || $.linkStylised,
-          children: [
-            /* @__PURE__ */ i("span", { className: `${a}-nav__item--label`, children: m }),
-            e ? /* @__PURE__ */ i("span", { className: `${a}-nav__item--badge `, children: ` • ${e}` }) : null
-          ]
-        }
-      )
+    badge: r,
+    className: f = "",
+    href: v,
+    isViewAllLink: _ = !1,
+    label: i,
+    navGroup: $,
+    navType: l,
+    onClick: o,
+    element: h = x,
+    isMobile: N,
+    asRadixSubmenuLink: u,
+    ...e
+  }, n) => {
+    const s = d(`${t}-nav__item`, `${t}-nav__item--${$}`, f), m = /* @__PURE__ */ k(
+      h,
+      {
+        className: d({
+          [`${t}-nav__item--view-all`]: _
+        }),
+        href: v,
+        variant: l || L.linkStylised,
+        onClick: o,
+        children: [
+          /* @__PURE__ */ a("span", { className: `${t}-nav__item--label`, children: i }),
+          r ? /* @__PURE__ */ a("span", { className: `${t}-nav__item--badge `, children: ` • ${r}` }) : null
+        ]
+      }
+    );
+    if (N === !1) {
+      const { value: j, ...p } = e;
+      return /* @__PURE__ */ a(I, { ref: n, "data-testid": `nav-item-${i}`, className: s, ...p, children: /* @__PURE__ */ a(c, { asChild: !0, children: m }) });
     }
-  )
+    return u ? /* @__PURE__ */ a("li", { ...e, "data-testid": `nav-item-${i}`, className: s, ref: n, children: /* @__PURE__ */ a(c, { asChild: !0, children: m }) }) : /* @__PURE__ */ a("li", { ...e, onClick: o, "data-testid": `nav-item-${i}`, className: s, ref: n, children: m });
+  }
 );
-h.displayName = "NavigationItem";
+g.displayName = "NavigationItem";
 export {
-  h as default
+  g as default
 };

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { NavigationSubmenuProps } from '../NavigationSubmenu/NavigationSubmenu';
+import { NavigationItemWithSubmenuProps } from './NavigationItemWithSubmenu';
+export interface NavigationDesktopSubmenuProps {
+    navSubmenuElement: React.ReactElement<NavigationSubmenuProps>[] | null | undefined;
+    itemValue: string;
+    baseClassName: string;
+    commonProps: Record<string, unknown>;
+    label: string;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    closeMenu?: () => void;
+    setActiveSubmenuId?: (id: string | null) => void;
+    itemProps: Omit<NavigationItemWithSubmenuProps, 'id' | 'label' | 'children' | 'className' | 'onClick' | 'renderMode' | 'isMobile'>;
+}
+declare const NavigationDesktopSubmenu: React.ForwardRefExoticComponent<NavigationDesktopSubmenuProps & React.RefAttributes<HTMLLIElement>>;
+export default NavigationDesktopSubmenu;

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationDesktopSubmenu.js

@@ -0,0 +1,70 @@
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import c from "../../../_virtual/index.js";
+import u, { forwardRef as v } from "react";
+import { Item as x, Trigger as $, Content as N } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import { px as t } from "../../../utils/index.js";
+import { TextVariants as _ } from "../../Text/types.js";
+import f from "../../Text/Text.js";
+const w = v(
+  ({
+    navSubmenuElement: a,
+    itemValue: g,
+    baseClassName: n,
+    commonProps: o,
+    label: e,
+    className: s,
+    onClick: l,
+    closeMenu: m,
+    setActiveSubmenuId: p,
+    itemProps: h
+  }, d) => a?.length ? /* @__PURE__ */ k(
+    x,
+    {
+      value: g,
+      ref: d,
+      className: c(s, n, `${t}-nav__item`),
+      children: [
+        /* @__PURE__ */ i(
+          $,
+          {
+            "aria-label": e,
+            className: `${t}-nav__item-trigger-wrapper`,
+            "data-testid": o["data-testid"],
+            onClick: l ? (r) => l(r) : void 0,
+            children: /* @__PURE__ */ i("span", { className: `${t}-nav__item-trigger`, children: /* @__PURE__ */ i(f, { variant: _.linkStylised, children: e }) })
+          }
+        ),
+        /* @__PURE__ */ i(
+          N,
+          {
+            className: `${n}__submenu`,
+            "aria-label": `${e} submenu`,
+            onSelect: (r) => {
+              a[0].props?.onClick?.(r), m?.(), p?.(null);
+            },
+            children: u.cloneElement(a[0], {
+              wrapLinksInRadixLink: !0,
+              onClick: (r) => {
+                a[0].props?.onClick?.(r), m?.(), p?.(null);
+              }
+            })
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i(
+    "li",
+    {
+      ...o,
+      ref: d,
+      className: c(s, n, `${t}-nav__item`),
+      onClick: l,
+      ...h,
+      children: /* @__PURE__ */ i("span", { className: `${t}-nav__item-trigger`, children: /* @__PURE__ */ i(f, { variant: _.linkStylised, children: e }) })
+    }
+  )
+);
+w.displayName = "NavigationDesktopSubmenu";
+export {
+  w as default
+};

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.d.ts

@@ -0,0 +1,31 @@
+import { default as React, ComponentProps } from 'react';
+export interface NavigationItemWithSubmenuProps extends ComponentProps<'li'> {
+    /**
+     * Label for the navigation item
+     */
+    label: string;
+    /**
+     * ID for the trigger - required for context-based submenu management
+     */
+    id?: string;
+    /**
+     * When set by Navigation/NavigationList, render only this variant so list items stay direct children of ul
+     * (no SSRMediaQuery wrapper). Prefer isMobile; renderMode is kept for backwards compatibility.
+     */
+    renderMode?: 'mobile' | 'desktop';
+    /**
+     * Explicit mobile/desktop flag injected by NavigationList; when set, takes precedence over renderMode.
+     */
+    isMobile?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * Supports clicking in mobile mode and hovering in desktop mode to expand the child navigation lists
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-languageselector--overview)
+ */
+declare const NavigationItemWithSubmenu: React.ForwardRefExoticComponent<Omit<NavigationItemWithSubmenuProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default NavigationItemWithSubmenu;

package/dist/components/Navigation/NavigationItemWithSubmenu/NavigationItemWithSubmenu.js

@@ -0,0 +1,68 @@
+import { jsx as e, Fragment as I, jsxs as T } from "react/jsx-runtime";
+import f from "../../../_virtual/index.js";
+import m, { forwardRef as $ } from "react";
+import y from "../../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { SSRMediaQuery as h } from "../../../providers/SeldonProvider/utils.js";
+import { HeaderContext as N } from "../../../site-furniture/Header/Header.js";
+import { getCommonProps as M, findChildrenOfType as W, px as b } from "../../../utils/index.js";
+import P from "../../Accordion/Accordion.js";
+import R from "../../Accordion/AccordionItem.js";
+import { TextVariants as E } from "../../Text/types.js";
+import O from "../../Text/Text.js";
+import A from "../NavigationSubmenu/NavigationSubmenu.js";
+import V from "./NavigationDesktopSubmenu.js";
+const v = ({ id: n, label: o, children: a }) => {
+  const { isMenuOpen: s } = m.useContext(N);
+  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
+    R,
+    {
+      hasTransition: !0,
+      id: `accordion-item-${n}`,
+      label: /* @__PURE__ */ e(O, { variant: E.linkStylised, children: o }),
+      children: a
+    },
+    `accordion-key-${o}`
+  ) }, `accordion-key-${o}-${s}`);
+}, j = $(
+  ({ id: n, label: o, children: a, className: s, onClick: S, renderMode: k, isMobile: u, ...C }, _) => {
+    const { className: i, ...r } = M({ id: n }, "NavigationItemWithSubmenu"), t = W(a, A), { closeMenu: c, setActiveSubmenuId: g } = m.useContext(N), d = /* @__PURE__ */ e(
+      V,
+      {
+        ref: _,
+        navSubmenuElement: t,
+        itemValue: n ?? i ?? "item",
+        baseClassName: i,
+        commonProps: r,
+        label: o,
+        className: s,
+        onClick: S,
+        closeMenu: c,
+        setActiveSubmenuId: g,
+        itemProps: C
+      }
+    ), p = typeof u == "boolean" ? u ? "mobile" : "desktop" : k;
+    if (p === "mobile")
+      return /* @__PURE__ */ e("li", { className: f(i, `${b}-nav__item`), ...r, children: /* @__PURE__ */ e(v, { id: n, label: o, ...r, children: t ? m.cloneElement(t[0], {
+        className: `${i}__submenu--mobile`,
+        onClick: (l) => {
+          t[0].props?.onClick?.(l), c?.();
+        }
+      }) : null }) });
+    if (p === "desktop")
+      return d;
+    const { "data-testid": q, ...x } = r;
+    return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ T(y, { enabled: !1, allowPinchZoom: !0, removeScrollBar: !1, children: [
+      /* @__PURE__ */ e(h.Media, { lessThan: "md", children: /* @__PURE__ */ e("li", { className: f(i, `${b}-nav__item`), ...x, children: /* @__PURE__ */ e(v, { id: n, label: o, ...r, children: t ? m.cloneElement(t[0], {
+        className: `${i}__submenu--mobile`,
+        onClick: (l) => {
+          t[0].props?.onClick?.(l), c?.();
+        }
+      }) : null }) }) }),
+      /* @__PURE__ */ e(h.Media, { greaterThanOrEqual: "md", children: d })
+    ] }) });
+  }
+);
+j.displayName = "NavigationItemWithSubmenu";
+export {
+  j as default
+};

package/dist/components/Navigation/NavigationItemWithSubmenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default, type NavigationItemWithSubmenuProps } from './NavigationItemWithSubmenu';
+export { default as NavigationDesktopSubmenu, type NavigationDesktopSubmenuProps } from './NavigationDesktopSubmenu';

package/dist/components/Navigation/NavigationList/NavigationList.d.ts

@@ -9,17 +9,20 @@ export interface NavigationListProps extends React.ComponentProps<'ul'> {
      */
     isOffScreen?: boolean;
     /**
-     * Optional left section heading
+     * Rewrite the onClick event
      */
-    leftSectionHeading?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
     /**
-     * Optional right section heading
+     * When false (desktop), wrap in Radix NavigationMenu.List and pass desktop behavior to children.
+     * When true or omitted (mobile), render plain list and pass mobile behavior to children.
      */
-    rightSectionHeading?: string;
-    /**
-     * Rewrite the onClick event
-     * */
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    isMobile?: boolean;
 }
+/**
+ * ## Overview
+ *
+ * Top-level nav list used inside Navigation. Renders direct children (NavigationItem, NavigationItemWithSubmenu).
+ * For submenu content with left/right sections, use NavigationSubmenu inside NavigationItemWithSubmenu.
+ */
 declare const NavigationList: React.ForwardRefExoticComponent<Omit<NavigationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default NavigationList;

package/dist/components/Navigation/NavigationList/NavigationList.js

@@ -1,51 +1,26 @@
-import { jsxs as r, jsx as d } from "react/jsx-runtime";
-import o from "../../../_virtual/index.js";
+import { jsx as r, Fragment as p } from "react/jsx-runtime";
+import f from "../../../_virtual/index.js";
 import * as a from "react";
-import { px as n } from "../../../utils/index.js";
-import { TextVariants as u } from "../../Text/types.js";
-import f from "../../Text/Text.js";
-const g = a.forwardRef(
-  ({ id: _, children: s, className: N, isOffScreen: m, leftSectionHeading: p, rightSectionHeading: c, onClick: v }, $) => {
-    const l = a.Children.toArray(s).map((t) => {
-      if (a.isValidElement(t) && t.props.navGroup === "nav-link-start")
-        return a.cloneElement(t, {
-          onClick: (e) => {
-            v?.(e), t.props?.onClick?.(e);
-          }
-        });
-    }).filter(Boolean), i = a.Children.toArray(s).map((t) => {
-      if (a.isValidElement(t) && t.props.navGroup === "nav-link-end")
-        return a.cloneElement(t, {
-          onClick: (e) => {
-            v?.(e), t.props?.onClick?.(e);
-          }
-        });
-    }).filter(Boolean);
-    return /* @__PURE__ */ r(
-      "ul",
-      {
-        "aria-hidden": m,
-        id: _,
-        "data-testid": _,
-        role: "list",
-        className: o(N, `${n}-nav__list`, { [`${n}-nav__list--offscreen`]: m }),
-        ref: $,
-        children: [
-          l.length > 0 ? /* @__PURE__ */ r("div", { className: o(`${n}-nav__list__section`, `${n}-nav__list__section--start`), children: [
-            p ? /* @__PURE__ */ d(f, { variant: u.headingMedium, className: `${n}-nav__list__section--start__title`, children: p }) : null,
-            l
-          ] }) : null,
-          i.length > 0 ? /* @__PURE__ */ r("div", { className: o(`${n}-nav__list__section`, `${n}-nav__list__section--end`), children: [
-            c ? /* @__PURE__ */ d(f, { variant: u.headingMedium, className: `${n}-nav__list__section--end__title`, children: c }) : null,
-            i
-          ] }) : null,
-          !l.length && !i.length ? s : null
-        ]
-      }
-    );
+import { px as u } from "../../../utils/index.js";
+import d from "../NavigationItem/NavigationItem.js";
+import { List as c } from "../../../node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import N from "../NavigationItemWithSubmenu/NavigationItemWithSubmenu.js";
+function v({ children: e, isMobile: n = !0 }) {
+  return /* @__PURE__ */ r(p, { children: a.Children.map(e, (t) => a.isValidElement(t) && t.type === d ? a.cloneElement(t, {
+    isMobile: n
+  }) : a.isValidElement(t) && t.type === N ? a.cloneElement(t, {
+    isMobile: n
+  }) : t) });
+}
+const C = a.forwardRef(
+  ({ id: e, children: n, className: t, isOffScreen: i, onClick: g, isMobile: o = !0 }, m) => {
+    const s = /* @__PURE__ */ r(v, { isMobile: o, children: n }), l = f(t, `${u}-nav__list`, {
+      [`${u}-nav__list--offscreen`]: i
+    });
+    return o ? /* @__PURE__ */ r("ul", { "aria-hidden": i, id: e, "data-testid": e, role: "list", className: l, ref: m, children: s }) : /* @__PURE__ */ r(c, { asChild: !0, children: /* @__PURE__ */ r("ul", { "aria-hidden": i, id: e, "data-testid": e, role: "list", className: l, ref: m, children: s }) });
   }
 );
-g.displayName = "NavigationList";
+C.displayName = "NavigationList";
 export {
-  g as default
+  C as default
 };

package/dist/components/Navigation/NavigationSubmenu/NavigationSubmenu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface NavigationSubmenuProps extends React.ComponentProps<'ul'> {
+    /**
+     * id for the submenu list
+     */
+    id: string;
+    /**
+     * Optional left section heading (for nav-link-start items)
+     */
+    leftSectionHeading?: string;
+    /**
+     * Optional right section heading (for nav-link-end items, e.g. "View all")
+     */
+    rightSectionHeading?: string;
+    /**
+     * Rewrite the onClick event (e.g. close menu on link click)
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * When true (desktop submenu content), wrap each section item in NavigationMenu.Link so submenu closes on link click
+     */
+    wrapLinksInRadixLink?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * Used as the content of a submenu (inside NavigationItemWithSubmenu). Renders left and right sections
+ * from NavigationItem children with navGroup="nav-link-start" and navGroup="nav-link-end".
+ *
+ * Use NavigationList for the top-level nav in Navigation; use NavigationSubmenu for dropdown submenus.
+ */
+declare const NavigationSubmenu: React.ForwardRefExoticComponent<Omit<NavigationSubmenuProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default NavigationSubmenu;