@arolariu/components 0.0.16 → 0.0.17

package/dist/es/node_modules/@radix-ui/react-navigation-menu/dist/index.js

@@ -0,0 +1,606 @@
+import * as a from "react";
+import Ie from "react-dom";
+import { createContextScope as ye } from "../../react-context/dist/index.js";
+import { composeEventHandlers as I } from "../../primitive/dist/index.js";
+import { Primitive as _, dispatchDiscreteCustomEvent as J } from "../../react-primitive/dist/index.js";
+import { useControllableState as ne } from "../../react-use-controllable-state/dist/index.js";
+import { useComposedRefs as k, composeRefs as be } from "../../react-compose-refs/dist/index.js";
+import { useDirection as _e } from "../../react-direction/dist/index.js";
+import { Presence as K } from "../../react-presence/dist/index.js";
+import { useId as oe } from "../../react-id/dist/index.js";
+import { createCollection as re } from "../../react-collection/dist/index.js";
+import { DismissableLayer as Pe } from "../../react-dismissable-layer/dist/index.js";
+import { usePrevious as xe } from "../../react-use-previous/dist/index.js";
+import { useLayoutEffect as G } from "../../react-use-layout-effect/dist/index.js";
+import { useCallbackRef as D } from "../../react-use-callback-ref/dist/index.js";
+import { Root as Se } from "../../react-visually-hidden/dist/index.js";
+import { jsx as l, jsxs as Q, Fragment as Z } from "react/jsx-runtime";
+var O = "NavigationMenu", [W, ie, De] = re(O), [z, Ae, Oe] = re(O), [$, ut] = ye(
+  O,
+  [De, Oe]
+), [ke, b] = $(O), [Le, Fe] = $(O), ae = a.forwardRef(
+  (e, t) => {
+    const {
+      __scopeNavigationMenu: r,
+      value: i,
+      onValueChange: n,
+      defaultValue: o,
+      delayDuration: s = 200,
+      skipDelayDuration: d = 300,
+      orientation: c = "horizontal",
+      dir: R,
+      ...u
+    } = e, [g, E] = a.useState(null), h = k(t, (w) => E(w)), C = _e(R), p = a.useRef(0), M = a.useRef(0), T = a.useRef(0), [P, f] = a.useState(!0), [m = "", v] = ne({
+      prop: i,
+      onChange: (w) => {
+        const S = w !== "", V = d > 0;
+        S ? (window.clearTimeout(T.current), V && f(!1)) : (window.clearTimeout(T.current), T.current = window.setTimeout(
+          () => f(!0),
+          d
+        )), n == null || n(w);
+      },
+      defaultProp: o
+    }), N = a.useCallback(() => {
+      window.clearTimeout(M.current), M.current = window.setTimeout(() => v(""), 150);
+    }, [v]), y = a.useCallback(
+      (w) => {
+        window.clearTimeout(M.current), v(w);
+      },
+      [v]
+    ), x = a.useCallback(
+      (w) => {
+        m === w ? window.clearTimeout(M.current) : p.current = window.setTimeout(() => {
+          window.clearTimeout(M.current), v(w);
+        }, s);
+      },
+      [m, v, s]
+    );
+    return a.useEffect(() => () => {
+      window.clearTimeout(p.current), window.clearTimeout(M.current), window.clearTimeout(T.current);
+    }, []), /* @__PURE__ */ l(
+      ce,
+      {
+        scope: r,
+        isRootMenu: !0,
+        value: m,
+        dir: C,
+        orientation: c,
+        rootNavigationMenu: g,
+        onTriggerEnter: (w) => {
+          window.clearTimeout(p.current), P ? x(w) : y(w);
+        },
+        onTriggerLeave: () => {
+          window.clearTimeout(p.current), N();
+        },
+        onContentEnter: () => window.clearTimeout(M.current),
+        onContentLeave: N,
+        onItemSelect: (w) => {
+          v((S) => S === w ? "" : w);
+        },
+        onItemDismiss: () => v(""),
+        children: /* @__PURE__ */ l(
+          _.nav,
+          {
+            "aria-label": "Main",
+            "data-orientation": c,
+            dir: C,
+            ...u,
+            ref: h
+          }
+        )
+      }
+    );
+  }
+);
+ae.displayName = O;
+var se = "NavigationMenuSub", Ke = a.forwardRef(
+  (e, t) => {
+    const {
+      __scopeNavigationMenu: r,
+      value: i,
+      onValueChange: n,
+      defaultValue: o,
+      orientation: s = "horizontal",
+      ...d
+    } = e, c = b(se, r), [R = "", u] = ne({
+      prop: i,
+      onChange: n,
+      defaultProp: o
+    });
+    return /* @__PURE__ */ l(
+      ce,
+      {
+        scope: r,
+        isRootMenu: !1,
+        value: R,
+        dir: c.dir,
+        orientation: s,
+        rootNavigationMenu: c.rootNavigationMenu,
+        onTriggerEnter: (g) => u(g),
+        onItemSelect: (g) => u(g),
+        onItemDismiss: () => u(""),
+        children: /* @__PURE__ */ l(_.div, { "data-orientation": s, ...d, ref: t })
+      }
+    );
+  }
+);
+Ke.displayName = se;
+var ce = (e) => {
+  const {
+    scope: t,
+    isRootMenu: r,
+    rootNavigationMenu: i,
+    dir: n,
+    orientation: o,
+    children: s,
+    value: d,
+    onItemSelect: c,
+    onItemDismiss: R,
+    onTriggerEnter: u,
+    onTriggerLeave: g,
+    onContentEnter: E,
+    onContentLeave: h
+  } = e, [C, p] = a.useState(null), [M, T] = a.useState(/* @__PURE__ */ new Map()), [P, f] = a.useState(null);
+  return /* @__PURE__ */ l(
+    ke,
+    {
+      scope: t,
+      isRootMenu: r,
+      rootNavigationMenu: i,
+      value: d,
+      previousValue: xe(d),
+      baseId: oe(),
+      dir: n,
+      orientation: o,
+      viewport: C,
+      onViewportChange: p,
+      indicatorTrack: P,
+      onIndicatorTrackChange: f,
+      onTriggerEnter: D(u),
+      onTriggerLeave: D(g),
+      onContentEnter: D(E),
+      onContentLeave: D(h),
+      onItemSelect: D(c),
+      onItemDismiss: D(R),
+      onViewportContentChange: a.useCallback((m, v) => {
+        T((N) => (N.set(m, v), new Map(N)));
+      }, []),
+      onViewportContentRemove: a.useCallback((m) => {
+        T((v) => v.has(m) ? (v.delete(m), new Map(v)) : v);
+      }, []),
+      children: /* @__PURE__ */ l(W.Provider, { scope: t, children: /* @__PURE__ */ l(Le, { scope: t, items: M, children: s }) })
+    }
+  );
+}, ue = "NavigationMenuList", le = a.forwardRef(
+  (e, t) => {
+    const { __scopeNavigationMenu: r, ...i } = e, n = b(ue, r), o = /* @__PURE__ */ l(_.ul, { "data-orientation": n.orientation, ...i, ref: t });
+    return /* @__PURE__ */ l(_.div, { style: { position: "relative" }, ref: n.onIndicatorTrackChange, children: /* @__PURE__ */ l(W.Slot, { scope: r, children: n.isRootMenu ? /* @__PURE__ */ l(Me, { asChild: !0, children: o }) : o }) });
+  }
+);
+le.displayName = ue;
+var de = "NavigationMenuItem", [Ve, ve] = $(de), fe = a.forwardRef(
+  (e, t) => {
+    const { __scopeNavigationMenu: r, value: i, ...n } = e, o = oe(), s = i || o || "LEGACY_REACT_AUTO_VALUE", d = a.useRef(null), c = a.useRef(null), R = a.useRef(null), u = a.useRef(() => {
+    }), g = a.useRef(!1), E = a.useCallback((C = "start") => {
+      if (d.current) {
+        u.current();
+        const p = H(d.current);
+        p.length && q(C === "start" ? p : p.reverse());
+      }
+    }, []), h = a.useCallback(() => {
+      if (d.current) {
+        const C = H(d.current);
+        C.length && (u.current = $e(C));
+      }
+    }, []);
+    return /* @__PURE__ */ l(
+      Ve,
+      {
+        scope: r,
+        value: s,
+        triggerRef: c,
+        contentRef: d,
+        focusProxyRef: R,
+        wasEscapeCloseRef: g,
+        onEntryKeyDown: E,
+        onFocusProxyEnter: E,
+        onRootContentClose: h,
+        onContentFocusOutside: h,
+        children: /* @__PURE__ */ l(_.li, { ...n, ref: t })
+      }
+    );
+  }
+);
+fe.displayName = de;
+var U = "NavigationMenuTrigger", me = a.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: r, disabled: i, ...n } = e, o = b(U, e.__scopeNavigationMenu), s = ve(U, e.__scopeNavigationMenu), d = a.useRef(null), c = k(d, s.triggerRef, t), R = Ee(o.baseId, s.value), u = he(o.baseId, s.value), g = a.useRef(!1), E = a.useRef(!1), h = s.value === o.value;
+  return /* @__PURE__ */ Q(Z, { children: [
+    /* @__PURE__ */ l(W.ItemSlot, { scope: r, value: s.value, children: /* @__PURE__ */ l(Ne, { asChild: !0, children: /* @__PURE__ */ l(
+      _.button,
+      {
+        id: R,
+        disabled: i,
+        "data-disabled": i ? "" : void 0,
+        "data-state": X(h),
+        "aria-expanded": h,
+        "aria-controls": u,
+        ...n,
+        ref: c,
+        onPointerEnter: I(e.onPointerEnter, () => {
+          E.current = !1, s.wasEscapeCloseRef.current = !1;
+        }),
+        onPointerMove: I(
+          e.onPointerMove,
+          F(() => {
+            i || E.current || s.wasEscapeCloseRef.current || g.current || (o.onTriggerEnter(s.value), g.current = !0);
+          })
+        ),
+        onPointerLeave: I(
+          e.onPointerLeave,
+          F(() => {
+            i || (o.onTriggerLeave(), g.current = !1);
+          })
+        ),
+        onClick: I(e.onClick, () => {
+          o.onItemSelect(s.value), E.current = h;
+        }),
+        onKeyDown: I(e.onKeyDown, (C) => {
+          const M = { horizontal: "ArrowDown", vertical: o.dir === "rtl" ? "ArrowLeft" : "ArrowRight" }[o.orientation];
+          h && C.key === M && (s.onEntryKeyDown(), C.preventDefault());
+        })
+      }
+    ) }) }),
+    h && /* @__PURE__ */ Q(Z, { children: [
+      /* @__PURE__ */ l(
+        Se,
+        {
+          "aria-hidden": !0,
+          tabIndex: 0,
+          ref: s.focusProxyRef,
+          onFocus: (C) => {
+            const p = s.contentRef.current, M = C.relatedTarget, T = M === d.current, P = p == null ? void 0 : p.contains(M);
+            (T || !P) && s.onFocusProxyEnter(T ? "start" : "end");
+          }
+        }
+      ),
+      o.viewport && /* @__PURE__ */ l("span", { "aria-owns": u })
+    ] })
+  ] });
+});
+me.displayName = U;
+var Ge = "NavigationMenuLink", ee = "navigationMenu.linkSelect", ge = a.forwardRef(
+  (e, t) => {
+    const { __scopeNavigationMenu: r, active: i, onSelect: n, ...o } = e;
+    return /* @__PURE__ */ l(Ne, { asChild: !0, children: /* @__PURE__ */ l(
+      _.a,
+      {
+        "data-active": i ? "" : void 0,
+        "aria-current": i ? "page" : void 0,
+        ...o,
+        ref: t,
+        onClick: I(
+          e.onClick,
+          (s) => {
+            const d = s.target, c = new CustomEvent(ee, {
+              bubbles: !0,
+              cancelable: !0
+            });
+            if (d.addEventListener(ee, (R) => n == null ? void 0 : n(R), { once: !0 }), J(d, c), !c.defaultPrevented && !s.metaKey) {
+              const R = new CustomEvent(L, {
+                bubbles: !0,
+                cancelable: !0
+              });
+              J(d, R);
+            }
+          },
+          { checkForDefaultPrevented: !1 }
+        )
+      }
+    ) });
+  }
+);
+ge.displayName = Ge;
+var Y = "NavigationMenuIndicator", pe = a.forwardRef((e, t) => {
+  const { forceMount: r, ...i } = e, n = b(Y, e.__scopeNavigationMenu), o = !!n.value;
+  return n.indicatorTrack ? Ie.createPortal(
+    /* @__PURE__ */ l(K, { present: r || o, children: /* @__PURE__ */ l(ze, { ...i, ref: t }) }),
+    n.indicatorTrack
+  ) : null;
+});
+pe.displayName = Y;
+var ze = a.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: r, ...i } = e, n = b(Y, r), o = ie(r), [s, d] = a.useState(
+    null
+  ), [c, R] = a.useState(null), u = n.orientation === "horizontal", g = !!n.value;
+  a.useEffect(() => {
+    var p;
+    const C = (p = o().find((M) => M.value === n.value)) == null ? void 0 : p.ref.current;
+    C && d(C);
+  }, [o, n.value]);
+  const E = () => {
+    s && R({
+      size: u ? s.offsetWidth : s.offsetHeight,
+      offset: u ? s.offsetLeft : s.offsetTop
+    });
+  };
+  return B(s, E), B(n.indicatorTrack, E), c ? /* @__PURE__ */ l(
+    _.div,
+    {
+      "aria-hidden": !0,
+      "data-state": g ? "visible" : "hidden",
+      "data-orientation": n.orientation,
+      ...i,
+      ref: t,
+      style: {
+        position: "absolute",
+        ...u ? {
+          left: 0,
+          width: c.size + "px",
+          transform: `translateX(${c.offset}px)`
+        } : {
+          top: 0,
+          height: c.size + "px",
+          transform: `translateY(${c.offset}px)`
+        },
+        ...i.style
+      }
+    }
+  ) : null;
+}), A = "NavigationMenuContent", we = a.forwardRef((e, t) => {
+  const { forceMount: r, ...i } = e, n = b(A, e.__scopeNavigationMenu), o = ve(A, e.__scopeNavigationMenu), s = k(o.contentRef, t), d = o.value === n.value, c = {
+    value: o.value,
+    triggerRef: o.triggerRef,
+    focusProxyRef: o.focusProxyRef,
+    wasEscapeCloseRef: o.wasEscapeCloseRef,
+    onContentFocusOutside: o.onContentFocusOutside,
+    onRootContentClose: o.onRootContentClose,
+    ...i
+  };
+  return n.viewport ? /* @__PURE__ */ l(Ue, { forceMount: r, ...c, ref: s }) : /* @__PURE__ */ l(K, { present: r || d, children: /* @__PURE__ */ l(
+    Ce,
+    {
+      "data-state": X(d),
+      ...c,
+      ref: s,
+      onPointerEnter: I(e.onPointerEnter, n.onContentEnter),
+      onPointerLeave: I(
+        e.onPointerLeave,
+        F(n.onContentLeave)
+      ),
+      style: {
+        // Prevent interaction when animating out
+        pointerEvents: !d && n.isRootMenu ? "none" : void 0,
+        ...c.style
+      }
+    }
+  ) });
+});
+we.displayName = A;
+var Ue = a.forwardRef((e, t) => {
+  const r = b(A, e.__scopeNavigationMenu), { onViewportContentChange: i, onViewportContentRemove: n } = r;
+  return G(() => {
+    i(e.value, {
+      ref: t,
+      ...e
+    });
+  }, [e, t, i]), G(() => () => n(e.value), [e.value, n]), null;
+}), L = "navigationMenu.rootContentDismiss", Ce = a.forwardRef((e, t) => {
+  const {
+    __scopeNavigationMenu: r,
+    value: i,
+    triggerRef: n,
+    focusProxyRef: o,
+    wasEscapeCloseRef: s,
+    onRootContentClose: d,
+    onContentFocusOutside: c,
+    ...R
+  } = e, u = b(A, r), g = a.useRef(null), E = k(g, t), h = Ee(u.baseId, i), C = he(u.baseId, i), p = ie(r), M = a.useRef(null), { onItemDismiss: T } = u;
+  a.useEffect(() => {
+    const f = g.current;
+    if (u.isRootMenu && f) {
+      const m = () => {
+        var v;
+        T(), d(), f.contains(document.activeElement) && ((v = n.current) == null || v.focus());
+      };
+      return f.addEventListener(L, m), () => f.removeEventListener(L, m);
+    }
+  }, [u.isRootMenu, e.value, n, T, d]);
+  const P = a.useMemo(() => {
+    const m = p().map((S) => S.value);
+    u.dir === "rtl" && m.reverse();
+    const v = m.indexOf(u.value), N = m.indexOf(u.previousValue), y = i === u.value, x = N === m.indexOf(i);
+    if (!y && !x) return M.current;
+    const w = (() => {
+      if (v !== N) {
+        if (y && N !== -1) return v > N ? "from-end" : "from-start";
+        if (x && v !== -1) return v > N ? "to-start" : "to-end";
+      }
+      return null;
+    })();
+    return M.current = w, w;
+  }, [u.previousValue, u.value, u.dir, p, i]);
+  return /* @__PURE__ */ l(Me, { asChild: !0, children: /* @__PURE__ */ l(
+    Pe,
+    {
+      id: C,
+      "aria-labelledby": h,
+      "data-motion": P,
+      "data-orientation": u.orientation,
+      ...R,
+      ref: E,
+      disableOutsidePointerEvents: !1,
+      onDismiss: () => {
+        var m;
+        const f = new Event(L, {
+          bubbles: !0,
+          cancelable: !0
+        });
+        (m = g.current) == null || m.dispatchEvent(f);
+      },
+      onFocusOutside: I(e.onFocusOutside, (f) => {
+        var v;
+        c();
+        const m = f.target;
+        (v = u.rootNavigationMenu) != null && v.contains(m) && f.preventDefault();
+      }),
+      onPointerDownOutside: I(e.onPointerDownOutside, (f) => {
+        var y;
+        const m = f.target, v = p().some((x) => {
+          var w;
+          return (w = x.ref.current) == null ? void 0 : w.contains(m);
+        }), N = u.isRootMenu && ((y = u.viewport) == null ? void 0 : y.contains(m));
+        (v || N || !u.isRootMenu) && f.preventDefault();
+      }),
+      onKeyDown: I(e.onKeyDown, (f) => {
+        var N;
+        const m = f.altKey || f.ctrlKey || f.metaKey;
+        if (f.key === "Tab" && !m) {
+          const y = H(f.currentTarget), x = document.activeElement, w = y.findIndex((Te) => Te === x), V = f.shiftKey ? y.slice(0, w).reverse() : y.slice(w + 1, y.length);
+          q(V) ? f.preventDefault() : (N = o.current) == null || N.focus();
+        }
+      }),
+      onEscapeKeyDown: I(e.onEscapeKeyDown, (f) => {
+        s.current = !0;
+      })
+    }
+  ) });
+}), j = "NavigationMenuViewport", Re = a.forwardRef((e, t) => {
+  const { forceMount: r, ...i } = e, o = !!b(j, e.__scopeNavigationMenu).value;
+  return /* @__PURE__ */ l(K, { present: r || o, children: /* @__PURE__ */ l(He, { ...i, ref: t }) });
+});
+Re.displayName = j;
+var He = a.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: r, children: i, ...n } = e, o = b(j, r), s = k(t, o.onViewportChange), d = Fe(
+    A,
+    e.__scopeNavigationMenu
+  ), [c, R] = a.useState(null), [u, g] = a.useState(null), E = c ? (c == null ? void 0 : c.width) + "px" : void 0, h = c ? (c == null ? void 0 : c.height) + "px" : void 0, C = !!o.value, p = C ? o.value : o.previousValue;
+  return B(u, () => {
+    u && R({ width: u.offsetWidth, height: u.offsetHeight });
+  }), /* @__PURE__ */ l(
+    _.div,
+    {
+      "data-state": X(C),
+      "data-orientation": o.orientation,
+      ...n,
+      ref: s,
+      style: {
+        // Prevent interaction when animating out
+        pointerEvents: !C && o.isRootMenu ? "none" : void 0,
+        "--radix-navigation-menu-viewport-width": E,
+        "--radix-navigation-menu-viewport-height": h,
+        ...n.style
+      },
+      onPointerEnter: I(e.onPointerEnter, o.onContentEnter),
+      onPointerLeave: I(e.onPointerLeave, F(o.onContentLeave)),
+      children: Array.from(d.items).map(([T, { ref: P, forceMount: f, ...m }]) => {
+        const v = p === T;
+        return /* @__PURE__ */ l(K, { present: f || v, children: /* @__PURE__ */ l(
+          Ce,
+          {
+            ...m,
+            ref: be(P, (N) => {
+              v && N && g(N);
+            })
+          }
+        ) }, T);
+      })
+    }
+  );
+}), Be = "FocusGroup", Me = a.forwardRef(
+  (e, t) => {
+    const { __scopeNavigationMenu: r, ...i } = e, n = b(Be, r);
+    return /* @__PURE__ */ l(z.Provider, { scope: r, children: /* @__PURE__ */ l(z.Slot, { scope: r, children: /* @__PURE__ */ l(_.div, { dir: n.dir, ...i, ref: t }) }) });
+  }
+), te = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"], We = "FocusGroupItem", Ne = a.forwardRef(
+  (e, t) => {
+    const { __scopeNavigationMenu: r, ...i } = e, n = Ae(r), o = b(We, r);
+    return /* @__PURE__ */ l(z.ItemSlot, { scope: r, children: /* @__PURE__ */ l(
+      _.button,
+      {
+        ...i,
+        ref: t,
+        onKeyDown: I(e.onKeyDown, (s) => {
+          if (["Home", "End", ...te].includes(s.key)) {
+            let c = n().map((g) => g.ref.current);
+            if ([o.dir === "rtl" ? "ArrowRight" : "ArrowLeft", "ArrowUp", "End"].includes(s.key) && c.reverse(), te.includes(s.key)) {
+              const g = c.indexOf(s.currentTarget);
+              c = c.slice(g + 1);
+            }
+            setTimeout(() => q(c)), s.preventDefault();
+          }
+        })
+      }
+    ) });
+  }
+);
+function H(e) {
+  const t = [], r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (i) => {
+      const n = i.tagName === "INPUT" && i.type === "hidden";
+      return i.disabled || i.hidden || n ? NodeFilter.FILTER_SKIP : i.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  for (; r.nextNode(); ) t.push(r.currentNode);
+  return t;
+}
+function q(e) {
+  const t = document.activeElement;
+  return e.some((r) => r === t ? !0 : (r.focus(), document.activeElement !== t));
+}
+function $e(e) {
+  return e.forEach((t) => {
+    t.dataset.tabindex = t.getAttribute("tabindex") || "", t.setAttribute("tabindex", "-1");
+  }), () => {
+    e.forEach((t) => {
+      const r = t.dataset.tabindex;
+      t.setAttribute("tabindex", r);
+    });
+  };
+}
+function B(e, t) {
+  const r = D(t);
+  G(() => {
+    let i = 0;
+    if (e) {
+      const n = new ResizeObserver(() => {
+        cancelAnimationFrame(i), i = window.requestAnimationFrame(r);
+      });
+      return n.observe(e), () => {
+        window.cancelAnimationFrame(i), n.unobserve(e);
+      };
+    }
+  }, [e, r]);
+}
+function X(e) {
+  return e ? "open" : "closed";
+}
+function Ee(e, t) {
+  return `${e}-trigger-${t}`;
+}
+function he(e, t) {
+  return `${e}-content-${t}`;
+}
+function F(e) {
+  return (t) => t.pointerType === "mouse" ? e(t) : void 0;
+}
+var lt = ae, dt = le, vt = fe, ft = me, mt = ge, gt = pe, pt = we, wt = Re;
+export {
+  pt as Content,
+  gt as Indicator,
+  vt as Item,
+  mt as Link,
+  dt as List,
+  ae as NavigationMenu,
+  we as NavigationMenuContent,
+  pe as NavigationMenuIndicator,
+  fe as NavigationMenuItem,
+  ge as NavigationMenuLink,
+  le as NavigationMenuList,
+  Ke as NavigationMenuSub,
+  me as NavigationMenuTrigger,
+  Re as NavigationMenuViewport,
+  lt as Root,
+  ft as Trigger,
+  wt as Viewport,
+  ut as createNavigationMenuScope
+};