@tedi-design-system/react 18.0.0-rc.6 → 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/components/overlays/overlay/overlay-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),j=require("./overlay.cjs.js"),F=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:l,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:c,contentId:p}=d.useContext(j.OverlayContext);return d.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),l?n.jsx(r.FloatingPortal,{children:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:n.jsxs("div",{...x({ref:b,tabIndex:-1,id:p,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:a=>v.current=a,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),q=require("./overlay.cjs.js"),C=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:m}=u,{open:l,x:g,y:h,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:c,contentId:j,role:F}=s.useContext(q.OverlayContext);if(s.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-labelledby":f,"aria-describedby":m,style:{position:b,left:g,top:h},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:d=>x.current=d,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=C;

package/src/tedi/components/overlays/overlay/overlay-content.es.js

@@ -1,48 +1,50 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { FloatingPortal as x, FloatingFocusManager as F, FloatingArrow as E } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useContext as C, useEffect as j } from "react";
-import { OverlayContext as B } from "./overlay.es.js";
-const S = (a) => {
-  const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
+import { jsxs as F, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as E, FloatingPortal as C, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useContext as B, useEffect as H } from "react";
+import { OverlayContext as I } from "./overlay.es.js";
+const A = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
     open: l,
-    x: f,
-    y,
-    strategy: h,
+    x: y,
+    y: h,
+    strategy: u,
     focusManager: o,
-    floating: u,
-    arrowRef: b,
-    getFloatingProps: g,
-    placement: p,
+    floating: g,
+    arrowRef: p,
+    getFloatingProps: b,
+    placement: v,
     context: r,
     arrow: t,
-    scrollLock: d,
-    contentId: v
-  } = C(B);
-  return j(() => {
-    d && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
-  }, [l, d]), l ? /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(F, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ w(
+    scrollLock: i,
+    contentId: w,
+    role: x
+  } = B(I);
+  if (H(() => {
+    i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
+  }, [l, i]), !l) return null;
+  const d = /* @__PURE__ */ F(
     "div",
     {
-      ...g({
-        ref: u,
+      ...b({
+        ref: g,
         tabIndex: -1,
-        id: v,
-        "aria-labelledby": s,
-        "aria-describedby": m,
+        id: w,
+        "aria-labelledby": m,
+        "aria-describedby": f,
         style: {
-          position: h,
-          left: f,
-          top: y
+          position: u,
+          left: y,
+          top: h
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": p,
+      "data-placement": v,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
           E,
           {
-            ref: (i) => b.current = i,
+            ref: (a) => p.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -50,11 +52,12 @@ const S = (a) => {
             "data-testid": "overlay-arrow"
           }
         ),
-        c
+        s
       ]
     }
-  ) }) }) : null;
+  );
+  return /* @__PURE__ */ n(C, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  S as OverlayContent
+  A as OverlayContent
 };

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;