@graphprotocol/go 10.5.2

package/dist/GlobalHeader/GlobalHeader.js

@@ -0,0 +1,1045 @@
+"use client";
+import { jsx, jsxs } from "../jsx/src/jsx-runtime.js";
+import { keyframes } from "@emotion/react";
+import { GDSContext, useI18n, normalizePath, usePrevious, translatable, Text, Flex, Spacing, Icon, buildTransition, Duration, BorderRadius, Link, Transition, Responsive, Button, LocaleSwitcher, createIdGenerator, reactNodeToString, Opacity, ButtonOrLink } from "@graphprotocol/gds";
+import { ChatDots } from "@graphprotocol/gds/dist/icons/ChatDots.js";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+import * as Portal from "@radix-ui/react-portal";
+import { inertValue } from "@react-aria/utils";
+import escapeStringRegexp from "escape-string-regexp";
+import { forwardRef, useContext, useState, useRef, useEffect, Fragment, createContext } from "react";
+import { SupportModal } from "../SupportModal/SupportModal.js";
+const DEFAULT_PRODUCTS = translatable(
+  (t, locale) => ({
+    THE_GRAPH: {
+      isDefault: true,
+      name: "The Graph",
+      description: "Learn about the network and how to get involved.",
+      href: `/${locale}/`,
+      navItems: [
+        {
+          label: t("components.globalHeader.pricing"),
+          href: "/studio-pricing/"
+        },
+        {
+          label: t("components.globalHeader.ecosystem"),
+          subItems: [
+            {
+              label: "Governance",
+              description: "Participate in The Graph Governance.",
+              href: "/governance/"
+            },
+            {
+              label: "Grants",
+              description: "Learn about Grants & Open RFPs.",
+              href: "/grants/"
+            },
+            {
+              label: "Learn",
+              description: "Learn about The Graph.",
+              href: "/learn/"
+            },
+            {
+              label: "Supported Networks",
+              description: "Learn about which networks The Graph supports.",
+              href: `/docs/${locale}/supported-networks/`
+            }
+          ]
+        },
+        {
+          label: t("components.globalHeader.blog"),
+          href: "/blog/"
+        },
+        /*
+        {
+          label: t('components.globalHeader.jobs'),
+          href: '/jobs/',
+        },
+        */
+        {
+          id: "docs",
+          label: t("components.globalHeader.docs"),
+          href: `/docs/${locale}/`,
+          active: /^\/docs($|\?|\/)/i
+        }
+      ]
+    },
+    EXPLORER: {
+      name: "Graph Explorer",
+      description: "Explore subgraphs and interact with the protocol.",
+      href: "/explorer/",
+      navItems: [
+        {
+          label: "Subgraphs",
+          href: "/explorer/",
+          active: /^\/explorer($|\?|\/($|\?)|\/subgraphs($|\?|\/))/i
+        },
+        {
+          label: "Delegate",
+          href: "/explorer/delegate/"
+        },
+        {
+          label: "Participants",
+          href: "/explorer/participants/"
+        },
+        {
+          label: "Network",
+          href: "/explorer/network/"
+        },
+        {
+          id: "docs",
+          label: t("components.globalHeader.docs"),
+          href: `/docs/${locale}/subgraphs/explorer/`,
+          active: /^\/docs($|\?|\/)/i
+        }
+      ]
+    },
+    SUBGRAPH_STUDIO: {
+      name: "Subgraph Studio",
+      description: "Create, manage and publish subgraphs and API keys.",
+      href: "/studio/",
+      navItems: [
+        {
+          label: "My Dashboard",
+          href: "/studio/",
+          active: /^\/studio($|\?|\/($|\?)|\/subgraph($|\?|\/))/i
+        },
+        {
+          label: "API Keys",
+          href: "/studio/apikeys/"
+        },
+        {
+          label: "Billing",
+          href: "/studio/billing/"
+        },
+        {
+          id: "docs",
+          label: t("components.globalHeader.docs"),
+          href: `/docs/${locale}/deploying/subgraph-studio/`,
+          active: /^\/docs($|\?|\/)/i
+        }
+      ]
+    }
+  })
+);
+const animationSlideDown = keyframes({
+  from: { opacity: 0, transform: `translateY(-${Spacing["8px"]})` },
+  to: { opacity: 1, transform: "translateY(0)" }
+});
+const animationSlideUp = keyframes({
+  from: { opacity: 1, transform: "translateY(0)" },
+  to: { opacity: 0, transform: `translateY(-${Spacing["8px"]})` }
+});
+const animationSlideFromLeft = keyframes({
+  from: { transform: "translateX(-100%)" },
+  to: { transform: "translateX(0)" }
+});
+const animationSlideToLeft = keyframes({
+  from: { transform: "translateX(0)" },
+  to: { transform: "translateX(-100%)" }
+});
+const animationFadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 }
+});
+const animationFadeOut = keyframes({
+  from: { opacity: 1 },
+  to: { opacity: 0 }
+});
+const GlobalHeaderContext = createContext({
+  supportNavItem: null
+});
+const GlobalHeaderComponent = ({
+  products: passedProducts,
+  activeProduct: passedActiveProductKey,
+  activePath: passedActivePath,
+  basePath: passedBasePath,
+  baseUrl = process.env.ENVIRONMENT === "staging" ? "https://staging.thegraph.com/" : "https://thegraph.com/",
+  navItems: customNavItems = (items) => items,
+  mobileNavItems: customMobileNavItems = (items) => items,
+  showLocaleSwitcher = false,
+  showSupportButton = false,
+  leftContent: customLeftContent,
+  rightContent: customRightContent,
+  className,
+  ...props
+}) => {
+  const { useRouter } = useContext(GDSContext);
+  const router = useRouter();
+  const { t, locale, localeDetails, supportedLocales, supportedLocalesDetails, pathWithoutLocale, setLocale } = useI18n();
+  let basePath = passedBasePath !== void 0 ? passedBasePath : (router == null ? void 0 : router.basePath) ?? null;
+  if (basePath !== null) {
+    basePath = normalizePath(basePath);
+  }
+  let activePath = passedActivePath !== void 0 ? passedActivePath : (router == null ? void 0 : router.pathname) ?? null;
+  if (activePath !== null) {
+    activePath = normalizePath(activePath, {
+      leadingSlash: true,
+      trailingSlash: false,
+      slashIfEmpty: true
+    });
+    if (basePath !== null) {
+      activePath = `${basePath}${activePath}`;
+    }
+  }
+  const previousActivePath = usePrevious(activePath);
+  const products = passedProducts ?? t(DEFAULT_PRODUCTS);
+  const activeProductKey = passedActiveProductKey ?? Object.keys(products).find((key) => {
+    var _a;
+    return (_a = products[key]) == null ? void 0 : _a.isDefault;
+  }) ?? null;
+  const activeProduct = activeProductKey && activeProductKey in products ? products[activeProductKey] : null;
+  const activeProductIsDefault = (activeProduct == null ? void 0 : activeProduct.isDefault) ?? false;
+  const getProductLabel = (product) => {
+    return product.tag ? /* @__PURE__ */ jsxs(Flex.Row, { align: "center", gap: Spacing["8px"], children: [
+      product.name,
+      product.tag
+    ] }) : product.name;
+  };
+  const mutableDesktopNavItems = typeof customNavItems === "function" ? customNavItems([...(activeProduct == null ? void 0 : activeProduct.navItems) ?? []]) : [...customNavItems];
+  const productEntries = Object.entries(products);
+  const homeNavItem = {
+    id: "home",
+    label: t("components.globalHeader.home"),
+    href: `/${locale}/`,
+    active: /^\/([a-zA-Z][a-zA-Z])?($|\?|\/($|\?))/i
+  };
+  let docsNavItem = null;
+  const [supportModalOpen, setSupportModalOpen] = useState(false);
+  const supportNavItem = showSupportButton ? {
+    id: "support",
+    label: t("components.globalHeader.support"),
+    onClick: () => setSupportModalOpen(true)
+  } : null;
+  const localeNavItem = showLocaleSwitcher ? {
+    id: "locale",
+    label: localeDetails.displayName,
+    active: false,
+    subItems: supportedLocales.map((supportedLocale) => {
+      const supportedLocaleDetails = supportedLocalesDetails[supportedLocale];
+      return {
+        id: `locale-${supportedLocale}`,
+        label: supportedLocaleDetails.displayName,
+        active: supportedLocale === locale,
+        href: `/${supportedLocale}${pathWithoutLocale}`,
+        onClick: (event) => {
+          event.preventDefault();
+          setLocale(supportedLocale);
+        }
+      };
+    })
+  } : null;
+  const defaultMobileNavItems = productEntries.length === 0 ? [...mutableDesktopNavItems] : productEntries.map(([productKey, product]) => {
+    const productIsActive = productKey === activeProductKey;
+    const baseProperties = {
+      label: getProductLabel(product),
+      description: product.description,
+      active: productIsActive
+    };
+    const subItems = (productIsActive ? mutableDesktopNavItems : product.navItems ?? []).filter((subItem) => {
+      if (subItem.id === "docs") {
+        if (productIsActive) {
+          docsNavItem = subItem;
+        }
+        return false;
+      }
+      return true;
+    });
+    if (product.isDefault) {
+      subItems.unshift(homeNavItem);
+    }
+    if (subItems.length > 0) {
+      return {
+        ...baseProperties,
+        subItems
+      };
+    } else {
+      return {
+        ...baseProperties,
+        href: product.href
+      };
+    }
+  });
+  if (docsNavItem) {
+    defaultMobileNavItems.push(docsNavItem);
+  }
+  if (supportNavItem) {
+    defaultMobileNavItems.push(supportNavItem);
+  }
+  if (localeNavItem) {
+    defaultMobileNavItems.push(localeNavItem);
+  }
+  const mutableMobileNavItems = typeof customMobileNavItems === "function" ? customMobileNavItems(defaultMobileNavItems) : customMobileNavItems;
+  if (productEntries.length > 0) {
+    mutableDesktopNavItems.unshift({
+      label: activeProduct && !activeProductIsDefault ? activeProduct.name : t("components.globalHeader.products"),
+      active: false,
+      subItems: productEntries.filter(([, product]) => !product.isDefault).map(([productKey, product]) => ({
+        label: getProductLabel(product),
+        description: product.description,
+        href: product.href,
+        active: productKey === activeProductKey
+      }))
+    });
+  }
+  const desktopNavItems = addIds(mutableDesktopNavItems);
+  const mobileNavItems = addIds(mutableMobileNavItems);
+  const getHref = (navItem) => {
+    if (navItem.href === void 0) {
+      return void 0;
+    }
+    if (typeof navItem.href === "object" || !navItem.href.startsWith("/") || navItem.href.startsWith("//")) {
+      return navItem.href;
+    }
+    if (basePath !== null && new RegExp(`^${escapeStringRegexp(basePath)}($|/)`, "i").test(navItem.href)) {
+      return navItem.href.substring(basePath.length) || "/";
+    }
+    return `${baseUrl.replace(/\/$/, "")}${navItem.href}`;
+  };
+  const getActive = (navItem) => {
+    if (typeof navItem.active === "boolean") {
+      return navItem.active;
+    }
+    const checkActivePath = navItem.active !== void 0 || navItem.href !== void 0;
+    if (checkActivePath && activePath !== null) {
+      const regex = (() => {
+        switch (true) {
+          case navItem.active !== void 0:
+            return navItem.active;
+          case navItem.href !== void 0:
+            if (typeof navItem.href === "object" || !navItem.href.startsWith("/") || navItem.href.startsWith("//")) {
+              return null;
+            }
+            return new RegExp(`^${escapeStringRegexp(navItem.href.replace(/\/?(\?.*)?$/, ""))}($|/|\\?)`, "i");
+          default:
+            return null;
+        }
+      })();
+      if (regex === null) {
+        return false;
+      }
+      return regex.test(activePath);
+    }
+    if (navItem.subItems !== void 0) {
+      return navItem.subItems.some(getActive);
+    }
+    return false;
+  };
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [openTopLevelMobileNavItemId, setOpenTopLevelMobileNavItemId] = useState(null);
+  const [openSecondLevelMobileNavItemId, setOpenSecondLevelMobileNavItemId] = useState(null);
+  const thirdLevelMobileNavRef = useRef(null);
+  useEffect(() => {
+    if (activePath !== previousActivePath && previousActivePath !== void 0) {
+      setMobileNavOpen(false);
+    }
+  }, [activePath, previousActivePath]);
+  const defaultLeftContentDesktop = /* @__PURE__ */ jsx(NavigationMenu.Root, { "aria-label": t("components.globalHeader.mainNavigation"), children: /* @__PURE__ */ jsx(Text.H14, { as: "child", color: "inherit", children: /* @__PURE__ */ jsx(Flex.Row, { as: "child", align: "center", gap: Spacing["24px"], children: /* @__PURE__ */ jsxs(NavigationMenu.List, { children: [
+    /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(homeNavItem), children: /* @__PURE__ */ jsxs(NavLink, { href: getHref(homeNavItem), sx: { pl: Spacing["4px"] }, children: [
+      /* @__PURE__ */ jsx(
+        Icon.LogoTheGraph,
+        {
+          size: "32px",
+          sx: { ml: "0", height: "20px", svg: { height: "32px", top: "-6px" } }
+        }
+      ),
+      activeProduct && activeProductIsDefault ? activeProduct.name : null
+    ] }) }) }),
+    desktopNavItems.map((navItem) => /* @__PURE__ */ jsx(NavigationMenu.Item, { value: navItem.id, children: navItem.subItems === void 0 ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(navItem), children: /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        activeIndicator: true,
+        href: getHref(navItem),
+        disabled: navItem.disabled,
+        onClick: navItem.onClick,
+        children: navItem.label
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        NavigationMenu.Trigger,
+        {
+          asChild: true,
+          onPointerMove: (event) => event.preventDefault(),
+          onPointerLeave: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsxs(
+            NavLink,
+            {
+              activeIndicator: true,
+              "data-active": getActive(navItem) ? "" : void 0,
+              disabled: navItem.disabled,
+              onClick: navItem.onClick,
+              children: [
+                navItem.label,
+                /* @__PURE__ */ jsx(
+                  Icon.CaretDown,
+                  {
+                    title: "",
+                    size: "12px",
+                    sx: {
+                      '.gds-ButtonOrLink[data-state="open"] &': { transform: "rotate(-180deg)" },
+                      transition: buildTransition("TRANSFORM")
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NavigationMenu.Content,
+        {
+          onPointerMove: (event) => event.preventDefault(),
+          onPointerLeave: (event) => event.preventDefault(),
+          sx: {
+            position: "absolute",
+            left: `-${Spacing["40px"]}`,
+            top: "100%",
+            pt: Spacing["16px"],
+            width: "max-content",
+            maxWidth: "448px",
+            '&[data-state="open"]': {
+              animation: `${animationSlideDown} ${Duration["200ms"]}`
+            },
+            '&[data-state="closed"]': {
+              animation: `${animationSlideUp} ${Duration["200ms"]}`
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            NavigationMenu.Sub,
+            {
+              sx: {
+                maxHeight: "calc(100vh - 80px)",
+                borderRadius: BorderRadius.S,
+                border: "White8",
+                bg: "Panes",
+                overflowX: "clip",
+                overflowY: "auto"
+              },
+              children: /* @__PURE__ */ jsx(NavigationMenu.List, { children: navItem.subItems.map(
+                (subItem) => subItem.subItems === void 0 ? /* @__PURE__ */ jsx(NavigationMenu.Item, { value: subItem.id, children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(subItem), children: /* @__PURE__ */ jsxs(
+                  StackedNavButtonOrLink,
+                  {
+                    href: getHref(subItem),
+                    disabled: subItem.disabled,
+                    onClick: subItem.onClick,
+                    children: [
+                      subItem.label,
+                      subItem.description ? /* @__PURE__ */ jsx(Text.P14, { as: "span", color: "White64", sx: { mt: Spacing["4px"], display: "block" }, children: subItem.description }) : null
+                    ]
+                  }
+                ) }) }, subItem.id) : null
+              ) })
+            }
+          )
+        }
+      )
+    ] }) }, navItem.id))
+  ] }) }) }) });
+  const defaultLeftContentMobile = /* @__PURE__ */ jsxs(
+    Dialog.Root,
+    {
+      open: mobileNavOpen,
+      onOpenChange: (open) => {
+        var _a;
+        setMobileNavOpen(open);
+        if (open) {
+          setOpenTopLevelMobileNavItemId(((_a = mobileNavItems.find((navItem) => navItem.active)) == null ? void 0 : _a.id) ?? null);
+          setOpenSecondLevelMobileNavItemId(null);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, "aria-label": t("components.globalHeader.mainNavigation"), children: /* @__PURE__ */ jsxs(Link, { wrap: false, children: [
+          /* @__PURE__ */ jsx(Icon.LogoTheGraph, { size: "32px" }),
+          /* @__PURE__ */ jsx(Icon.CaretDown, { title: "", size: "12px", sx: { ml: Spacing["4px"] } })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+          /* @__PURE__ */ jsx(
+            Dialog.Overlay,
+            {
+              sx: {
+                position: "fixed",
+                inset: 0,
+                bg: "Midnight88",
+                '&[data-state="open"]': {
+                  animation: `${animationFadeIn} ${Duration["400ms"]}`
+                },
+                '&[data-state="closed"]': {
+                  animation: `${animationFadeOut} ${Duration["400ms"]}`
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Dialog.Content,
+            {
+              sx: {
+                position: "fixed",
+                left: 0,
+                top: 0,
+                width: "290px",
+                maxWidth: "100%",
+                height: "100%",
+                borderRight: "White8",
+                bg: "Panes",
+                overflow: "clip",
+                outline: "none",
+                '&[data-state="open"]': {
+                  animation: `${animationSlideFromLeft} ${Duration["400ms"]}`
+                },
+                '&[data-state="closed"]': {
+                  animation: `${animationSlideToLeft} ${Duration["400ms"]}`
+                }
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  sx: {
+                    width: "calc(100% + 1px)",
+                    height: "100%",
+                    transform: openSecondLevelMobileNavItemId !== null ? "translateX(-100%)" : "translateX(0)",
+                    transition: buildTransition("TRANSFORM", "400ms")
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      NavigationMenu.Root,
+                      {
+                        inert: inertValue(openSecondLevelMobileNavItemId !== null),
+                        value: openTopLevelMobileNavItemId ?? "",
+                        onValueChange: (navItemId) => {
+                          setOpenTopLevelMobileNavItemId(navItemId || null);
+                        },
+                        "aria-label": t("components.globalHeader.mainNavigation"),
+                        sx: {
+                          width: "100%",
+                          height: "100%",
+                          overflowX: "clip",
+                          overflowY: "auto",
+                          borderRight: "White8"
+                        },
+                        children: /* @__PURE__ */ jsx(NavigationMenu.List, { sx: { borderBottom: "White8" }, children: mobileNavItems.map((navItem) => {
+                          const navItemState = navItem.id === openTopLevelMobileNavItemId ? "open" : "closed";
+                          const navItemIsSupport = navItem.id === (supportNavItem == null ? void 0 : supportNavItem.id);
+                          const navItemIsLocale = navItem.id === (localeNavItem == null ? void 0 : localeNavItem.id);
+                          return /* @__PURE__ */ jsx(NavigationMenu.Item, { value: navItem.id, children: navItem.subItems === void 0 ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(navItem), children: /* @__PURE__ */ jsx(
+                            StackedNavButtonOrLink,
+                            {
+                              href: getHref(navItem),
+                              disabled: navItem.disabled,
+                              onClick: (event) => {
+                                var _a;
+                                (_a = navItem.onClick) == null ? void 0 : _a.call(navItem, event);
+                                setMobileNavOpen(false);
+                              },
+                              children: navItemIsSupport ? /* @__PURE__ */ jsxs(Flex.Row, { as: "span", align: "center", gap: Spacing["8px"], children: [
+                                /* @__PURE__ */ jsx(ChatDots, { alt: "", variant: "fill", size: 5 }),
+                                navItem.label
+                              ] }) : navItem.label
+                            }
+                          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              NavigationMenu.Trigger,
+                              {
+                                asChild: true,
+                                onPointerMove: (event) => event.preventDefault(),
+                                onPointerLeave: (event) => event.preventDefault(),
+                                children: /* @__PURE__ */ jsx(
+                                  StackedNavButtonOrLink,
+                                  {
+                                    "data-active": getActive(navItem) ? "" : void 0,
+                                    disabled: navItem.disabled,
+                                    "aria-expanded": navItemState === "open" ? "true" : "false",
+                                    onClick: navItem.onClick,
+                                    sx: { zIndex: 1 },
+                                    children: navItemIsLocale ? /* @__PURE__ */ jsxs(Flex.Row, { as: "span", align: "center", gap: Spacing["8px"], children: [
+                                      /* @__PURE__ */ jsx(Icon.World, { title: t("components.globalHeader.language"), size: "20px" }),
+                                      navItem.label
+                                    ] }) : navItem.label
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              NavigationMenu.Content,
+                              {
+                                forceMount: true,
+                                onPointerMove: (event) => event.preventDefault(),
+                                onPointerLeave: (event) => event.preventDefault(),
+                                onInteractOutside: (event) => event.preventDefault(),
+                                children: /* @__PURE__ */ jsx(Transition, { effect: "collapse", children: /* @__PURE__ */ jsx(
+                                  NavigationMenu.Sub,
+                                  {
+                                    "data-state": navItemState,
+                                    sx: {
+                                      '&[data-state="open"]': { pointerEvents: "auto" },
+                                      '&[data-state="closed"]': { display: "none" }
+                                    },
+                                    children: /* @__PURE__ */ jsx(Flex.Column, { as: "child", gap: Spacing["16px"], sx: { pb: Spacing["20px"] }, children: /* @__PURE__ */ jsx(NavigationMenu.List, { children: navItem.subItems.map((subItem) => {
+                                      const subItemState = subItem.id === openSecondLevelMobileNavItemId ? "open" : "closed";
+                                      return /* @__PURE__ */ jsx(NavigationMenu.Item, { value: subItem.id, children: subItem.subItems === void 0 ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(subItem), children: /* @__PURE__ */ jsx(
+                                        StackedNavButtonOrLink,
+                                        {
+                                          variant: "sub",
+                                          href: getHref(subItem),
+                                          disabled: subItem.disabled,
+                                          onClick: (event) => {
+                                            var _a;
+                                            (_a = subItem.onClick) == null ? void 0 : _a.call(subItem, event);
+                                            setMobileNavOpen(false);
+                                          },
+                                          children: subItem.label
+                                        }
+                                      ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                        /* @__PURE__ */ jsx(
+                                          NavigationMenu.Link,
+                                          {
+                                            asChild: true,
+                                            onPointerMove: (event) => event.preventDefault(),
+                                            onPointerLeave: (event) => event.preventDefault(),
+                                            onSelect: (event) => event.preventDefault(),
+                                            children: /* @__PURE__ */ jsx(
+                                              StackedNavButtonOrLink,
+                                              {
+                                                variant: "sub",
+                                                "data-active": getActive(subItem) ? "" : void 0,
+                                                disabled: subItem.disabled,
+                                                onClick: (event) => {
+                                                  var _a;
+                                                  (_a = subItem.onClick) == null ? void 0 : _a.call(subItem, event);
+                                                  setOpenSecondLevelMobileNavItemId(subItem.id);
+                                                },
+                                                children: /* @__PURE__ */ jsxs(
+                                                  Flex.Row,
+                                                  {
+                                                    as: "span",
+                                                    justify: "space-between",
+                                                    align: "center",
+                                                    gap: Spacing["8px"],
+                                                    children: [
+                                                      subItem.label,
+                                                      /* @__PURE__ */ jsx(
+                                                        Icon.CaretRight,
+                                                        {
+                                                          title: "",
+                                                          size: "14px",
+                                                          sx: { mr: `-${Spacing["24px"]}` }
+                                                        }
+                                                      )
+                                                    ]
+                                                  }
+                                                )
+                                              }
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(Portal.Root, { asChild: true, container: thirdLevelMobileNavRef.current, children: /* @__PURE__ */ jsxs(
+                                          NavigationMenu.Root,
+                                          {
+                                            inert: inertValue(subItemState === "closed"),
+                                            "aria-labelledby": `go-GlobalHeader-itemLabel-${subItem.id}}`,
+                                            sx: {
+                                              position: "absolute",
+                                              left: 0,
+                                              top: 0,
+                                              width: "100%",
+                                              "&[inert]": {
+                                                opacity: 0,
+                                                transition: buildTransition(
+                                                  "OPACITY",
+                                                  "0ms",
+                                                  "EASE_IN_OUT",
+                                                  "400ms"
+                                                )
+                                              }
+                                            },
+                                            children: [
+                                              /* @__PURE__ */ jsxs("div", { id: `go-GlobalHeader-itemLabel-${subItem.id}}`, hidden: true, children: [
+                                                subItem.label,
+                                                " navigation"
+                                              ] }),
+                                              /* @__PURE__ */ jsx(
+                                                Flex.Column,
+                                                {
+                                                  as: "child",
+                                                  gap: Spacing["16px"],
+                                                  sx: { pb: Spacing["20px"] },
+                                                  children: /* @__PURE__ */ jsxs(NavigationMenu.List, { children: [
+                                                    /* @__PURE__ */ jsx(NavigationMenu.Item, { sx: { mb: `-${Spacing["16px"]}` }, children: /* @__PURE__ */ jsx(
+                                                      NavigationMenu.Link,
+                                                      {
+                                                        asChild: true,
+                                                        onPointerMove: (event) => event.preventDefault(),
+                                                        onPointerLeave: (event) => event.preventDefault(),
+                                                        children: /* @__PURE__ */ jsx(
+                                                          StackedNavButtonOrLink,
+                                                          {
+                                                            variant: "back",
+                                                            onClick: () => {
+                                                              setOpenSecondLevelMobileNavItemId(null);
+                                                            },
+                                                            children: subItem.label
+                                                          }
+                                                        )
+                                                      }
+                                                    ) }),
+                                                    subItem.subItems.map(
+                                                      (subSubItem) => subSubItem.subItems === void 0 ? /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, active: getActive(subSubItem), children: /* @__PURE__ */ jsx(
+                                                        StackedNavButtonOrLink,
+                                                        {
+                                                          variant: "sub",
+                                                          href: getHref(subSubItem),
+                                                          disabled: subSubItem.disabled,
+                                                          onClick: (event) => {
+                                                            var _a;
+                                                            (_a = subSubItem.onClick) == null ? void 0 : _a.call(subSubItem, event);
+                                                            setMobileNavOpen(false);
+                                                          },
+                                                          children: subSubItem.label
+                                                        }
+                                                      ) }) }, subSubItem.id) : null
+                                                    )
+                                                  ] })
+                                                }
+                                              )
+                                            ]
+                                          }
+                                        ) })
+                                      ] }) }, subItem.id);
+                                    }) }) })
+                                  },
+                                  navItemState
+                                ) })
+                              }
+                            )
+                          ] }) }, navItem.id);
+                        }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: thirdLevelMobileNavRef,
+                        sx: {
+                          position: "absolute",
+                          left: 0,
+                          top: 0,
+                          width: "100%",
+                          height: "100%",
+                          overflowX: "clip",
+                          overflowY: "auto",
+                          transform: "translateX(100%)",
+                          outline: "none"
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  const defaultLeftContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { sx: { display: ["none", null, "contents"] }, children: defaultLeftContentDesktop }),
+    /* @__PURE__ */ jsx("div", { sx: { display: ["contents", null, "none"] }, children: defaultLeftContentMobile })
+  ] });
+  let leftContent = defaultLeftContent;
+  if (typeof customLeftContent === "function") {
+    leftContent = customLeftContent(defaultLeftContent);
+    if (Array.isArray(leftContent)) {
+      leftContent = leftContent.map((_, breakpointIndex) => {
+        return customLeftContent(
+          breakpointIndex < 2 ? defaultLeftContentMobile : defaultLeftContentDesktop
+        )[breakpointIndex];
+      });
+    }
+  } else if (customLeftContent !== void 0) {
+    leftContent = customLeftContent;
+  }
+  const hideDefaultRightContentOnMobile = customLeftContent === void 0 || typeof customLeftContent === "function";
+  const defaultRightContent = /* @__PURE__ */ jsxs(Text.P14, { as: "div", sx: { display: hideDefaultRightContentOnMobile ? ["none", null, "contents"] : "contents" }, children: [
+    showLocaleSwitcher ? /* @__PURE__ */ jsx(GlobalHeaderLocaleSwitcher, {}) : null,
+    showSupportButton ? /* @__PURE__ */ jsx(GlobalHeaderSupportButton, {}) : null
+  ] });
+  let rightContent = defaultRightContent;
+  if (typeof customRightContent === "function") {
+    rightContent = customRightContent(defaultRightContent);
+  } else if (customRightContent !== void 0) {
+    rightContent = customRightContent;
+  }
+  return /* @__PURE__ */ jsx(GlobalHeaderContext.Provider, { value: { supportNavItem }, children: /* @__PURE__ */ jsxs(
+    Flex.Row,
+    {
+      justify: "space-between",
+      align: "center",
+      gap: [Spacing["24px"], null, null, Spacing["32px"]],
+      className,
+      sx: { direction: "ltr", height: "var(--gds-header-height, 80px)" },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Flex.Row, { align: "center", gap: Spacing["24px"], sx: { direction: "var(--gds-direction)" }, children: /* @__PURE__ */ jsx(Responsive.Multiple, { children: () => Array.isArray(leftContent) ? leftContent : [leftContent] }) }),
+        /* @__PURE__ */ jsx(
+          Flex.Row,
+          {
+            align: "center",
+            gap: [Spacing["24px"], null, null, Spacing["32px"]],
+            sx: { direction: "var(--gds-direction)" },
+            children: /* @__PURE__ */ jsx(Responsive.Multiple, { children: () => Array.isArray(rightContent) ? rightContent : [rightContent] })
+          }
+        ),
+        showSupportButton ? /* @__PURE__ */ jsx(
+          SupportModal,
+          {
+            open: supportModalOpen,
+            onClose: setSupportModalOpen,
+            defaultEmail: typeof showSupportButton === "object" && "defaultEmail" in showSupportButton ? showSupportButton.defaultEmail : void 0
+          }
+        ) : null
+      ]
+    }
+  ) });
+};
+GlobalHeaderComponent.displayName = "GlobalHeader";
+function addIds(navItems, createIdFunction) {
+  const createId = createIdFunction ?? createIdGenerator();
+  return navItems.map((navItem) => {
+    const navItemWithId = {
+      id: createId(reactNodeToString(navItem.label)),
+      ...navItem
+    };
+    if (navItem.subItems) {
+      navItemWithId.subItems = addIds(navItem.subItems, createId);
+    }
+    return navItemWithId;
+  });
+}
+const NavLink = forwardRef(
+  ({ activeIndicator = false, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        ref,
+        wrap: false,
+        autoIcon: false,
+        color: "White64",
+        sx: { "&[data-active]": { color: "White88" } },
+        ...props,
+        children: [
+          activeIndicator ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              sx: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                mx: "auto",
+                bottom: "-16px",
+                width: "min-content",
+                opacity: Opacity["0%"],
+                ".gds-ButtonOrLink[data-active] &": {
+                  opacity: Opacity["100%"]
+                },
+                transition: buildTransition("OPACITY"),
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ jsx(Icon.DiamondSolid, { size: "8px" })
+            }
+          ) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+NavLink.displayName = "GlobalHeader._NavLink";
+const StackedNavButtonOrLink = forwardRef(({ variant = "default", children, ...props }, ref) => {
+  const { t } = useI18n();
+  const IconElement = variant === "back" ? Icon.CaretLeft : Icon.DiamondSolid;
+  const TextElement = variant === "sub" ? Text.P14 : Text.H14;
+  return /* @__PURE__ */ jsx(
+    ButtonOrLink,
+    {
+      ref,
+      "aria-label": variant === "back" ? t("components.globalHeader.goBackToMainNavigation") : void 0,
+      sx: {
+        display: "block",
+        width: "100%",
+        py: Spacing["20px"],
+        pl: Spacing["12px"],
+        pr: Spacing["40px"],
+        ...(() => {
+          switch (variant) {
+            case "default":
+              return {
+                "li + li > &": { borderTop: "White8" },
+                "&:hover, &:focus-visible": { bg: "White4" },
+                '&[data-state="open"]': { bg: "transparent" },
+                backgroundClip: "padding-box",
+                transition: buildTransition("COLORS")
+              };
+            case "sub":
+              return {
+                my: `-${Spacing["8px"]}`,
+                py: Spacing["8px"]
+              };
+          }
+        })(),
+        "&:focus-visible": { outline: "none" },
+        '&:is(:disabled, [aria-disabled="true"])': { pointerEvents: "none" }
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs(Flex.Row, { as: "span", gap: Spacing["12px"], sx: { color: "White" }, children: [
+        /* @__PURE__ */ jsx(
+          Flex.Center,
+          {
+            as: "span",
+            sx: {
+              mt: Spacing["2px"],
+              width: Spacing["16px"],
+              height: Spacing["16px"],
+              flexShrink: 0,
+              ...(() => {
+                switch (variant) {
+                  default:
+                    return {
+                      opacity: Opacity["0%"],
+                      ".gds-ButtonOrLink:focus-visible &": {
+                        opacity: Opacity["32%"]
+                      },
+                      '.gds-ButtonOrLink[data-active]:not([data-state="open"]) &': {
+                        opacity: Opacity["88%"]
+                      },
+                      '.gds-ButtonOrLink[data-active]:not([data-state="open"]):is(:hover, :focus-visible) &': {
+                        opacity: Opacity["100%"]
+                      },
+                      '.gds-ButtonOrLink[data-active]:is(:disabled, [aria-disabled="true"]) &': {
+                        opacity: Opacity["32%"]
+                      }
+                    };
+                  case "back":
+                    return {
+                      opacity: Opacity["64%"],
+                      ".gds-ButtonOrLink:is(:hover, :focus-visible) &": {
+                        opacity: Opacity["100%"]
+                      },
+                      '.gds-ButtonOrLink:is(:disabled, [aria-disabled="true"]) &': {
+                        opacity: Opacity["32%"]
+                      }
+                    };
+                }
+              })(),
+              transition: buildTransition("OPACITY")
+            },
+            children: /* @__PURE__ */ jsx(IconElement, { size: "14px" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextElement,
+          {
+            as: "span",
+            sx: {
+              flexGrow: 1,
+              opacity: variant === "sub" ? Opacity["48%"] : Opacity["64%"],
+              ".gds-ButtonOrLink[data-active] &": {
+                opacity: Opacity["88%"]
+              },
+              ".gds-ButtonOrLink:is(:hover, :focus-visible) &": {
+                opacity: Opacity["100%"]
+              },
+              '.gds-ButtonOrLink:is(:disabled, [aria-disabled="true"]) &': {
+                opacity: Opacity["32%"]
+              },
+              transition: buildTransition("OPACITY")
+            },
+            children
+          }
+        )
+      ] })
+    }
+  );
+});
+StackedNavButtonOrLink.displayName = "GlobalHeader._StackedNavButtonOrLink";
+const GlobalHeaderLocaleSwitcher = forwardRef(
+  (props, ref) => {
+    const { t, localeDetails } = useI18n();
+    return /* @__PURE__ */ jsx(LocaleSwitcher, { ref, ...props, children: /* @__PURE__ */ jsxs(Link, { wrap: false, autoIcon: false, children: [
+      /* @__PURE__ */ jsx(Icon.World, { title: t("components.globalHeader.language"), size: "20px" }),
+      /* @__PURE__ */ jsx("span", { sx: { display: ["none", null, null, "inline"] }, children: localeDetails.displayName }),
+      /* @__PURE__ */ jsx(
+        Icon.CaretDown,
+        {
+          title: "",
+          size: "12px",
+          sx: {
+            display: ["none", null, null, "inline-block"],
+            '.gds-ButtonOrLink[data-state="open"] &': { transform: "rotate(-180deg)" },
+            transition: buildTransition("TRANSFORM")
+          }
+        }
+      )
+    ] }) });
+  }
+);
+GlobalHeaderLocaleSwitcher.displayName = "GlobalHeader.LocaleSwitcher";
+const GlobalHeaderSupportButton = forwardRef(
+  ({ href, onClick, ...props }, ref) => {
+    const { supportNavItem } = useContext(GlobalHeaderContext);
+    const { t } = useI18n();
+    const finalProps = {
+      ...props,
+      href: href ?? (supportNavItem == null ? void 0 : supportNavItem.href),
+      onClick: (event) => {
+        var _a;
+        onClick == null ? void 0 : onClick(event);
+        (_a = supportNavItem == null ? void 0 : supportNavItem.onClick) == null ? void 0 : _a.call(supportNavItem, event);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Link, { ref, wrap: false, autoIcon: false, ...finalProps, children: [
+      /* @__PURE__ */ jsx(ChatDots, { alt: "", variant: "fill", size: 5 }),
+      /* @__PURE__ */ jsx("span", { sx: { display: ["none", null, null, "inline"] }, children: (supportNavItem == null ? void 0 : supportNavItem.label) ?? t("components.globalHeader.support") })
+    ] });
+  }
+);
+GlobalHeaderSupportButton.displayName = "GlobalHeader.SupportButton";
+const GlobalHeaderConnectButton = forwardRef(
+  (props, ref) => {
+    const { t } = useI18n();
+    return /* @__PURE__ */ jsx(Button.Secondary, { ref, size: ["small", null, null, "medium"], ...props, children: t("components.globalHeader.connect") });
+  }
+);
+GlobalHeaderConnectButton.displayName = "GlobalHeader.ConnectButton";
+const GlobalHeaderBackButton = forwardRef(
+  (props, ref) => {
+    const { t } = useI18n();
+    return /* @__PURE__ */ jsx(Link, { ref, wrap: false, autoIcon: false, ...props, children: /* @__PURE__ */ jsx(Icon.ArrowLeft, { title: t("components.globalHeader.back"), size: "20px" }) });
+  }
+);
+GlobalHeaderBackButton.displayName = "GlobalHeader.BackButton";
+const GlobalHeader = Object.assign(GlobalHeaderComponent, {
+  /**
+   * Locale switcher part of the global header. Rendered automatically if `showLocaleSwitcher` is `true`, but can be used
+   * in either `leftContent` or `rightContent` to customize the appearance, position, or behavior of the locale switcher.
+   */
+  LocaleSwitcher: GlobalHeaderLocaleSwitcher,
+  /**
+   * Support button part of the global header. Rendered automatically if `showSupportButton` is `true` or an options object, but
+   * can be used in either `leftContent` or `rightContent` to customize the appearance, position, or behavior of the support button.
+   */
+  SupportButton: GlobalHeaderSupportButton,
+  /**
+   * Connect button part of the global header. Should be added to `rightContent` in apps that support connecting a wallet.
+   * Doesn't have any built-in functionality at the moment (i.e. a `onClick` handler must be provided).
+   */
+  ConnectButton: GlobalHeaderConnectButton,
+  /**
+   * A simple back button component that can be rendered in `leftContent` for "full screen flows".
+   * Doesn't have any built-in functionality at the moment (i.e. a `href` or `onClick` handler must be provided).
+   */
+  BackButton: GlobalHeaderBackButton
+});
+export {
+  GlobalHeader
+};