@telia/teddy 0.1.17 → 0.1.19

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

@@ -12,6 +12,7 @@ const reactSlot = require("@radix-ui/react-slot");
 const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
 const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
 const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
+require("../meter-bar/index.cjs");
 require("../skeleton/index.cjs");
 require("../checkbox/index.cjs");
 require("../toast/toast-root.cjs");
@@ -42,8 +43,8 @@ const components_flex_flex = require("../flex/flex.cjs");
 require("../card/index.cjs");
 const components_grid_grid = require("../grid/grid.cjs");
 require("../toggle/toggle.cjs");
-const components_accordion_index = require("../accordion/index.cjs");
-const components_link_link = require("../link/link.cjs");
+require("../accordion/index.cjs");
+require("../link/link.cjs");
 require("../badge/badge.cjs");
 require("../badge/alert-badge.cjs");
 const components_badge_counterBadge = require("../badge/counter-badge.cjs");
@@ -281,28 +282,28 @@ const Close = React.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 scaleIn = "_scaleIn_gpawj_1";
+const scaleOut = "_scaleOut_gpawj_1";
+const enterFromRight = "_enterFromRight_gpawj_1";
+const enterFromLeft = "_enterFromLeft_gpawj_1";
+const exitToRight = "_exitToRight_gpawj_1";
+const exitToLeft = "_exitToLeft_gpawj_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",
+  "teddy-navigation-menu": "_teddy-navigation-menu_gpawj_1",
+  "teddy-navigation-menu__viewport": "_teddy-navigation-menu__viewport_gpawj_34",
+  "teddy-navigation-menu__separator": "_teddy-navigation-menu__separator_gpawj_37",
+  "teddy-navigation-menu__list": "_teddy-navigation-menu__list_gpawj_40",
+  "teddy-navigation-menu__top-menu-list": "_teddy-navigation-menu__top-menu-list_gpawj_66",
+  "teddy-navigation-menu__top-menu-trigger": "_teddy-navigation-menu__top-menu-trigger_gpawj_87",
+  "teddy-navigation-menu__top-menu-trigger--small": "_teddy-navigation-menu__top-menu-trigger--small_gpawj_106",
+  "teddy-navigation-menu__top-menu-trigger--button": "_teddy-navigation-menu__top-menu-trigger--button_gpawj_112",
+  "teddy-navigation-menu__content": "_teddy-navigation-menu__content_gpawj_187",
+  "teddy-navigation-menu__trigger": "_teddy-navigation-menu__trigger_gpawj_228",
+  "teddy-navigation-menu__trigger--small": "_teddy-navigation-menu__trigger--small_gpawj_248",
+  "teddy-navigation-menu__trigger--button": "_teddy-navigation-menu__trigger--button_gpawj_254",
+  "teddy-navigation-menu__link": "_teddy-navigation-menu__link_gpawj_322",
+  "teddy-navigation-menu__link--small": "_teddy-navigation-menu__link--small_gpawj_342",
+  "teddy-navigation-menu__link--button": "_teddy-navigation-menu__link--button_gpawj_348",
   scaleIn,
   scaleOut,
   enterFromRight,
@@ -698,20 +699,26 @@ 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_h438t_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_h438t_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_h438t_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_h438t_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_h438t_32",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_h438t_37",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_h438t_41",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_h438t_51",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_h438t_54",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_h438t_57",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_h438t_61",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_h438t_66",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_h438t_69",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_h438t_73",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_h438t_80",
+  "close-viewport": "_close-viewport_h438t_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_h438t_91",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_h438t_94",
+  "teddy-global-navigation__accordion-look": "_teddy-global-navigation__accordion-look_h438t_111",
+  "teddy-global-navigation__mobile-link--accordion-look": "_teddy-global-navigation__mobile-link--accordion-look_h438t_127"
 };
 function MyPages(props) {
   var _a, _b;
@@ -757,7 +764,7 @@ function LoggedInContent() {
   var _a;
   const rootContext = React.useContext(RootContext);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Dine sider" }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Mine sider" }),
     /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs, { defaultValue: "private", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.List, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { value: "private", children: "Privat" }),
@@ -872,18 +879,19 @@ const ANIMATION_DURATION = 300;
 const Desktop = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
   const [hideMenu, setHideMenu] = React.useState(null);
+  const [specifiedLink, setSpecifiedLink] = React.useState("");
   const lastScrollDirection = React.useRef();
   const scrollStartPos = React.useRef(0);
   const lastScrollPos = React.useRef(0);
   const topMenuRef = React.useRef(null);
   const viewPortRef = React.useRef(null);
   const shouldShowViewport = [...components_navigationMenu_globalNavigation_utils.PRIVATE_LINKS.links, ...components_navigationMenu_globalNavigation_utils.BUSINESS_LINKS.links, ...components_navigationMenu_globalNavigation_utils.MDU_LINKS.links].some(
-    (link) => !!components_navigationMenu_globalNavigation_utils.getActiveSubLink((rootContext == null ? void 0 : rootContext.pathname) || "", link.links) || link.links.length && link.link === (rootContext == null ? void 0 : rootContext.pathname)
+    (link) => !!components_navigationMenu_globalNavigation_utils.getActiveSubLink((rootContext == null ? void 0 : rootContext.pathname) || "", link.links) || link.links.length && link.name === specifiedLink || link.links.length && link.link === (rootContext == null ? void 0 : rootContext.pathname)
   );
   const viewPortSize = utils_useSize.useSize(viewPortRef.current);
   const topMenuSize = utils_useSize.useSize(topMenuRef.current);
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
-  const viewPortHeight = shouldShowViewport ? "47px" : void 0;
+  const viewPortHeight = shouldShowViewport ? "288px" : void 0;
   const animationTimer = React.useRef(0);
   const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React.useState(false);
   const timerRef = React.useRef(void 0);
@@ -956,7 +964,10 @@ const Desktop = React.forwardRef(() => {
           {
             value: link.name,
             asChild: true,
-            onClick: () => rootContext.setPathname(link.link),
+            onClick: () => {
+              rootContext.setPathname(link.link);
+              setSpecifiedLink("");
+            },
             children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name })
           }
         ) }, link.name)) })
@@ -965,64 +976,48 @@ const Desktop = React.forwardRef(() => {
     components_navigationMenu_globalNavigation_utils.LINKS.map((link) => {
       var _a;
       return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
-        (_a = link.links) == null ? void 0 : _a.map((subLink) => {
-          var _a2, _b;
-          return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.Item, { value: subLink.name, children: [
-            subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                draggable: "false",
-                alt: "Telia logo"
-              }
-            ) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              NavigationMenu.Trigger,
-              {
-                asChild: true,
-                active: currentLocation === subLink.link,
-                onClick: () => {
-                  rootContext.setPathname(subLink.link);
-                },
-                children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationMenu.Link,
-              {
-                asChild: true,
-                active: currentLocation === subLink.link,
-                onClick: () => {
-                  rootContext.setPathname(subLink.link);
-                },
-                children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: (_b = subLink.links) == null ? void 0 : _b.map((subSubLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationMenu.Link,
-              {
-                asChild: true,
-                active: components_navigationMenu_globalNavigation_utils.getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
-                onClick: () => {
-                  rootContext.setPathname(subSubLink.link);
-                },
-                variant: "small",
-                children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", align: "center", gap: "25", children: [
-                  subSubLink.name,
-                  "icon" in subSubLink && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon })
-                ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", align: "center", gap: "25", children: [
-                  subSubLink.name,
-                  "icon" in subSubLink && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon })
-                ] }) })
-              }
-            ) }, subSubLink.name)) }) })
-          ] }, subLink.name);
-        }),
+        (_a = link.links) == null ? void 0 : _a.map(
+          (subLink) => {
+            var _a2, _b, _c;
+            return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.Item, { value: subLink.name, children: [
+              subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                  draggable: "false",
+                  alt: "Telia logo"
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                NavigationMenu.Trigger,
+                {
+                  asChild: true,
+                  active: currentLocation === subLink.link,
+                  onClick: () => setSpecifiedLink(subLink.name),
+                  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenu.Link,
+                {
+                  asChild: true,
+                  active: currentLocation === subLink.link,
+                  onClick: () => setSpecifiedLink(subLink.name),
+                  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "150", children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: subLink.name, subLink, links: subLink.links }) }),
+                ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "40px", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", subLink, links: subLink.highlightedLinks }) })
+              ] }) })
+            ] }, subLink.name);
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ml: "auto" }),
         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Search, {}) }),
@@ -1061,7 +1056,36 @@ function useDebounceCallback(callback, delay) {
     debounceTimerRef.current = window.setTimeout(handleCallback, delay);
   }, [handleCallback, delay]);
 }
+const HightlightedLinksDesktop = ({ subLink, links, listName }) => {
+  const rootContext = React.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { linkComponent: Link2 } = rootContext;
+  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map((subSubLink) => /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      NavigationMenu.Link,
+      {
+        asChild: true,
+        variant: "small",
+        active: components_navigationMenu_globalNavigation_utils.getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
+        onClick: () => {
+          rootContext.setPathname(subSubLink.link);
+        },
+        children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
+          subSubLink.name,
+          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
+          subSubLink.name,
+          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
+        ] }) })
+      }
+    ) }, subSubLink.name)) })
+  ] });
+};
 function Mobile(props) {
+  const [specifiedLink, setSpecifiedLink] = React.useState("");
   const rootContext = React.useContext(RootContext);
   const drawerRef = React.useRef(null);
   if (!rootContext)
@@ -1069,10 +1093,11 @@ 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__ */ jsxRuntime.jsx(components_flex_flex.Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", children: [
+  const headerClasses = clsx([styles[`${rootClassName}__header`]]);
+  return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", justify: "between", align: "center", gap: "200", className: styles[`${rootClassName}__top-icon-wrapper`], children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { flexShrink: "0", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: rootContext.appKey === "open-pages" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Search, {}),
       /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}),
       /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}),
       /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { children: [
@@ -1082,109 +1107,99 @@ function Mobile(props) {
         ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
           /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
-          /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Meny" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SearchField, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            components_tabs_index.Tabs,
-            {
-              value: rootContext.selectedDomainItem,
-              onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
-                /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mt: "400", children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => {
-                  var _a;
-                  return /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Content, { value: link.name, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    components_accordion_index.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__ */ jsxRuntime.jsxs(components_accordion_index.Accordion.Item, { value: subLink.name, children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs(components_accordion_index.Accordion.Header, { className: styles[`${rootClassName}__mobile-header`], children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                components_link_link.Link,
-                                {
-                                  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__ */ jsxRuntime.jsx(NavLink, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx(components_accordion_index.Accordion.Trigger, { className: styles[`${rootClassName}__mobile-trigger`], children: /* @__PURE__ */ jsxRuntime.jsxs(components_visuallyHidden_visuallyHidden.VisuallyHidden, { children: [
-                                subLink.name,
-                                " linker"
-                              ] }) })
-                            ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx(components_accordion_index.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List, { gap: "10", pl: "25", children: (_a2 = subLink.links) == null ? void 0 : _a2.map((subSubLink) => /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                              NavigationMenu.Link,
-                              {
-                                asChild: true,
-                                variant: "small",
-                                active: components_navigationMenu_globalNavigation_utils.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__ */ jsxRuntime.jsx(NavLink, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
-                                  subSubLink.name,
-                                  "icon" in subSubLink ? /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
-                                ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
-                                  subSubLink.name,
-                                  "icon" in subSubLink ? /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
-                                ] }) })
-                              }
-                            ) }, subSubLink.name)) }) })
-                          ] }, subLink.name) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__accordion-look`], children: /* @__PURE__ */ jsxRuntime.jsx(
-                            components_link_link.Link,
-                            {
-                              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__ */ jsxRuntime.jsxs(NavLink, { href: subLink.link, children: [
-                                subLink.name,
-                                /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
-                              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { href: subLink.link, children: [
-                                subLink.name,
-                                " ",
-                                /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
-                              ] })
-                            }
-                          ) }, subLink.name);
-                        }
-                      )
-                    }
-                  ) }, link.name);
-                }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "secondary", children: "Lukk" }) }) })
+          !specifiedLink ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: "Meny" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SearchField, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              components_tabs_index.Tabs,
+              {
+                value: rootContext.selectedDomainItem,
+                onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.Content, { value: link.name, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mt: "400", children: (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map(
+                        (subLink) => subLink.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { onClick: () => setSpecifiedLink(subLink.name), className: linkClasses, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { asChild: true, variant: "title-300", children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { style: { all: "unset" }, children: subLink.name }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "chevron-right", size: "md" })
+                        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { href: subLink.link, className: linkClasses, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-300", as: "h2", className: headerClasses, children: subLink.name }),
+                          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "chevron-right", size: "md" })
+                        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { href: subLink.link, className: linkClasses, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-300", as: "h2", children: subLink.name }),
+                          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "chevron-right", size: "md" })
+                        ] }) })
+                      ) }),
+                      ((_b = link.highlightedLinks) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedLinks, { item: link, links: link.highlightedLinks, drawerRef, listTitle: "Nyttige snarveier" }) }) })
+                    ] }, link.name);
+                  }) })
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Title, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              components_button_button.Button,
+              {
+                size: "sm",
+                variant: "secondary",
+                onClick: () => setSpecifiedLink(""),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-left" }),
+                  "Tilbake"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mt: "100", children: components_navigationMenu_globalNavigation_utils.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(HighlightedLinks, { item: subLink, listTitle: subLink.name, links: subLink.links, drawerRef }),
+                    ((_a2 = subLink.highlightedLinks) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedLinks, { item: subLink, listTitle: "Nyttige snarveier", links: subLink.highlightedLinks, drawerRef }) }) })
+                  ] });
+                });
+              }
+            ) })
+          ] })
         ] })
       ] })
     ] })
   ] }) });
 }
 Mobile.displayName = "Mobile";
+const HighlightedLinks = ({ listTitle, links, item, drawerRef }) => {
+  const rootContext = React.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { linkComponent: NavLink } = rootContext;
+  const currentLocation = rootContext.pathname;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List, { gap: "10", pl: "25", children: links == null ? void 0 : links.map((subSubLink) => /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      NavigationMenu.Link,
+      {
+        asChild: true,
+        variant: "small",
+        active: components_navigationMenu_globalNavigation_utils.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__ */ jsxRuntime.jsx(NavLink, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
+          subSubLink.name,
+          subSubLink.icon ? /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "icon" in subSubLink ? "25" : "100", align: "center", children: [
+          subSubLink.name,
+          subSubLink.icon ? /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: subSubLink.icon }) : /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
+        ] }) })
+      }
+    ) }, subSubLink.name)) })
+  ] });
+};
 const DesktopSimplified = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
   if (!rootContext)
@@ -1350,6 +1365,7 @@ exports.Content = Content$2;
 exports.Desktop = Desktop;
 exports.DesktopSimplified = DesktopSimplified;
 exports.GlobalNavigation = GlobalNavigation;
+exports.HighlightedLinks = HighlightedLinks;
 exports.Item = Item$1;
 exports.ItemContext = ItemContext;
 exports.Mobile = Mobile;