@digital-b2c/coreui-kit 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -117,7 +117,7 @@ interface BrandsStripProps {
 
 declare const BrandsStrip: ({ className, variant, title, logos, cta, size, }: BrandsStripProps) => react_jsx_runtime.JSX.Element;
 
-declare const ButtonVariantReadOnly: readonly ["primary", "secondary", "ghost", "nofill", "grey", "nofillblack", "shiny", "tabbutton"];
+declare const ButtonVariantReadOnly: readonly ["primary", "secondary", "ghost", "nofill", "grey", "nofillblack", "shiny", "tabbutton", "navnofillblack"];
 type TButtonVariant = (typeof ButtonVariantReadOnly)[number];
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: TButtonVariant;
@@ -626,6 +626,34 @@ declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, ct
     Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface BaseNavItem {
+    title: string;
+    description: string;
+}
+interface NavLink {
+    type: 'link';
+    cta?: ICta;
+}
+interface NavDropdown extends BaseNavItem {
+    type: 'dropdown';
+    items: NavItem[];
+    cta?: ICta;
+}
+type NavItem = NavLink | NavDropdown;
+interface NavigationProps {
+    className?: string;
+    variant?: 'transparent';
+    mainLogo?: string;
+    homeCta?: string;
+    loginCta?: ICta;
+    rightButton?: ICta;
+    navigationItems?: {
+        items: NavItem[];
+    };
+}
+
+declare const Navigation: (props: NavigationProps) => react_jsx_runtime.JSX.Element;
+
 type PracticePathCardsFooterProps = {
     children: ReactNode;
 };
@@ -934,6 +962,8 @@ type IntersectionObserverResult<T extends Element> = {
 };
 declare function useIntersectionObserver<T extends Element = Element>({ animateOnce, options, }?: UseIntersectionObserverProps): IntersectionObserverResult<T>;
 
+declare const useIsAtTop: () => boolean;
+
 type SlotComponent = React.ComponentType<any>;
 type SlotMap = Record<string, SlotComponent>;
 /**
@@ -943,4 +973,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Navigation, type NavigationProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };

package/dist/index.d.ts

@@ -117,7 +117,7 @@ interface BrandsStripProps {
 
 declare const BrandsStrip: ({ className, variant, title, logos, cta, size, }: BrandsStripProps) => react_jsx_runtime.JSX.Element;
 
-declare const ButtonVariantReadOnly: readonly ["primary", "secondary", "ghost", "nofill", "grey", "nofillblack", "shiny", "tabbutton"];
+declare const ButtonVariantReadOnly: readonly ["primary", "secondary", "ghost", "nofill", "grey", "nofillblack", "shiny", "tabbutton", "navnofillblack"];
 type TButtonVariant = (typeof ButtonVariantReadOnly)[number];
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: TButtonVariant;
@@ -626,6 +626,34 @@ declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, ct
     Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface BaseNavItem {
+    title: string;
+    description: string;
+}
+interface NavLink {
+    type: 'link';
+    cta?: ICta;
+}
+interface NavDropdown extends BaseNavItem {
+    type: 'dropdown';
+    items: NavItem[];
+    cta?: ICta;
+}
+type NavItem = NavLink | NavDropdown;
+interface NavigationProps {
+    className?: string;
+    variant?: 'transparent';
+    mainLogo?: string;
+    homeCta?: string;
+    loginCta?: ICta;
+    rightButton?: ICta;
+    navigationItems?: {
+        items: NavItem[];
+    };
+}
+
+declare const Navigation: (props: NavigationProps) => react_jsx_runtime.JSX.Element;
+
 type PracticePathCardsFooterProps = {
     children: ReactNode;
 };
@@ -934,6 +962,8 @@ type IntersectionObserverResult<T extends Element> = {
 };
 declare function useIntersectionObserver<T extends Element = Element>({ animateOnce, options, }?: UseIntersectionObserverProps): IntersectionObserverResult<T>;
 
+declare const useIsAtTop: () => boolean;
+
 type SlotComponent = React.ComponentType<any>;
 type SlotMap = Record<string, SlotComponent>;
 /**
@@ -943,4 +973,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Navigation, type NavigationProps, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, UpcomingEventCard, type UpcomingEventCardProps, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };

package/dist/index.mjs

@@ -397,11 +397,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"
 };
@@ -2791,6 +2792,424 @@ var MiniSectionCta2 = Object.assign(MiniSectionCta, {
   Title: MiniSectionCtaTitle,
   Subtitle: MiniSectionCtaSubtitle
 });
+function useIntersectionObserver({
+  animateOnce = false,
+  options = {}
+} = {}) {
+  const observeRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  if (typeof IntersectionObserver === "undefined") {
+    console.warn("IntersectionObserver is not supported in this browser.");
+    return { observeRef, isVisible: true };
+  }
+  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] = useState(true);
+  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] = useState(null);
+  const closeTimer = useRef(null);
+  const dropdownWrapperRefs = useRef([]);
+  const baseId = 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__ */ 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__ */ jsxs(
+      "li",
+      {
+        className: Navigation_module_default.lowerNavItem,
+        ref: (el) => {
+          dropdownWrapperRefs.current[index] = el;
+        },
+        onBlur: (e) => handleDropdownBlur(e, index),
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "navnofillblack",
+              className: clsx16(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__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              className: clsx16(Navigation_module_default.dropdownPanel, { [Navigation_module_default.dropdownPanelOpen]: isOpen }),
+              "aria-hidden": !isOpen,
+              onMouseEnter: () => handleDropdownEnter(index),
+              onMouseLeave: handleDropdownLeave,
+              onKeyDown: (e) => handleDropdownKeyDown(e, index),
+              children: /* @__PURE__ */ jsxs("div", { className: Navigation_module_default.dropdownInner, children: [
+                /* @__PURE__ */ jsx("ul", { className: Navigation_module_default.dropdownLinks, children: item.items.map(
+                  (subItem, i) => {
+                    var _a3, _b2;
+                    return subItem.type === "link" ? /* @__PURE__ */ jsx("li", { className: Navigation_module_default.dropdownLinkContainer, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: Navigation_module_default.dropdownInfo, children: [
+                  /* @__PURE__ */ jsx("h3", { className: Navigation_module_default.dropdownTitle, children: item.title }),
+                  /* @__PURE__ */ jsx("p", { className: Navigation_module_default.dropdownDescription, children: item.description })
+                ] })
+              ] })
+            }
+          )
+        ]
+      },
+      index
+    ) : /* @__PURE__ */ jsx("li", { className: Navigation_module_default.lowerNavItem, children: /* @__PURE__ */ 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__ */ jsx("a", { href: homeCta, className: Navigation_module_default.mainLogoLink, onClick, "aria-label": logoAlt, children: /* @__PURE__ */ jsx(Picture, { className, src: mainLogo, alt: logoAlt || "" }) });
+  }
+  return /* @__PURE__ */ jsx(Picture, { className, src: mainLogo, alt: logoAlt });
+};
+var NavigationCtas = ({
+  loginCta,
+  rightButton,
+  loginVariant,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    (loginCta == null ? void 0 : loginCta.label) && /* @__PURE__ */ jsx(Button, { variant: loginVariant, href: loginCta.url, isExternal: loginCta.isExternal, children: loginCta.label }),
+    (rightButton == null ? void 0 : rightButton.label) && /* @__PURE__ */ 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] = useState([]);
+  const baseId = useId();
+  const toggleExpanded = (index) => {
+    setExpanded((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx16(Navigation_module_default.mobileMenu, isOpen && Navigation_module_default.mobileMenuOpen),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Navigation menu",
+      "aria-hidden": !isOpen,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: Navigation_module_default.mobileMenuHeader, children: [
+          /* @__PURE__ */ jsx(
+            NavigationLogo,
+            {
+              mainLogo,
+              homeCta,
+              className: Navigation_module_default.mainLogoMobile,
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Navigation_module_default.hamburgerButton,
+              onClick: onClose,
+              "aria-label": "Close navigation menu",
+              children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 24, "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs("li", { className: Navigation_module_default.mobileItem, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: Navigation_module_default.mobileItemTrigger,
+                onClick: () => toggleExpanded(index),
+                "aria-expanded": isExpanded,
+                "aria-controls": subMenuId,
+                children: [
+                  item.title,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: clsx16(
+                        Navigation_module_default.mobileItemChevron,
+                        isExpanded && Navigation_module_default.mobileItemChevronOpen
+                      ),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(Icon, { type: "downChevronBlack", size: 24 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: subMenuId,
+                className: clsx16(Navigation_module_default.mobileSubItems, isExpanded && Navigation_module_default.mobileSubItemsOpen),
+                children: /* @__PURE__ */ jsx("ul", { className: Navigation_module_default.mobileSubItemsInner, children: item.items.map(
+                  (subItem, i) => {
+                    var _a3, _b2;
+                    return subItem.type === "link" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ 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] = useState(false);
+  const [hasOpenDropdown, setHasOpenDropdown] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const isAtTop = useIsAtTop();
+  const { is } = useViewPort_default();
+  const mobileMenuId = useId();
+  const isTabletBelow = is("tablet", "below");
+  const isTransparent = variant === "transparent" && isAtTop && !isHovered && !hasOpenDropdown;
+  useEffect(() => {
+    document.body.style.overflow = isMobileMenuOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileMenuOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx16(
+          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__ */ jsxs("nav", { className: clsx16(Navigation_module_default.navigation, className), "aria-label": "Main", children: [
+          /* @__PURE__ */ jsxs("div", { className: Navigation_module_default.upperNav, children: [
+            /* @__PURE__ */ jsx(
+              NavigationLogo,
+              {
+                mainLogo,
+                homeCta,
+                className: clsx16(Navigation_module_default.mainLogo, isTabletBelow && Navigation_module_default.mainLogoMobile)
+              }
+            ),
+            isTabletBelow ? /* @__PURE__ */ 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__ */ jsx(
+                  Icon,
+                  {
+                    type: isTransparent ? "menuWhite" : "menuBlack",
+                    size: 24,
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              NavigationCtas,
+              {
+                className: Navigation_module_default.upperRight,
+                loginCta,
+                rightButton,
+                loginVariant: isTransparent ? "ghost" : "nofillblack"
+              }
+            )
+          ] }),
+          isTabletBelow ? /* @__PURE__ */ jsx(
+            NavigationMobile,
+            {
+              id: mobileMenuId,
+              navigationItems,
+              mainLogo,
+              homeCta,
+              loginCta,
+              rightButton,
+              isOpen: isMobileMenuOpen,
+              onClose: () => setIsMobileMenuOpen(false)
+            }
+          ) : /* @__PURE__ */ jsx(
+            NavigationDesktop,
+            {
+              navigationItems,
+              isTransparent,
+              onDropdownOpenChange: setHasOpenDropdown
+            }
+          )
+        ] })
+      }
+    ),
+    hasOpenDropdown && !isTabletBelow && /* @__PURE__ */ jsx("div", { className: Navigation_module_default.overlay, "aria-hidden": "true" })
+  ] });
+};
 var PracticePathCardsFooter = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
@@ -3991,35 +4410,7 @@ var GlobalSearchResultsList2 = Object.assign(GlobalSearchResultsList, {
   Search: GlobalSearchResultsListSearch,
   Pagination: GlobalSearchResultsListPagination
 });
-function useIntersectionObserver({
-  animateOnce = false,
-  options = {}
-} = {}) {
-  const observeRef = useRef(null);
-  const [isVisible, setIsVisible] = useState(false);
-  if (typeof IntersectionObserver === "undefined") {
-    console.warn("IntersectionObserver is not supported in this browser.");
-    return { observeRef, isVisible: true };
-  }
-  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 };
-}
 
-export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, NewsCard, NewsCardList2 as NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation2 as Navigation, NewsCard, NewsCardList2 as NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver, useIsAtTop };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map