@telia/teddy 0.0.61 → 0.0.62

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

@@ -1,42 +1,48 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useEffect } from "react";
-import * as DrawerPrimitive from "@radix-ui/react-dialog";
+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 * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
+import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
+import { Slot } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { mergeStyles } from "../../utils/generate-styling/index.js";
+import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
 import "../toast/toast-root.js";
 import "sonner";
 import "../toggletip/index.js";
 import "../breadcrumbs/index.js";
-import { s as styles$1, rootClassName as rootClassName$1, Root as Root$1 } from "./radio-card-group-root.js";
+import { s as styles$3, rootClassName as rootClassName$3, Root as Root$3 } from "./radio-card-group-root.js";
 import { GroupLabel } from "./radio-card-group-label.js";
-import clsx from "clsx";
-import { Slot } from "@radix-ui/react-slot";
 import "../ribbon/index.js";
 import "../expandable-card/index.js";
 import "../color-dot/color-dot-root.js";
 import "../progress-bar/progress-bar.js";
 import "../notabene/index.js";
 import "../tooltip/index.js";
-import "../list/index.js";
+import { List as List$1 } from "../list/index.js";
 import "../scroll-area/index.js";
-import "../tabs/index.js";
-import "../drawer/index.js";
+import { Tabs } from "../tabs/index.js";
+import { Drawer } from "../drawer/index.js";
 import "../image/image.js";
 import "../chip/index.js";
 import "../../assets/sprite.269ba410-teddy.svg";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
 import { Icon } from "../icon/icon.js";
 import "../notification/notification.js";
 import "../radio-group/index.js";
-import "../box/box.js";
+import { Box } from "../box/box.js";
 import { Flex } from "../flex/flex.js";
 import "../card/index.js";
-import "../grid/grid.js";
-import "../navigation-menu/navigation-menu.js";
-import "../navigation-menu/global-navigation/global-navigation-my-pages.js";
+import { Grid } from "../grid/grid.js";
 import "../toggle/toggle.js";
-import "../accordion/index.js";
-import "../link/link.js";
+import { Accordion } from "../accordion/index.js";
+import { Link as Link$1 } from "../link/link.js";
 import "../badge/badge.js";
 import "../badge/alert-badge.js";
-import "../badge/counter-badge.js";
+import { CounterBadge } from "../badge/counter-badge.js";
 import { Button } from "../button/button.js";
 import "../field-error-text/field-error-text.js";
 import "../helper-text/helper-text.js";
@@ -44,65 +50,65 @@ import "../input/index.js";
 import "../label/label.js";
 import "../spinner/spinner.js";
 import { Text } from "../text/text.js";
-import "../text-field/index.js";
+import { TextField } from "../text-field/index.js";
 import { Heading } from "../heading/heading.js";
-import "../visually-hidden/visually-hidden.js";
-import "../text-spacing/text-spacing.js";
+import { TextSpacing } from "../text-spacing/text-spacing.js";
 import "../container/container.js";
-import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
-import { Indicator } from "./radio-card-group-indicator.js";
+import { Indicator as Indicator$1 } from "./radio-card-group-indicator.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$1[`${rootClassName$1}__title`]], className);
-    return /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: "150", className: styles$1[`${rootClassName$1}__title-wrapper`], children: [
+    const classes = clsx([styles$3[`${rootClassName$3}__title`]], className);
+    return /* @__PURE__ */ jsxs(Flex, { width: "100%", gap: "150", className: styles$3[`${rootClassName$3}__title-wrapper`], children: [
       asChild ? /* @__PURE__ */ jsx(Slot, { ...props, ref: forwardRef, className: classes, children }) : /* @__PURE__ */ jsx(Text, { variant: "paragraph-100-bold", ref: forwardRef, className: classes, children }),
-      /* @__PURE__ */ jsx(Indicator, {})
+      /* @__PURE__ */ jsx(Indicator$1, {})
     ] });
   }
 );
 Title$1.displayName = "Title";
 const Body = React__default.forwardRef(
   ({ className, children, asChild, ...props }, forwardRef) => {
-    const classes = clsx([styles$1[`${rootClassName$1}__body`]], className);
+    const classes = clsx([styles$3[`${rootClassName$3}__body`]], className);
     const Comp = asChild ? Slot : Text;
     return /* @__PURE__ */ jsx(Comp, { ref: forwardRef, className: classes, ...props, children });
   }
 );
 Body.displayName = "Body";
-const Content$1 = React__default.forwardRef(
+const Content$2 = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([styles$1[`${rootClassName$1}__content-wrapper`]], className);
+    const classes = clsx([styles$3[`${rootClassName$3}__content-wrapper`]], className);
     return /* @__PURE__ */ jsx(Flex, { direction: "column", width: "100%", gap: "50", ...props, ref: forwardRef, className: classes, children });
   }
 );
-Content$1.displayName = "Content";
+Content$2.displayName = "Content";
 const ItemContext = React__default.createContext(void 0);
-const Item = React__default.forwardRef(
+const Item$1 = React__default.forwardRef(
   ({ className, children, value, ...props }, forwardedRef) => {
-    const classes = clsx([styles$1[`${rootClassName$1}__card-item`]], className);
+    const classes = clsx([styles$3[`${rootClassName$3}__card-item`]], className);
     const context = React__default.useContext(ItemContext);
     const ref = useComposedRefs(forwardedRef, context == null ? void 0 : context.triggerRef);
     const id = props.id || (context == null ? void 0 : context.id);
     return /* @__PURE__ */ jsxs(RadioGroupPrimitive.Item, { value, id, ...props, asChild: false, ref, className: classes, children: [
-      props.imageUrl ? /* @__PURE__ */ jsx(Flex, { className: clsx([styles$1[`${rootClassName$1}__illustration`]], className), justify: "center", align: "center", children: /* @__PURE__ */ jsx("img", { src: props.imageUrl, alt: value }) }) : null,
-      /* @__PURE__ */ jsx(Content$1, { children })
+      props.imageUrl ? /* @__PURE__ */ jsx(Flex, { className: clsx([styles$3[`${rootClassName$3}__illustration`]], className), justify: "center", align: "center", children: /* @__PURE__ */ jsx("img", { src: props.imageUrl, alt: value }) }) : null,
+      /* @__PURE__ */ jsx(Content$2, { children })
     ] });
   }
 );
-Item.displayName = "Item";
-Root$1.displayName = "RadioCardGroup";
+Item$1.displayName = "Item";
+Root$3.displayName = "RadioCardGroup";
 GroupLabel.displayName = "RadioCardGroup.GroupLabel";
-Item.displayName = "RadioCardGroup.Item";
+Item$1.displayName = "RadioCardGroup.Item";
 Title$1.displayName = "RadioCardGroup.Title";
 Body.displayName = "RadioCardGroup.Body";
-const RadioCardGroup = Object.assign(Root$1, {
+const RadioCardGroup = Object.assign(Root$3, {
   GroupLabel,
-  Item,
+  Item: Item$1,
   Title: Title$1,
   Body
 });
-const styles = {
+const styles$2 = {
   "teddy-modal__overlay": "_teddy-modal__overlay_3n21u_25",
   "teddy-modal__content": "_teddy-modal__content_3n21u_37",
   "teddy-modal__scroll": "_teddy-modal__scroll_3n21u_55",
@@ -119,41 +125,41 @@ const styles = {
   "modal-content-hide": "_modal-content-hide_3n21u_1",
   "teddy-overlay-no-op": "_teddy-overlay-no-op_3n21u_1"
 };
-const rootClassName = "teddy-modal";
-const RootContext = React__default.createContext({
+const rootClassName$2 = "teddy-modal";
+const RootContext$1 = React__default.createContext({
   imageRef: null,
   actionGroupRef: null,
   scrollRef: null
 });
-const Root = (props) => {
+const Root$2 = (props) => {
   const imageRef = React__default.useRef(null);
   const actionGroupRef = React__default.useRef(null);
   const scrollRef = React__default.useRef(null);
-  return /* @__PURE__ */ jsx(RootContext.Provider, { value: { imageRef, actionGroupRef, scrollRef }, children: /* @__PURE__ */ jsx(DrawerPrimitive.Root, { ...props, modal: true }) });
+  return /* @__PURE__ */ jsx(RootContext$1.Provider, { value: { imageRef, actionGroupRef, scrollRef }, children: /* @__PURE__ */ jsx(DrawerPrimitive.Root, { ...props, modal: true }) });
 };
-Root.displayName = "Dialog.Root";
-const Trigger = React__default.forwardRef(
+Root$2.displayName = "Dialog.Root";
+const Trigger$1 = React__default.forwardRef(
   ({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, { ...props, ref: forwardedRef, asChild: true, children })
 );
-Trigger.displayName = "Dialog.Trigger";
+Trigger$1.displayName = "Dialog.Trigger";
 const OverlayContext = React__default.createContext(false);
 const Overlay = React__default.forwardRef(
   ({ className, forceMount, container, ...rest }, forwardedRef) => {
-    const classes = clsx([styles[`${rootClassName}__overlay`]], className);
+    const classes = clsx([styles$2[`${rootClassName$2}__overlay`]], className);
     return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { container, forceMount, children: /* @__PURE__ */ jsx(DrawerPrimitive.Overlay, { className: classes, ref: forwardedRef, ...rest }) }) });
   }
 );
 Overlay.displayName = "Dialog.Content";
 const InnerContent = React__default.forwardRef(
   function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
-    const classes = clsx([styles[`${rootClassName}__scroll`]], className);
-    const context = React__default.useContext(RootContext);
+    const classes = clsx([styles$2[`${rootClassName$2}__scroll`]], className);
+    const context = React__default.useContext(RootContext$1);
     return /* @__PURE__ */ jsx(
       DrawerPrimitive.Content,
       {
         ...props,
         ref: forwardedRef,
-        className: clsx([styles[`${rootClassName}__content`]]),
+        className: clsx([styles$2[`${rootClassName$2}__content`]]),
         asChild: true,
         children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
           Flex,
@@ -171,7 +177,7 @@ const InnerContent = React__default.forwardRef(
     );
   }
 );
-const Content = React__default.forwardRef(
+const Content$1 = React__default.forwardRef(
   ({ forceMount, ...contentProps }, forwardedRef) => {
     const hasOverlay = React__default.useContext(OverlayContext);
     if (!hasOverlay)
@@ -179,11 +185,11 @@ const Content = React__default.forwardRef(
     return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps });
   }
 );
-Content.displayName = "Dialog.Content";
+Content$1.displayName = "Dialog.Content";
 const GroupContext = React__default.createContext(false);
 const Group = React__default.forwardRef(
   ({ className, variant, ...props }, forwardedRef) => {
-    const strollerRef = React__default.useContext(RootContext).scrollRef;
+    const strollerRef = React__default.useContext(RootContext$1).scrollRef;
     const [isOverflowing, setIsOverflowing] = React__default.useState(false);
     useEffect(() => {
       if (strollerRef == null ? void 0 : strollerRef.current) {
@@ -192,11 +198,11 @@ const Group = React__default.forwardRef(
       }
     }, [strollerRef]);
     const classes = clsx(
-      [styles[`${rootClassName}__group`]],
+      [styles$2[`${rootClassName$2}__group`]],
       {
-        [styles[`${rootClassName}__group--action`]]: variant === "action",
-        [styles[`${rootClassName}__group--title`]]: variant === "title",
-        [styles[`${rootClassName}__group--scroll`]]: isOverflowing
+        [styles$2[`${rootClassName$2}__group--action`]]: variant === "action",
+        [styles$2[`${rootClassName$2}__group--title`]]: variant === "title",
+        [styles$2[`${rootClassName$2}__group--scroll`]]: isOverflowing
       },
       className
     );
@@ -233,19 +239,19 @@ Title.displayName = "Dialog.Title";
 const Description = React__default.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(DrawerPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "paragraph-100", ...props, asChild: false, ref: forwardedRef }) }));
 Description.displayName = "Dialog.Description";
 const Image = React__default.forwardRef(({ asChild, ...props }, forwardedRef) => {
-  const classes = clsx([styles[`${rootClassName}__image`]], props.className);
-  const context = React__default.useContext(RootContext);
+  const classes = clsx([styles$2[`${rootClassName$2}__image`]], props.className);
+  const context = React__default.useContext(RootContext$1);
   const Comp = asChild ? Slot : "img";
   return /* @__PURE__ */ jsx(Comp, { ...props, className: classes, ref: composeRefs(context.imageRef, forwardedRef) });
 });
 Image.displayName = "Dialog.Image";
 const Close = React__default.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    const classes = clsx([styles[`${rootClassName}__close`]], {
-      [styles[`${rootClassName}__close--floating`]]: props.slot === "floating",
+    const classes = clsx([styles$2[`${rootClassName$2}__close`]], {
+      [styles$2[`${rootClassName$2}__close--floating`]]: props.slot === "floating",
       className
     });
-    const imageRef = React__default.useContext(RootContext).imageRef;
+    const imageRef = React__default.useContext(RootContext$1).imageRef;
     const [hasImage, setHasImage] = React__default.useState(false);
     useEffect(() => {
       if (imageRef == null ? void 0 : imageRef.current) {
@@ -256,13 +262,1089 @@ const Close = React__default.forwardRef(
   }
 );
 Close.displayName = "Dialog.Close";
-const Modal = Object.assign(Root, { Trigger, Content, Title, Overlay, Description, Close, Image, Group });
+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
+};
+const rootClassName$1 = "teddy-navigation-menu";
+const NavigationMenuContext = React__default.createContext({
+  selectedTopMenu: void 0,
+  setSelectedTopMenu: () => {
+  },
+  contentRef: { current: null },
+  focusProxyRef: { current: null },
+  topMenuRef: { current: null },
+  id: "",
+  dir: "ltr",
+  orientation: "horizontal",
+  onEntryKeyDown: () => {
+  },
+  onFocusProxyEnter: () => {
+  },
+  onContentFocusOutside: () => {
+  }
+});
+const Root$1 = React__default.forwardRef(
+  ({ className, defaultTopMenuValue, topMenuValue, onTopMenuValueChange, ...props }, forwardRef) => {
+    const [selectedTopMenu, setSelectedTopMenu] = useControllableState({
+      defaultProp: defaultTopMenuValue,
+      prop: topMenuValue,
+      onChange: onTopMenuValueChange
+    });
+    const contentRef = React__default.useRef(null);
+    const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React__default.useState(false);
+    const timerRef = React__default.useRef(void 0);
+    const restoreContentTabOrderRef = React__default.useRef(() => {
+    });
+    const focusProxyRef = React__default.useRef(null);
+    const topMenuRef = React__default.useRef(null);
+    const id = React__default.useId();
+    const handleContentEntry = React__default.useCallback((side = "start") => {
+      if (contentRef.current) {
+        restoreContentTabOrderRef.current();
+        const candidates = getTabbableCandidates(contentRef.current);
+        if (candidates.length)
+          focusFirst(side === "start" ? candidates : candidates.reverse());
+      }
+    }, []);
+    const handleContentExit = React__default.useCallback(() => {
+      if (contentRef.current) {
+        const candidates = getTabbableCandidates(contentRef.current);
+        if (candidates.length)
+          restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
+      }
+    }, []);
+    React__default.useEffect(() => {
+      timerRef.current = setTimeout(() => {
+        setAllowAnimationOfHeight(true);
+      }, 500);
+      return () => {
+        timerRef.current && clearTimeout(timerRef.current);
+      };
+    }, []);
+    const classes = clsx([styles$1[`${rootClassName$1}`]], className);
+    return /* @__PURE__ */ jsx(
+      NavigationMenuContext.Provider,
+      {
+        value: {
+          contentRef,
+          focusProxyRef,
+          topMenuRef,
+          id,
+          dir: props.dir || "ltr",
+          orientation: props.orientation || "horizontal",
+          onEntryKeyDown: handleContentEntry,
+          onFocusProxyEnter: handleContentEntry,
+          onContentFocusOutside: handleContentExit,
+          selectedTopMenu,
+          setSelectedTopMenu
+        },
+        children: /* @__PURE__ */ jsx(
+          NavigationMenuPrimitive.Root,
+          {
+            ...props,
+            style: allowAnimationOfHeight ? mergeStyles(props.style, { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 }) : props.style,
+            ref: forwardRef,
+            className: classes
+          }
+        )
+      }
+    );
+  }
+);
+Root$1.displayName = "NavigationMenu";
+const TopMenuList = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__top-menu-list`]], className);
+    const context = React__default.useContext(NavigationMenuContext);
+    const ref = useComposedRefs(context.topMenuRef, forwardRef);
+    return /* @__PURE__ */ jsx("ul", { ...props, ref, className: classes });
+  }
+);
+TopMenuList.displayName = "NavigationMenu.TopMenuList";
+const TopMenuItem = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__top-menu-item`]], className);
+    return /* @__PURE__ */ jsx("li", { ...props, ref: forwardRef, className: classes });
+  }
+);
+const TopMenuTrigger = React__default.forwardRef(
+  ({ className, asChild, active, ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles$1[`${rootClassName$1}__top-menu-trigger`], styles$1[`${rootClassName$1}__top-menu-trigger--small`]],
+      className
+    );
+    const Comp = asChild ? Slot : "button";
+    const context = React__default.useContext(NavigationMenuContext);
+    const innerRef = React__default.useRef(null);
+    const ref = useComposedRefs(innerRef, forwardRef);
+    const isOpen = context.selectedTopMenu === props.value;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ...props,
+          ref,
+          className: classes,
+          "data-state": isOpen ? "open" : "closed",
+          "data-active": active ? "true" : void 0,
+          "aria-expanded": isOpen,
+          "aria-controls": makeContentId({ value: props.value, baseId: context.id }),
+          ...{ [ITEM_DATA_ATTR]: "" },
+          onClick: composeEventHandlers(props.onClick, () => {
+            context.setSelectedTopMenu(props.value);
+          }),
+          onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+            var _a;
+            const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+            const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
+            if (isOpen && event.key === entryKey) {
+              context.onEntryKeyDown();
+              return event.preventDefault();
+            }
+            const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
+            if (isFocusNavigationKey) {
+              const triggers = (_a = context.topMenuRef.current) == null ? void 0 : _a.querySelectorAll(`[${ITEM_DATA_ATTR}]`);
+              if (!triggers)
+                return;
+              let candidateNodes = Array.from(triggers == null ? void 0 : triggers.values());
+              const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+              const prevKeys = [prevItemKey, "ArrowUp", "End"];
+              if (prevKeys.includes(event.key))
+                candidateNodes.reverse();
+              if (ARROW_KEYS.includes(event.key)) {
+                const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                candidateNodes = candidateNodes.slice(currentIndex + 1);
+                focusFirst(candidateNodes);
+                event.preventDefault();
+              }
+            }
+          })
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        VisuallyHidden,
+        {
+          "aria-hidden": true,
+          tabIndex: 0,
+          ref: context.focusProxyRef,
+          onFocus: (event) => {
+            const content = context.contentRef.current;
+            const prevFocusedElement = event.relatedTarget;
+            const wasTriggerFocused = prevFocusedElement === innerRef.current;
+            const wasFocusFromContent = content == null ? void 0 : content.contains(prevFocusedElement);
+            if (wasTriggerFocused || !wasFocusFromContent) {
+              context.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
+            }
+          }
+        }
+      )
+    ] });
+  }
+);
+const List = React__default.forwardRef(
+  ({ className, variant, value, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__list`]], [styles$1[`${rootClassName$1}__list--${variant}`]], className);
+    const context = React__default.useContext(NavigationMenuContext);
+    const refOnOpen = useComposedRefs(context.contentRef, forwardRef);
+    const hasTopMenu = context.selectedTopMenu !== void 0;
+    const isOpen = context.selectedTopMenu === value;
+    if (!isOpen)
+      return null;
+    return /* @__PURE__ */ jsx(
+      NavigationMenuPrimitive.List,
+      {
+        ref: hasTopMenu ? refOnOpen : forwardRef,
+        id: value && makeContentId({ value, baseId: context.id }),
+        ...props,
+        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+          var _a;
+          if (!value)
+            return;
+          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+          const isTabKey = event.key === "Tab" && !isMetaKey;
+          if (isTabKey) {
+            const candidates = getTabbableCandidates(event.currentTarget);
+            const focusedElement = document.activeElement;
+            const index = candidates.findIndex((candidate) => candidate === focusedElement);
+            const isMovingBackwards = event.shiftKey;
+            const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
+            if (focusFirst(nextCandidates)) {
+              event.preventDefault();
+            } else {
+              (_a = context.focusProxyRef.current) == null ? void 0 : _a.focus();
+              context.onContentFocusOutside();
+            }
+          }
+        }),
+        className: classes
+      }
+    );
+  }
+);
+List.displayName = "NavigationMenu.List";
+const Separator = React__default.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx(
+    [styles$1[`${rootClassName$1}__separator`]],
+    className
+  );
+  return /* @__PURE__ */ jsx(Box, { width: "100%", p: "0", m: "0", ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
+});
+Separator.displayName = "NavigationMenu.Separator";
+const Item = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__item`]], className);
+    return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Item.displayName = "NavigationMenu.Item";
+const Trigger = React__default.forwardRef(
+  ({ className, active, variant = "default", ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles$1[`${rootClassName$1}__trigger`]],
+      [styles$1[`${rootClassName$1}__trigger--${variant}`]],
+      className
+    );
+    const innerRef = React__default.useRef(null);
+    const ref = useComposedRefs(forwardRef, innerRef);
+    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,
+        className: classes,
+        "data-text": getLabelFromChildren(props.children)
+      }
+    );
+  }
+);
+Trigger.displayName = "NavigationMenu.Trigger";
+const Content = React__default.forwardRef(
+  ({ className, variant = "default", ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles$1[`${rootClassName$1}__content`]],
+      [styles$1[`${rootClassName$1}__content--${variant}`]],
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      NavigationMenuPrimitive.Content,
+      {
+        onPointerEnter: (e) => e.preventDefault(),
+        onPointerLeave: (e) => e.preventDefault(),
+        ...props,
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+const Link = React__default.forwardRef(
+  ({ className, variant = "default", ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__link`]], [styles$1[`${rootClassName$1}__link--${variant}`]], className);
+    return /* @__PURE__ */ jsx(
+      NavigationMenuPrimitive.Link,
+      {
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        "data-text": getLabelFromChildren(props.children)
+      }
+    );
+  }
+);
+Link.displayName = "NavigationMenu.Link";
+const Indicator = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__indicator`]], className);
+    return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Indicator, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Indicator.displayName = "NavigationMenu.Indicator";
+const Viewport = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__viewport`]], className);
+    return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Viewport.displayName = "NavigationMenu.Viewport";
+const Sub = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles$1[`${rootClassName$1}__sub`]], className);
+    return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Sub, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Sub.displayName = "NavigationMenu.Sub";
+function getLabelFromChildren(children) {
+  function findLabel(node) {
+    if (typeof node === "string") {
+      return node;
+    }
+    if (React__default.isValidElement(node) && node.props.children) {
+      return findLabel(node.props.children);
+    }
+    if (Array.isArray(node)) {
+      for (let i = node.length - 1; i >= 0; i--) {
+        const label = findLabel(node[i]);
+        if (label) {
+          return label;
+        }
+      }
+    }
+    return void 0;
+  }
+  return findLabel(children);
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode())
+    nodes.push(walker.currentNode);
+  return nodes;
+}
+function focusFirst(candidates) {
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement)
+      return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function removeFromTabOrder(candidates) {
+  candidates.forEach((candidate) => {
+    candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
+    candidate.setAttribute("tabindex", "-1");
+  });
+  return () => {
+    candidates.forEach((candidate) => {
+      const prevTabIndex = candidate.dataset.tabindex;
+      candidate.setAttribute("tabindex", prevTabIndex);
+    });
+  };
+}
+const ITEM_DATA_ATTR = "data-teddy-top-selector-trigger";
+const ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
+function makeContentId(args) {
+  return `teddy-navigation-menu-${args.baseId}-${args.value}-content`;
+}
+const NavigationMenu = Object.assign(Root$1, {
+  List,
+  Separator,
+  Item,
+  Trigger,
+  Content,
+  Link,
+  Indicator,
+  Viewport,
+  Sub,
+  TopMenuList,
+  TopMenuItem,
+  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"
+};
+function MyPages(props) {
+  var _a, _b;
+  const rootContext = React__default.useContext(RootContext);
+  const isLoggedIn = (((_a = rootContext == null ? void 0 : rootContext.loggedInUser) == null ? void 0 : _a.name.length) || 0) > 0;
+  return /* @__PURE__ */ jsxs(Drawer, { ...props, children: [
+    /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: ((_b = rootContext == null ? void 0 : rootContext.loggedInUser) == null ? void 0 : _b.name.length) ? /* @__PURE__ */ jsxs("button", { "data-di-mask": true, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "end-user", size: "sm" }),
+      rootContext.loggedInUser.name
+    ] }) : /* @__PURE__ */ jsxs("button", { children: [
+      /* @__PURE__ */ jsx(Icon, { name: "login", size: "sm" }),
+      "Logg inn"
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Drawer.Content, { asChild: true, size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
+      /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
+      isLoggedIn ? /* @__PURE__ */ jsx(LoggedInContent, {}) : /* @__PURE__ */ jsx(LoggedOutContent, {}),
+      /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
+    ] })
+  ] });
+}
+function LoggedOutContent() {
+  return /* @__PURE__ */ jsxs(Grid, { gap: "400", children: [
+    /* @__PURE__ */ jsx(Drawer.Title, { children: "Logg inn" }),
+    /* @__PURE__ */ jsxs(TextSpacing, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", children: "Privat" }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: MY_PAGE_LINKS.link, children: [
+        MY_PAGE_LINKS.name,
+        " ",
+        /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(TextSpacing, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", children: "Bedrift" }),
+      /* @__PURE__ */ jsx(Grid, { gap: "150", children: LOGGED_IN_LINKS_BUSINESS.map((link) => /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: link.link, children: [
+        link.name,
+        " ",
+        /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+      ] }) })) })
+    ] })
+  ] });
+}
+function LoggedInContent() {
+  var _a;
+  const rootContext = React__default.useContext(RootContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Drawer.Title, { children: "Dine sider" }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "private", children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "private", children: "Privat" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "business", children: "Bedrift" })
+      ] }),
+      /* @__PURE__ */ jsxs(TextSpacing, { children: [
+        /* @__PURE__ */ jsxs(Tabs.Content, { value: "private", children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Min Side" }),
+          (_a = MY_PAGE_LINKS.links) == null ? void 0 : _a.map((link) => /* @__PURE__ */ jsx(Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsx("a", { href: link.link, children: /* @__PURE__ */ jsx(Icon, { name: link.icon, children: link.name }) }) }, link.link))
+        ] }),
+        /* @__PURE__ */ jsxs(Tabs.Content, { value: "business", children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "title-100", as: "h3", mb: "100", mt: "400", children: "Bedriftsportaler" }),
+          LOGGED_IN_LINKS_BUSINESS.map((link) => /* @__PURE__ */ jsx(Button, { variant: "list-item", fullWidth: true, asChild: true, children: /* @__PURE__ */ jsx("a", { href: link.link, children: /* @__PURE__ */ jsx(Icon, { name: link.icon, children: link.name }) }) }, link.link))
+        ] }),
+        /* @__PURE__ */ jsx(Button, { mt: "200", onClick: () => rootContext == null ? void 0 : rootContext.onLogoutClick(), variant: "secondary", children: /* @__PURE__ */ jsx(Icon, { name: "logout", children: "Logg ut" }) })
+      ] })
+    ] })
+  ] });
+}
+MyPages.displayName = "MyPages";
+const SearchField = React__default.forwardRef(
+  (props, forwardRef) => {
+    const ref = React__default.useRef(null);
+    const context = React__default.useContext(RootContext);
+    const composedRef = useComposedRefs(forwardRef, ref);
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        onSubmit: (e) => {
+          var _a, _b;
+          console.log("Search submitted,111");
+          if (context == null ? void 0 : context.onSearchSubmit) {
+            context.onSearchSubmit(e, (_a = ref.current) == null ? void 0 : _a.value);
+          }
+          if (!window || e.isDefaultPrevented())
+            return;
+          e.preventDefault();
+          window.location.href = `/sok?q=${encodeURIComponent(((_b = ref.current) == null ? void 0 : _b.value) || "")}`;
+        },
+        children: /* @__PURE__ */ jsxs(TextField, { ...props, children: [
+          /* @__PURE__ */ jsx(TextField.Label, { children: "Søk i innhold" }),
+          /* @__PURE__ */ jsxs(TextField.InputGroup, { children: [
+            /* @__PURE__ */ jsx(Icon, { name: "search" }),
+            /* @__PURE__ */ jsx(TextField.Input, { ref: composedRef, placeholder: "Søk her" }),
+            /* @__PURE__ */ jsx(TextField.ClearButton, {})
+          ] }),
+          /* @__PURE__ */ jsx(TextField.Button, { variant: "separated", children: "Søk" })
+        ] })
+      }
+    );
+  }
+);
+SearchField.displayName = "SearchField";
+function Search(props) {
+  const rootContext = React__default.useContext(RootContext);
+  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: [
+      /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm" }),
+      " Søk"
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(
+      Drawer.Content,
+      {
+        size: rootContext == null ? void 0 : rootContext.drawerSize,
+        onOpenAutoFocus: (e) => {
+          var _a;
+          e.preventDefault();
+          (_a = searchFieldRef.current) == null ? void 0 : _a.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
+          /* @__PURE__ */ jsx(Drawer.Title, { children: "Hva leter du etter?" }),
+          /* @__PURE__ */ jsx(SearchField, { ref: searchFieldRef }),
+          /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
+        ]
+      }
+    )
+  ] });
+}
+Search.displayName = "Search";
+const ShoppingCart = React__default.forwardRef(() => {
+  const rootContext = React__default.useContext(RootContext);
+  const shoppingCartContent = rootContext == null ? void 0 : rootContext.shoppingCart;
+  const numberOfItemsInCart = (rootContext == null ? void 0 : rootContext.shoppingCartNumberOfItems) || 0;
+  const titleSuffix = numberOfItemsInCart > 0 ? `(${numberOfItemsInCart})` : "";
+  if (!numberOfItemsInCart)
+    return null;
+  return /* @__PURE__ */ jsxs(Drawer, { open: rootContext == null ? void 0 : rootContext.isCartOpen, onOpenChange: rootContext == null ? void 0 : rootContext.onCartOpenChange, children: [
+    /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx([styles[`${rootClassName}__item-wrapper`]]), children: [
+        /* @__PURE__ */ jsx(Icon, { name: "cart", size: "sm" }),
+        numberOfItemsInCart > 0 && /* @__PURE__ */ jsx("span", { className: clsx([styles[`${rootClassName}__item-count`]]), children: /* @__PURE__ */ jsx(CounterBadge, { variant: "attention", children: numberOfItemsInCart }) })
+      ] }),
+      "Handlekurv"
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Drawer.Content, { size: rootContext == null ? void 0 : rootContext.drawerSize, children: [
+      /* @__PURE__ */ jsx(Drawer.Close, { slot: "floating", "aria-label": "Lukk" }),
+      /* @__PURE__ */ jsxs(Drawer.Title, { children: [
+        "Handlekurv ",
+        titleSuffix
+      ] }),
+      shoppingCartContent ? shoppingCartContent : null,
+      /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
+    ] })
+  ] });
+});
+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 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 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 currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
+  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 } : {}
+        ),
+        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)) })
+      }
+    ) }),
+    LINKS.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: subSubLink.name }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: subSubLink.name })
+              }
+            ) }, subSubLink.name)) }) })
+          ] }, subLink.name);
+        }),
+        /* @__PURE__ */ jsx(Box, { ml: "auto" }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
+      ] }, link.name);
+    }),
+    /* @__PURE__ */ jsx(NavigationMenu.Separator, {}),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles(
+          { ["--teddy-viewport-wrapper-height"]: viewPortHeight },
+          allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 } : {}
+        ),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu === null ? "" : hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(
+          NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
+  ] });
+});
+Desktop.displayName = "Desktop";
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = React__default.useRef(0);
+  React__default.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React__default.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
+function Mobile(props) {
+  const rootContext = React__default.useContext(RootContext);
+  const drawerRef = React__default.useRef(null);
+  if (!rootContext)
+    return null;
+  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: "100", children: [
+                                  subSubLink.name,
+                                  " ",
+                                  /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                                ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", children: [
+                                  subSubLink.name,
+                                  " ",
+                                  /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                                ] }) })
+                              }
+                            ) }, subSubLink.name)) }) })
+                          ] }, subLink.name) : /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__accordion-look`], children: /* @__PURE__ */ jsx(
+                            Link$1,
+                            {
+                              className: clsx([
+                                linkClasses,
+                                styles[`${rootClassName}__mobile-link--accordion-look`]
+                              ]),
+                              variant: "standalone",
+                              asChild: true,
+                              onClick: () => {
+                                var _a3;
+                                (_a3 = drawerRef.current) == null ? void 0 : _a3.click();
+                                rootContext.setSelectedMenuItem(subLink.name);
+                                rootContext.setPathname(subLink.link);
+                              },
+                              children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxs(NavLink, { href: subLink.link, children: [
+                                subLink.name,
+                                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                              ] }) : /* @__PURE__ */ jsxs("a", { href: subLink.link, children: [
+                                subLink.name,
+                                " ",
+                                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+                              ] })
+                            }
+                          ) }, subLink.name);
+                        }
+                      )
+                    }
+                  ) }, link.name);
+                }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { slot: "content", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Lukk" }) }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+Mobile.displayName = "Mobile";
+const 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) => {
+      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(
+          "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"
+          }
+        ) }) }) }, subLink.name)),
+        /* @__PURE__ */ jsx(Box, { ml: "auto" }),
+        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) })
+      ] }, link.name);
+    }),
+    /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
+  ] });
+});
+DesktopSimplified.displayName = "DesktopSimplified";
+function MobileSimplified(props) {
+  const rootContext = React__default.useContext(RootContext);
+  if (!rootContext)
+    return null;
+  const { linkComponent: NavLink } = rootContext;
+  const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
+  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__ */ jsx(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, children: /* @__PURE__ */ jsx(ShoppingCart, {}) })
+  ] }) });
+}
+MobileSimplified.displayName = "MobileSimplified";
+const rootClassName = "teddy-global-navigation";
+const RootContext = React__default.createContext(null);
+function Root({
+  className,
+  appKey,
+  loggedInUser,
+  linkComponent,
+  onLogoutClick,
+  shoppingCart,
+  shoppingCartNumberOfItems,
+  onSearchSubmit,
+  isCartOpen,
+  onCartOpenChange,
+  drawerSize = "md",
+  isSimplified,
+  currentPath,
+  ...props
+}) {
+  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath));
+  const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath));
+  const [pathname, setPathname] = React__default.useState(currentPath || "");
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  return /* @__PURE__ */ jsx(
+    RootContext.Provider,
+    {
+      value: {
+        appKey,
+        loggedInUser,
+        selectedMenuItem,
+        setSelectedMenuItem(v, onlyStateChange) {
+          if (appKey === "open-pages" && !onlyStateChange)
+            return;
+          setSelectedMenuItem(v);
+        },
+        linkComponent,
+        selectedDomainItem,
+        setSelectedDomainItem(v, onlyStateChange) {
+          if (appKey === "open-pages" && !onlyStateChange)
+            return;
+          setSelectedDomainItem(v);
+        },
+        pathname,
+        setPathname(v) {
+          if (appKey === "open-pages")
+            return;
+          setPathname(v);
+        },
+        onLogoutClick,
+        shoppingCart,
+        shoppingCartNumberOfItems,
+        onSearchSubmit,
+        isCartOpen,
+        onCartOpenChange,
+        drawerSize
+      },
+      children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
+        NavigationMenu,
+        {
+          topMenuValue: selectedDomainItem,
+          onTopMenuValueChange: setSelectedDomainItem,
+          value: selectedMenuItem,
+          onValueChange: (v) => {
+            if (v === "" || appKey === "open-pages")
+              return;
+            setSelectedMenuItem(v);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { display: { sm: "none", lg: "block" }, children: [
+              isSimplified && /* @__PURE__ */ jsx(DesktopSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsx(Desktop, {})
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { display: { lg: "none" }, children: [
+              isSimplified && /* @__PURE__ */ jsx(MobileSimplified, {}),
+              !isSimplified && /* @__PURE__ */ jsx(Mobile, {})
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+Root.displayName = "Root";
+function getInitialDomain(currentPath) {
+  if (!currentPath)
+    return PRIVATE_LINKS.name;
+  const locationArray = currentPath ? currentPath.split("/") : [];
+  const domainPartOfLocation = `/${locationArray[1].toLowerCase()}/`;
+  const initDomain = domainPartOfLocation === BUSINESS_LINKS.link ? BUSINESS_LINKS.name : domainPartOfLocation === MDU_LINKS.link ? MDU_LINKS.name : PRIVATE_LINKS.name;
+  return initDomain;
+}
+function getInitialMenuItem(currentPath) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!currentPath)
+    return;
+  const locationArray = currentPath ? currentPath.split("/") : [];
+  const initialDomain = getInitialDomain(currentPath);
+  if (initialDomain === "Bedrift") {
+    const mainMenuPartOfLocation2 = locationArray[2];
+    return (_b = (_a = BUSINESS_LINKS.links) == null ? void 0 : _a.find(
+      (link) => {
+        var _a2;
+        return link.link === `/${initialDomain.toLowerCase()}/${mainMenuPartOfLocation2}/` || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${initialDomain.toLowerCase()}/${mainMenuPartOfLocation2}/`));
+      }
+    )) == null ? void 0 : _b.name;
+  }
+  if (initialDomain === "Borettslag") {
+    const mainMenuPartOfLocation2 = locationArray[2];
+    return (_d = (_c = MDU_LINKS.links) == null ? void 0 : _c.find((link) => link.link === `/${initialDomain.toLowerCase()}/${mainMenuPartOfLocation2}/`)) == null ? void 0 : _d.name;
+  }
+  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}/`));
+  })) == null ? void 0 : _f.name;
+}
+Root.displayName = "GlobalNavigation";
+const GlobalNavigation = Root;
 export {
   Body as B,
-  Content$1 as C,
+  Content$2 as C,
+  Desktop as D,
+  GlobalNavigation as G,
   ItemContext as I,
   Modal as M,
+  NavigationMenu as N,
   RadioCardGroup as R,
+  Separator as S,
   Title$1 as Title,
-  Item as a
+  Item$1 as a,
+  MyPages as b,
+  SearchField as c,
+  Search as d,
+  ShoppingCart as e,
+  Mobile as f,
+  DesktopSimplified as g,
+  MobileSimplified as h,
+  rootClassName as i,
+  RootContext as j,
+  Root as k,
+  rootClassName$1 as r
 };