@telia/teddy 0.2.0 → 0.2.1

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useEffect } from "react";
 import clsx from "clsx";
-import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, MDU_LINKS, LINKS, getActiveSubLink } from "../navigation-menu/global-navigation/utils.js";
+import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, MDU_LINKS, getActiveSubLink, LINKS } from "../navigation-menu/global-navigation/utils.js";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
 import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
@@ -41,8 +41,8 @@ import { Flex } from "../flex/flex.js";
 import "../card/index.js";
 import { Grid } from "../grid/grid.js";
 import "../toggle/toggle.js";
-import "../accordion/index.js";
-import "../link/link.js";
+import { Accordion } from "../accordion/index.js";
+import { Link as Link$1 } from "../link/link.js";
 import "../badge/badge.js";
 import "../badge/alert-badge.js";
 import { CounterBadge } from "../badge/counter-badge.js";
@@ -63,6 +63,7 @@ import { Indicator as Indicator$1 } from "./radio-card-group-indicator.js";
 import { Body } from "./radio-card-group-item-body.js";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useSize } from "../../utils/useSize.js";
+import { useCallbackRef } from "../../utils/useCallbackRef.js";
 const Title$1 = React__default.forwardRef(
   ({ className, children, asChild, ...props }, forwardRef) => {
     const classes = clsx([styles$3[`${rootClassName$3}__title`]], className);
@@ -260,22 +261,34 @@ const Close = React__default.forwardRef(
 );
 Close.displayName = "Dialog.Close";
 const Modal = Object.assign(Root$2, { Trigger: Trigger$1, Content: Content$1, Title, Overlay, Description, Close, Image, Group });
+const scaleIn = "_scaleIn_11898_1";
+const scaleOut = "_scaleOut_11898_1";
+const enterFromRight = "_enterFromRight_11898_1";
+const enterFromLeft = "_enterFromLeft_11898_1";
+const exitToRight = "_exitToRight_11898_1";
+const exitToLeft = "_exitToLeft_11898_1";
 const styles$1 = {
-  "teddy-navigation-menu": "_teddy-navigation-menu_6p30v_1",
-  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_6p30v_34",
-  "teddy-navigation-menu__separator": "_teddy-navigation-menu__separator_6p30v_37",
-  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_6p30v_40",
-  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_6p30v_66",
-  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_6p30v_87",
-  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_6p30v_106",
-  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_6p30v_112",
-  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_6p30v_187",
-  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_6p30v_219",
-  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_6p30v_239",
-  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_6p30v_245",
-  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_6p30v_313",
-  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_6p30v_333",
-  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_6p30v_339"
+  "teddy-navigation-menu": "_teddy-navigation-menu_11898_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_11898_34",
+  "teddy-navigation-menu__separator": "_teddy-navigation-menu__separator_11898_37",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_11898_40",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_11898_66",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_11898_87",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_11898_106",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_11898_112",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_11898_187",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_11898_227",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_11898_247",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_11898_253",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_11898_321",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_11898_341",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_11898_347",
+  scaleIn,
+  scaleOut,
+  enterFromRight,
+  enterFromLeft,
+  exitToRight,
+  exitToLeft
 };
 const rootClassName$1 = "teddy-navigation-menu";
 const NavigationMenuContext = React__default.createContext({
@@ -521,6 +534,9 @@ const Trigger = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       NavigationMenuPrimitive.Trigger,
       {
+        onPointerEnter: (e) => e.preventDefault(),
+        onPointerMove: (e) => e.preventDefault(),
+        onPointerLeave: (e) => e.preventDefault(),
         ...props,
         ref,
         "data-active": active ? "true" : void 0,
@@ -541,6 +557,8 @@ const Content = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       NavigationMenuPrimitive.Content,
       {
+        onPointerEnter: (e) => e.preventDefault(),
+        onPointerLeave: (e) => e.preventDefault(),
         ...props,
         ref: forwardRef,
         className: classes
@@ -660,23 +678,20 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_16lml_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_16lml_6",
-  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_16lml_26",
-  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_16lml_31",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_16lml_35",
-  "teddy-global-navigation__header": "_teddy-global-navigation__header_16lml_48",
-  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_16lml_51",
-  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_16lml_54",
-  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_16lml_58",
-  "teddy-global-navigation__list": "_teddy-global-navigation__list_16lml_64",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_16lml_69",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_16lml_72",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_16lml_76",
-  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_16lml_83",
-  "close-viewport": "_close-viewport_16lml_1",
-  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_16lml_99",
-  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_16lml_102"
+  "teddy-global-navigation": "_teddy-global-navigation_2fdb8_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_2fdb8_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_2fdb8_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_2fdb8_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_2fdb8_26",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_2fdb8_29",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_2fdb8_32",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_2fdb8_36",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_2fdb8_43",
+  "close-viewport": "_close-viewport_2fdb8_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_2fdb8_54",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_2fdb8_57",
+  "teddy-global-navigation__accordion-look": "_teddy-global-navigation__accordion-look_2fdb8_74",
+  "teddy-global-navigation__mobile-link--accordion-look": "_teddy-global-navigation__mobile-link--accordion-look_2fdb8_90"
 };
 function MyPages(props) {
   var _a, _b;
@@ -778,7 +793,6 @@ const SearchField = React__default.forwardRef(
 SearchField.displayName = "SearchField";
 function Search(props) {
   const rootContext = React__default.useContext(RootContext);
-  const additionalSearchContent = rootContext == null ? void 0 : rootContext.additionalSearchContent;
   const searchFieldRef = React__default.useRef(null);
   return /* @__PURE__ */ jsxs(Drawer, { ...props, children: [
     /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
@@ -798,7 +812,6 @@ function Search(props) {
           /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
           /* @__PURE__ */ jsx(Drawer.Title, { children: "Hva leter du etter?" }),
           /* @__PURE__ */ jsx(SearchField, { ref: searchFieldRef }),
-          additionalSearchContent ? additionalSearchContent : null,
           /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
         ]
       }
@@ -833,44 +846,97 @@ const ShoppingCart = React__default.forwardRef(() => {
   ] });
 });
 ShoppingCart.displayName = "ShoppingCart";
+const scrollDistanceDownThreshold = 200;
+const scrollDistanceUpThreshold = 50;
+const ANIMATION_DURATION = 300;
 const Desktop = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
-  const [showMenu, setShowMenu] = React__default.useState(false);
+  const [hideMenu, setHideMenu] = React__default.useState(null);
+  const lastScrollDirection = React__default.useRef();
+  const scrollStartPos = React__default.useRef(0);
+  const lastScrollPos = React__default.useRef(0);
   const topMenuRef = React__default.useRef(null);
+  const viewPortRef = React__default.useRef(null);
   const shouldShowViewport = [...PRIVATE_LINKS.links, ...BUSINESS_LINKS.links, ...MDU_LINKS.links].some(
-    (link) => {
-      const sameParent = link.link.split("/")[1] === (rootContext == null ? void 0 : rootContext.pathname.split("/")[1]) || !link.link && (rootContext == null ? void 0 : rootContext.pathname) === "/";
-      return link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
-    }
+    (link) => !!getActiveSubLink((rootContext == null ? void 0 : rootContext.pathname) || "", link.links) || link.links.length && link.link === (rootContext == null ? void 0 : rootContext.pathname)
   );
+  const viewPortSize = useSize(viewPortRef.current);
   const topMenuSize = useSize(topMenuRef.current);
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const viewPortHeight = shouldShowViewport ? "47px" : void 0;
+  const animationTimer = React__default.useRef(0);
+  const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React__default.useState(false);
+  const timerRef = React__default.useRef(void 0);
+  React__default.useEffect(() => {
+    timerRef.current = setTimeout(() => {
+      setAllowAnimationOfHeight(true);
+    }, 500);
+    return () => {
+      timerRef.current && clearTimeout(timerRef.current);
+    };
+  }, []);
+  const handleScroll = () => {
+    let compensateHight = 0;
+    if (animationTimer.current > 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (animationTimer.current + ANIMATION_DURATION > currentTime) {
+        compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
+      } else {
+        animationTimer.current = 0;
+      }
+    }
+    const scrollY = window.scrollY;
+    const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
+    const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
+    if (scrollDirection !== lastScrollDirection.current) {
+      scrollStartPos.current = scrollY;
+    }
+    if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
+      setHideMenu(true);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
+      setHideMenu(false);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    lastScrollDirection.current = scrollDirection;
+    lastScrollPos.current = scrollY;
+  };
+  const throttledScrollHandler = useDebounceCallback(handleScroll, 5);
+  React__default.useEffect(() => {
+    window.addEventListener("scroll", throttledScrollHandler);
+    return () => {
+      window.removeEventListener("scroll", throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
   if (!rootContext)
     return null;
-  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  function resetAndShowMenu() {
+    lastScrollDirection.current = null;
+    scrollStartPos.current = window.scrollY;
+    lastScrollPos.current = window.scrollY;
+    setHideMenu(false);
+  }
+  const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
-  const handleInteractions = (linkName) => {
-    setSpecifiedLink(linkName || "");
-    setSelectedMenuItem(linkName || "", true);
-  };
-  const viewPortHeight = showMenu && shouldShowViewport ? "293px" : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
       "div",
       {
         style: mergeStyles(
-          { ["--teddy-top-menu-height"]: topMenuHeight }
+          { ["--teddy-top-menu-height"]: topMenuHeight },
+          allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 } : {}
         ),
         className: styles[`${rootClassName}__top-menu-wrapper`],
-        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
           NavigationMenu.TopMenuTrigger,
           {
             value: link.name,
             asChild: true,
-            onClick: () => {
-              rootContext.setPathname(link.link);
-              setSpecifiedLink("");
-            },
+            onClick: () => rootContext.setPathname(link.link),
             children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name })
           }
         ) }, link.name)) })
@@ -878,125 +944,104 @@ const Desktop = React__default.forwardRef(() => {
     ) }),
     LINKS.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsxs(
-        NavigationMenu.List,
-        {
-          value: link.name,
-          children: [
-            (_a = link.links) == null ? void 0 : _a.map(
-              (subLink) => {
-                var _a2, _b, _c;
-                return /* @__PURE__ */ jsxs(
-                  NavigationMenu.Item,
-                  {
-                    value: subLink.name,
-                    onMouseEnter: () => setShowMenu(true),
-                    onMouseLeave: () => setShowMenu(false),
-                    children: [
-                      subLink.name === "Logo" ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, onMouseEnter: () => handleInteractions(), onClick: () => handleInteractions(), children: /* @__PURE__ */ jsx(
-                        "img",
-                        {
-                          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                          draggable: "false",
-                          alt: "Telia logo"
-                        }
-                      ) }) : /* @__PURE__ */ jsx(
-                        "a",
-                        {
-                          href: subLink.link,
-                          onMouseEnter: () => handleInteractions(),
-                          onClick: () => handleInteractions(),
-                          children: /* @__PURE__ */ jsx(
-                            "img",
-                            {
-                              src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                              draggable: "false",
-                              alt: "Telia logo"
-                            }
-                          )
-                        }
-                      ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
-                        NavigationMenu.Trigger,
-                        {
-                          asChild: true,
-                          active: currentLocation === subLink.link,
-                          children: /* @__PURE__ */ jsx(Button, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), children: subLink.name })
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        NavigationMenu.Link,
-                        {
-                          asChild: true,
-                          active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
-                          children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name })
-                        }
-                      ),
-                      typeof window !== "undefined" && /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: mergeStyles(
-                            { ["--teddy-viewport-wrapper-height"]: viewPortHeight }
-                          ),
-                          className: styles[`${rootClassName}__viewport-wrapper`],
-                          "data-state": showMenu ? "open" : "closed",
-                          children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "150", pb: "250", children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: subLink.name, setShowMenu, links: subLink.links }) }),
-                            ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", setShowMenu, links: subLink.highlightedLinks }) })
-                          ] }) })
-                        }
-                      )
-                    ]
-                  },
-                  subLink.name
-                );
+      return /* @__PURE__ */ jsxs(NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
+        (_a = link.links) == null ? void 0 : _a.map((subLink) => {
+          var _a2, _b;
+          return /* @__PURE__ */ jsxs(NavigationMenu.Item, { value: subLink.name, children: [
+            subLink.name === "Logo" ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                draggable: "false",
+                alt: "Telia logo"
+              }
+            ) }) : /* @__PURE__ */ jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                draggable: "false",
+                alt: "Telia logo"
+              }
+            ) }) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
+              NavigationMenu.Trigger,
+              {
+                asChild: true,
+                active: currentLocation === subLink.link,
+                onClick: () => {
+                  rootContext.setPathname(subLink.link);
+                },
+                children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { href: subLink.link, children: subLink.name })
+              }
+            ) : /* @__PURE__ */ jsx(
+              NavigationMenu.Link,
+              {
+                asChild: true,
+                active: currentLocation === subLink.link,
+                onClick: () => {
+                  rootContext.setPathname(subLink.link);
+                },
+                children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { href: subLink.link, children: subLink.name })
               }
             ),
-            /* @__PURE__ */ jsx(Box, { ml: "auto" }),
-            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
-            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
-            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
-          ]
-        },
-        link.name
-      );
-    })
+            /* @__PURE__ */ jsx(NavigationMenu.Content, { children: /* @__PURE__ */ jsx("ul", { children: (_b = subLink.links) == null ? void 0 : _b.map((subSubLink) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              NavigationMenu.Link,
+              {
+                asChild: true,
+                active: getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
+                onClick: () => {
+                  rootContext.setPathname(subSubLink.link);
+                },
+                variant: "small",
+                children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", align: "center", gap: "25", children: [
+                  subSubLink.name,
+                  "icon" in subSubLink && /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon })
+                ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", align: "center", gap: "25", children: [
+                  subSubLink.name,
+                  "icon" in subSubLink && /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon })
+                ] }) })
+              }
+            ) }, subSubLink.name)) }) })
+          ] }, subLink.name);
+        }),
+        /* @__PURE__ */ jsx(Box, { ml: "auto" }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
+      ] }, link.name);
+    }),
+    /* @__PURE__ */ jsx(NavigationMenu.Separator, {}),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles(
+          { ["--teddy-viewport-wrapper-height"]: viewPortHeight },
+          allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 } : {}
+        ),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu === null ? "" : hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(
+          NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName, setShowMenu }) => {
-  const rootContext = React__default.useContext(RootContext);
-  if (!rootContext)
-    return null;
-  const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
-  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
-    /* @__PURE__ */ jsx(List$1, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map(
-      (subSubLink) => /* @__PURE__ */ jsx(List$1.Item, { children: /* @__PURE__ */ jsx(
-        NavigationMenu.Link,
-        {
-          asChild: true,
-          variant: "small",
-          active: getActiveSubLink(currentLocation, links || []) === subSubLink.link,
-          onClick: () => {
-            rootContext.setPathname(subSubLink.link);
-            setSpecifiedLink("");
-            setSelectedMenuItem("", true);
-            setShowMenu(false);
-          },
-          children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
-            subSubLink.name,
-            /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
-          ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
-            subSubLink.name,
-            /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
-          ] }) })
-        }
-      ) }, subSubLink.name)
-    ) })
-  ] });
-};
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = React__default.useRef(0);
+  React__default.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React__default.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
 function Mobile(props) {
-  const [specifiedLink, setSpecifiedLink] = React__default.useState("");
   const rootContext = React__default.useContext(RootContext);
   const drawerRef = React__default.useRef(null);
   if (!rootContext)
@@ -1004,11 +1049,10 @@ function Mobile(props) {
   const { linkComponent: NavLink } = rootContext;
   const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
   const linkClasses = clsx([styles[`${rootClassName}__link`]]);
-  const headerClasses = clsx([styles[`${rootClassName}__header`]]);
-  return /* @__PURE__ */ jsx(Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", className: styles[`${rootClassName}__top-icon-wrapper`], children: [
+  const currentLocation = rootContext.pathname;
+  return /* @__PURE__ */ jsx(Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", children: [
     /* @__PURE__ */ jsx(Box, { flexShrink: "0", children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: rootContext.appKey === "open-pages" ? /* @__PURE__ */ jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) : /* @__PURE__ */ jsx("a", { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) }) }),
-    /* @__PURE__ */ jsxs(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
-      /* @__PURE__ */ jsx(Search, {}),
+    /* @__PURE__ */ jsxs(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, children: [
       /* @__PURE__ */ jsx(ShoppingCart, {}),
       /* @__PURE__ */ jsx(MyPages, {}),
       /* @__PURE__ */ jsxs(Drawer, { children: [
@@ -1018,98 +1062,109 @@ function Mobile(props) {
         ] }) }) }),
         /* @__PURE__ */ jsxs(Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
           /* @__PURE__ */ jsx(Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
-          !specifiedLink ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Drawer.Title, { children: "Meny" }),
-            /* @__PURE__ */ jsxs(
-              Tabs,
-              {
-                value: rootContext.selectedDomainItem,
-                onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
-                children: [
-                  /* @__PURE__ */ jsx(Tabs.List, { children: LINKS.map((link) => /* @__PURE__ */ jsx(Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
-                  /* @__PURE__ */ jsx(Fragment, { children: LINKS.map((link) => {
-                    var _a, _b;
-                    return /* @__PURE__ */ jsxs(Tabs.Content, { value: link.name, children: [
-                      /* @__PURE__ */ jsx(Box, { mt: "400", children: (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map(
-                        (subLink) => subLink.links.length > 0 ? /* @__PURE__ */ jsxs(Box, { onClick: () => setSpecifiedLink(subLink.name), className: linkClasses, children: [
-                          /* @__PURE__ */ jsx(Heading, { asChild: true, variant: "title-300", children: /* @__PURE__ */ jsx(Button, { className: styles[`${rootClassName}__sublink-button--mobile`], children: subLink.name }) }),
-                          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
-                        ] }) : /* @__PURE__ */ jsx(Fragment, { children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxs(NavLink, { href: subLink.link, className: linkClasses, children: [
-                          /* @__PURE__ */ jsx(Heading, { variant: "title-300", as: "h2", className: headerClasses, children: subLink.name }),
-                          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
-                        ] }) : /* @__PURE__ */ jsxs("a", { href: subLink.link, className: linkClasses, children: [
-                          /* @__PURE__ */ jsx(Heading, { variant: "title-300", as: "h2", children: subLink.name }),
-                          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
-                        ] }) })
-                      ) }),
-                      ((_b = link.highlightedLinks) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsx(Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsx(HighlightedLinks, { item: link, links: link.highlightedLinks, drawerRef, listTitle: "Nyttige snarveier" }) }) })
-                    ] }, link.name);
-                  }) })
-                ]
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Drawer.Title, { children: /* @__PURE__ */ jsxs(
-              Button,
-              {
-                size: "sm",
-                variant: "secondary",
-                onClick: () => setSpecifiedLink(""),
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "arrow-left" }),
-                  "Tilbake"
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Box, { mt: "100", children: LINKS.map(
-              (link) => {
-                var _a;
-                return (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map((subLink) => {
-                  var _a2;
-                  return subLink.links.length > 0 && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(HighlightedLinks, { item: subLink, listTitle: subLink.name, links: subLink.links, drawerRef }),
-                    ((_a2 = subLink.highlightedLinks) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsx(Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsx(Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsx(HighlightedLinks, { item: subLink, listTitle: "Nyttige snarveier", links: subLink.highlightedLinks, drawerRef }) }) })
-                  ] });
-                });
-              }
-            ) })
-          ] })
+          /* @__PURE__ */ jsx(Drawer.Title, { children: "Meny" }),
+          /* @__PURE__ */ jsx(SearchField, {}),
+          /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              value: rootContext.selectedDomainItem,
+              onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
+              children: [
+                /* @__PURE__ */ jsx(Tabs.List, { children: LINKS.map((link) => /* @__PURE__ */ jsx(Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
+                /* @__PURE__ */ jsx(Box, { mt: "400", children: LINKS.map((link) => {
+                  var _a;
+                  return /* @__PURE__ */ jsx(Tabs.Content, { value: link.name, children: /* @__PURE__ */ jsx(
+                    Accordion,
+                    {
+                      type: "single",
+                      collapsible: true,
+                      value: rootContext.selectedMenuItem,
+                      onValueChange: (v) => rootContext.setSelectedMenuItem(v, true),
+                      children: (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map(
+                        (subLink) => {
+                          var _a2;
+                          return subLink.links.length > 0 ? /* @__PURE__ */ jsxs(Accordion.Item, { value: subLink.name, children: [
+                            /* @__PURE__ */ jsxs(Accordion.Header, { className: styles[`${rootClassName}__mobile-header`], children: [
+                              /* @__PURE__ */ jsx(
+                                Link$1,
+                                {
+                                  className: linkClasses,
+                                  variant: "standalone",
+                                  asChild: true,
+                                  onClick: () => {
+                                    var _a3;
+                                    (_a3 = drawerRef.current) == null ? void 0 : _a3.click();
+                                    rootContext.setSelectedMenuItem(subLink.name);
+                                    rootContext.setPathname(subLink.link);
+                                  },
+                                  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { href: subLink.link, children: subLink.name })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Accordion.Trigger, { className: styles[`${rootClassName}__mobile-trigger`], children: /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                                subLink.name,
+                                " linker"
+                              ] }) })
+                            ] }),
+                            /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(List$1, { gap: "10", pl: "25", children: (_a2 = subLink.links) == null ? void 0 : _a2.map((subSubLink) => /* @__PURE__ */ jsx(List$1.Item, { children: /* @__PURE__ */ jsx(
+                              NavigationMenu.Link,
+                              {
+                                asChild: true,
+                                variant: "small",
+                                active: getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
+                                onClick: () => {
+                                  var _a3;
+                                  (_a3 = drawerRef.current) == null ? void 0 : _a3.click();
+                                  rootContext.setPathname(subSubLink.link);
+                                },
+                                children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
+                                  subSubLink.name,
+                                  "icon" in subSubLink ? /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                                ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
+                                  subSubLink.name,
+                                  "icon" in subSubLink ? /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                                ] }) })
+                              }
+                            ) }, subSubLink.name)) }) })
+                          ] }, subLink.name) : /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__accordion-look`], children: /* @__PURE__ */ jsx(
+                            Link$1,
+                            {
+                              className: clsx([
+                                linkClasses,
+                                styles[`${rootClassName}__mobile-link--accordion-look`]
+                              ]),
+                              variant: "standalone",
+                              asChild: true,
+                              onClick: () => {
+                                var _a3;
+                                (_a3 = drawerRef.current) == null ? void 0 : _a3.click();
+                                rootContext.setSelectedMenuItem(subLink.name);
+                                rootContext.setPathname(subLink.link);
+                              },
+                              children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxs(NavLink, { href: subLink.link, children: [
+                                subLink.name,
+                                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                              ] }) : /* @__PURE__ */ jsxs("a", { href: subLink.link, children: [
+                                subLink.name,
+                                " ",
+                                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                              ] })
+                            }
+                          ) }, subLink.name);
+                        }
+                      )
+                    }
+                  ) }, link.name);
+                }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
         ] })
       ] })
     ] })
   ] }) });
 }
 Mobile.displayName = "Mobile";
-const HighlightedLinks = ({ listTitle, links, item, drawerRef }) => {
-  const rootContext = React__default.useContext(RootContext);
-  if (!rootContext)
-    return null;
-  const { linkComponent: NavLink } = rootContext;
-  const currentLocation = rootContext.pathname;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listTitle }),
-    /* @__PURE__ */ jsx(List$1, { gap: "10", pl: "25", children: links == null ? void 0 : links.map((subSubLink) => /* @__PURE__ */ jsx(List$1.Item, { children: /* @__PURE__ */ jsx(
-      NavigationMenu.Link,
-      {
-        asChild: true,
-        variant: "small",
-        active: getActiveSubLink(currentLocation, item.links || []) === subSubLink.link,
-        onClick: () => {
-          var _a;
-          (_a = drawerRef == null ? void 0 : drawerRef.current) == null ? void 0 : _a.click();
-          rootContext.setPathname(subSubLink.link);
-        },
-        children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
-          subSubLink.name,
-          subSubLink.icon ? /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
-        ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
-          subSubLink.name,
-          subSubLink.icon ? /* @__PURE__ */ jsx(Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
-        ] }) })
-      }
-    ) }, subSubLink.name)) })
-  ] });
-};
 const DesktopSimplified = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
   if (!rootContext)
@@ -1165,7 +1220,6 @@ function Root({
   shoppingCart,
   shoppingCartNumberOfItems,
   onSearchSubmit,
-  additionalSearchContent,
   isCartOpen,
   onCartOpenChange,
   drawerSize = "md",
@@ -1176,11 +1230,7 @@ function Root({
   const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath));
   const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath));
   const [pathname, setPathname] = React__default.useState(currentPath || "");
-  const [specifiedLink, setSpecifiedLink] = React__default.useState(getInitialMenuItem(currentPath));
   const classes = clsx([styles[`${rootClassName}`]], className);
-  useEffect(() => {
-    setPathname(currentPath || "");
-  }, [currentPath]);
   return /* @__PURE__ */ jsx(
     RootContext.Provider,
     {
@@ -1210,12 +1260,9 @@ function Root({
         shoppingCart,
         shoppingCartNumberOfItems,
         onSearchSubmit,
-        additionalSearchContent,
         isCartOpen,
         onCartOpenChange,
-        drawerSize,
-        specifiedLink,
-        setSpecifiedLink
+        drawerSize
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
@@ -1274,7 +1321,7 @@ function getInitialMenuItem(currentPath) {
   const mainMenuPartOfLocation = locationArray[1];
   return (_f = (_e = PRIVATE_LINKS.links) == null ? void 0 : _e.find((link) => {
     var _a2;
-    return link.name.toLowerCase() === mainMenuPartOfLocation || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
+    return link.link === `/${mainMenuPartOfLocation}/` || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
   })) == null ? void 0 : _f.name;
 }
 Root.displayName = "GlobalNavigation";
@@ -1283,7 +1330,6 @@ export {
   Content$2 as C,
   Desktop as D,
   GlobalNavigation as G,
-  HighlightedLinks as H,
   ItemContext as I,
   Modal as M,
   NavigationMenu as N,