@dnanpm/ui-components 0.8.0 → 0.10.0

package/dist/components/MainNavigation/MainNavigation.cjs

@@ -3,14 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const icons = require("@dnanpm/icons");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
-const overlay_module = require("../../styles/utils/overlay.module.css.cjs");
-const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
-const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const MainNavigation_module = require("./MainNavigation.module.css.cjs");
 const MainNavigation_utils = require("./MainNavigation.utils.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const Button = require("../Button/Button.cjs");
+const Drawer = require("../Drawer/Drawer.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const defaultOrganizations = [];
 const defaultItems = [];
@@ -19,33 +17,33 @@ const defaultLogoSrc = `data:image/svg+xml,${encodeURIComponent(defaultLogoSvg)}
 const mobilePanelAnimationDurationMs = 200;
 const mobileBodyScrollLockClass = "dds-un-scrollable";
 const defaultOverflowCategoryLabel = "Muut kategoriat";
-const desktopMinWidthMediaQuery = "(min-width: 1024px)";
 const defaultRenderLink = (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
+const defaultRenderLanguageLink = (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
 const MainNavigation = ({
   organizations = defaultOrganizations,
   items = defaultItems,
-  loginHref = "#",
   loginLabel = "Kirjaudu",
   logoHref = "/",
-  languageSelectorLabel = "FI",
+  languages,
+  renderLanguageLink = defaultRenderLanguageLink,
   searchLabel = "Haku",
   cartLabel = "Ostoskori",
-  showLanguageSelector = false,
-  showSearch = false,
-  showCart = false,
   cartCounter,
   cartCounterLabel = "tuotetta ostoskorissa",
-  onLanguageSelectorClick,
-  onSearchClick,
-  onCartClick,
-  mobileMenuOpenAriaLabel = "Avaa valikko",
-  mobileMenuCloseAriaLabel = "Sulje valikko",
+  cartOpen,
+  onCartOpenChange,
+  onSearchOpenChange,
+  onLanguageOpenChange,
+  onLoginOpenChange,
+  searchDropdownContent,
+  loginDropdownContent,
+  cartContent,
+  mobileMenuOpenAriaLabel = "Avaa päävalikko",
+  mobileMenuCloseAriaLabel = "Sulje päävalikko",
   organizationStripAriaLabel = "Sivustot",
   logoAriaLabel = "Siirry etusivulle",
   mobilePrimaryNavigationAriaLabel = "Päävalikko",
   externalLinkAriaLabel = "avautuu uuteen välilehteen",
-  defaultMobileMenuOpen = false,
-  defaultOpenItemIndex = null,
   currentPathname,
   overflowCategoryLabel = defaultOverflowCategoryLabel,
   onMobileMenuToggle,
@@ -56,13 +54,24 @@ const MainNavigation = ({
   ref,
   ...props
 }) => {
-  const [mobileMenuOpen, setMobileMenuOpen] = react.useState(defaultMobileMenuOpen);
+  const isCartControlled = cartOpen !== void 0;
+  const showSearch = searchDropdownContent != null && typeof searchDropdownContent !== "boolean";
+  const showLogin = loginDropdownContent != null && typeof loginDropdownContent !== "boolean";
+  const showCart = cartContent != null && typeof cartContent !== "boolean";
+  const currentLanguage = languages?.find((language) => language.current) ?? languages?.[0];
+  const alternativeLanguages = currentLanguage != null ? (languages ?? []).filter((language) => language.code !== currentLanguage.code) : [];
+  const showLanguage = currentLanguage != null && alternativeLanguages.length > 0;
+  const [mobileMenuOpen, setMobileMenuOpen] = react.useState(false);
   const [isMobileMenuClosing, setIsMobileMenuClosing] = react.useState(false);
-  const [openTopLevelItemIndex, setOpenTopLevelItemIndex] = react.useState(
-    defaultOpenItemIndex
-  );
-  const [isDesktopHeaderOpen, setIsDesktopHeaderOpen] = react.useState(true);
+  const [openTopLevelItemIndex, setOpenTopLevelItemIndex] = react.useState(null);
+  const [isHeaderOpen, setIsHeaderOpen] = react.useState(true);
   const [mobileActiveCategoryIndex, setMobileActiveCategoryIndex] = react.useState(null);
+  const [internalCartOpen, setInternalCartOpen] = react.useState(false);
+  const isCartOpen = cartOpen ?? internalCartOpen;
+  const [openUtilityDropdown, setOpenUtilityDropdown] = react.useState(null);
+  const searchDropdownId = react.useId();
+  const languageDropdownId = react.useId();
+  const loginDropdownId = react.useId();
   const [isMobileSecondPanelClosing, setIsMobileSecondPanelClosing] = react.useState(false);
   const [isMobileThirdPanelClosing, setIsMobileThirdPanelClosing] = react.useState(false);
   const mobileSecondPanelCloseTimeoutRef = react.useRef(null);
@@ -78,6 +87,9 @@ const MainNavigation = ({
   );
   const headerElementRef = react.useRef(null);
   const desktopPanelTriggerButtonRefs = react.useRef([]);
+  const searchTriggerRef = react.useRef(null);
+  const languageTriggerRef = react.useRef(null);
+  const loginTriggerRef = react.useRef(null);
   const mobilePrimaryNavRef = react.useRef(null);
   const mobileMenuToggleButtonRef = react.useRef(null);
   const mobileModalPanelRef = react.useRef(null);
@@ -87,9 +99,18 @@ const MainNavigation = ({
   const mobileLevelTwoCategoryButtonRefs = react.useRef([]);
   const focusMobilePanelBackOnOpenRef = react.useRef(false);
   const focusMobileThirdPanelBackOnOpenRef = react.useRef(false);
+  const lastInteractionWasKeyboardRef = react.useRef(false);
   const focusReturnToMobileCategoryTimeoutRef = react.useRef(
     null
   );
+  const notifyRef = react.useRef({
+    mobileMenu: false,
+    desktopItem: null,
+    search: false,
+    language: false,
+    login: false,
+    cart: false
+  });
   const setHeaderRef = react.useCallback(
     (node) => {
       headerElementRef.current = node;
@@ -128,23 +149,22 @@ const MainNavigation = ({
       return;
     }
     const headerElement = headerElementRef.current;
-    const desktopQuery = window.matchMedia(desktopMinWidthMediaQuery);
+    const desktopQuery = window.matchMedia(MainNavigation_utils.desktopMinWidthMediaQuery);
     let previousScrollY = window.pageYOffset;
     let headerHeight = parseFloat(window.getComputedStyle(headerElement).height.replace("px", "")) || headerElement.offsetHeight;
     const openHeader = () => {
-      setIsDesktopHeaderOpen(true);
+      setIsHeaderOpen(true);
     };
     const closeHeader = () => {
-      setIsDesktopHeaderOpen(false);
+      setIsHeaderOpen(false);
+    };
+    const headerHasVisibleFocus = () => {
+      const active = document.activeElement;
+      return lastInteractionWasKeyboardRef.current && active instanceof HTMLElement && headerElement.contains(active);
     };
     const handleScroll = () => {
       const currentScrollY = window.pageYOffset;
-      if (!desktopQuery.matches) {
-        openHeader();
-        previousScrollY = currentScrollY;
-        return;
-      }
-      if (mobileMenuOpen || openTopLevelItemIndex != null) {
+      if (mobileMenuOpen || openTopLevelItemIndex != null || openUtilityDropdown != null || headerHasVisibleFocus()) {
         openHeader();
         previousScrollY = currentScrollY;
         return;
@@ -158,6 +178,11 @@ const MainNavigation = ({
       }
       previousScrollY = currentScrollY;
     };
+    const handleFocusIn = () => {
+      if (headerHasVisibleFocus()) {
+        openHeader();
+      }
+    };
     const handleViewportChange = () => {
       openHeader();
       previousScrollY = window.pageYOffset;
@@ -165,14 +190,33 @@ const MainNavigation = ({
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
     window.addEventListener("resize", handleViewportChange);
+    document.addEventListener("focusin", handleFocusIn);
     desktopQuery.addEventListener("change", handleViewportChange);
     handleScroll();
     return () => {
       window.removeEventListener("scroll", handleScroll);
       window.removeEventListener("resize", handleViewportChange);
+      document.removeEventListener("focusin", handleFocusIn);
       desktopQuery.removeEventListener("change", handleViewportChange);
     };
-  }, [mobileMenuOpen, openTopLevelItemIndex]);
+  }, [mobileMenuOpen, openTopLevelItemIndex, openUtilityDropdown]);
+  react.useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const handleKeyDown = () => {
+      lastInteractionWasKeyboardRef.current = true;
+    };
+    const handlePointerDown = () => {
+      lastInteractionWasKeyboardRef.current = false;
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, []);
   react.useEffect(() => {
     const browserWindow = globalThis.window;
     const browserDocument = globalThis.document;
@@ -208,8 +252,8 @@ const MainNavigation = ({
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
-    const desktopQuery = window.matchMedia(desktopMinWidthMediaQuery);
-    const applyViewportModeChange = ({ matches: isDesktopViewport2 }) => {
+    const desktopQuery = window.matchMedia(MainNavigation_utils.desktopMinWidthMediaQuery);
+    const handleViewportModeChange = ({ matches: isDesktopViewport2 }) => {
       if (isDesktopViewport2) {
         clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
         mobileSecondPanelCloseTimeoutRef.current = null;
@@ -217,28 +261,25 @@ const MainNavigation = ({
         mobileThirdPanelCloseTimeoutRef.current = null;
         clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
         resetMobileThirdPanelScrollTimeoutRef.current = null;
-        setMobileMenuOpen((previous) => {
-          if (previous) {
-            onMobileMenuToggle?.(false);
-          }
-          return false;
-        });
+        if (notifyRef.current.mobileMenu) {
+          notifyRef.current.mobileMenu = false;
+          onMobileMenuToggle?.(false);
+        }
+        setMobileMenuOpen(false);
         setMobileActiveCategoryIndex(null);
         setIsMobileSecondPanelClosing(false);
         setIsMobileThirdPanelClosing(false);
         return;
       }
-      setOpenTopLevelItemIndex((previous) => {
-        if (previous !== null) {
-          onDesktopItemToggle?.(null);
-        }
-        return null;
-      });
+      if (notifyRef.current.desktopItem !== null) {
+        notifyRef.current.desktopItem = null;
+        onDesktopItemToggle?.(null);
+      }
+      setOpenTopLevelItemIndex(null);
     };
-    applyViewportModeChange(desktopQuery);
-    desktopQuery.addEventListener("change", applyViewportModeChange);
+    desktopQuery.addEventListener("change", handleViewportModeChange);
     return () => {
-      desktopQuery.removeEventListener("change", applyViewportModeChange);
+      desktopQuery.removeEventListener("change", handleViewportModeChange);
     };
   }, [onDesktopItemToggle, onMobileMenuToggle]);
   const resetMobilePanelState = react.useCallback(() => {
@@ -258,20 +299,18 @@ const MainNavigation = ({
       return;
     }
     const shouldAnimateMobileClose = mobileMenuOpen;
+    if (mobileMenuOpen) {
+      notifyRef.current.mobileMenu = false;
+      onMobileMenuToggle?.(false);
+    }
+    if (openTopLevelItemIndex !== null) {
+      notifyRef.current.desktopItem = null;
+      onDesktopItemToggle?.(null);
+    }
     clearTimeout(mobileMenuCloseResetTimeoutRef.current ?? void 0);
     setIsMobileMenuClosing(shouldAnimateMobileClose);
-    setMobileMenuOpen((previous) => {
-      if (previous) {
-        onMobileMenuToggle?.(false);
-      }
-      return false;
-    });
-    setOpenTopLevelItemIndex((previous) => {
-      if (previous !== null) {
-        onDesktopItemToggle?.(null);
-      }
-      return null;
-    });
+    setMobileMenuOpen(false);
+    setOpenTopLevelItemIndex(null);
     if (shouldAnimateMobileClose) {
       mobileMenuCloseResetTimeoutRef.current = setTimeout(() => {
         resetMobilePanelState();
@@ -294,19 +333,21 @@ const MainNavigation = ({
       closeMobileMenu();
       return;
     }
+    closeUtilityDropdown();
+    notifyRef.current.mobileMenu = true;
     setMobileMenuOpen(true);
     setIsMobileMenuClosing(false);
     onMobileMenuToggle?.(true);
   };
-  const toggleTopLevelItem = (index) => {
-    setOpenTopLevelItemIndex((previous) => {
-      const next = previous === index ? null : index;
-      setMobileActiveCategoryIndex(null);
-      setIsMobileSecondPanelClosing(false);
-      setIsMobileThirdPanelClosing(false);
-      onDesktopItemToggle?.(next);
-      return next;
-    });
+  const toggleTopLevelItem = (index2) => {
+    closeUtilityDropdown();
+    const next = openTopLevelItemIndex === index2 ? null : index2;
+    notifyRef.current.desktopItem = next;
+    setOpenTopLevelItemIndex(next);
+    setMobileActiveCategoryIndex(null);
+    setIsMobileSecondPanelClosing(false);
+    setIsMobileThirdPanelClosing(false);
+    onDesktopItemToggle?.(next);
   };
   const isDesktopViewport = react.useCallback(() => {
     return MainNavigation_utils.isDesktopViewportByEnvironment(globalThis.window);
@@ -358,6 +399,23 @@ const MainNavigation = ({
     },
     [getDesktopPanelInteractiveElements, isFocusable]
   );
+  const getUtilityDropdownFocusLoopElements = react.useCallback(
+    (kind) => {
+      const focusLoopElements = /* @__PURE__ */ new Set();
+      const triggerButton = kind === "search" ? searchTriggerRef.current : kind === "language" ? languageTriggerRef.current : loginTriggerRef.current;
+      if (triggerButton != null && isFocusable(triggerButton)) {
+        focusLoopElements.add(triggerButton);
+      }
+      getFocusableElements(
+        headerElementRef.current,
+        `.${MainNavigation_module["main-navigation__dropdown"]} a[href], .${MainNavigation_module["main-navigation__dropdown"]} button:not([disabled]), .${MainNavigation_module["main-navigation__dropdown"]} input:not([disabled]), .${MainNavigation_module["main-navigation__dropdown"]} select:not([disabled]), .${MainNavigation_module["main-navigation__dropdown"]} textarea:not([disabled]), .${MainNavigation_module["main-navigation__dropdown"]} [tabindex]:not([tabindex="-1"])`
+      ).forEach((element) => {
+        focusLoopElements.add(element);
+      });
+      return Array.from(focusLoopElements);
+    },
+    [getFocusableElements, isFocusable]
+  );
   const getMobileFocusableElements = react.useCallback(() => {
     const focusableElements = [];
     const addFocusableElements = (elements) => {
@@ -392,15 +450,35 @@ const MainNavigation = ({
     );
     return Array.from(new Set(focusableElements));
   }, [getFocusableElements, isFocusable, mobileActiveCategoryIndex, openTopLevelItemIndex]);
-  const openMobileCategoryPanel = react.useCallback((index) => {
+  const openMobileCategoryPanel = react.useCallback((index2) => {
     clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
     setIsMobileThirdPanelClosing(false);
-    setMobileActiveCategoryIndex(index);
+    setMobileActiveCategoryIndex(index2);
     resetMobileThirdPanelScrollTimeoutRef.current = setTimeout(() => {
       (mobileThirdPanelRef.current ?? { scrollTop: 0 }).scrollTop = 0;
       resetMobileThirdPanelScrollTimeoutRef.current = null;
     }, 0);
   }, []);
+  const notifyUtilityOpenChange = react.useCallback(
+    (kind, open) => {
+      if (kind === "search") {
+        onSearchOpenChange?.(open);
+      } else if (kind === "language") {
+        onLanguageOpenChange?.(open);
+      } else {
+        onLoginOpenChange?.(open);
+      }
+    },
+    [onLanguageOpenChange, onLoginOpenChange, onSearchOpenChange]
+  );
+  const closeUtilityDropdown = react.useCallback(() => {
+    const openDropdown = notifyRef.current.search ? "search" : notifyRef.current.language ? "language" : notifyRef.current.login ? "login" : null;
+    if (openDropdown != null) {
+      notifyRef.current[openDropdown] = false;
+      notifyUtilityOpenChange(openDropdown, false);
+    }
+    setOpenUtilityDropdown(null);
+  }, [notifyUtilityOpenChange]);
   const closeMenus = react.useCallback(() => {
     clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
     mobileSecondPanelCloseTimeoutRef.current = null;
@@ -408,16 +486,24 @@ const MainNavigation = ({
     mobileThirdPanelCloseTimeoutRef.current = null;
     clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
     focusMobileSecondPanelTimeoutRef.current = null;
+    focusMobilePanelBackOnOpenRef.current = false;
     clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
     focusMobileThirdPanelTimeoutRef.current = null;
+    focusMobileThirdPanelBackOnOpenRef.current = false;
     clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
     resetMobileThirdPanelScrollTimeoutRef.current = null;
     clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
     focusReturnToMobileTopLevelItemTimeoutRef.current = null;
     clearTimeout(focusReturnToMobileCategoryTimeoutRef.current ?? void 0);
     focusReturnToMobileCategoryTimeoutRef.current = null;
+    const openDropdown = notifyRef.current.search ? "search" : notifyRef.current.language ? "language" : notifyRef.current.login ? "login" : null;
+    if (openDropdown != null) {
+      notifyRef.current[openDropdown] = false;
+      notifyUtilityOpenChange(openDropdown, false);
+    }
+    setOpenUtilityDropdown(null);
     closeMobileMenu();
-  }, [closeMobileMenu]);
+  }, [closeMobileMenu, notifyUtilityOpenChange]);
   const closeMobilePanel = react.useCallback(
     ({
       isClosing,
@@ -466,9 +552,133 @@ const MainNavigation = ({
   const openItem = openTopLevelItemIndex != null ? items[openTopLevelItemIndex] : void 0;
   const openPanel = openItem?.panel;
   const isMobilePanelClosingOut = isMobileMenuClosing && !mobileMenuOpen;
-  const showPageOverlay = mobileMenuOpen || openPanel != null || isMobilePanelClosingOut;
   const isOverlayClosingOut = isMobilePanelClosingOut && openPanel == null;
   const cartAccessibleLabel = cartCounter != null ? `${cartLabel} ${cartCounter} ${cartCounterLabel}` : cartLabel;
+  const languageAnnouncements = currentLanguage != null ? MainNavigation_utils.getLanguageToggleAnnouncements(
+    (languages ?? []).map((language) => language.code),
+    currentLanguage.code
+  ) : [];
+  const activeUtilityDropdown = openUtilityDropdown === "search" && showSearch ? "search" : openUtilityDropdown === "language" && showLanguage ? "language" : openUtilityDropdown === "login" && showLogin ? "login" : null;
+  const isSearchOpen = activeUtilityDropdown === "search";
+  const isLanguageOpen = activeUtilityDropdown === "language";
+  const isLoginOpen = activeUtilityDropdown === "login";
+  const effectiveCartOpen = isCartOpen && showCart;
+  const showPageOverlay = mobileMenuOpen || openPanel != null || isMobilePanelClosingOut || activeUtilityDropdown != null;
+  const toggleUtilityDropdown = (kind) => {
+    const previous = openUtilityDropdown;
+    const next = previous === kind ? null : kind;
+    if (previous != null && previous !== next) {
+      notifyRef.current[previous] = false;
+      notifyUtilityOpenChange(previous, false);
+    }
+    if (next != null) {
+      notifyRef.current[next] = true;
+      notifyUtilityOpenChange(next, true);
+      closeMobileMenu();
+      if (isCartOpen) {
+        if (!isCartControlled) {
+          notifyRef.current.cart = false;
+          setInternalCartOpen(false);
+        }
+        onCartOpenChange?.(false);
+      }
+    }
+    setOpenUtilityDropdown(next);
+  };
+  const handleLanguageClick = () => {
+    toggleUtilityDropdown("language");
+  };
+  const handleSearchClick = () => {
+    toggleUtilityDropdown("search");
+  };
+  const handleLoginClick = () => {
+    toggleUtilityDropdown("login");
+  };
+  const handleCartClick = () => {
+    const next = !isCartOpen;
+    if (next) {
+      closeMenus();
+    }
+    if (!isCartControlled) {
+      notifyRef.current.cart = next && showCart;
+      setInternalCartOpen(next);
+    }
+    onCartOpenChange?.(next);
+  };
+  const handleCartOpenChange = (open) => {
+    if (!isCartControlled) {
+      notifyRef.current.cart = open && showCart;
+      setInternalCartOpen(open);
+    }
+    onCartOpenChange?.(open);
+  };
+  if (effectiveCartOpen) {
+    if (openUtilityDropdown !== null) {
+      setOpenUtilityDropdown(null);
+    }
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+    if (isMobileMenuClosing) {
+      setIsMobileMenuClosing(false);
+    }
+    if (openTopLevelItemIndex !== null || mobileActiveCategoryIndex !== null || isMobileSecondPanelClosing || isMobileThirdPanelClosing) {
+      resetMobilePanelState();
+    }
+  } else if (openUtilityDropdown !== null && activeUtilityDropdown === null) {
+    setOpenUtilityDropdown(null);
+  }
+  if (!isCartControlled && internalCartOpen && !showCart) {
+    setInternalCartOpen(false);
+  }
+  react.useEffect(() => {
+    const lastNotified = notifyRef.current;
+    if (mobileMenuOpen !== lastNotified.mobileMenu) {
+      lastNotified.mobileMenu = mobileMenuOpen;
+      onMobileMenuToggle?.(mobileMenuOpen);
+    }
+    if (openTopLevelItemIndex !== lastNotified.desktopItem) {
+      lastNotified.desktopItem = openTopLevelItemIndex;
+      onDesktopItemToggle?.(openTopLevelItemIndex);
+    }
+    ["search", "language", "login"].forEach((kind) => {
+      const open = activeUtilityDropdown === kind;
+      if (open !== lastNotified[kind]) {
+        lastNotified[kind] = open;
+        notifyUtilityOpenChange(kind, open);
+      }
+    });
+    if (!isCartControlled) {
+      const open = internalCartOpen && showCart;
+      if (open !== lastNotified.cart) {
+        lastNotified.cart = open;
+        onCartOpenChange?.(open);
+      }
+    }
+  });
+  react.useEffect(() => {
+    if (!effectiveCartOpen) {
+      return;
+    }
+    clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
+    mobileSecondPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileThirdPanelCloseTimeoutRef.current ?? void 0);
+    mobileThirdPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileMenuCloseResetTimeoutRef.current ?? void 0);
+    mobileMenuCloseResetTimeoutRef.current = null;
+    clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
+    focusMobileSecondPanelTimeoutRef.current = null;
+    focusMobilePanelBackOnOpenRef.current = false;
+    clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
+    focusMobileThirdPanelTimeoutRef.current = null;
+    focusMobileThirdPanelBackOnOpenRef.current = false;
+    clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+    resetMobileThirdPanelScrollTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
+    focusReturnToMobileTopLevelItemTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileCategoryTimeoutRef.current ?? void 0);
+    focusReturnToMobileCategoryTimeoutRef.current = null;
+  }, [effectiveCartOpen]);
   react.useEffect(() => {
     if (!showPageOverlay) {
       return;
@@ -533,11 +743,11 @@ const MainNavigation = ({
     }
     const hasFeatureLinks = openPanel.featureLinks != null && openPanel.featureLinks.length > 0;
     const panelColumns = openPanel.columns ?? [];
-    const lastDesktopVisibleColumnIndex = panelColumns.reduce((lastIndex, column, index) => {
+    const lastDesktopVisibleColumnIndex = panelColumns.reduce((lastIndex, column, index2) => {
       if (column.mobileOnly) {
         return lastIndex;
       }
-      return index;
+      return index2;
     }, -1);
     const mobilePanelColumns = panelColumns.filter((column) => !column.desktopOnly);
     const getColumnHeading = (heading, isOverflow) => {
@@ -568,7 +778,7 @@ const MainNavigation = ({
                 type: "button",
                 className: cn.cn(
                   MainNavigation_module["main-navigation__mobile-back-item"],
-                  focus_module.default.focusableInset
+                  index.focusStyles.focusableInset
                 ),
                 onClick: () => closeMobilePanel({
                   isClosing: isMobileSecondPanelClosing,
@@ -576,6 +786,7 @@ const MainNavigation = ({
                   closeTimeoutRef: mobileSecondPanelCloseTimeoutRef,
                   onClosed: () => {
                     const closedTopLevelItemIndex = openTopLevelItemIndex;
+                    notifyRef.current.desktopItem = null;
                     setOpenTopLevelItemIndex(null);
                     setMobileActiveCategoryIndex(null);
                     onDesktopItemToggle?.(null);
@@ -603,7 +814,7 @@ const MainNavigation = ({
                   "ul",
                   {
                     className: MainNavigation_module["main-navigation__mobile-level-2-feature-list"],
-                    children: openPanel.featureLinks.map((link, index) => {
+                    children: openPanel.featureLinks.map((link, index2) => {
                       const href = MainNavigation_utils.toNavigableHref(link.href);
                       const isExternalFeatureLink = MainNavigation_utils.isExternalTarget(link.target);
                       const MobileFeatureIcon = isExternalFeatureLink ? icons.Open : icons.ArrowRight;
@@ -637,7 +848,7 @@ const MainNavigation = ({
                             }
                           )
                         },
-                        `mobile-feature-${index}`
+                        `mobile-feature-${index2}`
                       );
                     })
                   }
@@ -649,39 +860,49 @@ const MainNavigation = ({
               {
                 className: MainNavigation_module["main-navigation__mobile-level-2-category-list"],
                 "aria-hidden": shouldHideLevelTwoFromAssistiveTech || void 0,
-                children: mobilePanelColumns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "li",
-                  {
-                    className: MainNavigation_module["main-navigation__mobile-level-2-category-item"],
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
-                      {
-                        ref: (node) => {
-                          mobileLevelTwoCategoryButtonRefs.current[index] = node;
-                        },
-                        type: "button",
-                        className: cn.cn(
-                          MainNavigation_module["main-navigation__mobile-level-2-category-button"],
-                          focus_module.default.focusableInset
-                        ),
-                        onClick: () => openMobileCategoryPanel(index),
-                        onKeyDown: (event) => {
-                          if (event.key !== "Enter" || isDesktopViewport()) {
-                            return;
-                          }
-                          event.preventDefault();
-                          focusMobileThirdPanelBackOnOpenRef.current = true;
-                          openMobileCategoryPanel(index);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: getColumnHeading(column.heading, column.overflow) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, {})
-                        ]
-                      }
-                    )
-                  },
-                  `mobile-category-${column.heading}-${index}`
-                ))
+                children: mobilePanelColumns.map((column, index$1) => {
+                  const isInCurrentPath = column.links.some(
+                    (link) => MainNavigation_utils.isLinkInCurrentPath(link, currentPathname)
+                  );
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "li",
+                    {
+                      className: MainNavigation_module["main-navigation__mobile-level-2-category-item"],
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          ref: (node) => {
+                            mobileLevelTwoCategoryButtonRefs.current[index$1] = node;
+                          },
+                          type: "button",
+                          className: cn.cn(
+                            MainNavigation_module["main-navigation__mobile-level-2-category-button"],
+                            isInCurrentPath && MainNavigation_module["main-navigation__mobile-level-2-category-button--current"],
+                            index.focusStyles.focusableInset
+                          ),
+                          "aria-current": isInCurrentPath ? "true" : void 0,
+                          onClick: () => openMobileCategoryPanel(index$1),
+                          onKeyDown: (event) => {
+                            if (event.key !== "Enter" || isDesktopViewport()) {
+                              return;
+                            }
+                            event.preventDefault();
+                            focusMobileThirdPanelBackOnOpenRef.current = true;
+                            openMobileCategoryPanel(index$1);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: getColumnHeading(
+                              column.heading,
+                              column.overflow
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, {})
+                          ]
+                        }
+                      )
+                    },
+                    `mobile-category-${column.heading}-${index$1}`
+                  );
+                })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -701,7 +922,7 @@ const MainNavigation = ({
                       type: "button",
                       className: cn.cn(
                         MainNavigation_module["main-navigation__mobile-back-item"],
-                        focus_module.default.focusableInset
+                        index.focusStyles.focusableInset
                       ),
                       onClick: () => closeMobilePanel({
                         isClosing: isMobileThirdPanelClosing,
@@ -736,21 +957,29 @@ const MainNavigation = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__mobile-level-3-list"], children: selectedColumn.links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "li",
-                    {
-                      className: MainNavigation_module["main-navigation__mobile-level-3-item"],
-                      children: renderNavigationLink({
-                        link,
-                        className: cn.cn(
-                          MainNavigation_module["main-navigation__mobile-level-3-link"],
-                          focus_module.default.focusableInset
-                        ),
-                        children: link.label
-                      })
-                    },
-                    `${selectedColumn.heading}-${index}`
-                  )) })
+                  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__mobile-level-3-list"], children: selectedColumn.links.map((link, index$1) => {
+                    const isInCurrentPage = MainNavigation_utils.isLinkInCurrentPage(
+                      link,
+                      currentPathname
+                    );
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "li",
+                      {
+                        className: MainNavigation_module["main-navigation__mobile-level-3-item"],
+                        children: renderNavigationLink({
+                          link,
+                          className: cn.cn(
+                            MainNavigation_module["main-navigation__mobile-level-3-link"],
+                            isInCurrentPage && MainNavigation_module["main-navigation__mobile-level-3-link--current"],
+                            index.focusStyles.focusableInset
+                          ),
+                          ariaCurrent: isInCurrentPage ? "page" : void 0,
+                          children: link.label
+                        })
+                      },
+                      `${selectedColumn.heading}-${index$1}`
+                    );
+                  }) })
                 ] })
               }
             )
@@ -771,7 +1000,7 @@ const MainNavigation = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: MainNavigation_module["main-navigation__panel-heading"], children: getColumnHeading(column.heading, column.overflow) }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__panel-list"], children: column.links.map((link, index) => {
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__panel-list"], children: column.links.map((link, index$1) => {
               const isInCurrentPage = MainNavigation_utils.isLinkInCurrentPage(
                 link,
                 currentPathname
@@ -784,15 +1013,15 @@ const MainNavigation = ({
                     link,
                     className: cn.cn(
                       MainNavigation_module["main-navigation__panel-link"],
-                      focus_module.default.focusableInset,
-                      textDecoration_module.default.underlineLinkOnHover,
+                      index.focusStyles.focusableInset,
+                      index.textDecorationStyles.underlineLinkOnHover,
                       isInCurrentPage && MainNavigation_module["main-navigation__panel-link--current"]
                     ),
                     ariaCurrent: isInCurrentPage ? "page" : void 0,
                     children: link.label
                   })
                 },
-                `${column.heading}-${index}`
+                `${column.heading}-${index$1}`
               );
             }) })
           ]
@@ -803,14 +1032,14 @@ const MainNavigation = ({
         "aside",
         {
           className: cn.cn(
-            elevation_module.default.elevationHigh,
+            index.elevationStyles.elevationHigh,
             MainNavigation_module["main-navigation__panel-column"],
             MainNavigation_module["main-navigation__feature-links"],
             MainNavigation_module["main-navigation__panel-column--last"],
             openPanel.featureLinksHighlighted && MainNavigation_module["main-navigation__panel-column--highlighted"],
             !hasFeatureLinks && MainNavigation_module["main-navigation__feature-links--empty"]
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__feature-list"], children: (openPanel.featureLinks ?? []).map((link, index) => {
+          children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__feature-list"], children: (openPanel.featureLinks ?? []).map((link, index$1) => {
             const href = MainNavigation_utils.toNavigableHref(link.href);
             const isExternalFeatureLink = MainNavigation_utils.isExternalTarget(link.target);
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -821,8 +1050,8 @@ const MainNavigation = ({
                   link: { ...link, href },
                   className: cn.cn(
                     MainNavigation_module["main-navigation__feature-link"],
-                    textDecoration_module.default.underlineLinkOnHover,
-                    focus_module.default.focusableInset
+                    index.textDecorationStyles.underlineLinkOnHover,
+                    index.focusStyles.focusableInset
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     isExternalFeatureLink ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -853,32 +1082,33 @@ const MainNavigation = ({
                   ] })
                 })
               },
-              `feature-${index}`
+              `feature-${index$1}`
             );
           }) })
         }
       )
     ] }) });
   };
-  const renderPrimaryList = () => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__primary-list"], children: items.map((item, index) => {
+  const renderPrimaryList = () => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__primary-list"], children: items.map((item, index$1) => {
     const hasPanel = item.panel != null;
-    const isOpen = openTopLevelItemIndex === index;
+    const isOpen = openTopLevelItemIndex === index$1;
     const isCurrentPathItem = MainNavigation_utils.isItemInCurrentPath(item, currentPathname);
     return /* @__PURE__ */ jsxRuntime.jsx("li", { className: MainNavigation_module["main-navigation__item"], children: hasPanel ? /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref: (node) => {
-          desktopPanelTriggerButtonRefs.current[index] = node;
+          desktopPanelTriggerButtonRefs.current[index$1] = node;
         },
         type: "button",
         className: cn.cn(
           MainNavigation_module["main-navigation__item-toggle"],
-          focus_module.default.focusableInset,
+          index.focusStyles.focusableInset,
           isCurrentPathItem && MainNavigation_module["main-navigation__item-toggle--current"],
           isOpen && MainNavigation_module["main-navigation__item-toggle--open"]
         ),
+        "aria-current": isCurrentPathItem ? "true" : void 0,
         "aria-expanded": isOpen,
-        onClick: () => toggleTopLevelItem(index),
+        onClick: () => toggleTopLevelItem(index$1),
         onKeyDown: (event) => {
           if (event.key === "Enter" && !isDesktopViewport()) {
             focusMobilePanelBackOnOpenRef.current = true;
@@ -898,7 +1128,7 @@ const MainNavigation = ({
       link: item,
       className: cn.cn(
         MainNavigation_module["main-navigation__item-link"],
-        focus_module.default.focusableInset,
+        index.focusStyles.focusableInset,
         isCurrentPathItem && MainNavigation_module["main-navigation__item-link--current"]
       ),
       ariaCurrent: isCurrentPathItem ? "page" : void 0,
@@ -911,16 +1141,31 @@ const MainNavigation = ({
       ref: setHeaderRef,
       className: cn.cn(
         MainNavigation_module["main-navigation"],
-        isDesktopHeaderOpen && MainNavigation_module["main-navigation--open"],
+        isHeaderOpen && MainNavigation_module["main-navigation--open"],
         mobileMenuOpen && MainNavigation_module["main-navigation--menu-open"],
         isMobileMenuClosing && MainNavigation_module["main-navigation--menu-closing"],
         showPageOverlay && MainNavigation_module["main-navigation--overlay"],
-        showPageOverlay && overlay_module.default.overlayStrong,
-        isOverlayClosingOut && overlay_module.default.overlayClosing,
+        showPageOverlay && index.overlayStyles.overlayStrong,
+        isOverlayClosingOut && index.overlayStyles.overlayClosing,
         className
       ),
       ...props,
       onKeyDown: (event) => {
+        if (event.key === "Tab" && activeUtilityDropdown != null) {
+          const focusLoopElements = getUtilityDropdownFocusLoopElements(activeUtilityDropdown);
+          if (focusLoopElements.length > 1) {
+            event.preventDefault();
+            const currentIndex = focusLoopElements.indexOf(
+              document.activeElement
+            );
+            const direction = event.shiftKey ? -1 : 1;
+            const nextIndex = currentIndex === -1 ? event.shiftKey ? focusLoopElements.length - 1 : 0 : (currentIndex + direction + focusLoopElements.length) % focusLoopElements.length;
+            focusLoopElements[nextIndex]?.focus();
+          } else {
+            closeUtilityDropdown();
+          }
+          return;
+        }
         if (event.key === "Tab" && mobileMenuOpen && !isDesktopViewport()) {
           const focusableElements = getMobileFocusableElements();
           if (focusableElements.length > 0) {
@@ -948,7 +1193,12 @@ const MainNavigation = ({
           }
         }
         if (event.key === "Escape") {
+          const utilityDropdownToRestore = activeUtilityDropdown;
           closeMenus();
+          if (utilityDropdownToRestore != null) {
+            const triggerButton = utilityDropdownToRestore === "search" ? searchTriggerRef.current : utilityDropdownToRestore === "language" ? languageTriggerRef.current : loginTriggerRef.current;
+            triggerButton?.focus();
+          }
         }
         props.onKeyDown?.(event);
       },
@@ -962,7 +1212,7 @@ const MainNavigation = ({
               link: organization,
               className: cn.cn(
                 MainNavigation_module["main-navigation__organization-link"],
-                focus_module.default.focusable,
+                index.focusStyles.focusable,
                 organization.current && MainNavigation_module["main-navigation__organization-link--current"]
               ),
               ariaCurrent: organization.current ? "page" : void 0,
@@ -973,7 +1223,7 @@ const MainNavigation = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MainNavigation_module["main-navigation__navbar"], children: [
           renderUtilityLink({
             href: MainNavigation_utils.toNavigableHref(logoHref),
-            className: cn.cn(MainNavigation_module["main-navigation__logo"], focus_module.default.focusable),
+            className: cn.cn(MainNavigation_module["main-navigation__logo"], index.focusStyles.focusable),
             "aria-label": logoAriaLabel,
             children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: defaultLogoSrc, alt: "", "aria-hidden": "true" })
           }),
@@ -1000,48 +1250,116 @@ const MainNavigation = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MainNavigation_module["main-navigation__icon-nav"], children: [
-            showLanguageSelector && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                className: cn.cn(
-                  MainNavigation_module["main-navigation__icon-nav-item"],
-                  focus_module.default.focusableInset
-                ),
-                "aria-label": languageSelectorLabel,
-                onClick: onLanguageSelectorClick,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(icons.Globe, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: MainNavigation_module["main-navigation__icon-nav-label"], children: languageSelectorLabel })
-                ]
-              }
-            ),
-            showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                className: cn.cn(
-                  MainNavigation_module["main-navigation__icon-nav-item"],
-                  focus_module.default.focusableInset
+            showLanguage && currentLanguage != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MainNavigation_module["main-navigation__utility"], children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  ref: languageTriggerRef,
+                  type: "button",
+                  className: cn.cn(
+                    MainNavigation_module["main-navigation__icon-nav-item"],
+                    isLanguageOpen && MainNavigation_module["main-navigation__icon-nav-item--active"],
+                    index.focusStyles.focusableInset
+                  ),
+                  "aria-expanded": isLanguageOpen,
+                  "aria-controls": isLanguageOpen ? languageDropdownId : void 0,
+                  onClick: handleLanguageClick,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.Globe, { "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: MainNavigation_module["main-navigation__icon-nav-label"],
+                        children: currentLanguage.code.toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: MainNavigation_module["main-navigation__sr-only"], children: languageAnnouncements.map((announcement, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                      index2 > 0 ? " " : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { lang: announcement.lang, children: announcement.text })
+                    ] }, announcement.lang)) })
+                  ]
+                }
+              ),
+              isLanguageOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: MainNavigation_module["main-navigation__dropdown-caret"]
+                  }
                 ),
-                "aria-label": searchLabel,
-                onClick: onSearchClick,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: MainNavigation_module["main-navigation__icon-nav-label"], children: searchLabel })
-                ]
-              }
-            ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    id: languageDropdownId,
+                    className: cn.cn(
+                      MainNavigation_module["main-navigation__dropdown"],
+                      MainNavigation_module["main-navigation__dropdown--language"],
+                      index.elevationStyles.elevationMedium
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: MainNavigation_module["main-navigation__language-list"], children: alternativeLanguages.map((language) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "li",
+                      {
+                        className: MainNavigation_module["main-navigation__language-list-item"],
+                        children: renderLanguageLink({
+                          href: MainNavigation_utils.toNavigableHref(language.href),
+                          lang: language.code,
+                          "aria-label": language.ariaLabel ?? MainNavigation_utils.languageLinkAriaLabels[language.code],
+                          className: cn.cn(
+                            MainNavigation_module["main-navigation__language-link"],
+                            index.focusStyles.focusable
+                          ),
+                          children: language.code.toUpperCase()
+                        })
+                      },
+                      language.code
+                    )) })
+                  }
+                )
+              ] })
+            ] }),
+            showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MainNavigation_module["main-navigation__utility"], children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  ref: searchTriggerRef,
+                  type: "button",
+                  className: cn.cn(
+                    MainNavigation_module["main-navigation__icon-nav-item"],
+                    isSearchOpen && MainNavigation_module["main-navigation__icon-nav-item--active"],
+                    index.focusStyles.focusableInset
+                  ),
+                  "aria-label": searchLabel,
+                  "aria-expanded": isSearchOpen,
+                  "aria-controls": isSearchOpen ? searchDropdownId : void 0,
+                  onClick: handleSearchClick,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: MainNavigation_module["main-navigation__icon-nav-label"], children: searchLabel })
+                  ]
+                }
+              ),
+              isSearchOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: MainNavigation_module["main-navigation__dropdown-caret"]
+                }
+              )
+            ] }),
             showCart && /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 className: cn.cn(
                   MainNavigation_module["main-navigation__icon-nav-item"],
-                  focus_module.default.focusableInset
+                  isCartOpen && MainNavigation_module["main-navigation__icon-nav-item--active"],
+                  index.focusStyles.focusableInset
                 ),
                 "aria-label": cartAccessibleLabel,
-                onClick: onCartClick,
+                "aria-expanded": isCartOpen,
+                onClick: handleCartClick,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(icons.Cart, {}),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: MainNavigation_module["main-navigation__icon-nav-label"], children: cartLabel }),
@@ -1056,16 +1374,53 @@ const MainNavigation = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button.Button,
-              {
-                href: MainNavigation_utils.toNavigableHref(loginHref),
-                size: "small",
-                renderLink: renderUtilityLink,
-                children: loginLabel
-              }
-            )
+            showLogin && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MainNavigation_module["main-navigation__utility"], children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button.Button,
+                {
+                  ref: loginTriggerRef,
+                  size: "small",
+                  "aria-expanded": isLoginOpen,
+                  "aria-controls": isLoginOpen ? loginDropdownId : void 0,
+                  onClick: handleLoginClick,
+                  children: loginLabel
+                }
+              ),
+              isLoginOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: MainNavigation_module["main-navigation__dropdown-caret"]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    id: loginDropdownId,
+                    className: cn.cn(
+                      MainNavigation_module["main-navigation__dropdown"],
+                      MainNavigation_module["main-navigation__dropdown--login"],
+                      index.elevationStyles.elevationMedium
+                    ),
+                    children: loginDropdownContent
+                  }
+                )
+              ] })
+            ] })
           ] }),
+          showSearch && isSearchOpen && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: searchDropdownId,
+              className: cn.cn(
+                MainNavigation_module["main-navigation__dropdown"],
+                MainNavigation_module["main-navigation__dropdown--search"],
+                index.elevationStyles.elevationMedium
+              ),
+              children: searchDropdownContent
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -1074,7 +1429,7 @@ const MainNavigation = ({
               className: cn.cn(
                 MainNavigation_module["main-navigation__menu-toggle"],
                 mobileMenuOpen && MainNavigation_module["main-navigation__menu-toggle--open"],
-                focus_module.default.focusableInset
+                index.focusStyles.focusableInset
               ),
               "aria-label": mobileMenuOpen ? mobileMenuCloseAriaLabel : mobileMenuOpenAriaLabel,
               "aria-expanded": mobileMenuOpen,
@@ -1085,6 +1440,16 @@ const MainNavigation = ({
         ] }),
         !mobileMenuOpen && renderPanel(
           cn.cn(MainNavigation_module["main-navigation__panel"], MainNavigation_module["main-navigation__panel--desktop"])
+        ),
+        showCart && /* @__PURE__ */ jsxRuntime.jsx(
+          Drawer.Drawer,
+          {
+            open: isCartOpen,
+            onOpenChange: handleCartOpenChange,
+            title: cartLabel,
+            size: "small",
+            children: cartContent
+          }
         )
       ]
     }