@axos-web-dev/shared-components 2.0.0-dev.1 → 2.0.0-dev.2-nav-0

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.js

@@ -1,11 +1,135 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import "../../../Chevron/Chevron.css.js";
+import "../../../Accordion/Accordion.js";
+import "../../../Accordion/Accordion.css.js";
+import "../../../icons/ArrowIcon/ArrowIcon.css.js";
+import "../../../icons/CheckIcon/CheckIcon.css.js";
+import '../../../assets/Modal/Modal.css';import '../../../assets/VideoWrapper/VideoWrapper.css';import '../../../assets/TopicalNavSet/TopicalNavSet.css';import '../../../assets/TopicalNavItem/TopicalNavItem.css';import '../../../assets/Topic/Topic.css';import '../../../assets/TextBlock/TextBlock.css';import '../../../assets/SocialMediaBar/SocialMediaBar.css';import '../../../assets/SecondaryFooter/SecondaryFooter.css';import '../../../assets/Pagination/Pagination.css';import '../../../assets/PageNavSet/PageNavigationSet.css';import '../../../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../../../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../../../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../../../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../../../assets/NavigationMenu/AxosBank/NavBar2.css';import '../../../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../../../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../../../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../../../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../../../assets/Insight/Featured/Header.css';import '../../../assets/Insight/Featured/CategorySelector.css';import '../../../assets/Insight/Featured/Featured.css';import '../../../assets/ImageLink/ImageLink.css';import '../../../assets/VideoTile/VideoTile.css';import '../../../assets/HelpArticle/HelpArticle.css';import '../../../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../../../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../../../assets/DownloadTile/DownloadTile.css';import '../../../assets/CollectInformationAlert/CollectInformationAlert.css';import '../../../assets/Chatbot/ChatWindow.css';import '../../../assets/Chatbot/Chatbot.css';import '../../../assets/Chatbot/Bubble.css';import '../../../assets/Chatbot/AnimatedGradientBorder.css';import '../../../assets/CallToActionBar/CallToActionBar.css';import '../../../assets/Insight/Insight.css';import '../../../assets/AwardsItem/AwardsItem.css';import '../../../assets/AwardsBanner/AwardsBanner.css';import '../../../assets/Auth/SignIn.css';import '../../../assets/Auth/ErrorAlert.css';import '../../../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../../../assets/Forms/QuickPricer/UserInformation.css';import '../../../assets/Forms/QuickPricer/QuickPricerResults.css';import '../../../assets/BulletItem/BulletItem.css';import '../../../assets/Typography/Typography.css';import '../../../assets/icons/FollowIcon/FollowIcon.css';import '../../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../../assets/themes/victorie.css';import '../../../assets/themes/ufb.css';import '../../../assets/themes/premier.css';import '../../../assets/themes/axos.css';/* empty css                                      */
+/* empty css                                         */
+/* empty css                                     */
+/* empty css                                          */
+/* empty css                                                          */
+/* empty css                                                      */
+import "clsx";
+import { useRef, useReducer, useState, useEffect } from "react";
+import "../../../AlertBanner/AlertBanner.css.js";
+import "../../../Article/Article.css.js";
+import "../../../IconBillboard/IconBillboard.css.js";
+/* empty css                                                */
+/* empty css                                                */
+import "../../../Interstitial/Interstitial-variants.css.js";
+import "../../../Button/Button.css.js";
+import { useClickAway } from "react-use";
+import "../../../ArticlesSet/ArticlesSet.css.js";
+import "../../../Calculators/calculator.css.js";
+import "../../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import { useGlobalContext } from "../../../Modal/contextApi/store.js";
+import "../../../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../../../Table/Table.css.js";
+import "../../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../../../Input/Checkbox.js";
+import "../../../Input/CurrencyInput.js";
+import "../../../Input/Dropdown.js";
+import "../../../Input/Dropdown.css.js";
+import "../../../Input/Input.js";
+import "../../../Input/Input.css.js";
+import "../../../Input/InputAmount.js";
+import "../../../Input/InputPhone.js";
+import "../../../Input/InputTextArea.js";
+import "../../../Input/DownPaymentInput.js";
+import "../../../Input/RadioButton.js";
+import "../../../Input/PercentageInput.js";
+import "react-hook-form";
+import "../../../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+import "../../../Forms/Forms.css.js";
+import "../../../Forms/HoneyPot/index.js";
+import "../../../Forms/SalesforceFieldsForm.js";
+import "../../../Input/RadioButton.css.js";
+import "../../../Input/Checkbox.css.js";
+import "../../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../../Inputs/Input.css.js";
+/* empty css                                                               */
+import "../../../Hyperlink/Hyperlink.css.js";
+/* empty css                                                            */
+import "iframe-resizer";
+/* empty css                                                                                      */
+import "../../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+import "../../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
+/* empty css                                          */
+import "react-dom";
+/* empty css                                      */
+import "../../../Auth/SignInPassword.js";
+/* empty css                                                    */
+/* empty css                                                */
+/* empty css                                          */
+/* empty css                                                          */
+import "../../../Carousel/index.js";
 import { AnimatePresence, motion } from "framer-motion";
+/* empty css                                                         */
+/* empty css                                         */
+import "../../../Chatbot/store/chat.js";
+import "../../../Chatbot/authenticate.js";
+/* empty css                                          */
+/* empty css                                             */
+import "../../../Chatbot/store/messages.js";
+/* empty css                                                                          */
+import "../../../Comparison/Comparison.css.js";
+import "next/image.js";
+import "../../../HeroBanner/HeroBanner.css.js";
+import "../../../HeroBanner/LargeBanner.css.js";
+import "../../../HeroBanner/SelectionBanner.css.js";
+import "../../../SetContainer/SetContainer.css.js";
+import "../../../Tab/Tab.css.js";
+import "../../../icons/Star/Star.css.js";
+import "../../../ContentBanner/ContentBanner.css.js";
+/* empty css                                                    */
+import "../../../ExecutiveBio/ExecutiveBio.css.js";
+import "../../../FaqAccordion/index.js";
+import "../../../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                                */
+/* empty css                                                               */
+/* empty css                                                  */
+import "../../../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+/* empty css                                              */
+/* empty css                                              */
+/* empty css                                                    */
+/* empty css                                                            */
+/* empty css                                                  */
+import "../../../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                          */
 import { usePathname } from "next/navigation.js";
+/* empty css                                             */
+/* empty css                                                  */
+/* empty css                                                     */
+/* empty css                           */
+import "../Menu.js";
+/* empty css                              */
+/* empty css                                           */
+/* empty css                                       */
+/* empty css                                         */
 import Link from "next/link.js";
-import { menuData, getQuickLinks } from "./MobileNavData.js";
+import "../../../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                       */
+/* empty css                                                */
+/* empty css                                                          */
+/* empty css                                                        */
+import "../../../StepItem/StepItem.css.js";
+import "../../../StepItemSet/StepItemSet.css.js";
+/* empty css                                              */
+/* empty css                                      */
+/* empty css                                                        */
+/* empty css                                                      */
+/* empty css                                                    */
+/* empty css                                      */
 import styles from "./MobileMenu.module.js";
+import { mobileData } from "./MobileNavData.js";
+import { MenuActions, reducer } from "./mobileReducer.js";
 const slideVariants = {
   enter: (direction) => ({
     x: direction === "forward" ? "100%" : "-100%",
@@ -24,24 +148,42 @@ const slideVariants = {
     position: "absolute"
   })
 };
-const MobileDrawerMenu = () => {
+const initialState = {
+  direction: "forward",
+  isMobileMenuOpen: false,
+  hasOpenedOnce: false,
+  prevLevel: [],
+  currentMenuData: null,
+  stack: [],
+  loginDrawer: false,
+  loginData: {}
+};
+const MobileDrawerMenu = ({ menu }) => {
+  const { resolveUrl } = useGlobalContext();
   const pathname = usePathname();
-  const [queryString, setQueryString] = useState("");
-  const [open, setOpen] = useState(false);
-  const [stack, setStack] = useState([
-    { title: "Main Menu", items: menuData }
-  ]);
-  const [hasOpenedOnce, setHasOpenedOnce] = useState(false);
-  const [direction, setDirection] = useState("forward");
-  const [quickLinks, setQuickLinks] = useState([]);
   const drawerRef = useRef(null);
-  const currentLevel = stack[stack.length - 1];
-  const prevLevel = stack[stack.length - 2];
+  const loginRef = useRef(null);
+  useClickAway(drawerRef, () => {
+    dispatch({ type: MenuActions.SET_MOBILE_MENU_CLOSED, payload: {} });
+  });
+  useClickAway(loginRef, () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_CLOSED, payload: {} });
+  });
+  const [queryString, setQueryString] = useState("");
+  const [stack, dispatch] = useReducer(reducer, initialState);
+  useEffect(() => {
+    const menuProcessed = mobileData(menu);
+    dispatch({
+      type: MenuActions.INIT,
+      payload: {
+        currentMenuData: menuProcessed,
+        stack: [{ title: "Menu", items: menuProcessed }],
+        quickLinks: menu?.quickLinks
+      }
+    });
+  }, [menu]);
   useEffect(() => {
     if (!pathname) return;
-    const pathnameParts = "/" + pathname.split("/")[1];
-    const links = getQuickLinks(pathnameParts);
-    setQuickLinks(links);
   }, [pathname]);
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -52,80 +194,75 @@ const MobileDrawerMenu = () => {
     }
   }, []);
   const handleClick = (key) => {
-    const item = currentLevel.items[key];
-    if (typeof item === "object") {
-      setDirection("forward");
-      setStack((prev) => [...prev, { title: key, items: item }]);
-    }
+    dispatch({ type: MenuActions.ADD_TO_STACK, payload: key });
   };
   const handleBack = () => {
-    if (stack.length > 1) {
-      setDirection("backward");
-      setStack((prev) => prev.slice(0, -1));
+    if (stack.stack.length > 1) {
+      dispatch({ type: MenuActions.REMOVE_FROM_STACK, payload: {} });
     }
   };
   const handleToggle = () => {
-    setOpen((prev) => {
-      const isOpening = !prev;
-      if (isOpening && !hasOpenedOnce) {
-        setHasOpenedOnce(true);
-        setStack([{ title: "Menu", items: menuData }]);
-      }
-      return isOpening;
-    });
+    dispatch({ type: MenuActions.SET_HAS_OPENED_ONCE, payload: {} });
+    dispatch({ type: MenuActions.SET_MOBILE_MENU_OPEN, payload: {} });
   };
-  const handleOutsideClick = (e) => {
-    if (drawerRef.current && !drawerRef.current.contains(e.target)) {
-      setOpen(false);
-    }
+  const handleLoginDrawerOpen = () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_OPEN, payload: {} });
+  };
+  const handleLoginDrawerClose = () => {
+    dispatch({ type: MenuActions.SET_LOGIN_MENU_CLOSED, payload: {} });
   };
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("mousedown", handleOutsideClick);
-    } else {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    }
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, [open]);
   useEffect(() => {
     const onEsc = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key === "Escape")
+        dispatch({ type: MenuActions.SET_MOBILE_MENU_CLOSED, payload: {} });
     };
-    if (open) {
+    if (stack.isMobileMenuOpen) {
       document.addEventListener("keydown", onEsc);
     }
     return () => document.removeEventListener("keydown", onEsc);
-  }, [open]);
+  }, [stack.isMobileMenuOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleToggle,
-        className: `${styles.hamburger} flex_col`,
-        "aria-label": "open navigation menu",
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            width: 24,
-            height: 24,
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
-                fill: "#14263D"
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: styles.mobileNavRow, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleLoginDrawerOpen,
+          className: styles.loginTrigger,
+          "aria-label": "Open login options",
+          children: "Log in"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleToggle,
+          className: `${styles.hamburger} flex_col`,
+          "aria-label": "open navigation menu",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: 24,
+              height: 24,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
+                  fill: "#14263D"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.isMobileMenuOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: styles.overlay,
@@ -148,7 +285,7 @@ const MobileDrawerMenu = () => {
             children: [
               /* @__PURE__ */ jsx("p", { id: "menu-description", className: styles.sr_only, children: "Use tab to navigate this menu. Press Escape to close." }),
               /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-                stack.length > 1 ? /* @__PURE__ */ jsxs(
+                stack.stack?.length > 1 ? /* @__PURE__ */ jsxs(
                   "button",
                   {
                     onClick: handleBack,
@@ -173,7 +310,7 @@ const MobileDrawerMenu = () => {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: prevLevel.title })
+                      /* @__PURE__ */ jsx("span", { className: styles.prevlevel, children: stack.prevLevel?.title })
                     ]
                   }
                 ) : /* @__PURE__ */ jsx(
@@ -226,7 +363,7 @@ const MobileDrawerMenu = () => {
                     className: `${styles.level} flex middle`,
                     "aria-label": "current menu level",
                     children: [
-                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: currentLevel.title }),
+                      /* @__PURE__ */ jsx("h2", { className: styles.levelTitle, id: "menu-level", children: stack.currentMenuData?.title }),
                       /* @__PURE__ */ jsx(
                         "svg",
                         {
@@ -251,30 +388,40 @@ const MobileDrawerMenu = () => {
                 /* @__PURE__ */ jsx("nav", { "aria-label": "main navigation menu", children: /* @__PURE__ */ jsx(
                   AnimatePresence,
                   {
-                    custom: direction,
+                    custom: stack.direction,
                     mode: "sync",
                     initial: false,
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs(
                       motion.ul,
                       {
                         className: styles.menu,
-                        custom: direction,
+                        custom: stack.direction,
                         variants: slideVariants,
                         initial: "enter",
                         animate: "center",
                         exit: "exit",
                         transition: { duration: 0.3, ease: "linear" },
-                        children: Object.entries(currentLevel.items).map(
-                          ([key, value]) => {
-                            const hasChildren = typeof value === "object";
-                            return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsxs(
+                        children: [
+                          stack.stack.length > 1 && !stack.currentMenuData?.dropdown && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              href: stack.currentMenuData.url + (queryString && !stack.currentMenuData.url.includes("?") ? `?${queryString}` : ""),
+                              className: styles.menuItem,
+                              children: /* @__PURE__ */ jsxs("span", { children: [
+                                stack.currentMenuData.title,
+                                " Home"
+                              ] })
+                            }
+                          ) }),
+                          stack?.currentMenuData?.items?.map((item) => {
+                            const hasChildren = item.items && item.items.length > 0;
+                            return hasChildren ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
                               "button",
                               {
                                 className: styles.menuItem,
-                                onClick: () => handleClick(key),
-                                "aria-label": `open submenu for ${key}`,
+                                onClick: () => handleClick(item),
                                 children: [
-                                  /* @__PURE__ */ jsx("span", { children: key }),
+                                  /* @__PURE__ */ jsx("span", { children: item.label }),
                                   /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(
                                     "svg",
                                     {
@@ -295,27 +442,27 @@ const MobileDrawerMenu = () => {
                                   ) })
                                 ]
                               }
-                            ) : /* @__PURE__ */ jsx(
+                            ) }, item.id + "1") : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                               Link,
                               {
-                                href: value + (queryString && !value.includes("?") ? `?${queryString}` : ""),
+                                href: item?.url + (queryString && !item?.url?.includes("?") ? `?${queryString}` : ""),
                                 className: styles.menuItem,
-                                children: /* @__PURE__ */ jsx("span", { children: key })
+                                children: /* @__PURE__ */ jsx("span", { children: item.label })
                               }
-                            ) }, key);
-                          }
-                        )
+                            ) }, item.id);
+                          })
+                        ]
                       },
-                      currentLevel.title
+                      stack.currentMenuData?.title
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: quickLinks.map((link) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: `${styles.quickLinks} flex middle between`, children: stack.quickLinks?.map((link) => /* @__PURE__ */ jsxs(
                   "a",
                   {
-                    href: link.url + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
+                    href: resolveUrl(link.url) + (queryString && !link.url.includes("?") ? `?${queryString}` : ""),
                     className: `${styles.quickLink} flex_col middle`,
-                    "aria-label": `Visit ${link.title} page`,
+                    "aria-label": link.ariaLabel,
                     children: [
                       /* @__PURE__ */ jsx(
                         "img",
@@ -327,16 +474,157 @@ const MobileDrawerMenu = () => {
                           loading: "lazy"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: link.title })
+                      /* @__PURE__ */ jsx("span", { children: link.label })
                     ]
                   },
-                  link.title
+                  link.id
                 )) })
               ] }) })
             ]
           }
         )
       }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: stack.loginDrawer && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: styles.overlay,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: `${styles.drawer} flex_col`,
+            ref: loginRef,
+            initial: { x: "100%" },
+            animate: { x: 0 },
+            exit: { x: "100%" },
+            transition: { type: "tween", duration: 0.3 },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Login options",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: window.location.href.split("/")[3] === "invest" ? "/invest" : "/",
+                    "aria-label": "return to home page",
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: "https://www.axos.com/images/1sBwCIn5mqOg5DK2uXDJPc/axb_mobile_logo.png",
+                        alt: "",
+                        width: 86,
+                        height: 19
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: styles.loginDrawerTitle, children: "Log in" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${styles.close} flex_col`,
+                    "aria-label": "Close login options",
+                    onClick: handleLoginDrawerClose,
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
+                            fill: "#14263D"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.loginDrawerContent, children: /* @__PURE__ */ jsx("div", { className: styles.loginAccordion, children: /* @__PURE__ */ jsxs(
+                "ul",
+                {
+                  className: styles.loginAccordionList,
+                  "aria-label": "Login options",
+                  children: [
+                    stack.loginData?.items?.filter((item) => item.items)?.map((group) => {
+                      return /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: styles.loginAccordionGroup,
+                          "aria-label": `${group?.label} login options`,
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading, children: group.label }),
+                            /* @__PURE__ */ jsx("ul", { className: styles.loginAccordionGroupList, children: group.items?.map((item) => /* @__PURE__ */ jsx(
+                              "li",
+                              {
+                                "aria-label": `access ${item.label}`,
+                                children: /* @__PURE__ */ jsx(
+                                  "a",
+                                  {
+                                    href: item.url + (queryString && !item.url.includes("?") ? `?${queryString}` : ""),
+                                    className: styles.menuItem,
+                                    children: /* @__PURE__ */ jsx("span", { children: item.label })
+                                  }
+                                )
+                              },
+                              item.id
+                            )) })
+                          ]
+                        },
+                        group?.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        className: styles.loginAccordionGroup,
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: styles.loginAccordionHeading }),
+                          stack.loginData?.items.filter((item) => !item.items).map((group) => {
+                            return /* @__PURE__ */ jsx(
+                              "ul",
+                              {
+                                className: styles.loginAccordionGroupList,
+                                children: /* @__PURE__ */ jsx(
+                                  "li",
+                                  {
+                                    "aria-label": `access ${group.label}`,
+                                    children: /* @__PURE__ */ jsx(
+                                      "a",
+                                      {
+                                        href: group.url + (queryString && !group.url.includes("?") ? `?${queryString}` : ""),
+                                        className: styles.menuItem,
+                                        children: /* @__PURE__ */ jsx("span", { children: group.label })
+                                      }
+                                    )
+                                  },
+                                  group.id
+                                )
+                              },
+                              group.id
+                            );
+                          })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) }) })
+            ]
+          }
+        )
+      }
     ) })
   ] });
 };