@tedi-design-system/react 18.0.0-rc.7 → 18.0.0-rc.8

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.es.js

@@ -0,0 +1,101 @@
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import t from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as P } from "react";
+import { Icon as v } from "../../../../base/icon/icon.es.js";
+import e from "../../top-nav.module.scss.es.js";
+const f = P(
+  (b, h) => {
+    const {
+      children: N,
+      href: p,
+      icon: n,
+      isActive: s = !1,
+      hasSubmenu: r = !1,
+      disabled: a = !1,
+      onClick: m,
+      as: I,
+      className: y,
+      submenu: g,
+      renderSubmenuInline: k = !1,
+      isSubmenuOpen: w,
+      panelId: l,
+      ...x
+    } = b, c = !p && r, C = I ?? (c ? "button" : "a"), o = w ?? s, d = k && o && r, S = (u) => {
+      if (a) {
+        u.preventDefault();
+        return;
+      }
+      m == null || m(u);
+    }, T = t(
+      e["tedi-top-nav__link"],
+      {
+        [e["tedi-top-nav__link--active"]]: s || o
+      },
+      y
+    ), z = {
+      ...x,
+      ref: h,
+      className: T,
+      onClick: S,
+      ...c ? {
+        type: "button",
+        disabled: a,
+        "aria-haspopup": !0,
+        "aria-expanded": o,
+        "aria-controls": l
+      } : {
+        href: a ? void 0 : p,
+        "aria-current": s ? "page" : void 0,
+        "aria-disabled": a || void 0
+      }
+    };
+    return /* @__PURE__ */ _(
+      "li",
+      {
+        className: t(e["tedi-top-nav__item"], {
+          [e["tedi-top-nav__item--has-inline-submenu"]]: d
+        }),
+        children: [
+          /* @__PURE__ */ _(C, { ...z, children: [
+            n && /* @__PURE__ */ i(
+              v,
+              {
+                className: e["tedi-top-nav__icon"],
+                ...typeof n == "string" ? { name: n } : n,
+                size: typeof n == "string" ? 18 : n.size ?? 18,
+                color: "inherit"
+              }
+            ),
+            N,
+            r && /* @__PURE__ */ i(
+              v,
+              {
+                className: t(e["tedi-top-nav__icon"], e["tedi-top-nav__chevron"], {
+                  [e["tedi-top-nav__chevron--open"]]: o
+                }),
+                name: "keyboard_arrow_down",
+                size: 18,
+                color: "inherit"
+              }
+            )
+          ] }),
+          d && /* @__PURE__ */ i(
+            "div",
+            {
+              id: l,
+              className: t(e["tedi-top-nav__submenu"], e["tedi-top-nav__submenu--inline"]),
+              "data-name": "top-nav-submenu",
+              children: /* @__PURE__ */ i("div", { className: t(e["tedi-top-nav__submenu-inner"], e["tedi-top-nav__submenu-inner--inline"]), children: g })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+f.displayName = "TopNav.Item";
+const B = f;
+export {
+  B as TopNavItem,
+  B as default
+};

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),o=require("../../../../../../../external/classnames/index.cjs.js"),t=require("../../top-nav.module.scss.cjs.js"),e=({className:r})=>a.jsx("li",{role:"separator","aria-orientation":"vertical",className:o.default(t.default["tedi-top-nav__separator"],r),children:a.jsx("span",{className:t.default["tedi-top-nav__separator-line"],"aria-hidden":"true"})});e.displayName="TopNav.Separator";exports.TopNavSeparator=e;exports.default=e;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavSeparatorProps {
+    /**
+     * Additional class name applied to the separator list item.
+     */
+    className?: string;
+}
+export declare const TopNavSeparator: {
+    ({ className }: TopNavSeparatorProps): JSX.Element;
+    displayName: string;
+};
+export default TopNavSeparator;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.es.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import o from "../../../../../../../external/classnames/index.es.js";
+import r from "../../top-nav.module.scss.es.js";
+const t = ({ className: e }) => /* @__PURE__ */ a("li", { role: "separator", "aria-orientation": "vertical", className: o(r["tedi-top-nav__separator"], e), children: /* @__PURE__ */ a("span", { className: r["tedi-top-nav__separator-line"], "aria-hidden": "true" }) });
+t.displayName = "TopNav.Separator";
+export {
+  t as TopNavSeparator,
+  t as default
+};

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),_=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),o=require("../../top-nav.module.scss.cjs.js"),x=require("../../top-nav-context.cjs.js"),n=S.forwardRef((i,r)=>{const{children:c,href:l,isActive:s=!1,onClick:e,as:d,className:m,...p}=i,v=d||"a",t=x.useTopNavContext(),b=N=>{e==null||e(N),t==null||t.closeSubmenu()},f={...p,ref:r,className:_.default(o.default["tedi-top-nav__subitem-link"],{[o.default["tedi-top-nav__subitem-link--active"]]:s},m),href:l,"aria-current":s?"page":void 0,onClick:b};return a.jsx("li",{className:o.default["tedi-top-nav__subitem"],children:a.jsx(v,{...f,children:c})})});n.displayName="TopNav.SubItem";const u=n;exports.TopNavSubItem=u;exports.default=u;

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../../../helpers/polymorphic/types';
+type TopNavSubItemBaseProps = {
+    /**
+     * Link label.
+     */
+    children: React.ReactNode;
+    /**
+     * Destination URL.
+     */
+    href?: string;
+    /**
+     * Marks this submenu item as the current page.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Click handler. Receives the original mouse / keyboard event.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Additional class name applied to the link element.
+     */
+    className?: string;
+};
+export type TopNavSubItemProps<C extends React.ElementType = 'a'> = PolymorphicComponentPropWithRef<C, TopNavSubItemBaseProps>;
+export declare const TopNavSubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+export default TopNavSubItem;

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.es.js

@@ -0,0 +1,30 @@
+import { jsx as a } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as _ } from "react";
+import o from "../../top-nav.module.scss.es.js";
+import { useTopNavContext as h } from "../../top-nav-context.es.js";
+const m = _(
+  (n, i) => {
+    const { children: r, href: c, isActive: s = !1, onClick: e, as: p, className: l, ...u } = n, d = p || "a", t = h(), f = (N) => {
+      e == null || e(N), t == null || t.closeSubmenu();
+    }, v = {
+      ...u,
+      ref: i,
+      className: b(
+        o["tedi-top-nav__subitem-link"],
+        { [o["tedi-top-nav__subitem-link--active"]]: s },
+        l
+      ),
+      href: c,
+      "aria-current": s ? "page" : void 0,
+      onClick: f
+    };
+    return /* @__PURE__ */ a("li", { className: o["tedi-top-nav__subitem"], children: /* @__PURE__ */ a(d, { ...v, children: r }) });
+  }
+);
+m.displayName = "TopNav.SubItem";
+const I = m;
+export {
+  I as TopNavSubItem,
+  I as default
+};

package/src/tedi/components/layout/top-nav/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/top-nav-group/top-nav-group';
+export * from './components/top-nav-item/top-nav-item';
+export * from './components/top-nav-separator/top-nav-separator';
+export * from './components/top-nav-subitem/top-nav-subitem';
+export * from './top-nav';

package/src/tedi/components/layout/top-nav/top-nav-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),o=()=>t.useContext(e);exports.TopNavContext=e;exports.useTopNavContext=o;

package/src/tedi/components/layout/top-nav/top-nav-context.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavContextValue {
+    /**
+     * Closes the open desktop submenu (mega-menu) panel. Called by `TopNav.SubItem`
+     * when a submenu link is activated so the panel dismisses on navigation
+     * (important for SPA / client-side routing where the nav stays mounted).
+     * No-op when there is no open panel.
+     */
+    closeSubmenu: () => void;
+}
+export declare const TopNavContext: import('react').Context<TopNavContextValue | null>;
+export declare const useTopNavContext: () => TopNavContextValue | null;

package/src/tedi/components/layout/top-nav/top-nav-context.es.js

@@ -0,0 +1,6 @@
+import { useContext as t, createContext as o } from "react";
+const e = o(null), x = () => t(e);
+export {
+  e as TopNavContext,
+  x as useTopNavContext
+};

package/src/tedi/components/layout/top-nav/top-nav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,c=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&c.push(ie(i))}),c.length>0&&r.push({subHeading:f.title,subItems:c})}),r.length>0?r:void 0},p=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:c,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.useBreakpoint(),T=C.isBreakpointBelow(K,f),b=c!==void 0,[$,_]=t.useState(!1),z=b?c:$;t.useEffect(()=>{!b&&!T&&_(!1)},[T,b]);const J=e=>{b||_(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),l=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=l.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[l]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const q=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:q}),[q]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,B=t.useMemo(()=>l.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[l,N]),U=t.useMemo(()=>l.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[l]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const j=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:j,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!j&&B&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:B.props.submenu})})]})})};p.displayName="TopNav";p.Item=g.TopNavItem;p.Group=W.TopNavGroup;p.SubItem=R.TopNavSubItem;p.Separator=G.TopNavSeparator;exports.TopNav=p;exports.default=p;

package/src/tedi/components/layout/top-nav/top-nav.d.ts

@@ -0,0 +1,91 @@
+import { default as React, ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { TopNavGroupProps } from './components/top-nav-group/top-nav-group';
+import { TopNavItemProps } from './components/top-nav-item/top-nav-item';
+import { TopNavSubItemProps } from './components/top-nav-subitem/top-nav-subitem';
+type BreakpointWidthName = Exclude<Breakpoint, 'xs'>;
+export type TopNavMaxWidth = number | BreakpointWidthName | (string & {});
+export interface TopNavProps {
+    /**
+     * `TopNav.Item` and `TopNav.Separator` children. Any other
+     * React node is ignored. Fragments are flattened, so `<>…</>` wrappers work
+     * transparently.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the wrapping `<nav>` landmark.
+     */
+    ariaLabel: string;
+    /**
+     * Breakpoint below which the bar collapses into the shared Sidenav mobile
+     * drawer. Pass any TEDI breakpoint name (`xs`/`sm`/`md`/`lg`/`xl`/`xxl`).
+     * @default md
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Controlled open state for the mobile drawer. Pair with `onMenuToggle`
+     * to wire it to an external toggle button.
+     */
+    isMobileOpen?: boolean;
+    /**
+     * Fires whenever the mobile drawer opens or closes.
+     */
+    onMenuToggle?: (open: boolean) => void;
+    /**
+     * Dim the rest of the viewport when the mobile drawer is open.
+     * @default true
+     */
+    showMobileOverlay?: boolean;
+    /**
+     * Additional class name applied to the desktop `<nav>`.
+     */
+    className?: string;
+    /**
+     * Element id forwarded to the desktop `<nav>`.
+     */
+    id?: string;
+    /**
+     * Controls how the submenu (mega-menu) panel sizes and positions itself
+     * when the active item has submenu content. Both options use the same
+     * padding — this only affects the panel's width and horizontal position,
+     * not its density.
+     *
+     * - `'full'` (default) — the panel stretches to the full nav width and is
+     *   centered, suitable for wide multi-column mega-menus.
+     * - `'content'` — the panel is only as wide as its content and sits
+     *   left-aligned directly under the active item (it is *not* a smaller /
+     *   tighter variant — just not stretched). Good for single- or few-column
+     *   menus.
+     * @default full
+     */
+    submenuFit?: 'full' | 'content';
+    /**
+     * Constrains the inner content (item bar and full-width submenu inner) to a
+     * maximum width and centers it inside the blue `<nav>` background. Pass any
+     * valid CSS length (e.g. `1440`, `'1440px'`, `'90rem'`), or a TEDI breakpoint
+     * name (`'sm' | 'md' | 'lg' | 'xl' | 'xxl'`) — these resolve to the
+     * breakpoint's `min-width` (36rem / 48rem / 62rem / 75rem / 87.5rem
+     * respectively), useful for aligning the nav inner with a breakpoint-driven
+     * content container. The `<nav>` itself still spans 100% of its container.
+     *
+     * Pass `'none'` (or `0`) to disable the constraint and let the bar fill the
+     * full width of the nav.
+     * @default xxl
+     */
+    maxWidth?: TopNavMaxWidth | 'none';
+}
+export declare const TopNav: {
+    (props: TopNavProps): React.ReactElement | null;
+    displayName: string;
+    Item: <C extends React.ElementType = "a">(props: TopNavItemProps<C>) => React.ReactElement | null;
+    Group: {
+        ({ title, children, icon, headingLevel, className, }: TopNavGroupProps): JSX.Element;
+        displayName: string;
+    };
+    SubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+    Separator: {
+        ({ className }: import('./components/top-nav-separator/top-nav-separator').TopNavSeparatorProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default TopNav;

package/src/tedi/components/layout/top-nav/top-nav.es.js

@@ -0,0 +1,171 @@
+import { jsx as u, jsxs as ae } from "react/jsx-runtime";
+import ue from "../../../../../external/classnames/index.es.js";
+import R, { useState as P, useEffect as g, useMemo as c, useCallback as ce, useRef as le, useId as me, Children as l, isValidElement as w, Fragment as D } from "react";
+import { MobileNav as de } from "../mobile-nav/mobile-nav.es.js";
+import { TopNavGroup as F } from "./components/top-nav-group/top-nav-group.es.js";
+import { TopNavItem as M } from "./components/top-nav-item/top-nav-item.es.js";
+import { TopNavSeparator as H } from "./components/top-nav-separator/top-nav-separator.es.js";
+import { TopNavSubItem as K } from "./components/top-nav-subitem/top-nav-subitem.es.js";
+import f from "./top-nav.module.scss.es.js";
+import { TopNavContext as fe } from "./top-nav-context.es.js";
+import { useBreakpoint as ve, isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+const he = (n) => {
+  if (!(n === void 0 || n === "none" || n === 0))
+    return typeof n == "string" && n !== "xs" && n in V ? V[n] : n;
+}, q = (n) => {
+  const r = [];
+  return l.forEach(n, (t) => {
+    if (w(t)) {
+      if (t.type === D) {
+        r.push(...q(t.props.children));
+        return;
+      }
+      (t.type === M || t.type === H) && r.push(t);
+    }
+  }), r;
+}, j = (n) => n.type === M, Ie = (n) => ({
+  children: n.props.children,
+  href: n.props.href,
+  isActive: n.props.isActive,
+  onClick: n.props.onClick
+}), $ = (n) => {
+  if (!n) return;
+  const r = [];
+  return l.forEach(n, (t) => {
+    if (!w(t)) return;
+    if (t.type === D) {
+      const s = $(t.props.children);
+      s && r.push(...s);
+      return;
+    }
+    if (t.type !== F) return;
+    const b = t.props, p = [];
+    l.forEach(b.children, (s) => {
+      w(s) && s.type === K && p.push(Ie(s));
+    }), p.length > 0 && r.push({ subHeading: b.title, subItems: p });
+  }), r.length > 0 ? r : void 0;
+}, v = (n) => {
+  const {
+    children: r,
+    ariaLabel: t,
+    mobileBreakpoint: b = "md",
+    isMobileOpen: p,
+    onMenuToggle: s,
+    showMobileOverlay: z = !0,
+    className: T,
+    id: J,
+    submenuFit: Q = "full",
+    maxWidth: U = "xxl"
+  } = n, X = ve(), C = be(X, b), h = p !== void 0, [Y, B] = P(!1), Z = h ? p : Y;
+  g(() => {
+    !h && !C && B(!1);
+  }, [C, h]);
+  const ee = (e) => {
+    h || B(e), s == null || s(e);
+  }, E = c(() => q(r), [r]), a = c(() => E.filter(j), [E]), O = (e) => !e.props.href && l.count(e.props.submenu) > 0, _ = c(() => {
+    const e = a.findIndex((o) => O(o) && o.props.isActive);
+    return e === -1 ? null : e;
+  }, [a]), [I, m] = P(_);
+  g(() => {
+    m(_);
+  }, [_]);
+  const A = ce(() => m(null), []), ne = c(() => ({ closeSubmenu: A }), [A]), x = le(null), y = me();
+  g(() => {
+    if (I === null) return;
+    const e = (i) => {
+      x.current && !x.current.contains(i.target) && m(null);
+    }, o = (i) => {
+      var S;
+      if (i.key !== "Escape") return;
+      const d = (S = x.current) == null ? void 0 : S.querySelector(
+        `[aria-controls="${CSS.escape(y)}"][aria-expanded="true"]`
+      );
+      d == null || d.focus(), m(null);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+    };
+  }, [I, y]);
+  const W = (e, o) => O(e) ? I === o : !!e.props.isActive, L = c(
+    () => a.find((e, o) => W(e, o) && l.count(e.props.submenu) > 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, I]
+  ), te = c(
+    () => a.map((e) => ({
+      children: e.props.children,
+      disabled: e.props.disabled,
+      href: e.props.href,
+      icon: e.props.icon,
+      isActive: e.props.isActive,
+      onClick: e.props.onClick,
+      subItemGroups: $(e.props.submenu)
+    })),
+    [a]
+  );
+  if (C)
+    return /* @__PURE__ */ u(
+      de,
+      {
+        navItems: te,
+        ariaLabel: t,
+        isOpen: Z,
+        onClose: () => ee(!1),
+        showOverlay: z,
+        className: T
+      }
+    );
+  const G = Q === "content", N = he(U);
+  let oe = 0;
+  return /* @__PURE__ */ u(fe.Provider, { value: ne, children: /* @__PURE__ */ ae(
+    "nav",
+    {
+      ref: x,
+      id: J,
+      className: ue(f["tedi-top-nav"], T),
+      "aria-label": t,
+      "data-name": "top-nav",
+      children: [
+        /* @__PURE__ */ u("div", { className: f["tedi-top-nav__bar"], children: /* @__PURE__ */ u(
+          "ul",
+          {
+            className: f["tedi-top-nav__list"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: E.map((e, o) => {
+              if (j(e)) {
+                const i = oe++, d = l.count(e.props.submenu) > 0, S = O(e), re = W(e, i), k = e.props.onClick, se = S ? (ie) => {
+                  k == null || k(ie), m((pe) => pe === i ? null : i);
+                } : k;
+                return R.cloneElement(e, {
+                  key: o,
+                  hasSubmenu: d,
+                  renderSubmenuInline: G,
+                  isSubmenuOpen: re,
+                  panelId: y,
+                  onClick: se
+                });
+              }
+              return R.cloneElement(e, { key: o });
+            })
+          }
+        ) }),
+        !G && L && /* @__PURE__ */ u("div", { id: y, className: f["tedi-top-nav__submenu"], "data-name": "top-nav-submenu", children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: f["tedi-top-nav__submenu-inner"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: L.props.submenu
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+v.displayName = "TopNav";
+v.Item = M;
+v.Group = F;
+v.SubItem = K;
+v.Separator = H;
+export {
+  v as TopNav,
+  v as default
+};

package/src/tedi/components/layout/top-nav/top-nav.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-top-nav":"tedi-top-nav-7985280d","tedi-top-nav__bar":"tedi-top-nav__bar-d7be6587","tedi-top-nav__list":"tedi-top-nav__list-1cdecbe8","tedi-top-nav__item":"tedi-top-nav__item-aa7109b8","tedi-top-nav__item--has-inline-submenu":"tedi-top-nav__item--has-inline-submenu-4d48fa95","tedi-top-nav__link":"tedi-top-nav__link-724c1ebc","tedi-top-nav__link--active":"tedi-top-nav__link--active-34580ede","tedi-top-nav__icon":"tedi-top-nav__icon-1ab6c34d","tedi-top-nav__chevron":"tedi-top-nav__chevron-e05880f8","tedi-top-nav__chevron--open":"tedi-top-nav__chevron--open-ef97d87b","tedi-top-nav__separator":"tedi-top-nav__separator-d1e8646d","tedi-top-nav__separator-line":"tedi-top-nav__separator-line-4777819a","tedi-top-nav__submenu":"tedi-top-nav__submenu-9b591c05","tedi-top-nav__submenu-inner":"tedi-top-nav__submenu-inner-7a7895b2","tedi-top-nav__submenu--inline":"tedi-top-nav__submenu--inline-b4debcfa","tedi-top-nav__submenu-inner--inline":"tedi-top-nav__submenu-inner--inline-c5cd3a64","tedi-top-nav__group":"tedi-top-nav__group-691df203","tedi-top-nav__group-title":"tedi-top-nav__group-title-70faf48a","tedi-top-nav__group-icon":"tedi-top-nav__group-icon-792cee8c","tedi-top-nav__group-list":"tedi-top-nav__group-list-88ee40bb","tedi-top-nav__subitem":"tedi-top-nav__subitem-d8c89fc6","tedi-top-nav__subitem-link":"tedi-top-nav__subitem-link-382e3910","tedi-top-nav__subitem-link--active":"tedi-top-nav__subitem-link--active-d0f16d73"};exports.default=t;

package/src/tedi/components/layout/top-nav/top-nav.module.scss.es.js

@@ -0,0 +1,28 @@
+const t = {
+  "tedi-top-nav": "tedi-top-nav-7985280d",
+  "tedi-top-nav__bar": "tedi-top-nav__bar-d7be6587",
+  "tedi-top-nav__list": "tedi-top-nav__list-1cdecbe8",
+  "tedi-top-nav__item": "tedi-top-nav__item-aa7109b8",
+  "tedi-top-nav__item--has-inline-submenu": "tedi-top-nav__item--has-inline-submenu-4d48fa95",
+  "tedi-top-nav__link": "tedi-top-nav__link-724c1ebc",
+  "tedi-top-nav__link--active": "tedi-top-nav__link--active-34580ede",
+  "tedi-top-nav__icon": "tedi-top-nav__icon-1ab6c34d",
+  "tedi-top-nav__chevron": "tedi-top-nav__chevron-e05880f8",
+  "tedi-top-nav__chevron--open": "tedi-top-nav__chevron--open-ef97d87b",
+  "tedi-top-nav__separator": "tedi-top-nav__separator-d1e8646d",
+  "tedi-top-nav__separator-line": "tedi-top-nav__separator-line-4777819a",
+  "tedi-top-nav__submenu": "tedi-top-nav__submenu-9b591c05",
+  "tedi-top-nav__submenu-inner": "tedi-top-nav__submenu-inner-7a7895b2",
+  "tedi-top-nav__submenu--inline": "tedi-top-nav__submenu--inline-b4debcfa",
+  "tedi-top-nav__submenu-inner--inline": "tedi-top-nav__submenu-inner--inline-c5cd3a64",
+  "tedi-top-nav__group": "tedi-top-nav__group-691df203",
+  "tedi-top-nav__group-title": "tedi-top-nav__group-title-70faf48a",
+  "tedi-top-nav__group-icon": "tedi-top-nav__group-icon-792cee8c",
+  "tedi-top-nav__group-list": "tedi-top-nav__group-list-88ee40bb",
+  "tedi-top-nav__subitem": "tedi-top-nav__subitem-d8c89fc6",
+  "tedi-top-nav__subitem-link": "tedi-top-nav__subitem-link-382e3910",
+  "tedi-top-nav__subitem-link--active": "tedi-top-nav__subitem-link--active-d0f16d73"
+};
+export {
+  t as default
+};

package/src/tedi/helpers/hooks/use-breakpoint.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("../../../../external/lodash-es/debounce.cjs.js"),n=["xs","sm","md","lg","xl","xxl"],o=(e="xs")=>{const[t,r]=a.useState(e);return a.useLayoutEffect(()=>{const s=()=>window.matchMedia("(min-width: 87.5rem)").matches?"xxl":window.matchMedia("(min-width: 75rem)").matches?"xl":window.matchMedia("(min-width: 62rem)").matches?"lg":window.matchMedia("(min-width: 48rem)").matches?"md":window.matchMedia("(min-width: 36rem)").matches?"sm":"xs",i=d.default(()=>{r(s())},20);return r(s()),window.addEventListener("resize",i),()=>{i.cancel(),window.removeEventListener("resize",i)}},[]),t},m=(e,t)=>e?n.indexOf(e)<n.indexOf(t):!1;exports.breakpoints=n;exports.default=o;exports.isBreakpointBelow=m;exports.useBreakpoint=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("../../../../external/lodash-es/debounce.cjs.js"),r=["xs","sm","md","lg","xl","xxl"],e={xs:"0",sm:"36rem",md:"48rem",lg:"62rem",xl:"75rem",xxl:"87.5rem"},d=(t="xs")=>{const[i,s]=o.useState(t);return o.useLayoutEffect(()=>{const a=()=>window.matchMedia(`(min-width: ${e.xxl})`).matches?"xxl":window.matchMedia(`(min-width: ${e.xl})`).matches?"xl":window.matchMedia(`(min-width: ${e.lg})`).matches?"lg":window.matchMedia(`(min-width: ${e.md})`).matches?"md":window.matchMedia(`(min-width: ${e.sm})`).matches?"sm":"xs",n=m.default(()=>{s(a())},20);return s(a()),window.addEventListener("resize",n),()=>{n.cancel(),window.removeEventListener("resize",n)}},[]),i},l=(t,i)=>t?r.indexOf(t)<r.indexOf(i):!1;exports.BREAKPOINT_WIDTHS=e;exports.breakpoints=r;exports.default=d;exports.isBreakpointBelow=l;exports.useBreakpoint=d;

package/src/tedi/helpers/hooks/use-breakpoint.d.ts

@@ -1,5 +1,12 @@
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export declare const breakpoints: Breakpoint[];
+/**
+ * Minimum viewport width (as a CSS length string) at which each TEDI breakpoint
+ * activates. `xs` starts at 0 — i.e. anything below `sm`. Used by `useBreakpoint`
+ * for `matchMedia` checks and by other components (e.g. `TopNav`) that
+ * need to translate a breakpoint name into a pixel/rem width.
+ */
+export declare const BREAKPOINT_WIDTHS: Record<Breakpoint, string>;
 /**
  * @param defaultServerBreakpoint - Default breakpoint for SSR, the hook returns this breakpoint in the SSR.
  * @returns User's current breakpoint

package/src/tedi/helpers/hooks/use-breakpoint.es.js

@@ -1,19 +1,27 @@
-import { useState as m, useLayoutEffect as a } from "react";
-import o from "../../../../external/lodash-es/debounce.es.js";
-const s = ["xs", "sm", "md", "lg", "xl", "xxl"], c = (e = "xs") => {
-  const [t, n] = m(e);
+import { useState as o, useLayoutEffect as a } from "react";
+import d from "../../../../external/lodash-es/debounce.es.js";
+const m = ["xs", "sm", "md", "lg", "xl", "xxl"], e = {
+  xs: "0",
+  sm: "36rem",
+  md: "48rem",
+  lg: "62rem",
+  xl: "75rem",
+  xxl: "87.5rem"
+}, w = (t = "xs") => {
+  const [i, r] = o(t);
   return a(() => {
-    const r = () => window.matchMedia("(min-width: 87.5rem)").matches ? "xxl" : window.matchMedia("(min-width: 75rem)").matches ? "xl" : window.matchMedia("(min-width: 62rem)").matches ? "lg" : window.matchMedia("(min-width: 48rem)").matches ? "md" : window.matchMedia("(min-width: 36rem)").matches ? "sm" : "xs", i = o(() => {
-      n(r());
+    const s = () => window.matchMedia(`(min-width: ${e.xxl})`).matches ? "xxl" : window.matchMedia(`(min-width: ${e.xl})`).matches ? "xl" : window.matchMedia(`(min-width: ${e.lg})`).matches ? "lg" : window.matchMedia(`(min-width: ${e.md})`).matches ? "md" : window.matchMedia(`(min-width: ${e.sm})`).matches ? "sm" : "xs", n = d(() => {
+      r(s());
     }, 20);
-    return n(r()), window.addEventListener("resize", i), () => {
-      i.cancel(), window.removeEventListener("resize", i);
+    return r(s()), window.addEventListener("resize", n), () => {
+      n.cancel(), window.removeEventListener("resize", n);
     };
-  }, []), t;
-}, h = (e, t) => e ? s.indexOf(e) < s.indexOf(t) : !1;
+  }, []), i;
+}, x = (t, i) => t ? m.indexOf(t) < m.indexOf(i) : !1;
 export {
-  s as breakpoints,
-  c as default,
-  h as isBreakpointBelow,
-  c as useBreakpoint
+  e as BREAKPOINT_WIDTHS,
+  m as breakpoints,
+  w as default,
+  x as isBreakpointBelow,
+  w as useBreakpoint
 };

package/src/tedi/index.d.ts

@@ -22,6 +22,8 @@ export * from './components/buttons/button-group/button-group';
 export * from './components/buttons/collapse/collapse';
 export * from './components/layout/vertical-spacing';
 export * from './components/layout/grid';
+export * from './components/layout/top-nav';
+export * from './components/layout/mobile-nav';
 export * from './components/notifications/alert/alert';
 export * from './components/misc/empty-state';
 export * from './components/notifications/toast/toast';