@telia/teddy 0.2.1 → 0.2.3

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, getActiveSubLink, LINKS } from "../navigation-menu/global-navigation/utils.js";
+import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, BUSINESS_UKKO_LINKS, MDU_LINKS, getLinks, getActiveSubLink } 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 } from "../accordion/index.js";
-import { Link as Link$1 } from "../link/link.js";
+import "../accordion/index.js";
+import "../link/link.js";
 import "../badge/badge.js";
 import "../badge/alert-badge.js";
 import { CounterBadge } from "../badge/counter-badge.js";
@@ -63,7 +63,6 @@ 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);
@@ -261,34 +260,22 @@ 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_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
+  "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"
 };
 const rootClassName$1 = "teddy-navigation-menu";
 const NavigationMenuContext = React__default.createContext({
@@ -534,9 +521,6 @@ 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,
@@ -557,8 +541,6 @@ const Content = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       NavigationMenuPrimitive.Content,
       {
-        onPointerEnter: (e) => e.preventDefault(),
-        onPointerLeave: (e) => e.preventDefault(),
         ...props,
         ref: forwardRef,
         className: classes
@@ -678,20 +660,23 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "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"
+  "teddy-global-navigation": "_teddy-global-navigation_1mn6i_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1mn6i_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1mn6i_26",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1mn6i_31",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1mn6i_35",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_1mn6i_48",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1mn6i_51",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1mn6i_55",
+  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1mn6i_59",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_1mn6i_65",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1mn6i_70",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1mn6i_73",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1mn6i_77",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1mn6i_84",
+  "close-viewport": "_close-viewport_1mn6i_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1mn6i_100",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1mn6i_103"
 };
 function MyPages(props) {
   var _a, _b;
@@ -793,6 +778,7 @@ 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: [
@@ -812,6 +798,7 @@ 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" }) }) })
         ]
       }
@@ -846,202 +833,238 @@ 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 [hideMenu, setHideMenu] = React__default.useState(null);
-  const lastScrollDirection = React__default.useRef();
-  const scrollStartPos = React__default.useRef(0);
-  const lastScrollPos = React__default.useRef(0);
+  const [showMenu, setShowMenu] = React__default.useState(false);
   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) => !!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 shouldShowViewport = [
+    ...PRIVATE_LINKS.links,
+    ...BUSINESS_LINKS.links,
+    ...BUSINESS_UKKO_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;
+  });
   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;
-  function resetAndShowMenu() {
-    lastScrollDirection.current = null;
-    scrollStartPos.current = window.scrollY;
-    lastScrollPos.current = window.scrollY;
-    setHideMenu(false);
-  }
-  const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
+  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
+  const handleInteractions = (linkName) => {
+    setSpecifiedLink(linkName || "");
+    setSelectedMenuItem(linkName || "", true);
+  };
+  const viewPortHeight = shouldShowViewport ? "333px" : 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 },
-          allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 } : {}
-        ),
+        style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
         className: styles[`${rootClassName}__top-menu-wrapper`],
-        "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),
-            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)) })
+        children: /* @__PURE__ */ jsxs(NavigationMenu.TopMenuList, { ref: topMenuRef, children: [
+          getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
+            NavigationMenu.TopMenuTrigger,
+            {
+              value: link.name,
+              asChild: true,
+              onClick: () => {
+                rootContext.setPathname(link.link);
+                setSpecifiedLink("");
+              },
+              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)),
+          /* @__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, {}) })
+        ] })
       }
     ) }),
-    LINKS.map((link) => {
+    getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => {
       var _a;
-      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(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`]
-          }
-        )
-      }
-    )
+      return /* @__PURE__ */ jsx(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),
+                        onKeyDown: () => {
+                          setShowMenu(true);
+                        },
+                        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(
+                        HightlightedLinksDesktop,
+                        {
+                          listName: subLink.name,
+                          setShowMenu,
+                          links: subLink.links
+                        }
+                      ),
+                      ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(
+                        HightlightedLinksDesktop,
+                        {
+                          colored: true,
+                          listName: "Nyttige snarveier",
+                          setShowMenu,
+                          links: subLink.highlightedLinks
+                        }
+                      )
+                    ] }) })
+                  }
+                )
+              ]
+            },
+            subLink.name
+          );
+        }
+      ) }, link.name);
+    })
   ] });
 });
 Desktop.displayName = "Desktop";
-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]);
-}
+const HightlightedLinksDesktop = ({ links, listName, colored, 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}/`;
+  const firstPart = links.slice(0, 4);
+  const secondPart = links.slice(4);
+  return /* @__PURE__ */ jsxs(Box, { pt: "40px", pb: "40px", className: colored ? styles[`${rootClassName}__colored-box`] : "", children: [
+    /* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "400", children: [
+      /* @__PURE__ */ jsx(Box, { children: firstPart == null ? void 0 : firstPart.map((subSubLink) => {
+        return /* @__PURE__ */ jsx(Box, { 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);
+      }) }),
+      /* @__PURE__ */ jsx(Box, { children: secondPart.map((subSubLink) => {
+        return /* @__PURE__ */ jsx(Box, { 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 Mobile(props) {
+  const [specifiedLink, setSpecifiedLink] = React__default.useState("");
   const rootContext = React__default.useContext(RootContext);
   const drawerRef = React__default.useRef(null);
   if (!rootContext)
@@ -1049,129 +1072,152 @@ function Mobile(props) {
   const { linkComponent: NavLink } = rootContext;
   const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
   const linkClasses = clsx([styles[`${rootClassName}__link`]]);
-  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" }, children: [
-      /* @__PURE__ */ jsx(ShoppingCart, {}),
-      /* @__PURE__ */ jsx(MyPages, {}),
-      /* @__PURE__ */ jsxs(Drawer, { children: [
-        /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
-          /* @__PURE__ */ jsx(Icon, { name: "menu", size: "sm" }),
-          " Meny"
-        ] }) }) }),
-        /* @__PURE__ */ jsxs(Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
-          /* @__PURE__ */ jsx(Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
-          /* @__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,
+  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: [
+        /* @__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__ */ jsx(ShoppingCart, {}),
+          /* @__PURE__ */ jsx(MyPages, {}),
+          /* @__PURE__ */ jsxs(Drawer, { children: [
+            /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
+              /* @__PURE__ */ jsx(Icon, { name: "menu", size: "sm" }),
+              " Meny"
+            ] }) }) }),
+            /* @__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: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).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: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).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,
                             {
-                              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" })
-                              ] })
+                              item: link,
+                              links: link.highlightedLinks,
+                              drawerRef,
+                              listTitle: "Nyttige snarveier"
                             }
-                          ) }, subLink.name);
-                        }
-                      )
-                    }
-                  ) }, link.name);
-                }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
+                          ) }) })
+                        ] }, 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: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).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
+                            }
+                          ) }) })
+                        ] });
+                      }
+                    );
+                  }
+                ) })
+              ] })
+            ] })
+          ] })
         ] })
-      ] })
-    ] })
-  ] }) });
+      ]
+    }
+  ) });
 }
 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)
     return null;
   const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    LINKS.map((link) => {
+    getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => {
       var _a;
       return /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
         (_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsx(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(
@@ -1220,6 +1266,7 @@ function Root({
   shoppingCart,
   shoppingCartNumberOfItems,
   onSearchSubmit,
+  additionalSearchContent,
   isCartOpen,
   onCartOpenChange,
   drawerSize = "md",
@@ -1230,7 +1277,11 @@ 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,
     {
@@ -1260,9 +1311,12 @@ function Root({
         shoppingCart,
         shoppingCartNumberOfItems,
         onSearchSubmit,
+        additionalSearchContent,
         isCartOpen,
         onCartOpenChange,
-        drawerSize
+        drawerSize,
+        specifiedLink,
+        setSpecifiedLink
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
@@ -1321,7 +1375,7 @@ function getInitialMenuItem(currentPath) {
   const mainMenuPartOfLocation = locationArray[1];
   return (_f = (_e = PRIVATE_LINKS.links) == null ? void 0 : _e.find((link) => {
     var _a2;
-    return link.link === `/${mainMenuPartOfLocation}/` || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
+    return link.name.toLowerCase() === mainMenuPartOfLocation || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
   })) == null ? void 0 : _f.name;
 }
 Root.displayName = "GlobalNavigation";
@@ -1330,6 +1384,7 @@ export {
   Content$2 as C,
   Desktop as D,
   GlobalNavigation as G,
+  HighlightedLinks as H,
   ItemContext as I,
   Modal as M,
   NavigationMenu as N,