@norges-domstoler/dds-components 15.2.0 → 15.2.1

package/dist/index.mjs

@@ -1130,14 +1130,14 @@ function Icon(props) {
     id,
     iconSize = "medium",
     color = "currentcolor",
-    icon: icon12,
+    icon: icon11,
     className,
     htmlProps = {},
     ...rest
   } = props;
   const { title: title3, "aria-hidden": ariaHidden = true } = htmlProps;
   const size2 = getSize(iconSize);
-  return icon12({
+  return icon11({
     ...getBaseHTMLProps(id, className, htmlProps, rest),
     title: title3,
     height: size2,
@@ -2755,7 +2755,7 @@ import {
   useState as useState2
 } from "react";
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, reset, direction = "column") {
+function useRoveFocus(size2, active, direction = "column") {
   const [currentFocusIndex, setCurrentFocusIndex] = useState2(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -2763,31 +2763,30 @@ function useRoveFocus(size2, reset, direction = "column") {
     (e) => {
       if (!size2 || !isKeyboardEvent(e))
         return;
-      if (reset)
-        setCurrentFocusIndex(-1);
       if (e.key === nextKey) {
         e.preventDefault();
-        setCurrentFocusIndex(
-          currentFocusIndex === size2 - 1 ? 0 : currentFocusIndex + 1
-        );
+        setCurrentFocusIndex((prev) => prev === size2 - 1 ? 0 : prev + 1);
       } else if (e.key === previousKey) {
         e.preventDefault();
-        if (currentFocusIndex !== -1) {
-          setCurrentFocusIndex(
-            currentFocusIndex === 0 ? size2 - 1 : currentFocusIndex - 1
-          );
-        } else
-          setCurrentFocusIndex(size2 - 1);
+        setCurrentFocusIndex((prev) => {
+          if (prev === -1 || prev === 0)
+            return size2 - 1;
+          return prev - 1;
+        });
       }
     },
-    [size2, currentFocusIndex, setCurrentFocusIndex, reset]
+    [size2, setCurrentFocusIndex]
   );
   useEffect7(() => {
+    if (!active) {
+      setCurrentFocusIndex(-1);
+      return;
+    }
     document.addEventListener("keydown", handleKeyDown, false);
     return () => {
       document.removeEventListener("keydown", handleKeyDown, false);
     };
-  }, [handleKeyDown]);
+  }, [handleKeyDown, active]);
   return [currentFocusIndex, setCurrentFocusIndex];
 }
 
@@ -3026,7 +3025,7 @@ var ExternalNavItem = styled9(BaseLink)`
 var NavigationItem = ({
   as: _as,
   active,
-  icon: icon12,
+  icon: icon11,
   external,
   children,
   onClick: propOnClick,
@@ -3052,7 +3051,7 @@ var NavigationItem = ({
       onClick,
       className: [active ? "active" : "", rest.className].join(" "),
       children: [
-        /* @__PURE__ */ jsx163(IconContainer, { children: icon12 && /* @__PURE__ */ jsx163(Icon, { icon: icon12 }) }),
+        /* @__PURE__ */ jsx163(IconContainer, { children: icon11 && /* @__PURE__ */ jsx163(Icon, { icon: icon11 }) }),
         /* @__PURE__ */ jsx163(TextContainer, { children }),
         /* @__PURE__ */ jsx163(ChevronContainer, { children: /* @__PURE__ */ jsx163(Icon, { icon: ChevronRightIcon }) })
       ]
@@ -3906,7 +3905,7 @@ var Button = forwardRef9(
       loading = false,
       loadingTooltip = "Lagring p\xE5g\xE5r",
       fullWidth = false,
-      icon: icon12,
+      icon: icon11,
       onClick,
       onFocus,
       onBlur,
@@ -3917,7 +3916,7 @@ var Button = forwardRef9(
     } = props;
     const as = href ? "a" : "button";
     const hasLabel = !!children || !!label3;
-    const hasIcon = !!icon12;
+    const hasIcon = !!icon11;
     const wrapperProps = {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       href,
@@ -3942,13 +3941,13 @@ var Button = forwardRef9(
       onBlur
     };
     const isIconButton = !hasLabel && hasIcon;
-    const iconElement = icon12 && /* @__PURE__ */ jsx172(
+    const iconElement = icon11 && /* @__PURE__ */ jsx172(
       StyledIconWrapperSpan,
       {
         size: size2,
         isHidden: hasIcon && loading,
         justIcon: isIconButton,
-        children: /* @__PURE__ */ jsx172(Icon, { icon: icon12, iconSize: "inherit" })
+        children: /* @__PURE__ */ jsx172(Icon, { icon: icon11, iconSize: "inherit" })
       }
     );
     return /* @__PURE__ */ jsxs20(ButtonWrapper, { ...wrapperProps, "aria-disabled": loading, children: [
@@ -4030,7 +4029,6 @@ var overflowMenuTokens = {
 // src/components/OverflowMenu/OverflowMenuItem.tsx
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback4,
   useEffect as useEffect9,
   useRef as useRef5
 } from "react";
@@ -4081,18 +4079,7 @@ var IconWrapper = styled15.span`
 var isAnchorProps2 = (props) => props.href !== void 0;
 var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
 var OverflowMenuItem = forwardRef10((props, ref) => {
-  const {
-    title: title3,
-    icon: icon12,
-    focus,
-    setFocus,
-    index,
-    id,
-    className,
-    htmlProps = {},
-    ...rest
-  } = props;
-  const { onKeyDown } = htmlProps;
+  const { title: title3, icon: icon11, focus, id, className, htmlProps = {}, ...rest } = props;
   let href;
   let onClick;
   if (isAnchorProps2(props)) {
@@ -4108,27 +4095,12 @@ var OverflowMenuItem = forwardRef10((props, ref) => {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = useCallback4(() => {
-    if (setFocus && index) {
-      setFocus(index);
-    }
-  }, [index, setFocus]);
-  const handleOnClick = (e) => {
-    handleSelect();
-    onClick && onClick(e);
-  };
-  const handleOnKeyDown = (e) => {
-    handleSelect();
-    onKeyDown && onKeyDown(e);
-  };
   const linkProps = {
     href,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
     role: "menuitem",
     tabIndex: focus ? 0 : -1
   };
-  const iconElement = icon12 && /* @__PURE__ */ jsx173(Icon, { iconSize: "inherit", icon: icon12 });
+  const iconElement = icon11 && /* @__PURE__ */ jsx173(Icon, { iconSize: "inherit", icon: icon11 });
   if (!href && !onClick) {
     return /* @__PURE__ */ jsxs21(Span, { ...{ ...getBaseHTMLProps(id, className, htmlProps, rest), ref }, children: [
       /* @__PURE__ */ jsx173(IconWrapper, { children: iconElement }),
@@ -4214,7 +4186,7 @@ Divider.displayName = "Divider";
 
 // src/components/ScrollableContainer/Scrollbar.tsx
 import {
-  useCallback as useCallback5,
+  useCallback as useCallback4,
   useEffect as useEffect10,
   useRef as useRef6,
   useState as useState5
@@ -4302,7 +4274,7 @@ var Scrollbar = (props) => {
       Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx)
     );
   }
-  const handleTrackClick = useCallback5(
+  const handleTrackClick = useCallback4(
     (e) => {
       if (contentRef == null ? void 0 : contentRef.current) {
         const { current: trackCurrent } = trackRef;
@@ -4326,7 +4298,7 @@ var Scrollbar = (props) => {
     },
     [thumbHeight]
   );
-  const handleThumbPositioning = useCallback5(() => {
+  const handleThumbPositioning = useCallback4(() => {
     if (!(contentRef == null ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
       return;
     }
@@ -4352,18 +4324,18 @@ var Scrollbar = (props) => {
       };
     }
   }, []);
-  const handleThumbMousedown = useCallback5((e) => {
+  const handleThumbMousedown = useCallback4((e) => {
     setScrollStartPosition(e.clientY);
     if (contentRef == null ? void 0 : contentRef.current)
       setInitialScrollTop(contentRef.current.scrollTop);
     setIsDragging(true);
   }, []);
-  const handleThumbMouseup = useCallback5(() => {
+  const handleThumbMouseup = useCallback4(() => {
     if (isDragging) {
       setIsDragging(false);
     }
   }, [isDragging]);
-  const handleThumbMousemove = useCallback5(
+  const handleThumbMousemove = useCallback4(
     (e) => {
       if (contentRef == null ? void 0 : contentRef.current) {
         if (isDragging) {
@@ -4589,13 +4561,12 @@ var OverflowMenu = forwardRef12(
     hasNavItems && interactiveItems.push(...navItems);
     hasContextItems && interactiveItems.push(...items);
     const hasInteractiveItems = interactiveItems.length > 0;
-    const [focus, setFocus] = useRoveFocus(interactiveItems == null ? void 0 : interactiveItems.length, !isOpen);
+    const [focus] = useRoveFocus(interactiveItems == null ? void 0 : interactiveItems.length, isOpen);
     const interactiveItemsList = hasInteractiveItems ? interactiveItems.map((item, index) => /* @__PURE__ */ jsx177("li", { children: /* @__PURE__ */ jsx177(
       OverflowMenuItem,
       {
         index,
         focus: focus === index && isOpen,
-        setFocus,
         icon: hasInteractiveUser && index === 0 ? PersonIcon : void 0,
         ...item,
         onClick: (e) => {
@@ -5019,33 +4990,26 @@ import styled23 from "styled-components";
 
 // src/components/BackLink/BackLink.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens22 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors12, spacing: spacing10 } = ddsBaseTokens22;
-var icon2 = {
-  color: colors12.DdsColorInteractiveBase
-};
-var nav = {
-  gap: spacing10.SizesDdsSpacingX05
+var { spacing: spacing10 } = ddsBaseTokens22;
+var link3 = {
+  gap: spacing10.SizesDdsSpacingX025
 };
 var backLinkTokens = {
-  icon: icon2,
-  nav
+  link: link3
 };
 
 // src/components/BackLink/BackLink.tsx
 import { jsx as jsx182, jsxs as jsxs28 } from "react/jsx-runtime";
-var Nav = styled23("nav")`
+var StyledLink2 = styled23(Link)`
   align-items: center;
   display: flex;
-  gap: ${backLinkTokens.nav.gap};
-`;
-var StyledIcon = styled23(Icon)`
-  color: ${backLinkTokens.icon.color};
+  gap: ${backLinkTokens.link.gap};
 `;
 var BackLink = forwardRef13((props, ref) => {
-  return /* @__PURE__ */ jsxs28(Nav, { ref, children: [
-    /* @__PURE__ */ jsx182(StyledIcon, { icon: ArrowLeftIcon, iconSize: "small" }),
-    /* @__PURE__ */ jsx182(Typography, { typographyType: "a", href: props.href, children: props.label })
-  ] });
+  return /* @__PURE__ */ jsx182("nav", { ref, "aria-label": "g\xE5 tilbake", children: /* @__PURE__ */ jsxs28(StyledLink2, { href: props.href, children: [
+    /* @__PURE__ */ jsx182(Icon, { icon: ArrowLeftIcon, iconSize: "small" }),
+    props.label
+  ] }) });
 });
 BackLink.displayName = "BackLink";
 
@@ -5074,10 +5038,10 @@ import styled24 from "styled-components";
 
 // src/components/Breadcrumbs/Breadcrumb.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens23 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors13, spacing: spacing11 } = ddsBaseTokens23;
+var { colors: colors12, spacing: spacing11 } = ddsBaseTokens23;
 var typographyType2 = "bodySans02";
-var icon3 = {
-  color: colors13.DdsColorInteractiveBase
+var icon2 = {
+  color: colors12.DdsColorInteractiveBase
 };
 var listItem = {
   gap: spacing11.SizesDdsSpacingX05
@@ -5088,12 +5052,12 @@ var list = {
 var breadcrumbTokens = {
   list,
   listItem,
-  icon: icon3
+  icon: icon2
 };
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { jsx as jsx184, jsxs as jsxs29 } from "react/jsx-runtime";
-var { icon: icon4, list: list2, listItem: listItem2 } = breadcrumbTokens;
+var { icon: icon3, list: list2, listItem: listItem2 } = breadcrumbTokens;
 var List = styled24.ol`
   ${removeListStyling}
   display: flex;
@@ -5109,8 +5073,8 @@ var ListItem = styled24.li`
   ${getFontStyling(typographyType2)}
 `;
 ListItem.displayName = "ListItem";
-var StyledIcon2 = styled24(Icon)`
-  color: ${icon4.color};
+var StyledIcon = styled24(Icon)`
+  color: ${icon3.color};
 `;
 var Breadcrumbs = forwardRef15(
   (props, ref) => {
@@ -5118,7 +5082,7 @@ var Breadcrumbs = forwardRef15(
     const childrenArray = Children2.toArray(children);
     const breadcrumbChildren = childrenArray.map((item, index) => {
       return /* @__PURE__ */ jsxs29(ListItem, { children: [
-        index !== 0 && /* @__PURE__ */ jsx184(StyledIcon2, { icon: ChevronRightIcon }),
+        index !== 0 && /* @__PURE__ */ jsx184(StyledIcon, { icon: ChevronRightIcon }),
         item
       ] }, `breadcrumb-${index}`);
     });
@@ -5143,29 +5107,29 @@ import {
   ddsBaseTokens as ddsBaseTokens24,
   ddsReferenceTokens as ddsReferenceTokens4
 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors14, border: border8 } = ddsBaseTokens24;
+var { colors: colors13, border: border8 } = ddsBaseTokens24;
 var { textDefault: textDefault3 } = ddsReferenceTokens4;
 var base2 = {
   border: `${border8.BordersDdsBorderStyleLightStrokeWeight} solid`
 };
 var cardColors = {
   filledLight: {
-    backgroundColor: colors14.DdsColorPrimaryLightest,
-    borderColor: colors14.DdsColorPrimaryLightest,
+    backgroundColor: colors13.DdsColorPrimaryLightest,
+    borderColor: colors13.DdsColorPrimaryLightest,
     color: textDefault3.textColor
   },
   filledDark: {
-    backgroundColor: colors14.DdsColorPrimaryBase,
-    borderColor: colors14.DdsColorPrimaryBase,
-    color: colors14.DdsColorNeutralsWhite
+    backgroundColor: colors13.DdsColorPrimaryBase,
+    borderColor: colors13.DdsColorPrimaryBase,
+    color: colors13.DdsColorNeutralsWhite
   },
   strokeDark: {
-    backgroundColor: colors14.DdsColorNeutralsWhite,
+    backgroundColor: colors13.DdsColorNeutralsWhite,
     borderColor: border8.BordersDdsBorderStyleLightStroke,
     color: textDefault3.textColor
   },
   strokeLight: {
-    backgroundColor: colors14.DdsColorNeutralsWhite,
+    backgroundColor: colors13.DdsColorNeutralsWhite,
     borderColor: border8.BordersDdsBorderStyleLightStroke,
     color: textDefault3.textColor
   }
@@ -5254,7 +5218,7 @@ var Card = (props) => {
 Card.displayName = "Card";
 
 // src/components/Card/CardAccordion/CardAccordion.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback6, useEffect as useEffect13, useId as useId4, useState as useState7 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback5, useEffect as useEffect13, useId as useId4, useState as useState7 } from "react";
 import styled26 from "styled-components";
 
 // src/components/Card/CardAccordion/CardAccordionContext.tsx
@@ -5297,7 +5261,7 @@ var CardAccordion = forwardRef16(
     useEffect13(() => {
       setExpanded(isExpanded);
     }, [isExpanded]);
-    const toggleExpanded = useCallback6(() => {
+    const toggleExpanded = useCallback5(() => {
       setExpanded((prevExpanded) => {
         const newExpanded = !prevExpanded;
         if (onChange) {
@@ -5573,13 +5537,13 @@ import styled29 from "styled-components";
 
 // src/components/Chip/Chip.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens26 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors15, spacing: spacing13, borderRadius: borderRadius5 } = ddsBaseTokens26;
+var { colors: colors14, spacing: spacing13, borderRadius: borderRadius5 } = ddsBaseTokens26;
 var typographyType3 = "bodySans01";
 var container3 = {
   gap: spacing13.SizesDdsSpacingX025,
   padding: `${spacing13.SizesDdsSpacingX0125} ${spacing13.SizesDdsSpacingX025}`,
-  backgroundColor: colors15.DdsColorNeutralsGray1,
-  border: `1px solid ${colors15.DdsColorNeutralsGray3}`,
+  backgroundColor: colors14.DdsColorNeutralsGray1,
+  border: `1px solid ${colors14.DdsColorNeutralsGray3}`,
   borderRadius: borderRadius5.RadiiDdsBorderRadius1Radius
 };
 var group = {
@@ -6105,7 +6069,7 @@ import styled35, { css as css14 } from "styled-components";
 
 // src/components/date-inputs/DatePicker/DatePicker.tokens.ts
 import { ddsBaseTokens as ddsBaseTokens28 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors16 } = ddsBaseTokens28;
+var { colors: colors15 } = ddsBaseTokens28;
 var segment = {
   medium: {
     font: {
@@ -6113,7 +6077,7 @@ var segment = {
     },
     placeholder: {
       ...ddsBaseTokens28.fontPackages.supportingStyle_placeholdertext_01.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   small: {
@@ -6122,7 +6086,7 @@ var segment = {
     },
     placeholder: {
       ...ddsBaseTokens28.fontPackages.supportingStyle_placeholdertext_02.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   tiny: {
@@ -6131,7 +6095,7 @@ var segment = {
     },
     placeholder: {
       ...ddsBaseTokens28.fontPackages.supportingStyle_placeholdertext_03.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   padding: {
@@ -6139,24 +6103,24 @@ var segment = {
     y: "0"
   },
   focus: {
-    textColor: colors16.DdsColorNeutralsWhite,
-    backgroundColor: colors16.DdsColorInteractiveBase
+    textColor: colors15.DdsColorNeutralsWhite,
+    backgroundColor: colors15.DdsColorInteractiveBase
   }
 };
 var calendarButton = {
-  color: colors16.DdsColorNeutralsGray9,
+  color: colors15.DdsColorNeutralsGray9,
   disabled: {
-    color: colors16.DdsColorNeutralsGray6
+    color: colors15.DdsColorNeutralsGray6
   },
   background: "transparent",
   borderRadius: ddsBaseTokens28.borderRadius.RadiiDdsBorderRadius1Radius,
   hover: {
-    background: colors16.DdsColorInteractiveLightest,
-    color: colors16.DdsColorInteractiveBase
+    background: colors15.DdsColorInteractiveLightest,
+    color: colors15.DdsColorInteractiveBase
   },
   active: {
-    background: colors16.DdsColorInteractiveLighter,
-    color: colors16.DdsColorInteractiveBase
+    background: colors15.DdsColorInteractiveLighter,
+    color: colors15.DdsColorInteractiveBase
   },
   medium: {
     size: `calc(${ddsBaseTokens28.iconSizes.DdsIconsizeMedium} + ${ddsBaseTokens28.spacing.SizesDdsSpacingX05})`
@@ -6649,14 +6613,14 @@ import styled39, { css as css16 } from "styled-components";
 
 // src/components/DescriptionList/DescriptionList.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens29 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing14, colors: colors17 } = ddsBaseTokens29;
+var { spacing: spacing14, colors: colors16 } = ddsBaseTokens29;
 var term = {
   appearance: {
     small: {
-      color: colors17.DdsColorNeutralsGray7
+      color: colors16.DdsColorNeutralsGray7
     },
     bold: {
-      color: colors17.DdsColorNeutralsGray9
+      color: colors16.DdsColorNeutralsGray9
     }
   },
   firstOfType: {
@@ -6666,7 +6630,7 @@ var term = {
 var desc = {
   base: {
     gap: spacing14.SizesDdsSpacingX025,
-    color: colors17.DdsColorNeutralsGray9
+    color: colors16.DdsColorNeutralsGray9
   },
   lastChild: {
     marginBottom: spacing14.SizesDdsSpacingX1
@@ -6774,14 +6738,14 @@ var DListDesc = styled41.dd`
   gap: ${descriptionListTokens.desc.base.gap};
 `;
 var DescriptionListDesc = forwardRef27((props, ref) => {
-  const { children, icon: icon12, id, className, htmlProps, ...rest } = props;
+  const { children, icon: icon11, id, className, htmlProps, ...rest } = props;
   const dListDescProps = {
     ...getBaseHTMLProps(id, className, htmlProps, rest),
     children,
     ref
   };
   return /* @__PURE__ */ jsxs37(DListDesc, { ...dListDescProps, children: [
-    icon12 && /* @__PURE__ */ jsx204(Icon, { icon: icon12 }),
+    icon11 && /* @__PURE__ */ jsx204(Icon, { icon: icon11 }),
     " ",
     children
   ] });
@@ -7043,7 +7007,7 @@ DrawerGroup.displayName = "DrawerGroup";
 import { ddsBaseTokens as ddsBaseTokens31 } from "@norges-domstoler/dds-design-tokens";
 import styled44 from "styled-components";
 import { jsx as jsx207, jsxs as jsxs40 } from "react/jsx-runtime";
-var { colors: colors18, spacing: spacing16 } = ddsBaseTokens31;
+var { colors: colors17, spacing: spacing16 } = ddsBaseTokens31;
 var StyledEmptyContent = styled44.div`
   display: flex;
   justify-content: center;
@@ -7051,7 +7015,7 @@ var StyledEmptyContent = styled44.div`
   min-height: ${spacing16.SizesDdsSpacingX10};
   height: 100%;
   width: 100%;
-  background-color: ${colors18.DdsColorNeutralsGray1};
+  background-color: ${colors17.DdsColorNeutralsGray1};
   padding: ${spacing16.SizesDdsSpacingX15};
 `;
 var StyledEmptyContentText = styled44.div`
@@ -7117,13 +7081,13 @@ function favStarTokens(size2, variant) {
 import { useState as useState12 } from "react";
 
 // src/hooks/useCallbackRef.ts
-import { useCallback as useCallback7, useEffect as useEffect17, useRef as useRef19 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect17, useRef as useRef19 } from "react";
 function useCallbackRef(callback, deps = []) {
   const callbackRef = useRef19(callback);
   useEffect17(() => {
     callbackRef.current = callback;
   });
-  return useCallback7((...args) => {
+  return useCallback6((...args) => {
     var _a;
     return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
   }, deps);
@@ -7153,7 +7117,7 @@ function useControllableState(props) {
 // src/components/FavStar/FavStar.tsx
 import { jsx as jsx208, jsxs as jsxs41 } from "react/jsx-runtime";
 var TRANSITION_SPEED = "0.2s";
-var StyledIcon3 = styled45(Icon)`
+var StyledIcon2 = styled45(Icon)`
   color: currentColor;
   position: absolute;
   top: 0;
@@ -7199,7 +7163,7 @@ var Container5 = styled45.label`
   }
 
   &:active {
-    ${StyledIcon3} {
+    ${StyledIcon2} {
       transform: scale(0.75);
     }
   }
@@ -7255,9 +7219,9 @@ var FavStar = forwardRef30(
               "aria-label": (_a = props["aria-label"]) != null ? _a : "Favoriser"
             }
           ),
-          /* @__PURE__ */ jsx208(StyledIcon3, { iconSize: size2, icon: StarIcon }),
+          /* @__PURE__ */ jsx208(StyledIcon2, { iconSize: size2, icon: StarIcon }),
           /* @__PURE__ */ jsx208(
-            StyledIcon3,
+            StyledIcon2,
             {
               iconSize: size2,
               icon: StarFilledIcon,
@@ -7532,16 +7496,16 @@ import styled49 from "styled-components";
 
 // src/components/Tooltip/Tooltip.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens36 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors19, spacing: spacing19 } = ddsBaseTokens36;
+var { colors: colors18, spacing: spacing19 } = ddsBaseTokens36;
 var wrapper = {
   padding: `${spacing19.SizesDdsSpacingX075}`
 };
 var svgArrow = {
   border: {
-    fill: colors19.DdsColorPrimaryLighter
+    fill: colors18.DdsColorPrimaryLighter
   },
   background: {
-    fill: colors19.DdsColorNeutralsWhite
+    fill: colors18.DdsColorNeutralsWhite
   }
 };
 var tooltipTokens = {
@@ -7837,17 +7801,17 @@ import styled51 from "styled-components";
 
 // src/components/FileUploader/FileUploader.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens38 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors20, spacing: spacing20 } = ddsBaseTokens38;
+var { colors: colors19, spacing: spacing20 } = ddsBaseTokens38;
 var rootTokens = {
-  borderColor: colors20.DdsColorNeutralsGray5,
-  borderColorError: colors20.DdsColorDangerBase,
+  borderColor: colors19.DdsColorNeutralsGray5,
+  borderColorError: colors19.DdsColorDangerBase,
   paddingLeftRightTop: spacing20.SizesDdsSpacingX15,
   paddingBottom: spacing20.SizesDdsSpacingX2,
   gap: spacing20.SizesDdsSpacingX1,
-  backgroundColor: colors20.DdsColorNeutralsWhite,
+  backgroundColor: colors19.DdsColorNeutralsWhite,
   dragActive: {
-    borderColor: colors20.DdsColorInteractiveBase,
-    backgroundColor: colors20.DdsColorInteractiveLightest
+    borderColor: colors19.DdsColorInteractiveBase,
+    backgroundColor: colors19.DdsColorInteractiveLightest
   }
 };
 var noZoneContainerTokens = {
@@ -7857,10 +7821,10 @@ var fileTokens = {
   marginTop: spacing20.SizesDdsSpacingX05,
   paddingLeftRight: spacing20.SizesDdsSpacingX05,
   paddingTopBottom: spacing20.SizesDdsSpacingX1,
-  backgroundColor: colors20.DdsColorNeutralsGray1,
+  backgroundColor: colors19.DdsColorNeutralsGray1,
   textToIconsGap: spacing20.SizesDdsSpacingX075,
   invalid: {
-    borderColor: colors20.DdsColorDangerBase
+    borderColor: colors19.DdsColorDangerBase
   }
 };
 var errorsTokens = {
@@ -7951,7 +7915,7 @@ var File = (props) => {
 import {
   fromEvent as getFilesFromEvent
 } from "file-selector";
-import { useCallback as useCallback8, useEffect as useEffect21, useMemo, useReducer, useRef as useRef22 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect21, useMemo, useReducer, useRef as useRef22 } from "react";
 
 // src/components/FileUploader/fileUploaderReducer.ts
 var fileUploaderReducer = (state, action) => {
@@ -8075,12 +8039,12 @@ var useFileUploader = (props) => {
       payload: calcRootErrors(stateFiles, maxFiles, errorMessage)
     });
   }, [dispatch, stateFiles, maxFiles, errorMessage]);
-  const onRootFocus = useCallback8(
+  const onRootFocus = useCallback7(
     () => dispatch({ type: "focus" }),
     [dispatch]
   );
-  const onRootBlur = useCallback8(() => dispatch({ type: "blur" }), [dispatch]);
-  const onRootDragEnter = useCallback8(
+  const onRootBlur = useCallback7(() => dispatch({ type: "blur" }), [dispatch]);
+  const onRootDragEnter = useCallback7(
     async (evt) => {
       preventDefaults(evt);
       if (isEventWithFiles(evt)) {
@@ -8093,7 +8057,7 @@ var useFileUploader = (props) => {
     },
     [dispatch, accept, maxFiles]
   );
-  const onRootDragOver = useCallback8((evt) => {
+  const onRootDragOver = useCallback7((evt) => {
     preventDefaults(evt);
     const hasFiles = isEventWithFiles(evt);
     if (hasFiles && evt.dataTransfer) {
@@ -8103,7 +8067,7 @@ var useFileUploader = (props) => {
       }
     }
   }, []);
-  const onRootDragLeave = useCallback8(
+  const onRootDragLeave = useCallback7(
     (evt) => {
       preventDefaults(evt);
       if (evt.currentTarget.contains(evt.relatedTarget))
@@ -8112,7 +8076,7 @@ var useFileUploader = (props) => {
     },
     [dispatch]
   );
-  const setFiles = useCallback8(
+  const setFiles = useCallback7(
     async (evt) => {
       evt.preventDefault();
       if (isEventWithFiles(evt)) {
@@ -8146,13 +8110,13 @@ var useFileUploader = (props) => {
       dispatch
     ]
   );
-  const openFileDialog = useCallback8(() => {
+  const openFileDialog = useCallback7(() => {
     if (inputRef.current) {
       inputRef.current.value = "";
       inputRef.current.click();
     }
   }, [inputRef]);
-  const removeFile = useCallback8(
+  const removeFile = useCallback7(
     (file) => {
       const newFiles = [...stateFiles];
       newFiles.splice(stateFiles.indexOf(file), 1);
@@ -8166,7 +8130,7 @@ var useFileUploader = (props) => {
     },
     [stateFiles, isControlled, maxFiles, errorMessage, onChange, dispatch]
   );
-  const getRootProps = useCallback8(
+  const getRootProps = useCallback7(
     () => ({
       onBlur: onRootBlur,
       onFocus: onRootFocus,
@@ -8188,14 +8152,14 @@ var useFileUploader = (props) => {
       disabled
     ]
   );
-  const getButtonProps = useCallback8(
+  const getButtonProps = useCallback7(
     () => ({
       onClick: openFileDialog,
       ref: buttonRef
     }),
     [openFileDialog, buttonRef]
   );
-  const getInputProps = useCallback8(
+  const getInputProps = useCallback7(
     () => ({
       type: "file",
       style: { display: "none" },
@@ -8375,22 +8339,22 @@ import styled55, { css as css21 } from "styled-components";
 
 // src/components/GlobalMessage/GlobalMessage.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens39 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors21, spacing: spacing21 } = ddsBaseTokens39;
+var { colors: colors20, spacing: spacing21 } = ddsBaseTokens39;
 var typographyType4 = "bodySans02";
 var container7 = {
   borderBottom: "2px solid",
   padding: `0 ${spacing21.SizesDdsSpacingX1}`,
   info: {
-    borderColor: colors21.DdsColorInfoLighter,
-    backgroundColor: colors21.DdsColorInfoLightest
+    borderColor: colors20.DdsColorInfoLighter,
+    backgroundColor: colors20.DdsColorInfoLightest
   },
   danger: {
-    borderColor: colors21.DdsColorDangerLighter,
-    backgroundColor: colors21.DdsColorDangerLightest
+    borderColor: colors20.DdsColorDangerLighter,
+    backgroundColor: colors20.DdsColorDangerLightest
   },
   warning: {
-    borderColor: colors21.DdsColorWarningLighter,
-    backgroundColor: colors21.DdsColorWarningLightest
+    borderColor: colors20.DdsColorWarningLighter,
+    backgroundColor: colors20.DdsColorWarningLightest
   }
 };
 var contentContainer3 = {
@@ -8422,20 +8386,20 @@ var globalMessageTokens = {
   icon: {
     marginRight: `${spacing21.SizesDdsSpacingX075}`,
     info: {
-      color: colors21.DdsColorInfoDarkest
+      color: colors20.DdsColorInfoDarkest
     },
     danger: {
-      color: colors21.DdsColorDangerDarkest
+      color: colors20.DdsColorDangerDarkest
     },
     warning: {
-      color: colors21.DdsColorWarningDarkest
+      color: colors20.DdsColorWarningDarkest
     }
   }
 };
 
 // src/components/GlobalMessage/GlobalMessage.tsx
 import { jsx as jsx219, jsxs as jsxs48 } from "react/jsx-runtime";
-var { container: container8, contentContainer: contentContainer4, icon: icon5 } = globalMessageTokens;
+var { container: container8, contentContainer: contentContainer4, icon: icon4 } = globalMessageTokens;
 var Container7 = styled55.div`
   display: flex;
   align-items: center;
@@ -8451,7 +8415,7 @@ var Container7 = styled55.div`
   `}
 `;
 var MessageIconWrapper = styled55(Icon)`
-  margin-right: ${icon5.marginRight};
+  margin-right: ${icon4.marginRight};
 `;
 var ControlsContainer = styled55.div`
   display: flex;
@@ -8490,7 +8454,7 @@ var GlobalMessage = forwardRef34(
               MessageIconWrapper,
               {
                 icon: purposeVariants[purpose].icon,
-                color: icon5[purpose].color
+                color: icon4[purpose].color
               }
             ),
             children != null ? children : /* @__PURE__ */ jsx219(Typography, { as: "span", children: message2 })
@@ -8784,7 +8748,7 @@ import styled58, { css as css23 } from "styled-components";
 
 // src/components/InlineEdit/InlineEdit.tokens.ts
 import { ddsBaseTokens as ddsBaseTokens41 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors22, spacing: spacing23, fontPackages: fontPackages5 } = ddsBaseTokens41;
+var { colors: colors21, spacing: spacing23, fontPackages: fontPackages5 } = ddsBaseTokens41;
 var inlineEdit = {
   padding: spacing23.SizesDdsSpacingX025,
   font: fontPackages5.body_sans_02.base,
@@ -8793,10 +8757,10 @@ var inlineEdit = {
     paddingLeft: spacing23.SizesDdsSpacingX2
   },
   hover: {
-    backgroundColor: colors22.DdsColorInteractiveLightest
+    backgroundColor: colors21.DdsColorInteractiveLightest
   },
   focus: {
-    backgroundColor: colors22.DdsColorNeutralsWhite
+    backgroundColor: colors21.DdsColorNeutralsWhite
   }
 };
 var iconWrapper = {
@@ -9027,9 +8991,9 @@ import styled59, { css as css24 } from "styled-components";
 
 // src/components/InternalHeader/InternalHeader.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens42 } from "@norges-domstoler/dds-design-tokens";
-var { border: border10, colors: colors23, spacing: spacing24 } = ddsBaseTokens42;
+var { border: border10, colors: colors22, spacing: spacing24 } = ddsBaseTokens42;
 var bar = {
-  backgroundColor: colors23.DdsColorNeutralsWhite,
+  backgroundColor: colors22.DdsColorNeutralsWhite,
   itemGap: spacing24.SizesDdsSpacingX15,
   minHeight: "57px",
   borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`,
@@ -9421,7 +9385,7 @@ import styled63, { css as css26 } from "styled-components";
 
 // src/components/LocalMessage/LocalMessage.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens45 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = ddsBaseTokens45;
+var { colors: colors23, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = ddsBaseTokens45;
 var container9 = {
   base: {
     boxShadow: outerShadow3.DdsShadow1Onlight,
@@ -9432,28 +9396,28 @@ var container9 = {
   },
   purpose: {
     info: {
-      borderColor: colors24.DdsColorInfoBase,
-      backgroundColor: colors24.DdsColorInfoLightest
+      borderColor: colors23.DdsColorInfoBase,
+      backgroundColor: colors23.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors24.DdsColorWarningBase,
-      backgroundColor: colors24.DdsColorWarningLightest
+      borderColor: colors23.DdsColorWarningBase,
+      backgroundColor: colors23.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors24.DdsColorDangerBase,
-      backgroundColor: colors24.DdsColorDangerLightest
+      borderColor: colors23.DdsColorDangerBase,
+      backgroundColor: colors23.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors24.DdsColorSuccessBase,
-      backgroundColor: colors24.DdsColorSuccessLightest
+      borderColor: colors23.DdsColorSuccessBase,
+      backgroundColor: colors23.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors24.DdsColorPrimaryBase,
-      backgroundColor: colors24.DdsColorPrimaryLightest
+      borderColor: colors23.DdsColorPrimaryBase,
+      backgroundColor: colors23.DdsColorPrimaryLightest
     },
     confidential: {
-      borderColor: colors24.DdsColorDangerBase,
-      backgroundColor: colors24.DdsColorDangerLightest
+      borderColor: colors23.DdsColorDangerBase,
+      backgroundColor: colors23.DdsColorDangerLightest
     }
   }
 };
@@ -9488,37 +9452,37 @@ var purposeVariants2 = {
     closeButtonPurpose: "danger"
   }
 };
-var icon6 = {
+var icon5 = {
   marginRight: `${spacing26.SizesDdsSpacingX075}`,
   info: {
-    color: colors24.DdsColorInfoDarkest
+    color: colors23.DdsColorInfoDarkest
   },
   danger: {
-    color: colors24.DdsColorDangerDarkest
+    color: colors23.DdsColorDangerDarkest
   },
   warning: {
-    color: colors24.DdsColorWarningDarkest
+    color: colors23.DdsColorWarningDarkest
   },
   success: {
-    color: colors24.DdsColorSuccessDarkest
+    color: colors23.DdsColorSuccessDarkest
   },
   tips: {
-    color: colors24.DdsColorPrimaryDarkest
+    color: colors23.DdsColorPrimaryDarkest
   },
   confidential: {
-    color: colors24.DdsColorDangerDarkest
+    color: colors23.DdsColorDangerDarkest
   }
 };
 var localMessageTokens = {
   container: container9,
   content: content3,
   purposeVariants: purposeVariants2,
-  icon: icon6
+  icon: icon5
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
 import { Fragment as Fragment7, jsx as jsx231, jsxs as jsxs53 } from "react/jsx-runtime";
-var { container: container10, content: content4, icon: icon7, purposeVariants: purposeVariants3 } = localMessageTokens;
+var { container: container10, content: content4, icon: icon6, purposeVariants: purposeVariants3 } = localMessageTokens;
 var Container8 = styled63.div.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
@@ -9613,7 +9577,7 @@ var LocalMessage = forwardRef42(
         MessageIconWrapper2,
         {
           icon: purposeVariants3[purpose].icon,
-          color: icon7[purpose].color
+          color: icon6[purpose].color
         }
       ),
       /* @__PURE__ */ jsx231(TextContainer2, { children: children != null ? children : /* @__PURE__ */ jsx231(Typography, { as: "span", children: message2 }) }),
@@ -9854,12 +9818,12 @@ import styled69, { css as css28 } from "styled-components";
 
 // src/components/Pagination/Pagination.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens48 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing28, colors: colors25 } = ddsBaseTokens48;
+var { spacing: spacing28, colors: colors24 } = ddsBaseTokens48;
 var list7 = {
   gap: spacing28.SizesDdsSpacingX075
 };
 var truncationIcon = {
-  color: colors25.DdsColorNeutralsGray7
+  color: colors24.DdsColorNeutralsGray7
 };
 var outerContainer3 = {
   gap: spacing28.SizesDdsSpacingX075
@@ -9921,7 +9885,7 @@ import {
   ddsBaseTokens as ddsBaseTokens49,
   ddsReferenceTokens as ddsReferenceTokens6
 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = ddsBaseTokens49;
+var { colors: colors25, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = ddsBaseTokens49;
 var { textDefault: textDefault5 } = ddsReferenceTokens6;
 var placeholderTypographyTypes = {
   medium: "supportingStylePlaceholderText01",
@@ -9944,12 +9908,12 @@ var typographyTypes3 = {
 var control = {
   borderRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
   border: `${border12.BordersDdsBorderStyleLightStrokeWeight} solid`,
-  borderColor: colors26.DdsColorNeutralsGray5,
-  backgroundColor: colors26.DdsColorNeutralsWhite,
-  color: colors26.DdsColorNeutralsGray9,
+  borderColor: colors25.DdsColorNeutralsGray5,
+  backgroundColor: colors25.DdsColorNeutralsWhite,
+  color: colors25.DdsColorNeutralsGray9,
   disabled: {
-    backgroundColor: colors26.DdsColorNeutralsGray1,
-    borderColor: colors26.DdsColorNeutralsGray5
+    backgroundColor: colors25.DdsColorNeutralsGray1,
+    borderColor: colors25.DdsColorNeutralsGray5
   },
   readOnly: {
     borderColor: "transparent",
@@ -9982,14 +9946,14 @@ var control = {
   }
 };
 var placeholder = {
-  color: colors26.DdsColorNeutralsGray6
+  color: colors25.DdsColorNeutralsGray6
 };
 var dropdownIndicator = {
   base: {
-    color: colors26.DdsColorNeutralsGray6
+    color: colors25.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors26.DdsColorInteractiveBase
+    color: colors25.DdsColorInteractiveBase
   },
   readOnly: {
     color: "transparent"
@@ -9997,23 +9961,23 @@ var dropdownIndicator = {
 };
 var clearIndicator = {
   base: {
-    color: colors26.DdsColorNeutralsGray6
+    color: colors25.DdsColorNeutralsGray6
   },
-  hover: { color: colors26.DdsColorInteractiveBase }
+  hover: { color: colors25.DdsColorInteractiveBase }
 };
 var loadingIndicator = {
-  color: colors26.DdsColorNeutralsGray6
+  color: colors25.DdsColorNeutralsGray6
 };
 var menu = {
   border: "1px solid",
-  borderColor: colors26.DdsColorInteractiveBase,
-  backgroundColor: colors26.DdsColorNeutralsWhite,
+  borderColor: colors25.DdsColorInteractiveBase,
+  backgroundColor: colors25.DdsColorNeutralsWhite,
   borderRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
   marginTop: spacing29.SizesDdsSpacingX025,
   marginBottom: spacing29.SizesDdsSpacingX025
 };
 var groupHeading = {
-  color: colors26.DdsColorNeutralsGray7,
+  color: colors25.DdsColorNeutralsGray7,
   padding: `${spacing29.SizesDdsSpacingX05}  ${spacing29.SizesDdsSpacingX075} ${spacing29.SizesDdsSpacingX0125} ${spacing29.SizesDdsSpacingX075}`
 };
 var option = {
@@ -10021,44 +9985,44 @@ var option = {
     color: textDefault5.textColor,
     gap: spacing29.SizesDdsSpacingX05,
     padding: `${spacing29.SizesDdsSpacingX075}`,
-    backgroundColor: colors26.DdsColorNeutralsWhite
+    backgroundColor: colors25.DdsColorNeutralsWhite
   },
   hover: {
     color: textDefault5.textColor,
-    backgroundColor: colors26.DdsColorInteractiveLightest
+    backgroundColor: colors25.DdsColorInteractiveLightest
   },
   focus: {
     color: textDefault5.textColor,
-    backgroundColor: colors26.DdsColorInteractiveLightest
+    backgroundColor: colors25.DdsColorInteractiveLightest
   },
   selected: {
     color: textDefault5.textColor,
-    backgroundColor: colors26.DdsColorNeutralsWhite
+    backgroundColor: colors25.DdsColorNeutralsWhite
   }
 };
 var noOptionsMessage = {
   padding: `${spacing29.SizesDdsSpacingX05} ${spacing29.SizesDdsSpacingX1}`,
-  color: colors26.DdsColorNeutralsGray6
+  color: colors25.DdsColorNeutralsGray6
 };
 var multiValue = {
   borderRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
-  backgroundColor: colors26.DdsColorNeutralsGray2
+  backgroundColor: colors25.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
   padding: `0 ${spacing29.SizesDdsSpacingX025}`,
-  color: colors26.DdsColorNeutralsGray9
+  color: colors25.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
-    color: colors26.DdsColorNeutralsGray9,
+    color: colors25.DdsColorNeutralsGray9,
     padding: `0 ${spacing29.SizesDdsSpacingX025}`,
     borderTopRightRadius: borderRadius7.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius7.RadiiDdsBorderRadius1Radius
   },
   hover: {
-    color: colors26.DdsColorNeutralsWhite,
-    backgroundColor: colors26.DdsColorInteractiveBase,
-    boxShadow: `inset 0 0 0 1px ${colors26.DdsColorNeutralsGray9}`
+    color: colors25.DdsColorNeutralsWhite,
+    backgroundColor: colors25.DdsColorInteractiveBase,
+    boxShadow: `inset 0 0 0 1px ${colors25.DdsColorNeutralsGray9}`
   }
 };
 var valueContainer = {
@@ -10066,7 +10030,7 @@ var valueContainer = {
     gap: spacing29.SizesDdsSpacingX025
   }
 };
-var icon8 = {
+var icon7 = {
   marginRight: spacing29.SizesDdsSpacingX05
 };
 var selectTokens = {
@@ -10083,7 +10047,7 @@ var selectTokens = {
   noOptionsMessage,
   clearIndicator,
   loadingIndicator,
-  icon: icon8
+  icon: icon7
 };
 
 // src/components/Select/Select.styles.ts
@@ -10100,7 +10064,7 @@ var {
   multiValueRemove: multiValueRemove2,
   noOptionsMessage: noOptionsMessage2,
   placeholder: placeholder2,
-  icon: icon9,
+  icon: icon8,
   valueContainer: valueContainer2
 } = selectTokens;
 var prefix = "dds-select";
@@ -10181,8 +10145,8 @@ var InnerSingleValue = styled68.div`
   box-sizing: border-box;
   max-width: 100%;
 `;
-var StyledIcon4 = styled68(Icon)`
-  margin-right: ${icon9.marginRight};
+var StyledIcon3 = styled68(Icon)`
+  margin-right: ${icon8.marginRight};
 `;
 var getCustomStyles = (size2) => ({
   control: () => ({
@@ -10377,8 +10341,8 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx235(
     "aria-describedby": ariaDescribedby
   }
 );
-var DDSControl = (props, componentSize, icon12) => /* @__PURE__ */ jsxs55(Control, { ...props, children: [
-  icon12 && /* @__PURE__ */ jsx235(StyledIcon4, { icon: icon12, iconSize: getFormInputIconSize(componentSize) }),
+var DDSControl = (props, componentSize, icon11) => /* @__PURE__ */ jsxs55(Control, { ...props, children: [
+  icon11 && /* @__PURE__ */ jsx235(StyledIcon3, { icon: icon11, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
 
@@ -10399,7 +10363,7 @@ function SelectInner(props, ref) {
     options,
     isMulti,
     value,
-    icon: icon12,
+    icon: icon11,
     defaultValue,
     width = defaultWidth4,
     closeMenuOnSelect,
@@ -10463,7 +10427,7 @@ function SelectInner(props, ref) {
       ClearIndicator: (props2) => DDSClearIndicator(props2, componentSize),
       DropdownIndicator: (props2) => DDSDropdownIndicator(props2, componentSize),
       MultiValueRemove: DDSMultiValueRemove,
-      Control: (props2) => DDSControl(props2, componentSize, icon12)
+      Control: (props2) => DDSControl(props2, componentSize, icon11)
     },
     "aria-invalid": hasErrorMessage ? true : void 0,
     required,
@@ -10485,7 +10449,7 @@ var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }))
 // src/components/Pagination/Pagination.tsx
 import { jsx as jsx237, jsxs as jsxs57 } from "react/jsx-runtime";
 var { outerContainer: outerContainer4, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list8 } = paginationTokens;
-var Nav2 = styled69.nav`
+var Nav = styled69.nav`
   display: flex;
   align-items: center;
 `;
@@ -10618,12 +10582,12 @@ var Pagination = forwardRef47(
     };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
-    const navigation2 = withPagination ? /* @__PURE__ */ jsx237(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
+    const navigation2 = withPagination ? /* @__PURE__ */ jsx237(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
       /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       listItems,
       /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
     ] }) }) : null;
-    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx237(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
+    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx237(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
       /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ jsx237(
         Button,
         {
@@ -10928,7 +10892,7 @@ var useProgressTrackerContext = () => useContext5(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens52 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors27, spacing: spacing31 } = ddsBaseTokens52;
+var { colors: colors26, spacing: spacing31 } = ddsBaseTokens52;
 var typographyTypes4 = {
   number: "bodySans01",
   label: "bodySans03"
@@ -10940,7 +10904,7 @@ var itemContentWrapper = {
   gap: spacing31.SizesDdsSpacingX05
 };
 var connector = {
-  color: colors27.DdsColorNeutralsGray5,
+  color: colors26.DdsColorNeutralsGray5,
   height: "18px",
   width: "1px"
 };
@@ -10949,87 +10913,87 @@ var itemNumber = {
   borderWidth: "2px",
   iconSize: "small",
   activeIncomplete: {
-    borderColor: colors27.DdsColorInteractiveBase,
-    color: colors27.DdsColorNeutralsWhite,
-    backgroundColor: colors27.DdsColorInteractiveBase,
+    borderColor: colors26.DdsColorInteractiveBase,
+    color: colors26.DdsColorNeutralsWhite,
+    backgroundColor: colors26.DdsColorInteractiveBase,
     hover: {
-      borderColor: colors27.DdsColorInteractiveBase,
-      color: colors27.DdsColorNeutralsWhite,
-      backgroundColor: colors27.DdsColorInteractiveBase
+      borderColor: colors26.DdsColorInteractiveBase,
+      color: colors26.DdsColorNeutralsWhite,
+      backgroundColor: colors26.DdsColorInteractiveBase
     }
   },
   activeCompleted: {
-    borderColor: colors27.DdsColorInteractiveBase,
-    color: colors27.DdsColorNeutralsWhite,
-    backgroundColor: colors27.DdsColorInteractiveBase,
+    borderColor: colors26.DdsColorInteractiveBase,
+    color: colors26.DdsColorNeutralsWhite,
+    backgroundColor: colors26.DdsColorInteractiveBase,
     hover: {
-      borderColor: colors27.DdsColorInteractiveDark,
-      color: colors27.DdsColorNeutralsWhite,
-      backgroundColor: colors27.DdsColorInteractiveDark
+      borderColor: colors26.DdsColorInteractiveDark,
+      color: colors26.DdsColorNeutralsWhite,
+      backgroundColor: colors26.DdsColorInteractiveDark
     }
   },
   inactiveCompleted: {
-    borderColor: colors27.DdsColorInteractiveBase,
-    color: colors27.DdsColorNeutralsWhite,
-    backgroundColor: colors27.DdsColorInteractiveBase,
+    borderColor: colors26.DdsColorInteractiveBase,
+    color: colors26.DdsColorNeutralsWhite,
+    backgroundColor: colors26.DdsColorInteractiveBase,
     hover: {
-      borderColor: colors27.DdsColorInteractiveDark,
-      color: colors27.DdsColorNeutralsWhite,
-      backgroundColor: colors27.DdsColorInteractiveDark
+      borderColor: colors26.DdsColorInteractiveDark,
+      color: colors26.DdsColorNeutralsWhite,
+      backgroundColor: colors26.DdsColorInteractiveDark
     }
   },
   inactiveIncomplete: {
-    borderColor: colors27.DdsColorInteractiveBase,
-    color: colors27.DdsColorInteractiveBase,
-    backgroundColor: colors27.DdsColorNeutralsWhite,
+    borderColor: colors26.DdsColorInteractiveBase,
+    color: colors26.DdsColorInteractiveBase,
+    backgroundColor: colors26.DdsColorNeutralsWhite,
     hover: {
-      borderColor: colors27.DdsColorInteractiveBase,
-      color: colors27.DdsColorInteractiveBase,
-      backgroundColor: colors27.DdsColorInteractiveLightest
+      borderColor: colors26.DdsColorInteractiveBase,
+      color: colors26.DdsColorInteractiveBase,
+      backgroundColor: colors26.DdsColorInteractiveLightest
     }
   },
   disabled: {
-    borderColor: colors27.DdsColorNeutralsGray5,
-    color: colors27.DdsColorNeutralsGray5,
-    backgroundColor: colors27.DdsColorNeutralsWhite
+    borderColor: colors26.DdsColorNeutralsGray5,
+    color: colors26.DdsColorNeutralsGray5,
+    backgroundColor: colors26.DdsColorNeutralsWhite
   }
 };
 var itemText = {
   textDecoration: "underline",
   activeCompleted: {
-    color: colors27.DdsColorInteractiveBase,
+    color: colors26.DdsColorInteractiveBase,
     textDecorationColor: "transparent",
     hover: {
-      color: colors27.DdsColorInteractiveBase,
+      color: colors26.DdsColorInteractiveBase,
       textDecorationColor: "transparent"
     }
   },
   activeIncomplete: {
-    color: colors27.DdsColorInteractiveBase,
+    color: colors26.DdsColorInteractiveBase,
     textDecorationColor: "transparent",
     hover: {
-      color: colors27.DdsColorInteractiveBase,
+      color: colors26.DdsColorInteractiveBase,
       textDecorationColor: "transparent"
     }
   },
   inactiveIncomplete: {
-    color: colors27.DdsColorNeutralsGray7,
-    textDecorationColor: colors27.DdsColorNeutralsGray7,
+    color: colors26.DdsColorNeutralsGray7,
+    textDecorationColor: colors26.DdsColorNeutralsGray7,
     hover: {
-      color: colors27.DdsColorInteractiveBase,
-      textDecorationColor: colors27.DdsColorInteractiveBase
+      color: colors26.DdsColorInteractiveBase,
+      textDecorationColor: colors26.DdsColorInteractiveBase
     }
   },
   inactiveCompleted: {
-    color: colors27.DdsColorNeutralsGray7,
-    textDecorationColor: colors27.DdsColorNeutralsGray7,
+    color: colors26.DdsColorNeutralsGray7,
+    textDecorationColor: colors26.DdsColorNeutralsGray7,
     hover: {
-      color: colors27.DdsColorInteractiveBase,
-      textDecorationColor: colors27.DdsColorInteractiveBase
+      color: colors26.DdsColorInteractiveBase,
+      textDecorationColor: colors26.DdsColorInteractiveBase
     }
   },
   disabled: {
-    color: colors27.DdsColorNeutralsGray6,
+    color: colors26.DdsColorNeutralsGray6,
     textDecorationColor: "transparent"
   }
 };
@@ -11131,7 +11095,7 @@ var ProgressTrackerItem = (props) => {
     index = 0,
     completed = false,
     disabled = false,
-    icon: icon12,
+    icon: icon11,
     children
   } = props;
   const { activeStep, handleStepChange } = useProgressTrackerContext();
@@ -11143,11 +11107,11 @@ var ProgressTrackerItem = (props) => {
     if (completed) {
       return /* @__PURE__ */ jsx240(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
     }
-    if (icon12 !== void 0) {
-      return /* @__PURE__ */ jsx240(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
+    if (icon11 !== void 0) {
+      return /* @__PURE__ */ jsx240(Icon, { icon: icon11, iconSize: itemNumber2.iconSize });
     }
     return index + 1;
-  }, [completed, icon12, index]);
+  }, [completed, icon11, index]);
   return /* @__PURE__ */ jsx240(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs59(
     ItemContentWrapper,
     {
@@ -11277,7 +11241,7 @@ import {
   ddsBaseTokens as ddsBaseTokens53,
   ddsReferenceTokens as ddsReferenceTokens7
 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } = ddsBaseTokens53;
+var { spacing: spacing32, iconSizes: iconSizes2, colors: colors27 } = ddsBaseTokens53;
 var { textDefault: textDefault6 } = ddsReferenceTokens7;
 var typographyTypes5 = {
   small: "bodySans01",
@@ -11339,8 +11303,8 @@ var clearButton = {
 };
 var suggestionsContainer = {
   marginTop: spacing32.SizesDdsSpacingX025,
-  border: `1px solid ${colors28.DdsColorInteractiveBase}`,
-  boxShadow: `0 0 0 1px ${colors28.DdsColorInteractiveBase}`
+  border: `1px solid ${colors27.DdsColorInteractiveBase}`,
+  boxShadow: `0 0 0 1px ${colors27.DdsColorInteractiveBase}`
 };
 var suggestionsHeader = {
   paddingLeft: spacing32.SizesDdsSpacingX1
@@ -11426,7 +11390,7 @@ var SearchSuggestions = forwardRef50((props, ref) => {
     searchId,
     "suggestions-header"
   );
-  const [focus, setFocus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, !showSuggestions);
+  const [focus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, showSuggestions);
   const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
   const renderedSuggestions = /* @__PURE__ */ jsx242(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
     return /* @__PURE__ */ jsx242("li", { role: "option", children: /* @__PURE__ */ jsx242(
@@ -11434,7 +11398,6 @@ var SearchSuggestions = forwardRef50((props, ref) => {
       {
         index,
         focus: focus === index && showSuggestions,
-        setFocus,
         "aria-label": `s\xF8k p\xE5 ${suggestion}`,
         onClick: onSuggestionClick,
         title: suggestion,
@@ -11778,13 +11741,13 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/SelectionControl.tokens.tsx
-var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } = ddsBaseTokens54;
+var { colors: colors28, spacing: spacing33, borderRadius: borderRadius8 } = ddsBaseTokens54;
 var checkmark = {
   checkbox: {
-    borderColor: colors29.DdsColorNeutralsWhite
+    borderColor: colors28.DdsColorNeutralsWhite
   },
   radio: {
-    backgroundColor: colors29.DdsColorNeutralsWhite,
+    backgroundColor: colors28.DdsColorNeutralsWhite,
     height: spacing33.SizesDdsSpacingX05,
     width: spacing33.SizesDdsSpacingX05,
     left: `calc(50% - ${spacing33.SizesDdsSpacingX05NumberPx / 2}px)`,
@@ -11794,20 +11757,20 @@ var checkmark = {
 var selectionControl = {
   base: {
     border: "1px solid",
-    borderColor: colors29.DdsColorNeutralsGray5,
-    backgroundColor: colors29.DdsColorNeutralsWhite,
+    borderColor: colors28.DdsColorNeutralsGray5,
+    backgroundColor: colors28.DdsColorNeutralsWhite,
     borderRadius: borderRadius8.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
   hover: {
     base: {
-      backgroundColor: colors29.DdsColorInteractiveLightest,
+      backgroundColor: colors28.DdsColorInteractiveLightest,
       boxShadow: `inset 0 0 0 1px ${hoverInputfield.borderColor}`,
       borderColor: hoverInputfield.borderColor
     },
     danger: {
-      backgroundColor: colors29.DdsColorDangerLightest,
+      backgroundColor: colors28.DdsColorDangerLightest,
       boxShadow: `inset 0 0 0 1px ${dangerInputfield.borderColor}`,
       borderColor: dangerInputfield.borderColor
     }
@@ -11817,39 +11780,39 @@ var selectionControl = {
     borderColor: dangerInputfield.borderColor
   },
   disabled: {
-    borderColor: colors29.DdsColorNeutralsGray5
+    borderColor: colors28.DdsColorNeutralsGray5
   },
   readOnly: { backgroundColor: "transparent" },
   checked: {
     base: {
-      borderColor: colors29.DdsColorInteractiveBase,
-      backgroundColor: colors29.DdsColorInteractiveBase
+      borderColor: colors28.DdsColorInteractiveBase,
+      backgroundColor: colors28.DdsColorInteractiveBase
     },
     hover: {
-      backgroundColor: colors29.DdsColorInteractiveDark,
-      boxShadow: `inset 0 0 0 1px  ${colors29.DdsColorInteractiveDark}`,
-      borderColor: colors29.DdsColorInteractiveDark
+      backgroundColor: colors28.DdsColorInteractiveDark,
+      boxShadow: `inset 0 0 0 1px  ${colors28.DdsColorInteractiveDark}`,
+      borderColor: colors28.DdsColorInteractiveDark
     },
     disabled: {
-      borderColor: colors29.DdsColorNeutralsGray6,
-      backgroundColor: colors29.DdsColorNeutralsGray6
+      borderColor: colors28.DdsColorNeutralsGray6,
+      backgroundColor: colors28.DdsColorNeutralsGray6
     },
     readOnly: {
-      borderColor: colors29.DdsColorNeutralsGray6,
-      backgroundColor: colors29.DdsColorNeutralsGray6
+      borderColor: colors28.DdsColorNeutralsGray6,
+      backgroundColor: colors28.DdsColorNeutralsGray6
     }
   },
   checkbox: {
     indeterminate: {
-      borderColor: colors29.DdsColorInteractiveBase,
-      backgroundColor: colors29.DdsColorInteractiveBase
+      borderColor: colors28.DdsColorInteractiveBase,
+      backgroundColor: colors28.DdsColorInteractiveBase
     }
   }
 };
 var container13 = {
-  color: colors29.DdsColorNeutralsGray9,
+  color: colors28.DdsColorNeutralsGray9,
   disabled: {
-    color: colors29.DdsColorNeutralsGray6
+    color: colors28.DdsColorNeutralsGray6
   },
   withLabel: {
     paddingLeft: `${selectionControlSizeNumberPx + spacing33.SizesDdsSpacingX05NumberPx}px`
@@ -12372,27 +12335,27 @@ import styled76 from "styled-components";
 
 // src/components/SkipToContent/SkipToContent.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens55 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors30, spacing: spacing34 } = ddsBaseTokens55;
-var link3 = {
+var { colors: colors29, spacing: spacing34 } = ddsBaseTokens55;
+var link4 = {
   base: {
-    color: colors30.DdsColorNeutralsWhite
+    color: colors29.DdsColorNeutralsWhite
   },
   hover: {
-    color: colors30.DdsColorNeutralsWhite
+    color: colors29.DdsColorNeutralsWhite
   }
 };
 var wrapper5 = {
-  backgroundColor: colors30.DdsColorPrimaryBase,
+  backgroundColor: colors29.DdsColorPrimaryBase,
   padding: spacing34.SizesDdsSpacingX025
 };
 var skipToContentTokens = {
-  link: link3,
+  link: link4,
   wrapper: wrapper5
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
 import { jsx as jsx249 } from "react/jsx-runtime";
-var { wrapper: wrapper6, link: link4 } = skipToContentTokens;
+var { wrapper: wrapper6, link: link5 } = skipToContentTokens;
 var Wrapper5 = styled76.div`
   box-sizing: border-box;
   position: absolute;
@@ -12422,7 +12385,7 @@ var Wrapper5 = styled76.div`
 `;
 var Link4 = styled76.a`
   text-decoration: none;
-  color: ${link4.base.color};
+  color: ${link5.base.color};
   ${getFontStyling(defaultTypographyType)}
 
   @media (prefers-reduced-motion: no-preference) {
@@ -12432,7 +12395,7 @@ var Link4 = styled76.a`
     ${focusVisibleOnDark}
   }
   &:hover {
-    color: ${link4.base.color};
+    color: ${link5.base.color};
   }
 `;
 var SkipToContent = forwardRef55(
@@ -12614,33 +12577,33 @@ function useIsInTableHead() {
 
 // src/components/Table/normal/Table.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens57 } from "@norges-domstoler/dds-design-tokens";
-var { font: font2, colors: colors31, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = ddsBaseTokens57;
+var { font: font2, colors: colors30, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = ddsBaseTokens57;
 var row = {
   body: {
     odd: {
-      backgroundColor: colors31.DdsColorNeutralsWhite
+      backgroundColor: colors30.DdsColorNeutralsWhite
     },
     even: {
-      backgroundColor: colors31.DdsColorNeutralsGray1
+      backgroundColor: colors30.DdsColorNeutralsGray1
     },
-    hover: { backgroundColor: colors31.DdsColorInteractiveLightest },
+    hover: { backgroundColor: colors30.DdsColorInteractiveLightest },
     selected: {
-      backgroundColor: colors31.DdsColorInteractiveLightest
+      backgroundColor: colors30.DdsColorInteractiveLightest
     },
     mode: {
       sum: {
-        borderTop: `${border13.BordersDdsBorderStyleLightStrokeWeight} solid ${colors31.DdsColorNeutralsGray4}`,
-        borderBottom: `${border13.BordersDdsBorderStyleLightStrokeWeight} solid ${colors31.DdsColorNeutralsGray4}`,
-        backgroundColor: colors31.DdsColorNeutralsWhite
+        borderTop: `${border13.BordersDdsBorderStyleLightStrokeWeight} solid ${colors30.DdsColorNeutralsGray4}`,
+        borderBottom: `${border13.BordersDdsBorderStyleLightStrokeWeight} solid ${colors30.DdsColorNeutralsGray4}`,
+        backgroundColor: colors30.DdsColorNeutralsWhite
       }
     },
     withDividers: {
-      borderBottom: `1px solid ${colors31.DdsColorNeutralsGray4}`
+      borderBottom: `1px solid ${colors30.DdsColorNeutralsGray4}`
     }
   },
   head: {
     extraCompact: {
-      backgroundColor: colors31.DdsColorNeutralsWhite,
+      backgroundColor: colors30.DdsColorNeutralsWhite,
       fontSize: font2.DdsFontBodySans01FontSize
     }
   }
@@ -12658,7 +12621,7 @@ var cell2 = {
     }
   },
   head: {
-    backgroundColor: colors31.DdsColorPrimaryLightest
+    backgroundColor: colors30.DdsColorPrimaryLightest
   },
   sort: {
     gap: spacing35.SizesDdsSpacingX05,
@@ -13223,7 +13186,7 @@ Tabs.displayName = "Tabs";
 // src/components/Tabs/Tab.tsx
 import {
   forwardRef as forwardRef67,
-  useCallback as useCallback9,
+  useCallback as useCallback8,
   useEffect as useEffect28,
   useRef as useRef32
 } from "react";
@@ -13231,14 +13194,14 @@ import styled89, { css as css39 } from "styled-components";
 
 // src/components/Tabs/Tabs.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens58 } from "@norges-domstoler/dds-design-tokens";
-var { border: border14, spacing: spacing36, colors: colors32 } = ddsBaseTokens58;
+var { border: border14, spacing: spacing36, colors: colors31 } = ddsBaseTokens58;
 var tabList = {
   borderBottom: `${border14.BordersDdsBorderStyleLightStrokeWeight} solid ${border14.BordersDdsBorderStyleLightStroke}`
 };
 var tab = {
   base: {
     borderBottom: `${border14.BordersDdsBorderStyleLightStrokeWeight} solid transparent`,
-    color: colors32.DdsColorNeutralsGray7,
+    color: colors31.DdsColorNeutralsGray7,
     padding: spacing36.SizesDdsSpacingX05
   },
   row: {
@@ -13248,15 +13211,15 @@ var tab = {
     gap: spacing36.SizesDdsSpacingX025
   },
   active: {
-    backgroundColor: colors32.DdsColorInteractiveLightest,
-    color: colors32.DdsColorInteractiveDarkest,
-    boxShadow: `inset 0 -2px 0 0 ${colors32.DdsColorInteractiveDarker}`,
-    borderColor: colors32.DdsColorInteractiveDarker
+    backgroundColor: colors31.DdsColorInteractiveLightest,
+    color: colors31.DdsColorInteractiveDarkest,
+    boxShadow: `inset 0 -2px 0 0 ${colors31.DdsColorInteractiveDarker}`,
+    borderColor: colors31.DdsColorInteractiveDarker
   },
   hover: {
-    color: colors32.DdsColorInteractiveDarkest,
-    boxShadow: `inset 0 -2px 0 0 ${colors32.DdsColorInteractiveDarker}`,
-    borderColor: colors32.DdsColorInteractiveDarker
+    color: colors31.DdsColorInteractiveDarkest,
+    boxShadow: `inset 0 -2px 0 0 ${colors31.DdsColorInteractiveDarker}`,
+    borderColor: colors31.DdsColorInteractiveDarker
   }
 };
 var panel = {
@@ -13360,7 +13323,7 @@ var Button2 = styled89.button`
 var Tab = forwardRef67((props, ref) => {
   const {
     active = false,
-    icon: icon12,
+    icon: icon11,
     children,
     focus,
     setFocus,
@@ -13376,20 +13339,14 @@ var Tab = forwardRef67((props, ref) => {
   useSetTabWidth(index, width);
   const itemRef = useRef32(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
+  const { tabContentDirection } = useTabsContext();
   useEffect28(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
-      setHasTabFocus(true);
     }
   }, [focus]);
-  useOnKeyDown("Tab", () => {
-    var _a;
-    setHasTabFocus(false);
-    (_a = tabPanelsRef == null ? void 0 : tabPanelsRef.current) == null ? void 0 : _a.focus();
-  });
-  const handleSelect = useCallback9(() => {
+  const handleSelect = useCallback8(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -13415,7 +13372,7 @@ var Tab = forwardRef67((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon12 && /* @__PURE__ */ jsx263(Icon, { icon: icon12, iconSize: "inherit" }),
+        icon11 && /* @__PURE__ */ jsx263(Icon, { icon: icon11, iconSize: "inherit" }),
         /* @__PURE__ */ jsx263("span", { children })
       ]
     }
@@ -13468,12 +13425,11 @@ var TabList = forwardRef68(
       handleTabChange,
       tabListRef,
       hasTabFocus,
-      tabPanelsRef,
       setHasTabFocus
     } = useTabsContext();
     const uniqueId = id != null ? id : `${tabsId}-tablist`;
     const childrenArray = Children7.toArray(children).length;
-    const [focus, setFocus] = useRoveFocus(childrenArray, !hasTabFocus, "row");
+    const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
     const tabListChildren = Children7.map(children, (child, index) => {
       return isValidElement8(child) && cloneElement8(child, {
@@ -13487,28 +13443,34 @@ var TabList = forwardRef68(
       });
     });
     const [widths, setWidths] = useState30([]);
-    useOnKeyDown("Tab", () => {
-      var _a;
-      setHasTabFocus(false);
-      (_a = tabPanelsRef == null ? void 0 : tabPanelsRef.current) == null ? void 0 : _a.focus();
-    });
-    useOnClickOutside((tabListRef == null ? void 0 : tabListRef.current) || null, () => {
-      setHasTabFocus(false);
-    });
     const handleOnFocus = (event) => {
       setHasTabFocus(true);
       onFocus && onFocus(event);
     };
-    const tabListProps = {
-      ...rest,
-      ref: combinedRef,
-      role: "tablist",
-      "aria-label": "Bruk venste og h\xF8yre piltast for \xE5 bla",
-      id: uniqueId,
-      tabIndex: 0,
-      onFocus: handleOnFocus
+    const handleOnBlur = (event) => {
+      var _a;
+      if ((tabListRef == null ? void 0 : tabListRef.current) === event.relatedTarget) {
+        setFocus(-1);
+      }
+      if (!((_a = tabListRef == null ? void 0 : tabListRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) {
+        setHasTabFocus(false);
+      }
     };
-    return /* @__PURE__ */ jsx264(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx264(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
+    return /* @__PURE__ */ jsx264(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx264(
+      TabRow,
+      {
+        ...rest,
+        ref: combinedRef,
+        role: "tablist",
+        "aria-label": "Bruk venste og h\xF8yre piltast for \xE5 bla",
+        id: uniqueId,
+        tabIndex: 0,
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        $gridTemplateColumns: widths.join(" "),
+        children: tabListChildren
+      }
+    ) });
   }
 );
 TabList.displayName = "TabList";
@@ -13580,7 +13542,7 @@ import styled92, { css as css42 } from "styled-components";
 
 // src/components/Tag/Tag.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens59 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } = ddsBaseTokens59;
+var { colors: colors32, borderRadius: borderRadius10, spacing: spacing37 } = ddsBaseTokens59;
 var typographyType5 = "bodySans01";
 var wrapper7 = {
   border: "1px solid",
@@ -13600,13 +13562,13 @@ var wrapper7 = {
     default: {
       icon: void 0,
       base: {
-        backgroundColor: colors33.DdsColorNeutralsGray1,
-        borderColor: colors33.DdsColorNeutralsGray3,
+        backgroundColor: colors32.DdsColorNeutralsGray1,
+        borderColor: colors32.DdsColorNeutralsGray3,
         icon: void 0
       },
       strong: {
-        backgroundColor: colors33.DdsColorNeutralsGray3,
-        borderColor: colors33.DdsColorNeutralsGray3,
+        backgroundColor: colors32.DdsColorNeutralsGray3,
+        borderColor: colors32.DdsColorNeutralsGray3,
         icon: void 0
       }
     },
@@ -13615,14 +13577,14 @@ var wrapper7 = {
       base: {
         ...localMessageTokens.container.purpose.success,
         icon: {
-          color: colors33.DdsColorSuccessDarkest
+          color: colors32.DdsColorSuccessDarkest
         }
       },
       strong: {
-        backgroundColor: colors33.DdsColorSuccessLight,
-        borderColor: colors33.DdsColorSuccessLight,
+        backgroundColor: colors32.DdsColorSuccessLight,
+        borderColor: colors32.DdsColorSuccessLight,
         icon: {
-          color: colors33.DdsColorNeutralsGray9
+          color: colors32.DdsColorNeutralsGray9
         }
       }
     },
@@ -13631,14 +13593,14 @@ var wrapper7 = {
       base: {
         ...localMessageTokens.container.purpose.danger,
         icon: {
-          color: colors33.DdsColorDangerDarkest
+          color: colors32.DdsColorDangerDarkest
         }
       },
       strong: {
-        backgroundColor: colors33.DdsColorDangerLight,
-        borderColor: colors33.DdsColorDangerLight,
+        backgroundColor: colors32.DdsColorDangerLight,
+        borderColor: colors32.DdsColorDangerLight,
         icon: {
-          color: colors33.DdsColorNeutralsGray9
+          color: colors32.DdsColorNeutralsGray9
         }
       }
     },
@@ -13647,14 +13609,14 @@ var wrapper7 = {
       base: {
         ...localMessageTokens.container.purpose.warning,
         icon: {
-          color: colors33.DdsColorWarningDarkest
+          color: colors32.DdsColorWarningDarkest
         }
       },
       strong: {
-        backgroundColor: colors33.DdsColorWarningLight,
-        borderColor: colors33.DdsColorWarningLight,
+        backgroundColor: colors32.DdsColorWarningLight,
+        borderColor: colors32.DdsColorWarningLight,
         icon: {
-          color: colors33.DdsColorNeutralsGray9
+          color: colors32.DdsColorNeutralsGray9
         }
       }
     },
@@ -13663,14 +13625,14 @@ var wrapper7 = {
       base: {
         ...localMessageTokens.container.purpose.info,
         icon: {
-          color: colors33.DdsColorInfoDarkest
+          color: colors32.DdsColorInfoDarkest
         }
       },
       strong: {
-        backgroundColor: colors33.DdsColorInfoLight,
-        borderColor: colors33.DdsColorInfoLight,
+        backgroundColor: colors32.DdsColorInfoLight,
+        borderColor: colors32.DdsColorInfoLight,
         icon: {
-          color: colors33.DdsColorNeutralsGray9
+          color: colors32.DdsColorNeutralsGray9
         }
       }
     }
@@ -13696,7 +13658,7 @@ var Wrapper7 = styled92(TextOverflowEllipsisWrapper)`
     border-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].borderColor};
   `}
 `;
-var StyledIcon5 = styled92(Icon)`
+var StyledIcon4 = styled92(Icon)`
   color: ${({ $purpose, $strong }) => {
   var _a;
   return (_a = wrapper8.purpose[$purpose][$strong ? "strong" : "base"].icon) == null ? void 0 : _a.color;
@@ -13714,7 +13676,7 @@ var Tag = forwardRef71((props, ref) => {
     withIcon,
     ...rest
   } = props;
-  const icon12 = tagTokens.wrapper.purpose[purpose].icon;
+  const icon11 = tagTokens.wrapper.purpose[purpose].icon;
   return /* @__PURE__ */ jsxs71(
     Wrapper7,
     {
@@ -13722,14 +13684,14 @@ var Tag = forwardRef71((props, ref) => {
       ref,
       $purpose: purpose,
       $strong: strong,
-      $withIcon: Boolean(withIcon && icon12),
+      $withIcon: Boolean(withIcon && icon11),
       children: [
-        withIcon && icon12 && /* @__PURE__ */ jsx267(
-          StyledIcon5,
+        withIcon && icon11 && /* @__PURE__ */ jsx267(
+          StyledIcon4,
           {
             $purpose: purpose,
             $strong: strong,
-            icon: icon12,
+            icon: icon11,
             iconSize: tagTokens.wrapper.icon.size
           }
         ),
@@ -13784,7 +13746,7 @@ import styled94, { css as css43 } from "styled-components";
 
 // src/components/TextInput/TextInput.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens60 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } = ddsBaseTokens60;
+var { colors: colors33, spacing: spacing38, iconSizes: iconSizes4 } = ddsBaseTokens60;
 var input5 = {
   withIcon: {
     medium: {
@@ -13800,11 +13762,11 @@ var input5 = {
 };
 var affix = {
   border: {
-    color: colors34.DdsColorNeutralsGray5
+    color: colors33.DdsColorNeutralsGray5
   }
 };
-var icon10 = {
-  color: colors34.DdsColorNeutralsGray9,
+var icon9 = {
+  color: colors33.DdsColorNeutralsGray9,
   sizes: {
     medium: {
       top: spacing38.SizesDdsSpacingX075,
@@ -13822,22 +13784,22 @@ var icon10 = {
 };
 var textInputTokens = {
   input: input5,
-  icon: icon10,
+  icon: icon9,
   affix
 };
 
 // src/components/TextInput/TextInput.styles.tsx
 var { iconSizes: iconSizes5 } = ddsBaseTokens61;
-var { input: input6, icon: icon11 } = textInputTokens;
+var { input: input6, icon: icon10 } = textInputTokens;
 var MessageContainer2 = styled94.div`
   display: flex;
   justify-content: space-between;
 `;
-var StyledIcon6 = styled94(Icon)`
+var StyledIcon5 = styled94(Icon)`
   position: absolute;
-  color: ${icon11.color};
+  color: ${icon10.color};
   ${({ $size, iconSize }) => css43`
-    left: ${icon11.sizes[$size].left};
+    left: ${icon10.sizes[$size].left};
     ${iconSize === "small" ? css43`
           top: ${`calc(50% - ${iconSizes5.DdsIconsizeSmallNumberPx / 2}px)`};
         ` : css43`
@@ -13919,7 +13881,7 @@ var TextInput2 = forwardRef72(
     defaultValue,
     "aria-required": ariaRequired,
     "aria-describedby": ariaDescribedby,
-    icon: icon12,
+    icon: icon11,
     prefix: prefix2,
     suffix,
     ...rest
@@ -13951,7 +13913,7 @@ var TextInput2 = forwardRef72(
     const hasTip = !!tip;
     const hasLabel = !!label3;
     const hasMessage = hasErrorMessage || hasTip || !!maxLength;
-    const hasIcon = !!icon12;
+    const hasIcon = !!icon11;
     const hasAffix = !!(prefix2 != null ? prefix2 : suffix);
     const characterCounterId = derivativeIdGenerator(
       uniqueId,
@@ -13989,9 +13951,9 @@ var TextInput2 = forwardRef72(
     if (hasIcon) {
       extendedInput = /* @__PURE__ */ jsxs73(InputContainer, { children: [
         /* @__PURE__ */ jsx268(
-          StyledIcon6,
+          StyledIcon5,
           {
-            icon: icon12,
+            icon: icon11,
             iconSize: getFormInputIconSize(componentSize),
             $size: componentSize
           }
@@ -14067,7 +14029,7 @@ var useToggleBarContext = () => useContext13(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens62 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = ddsBaseTokens62;
+var { colors: colors34, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = ddsBaseTokens62;
 var typographyTypes6 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -14095,17 +14057,17 @@ var outerContainer7 = {
 };
 var label = {
   base: {
-    borderColor: colors35.DdsColorNeutralsGray5,
-    borderRight: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors35.DdsColorNeutralsGray5}`,
-    borderTop: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors35.DdsColorNeutralsGray5}`,
-    borderBottom: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors35.DdsColorNeutralsGray5}`
+    borderColor: colors34.DdsColorNeutralsGray5,
+    borderRight: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors34.DdsColorNeutralsGray5}`,
+    borderTop: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors34.DdsColorNeutralsGray5}`,
+    borderBottom: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors34.DdsColorNeutralsGray5}`
   },
   hover: {
-    color: colors35.DdsColorInteractiveDark,
-    borderColor: colors35.DdsColorInteractiveDark
+    color: colors34.DdsColorInteractiveDark,
+    borderColor: colors34.DdsColorInteractiveDark
   },
   firstChild: {
-    borderLeft: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors35.DdsColorNeutralsGray5}`,
+    borderLeft: `${border15.BordersDdsBorderStyleLightStrokeWeight} solid ${colors34.DdsColorNeutralsGray5}`,
     borderTopLeftRadius: borderRadius11.RadiiDdsBorderRadius1Radius,
     borderBottomLeftRadius: borderRadius11.RadiiDdsBorderRadius1Radius
   },
@@ -14115,12 +14077,12 @@ var label = {
   }
 };
 var content7 = {
-  base: { backgroundColor: colors35.DdsColorNeutralsGray1 },
+  base: { backgroundColor: colors34.DdsColorNeutralsGray1 },
   active: {
-    color: colors35.DdsColorInteractiveDarkest,
-    borderColor: colors35.DdsColorInteractiveDarker,
-    backgroundColor: colors35.DdsColorInteractiveLightest,
-    boxShadow: `inset 0 0 0 1px ${colors35.DdsColorInteractiveDarker}`
+    color: colors34.DdsColorInteractiveDarkest,
+    borderColor: colors34.DdsColorInteractiveDarker,
+    backgroundColor: colors34.DdsColorInteractiveLightest,
+    boxShadow: `inset 0 0 0 1px ${colors34.DdsColorInteractiveDarker}`
   },
   size: {
     tiny: {
@@ -14336,7 +14298,7 @@ var ToggleRadio = forwardRef73(
       checked,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
-      icon: icon12,
+      icon: icon11,
       label: label3,
       htmlProps,
       className,
@@ -14365,8 +14327,8 @@ var ToggleRadio = forwardRef73(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ jsxs75(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
-        icon12 && /* @__PURE__ */ jsx270(Icon, { icon: icon12, iconSize: "inherit" }),
+      /* @__PURE__ */ jsxs75(Content2, { $size: group4.size, $justIcon: !!icon11 && !label3, children: [
+        icon11 && /* @__PURE__ */ jsx270(Icon, { icon: icon11, iconSize: "inherit" }),
         label3 && /* @__PURE__ */ jsx270("span", { children: label3 })
       ] })
     ] });
@@ -14380,21 +14342,21 @@ import styled98, { css as css47 } from "styled-components";
 
 // src/components/ToggleButton/ToggleButton.tokens.tsx
 import { ddsBaseTokens as ddsBaseTokens63 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors36, spacing: spacing40 } = ddsBaseTokens63;
+var { colors: colors35, spacing: spacing40 } = ddsBaseTokens63;
 var { button: button2 } = buttonTokens;
 var { selectionControl: selectionControl3 } = selectionControlTokens;
 var typographyType6 = typographyTypes.small;
 var toggleButton = {
   border: button2.base.border,
-  backgroundColor: colors36.DdsColorNeutralsWhite,
-  color: colors36.DdsColorNeutralsGray7,
+  backgroundColor: colors35.DdsColorNeutralsWhite,
+  color: colors35.DdsColorNeutralsGray7,
   gap: spacing40.SizesDdsSpacingX05,
   borderRadius: button2.appearances.rounded.base.borderRadius,
   padding: button2.sizes.small.text.padding,
   hover: selectionControl3.hover.base,
   checked: {
     ...selectionControl3.checked.base,
-    color: colors36.DdsColorNeutralsWhite,
+    color: colors35.DdsColorNeutralsWhite,
     hover: selectionControl3.checked.hover
   }
 };
@@ -14466,7 +14428,7 @@ var Container16 = styled98.label`
   }
 `;
 var ToggleButton = forwardRef74(
-  ({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
+  ({ id, label: label3, icon: icon11, className, htmlProps, ...rest }, ref) => {
     const generatedId = useId26();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     return /* @__PURE__ */ jsxs76(Container16, { htmlFor: uniqueId, children: [
@@ -14478,8 +14440,8 @@ var ToggleButton = forwardRef74(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ jsxs76(Content3, { $hasIcon: !!icon12, children: [
-        icon12 && /* @__PURE__ */ jsx271(Icon, { icon: icon12, iconSize: "inherit" }),
+      /* @__PURE__ */ jsxs76(Content3, { $hasIcon: !!icon11, children: [
+        icon11 && /* @__PURE__ */ jsx271(Icon, { icon: icon11, iconSize: "inherit" }),
         " ",
         label3
       ] })