@digital-b2c/coreui-kit 0.12.0 → 0.13.1

package/dist/index.cjs

@@ -405,11 +405,12 @@ var Button_module_default = {
   ghost: "Button_module_ghost",
   nofill: "Button_module_nofill",
   nofillblack: "Button_module_nofillblack",
+  navnofillblack: "Button_module_navnofillblack",
+  active: "Button_module_active",
   grey: "Button_module_grey",
   shiny: "Button_module_shiny",
   rotateGradient: "Button_module_rotateGradient",
   tabbutton: "Button_module_tabbutton",
-  active: "Button_module_active",
   icon: "Button_module_icon",
   logo: "Button_module_logo"
 };
@@ -513,15 +514,15 @@ var useViewPort = () => {
     window.addEventListener("resize", onWindowResizeDebounce);
     return () => window.removeEventListener("resize", onWindowResizeDebounce);
   }, [onWindowResizeDebounce]);
-  const is = (what, range) => {
+  const is = (what, range2) => {
     const isArray = Array.isArray(what);
-    if (!range && !isArray) {
+    if (!range2 && !isArray) {
       return what === device;
     }
-    if (!range && isArray) {
+    if (!range2 && isArray) {
       return device ? what.includes(device) : false;
     }
-    const list = range === "above" ? ORDER : [...ORDER].reverse();
+    const list = range2 === "above" ? ORDER : [...ORDER].reverse();
     const devices = getOtherDevices(list, what, true);
     return device && devices.includes(device);
   };
@@ -1120,6 +1121,31 @@ var InfoCard2 = Object.assign(InfoCard, {
   Subtitle: InfoCardSubtitle
 });
 
+// src/utils/getPaginationRange.ts
+var DOTS = "...";
+var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+var getPaginationRange = (totalPages, currentPage, siblingCount = 1, boundaryCount = 1) => {
+  const totalPageNumbers = siblingCount * 2 + boundaryCount * 2 + 3;
+  if (totalPageNumbers >= totalPages) {
+    return range(1, totalPages);
+  }
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, boundaryCount + 1);
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - boundaryCount);
+  const showLeftDots = leftSiblingIndex > boundaryCount + 2;
+  const showRightDots = rightSiblingIndex < totalPages - boundaryCount - 1;
+  const firstPages = range(1, boundaryCount);
+  const lastPages = range(totalPages - boundaryCount + 1, totalPages);
+  if (!showLeftDots && showRightDots) {
+    const leftRange = range(1, boundaryCount + siblingCount * 2 + 2);
+    return [...leftRange, DOTS, ...lastPages];
+  }
+  if (showLeftDots && !showRightDots) {
+    const rightRange = range(totalPages - (boundaryCount + siblingCount * 2 + 1), totalPages);
+    return [...firstPages, DOTS, ...rightRange];
+  }
+  return [...firstPages, DOTS, ...range(leftSiblingIndex, rightSiblingIndex), DOTS, ...lastPages];
+};
+
 // src/components/Pagination/Pagination.module.scss
 var Pagination_module_default = {
   pagination: "Pagination_module_pagination",
@@ -1127,8 +1153,10 @@ var Pagination_module_default = {
   prev: "Pagination_module_prev",
   pages: "Pagination_module_pages",
   page: "Pagination_module_page",
+  "no-border": "Pagination_module_no-border",
+  number: "Pagination_module_number",
   active: "Pagination_module_active",
-  number: "Pagination_module_number"
+  dots: "Pagination_module_dots"
 };
 var Pagination = ({
   className,
@@ -1138,6 +1166,10 @@ var Pagination = ({
   hasNumber = false,
   disableArrows = false,
   onPageChange,
+  showEllipsis,
+  boundaryCount,
+  siblingCount,
+  hidePagesBorder = false,
   renderLink
 }) => {
   const [activePage, setActivePage] = React66.useState(currentPage);
@@ -1172,6 +1204,7 @@ var Pagination = ({
   };
   const prevPage = activePage === 1 ? loop ? totalPages : 1 : activePage - 1;
   const nextPage = activePage === totalPages ? loop ? 1 : totalPages : activePage + 1;
+  const pageItems = showEllipsis ? getPaginationRange(totalPages, activePage, siblingCount, boundaryCount) : Array.from({ length: totalPages }, (_, i) => i + 1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx16__default.default(Pagination_module_default.pagination, className), children: [
     !disableArrows && (renderLink ? renderLink({
       page: prevPage,
@@ -1188,11 +1221,15 @@ var Pagination = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "filledChevronLeft" })
       }
     )),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Pagination_module_default.pages, children: Array.from({ length: totalPages }, (_, i) => {
-      const page = i + 1;
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Pagination_module_default.pages, children: pageItems.map((item, index) => {
+      if (item === "...") {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module_default.dots, "aria-hidden": "true", children: "\u2026" }, `dots-${index}`);
+      }
+      const page = item;
       const pageClassName = clsx16__default.default(Pagination_module_default.page, {
         [Pagination_module_default.active]: activePage === page,
-        [Pagination_module_default.number]: hasNumber
+        [Pagination_module_default.number]: hasNumber,
+        [Pagination_module_default["no-border"]]: hidePagesBorder
       });
       return renderLink ? /* @__PURE__ */ jsxRuntime.jsx(React66.Fragment, { children: renderLink({
         page,
@@ -2799,6 +2836,424 @@ var MiniSectionCta2 = Object.assign(MiniSectionCta, {
   Title: MiniSectionCtaTitle,
   Subtitle: MiniSectionCtaSubtitle
 });
+function useIntersectionObserver({
+  animateOnce = false,
+  options = {}
+} = {}) {
+  const observeRef = React66.useRef(null);
+  const [isVisible, setIsVisible] = React66.useState(false);
+  if (typeof IntersectionObserver === "undefined") {
+    console.warn("IntersectionObserver is not supported in this browser.");
+    return { observeRef, isVisible: true };
+  }
+  React66.useEffect(() => {
+    const currentRef = observeRef.current;
+    if (!currentRef) return;
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      setIsVisible(entry.isIntersecting);
+      if (entry.isIntersecting && animateOnce) {
+        observer.disconnect();
+      }
+    }, options);
+    observer.observe(currentRef);
+    return () => {
+      observer.disconnect();
+    };
+  }, [observeRef, animateOnce, options]);
+  return { observeRef, isVisible };
+}
+var useIsAtTop = () => {
+  const [isAtTop, setIsAtTop] = React66.useState(true);
+  React66.useEffect(() => {
+    const handleScroll = () => setIsAtTop(window.scrollY === 0);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return isAtTop;
+};
+
+// src/widgets/Navigation/Navigation.module.scss
+var Navigation_module_default = {
+  dropdownTitle: "Navigation_module_dropdownTitle",
+  dropdownLink: "Navigation_module_dropdownLink",
+  dropdownDescription: "Navigation_module_dropdownDescription",
+  mobileItemLink: "Navigation_module_mobileItemLink",
+  mobileItemTrigger: "Navigation_module_mobileItemTrigger",
+  mobileSubLink: "Navigation_module_mobileSubLink",
+  navigationWrapper: "Navigation_module_navigationWrapper",
+  dropdownOpen: "Navigation_module_dropdownOpen",
+  variantTransparent: "Navigation_module_variantTransparent",
+  transparent: "Navigation_module_transparent",
+  navigation: "Navigation_module_navigation",
+  upperNav: "Navigation_module_upperNav",
+  mainLogo: "Navigation_module_mainLogo",
+  mainLogoLink: "Navigation_module_mainLogoLink",
+  upperRight: "Navigation_module_upperRight",
+  lowerNav: "Navigation_module_lowerNav",
+  lowerNavItem: "Navigation_module_lowerNavItem",
+  overlay: "Navigation_module_overlay",
+  dropdownTrigger: "Navigation_module_dropdownTrigger",
+  dropdownTriggerOpen: "Navigation_module_dropdownTriggerOpen",
+  dropdownPanel: "Navigation_module_dropdownPanel",
+  dropdownPanelOpen: "Navigation_module_dropdownPanelOpen",
+  dropdownInner: "Navigation_module_dropdownInner",
+  dropdownLinks: "Navigation_module_dropdownLinks",
+  dropdownLinkContainer: "Navigation_module_dropdownLinkContainer",
+  dropdownInfo: "Navigation_module_dropdownInfo",
+  mainLogoMobile: "Navigation_module_mainLogoMobile",
+  hamburgerButton: "Navigation_module_hamburgerButton",
+  mobileMenu: "Navigation_module_mobileMenu",
+  mobileMenuOpen: "Navigation_module_mobileMenuOpen",
+  mobileMenuHeader: "Navigation_module_mobileMenuHeader",
+  mobileMenuItems: "Navigation_module_mobileMenuItems",
+  mobileItem: "Navigation_module_mobileItem",
+  mobileItemChevron: "Navigation_module_mobileItemChevron",
+  mobileItemChevronOpen: "Navigation_module_mobileItemChevronOpen",
+  mobileSubItems: "Navigation_module_mobileSubItems",
+  mobileSubItemsOpen: "Navigation_module_mobileSubItemsOpen",
+  mobileSubItemsInner: "Navigation_module_mobileSubItemsInner",
+  mobileMenuCtas: "Navigation_module_mobileMenuCtas"
+};
+var NavigationDesktop = ({
+  navigationItems,
+  isTransparent,
+  onDropdownOpenChange
+}) => {
+  var _a;
+  const [activeDropdown, setActiveDropdown] = React66.useState(null);
+  const closeTimer = React66.useRef(null);
+  const dropdownWrapperRefs = React66.useRef([]);
+  const baseId = React66.useId();
+  const setDropdown = (index) => {
+    setActiveDropdown(index);
+    onDropdownOpenChange == null ? void 0 : onDropdownOpenChange(index !== null);
+  };
+  const handleDropdownEnter = (index) => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    setDropdown(index);
+  };
+  const handleDropdownLeave = () => {
+    closeTimer.current = setTimeout(() => setDropdown(null), 100);
+  };
+  const handleDropdownBlur = (e, index) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      if (activeDropdown === index) setDropdown(null);
+    }
+  };
+  const handleTriggerKeyDown = (e, index) => {
+    if (e.key === "Escape") {
+      setDropdown(null);
+    } else if ((e.key === "Enter" || e.key === " ") && activeDropdown !== index) {
+      e.preventDefault();
+      setDropdown(index);
+    }
+  };
+  const handleDropdownKeyDown = (e, index) => {
+    var _a2, _b;
+    if (e.key === "Escape") {
+      setDropdown(null);
+      (_b = (_a2 = dropdownWrapperRefs.current[index]) == null ? void 0 : _a2.querySelector("button")) == null ? void 0 : _b.focus();
+    }
+  };
+  if (!((_a = navigationItems == null ? void 0 : navigationItems.items) == null ? void 0 : _a.length)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Navigation_module_default.lowerNav, children: navigationItems.items.map((item, index) => {
+    var _a2, _b, _c;
+    const panelId = `${baseId}-panel-${index}`;
+    const isOpen = activeDropdown === index;
+    return item.type === "dropdown" ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: Navigation_module_default.lowerNavItem,
+        ref: (el) => {
+          dropdownWrapperRefs.current[index] = el;
+        },
+        onBlur: (e) => handleDropdownBlur(e, index),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "navnofillblack",
+              className: clsx16__default.default(Navigation_module_default.dropdownTrigger, { [Navigation_module_default.dropdownTriggerOpen]: isOpen }),
+              icon: isTransparent ? "downChevronWhite" : "downChevronBlack",
+              isActive: isOpen,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "true",
+              "aria-controls": panelId,
+              onMouseEnter: () => handleDropdownEnter(index),
+              onMouseLeave: handleDropdownLeave,
+              onClick: () => setDropdown(isOpen ? null : index),
+              onKeyDown: (e) => handleTriggerKeyDown(e, index),
+              children: item.title
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: panelId,
+              className: clsx16__default.default(Navigation_module_default.dropdownPanel, { [Navigation_module_default.dropdownPanelOpen]: isOpen }),
+              "aria-hidden": !isOpen,
+              onMouseEnter: () => handleDropdownEnter(index),
+              onMouseLeave: handleDropdownLeave,
+              onKeyDown: (e) => handleDropdownKeyDown(e, index),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Navigation_module_default.dropdownInner, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Navigation_module_default.dropdownLinks, children: item.items.map(
+                  (subItem, i) => {
+                    var _a3, _b2;
+                    return subItem.type === "link" ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: Navigation_module_default.dropdownLinkContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: (_a3 = subItem.cta) == null ? void 0 : _a3.url,
+                        className: Navigation_module_default.dropdownLink,
+                        tabIndex: isOpen ? void 0 : -1,
+                        children: (_b2 = subItem.cta) == null ? void 0 : _b2.label
+                      }
+                    ) }, i) : null;
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Navigation_module_default.dropdownInfo, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: Navigation_module_default.dropdownTitle, children: item.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: Navigation_module_default.dropdownDescription, children: item.description })
+                ] })
+              ] })
+            }
+          )
+        ]
+      },
+      index
+    ) : /* @__PURE__ */ jsxRuntime.jsx("li", { className: Navigation_module_default.lowerNavItem, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "navnofillblack", href: (_a2 = item.cta) == null ? void 0 : _a2.url, isExternal: (_b = item.cta) == null ? void 0 : _b.isExternal, children: (_c = item.cta) == null ? void 0 : _c.label }) }, index);
+  }) });
+};
+var NavigationLogo = ({
+  mainLogo,
+  homeCta,
+  className,
+  onClick,
+  logoAlt = "Home"
+}) => {
+  if (!mainLogo) return null;
+  if (homeCta) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: homeCta, className: Navigation_module_default.mainLogoLink, onClick, "aria-label": logoAlt, children: /* @__PURE__ */ jsxRuntime.jsx(Picture, { className, src: mainLogo, alt: logoAlt || "" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Picture, { className, src: mainLogo, alt: logoAlt });
+};
+var NavigationCtas = ({
+  loginCta,
+  rightButton,
+  loginVariant,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    (loginCta == null ? void 0 : loginCta.label) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: loginVariant, href: loginCta.url, isExternal: loginCta.isExternal, children: loginCta.label }),
+    (rightButton == null ? void 0 : rightButton.label) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", href: rightButton.url, isExternal: rightButton.isExternal, children: rightButton.label })
+  ] });
+};
+var NavigationMobile = ({
+  id,
+  navigationItems,
+  mainLogo,
+  homeCta,
+  loginCta,
+  rightButton,
+  isOpen,
+  onClose
+}) => {
+  var _a;
+  const [expanded, setExpanded] = React66.useState([]);
+  const baseId = React66.useId();
+  const toggleExpanded = (index) => {
+    setExpanded((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      className: clsx16__default.default(Navigation_module_default.mobileMenu, isOpen && Navigation_module_default.mobileMenuOpen),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Navigation menu",
+      "aria-hidden": !isOpen,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Navigation_module_default.mobileMenuHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationLogo,
+            {
+              mainLogo,
+              homeCta,
+              className: Navigation_module_default.mainLogoMobile,
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: Navigation_module_default.hamburgerButton,
+              onClick: onClose,
+              "aria-label": "Close navigation menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 24, "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Navigation_module_default.mobileMenuItems, children: (_a = navigationItems == null ? void 0 : navigationItems.items) == null ? void 0 : _a.map((item, index) => {
+          var _a2, _b;
+          const subMenuId = `${baseId}-submenu-${index}`;
+          const isExpanded = expanded.includes(index);
+          return item.type === "dropdown" ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: Navigation_module_default.mobileItem, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: Navigation_module_default.mobileItemTrigger,
+                onClick: () => toggleExpanded(index),
+                "aria-expanded": isExpanded,
+                "aria-controls": subMenuId,
+                children: [
+                  item.title,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: clsx16__default.default(
+                        Navigation_module_default.mobileItemChevron,
+                        isExpanded && Navigation_module_default.mobileItemChevronOpen
+                      ),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "downChevronBlack", size: 24 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: subMenuId,
+                className: clsx16__default.default(Navigation_module_default.mobileSubItems, isExpanded && Navigation_module_default.mobileSubItemsOpen),
+                children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Navigation_module_default.mobileSubItemsInner, children: item.items.map(
+                  (subItem, i) => {
+                    var _a3, _b2;
+                    return subItem.type === "link" ? /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: (_a3 = subItem.cta) == null ? void 0 : _a3.url,
+                        className: Navigation_module_default.mobileSubLink,
+                        onClick: onClose,
+                        children: (_b2 = subItem.cta) == null ? void 0 : _b2.label
+                      }
+                    ) }, i) : null;
+                  }
+                ) })
+              }
+            )
+          ] }, index) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: (_a2 = item.cta) == null ? void 0 : _a2.url, className: Navigation_module_default.mobileItemLink, onClick: onClose, children: (_b = item.cta) == null ? void 0 : _b.label }) }, index);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NavigationCtas,
+          {
+            className: Navigation_module_default.mobileMenuCtas,
+            loginCta,
+            rightButton,
+            loginVariant: "nofillblack"
+          }
+        )
+      ]
+    }
+  );
+};
+var Navigation2 = (props) => {
+  const { className, variant, homeCta, loginCta, mainLogo, rightButton, navigationItems } = props;
+  const [isHovered, setIsHovered] = React66.useState(false);
+  const [hasOpenDropdown, setHasOpenDropdown] = React66.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React66.useState(false);
+  const isAtTop = useIsAtTop();
+  const { is } = useViewPort_default();
+  const mobileMenuId = React66.useId();
+  const isTabletBelow = is("tablet", "below");
+  const isTransparent = variant === "transparent" && isAtTop && !isHovered && !hasOpenDropdown;
+  React66.useEffect(() => {
+    document.body.style.overflow = isMobileMenuOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileMenuOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx16__default.default(
+          Navigation_module_default.navigationWrapper,
+          variant === "transparent" && Navigation_module_default.variantTransparent,
+          isTransparent && Navigation_module_default.transparent,
+          hasOpenDropdown && !isTabletBelow && Navigation_module_default.dropdownOpen
+        ),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: clsx16__default.default(Navigation_module_default.navigation, className), "aria-label": "Main", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Navigation_module_default.upperNav, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationLogo,
+              {
+                mainLogo,
+                homeCta,
+                className: clsx16__default.default(Navigation_module_default.mainLogo, isTabletBelow && Navigation_module_default.mainLogoMobile)
+              }
+            ),
+            isTabletBelow ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: Navigation_module_default.hamburgerButton,
+                onClick: () => setIsMobileMenuOpen(true),
+                "aria-label": "Open navigation menu",
+                "aria-haspopup": "dialog",
+                "aria-expanded": isMobileMenuOpen,
+                "aria-controls": mobileMenuId,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon,
+                  {
+                    type: isTransparent ? "menuWhite" : "menuBlack",
+                    size: 24,
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationCtas,
+              {
+                className: Navigation_module_default.upperRight,
+                loginCta,
+                rightButton,
+                loginVariant: isTransparent ? "ghost" : "nofillblack"
+              }
+            )
+          ] }),
+          isTabletBelow ? /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationMobile,
+            {
+              id: mobileMenuId,
+              navigationItems,
+              mainLogo,
+              homeCta,
+              loginCta,
+              rightButton,
+              isOpen: isMobileMenuOpen,
+              onClose: () => setIsMobileMenuOpen(false)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationDesktop,
+            {
+              navigationItems,
+              isTransparent,
+              onDropdownOpenChange: setHasOpenDropdown
+            }
+          )
+        ] })
+      }
+    ),
+    hasOpenDropdown && !isTabletBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Navigation_module_default.overlay, "aria-hidden": "true" })
+  ] });
+};
 var PracticePathCardsFooter = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
@@ -2951,7 +3406,7 @@ var Teaser5050WithCta = ({
             titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx16__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
             subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
           ] }),
-          (ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
+          ctas && (ctas == null ? void 0 : ctas.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               className: Teaser5050WithCta_module_default.cta,
@@ -3999,34 +4454,6 @@ var GlobalSearchResultsList2 = Object.assign(GlobalSearchResultsList, {
   Search: GlobalSearchResultsListSearch,
   Pagination: GlobalSearchResultsListPagination
 });
-function useIntersectionObserver({
-  animateOnce = false,
-  options = {}
-} = {}) {
-  const observeRef = React66.useRef(null);
-  const [isVisible, setIsVisible] = React66.useState(false);
-  if (typeof IntersectionObserver === "undefined") {
-    console.warn("IntersectionObserver is not supported in this browser.");
-    return { observeRef, isVisible: true };
-  }
-  React66.useEffect(() => {
-    const currentRef = observeRef.current;
-    if (!currentRef) return;
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      setIsVisible(entry.isIntersecting);
-      if (entry.isIntersecting && animateOnce) {
-        observer.disconnect();
-      }
-    }, options);
-    observer.observe(currentRef);
-    return () => {
-      observer.disconnect();
-    };
-  }, [observeRef, animateOnce, options]);
-  return { observeRef, isVisible };
-}
 
 exports.Anchor = Anchor;
 exports.Badge = Badge;
@@ -4055,6 +4482,7 @@ exports.Input = Input;
 exports.InternalBrandsTab = InternalBrandsTab2;
 exports.MiniBanner = MiniBanner2;
 exports.MiniSectionCta = MiniSectionCta2;
+exports.Navigation = Navigation2;
 exports.NewsCard = NewsCard;
 exports.NewsCardList = NewsCardList2;
 exports.Pagination = Pagination;
@@ -4073,5 +4501,6 @@ exports.UpcomingEventCard = UpcomingEventCard;
 exports.resolveCompoundSlots = resolveCompoundSlots;
 exports.svgs = svgs;
 exports.useIntersectionObserver = useIntersectionObserver;
+exports.useIsAtTop = useIsAtTop;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map