@telefonica/mistica 16.3.1 → 16.5.0

package/dist-es/navigation-bar.js

@@ -78,334 +78,958 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
-import * as N from "react";
-import { createElement as Y } from "react";
-import { Transition as Z } from "react-transition-group";
-import p from "classnames";
-import B from "./responsive-layout.js";
-import M from "./inline.js";
-import ee, { BaseTouchable as z } from "./touchable.js";
-import { Text3 as U, Text2 as ne } from "./text.js";
-import { useTheme as C, useScreenSize as re } from "./hooks.js";
-import te from "./generated/mistica-icons/icon-menu-regular.js";
-import oe from "./generated/mistica-icons/icon-close-regular.js";
-import ae from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import { IconButton as ie } from "./icon-button.js";
-import se from "./negative-box.js";
-import { RowList as ce, Row as le } from "./list.js";
-import { ThemeVariant as S, useIsInverseOrMediaVariant as de } from "./theme-variant-context.js";
-import _ from "./focus-trap.js";
-import { Portal as me } from "./portal.js";
-import ue from "./grid-layout.js";
-import { useSetModalState as pe } from "./modal-context-provider.js";
-import { Logo as j } from "./logo.js";
-import { vars as f } from "./skins/skin-contract.css-mistica.js";
-import { mainNavbarContent as ge, burgerMenuButton as he, logoContainer as ve, spacerLarge as fe, spacer as T, burgerMenu as Ne, burgerMenuTransition as Be, lineHeightFix as $, navigationBarAction as be, textWrapperVariants as W, burgerIconContainer as Me, iconCloseOpen as Ie, iconCloseHidden as ke, iconMenuHidden as xe, iconMenuOpen as Ae, topFixed as Ce, navigationBarContent as Se, desktopOnly as q, navigationBarContentRight as Te, section as Oe, selectedSectionVariantes as Re, navbarBorderColorVariants as A } from "./navigation-bar.css-mistica.js";
-import { getPrefixedDataAttributes as ye } from "./utils/dom.js";
-import Ee from "./stack.js";
-import Le from "./box.js";
-import { isRunningAcceptanceTest as we } from "./utils/platform.js";
-import { closeNavigationMenu as De, openNavigationMenu as Ve, backNavigationBar as Fe } from "./text-tokens.js";
-const Ge = (param)=>{
+import { jsxs as C, jsx as e, Fragment as ae } from "react/jsx-runtime";
+import * as o from "react";
+import { CSSTransition as Oe } from "react-transition-group";
+import y from "classnames";
+import _, { ResetResponsiveLayout as ce } from "./responsive-layout.js";
+import q from "./inline.js";
+import Ee, { BaseTouchable as Z } from "./touchable.js";
+import { Text3 as ue, Text2 as le } from "./text.js";
+import { useTheme as $, useScreenSize as de } from "./hooks.js";
+import Ae from "./generated/mistica-icons/icon-menu-regular.js";
+import Re from "./generated/mistica-icons/icon-close-regular.js";
+import xe from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import { IconButton as Te } from "./icon-button.js";
+import { RowList as me, Row as pe } from "./list.js";
+import { ThemeVariant as F, useIsInverseOrMediaVariant as Le } from "./theme-variant-context.js";
+import fe from "./focus-trap.js";
+import { Portal as ye } from "./portal.js";
+import De from "./grid-layout.js";
+import { useSetModalState as Pe } from "./modal-context-provider.js";
+import { Logo as he } from "./logo.js";
+import { vars as w } from "./skins/skin-contract.css-mistica.js";
+import { navigationBarContent as we, desktopOnly as V, navigationBarContentRightExpanded as He, navigationBarContentRight as _e, spacer as J, burgerMenuButton as $e, logoContainer as Fe, spacerLarge as Ve, lineHeightFix as ge, navigationBarAction as Ge, textWrapperVariants as ve, burgerIconContainer as We, iconCloseOpen as Ue, iconCloseHidden as Ke, iconMenuHidden as qe, iconMenuOpen as ze, topFixed as Ye, BURGER_MENU_ANIMATION_DURATION_MS as je, burgerMenuTransition as Ze, burgerMenu as Je, burgerMenuContainer as Qe, burgerMenuContentContainer as ie, DESKTOP_MENU_ANIMATION_DURATION_MS as Me, desktopMenuWrapper as Xe, desktopMenuBackgroundContainer as en, mainNavigationBarContentWrapper as nn, navbarBorderColorVariants as j, mainNavBarSectionsContainer as tn, desktopMenuSectionWithArrowWrapper as on, desktopMenuSectionContainer as rn, desktopMenuFirstSection as sn, desktopMenuLastSection as an, section as cn, selectedSectionVariantes as un, desktopMenuSectionArrowContainer as ln, desktopMenuSectionArrow as dn, desktopMenuContainer as mn, desktopMenu as pn, desktopMenuContentFadeIn as fn, desktopSmallMenuContainer as hn, DESKTOP_SMALL_MENU_WIDTH as re, desktopMenuColumnItem as gn } from "./navigation-bar.css-mistica.js";
+import { getPrefixedDataAttributes as vn, cancelEvent as W } from "./utils/dom.js";
+import H from "./stack.js";
+import Se from "./box.js";
+import { isRunningAcceptanceTest as Q } from "./utils/platform.js";
+import { backNavigationBar as X, closeNavigationMenu as Mn, openNavigationMenu as Sn, mainNavigationBarSectionSeeAll as Nn, mainNavigationBarOpenSectionMenu as se } from "./text-tokens.js";
+import { NAVBAR_HEIGHT_DESKTOP_LARGE as z, NAVBAR_HEIGHT_DESKTOP as Y } from "./theme.js";
+import bn from "./text-link.js";
+import { Title3 as Cn, Title1 as Bn } from "./title.js";
+import { ButtonLink as kn } from "./button.js";
+import { Grid as In, GridItem as On } from "./grid.js";
+import { ESC as En, UP as Ne, DOWN as be } from "./utils/keys.js";
+import { debounce as An, isEqual as Rn } from "./utils/helpers.js";
+import xn from "./negative-box.js";
+const Tn = 120, Ln = (param)=>{
+    let { size: n = 24, color: t = w.colors.neutralHigh, style: i, className: r } = param;
+    return /* @__PURE__ */ e("svg", {
+        width: n,
+        height: n,
+        viewBox: "0 0 8 8",
+        style: i,
+        className: r,
+        children: /* @__PURE__ */ e("path", {
+            d: "M6.32595 3.46071L3.03801 0.158595L3.03292 0.153747L3.032 0.152903L3.02931 0.150463L3.02848 0.149738L3.02248 0.144353C2.88533 0.021206 2.71386 -0.0126731 2.56343 0.00394249C2.41648 0.0201739 2.27272 0.0856702 2.16886 0.18711C2.06893 0.281844 2.01209 0.42816 2.00175 0.567065C1.99083 0.71377 2.02925 0.889583 2.16869 1.02392L5.24446 4.00145L2.15859 6.96199L2.15375 6.96708L2.1529 6.968L2.15046 6.97069L2.14974 6.97152L2.14435 6.97752C2.02121 7.11467 1.98733 7.28614 2.00394 7.43657C2.02017 7.58352 2.08567 7.72728 2.18711 7.83114C2.28184 7.93107 2.42816 7.98791 2.56706 7.99825C2.71377 8.00917 2.88958 7.97075 3.02392 7.83132L6.32595 4.5422V4.5422C6.6246 4.24355 6.6246 3.75935 6.32595 3.46071V3.46071Z",
+            fill: t
+        })
+    });
+}, yn = (param)=>{
     let { isOpen: n } = param;
-    return /* @__PURE__ */ i("div", {
-        className: Me,
+    return /* @__PURE__ */ C("div", {
+        className: We,
         role: "presentation",
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: n ? Ie : ke,
-                children: /* @__PURE__ */ e(oe, {})
+                className: n ? Ue : Ke,
+                children: /* @__PURE__ */ e(Re, {})
             }),
             /* @__PURE__ */ e("div", {
-                className: n ? xe : Ae,
-                children: /* @__PURE__ */ e(te, {})
+                className: n ? qe : ze,
+                children: /* @__PURE__ */ e(Ae, {})
             })
         ]
     });
-}, He = 300, O = (param)=>{
-    let { children: n, topFixed: o, withBorder: t, isMenuOpen: r, variant: a = "default", dataAttributes: s } = param;
-    const { isDarkMode: c } = C(), d = ()=>a === "inverse" && !c || !t ? A.noBorder : r ? A.menuOpen : A.default, m = {
-        default: f.colors.background,
-        inverse: f.colors.navigationBarBackground,
-        alternative: f.colors.backgroundAlternative,
-        media: f.colors.navigationBarBackground
+}, ee = (param)=>{
+    let { children: n, topFixed: t, withBorder: i, isBurgerMenuOpen: r, variant: s = "default", dataAttributes: d } = param;
+    const { isDarkMode: c } = $(), u = ()=>s === "inverse" && !c || !i ? j.noBorder : r ? j.menuOpen : j.default, p = {
+        default: w.colors.background,
+        inverse: w.colors.navigationBarBackground,
+        alternative: w.colors.backgroundAlternative,
+        media: w.colors.navigationBarBackground
     };
     return /* @__PURE__ */ e("header", _object_spread_props(_object_spread({
-        className: p(d(), {
-            [Ce]: o
+        className: y(u(), {
+            [Ye]: t
         }),
         style: {
-            background: m[a]
+            background: p[s]
         }
-    }, ye(s)), {
+    }, vn(d)), {
         children: n
     }));
-}, b = (param)=>{
-    let { right: n, children: o, desktopOnly: t } = param;
-    return /* @__PURE__ */ i("div", {
-        className: p(Se, {
-            [q]: t
+}, U = /*#__PURE__*/ o.forwardRef((param, s)=>{
+    let { right: n, children: t, desktopOnly: i, expandRightContent: r } = param;
+    return /* @__PURE__ */ C("div", {
+        ref: s,
+        className: y(we, {
+            [V]: i
         }),
         children: [
-            o,
+            t,
             n && /* @__PURE__ */ e("div", {
-                className: Te,
+                className: r ? He : _e,
                 children: n
             })
         ]
     });
-}, hn = (param)=>{
-    let { sections: n = [], selectedIndex: o, right: t, variant: r = "default", topFixed: a = !0, withBorder: s = !0, burgerMenuExtra: c, logo: d, large: m = !1 } = param;
-    const { texts: u, isDarkMode: g, t: R } = C(), [l, y] = N.useState(!1), [E, h] = N.useState("closed"), L = N.useId(), J = g ? 1 : 0.2, { isTabletOrSmaller: K } = re(), w = pe(), Q = d || /* @__PURE__ */ e(j, {
-        size: {
-            mobile: 40,
-            desktop: 48
-        }
-    }), D = ()=>/* @__PURE__ */ e("nav", {
-            className: q,
-            children: /* @__PURE__ */ e(M, {
-                space: 32,
-                children: n.map((_param, v)=>{
-                    var { title: k } = _param, x = _object_without_properties(_param, [
-                        "title"
-                    ]);
-                    return /* @__PURE__ */ /*#__PURE__*/ Y(z, _object_spread_props(_object_spread({}, x), {
-                        key: v,
-                        className: p(Oe, {
-                            [Re[r === "inverse" ? "inverse" : "default"]]: v === o
-                        }, W[r === "inverse" ? "inverse" : "default"])
-                    }), /* @__PURE__ */ e(U, {
-                        regular: !0,
-                        color: "inherit",
-                        children: k
-                    }));
+}), Dn = (param)=>{
+    let { onBack: n, title: t, titleAs: i, right: r, variant: s = "default", topFixed: d = !0, paddingX: c = 0, withBorder: u = !0 } = param;
+    const { texts: p, t: a } = $(), f = /* @__PURE__ */ e(U, {
+        right: r,
+        expandRightContent: !0,
+        children: /* @__PURE__ */ C(q, {
+            space: 24,
+            alignItems: "center",
+            children: [
+                n && /* @__PURE__ */ e(Te, {
+                    "aria-label": p.backNavigationBar || a(X),
+                    onPress: n,
+                    Icon: xe,
+                    bleedLeft: !0,
+                    bleedRight: !0
+                }),
+                /* @__PURE__ */ e(ue, {
+                    regular: !0,
+                    truncate: !0,
+                    as: i,
+                    children: t
                 })
-            })
-        }), I = m && n.length > 0, X = ()=>{
-        y(!0), w({
-            isModalOpen: !0
-        });
-    }, V = ()=>{
-        y(!1), w({
-            isModalOpen: !1
-        });
-    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ i(S, {
-        variant: r,
+            ]
+        })
+    });
+    return /* @__PURE__ */ C(F, {
+        variant: s,
         children: [
-            /* @__PURE__ */ e(O, {
-                topFixed: a,
-                withBorder: s,
-                isMenuOpen: l,
-                variant: r,
+            /* @__PURE__ */ e(ee, {
+                topFixed: d,
+                withBorder: u,
+                variant: s,
                 dataAttributes: {
-                    "component-name": "MainNavigationBar"
+                    "component-name": "NavigationBar"
                 },
-                children: /* @__PURE__ */ i(B, {
+                children: d ? /* @__PURE__ */ e(_, {
+                    children: f
+                }) : /* @__PURE__ */ e("div", {
+                    style: {
+                        padding: `0 ${c}px`,
+                        width: "100%"
+                    },
+                    children: f
+                })
+            }),
+            d && /* @__PURE__ */ e("div", {
+                className: J
+            })
+        ]
+    });
+}, K = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
+        onPress: t
+    } : n.onPress ? {
+        onPress: ()=>{
+            n.onPress(), t();
+        }
+    } : _object_spread_props(_object_spread({}, n), {
+        onNavigate: ()=>t()
+    }), Pn = {
+    opening: {
+        close: "closing",
+        finishOpen: "opened"
+    },
+    opened: {
+        close: "closing"
+    },
+    closing: {
+        open: "opening",
+        finishClose: "closed"
+    },
+    closed: {
+        open: "opening"
+    }
+}, wn = (n, t)=>Pn[n][t] || n, Hn = (param)=>{
+    let { section: n, closeSubMenu: t, closeMenu: i } = param;
+    const { texts: r, t: s } = $(), { title: d, menu: c } = n, u = _object_without_properties(n, [
+        "title",
+        "menu"
+    ]), p = (c == null ? void 0 : c.columns) || [], a = c == null ? void 0 : c.content, f = u.href !== void 0 || u.onPress !== void 0 || u.to !== void 0;
+    return /* @__PURE__ */ e(_, {
+        children: /* @__PURE__ */ C(H, {
+            space: 32,
+            children: [
+                /* @__PURE__ */ C(H, {
+                    space: 16,
                     children: [
-                        /* @__PURE__ */ e(b, {
-                            right: t,
-                            children: /* @__PURE__ */ i("div", {
-                                className: ge,
-                                children: [
-                                    G && /* @__PURE__ */ e(ee, {
-                                        className: he,
-                                        "aria-live": "polite",
-                                        "aria-label": l ? u.closeNavigationMenu || R(De) : u.openNavigationMenu || R(Ve),
-                                        "aria-expanded": l,
-                                        "aria-controls": L,
-                                        onPress: l ? V : X,
-                                        children: /* @__PURE__ */ e(Ge, {
-                                            isOpen: l
-                                        })
-                                    }),
-                                    /* @__PURE__ */ e("div", {
-                                        className: ve,
-                                        children: Q
-                                    }),
-                                    !I && D()
-                                ]
-                            })
+                        /* @__PURE__ */ e(Dn, {
+                            title: r.backNavigationBar || s(X),
+                            onBack: t,
+                            topFixed: !1,
+                            withBorder: !1
                         }),
-                        I && /* @__PURE__ */ e(b, {
-                            desktopOnly: !0,
-                            children: D()
+                        /* @__PURE__ */ e(Cn, {
+                            right: f ? /* @__PURE__ */ e(kn, _object_spread_props(_object_spread({
+                                small: !0,
+                                bleedY: !0,
+                                bleedRight: !0,
+                                withChevron: !0
+                            }, K(u, i)), {
+                                children: r.mainNavigationBarSectionSeeAll || s(Nn)
+                            })) : void 0,
+                            children: d
                         })
                     ]
+                }),
+                a ? /* @__PURE__ */ e(Se, {
+                    paddingBottom: 16,
+                    children: typeof a == "function" ? a({
+                        closeMenu: i
+                    }) : a
+                }) : p.map((m, l)=>/* @__PURE__ */ C(H, {
+                        space: 8,
+                        children: [
+                            /* @__PURE__ */ C(Bn, {
+                                children: [
+                                    " ",
+                                    m.title
+                                ]
+                            }),
+                            /* @__PURE__ */ e(xn, {
+                                children: /* @__PURE__ */ e(me, {
+                                    children: m.items.map((_param, h)=>{
+                                        var { title: M } = _param, B = _object_without_properties(_param, [
+                                            "title"
+                                        ]);
+                                        return /* @__PURE__ */ e(pe, _object_spread({
+                                            title: M
+                                        }, K(B, i)), h);
+                                    })
+                                })
+                            })
+                        ]
+                    }, l))
+            ]
+        })
+    });
+}, _n = (param)=>{
+    let { sections: n, extra: t, closeMenu: i, open: r, id: s, disableFocusTrap: d, setDisableFocusTrap: c } = param;
+    const { isDarkMode: u, texts: p, t: a } = $(), [f, m] = o.useState(-1), [l, M] = o.useState(!1), [B, h] = o.useReducer(wn, "closed"), k = o.useRef(null), I = u ? 1 : 0.2, N = Q() ? 0 : je;
+    o.useEffect(()=>{
+        let b;
+        return l ? (h("open"), b = setTimeout(()=>h("finishOpen"), N)) : (h("close"), b = setTimeout(()=>h("finishClose"), N)), ()=>clearTimeout(b);
+    }, [
+        l,
+        N
+    ]);
+    const A = o.useRef(null);
+    return o.useEffect(()=>{
+        var b;
+        if (B === "opening") {
+            const g = (b = A.current) == null ? void 0 : b.querySelector(`button[aria-label="${p.backNavigationBar || a(X)}"]`);
+            g == null || g.focus();
+        }
+    }, [
+        B,
+        a,
+        p
+    ]), /* @__PURE__ */ e(ye, {
+        children: /* @__PURE__ */ e(fe, {
+            disabled: d,
+            group: "burger-menu-lock",
+            children: /* @__PURE__ */ e(Oe, {
+                onEntered: ()=>c(!1),
+                onExiting: ()=>c(!0),
+                onExited: ()=>{
+                    M(!1), m(-1);
+                },
+                classNames: Ze,
+                in: r,
+                nodeRef: k,
+                timeout: N,
+                mountOnEnter: !0,
+                unmountOnExit: !0,
+                children: /* @__PURE__ */ e("nav", {
+                    className: Je,
+                    style: {
+                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${I})`
+                    },
+                    id: s,
+                    ref: k,
+                    children: /* @__PURE__ */ C("div", {
+                        className: Qe,
+                        children: [
+                            /* @__PURE__ */ e("div", {
+                                className: ie,
+                                style: {
+                                    transform: `translate(${l ? "-100vw" : "0"})`
+                                },
+                                children: B !== "opened" && /* @__PURE__ */ C(_, {
+                                    children: [
+                                        /* @__PURE__ */ e(ce, {
+                                            children: /* @__PURE__ */ e(me, {
+                                                children: n.map((_param, x)=>{
+                                                    var { title: b, menu: g } = _param, O = _object_without_properties(_param, [
+                                                        "title",
+                                                        "menu"
+                                                    ]);
+                                                    return /* @__PURE__ */ e(pe, _object_spread({
+                                                        title: b
+                                                    }, g ? {
+                                                        onPress: ()=>{
+                                                            M(!0), m(x);
+                                                        }
+                                                    } : // Close the menu when one of the rows is pressed
+                                                    K(O, i)), x);
+                                                })
+                                            })
+                                        }),
+                                        t && /* @__PURE__ */ e(Se, {
+                                            paddingY: 16,
+                                            children: t
+                                        })
+                                    ]
+                                })
+                            }),
+                            /* @__PURE__ */ e("div", {
+                                className: ie,
+                                ref: A,
+                                style: {
+                                    transform: `translate(${l ? "0" : "100vw"})`
+                                },
+                                children: B !== "closed" && f !== -1 && /* @__PURE__ */ e(Hn, {
+                                    section: n[f],
+                                    closeMenu: i,
+                                    closeSubMenu: ()=>M(!1)
+                                })
+                            })
+                        ]
+                    })
                 })
-            }),
-            a && /* @__PURE__ */ e("div", {
-                className: I ? fe : T
             })
-        ]
+        })
+    });
+}, $n = {
+    opening: {
+        close: "closing",
+        finishOpen: "opened"
+    },
+    opened: {
+        close: "closing"
+    },
+    closing: {
+        // If a section was opened while the menu was closing, the menu should be considered as
+        // already open. This is useful for example to avoid the new content's fade-in animation
+        open: "opened",
+        finishClose: "closed"
+    },
+    closed: {
+        open: "opening"
+    }
+}, Fn = (n, t)=>$n[n][t] || n, Ce = /*#__PURE__*/ o.createContext({
+    isMenuOpen: !1,
+    openedSection: -1,
+    menuHeight: "0px",
+    menuStatus: "closed",
+    openSectionMenu: ()=>{},
+    closeMenu: ()=>{},
+    setMenuHeight: ()=>{},
+    setIsMenuHovered: ()=>{},
+    setFocusedItem: ()=>{},
+    debouncedOpenSectionMenu: ()=>{},
+    cancelDebouncedOpenSectionMenu: ()=>{}
+}), Vn = (param)=>{
+    let { children: n, sections: t, isLargeMenu: i } = param;
+    const { isTabletOrSmaller: r } = de(), [s, d] = o.useState(!1), [c, u] = o.useState("0px"), [p, a] = o.useReducer(Fn, "closed"), [f, m] = o.useState(-1), [l, M] = o.useState(), [B, h] = o.useState(!1), [k, I] = o.useState(!1), [N, A] = o.useState(-1), b = o.useCallback((v)=>{
+        var S;
+        m(-1), (S = t == null ? void 0 : t[v]) != null && S.menu ? (I(!0), A(v)) : (h(!1), I(!1));
+    }, [
+        t
+    ]), g = o.useMemo(()=>An(b, Tn), [
+        b
+    ]), O = o.useCallback(()=>{
+        h(!1), I(!1), g.cancel(), m(-1);
+    }, [
+        g
+    ]);
+    o.useEffect(()=>{
+        r && O();
+    }, [
+        r,
+        O
+    ]), o.useEffect(()=>{
+        !k && !B ? (d(!1), u("0px")) : d(!0);
+    }, [
+        B,
+        k
+    ]), o.useEffect(()=>{
+        const v = Q() || !i ? 0 : Me;
+        let S;
+        return s ? (a("open"), S = setTimeout(()=>a("finishOpen"), v)) : (a("close"), S = setTimeout(()=>a("finishClose"), v)), ()=>clearTimeout(S);
+    }, [
+        s,
+        i
+    ]), o.useEffect(()=>{
+        p === "closed" && A(-1);
+    }, [
+        p
+    ]);
+    const x = o.useCallback((v)=>{
+        Rn(l, v) || M(v);
+    }, [
+        l
+    ]);
+    return o.useEffect(()=>{
+        const v = (E)=>{
+            if (l) {
+                const R = document.querySelector("[data-navigation-bar-menu-items]"), T = Array.from((R == null ? void 0 : R.querySelectorAll("a,button")) || []), G = T.findIndex((P)=>P.hasAttribute(`data-navigation-bar-menu-item-${l.column}-${l.index}`)), L = E ? G - 1 : G + 1;
+                T[(L + T.length) % T.length].focus();
+            }
+        }, S = (E)=>{
+            switch(E.key){
+                case be:
+                    l && (W(E), v());
+                    break;
+                case Ne:
+                    l && (W(E), v(!0));
+                    break;
+                case En:
+                    O();
+                    break;
+            }
+        };
+        return document.addEventListener("keydown", S, !1), ()=>{
+            document.removeEventListener("keydown", S, !1);
+        };
+    }, [
+        O,
+        l
+    ]), o.useEffect(()=>{
+        M(void 0);
+    }, [
+        N
+    ]), /* @__PURE__ */ e(Ce.Provider, {
+        value: {
+            isMenuOpen: s,
+            openedSection: N,
+            menuHeight: c,
+            menuStatus: p,
+            openSectionMenu: b,
+            debouncedOpenSectionMenu: (v)=>{
+                m(v), g(v);
+            },
+            cancelDebouncedOpenSectionMenu: (v)=>{
+                v === f && (g.cancel(), m(-1));
+            },
+            closeMenu: O,
+            setMenuHeight: u,
+            setIsMenuHovered: h,
+            setFocusedItem: x
+        },
+        children: n
     });
-    return K ? /* @__PURE__ */ i(P, {
+}, D = ()=>o.useContext(Ce), Be = (param)=>{
+    let { column: n, columnIndex: t } = param;
+    const { setFocusedItem: i, closeMenu: r } = D();
+    return /* @__PURE__ */ C(H, {
+        space: 24,
         children: [
-            /* @__PURE__ */ e(_, {
-                disabled: F,
-                group: "burger-menu-lock",
-                children: H
+            /* @__PURE__ */ e(le, {
+                medium: !0,
+                color: w.colors.textSecondary,
+                transform: "uppercase",
+                children: n.title
             }),
-            G && /* @__PURE__ */ e(me, {
-                children: /* @__PURE__ */ e(_, {
-                    disabled: F,
-                    group: "burger-menu-lock",
-                    children: /* @__PURE__ */ e(Z, {
-                        onEntering: ()=>{
-                            h("opening");
-                        },
-                        onEntered: ()=>{
-                            h("open");
-                        },
-                        onExiting: ()=>{
-                            h("closing");
-                        },
-                        onExited: ()=>{
-                            h("closed");
-                        },
-                        in: l,
-                        timeout: we() ? 0 : He,
-                        unmountOnExit: !0,
-                        children: (k)=>/* @__PURE__ */ e(P, {
-                                children: /* @__PURE__ */ e("nav", {
-                                    className: p(Ne, Be[k]),
-                                    style: {
-                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
-                                    },
-                                    id: L,
-                                    onClick: ()=>{
-                                        V();
-                                    },
-                                    children: /* @__PURE__ */ e(B, {
-                                        children: /* @__PURE__ */ i(Ee, {
-                                            space: 16,
-                                            children: [
-                                                /* @__PURE__ */ e(se, {
-                                                    children: /* @__PURE__ */ e(ce, {
-                                                        children: n.map((x, v)=>/* @__PURE__ */ e(le, _object_spread({}, x), v))
-                                                    })
-                                                }),
-                                                c && /* @__PURE__ */ e(Le, {
-                                                    paddingBottom: 16,
-                                                    children: c
-                                                })
-                                            ]
+            /* @__PURE__ */ e(H, {
+                space: 16,
+                role: "list",
+                children: n.items.map((_param, c)=>{
+                    var { title: s } = _param, d = _object_without_properties(_param, [
+                        "title"
+                    ]);
+                    return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+                    /* @__PURE__ */ e("div", {
+                        onFocus: ()=>i({
+                                column: t,
+                                index: c
+                            }),
+                        onBlur: ()=>i(void 0),
+                        role: "listitem",
+                        children: /* @__PURE__ */ e(bn, _object_spread_props(_object_spread({
+                            className: gn,
+                            dataAttributes: {
+                                [`navigation-bar-menu-item-${t}-${c}`]: "true"
+                            }
+                        }, K(d, r)), {
+                            children: s
+                        }))
+                    }, c));
+                })
+            })
+        ]
+    });
+}, Gn = (param)=>{
+    let { section: n, index: t, isLargeNavigationBar: i } = param;
+    var A, b;
+    const r = o.useRef(null), [s, d] = o.useState(!1), c = Q() ? 0 : Me, u = i ? z : Y, p = 40, { menuStatus: a, isMenuOpen: f, openedSection: m, closeMenu: l, setIsMenuHovered: M, setMenuHeight: B } = D();
+    o.useEffect(()=>{
+        if (r.current && f && (r.current.scrollTop = 0), d(!1), f) {
+            const g = setTimeout(()=>d(!0), c);
+            return ()=>clearTimeout(g);
+        }
+    }, [
+        f,
+        m,
+        c
+    ]);
+    const [h, k] = o.useState(!0);
+    o.useEffect(()=>{
+        if (m === t) if (a === "opening") {
+            k(!1);
+            const g = requestAnimationFrame(()=>k(!0));
+            return ()=>cancelAnimationFrame(g);
+        } else k(!0);
+    }, [
+        a,
+        m,
+        t
+    ]), o.useEffect(()=>{
+        a === "closing" && d(!1);
+    }, [
+        a
+    ]);
+    const I = ((A = n.menu) == null ? void 0 : A.columns) || [], N = (b = n == null ? void 0 : n.menu) == null ? void 0 : b.content;
+    return /* @__PURE__ */ e("div", {
+        className: V,
+        children: /* @__PURE__ */ e(F, {
+            variant: "default",
+            children: m === t && /* @__PURE__ */ e(ce, {
+                children: /* @__PURE__ */ e("div", {
+                    className: mn,
+                    onMouseEnter: ()=>M(!0),
+                    onMouseLeave: ()=>M(!1),
+                    style: {
+                        // disable pointer events when menu is closing
+                        pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
+                        top: u,
+                        maxHeight: `calc(100vh - ${u}px - ${p}px)`,
+                        overflowY: s ? "auto" : "hidden"
+                    },
+                    children: /* @__PURE__ */ e(_, {
+                        children: /* @__PURE__ */ e("div", {
+                            className: y(pn, {
+                                [fn]: h
+                            }),
+                            ref: (g)=>{
+                                g && f && B(`min(${g.scrollHeight}px, calc(100vh - ${u}px - ${p}px))`);
+                            },
+                            children: N ? typeof N == "function" ? N({
+                                closeMenu: l
+                            }) : N : /* @__PURE__ */ e(In, {
+                                rows: 1,
+                                columns: 12,
+                                gap: [
+                                    24,
+                                    40
+                                ],
+                                dataAttributes: {
+                                    "navigation-bar-menu-items": "true"
+                                },
+                                children: I.map((g, O)=>/* @__PURE__ */ e(On, {
+                                        columnSpan: 2,
+                                        children: /* @__PURE__ */ e(Be, {
+                                            column: g,
+                                            columnIndex: O
                                         })
-                                    })
-                                })
+                                    }, O))
                             })
+                        })
                     })
                 })
             })
-        ]
-    }) : H;
-}, vn = (param)=>{
-    let { onBack: n, title: o, titleAs: t, right: r, variant: a = "default", topFixed: s = !0, paddingX: c = 0, withBorder: d = !0 } = param;
-    const { texts: m, t: u } = C(), g = /* @__PURE__ */ e(b, {
-        right: r,
-        children: /* @__PURE__ */ i(M, {
-            space: 24,
-            alignItems: "center",
-            children: [
-                n && /* @__PURE__ */ e(ie, {
-                    "aria-label": m.backNavigationBar || u(Fe),
-                    onPress: n,
-                    Icon: ae,
-                    bleedLeft: !0,
-                    bleedRight: !0
-                }),
-                /* @__PURE__ */ e(U, {
-                    regular: !0,
-                    truncate: !0,
-                    as: t,
-                    children: o
+        })
+    });
+}, Wn = (param)=>{
+    let { isLargeNavigationBar: n } = param;
+    const t = n ? z : Y, { menuHeight: i } = D();
+    return /* @__PURE__ */ e("div", {
+        className: V,
+        children: /* @__PURE__ */ e("div", {
+            className: Xe,
+            style: {
+                top: t
+            },
+            children: /* @__PURE__ */ e("div", {
+                className: en,
+                style: {
+                    height: i
+                }
+            })
+        })
+    });
+}, Un = (param)=>{
+    let { section: n, isLargeNavigationBar: t, leftPosition: i, index: r } = param;
+    var l, M;
+    const s = t ? z : Y, d = 40, c = ((l = n.menu) == null ? void 0 : l.columns) || [], u = (M = n == null ? void 0 : n.menu) == null ? void 0 : M.content, { openedSection: p, menuStatus: a, setIsMenuHovered: f, closeMenu: m } = D();
+    return /* @__PURE__ */ e("div", {
+        className: V,
+        children: r === p && /* @__PURE__ */ e(F, {
+            variant: "default",
+            children: /* @__PURE__ */ e("div", {
+                className: hn,
+                onMouseEnter: ()=>f(!0),
+                onMouseLeave: ()=>f(!1),
+                style: {
+                    // disable pointer events when menu is closing
+                    pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
+                    top: s,
+                    left: i,
+                    maxHeight: `calc(100vh - ${s}px - ${d}px)`
+                },
+                children: u ? typeof u == "function" ? u({
+                    closeMenu: m
+                }) : u : /* @__PURE__ */ e(H, {
+                    space: 40,
+                    dataAttributes: {
+                        "navigation-bar-menu-items": "true"
+                    },
+                    children: c.map((B, h)=>/* @__PURE__ */ e(Be, {
+                            column: B,
+                            columnIndex: h
+                        }, h))
                 })
-            ]
+            })
+        })
+    });
+}, Kn = (param)=>{
+    let { section: n, index: t, selectedIndex: i, isFirstSection: r, isLastSection: s, navigationBarRef: d, variant: c, isLargeNavigationBar: u, desktopLargeMenu: p } = param;
+    const { texts: a, t: f } = $(), { title: m, menu: l } = n, M = _object_without_properties(n, [
+        "title",
+        "menu"
+    ]), B = o.useRef(null), [h, k] = o.useState(0), [I, N] = o.useState(!1), { isMenuOpen: A, openedSection: b, openSectionMenu: g, debouncedOpenSectionMenu: O, cancelDebouncedOpenSectionMenu: x, closeMenu: v } = D(), S = M.href !== void 0 || M.onPress !== void 0 || M.to !== void 0, E = o.useCallback((L)=>{
+        p || k((()=>{
+            var te, oe;
+            const { left: ne, right: ke } = ((te = B.current) == null ? void 0 : te.getBoundingClientRect()) || {
+                left: 0,
+                right: 0
+            }, Ie = (((oe = d.current) == null ? void 0 : oe.getBoundingClientRect().right) || 0) - re;
+            return ne <= Ie ? ne : ke - re;
+        })()), L ? O(t) : g(t);
+    }, [
+        p,
+        t,
+        g,
+        O,
+        d
+    ]);
+    o.useEffect(()=>{
+        const L = (P)=>{
+            switch(P.key){
+                case be:
+                    I && (W(P), E());
+                    break;
+                case Ne:
+                    I && (W(P), v());
+                    break;
+            }
+        };
+        return document.addEventListener("keydown", L, !1), ()=>{
+            document.removeEventListener("keydown", L, !1);
+        };
+    }, [
+        t,
+        I,
+        E,
+        v,
+        l,
+        S
+    ]);
+    const R = A && b === t, T = o.useCallback(()=>{
+        R ? v() : E();
+    }, [
+        R,
+        E,
+        v
+    ]), G = o.useCallback((L)=>S ? L : {
+            onPress: T
+        }, [
+        S,
+        T
+    ]);
+    return /* @__PURE__ */ C("div", {
+        className: on,
+        children: [
+            /* @__PURE__ */ e("div", {
+                ref: B,
+                className: y(rn, {
+                    [sn]: r,
+                    [an]: s
+                }),
+                onMouseEnter: ()=>E(!0),
+                onMouseLeave: ()=>x(t),
+                onFocus: ()=>{
+                    l && !S && N(!0);
+                },
+                onBlur: ()=>{
+                    l && !S && N(!1);
+                },
+                children: /* @__PURE__ */ e(Z, _object_spread_props(_object_spread({}, G(M)), {
+                    "aria-label": S ? void 0 : `${n.title}, ${a.mainNavigationBarOpenSectionMenu || f(se)}`,
+                    "aria-haspopup": !S,
+                    "aria-expanded": S ? void 0 : R,
+                    className: y(cn, {
+                        [un[c === "inverse" ? "inverse" : "default"]]: t === i
+                    }, ve[c === "inverse" ? "inverse" : "default"]),
+                    children: /* @__PURE__ */ e(ue, {
+                        regular: !0,
+                        color: "inherit",
+                        children: m
+                    })
+                }))
+            }),
+            l && /* @__PURE__ */ C(ae, {
+                children: [
+                    S && /* @__PURE__ */ e("div", {
+                        className: ln,
+                        onFocus: ()=>N(!0),
+                        onBlur: ()=>N(!1),
+                        children: /* @__PURE__ */ e(Z, {
+                            className: dn,
+                            "aria-label": `${n.title}, ${a.mainNavigationBarOpenSectionMenu || f(se)}`,
+                            "aria-haspopup": !0,
+                            "aria-expanded": R,
+                            onPress: ()=>{
+                                I && T();
+                            },
+                            style: {
+                                pointerEvents: I ? "auto" : "none",
+                                opacity: I ? 1 : 0,
+                                // We are using the same chevron as in ButtonLink, and that svg has
+                                // some extra space on the left that we want to ignore in this case
+                                marginTop: -2
+                            },
+                            children: /* @__PURE__ */ e(Ln, {
+                                size: 8,
+                                style: {
+                                    transform: `rotate(${R ? -90 : 90}deg)`
+                                }
+                            })
+                        })
+                    }),
+                    p ? /* @__PURE__ */ e(Gn, {
+                        section: n,
+                        isLargeNavigationBar: u,
+                        index: t
+                    }) : /* @__PURE__ */ e(Un, {
+                        section: n,
+                        isLargeNavigationBar: u,
+                        leftPosition: h,
+                        index: t
+                    })
+                ]
+            })
+        ]
+    });
+}, qn = (param)=>{
+    let { sections: n, selectedIndex: t, navigationBarRef: i, variant: r, isLargeNavigationBar: s, hasRightContent: d, desktopLargeMenu: c } = param;
+    const { openSectionMenu: u, openedSection: p, closeMenu: a } = D();
+    return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ e("nav", {
+        className: y(V, tn),
+        style: {
+            paddingLeft: s ? 0 : 48,
+            paddingRight: !s && d ? 136 : 0
+        },
+        onMouseEnter: ()=>{
+            p !== -1 && u(p);
+        },
+        onMouseLeave: a,
+        children: /* @__PURE__ */ e(q, {
+            space: 32,
+            children: n.map((f, m)=>/* @__PURE__ */ e(Kn, {
+                    index: m,
+                    selectedIndex: t,
+                    navigationBarRef: i,
+                    isFirstSection: m === 0,
+                    isLastSection: m === n.length - 1,
+                    variant: r,
+                    section: f,
+                    isLargeNavigationBar: s,
+                    desktopLargeMenu: c
+                }, m))
         })
+    }));
+}, zn = (param)=>{
+    let { children: n, isLargeNavigationBar: t, desktopLargeMenu: i } = param;
+    const { menuHeight: r } = D(), s = t ? z : Y;
+    return /* @__PURE__ */ e("div", {
+        className: nn,
+        style: i ? {
+            clipPath: `rect(0 100% calc(${s}px + ${r}) 0)`,
+            WebkitClipPath: `rect(0 100% calc(${s}px + ${r}) 0)`
+        } : void 0,
+        children: n
     });
-    return /* @__PURE__ */ i(S, {
-        variant: a,
+}, At = (param)=>{
+    let { sections: n = [], selectedIndex: t, right: i, variant: r = "default", topFixed: s = !0, withBorder: d = !0, burgerMenuExtra: c, logo: u, large: p = !1, desktopLargeMenu: a = !1 } = param;
+    const { texts: f, t: m } = $(), l = o.useId(), { isTabletOrSmaller: M } = de(), B = u || /* @__PURE__ */ e(he, {
+        size: {
+            mobile: 40,
+            desktop: 48
+        }
+    }), h = p && n.length > 0, [k, I] = o.useState(!1), [N, A] = o.useState(!0), b = o.useRef(null), g = Pe(), O = /* @__PURE__ */ e(qn, {
+        sections: n,
+        selectedIndex: t,
+        navigationBarRef: b,
+        variant: r,
+        hasRightContent: !!i,
+        isLargeNavigationBar: h,
+        desktopLargeMenu: a
+    }), x = ()=>{
+        I(!0), g({
+            isModalOpen: !0
+        });
+    }, v = ()=>{
+        I(!1), g({
+            isModalOpen: !1
+        });
+    }, S = n.length > 1, E = /* @__PURE__ */ C(F, {
+        variant: r,
         children: [
-            /* @__PURE__ */ e(O, {
+            /* @__PURE__ */ C(ee, {
                 topFixed: s,
                 withBorder: d,
-                variant: a,
+                isBurgerMenuOpen: k,
+                variant: r,
                 dataAttributes: {
-                    "component-name": "NavigationBar"
+                    "component-name": "MainNavigationBar"
                 },
-                children: s ? /* @__PURE__ */ e(B, {
-                    children: g
-                }) : /* @__PURE__ */ e("div", {
-                    style: {
-                        padding: `0 ${c}px`,
-                        width: "100%"
-                    },
-                    children: g
-                })
+                children: [
+                    a && /* @__PURE__ */ e(Wn, {
+                        isLargeNavigationBar: h
+                    }),
+                    /* @__PURE__ */ e(zn, {
+                        isLargeNavigationBar: h,
+                        desktopLargeMenu: a,
+                        children: /* @__PURE__ */ C(_, {
+                            children: [
+                                /* @__PURE__ */ C(U, {
+                                    ref: b,
+                                    right: i,
+                                    expandRightContent: h,
+                                    children: [
+                                        S && /* @__PURE__ */ e(Ee, {
+                                            className: $e,
+                                            "aria-live": "polite",
+                                            "aria-label": k ? f.closeNavigationMenu || m(Mn) : f.openNavigationMenu || m(Sn),
+                                            "aria-expanded": k,
+                                            "aria-controls": l,
+                                            onPress: k ? v : x,
+                                            children: /* @__PURE__ */ e(yn, {
+                                                isOpen: k
+                                            })
+                                        }),
+                                        /* @__PURE__ */ e("div", {
+                                            className: Fe,
+                                            children: B
+                                        }),
+                                        !h && O
+                                    ]
+                                }),
+                                h && /* @__PURE__ */ e(U, {
+                                    desktopOnly: !0,
+                                    children: O
+                                })
+                            ]
+                        })
+                    })
+                ]
             }),
             s && /* @__PURE__ */ e("div", {
-                className: T
+                className: h ? Ve : J
             })
         ]
     });
-}, fn = (param)=>{
-    let { logo: n, right: o, variant: t = "default", topFixed: r = !0, withBorder: a = !0 } = param;
-    return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(j, {
+    return /* @__PURE__ */ e(Vn, {
+        sections: n,
+        isLargeMenu: a,
+        children: M ? /* @__PURE__ */ C(ae, {
+            children: [
+                /* @__PURE__ */ e(fe, {
+                    disabled: N,
+                    group: "burger-menu-lock",
+                    children: E
+                }),
+                /* @__PURE__ */ e(_n, {
+                    open: k,
+                    id: l,
+                    sections: n,
+                    extra: c,
+                    closeMenu: v,
+                    disableFocusTrap: N,
+                    setDisableFocusTrap: A
+                })
+            ]
+        }) : E
+    });
+}, Rt = (param)=>{
+    let { logo: n, right: t, variant: i = "default", topFixed: r = !0, withBorder: s = !0 } = param;
+    return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(he, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), /* @__PURE__ */ i(S, {
-        variant: t,
+    }), /* @__PURE__ */ C(F, {
+        variant: i,
         children: [
-            /* @__PURE__ */ e(O, {
+            /* @__PURE__ */ e(ee, {
                 topFixed: r,
-                withBorder: a,
-                variant: t,
+                withBorder: s,
+                variant: i,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ e(B, {
-                    children: /* @__PURE__ */ e(ue, {
+                children: /* @__PURE__ */ e(_, {
+                    children: /* @__PURE__ */ e(De, {
                         template: "10",
-                        children: /* @__PURE__ */ e(b, {
-                            right: o,
+                        children: /* @__PURE__ */ e(U, {
+                            right: t,
+                            expandRightContent: !0,
                             children: n
                         })
                     })
                 })
             }),
             r && /* @__PURE__ */ e("div", {
-                className: T
+                className: J
             })
         ]
     });
-}, Nn = (param)=>{
+}, xt = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ e("div", {
-        className: $,
+        className: ge,
         "data-component-name": "NavigationBarActionGroup",
-        children: /* @__PURE__ */ e(M, {
+        children: /* @__PURE__ */ e(q, {
             space: 24,
             alignItems: "center",
             children: n
         })
     });
-}, Bn = (_param)=>{
-    var { children: n } = _param, o = _object_without_properties(_param, [
+}, Tt = (_param)=>{
+    var { children: n } = _param, t = _object_without_properties(_param, [
         "children"
     ]);
-    const t = de();
-    return /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, o), {
-        className: p(be, $, W[t ? "inverse" : "default"]),
+    const i = Le();
+    return /* @__PURE__ */ e(Z, _object_spread_props(_object_spread({}, t), {
+        className: y(Ge, ge, ve[i ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },
-        children: /* @__PURE__ */ e(M, {
+        children: /* @__PURE__ */ e(q, {
             space: 16,
             alignItems: "center",
-            children: N.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(ne, {
+            children: o.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(le, {
                     regular: !0,
                     color: "inherit",
                     children: r
@@ -413,4 +1037,4 @@ const Ge = (param)=>{
         })
     }));
 };
-export { fn as FunnelNavigationBar, hn as MainNavigationBar, vn as NavigationBar, Bn as NavigationBarAction, Nn as NavigationBarActionGroup };
+export { Rt as FunnelNavigationBar, At as MainNavigationBar, Dn as NavigationBar, Tt as NavigationBarAction, xt as NavigationBarActionGroup, D as useMainNavigationBarDesktopMenuState };