@comicrelief/component-library 8.54.1 → 8.55.0

package/dist/components/Organisms/Header2026/Header2026.style.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchIconWrapperDesktop = exports.MobileMenuOverlay = exports.MobileBackHeader = exports.InnerWrapper = exports.Header2026Wrapper = exports.DonateButtonTopBarWrapper = exports.ButtonsAndIcons = exports.Brand = exports.BackChevron = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
+var _animations = require("../../../theme/shared/animations");
+const Header2026Wrapper = exports.Header2026Wrapper = _styledComponents.default.header.withConfig({
+  displayName: "Header2026style__Header2026Wrapper",
+  componentId: "sc-1do20kd-0"
+})(["position:relative;z-index:2;background-color:", ";border:1px solid ", ";box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);border-radius:16px;@media ", "{height:66px;margin-top:18px;&:has(li:hover),&:has(li:focus-within){border-radius:16px 16px 0 0;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('white');
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('grey_light');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('L');
+});
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__InnerWrapper",
+  componentId: "sc-1do20kd-1"
+})(["display:flex;align-items:center;height:100%;cursor:pointer;max-width:", ";padding:10px;position:relative;z-index:2;@media ", "{padding:10px 16px 10px 14px;}@media ", "{padding:10px 16px;}@media ", "{margin:0 auto;gap:24px;}"], _containers.default.large, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('S');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints2026('L');
+});
+
+// size of "Comic Relief" logo is set with props on LogoLinked2026
+const Brand = exports.Brand = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__Brand",
+  componentId: "sc-1do20kd-2"
+})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('L');
+});
+const ButtonsAndIcons = exports.ButtonsAndIcons = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__ButtonsAndIcons",
+  componentId: "sc-1do20kd-3"
+})(["margin-left:auto;display:flex;"]);
+const DonateButtonTopBarWrapper = exports.DonateButtonTopBarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__DonateButtonTopBarWrapper",
+  componentId: "sc-1do20kd-4"
+})(["display:flex;justify-content:center;a{", ";padding:8px;border-radius:8px;font-family:Montserrat;font-size:0.875rem;width:100%;height:inherit;transition:width 0.4s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);", ";}@media ", "{padding:8px 12px;}@media ", "{font-size:1rem;padding:10px 16px;}}"], _animations.pulseOutAnimation, _animations.pulseInAnimation, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.breakpoints2026('S');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('L');
+});
+const SearchIconWrapperDesktop = exports.SearchIconWrapperDesktop = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__SearchIconWrapperDesktop",
+  componentId: "sc-1do20kd-5"
+})(["display:none;@media ", "{position:relative;display:flex;align-items:center;width:auto;margin-right:0px;right:0px;background-color:", ";img{margin-right:24px;width:18px;height:18px;transition:transform 0.2s ease;transform-origin:center;}a{overflow:visible;display:block;}&:hover img,&:focus-within img{transform:scale(1.33);}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.breakpoints2026('L');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.color('white');
+});
+const MobileBackHeader = exports.MobileBackHeader = _styledComponents.default.button.withConfig({
+  displayName: "Header2026style__MobileBackHeader",
+  componentId: "sc-1do20kd-6"
+})(["display:flex;align-items:center;gap:12px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;color:", ";@media ", "{display:none;}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('black');
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoints2026('L');
+});
+const BackChevron = exports.BackChevron = _styledComponents.default.span.withConfig({
+  displayName: "Header2026style__BackChevron",
+  componentId: "sc-1do20kd-7"
+})(["display:flex;align-items:center;justify-content:center;width:8px;transform:rotate(180deg);img{width:100%;height:auto;display:block;}"]);
+const MobileMenuOverlay = exports.MobileMenuOverlay = _styledComponents.default.div.withConfig({
+  displayName: "Header2026style__MobileMenuOverlay",
+  componentId: "sc-1do20kd-8"
+})(["display:", ";position:fixed;top:0;left:0;right:0;bottom:0;background-color:", ";z-index:1;@media ", "{display:none;}"], _ref14 => {
+  let {
+    isVisible
+  } = _ref14;
+  return isVisible ? 'block' : 'none';
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('grey_medium');
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.breakpoints2026('L');
+});

package/dist/components/Organisms/Header2026/Navs/Navs.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
+var _Icon = _interopRequireDefault(require("../../../Atoms/SocialIcons/Icon/Icon"));
+var _breakpoints = require("../../../../theme/shared/breakpoints2026");
+var _navHelper = require("../../../../utils/navHelper");
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
+var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
+var _PrimaryNavItem = _interopRequireDefault(require("./PrimaryNavItem"));
+var _searchIcon = _interopRequireDefault(require("../assets/search-icon.svg"));
+var _urlHelper = _interopRequireDefault(require("../../../../utils/urlHelper"));
+var _Navs = require("./Navs.style");
+const Navs = _ref => {
+  let {
+    navItems = {},
+    characterLimit,
+    isMenuOpen,
+    setIsMenuOpen,
+    devMode = false,
+    onSubMenuChange = () => {},
+    onTertiaryMenuChange = () => {}
+  } = _ref;
+  const {
+    headerPageGroups
+  } = navItems;
+  const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)({});
+  const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < _breakpoints.breakpointValues2026.L;
+    }
+    return false;
+  });
+  const [processedItems, setProcessedItems] = (0, _react.useState)(null);
+  const [isTertiaryOpen, setIsTertiaryOpen] = (0, _react.useState)(false);
+  let theseGroups = null;
+
+  // Check if any submenu is currently open
+  const isSubMenuOpen = Object.values(openedSubMenu).some(v => v);
+
+  // Close all submenus (used by back button in header)
+  const closeSubMenus = (0, _react.useCallback)(() => {
+    setOpenedSubMenu({});
+  }, []);
+
+  // Handle tertiary menu changes from PrimaryNavItem
+  const handleTertiaryMenuChange = (0, _react.useCallback)((isOpen, parentName, closeFunction) => {
+    setIsTertiaryOpen(isOpen);
+    onTertiaryMenuChange(isOpen && isNotDesktop, parentName, closeFunction);
+  }, [isNotDesktop, onTertiaryMenuChange]);
+
+  // Notify parent when submenu state changes, passing close function
+  (0, _react.useEffect)(() => {
+    onSubMenuChange(isSubMenuOpen && isNotDesktop, closeSubMenus);
+  }, [isSubMenuOpen, isNotDesktop, onSubMenuChange, closeSubMenus]);
+  const toggleBurgerMenu = e => {
+    e.preventDefault();
+    setIsMenuOpen(!isMenuOpen);
+
+    // If we've just closed the nav, collapse any open submenus and reset tertiary state:
+    if (isMenuOpen) {
+      setOpenedSubMenu({});
+      setIsTertiaryOpen(false);
+      onTertiaryMenuChange(false, null, null);
+    }
+  };
+
+  // Toggle the open/not-open value of the specific submenu passed
+  const toggleSubMenu = (e, item) => {
+    e.preventDefault();
+    setOpenedSubMenu({
+      [item]: !openedSubMenu[item]
+    });
+  };
+
+  // Called by eventHandler to reset the nav on a specific mouse interaction
+  const resetMoreNavMouse = () => {
+    // Remove active 'opened' state for any open More Nav submenus
+    setOpenedSubMenu({});
+    // And also remove the focus state so the 'focus-within' nav rules don't apply:
+    document.activeElement.blur();
+  };
+
+  // Process the nav items on initial mount:
+  (0, _react.useMemo)(() => {
+    if (!headerPageGroups) return;
+    // Divide up nav items accordingly
+    const theseItems = (0, _navHelper.MoreNavPreProcessNew)(headerPageGroups, characterLimit);
+    setProcessedItems(theseItems);
+  }, [headerPageGroups, characterLimit]);
+
+  // Custom function to let us update the nav dynamically:
+  const screenResizeNav = (0, _react.useCallback)(() => {
+    // Grab the current width:
+    const currentScreenWidth = typeof window !== 'undefined' ? window.innerWidth : null;
+
+    // Compare to our breakpoint:
+    const isCurrentlyNotDesktop = currentScreenWidth < _breakpoints.breakpointValues2026.L;
+
+    // Only if the screen size has *changed*, update the state:
+    if (currentScreenWidth !== null && isNotDesktop !== isCurrentlyNotDesktop) {
+      // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
+      if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
+        document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
+      }
+
+      // Update our desktop flag to prevent any further calls:
+      setIsNotDesktop(isCurrentlyNotDesktop);
+    }
+  }, [isNotDesktop, processedItems]);
+
+  // Hook into browser's own onresize event to call our custom wrapper function:
+  (0, _react.useEffect)(() => {
+    if (typeof window !== 'undefined') window.onresize = screenResizeNav;
+  }, [screenResizeNav]);
+
+  // Once we've processed the items, assign according to breakpoint; sub-desktop 'Nav'
+  // breakpoints use 'raw' unprocessed header page groups, Desktop ('Nav' breakpoint and up)
+  // uses the divided-up versions:
+  if (processedItems) theseGroups = isNotDesktop ? headerPageGroups : processedItems.standardGroups;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Navs.Navigation, {
+    "data-testid": "Nav",
+    "aria-label": "main-menu",
+    isMenuOpen: isMenuOpen,
+    role: "navigation",
+    id: "main-nav"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    id: "main-menu",
+    tag: "h2"
+  }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_Navs.PrimaryMenuWrapper, {
+    "data-testid": "PrimaryMenuWrapper"
+  }, processedItems &&
+  /*#__PURE__*/
+  // First level of the navigation (ul tag): Parent
+  _react.default.createElement(_Navs.PrimaryMenu, {
+    "data-testid": "PrimaryMenu",
+    role: "menubar"
+  }, theseGroups.map((group, index) => {
+    /* Generate an ID from the primary page name */
+    const thisID = group.primaryPageName.toLowerCase().replace(/\s+/g, '-');
+    /* Determine which field represents our url path */
+    let thisUrl = (0, _navHelper.NavHelperPrimary)(group);
+    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener' || undefined;
+    /* Get all column links for submenu */
+    const columnLinks = (0, _navHelper.getColumnLinks)(group);
+    const hasSubMenu = columnLinks.length > 0;
+    const hasPopUp = hasSubMenu ? 'true' : null;
+    thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
+
+    // Renders the primary page as the parent; a button for the dropdown
+    // on mobile, a clickable LINK on desktop but hover to reveal the submenu:
+    return (
+      /*#__PURE__*/
+      // Secondary Menu is nested inside PrimaryNavItem
+      _react.default.createElement(_PrimaryNavItem.default, {
+        thisID: thisID,
+        key: group.id,
+        index: index,
+        hasSubMenu: hasSubMenu,
+        openedSubMenu: openedSubMenu,
+        toggleSubMenu: toggleSubMenu,
+        hasPopUp: hasPopUp,
+        isNotDesktop: isNotDesktop,
+        thisUrl: thisUrl,
+        group: group,
+        navHelperNew: _navHelper.NavHelperNew,
+        internalLinkHelper: _internalLinkHelper.InternalLinkHelper,
+        relNoopener: relNoopener,
+        devMode: devMode,
+        onTertiaryMenuChange: handleTertiaryMenuChange,
+        isTertiaryOpenGlobal: isTertiaryOpen,
+        isSubMenuOpenGlobal: isSubMenuOpen
+      })
+    );
+  }), !isSubMenuOpen && !isTertiaryOpen && /*#__PURE__*/_react.default.createElement(_Navs.SearchWrapperMobile, null, /*#__PURE__*/_react.default.createElement(_Navs.SearchLinkMobile, {
+    href: (0, _urlHelper.default)('/search', devMode)
+  }, "Search", /*#__PURE__*/_react.default.createElement(_Navs.SearchIconWrapperMobile, {
+    "data-testid": "SearchIconWrapperMobile"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _searchIcon.default,
+    title: "Search",
+    target: "self",
+    role: "button",
+    href: (0, _urlHelper.default)('/search', devMode),
+    brand: "comicrelief",
+    tabIndex: "0",
+    id: "search",
+    isHeader: true
+  })))))), isMenuOpen && !isTertiaryOpen && /*#__PURE__*/_react.default.createElement(_Navs.DonateButtonMobileModalWrapper, {
+    "data-testid": "donate-button--mobile"
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    color: "red",
+    type: "button",
+    href: "https://donation.comicrelief.com/"
+  }, "Donate"))), /*#__PURE__*/_react.default.createElement(_BurgerMenu.default, {
+    "data-testid": "BurgerMenu",
+    toggle: toggleBurgerMenu,
+    isMenuOpen: isMenuOpen
+  }));
+};
+var _default = exports.default = Navs;

package/dist/components/Organisms/Header2026/Navs/Navs.style.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchWrapperMobile = exports.SearchLinkMobile = exports.SearchIconWrapperMobile = exports.PrimaryMenuWrapper = exports.PrimaryMenu = exports.Navigation = exports.DonateButtonMobileModalWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+const Navigation = exports.Navigation = _styledComponents.default.nav.withConfig({
+  displayName: "Navsstyle__Navigation",
+  componentId: "sc-1hd9a50-0"
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media ", "{", ";position:static;top:0;display:block;margin:0;width:100%;height:100%;box-shadow:none;}> h2{", ";}"], _ref => {
+  let {
+    isMenuOpen
+  } = _ref;
+  return isMenuOpen ? 'block' : 'none';
+}, (0, _zIndex.default)('higher'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('L');
+}, (0, _zIndex.default)('medium'), _hideVisually.default);
+const PrimaryMenuWrapper = exports.PrimaryMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__PrimaryMenuWrapper",
+  componentId: "sc-1hd9a50-1"
+})(["background-color:", ";box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);border-radius:16px;overflow:hidden;position:static;@media ", "{box-shadow:none;border-radius:0;height:100%;display:flex;justify-content:center;align-items:center;overflow:visible;}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('white');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('L');
+});
+const PrimaryMenu = exports.PrimaryMenu = _styledComponents.default.ul.withConfig({
+  displayName: "Navsstyle__PrimaryMenu",
+  componentId: "sc-1hd9a50-2"
+})(["background-color:transparent;list-style:none outside;padding:0;margin:0;width:100%;height:100%;position:relative border:1px solid green;@media ", "{position:static;display:flex;justify-content:center;align-items:center;gap:24px;width:100%;height:100%;background-color:", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('L');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.color('white');
+});
+const DonateButtonMobileModalWrapper = exports.DonateButtonMobileModalWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__DonateButtonMobileModalWrapper",
+  componentId: "sc-1hd9a50-3"
+})(["display:block;background-color:inherit;margin-top:48px;width:100%;a{box-sizing:border-box;display:block;text-align:center;border-radius:16px;width:100%;margin:0;font-family:Montserrat;height:auto;padding:18px 0;&:hover,&:focus{width:100%;box-shadow:0 5px 20px 0 rgba(0,0,0,0.05);}}@media ", "{display:none;}"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('L');
+});
+const SearchWrapperMobile = exports.SearchWrapperMobile = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__SearchWrapperMobile",
+  componentId: "sc-1hd9a50-4"
+})(["display:block;width:100%;border-top:1px solid ", ";@media ", "{display:none;}"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.color('grey_medium');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('L');
+});
+const SearchLinkMobile = exports.SearchLinkMobile = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "Navsstyle__SearchLinkMobile",
+  componentId: "sc-1hd9a50-5"
+})(["display:flex;align-items:center;justify-content:space-between;padding:25px;width:100%;text-decoration:none;font-family:Montserrat;font-weight:600;color:", ";transition:color 0.2s ease;outline-offset:-3px;&:hover,&:focus{color:", ";background-color:", ";}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.color('black');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.color('red');
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('grey_extra_light');
+});
+const SearchIconWrapperMobile = exports.SearchIconWrapperMobile = _styledComponents.default.div.withConfig({
+  displayName: "Navsstyle__SearchIconWrapperMobile",
+  componentId: "sc-1hd9a50-6"
+})(["overflow:visible;img{width:18px;height:18px;transition:transform 0.2s ease;transform-origin:center;}a{overflow:visible;display:block;}&:hover img,&:focus-within img{transform:scale(1.33);}@media ", "{display:none;}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoints2026('L');
+});

package/dist/components/Organisms/Header2026/Navs/PrimaryNavItem.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _chevronIcon = _interopRequireDefault(require("../assets/chevron-icon.svg"));
+var _urlHelper = _interopRequireDefault(require("../../../../utils/urlHelper"));
+var _PrimaryNavItem = require("./PrimaryNavItem.style");
+// Helper to group tertiary links (pageLevel: false)
+// so that they sit under their parent secondary links (pageLevel: true)
+const groupTertiaryLinks = links => {
+  if (!links) return {};
+  const groups = {};
+  let currentSecondaryId = null;
+  links.forEach(link => {
+    if (link.pageLevel) {
+      currentSecondaryId = link.id;
+      groups[currentSecondaryId] = [];
+    } else if (currentSecondaryId) {
+      groups[currentSecondaryId].push(link);
+    }
+  });
+  return groups;
+};
+const PrimaryNavItem = _ref => {
+  let {
+    thisID,
+    relNoopener,
+    hasSubMenu,
+    index,
+    openedSubMenu,
+    isNotDesktop,
+    hasPopUp,
+    thisUrl,
+    toggleSubMenu,
+    group,
+    navHelperNew,
+    internalLinkHelper,
+    devMode = false,
+    onTertiaryMenuChange,
+    isTertiaryOpenGlobal = false,
+    isSubMenuOpenGlobal = false,
+    ...rest
+  } = _ref;
+  const [openTertiaryMenu, setOpenTertiaryMenu] = (0, _react.useState)(null);
+  const handleTertiaryToggle = (e, linkId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const isOpening = openTertiaryMenu !== linkId;
+    setOpenTertiaryMenu(isOpening ? linkId : null);
+    if (onTertiaryMenuChange) {
+      onTertiaryMenuChange(isOpening, isOpening ? group.primaryPageName : null, () => {
+        setOpenTertiaryMenu(null);
+        onTertiaryMenuChange(false, null, null);
+      });
+    }
+  };
+
+  // Reset tertiary menu state when the secondary submenu closes
+  (0, _react.useEffect)(() => {
+    if (!openedSubMenu[thisID]) {
+      setOpenTertiaryMenu(null);
+    }
+  }, [openedSubMenu, thisID]);
+
+  // Collect all column links into a single array for iteration
+  const allColumnLinks = (0, _react.useMemo)(() => [group.column1PageLinks, group.column2PageLinks, group.column3PageLinks], [group.column1PageLinks, group.column2PageLinks, group.column3PageLinks]);
+
+  // Group tertiary links for all columns (run once per data change)
+  const tertiaryGroups = (0, _react.useMemo)(() => allColumnLinks.reduce((acc, links) => ({
+    ...acc,
+    ...groupTertiaryLinks(links)
+  }), {}), [allColumnLinks]);
+
+  // All links flattened (run once per data change)
+  const allLinks = (0, _react.useMemo)(() => allColumnLinks.flatMap(links => links || []), [allColumnLinks]);
+
+  // Check if a secondary link has tertiary children
+  const hasTertiaryChildren = linkId => {
+    var _tertiaryGroups$linkI;
+    return ((_tertiaryGroups$linkI = tertiaryGroups[linkId]) === null || _tertiaryGroups$linkI === void 0 ? void 0 : _tertiaryGroups$linkI.length) > 0;
+  };
+
+  // Get the currently active tertiary menu data
+  const activeTertiaryLinks = tertiaryGroups[openTertiaryMenu] || [];
+
+  // Find the parent link (pageLevel: true) for the currently open tertiary menu
+  const activeParentLink = (0, _react.useMemo)(() => openTertiaryMenu ? allLinks.find(link => link.id === openTertiaryMenu) : null, [openTertiaryMenu, allLinks]);
+
+  // Pre-process URLs for all links (run once per data change)
+  const processedLinkUrls = (0, _react.useMemo)(() => {
+    const urls = {};
+    allLinks.forEach(link => {
+      urls[link.id] = internalLinkHelper(navHelperNew(link));
+    });
+    return urls;
+  }, [allLinks, navHelperNew, internalLinkHelper]);
+
+  // Helper to render a column's links
+  const renderColumnLinks = (links, ColumnComponent) => {
+    if (!links) return null;
+    return links.map(child => {
+      // On mobile, only show secondary links (pageLevel: true)
+      // Tertiary links (pageLevel: false) will be shown in the third modal
+      if (isNotDesktop && !child.pageLevel) {
+        return null;
+      }
+      const linkId = child.id;
+      const hasChildren = hasTertiaryChildren(linkId);
+      return /*#__PURE__*/_react.default.createElement(ColumnComponent, {
+        key: child.id,
+        $isSecondary: child.pageLevel
+      }, hasChildren && isNotDesktop ? /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavLinkWithChildren, {
+        href: "#",
+        inline: true,
+        role: "menuitem",
+        onClick: e => handleTertiaryToggle(e, linkId),
+        $isSecondary: child.pageLevel
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.pageName), /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+        src: _chevronIcon.default,
+        alt: "chevron icon"
+      }))) : /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavLink, {
+        href: (0, _urlHelper.default)(processedLinkUrls[linkId], devMode),
+        inline: true,
+        role: "menuitem",
+        $isSecondary: child.pageLevel
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, child.pageName)));
+    });
+  };
+
+  // Determine what to render for the primary nav link
+  const renderPrimaryLink = () => {
+    // Mobile: Hide NavLink when secondary or tertiary menu is open
+    if (isNotDesktop) {
+      if (isTertiaryOpenGlobal || isSubMenuOpenGlobal) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavLink, {
+        "data-testid": "NavLink",
+        href: hasPopUp ? '#' : (0, _urlHelper.default)(thisUrl, devMode),
+        inline: true,
+        rel: relNoopener,
+        "aria-expanded": !!openedSubMenu[thisID],
+        "aria-haspopup": hasPopUp,
+        onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
+        role: "button",
+        isExpanded: !!openedSubMenu[thisID]
+      }, group.primaryPageName, hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.ChevronWrapper, {
+        "data-testid": "ChevronWrapper"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: _chevronIcon.default,
+        alt: "chevron icon"
+      })));
+    }
+
+    // Desktop: Always show StyledText with DesktopNavLink
+    return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.StyledText, {
+      "data-testid": "StyledText"
+    }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.DesktopNavLink, Object.assign({
+      "data-testid": "DesktopNavLink",
+      href: (0, _urlHelper.default)(thisUrl, devMode),
+      inline: true,
+      rel: relNoopener,
+      "aria-haspopup": hasPopUp,
+      hasSubMenu: hasSubMenu
+    }, rest), group.primaryPageName, hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.ChevronWrapper, {
+      "data-testid": "ChevronWrapper"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _chevronIcon.default,
+      alt: "chevron down icon"
+    }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.StyledNavItem, {
+    "data-testid": "StyledNavItem",
+    role: "none",
+    index: index,
+    isSubMenuOpen: !!openedSubMenu,
+    isTertiaryOpen: isTertiaryOpenGlobal
+  }, renderPrimaryLink(), hasSubMenu && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryNavMenu, {
+    role: "list",
+    isSubMenuOpen: !!openedSubMenu[thisID],
+    isTertiaryOpen: isTertiaryOpenGlobal
+  }, isNotDesktop && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryMenuPrimaryLink, null, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.SecondaryMenuPrimaryLinkAnchor, {
+    href: (0, _urlHelper.default)(thisUrl, devMode),
+    inline: true,
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, group.primaryPageName))), allColumnLinks.map((links, colIndex) => {
+    var _group$column3PageCar;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(_PrimaryNavItem.ColumnWrapper, {
+        key: colIndex
+      }, colIndex === 2 && !isNotDesktop && ((_group$column3PageCar = group.column3PageCards) === null || _group$column3PageCar === void 0 ? void 0 : _group$column3PageCar.length) > 0 ? group.column3PageCards.map(card => {
+        var _card$image;
+        return /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCard, {
+          key: card.id,
+          href: (0, _urlHelper.default)(card.primaryPageUrlIfExternal || '', devMode)
+        }, ((_card$image = card.image) === null || _card$image === void 0 ? void 0 : _card$image.url) && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardImage, null, /*#__PURE__*/_react.default.createElement("img", {
+          src: card.image.url,
+          alt: card.image.title || card.pageName
+        })), /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardContent, null, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardTitle, null, card.pageName), card.pageDescription && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.NavCardDescription, null, card.pageDescription)));
+      }) : renderColumnLinks(links, _PrimaryNavItem.SecondaryNavItem))
+    );
+  })), hasSubMenu && isNotDesktop && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavMenu, {
+    isOpen: openTertiaryMenu !== null
+  }, activeParentLink && /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavItem, {
+    $isParent: true
+  }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavLink, {
+    href: (0, _urlHelper.default)(processedLinkUrls[activeParentLink.id], devMode),
+    inline: true,
+    role: "menuitem",
+    $isParent: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, activeParentLink.pageName))), activeTertiaryLinks.map(tertiaryLink => /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavItem, {
+    key: tertiaryLink.id
+  }, /*#__PURE__*/_react.default.createElement(_PrimaryNavItem.TertiaryNavLink, {
+    href: (0, _urlHelper.default)(processedLinkUrls[tertiaryLink.id], devMode),
+    inline: true,
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, tertiaryLink.pageName))))));
+};
+var _default = exports.default = PrimaryNavItem;