@norges-domstoler/dds-components 15.2.0 → 15.2.1

package/dist/index.js

@@ -1454,14 +1454,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,
@@ -3073,7 +3073,7 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
 // src/hooks/useRoveFocus.tsx
 var import_react10 = require("react");
 var isKeyboardEvent = (e) => e.key !== void 0;
-function useRoveFocus(size2, reset, direction = "column") {
+function useRoveFocus(size2, active, direction = "column") {
   const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react10.useState)(-1);
   const nextKey = direction === "row" ? "ArrowRight" : "ArrowDown";
   const previousKey = direction === "row" ? "ArrowLeft" : "ArrowUp";
@@ -3081,31 +3081,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]
   );
   (0, import_react10.useEffect)(() => {
+    if (!active) {
+      setCurrentFocusIndex(-1);
+      return;
+    }
     document.addEventListener("keydown", handleKeyDown, false);
     return () => {
       document.removeEventListener("keydown", handleKeyDown, false);
     };
-  }, [handleKeyDown]);
+  }, [handleKeyDown, active]);
   return [currentFocusIndex, setCurrentFocusIndex];
 }
 
@@ -3337,7 +3336,7 @@ var ExternalNavItem = (0, import_styled_components11.default)(BaseLink)`
 var NavigationItem = ({
   as: _as,
   active,
-  icon: icon12,
+  icon: icon11,
   external,
   children,
   onClick: propOnClick,
@@ -3363,7 +3362,7 @@ var NavigationItem = ({
       onClick,
       className: [active ? "active" : "", rest.className].join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconContainer, { children: icon12 && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon, { icon: icon12 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconContainer, { children: icon11 && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon, { icon: icon11 }) }),
         /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(TextContainer, { children }),
         /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ChevronContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon, { icon: ChevronRightIcon }) })
       ]
@@ -4217,7 +4216,7 @@ var Button = (0, import_react20.forwardRef)(
       loading = false,
       loadingTooltip = "Lagring p\xE5g\xE5r",
       fullWidth = false,
-      icon: icon12,
+      icon: icon11,
       onClick,
       onFocus,
       onBlur,
@@ -4228,7 +4227,7 @@ var Button = (0, import_react20.forwardRef)(
     } = props;
     const as = href ? "a" : "button";
     const hasLabel = !!children || !!label3;
-    const hasIcon = !!icon12;
+    const hasIcon = !!icon11;
     const wrapperProps = {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       href,
@@ -4253,13 +4252,13 @@ var Button = (0, import_react20.forwardRef)(
       onBlur
     };
     const isIconButton = !hasLabel && hasIcon;
-    const iconElement = icon12 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+    const iconElement = icon11 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
       StyledIconWrapperSpan,
       {
         size: size2,
         isHidden: hasIcon && loading,
         justIcon: isIconButton,
-        children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { icon: icon12, iconSize: "inherit" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { icon: icon11, iconSize: "inherit" })
       }
     );
     return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(ButtonWrapper, { ...wrapperProps, "aria-disabled": loading, children: [
@@ -4387,18 +4386,7 @@ var IconWrapper = import_styled_components17.default.span`
 var isAnchorProps2 = (props) => props.href !== void 0;
 var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
 var OverflowMenuItem = (0, import_react21.forwardRef)((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)) {
@@ -4414,27 +4402,12 @@ var OverflowMenuItem = (0, import_react21.forwardRef)((props, ref) => {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react21.useCallback)(() => {
-    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__ */ (0, import_jsx_runtime173.jsx)(Icon, { iconSize: "inherit", icon: icon12 });
+  const iconElement = icon11 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Icon, { iconSize: "inherit", icon: icon11 });
   if (!href && !onClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(Span, { ...{ ...getBaseHTMLProps(id, className, htmlProps, rest), ref }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(IconWrapper, { children: iconElement }),
@@ -4890,13 +4863,12 @@ var OverflowMenu = (0, import_react25.forwardRef)(
     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__ */ (0, import_jsx_runtime177.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
       OverflowMenuItem,
       {
         index,
         focus: focus === index && isOpen,
-        setFocus,
         icon: hasInteractiveUser && index === 0 ? PersonIcon : void 0,
         ...item,
         onClick: (e) => {
@@ -5313,33 +5285,26 @@ var import_styled_components25 = __toESM(require("styled-components"));
 
 // src/components/BackLink/BackLink.tokens.tsx
 var import_dds_design_tokens23 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors12, spacing: spacing10 } = import_dds_design_tokens23.ddsBaseTokens;
-var icon2 = {
-  color: colors12.DdsColorInteractiveBase
-};
-var nav = {
-  gap: spacing10.SizesDdsSpacingX05
+var { spacing: spacing10 } = import_dds_design_tokens23.ddsBaseTokens;
+var link3 = {
+  gap: spacing10.SizesDdsSpacingX025
 };
 var backLinkTokens = {
-  icon: icon2,
-  nav
+  link: link3
 };
 
 // src/components/BackLink/BackLink.tsx
 var import_jsx_runtime182 = require("react/jsx-runtime");
-var Nav = (0, import_styled_components25.default)("nav")`
+var StyledLink2 = (0, import_styled_components25.default)(Link)`
   align-items: center;
   display: flex;
-  gap: ${backLinkTokens.nav.gap};
-`;
-var StyledIcon = (0, import_styled_components25.default)(Icon)`
-  color: ${backLinkTokens.icon.color};
+  gap: ${backLinkTokens.link.gap};
 `;
 var BackLink = (0, import_react28.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(Nav, { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(StyledIcon, { icon: ArrowLeftIcon, iconSize: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Typography, { typographyType: "a", href: props.href, children: props.label })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("nav", { ref, "aria-label": "g\xE5 tilbake", children: /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(StyledLink2, { href: props.href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { icon: ArrowLeftIcon, iconSize: "small" }),
+    props.label
+  ] }) });
 });
 BackLink.displayName = "BackLink";
 
@@ -5366,10 +5331,10 @@ var import_styled_components26 = __toESM(require("styled-components"));
 
 // src/components/Breadcrumbs/Breadcrumb.tokens.tsx
 var import_dds_design_tokens24 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors13, spacing: spacing11 } = import_dds_design_tokens24.ddsBaseTokens;
+var { colors: colors12, spacing: spacing11 } = import_dds_design_tokens24.ddsBaseTokens;
 var typographyType2 = "bodySans02";
-var icon3 = {
-  color: colors13.DdsColorInteractiveBase
+var icon2 = {
+  color: colors12.DdsColorInteractiveBase
 };
 var listItem = {
   gap: spacing11.SizesDdsSpacingX05
@@ -5380,12 +5345,12 @@ var list = {
 var breadcrumbTokens = {
   list,
   listItem,
-  icon: icon3
+  icon: icon2
 };
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_jsx_runtime184 = require("react/jsx-runtime");
-var { icon: icon4, list: list2, listItem: listItem2 } = breadcrumbTokens;
+var { icon: icon3, list: list2, listItem: listItem2 } = breadcrumbTokens;
 var List = import_styled_components26.default.ol`
   ${removeListStyling}
   display: flex;
@@ -5401,8 +5366,8 @@ var ListItem = import_styled_components26.default.li`
   ${getFontStyling(typographyType2)}
 `;
 ListItem.displayName = "ListItem";
-var StyledIcon2 = (0, import_styled_components26.default)(Icon)`
-  color: ${icon4.color};
+var StyledIcon = (0, import_styled_components26.default)(Icon)`
+  color: ${icon3.color};
 `;
 var Breadcrumbs = (0, import_react30.forwardRef)(
   (props, ref) => {
@@ -5410,7 +5375,7 @@ var Breadcrumbs = (0, import_react30.forwardRef)(
     const childrenArray = import_react30.Children.toArray(children);
     const breadcrumbChildren = childrenArray.map((item, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(ListItem, { children: [
-        index !== 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(StyledIcon2, { icon: ChevronRightIcon }),
+        index !== 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(StyledIcon, { icon: ChevronRightIcon }),
         item
       ] }, `breadcrumb-${index}`);
     });
@@ -5432,29 +5397,29 @@ var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/components/Card/Card.tokens.tsx
 var import_dds_design_tokens25 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors14, border: border8 } = import_dds_design_tokens25.ddsBaseTokens;
+var { colors: colors13, border: border8 } = import_dds_design_tokens25.ddsBaseTokens;
 var { textDefault: textDefault3 } = import_dds_design_tokens25.ddsReferenceTokens;
 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
   }
@@ -5856,13 +5821,13 @@ var import_styled_components31 = __toESM(require("styled-components"));
 
 // src/components/Chip/Chip.tokens.tsx
 var import_dds_design_tokens27 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors15, spacing: spacing13, borderRadius: borderRadius5 } = import_dds_design_tokens27.ddsBaseTokens;
+var { colors: colors14, spacing: spacing13, borderRadius: borderRadius5 } = import_dds_design_tokens27.ddsBaseTokens;
 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 = {
@@ -6366,7 +6331,7 @@ var import_styled_components37 = __toESM(require("styled-components"));
 
 // src/components/date-inputs/DatePicker/DatePicker.tokens.ts
 var import_dds_design_tokens29 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors16 } = import_dds_design_tokens29.ddsBaseTokens;
+var { colors: colors15 } = import_dds_design_tokens29.ddsBaseTokens;
 var segment = {
   medium: {
     font: {
@@ -6374,7 +6339,7 @@ var segment = {
     },
     placeholder: {
       ...import_dds_design_tokens29.ddsBaseTokens.fontPackages.supportingStyle_placeholdertext_01.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   small: {
@@ -6383,7 +6348,7 @@ var segment = {
     },
     placeholder: {
       ...import_dds_design_tokens29.ddsBaseTokens.fontPackages.supportingStyle_placeholdertext_02.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   tiny: {
@@ -6392,7 +6357,7 @@ var segment = {
     },
     placeholder: {
       ...import_dds_design_tokens29.ddsBaseTokens.fontPackages.supportingStyle_placeholdertext_03.base,
-      textColor: colors16.DdsColorNeutralsGray6
+      textColor: colors15.DdsColorNeutralsGray6
     }
   },
   padding: {
@@ -6400,24 +6365,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: import_dds_design_tokens29.ddsBaseTokens.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(${import_dds_design_tokens29.ddsBaseTokens.iconSizes.DdsIconsizeMedium} + ${import_dds_design_tokens29.ddsBaseTokens.spacing.SizesDdsSpacingX05})`
@@ -6904,14 +6869,14 @@ var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/components/DescriptionList/DescriptionList.tokens.tsx
 var import_dds_design_tokens30 = require("@norges-domstoler/dds-design-tokens");
-var { spacing: spacing14, colors: colors17 } = import_dds_design_tokens30.ddsBaseTokens;
+var { spacing: spacing14, colors: colors16 } = import_dds_design_tokens30.ddsBaseTokens;
 var term = {
   appearance: {
     small: {
-      color: colors17.DdsColorNeutralsGray7
+      color: colors16.DdsColorNeutralsGray7
     },
     bold: {
-      color: colors17.DdsColorNeutralsGray9
+      color: colors16.DdsColorNeutralsGray9
     }
   },
   firstOfType: {
@@ -6921,7 +6886,7 @@ var term = {
 var desc = {
   base: {
     gap: spacing14.SizesDdsSpacingX025,
-    color: colors17.DdsColorNeutralsGray9
+    color: colors16.DdsColorNeutralsGray9
   },
   lastChild: {
     marginBottom: spacing14.SizesDdsSpacingX1
@@ -7029,14 +6994,14 @@ var DListDesc = import_styled_components43.default.dd`
   gap: ${descriptionListTokens.desc.base.gap};
 `;
 var DescriptionListDesc = (0, import_react49.forwardRef)((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__ */ (0, import_jsx_runtime204.jsxs)(DListDesc, { ...dListDescProps, children: [
-    icon12 && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { icon: icon12 }),
+    icon11 && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { icon: icon11 }),
     " ",
     children
   ] });
@@ -7291,7 +7256,7 @@ DrawerGroup.displayName = "DrawerGroup";
 var import_dds_design_tokens32 = require("@norges-domstoler/dds-design-tokens");
 var import_styled_components46 = __toESM(require("styled-components"));
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var { colors: colors18, spacing: spacing16 } = import_dds_design_tokens32.ddsBaseTokens;
+var { colors: colors17, spacing: spacing16 } = import_dds_design_tokens32.ddsBaseTokens;
 var StyledEmptyContent = import_styled_components46.default.div`
   display: flex;
   justify-content: center;
@@ -7299,7 +7264,7 @@ var StyledEmptyContent = import_styled_components46.default.div`
   min-height: ${spacing16.SizesDdsSpacingX10};
   height: 100%;
   width: 100%;
-  background-color: ${colors18.DdsColorNeutralsGray1};
+  background-color: ${colors17.DdsColorNeutralsGray1};
   padding: ${spacing16.SizesDdsSpacingX15};
 `;
 var StyledEmptyContentText = import_styled_components46.default.div`
@@ -7401,7 +7366,7 @@ function useControllableState(props) {
 // src/components/FavStar/FavStar.tsx
 var import_jsx_runtime209 = require("react/jsx-runtime");
 var TRANSITION_SPEED = "0.2s";
-var StyledIcon3 = (0, import_styled_components47.default)(Icon)`
+var StyledIcon2 = (0, import_styled_components47.default)(Icon)`
   color: currentColor;
   position: absolute;
   top: 0;
@@ -7447,7 +7412,7 @@ var Container5 = import_styled_components47.default.label`
   }
 
   &:active {
-    ${StyledIcon3} {
+    ${StyledIcon2} {
       transform: scale(0.75);
     }
   }
@@ -7503,9 +7468,9 @@ var FavStar = (0, import_react55.forwardRef)(
               "aria-label": (_a = props["aria-label"]) != null ? _a : "Favoriser"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledIcon3, { iconSize: size2, icon: StarIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledIcon2, { iconSize: size2, icon: StarIcon }),
           /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
-            StyledIcon3,
+            StyledIcon2,
             {
               iconSize: size2,
               icon: StarFilledIcon,
@@ -7771,16 +7736,16 @@ var import_styled_components51 = __toESM(require("styled-components"));
 
 // src/components/Tooltip/Tooltip.tokens.tsx
 var import_dds_design_tokens37 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors19, spacing: spacing19 } = import_dds_design_tokens37.ddsBaseTokens;
+var { colors: colors18, spacing: spacing19 } = import_dds_design_tokens37.ddsBaseTokens;
 var wrapper = {
   padding: `${spacing19.SizesDdsSpacingX075}`
 };
 var svgArrow = {
   border: {
-    fill: colors19.DdsColorPrimaryLighter
+    fill: colors18.DdsColorPrimaryLighter
   },
   background: {
-    fill: colors19.DdsColorNeutralsWhite
+    fill: colors18.DdsColorNeutralsWhite
   }
 };
 var tooltipTokens = {
@@ -8076,17 +8041,17 @@ var import_styled_components53 = __toESM(require("styled-components"));
 
 // src/components/FileUploader/FileUploader.tokens.tsx
 var import_dds_design_tokens39 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors20, spacing: spacing20 } = import_dds_design_tokens39.ddsBaseTokens;
+var { colors: colors19, spacing: spacing20 } = import_dds_design_tokens39.ddsBaseTokens;
 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 = {
@@ -8096,10 +8061,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 = {
@@ -8612,22 +8577,22 @@ var import_styled_components57 = __toESM(require("styled-components"));
 
 // src/components/GlobalMessage/GlobalMessage.tokens.tsx
 var import_dds_design_tokens40 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors21, spacing: spacing21 } = import_dds_design_tokens40.ddsBaseTokens;
+var { colors: colors20, spacing: spacing21 } = import_dds_design_tokens40.ddsBaseTokens;
 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 = {
@@ -8659,20 +8624,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
 var import_jsx_runtime220 = require("react/jsx-runtime");
-var { container: container8, contentContainer: contentContainer4, icon: icon5 } = globalMessageTokens;
+var { container: container8, contentContainer: contentContainer4, icon: icon4 } = globalMessageTokens;
 var Container7 = import_styled_components57.default.div`
   display: flex;
   align-items: center;
@@ -8688,7 +8653,7 @@ var Container7 = import_styled_components57.default.div`
   `}
 `;
 var MessageIconWrapper = (0, import_styled_components57.default)(Icon)`
-  margin-right: ${icon5.marginRight};
+  margin-right: ${icon4.marginRight};
 `;
 var ControlsContainer = import_styled_components57.default.div`
   display: flex;
@@ -8727,7 +8692,7 @@ var GlobalMessage = (0, import_react62.forwardRef)(
               MessageIconWrapper,
               {
                 icon: purposeVariants[purpose].icon,
-                color: icon5[purpose].color
+                color: icon4[purpose].color
               }
             ),
             children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Typography, { as: "span", children: message2 })
@@ -9016,7 +8981,7 @@ var import_styled_components60 = __toESM(require("styled-components"));
 
 // src/components/InlineEdit/InlineEdit.tokens.ts
 var import_dds_design_tokens42 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors22, spacing: spacing23, fontPackages: fontPackages5 } = import_dds_design_tokens42.ddsBaseTokens;
+var { colors: colors21, spacing: spacing23, fontPackages: fontPackages5 } = import_dds_design_tokens42.ddsBaseTokens;
 var inlineEdit = {
   padding: spacing23.SizesDdsSpacingX025,
   font: fontPackages5.body_sans_02.base,
@@ -9025,10 +8990,10 @@ var inlineEdit = {
     paddingLeft: spacing23.SizesDdsSpacingX2
   },
   hover: {
-    backgroundColor: colors22.DdsColorInteractiveLightest
+    backgroundColor: colors21.DdsColorInteractiveLightest
   },
   focus: {
-    backgroundColor: colors22.DdsColorNeutralsWhite
+    backgroundColor: colors21.DdsColorNeutralsWhite
   }
 };
 var iconWrapper = {
@@ -9259,9 +9224,9 @@ var import_styled_components61 = __toESM(require("styled-components"));
 
 // src/components/InternalHeader/InternalHeader.tokens.tsx
 var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
-var { border: border10, colors: colors23, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
+var { border: border10, colors: colors22, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
 var bar = {
-  backgroundColor: colors23.DdsColorNeutralsWhite,
+  backgroundColor: colors22.DdsColorNeutralsWhite,
   itemGap: spacing24.SizesDdsSpacingX15,
   minHeight: "57px",
   borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`,
@@ -9650,7 +9615,7 @@ var import_styled_components65 = __toESM(require("styled-components"));
 
 // src/components/LocalMessage/LocalMessage.tokens.tsx
 var import_dds_design_tokens46 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = import_dds_design_tokens46.ddsBaseTokens;
+var { colors: colors23, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = import_dds_design_tokens46.ddsBaseTokens;
 var container9 = {
   base: {
     boxShadow: outerShadow3.DdsShadow1Onlight,
@@ -9661,28 +9626,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
     }
   }
 };
@@ -9717,37 +9682,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
 var import_jsx_runtime233 = require("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 = import_styled_components65.default.div.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
@@ -9842,7 +9807,7 @@ var LocalMessage = (0, import_react73.forwardRef)(
         MessageIconWrapper2,
         {
           icon: purposeVariants3[purpose].icon,
-          color: icon7[purpose].color
+          color: icon6[purpose].color
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(TextContainer2, { children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Typography, { as: "span", children: message2 }) }),
@@ -10079,12 +10044,12 @@ var import_styled_components71 = __toESM(require("styled-components"));
 
 // src/components/Pagination/Pagination.tokens.tsx
 var import_dds_design_tokens49 = require("@norges-domstoler/dds-design-tokens");
-var { spacing: spacing28, colors: colors25 } = import_dds_design_tokens49.ddsBaseTokens;
+var { spacing: spacing28, colors: colors24 } = import_dds_design_tokens49.ddsBaseTokens;
 var list7 = {
   gap: spacing28.SizesDdsSpacingX075
 };
 var truncationIcon = {
-  color: colors25.DdsColorNeutralsGray7
+  color: colors24.DdsColorNeutralsGray7
 };
 var outerContainer3 = {
   gap: spacing28.SizesDdsSpacingX075
@@ -10141,7 +10106,7 @@ var import_styled_components70 = __toESM(require("styled-components"));
 
 // src/components/Select/Select.tokens.tsx
 var import_dds_design_tokens50 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = import_dds_design_tokens50.ddsBaseTokens;
+var { colors: colors25, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = import_dds_design_tokens50.ddsBaseTokens;
 var { textDefault: textDefault5 } = import_dds_design_tokens50.ddsReferenceTokens;
 var placeholderTypographyTypes = {
   medium: "supportingStylePlaceholderText01",
@@ -10164,12 +10129,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",
@@ -10202,14 +10167,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"
@@ -10217,23 +10182,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 = {
@@ -10241,44 +10206,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 = {
@@ -10286,7 +10251,7 @@ var valueContainer = {
     gap: spacing29.SizesDdsSpacingX025
   }
 };
-var icon8 = {
+var icon7 = {
   marginRight: spacing29.SizesDdsSpacingX05
 };
 var selectTokens = {
@@ -10303,7 +10268,7 @@ var selectTokens = {
   noOptionsMessage,
   clearIndicator,
   loadingIndicator,
-  icon: icon8
+  icon: icon7
 };
 
 // src/components/Select/Select.styles.ts
@@ -10320,7 +10285,7 @@ var {
   multiValueRemove: multiValueRemove2,
   noOptionsMessage: noOptionsMessage2,
   placeholder: placeholder2,
-  icon: icon9,
+  icon: icon8,
   valueContainer: valueContainer2
 } = selectTokens;
 var prefix = "dds-select";
@@ -10401,8 +10366,8 @@ var InnerSingleValue = import_styled_components70.default.div`
   box-sizing: border-box;
   max-width: 100%;
 `;
-var StyledIcon4 = (0, import_styled_components70.default)(Icon)`
-  margin-right: ${icon9.marginRight};
+var StyledIcon3 = (0, import_styled_components70.default)(Icon)`
+  margin-right: ${icon8.marginRight};
 `;
 var getCustomStyles = (size2) => ({
   control: () => ({
@@ -10595,8 +10560,8 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, impo
     "aria-describedby": ariaDescribedby
   }
 );
-var DDSControl = (props, componentSize, icon12) => /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Control, { ...props, children: [
-  icon12 && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(StyledIcon4, { icon: icon12, iconSize: getFormInputIconSize(componentSize) }),
+var DDSControl = (props, componentSize, icon11) => /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Control, { ...props, children: [
+  icon11 && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(StyledIcon3, { icon: icon11, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
 
@@ -10617,7 +10582,7 @@ function SelectInner(props, ref) {
     options,
     isMulti,
     value,
-    icon: icon12,
+    icon: icon11,
     defaultValue,
     width = defaultWidth4,
     closeMenuOnSelect,
@@ -10681,7 +10646,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,
@@ -10703,7 +10668,7 @@ var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }))
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
 var { outerContainer: outerContainer4, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list8 } = paginationTokens;
-var Nav2 = import_styled_components71.default.nav`
+var Nav = import_styled_components71.default.nav`
   display: flex;
   align-items: center;
 `;
@@ -10836,12 +10801,12 @@ var Pagination = (0, import_react78.forwardRef)(
     };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
-    const navigation2 = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(List3, { children: [
+    const navigation2 = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(List3, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       listItems,
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
     ] }) }) : null;
-    const smallScreenNavigation = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(List3, { children: [
+    const smallScreenNavigation = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(List3, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
         Button,
         {
@@ -11130,7 +11095,7 @@ var useProgressTrackerContext = () => (0, import_react81.useContext)(ProgressTra
 
 // src/components/ProgressTracker/ProgressTracker.tokens.tsx
 var import_dds_design_tokens53 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors27, spacing: spacing31 } = import_dds_design_tokens53.ddsBaseTokens;
+var { colors: colors26, spacing: spacing31 } = import_dds_design_tokens53.ddsBaseTokens;
 var typographyTypes4 = {
   number: "bodySans01",
   label: "bodySans03"
@@ -11142,7 +11107,7 @@ var itemContentWrapper = {
   gap: spacing31.SizesDdsSpacingX05
 };
 var connector = {
-  color: colors27.DdsColorNeutralsGray5,
+  color: colors26.DdsColorNeutralsGray5,
   height: "18px",
   width: "1px"
 };
@@ -11151,87 +11116,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"
   }
 };
@@ -11333,7 +11298,7 @@ var ProgressTrackerItem = (props) => {
     index = 0,
     completed = false,
     disabled = false,
-    icon: icon12,
+    icon: icon11,
     children
   } = props;
   const { activeStep, handleStepChange } = useProgressTrackerContext();
@@ -11345,11 +11310,11 @@ var ProgressTrackerItem = (props) => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
     }
-    if (icon12 !== void 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
+    if (icon11 !== void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { icon: icon11, iconSize: itemNumber2.iconSize });
     }
     return index + 1;
-  }, [completed, icon12, index]);
+  }, [completed, icon11, index]);
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
     ItemContentWrapper,
     {
@@ -11469,7 +11434,7 @@ var useAutocompleteSearch = () => {
 
 // src/components/Search/Search.tokens.tsx
 var import_dds_design_tokens54 = require("@norges-domstoler/dds-design-tokens");
-var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } = import_dds_design_tokens54.ddsBaseTokens;
+var { spacing: spacing32, iconSizes: iconSizes2, colors: colors27 } = import_dds_design_tokens54.ddsBaseTokens;
 var { textDefault: textDefault6 } = import_dds_design_tokens54.ddsReferenceTokens;
 var typographyTypes5 = {
   small: "bodySans01",
@@ -11531,8 +11496,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
@@ -11618,7 +11583,7 @@ var SearchSuggestions = (0, import_react85.forwardRef)((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__ */ (0, import_jsx_runtime244.jsx)(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
@@ -11626,7 +11591,6 @@ var SearchSuggestions = (0, import_react85.forwardRef)((props, ref) => {
       {
         index,
         focus: focus === index && showSuggestions,
-        setFocus,
         "aria-label": `s\xF8k p\xE5 ${suggestion}`,
         onClick: onSuggestionClick,
         title: suggestion,
@@ -11966,13 +11930,13 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/SelectionControl.tokens.tsx
-var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } = import_dds_design_tokens55.ddsBaseTokens;
+var { colors: colors28, spacing: spacing33, borderRadius: borderRadius8 } = import_dds_design_tokens55.ddsBaseTokens;
 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)`,
@@ -11982,20 +11946,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
     }
@@ -12005,39 +11969,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`
@@ -12556,27 +12520,27 @@ var import_styled_components78 = __toESM(require("styled-components"));
 
 // src/components/SkipToContent/SkipToContent.tokens.tsx
 var import_dds_design_tokens56 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors30, spacing: spacing34 } = import_dds_design_tokens56.ddsBaseTokens;
-var link3 = {
+var { colors: colors29, spacing: spacing34 } = import_dds_design_tokens56.ddsBaseTokens;
+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
 var import_jsx_runtime251 = require("react/jsx-runtime");
-var { wrapper: wrapper6, link: link4 } = skipToContentTokens;
+var { wrapper: wrapper6, link: link5 } = skipToContentTokens;
 var Wrapper5 = import_styled_components78.default.div`
   box-sizing: border-box;
   position: absolute;
@@ -12606,7 +12570,7 @@ var Wrapper5 = import_styled_components78.default.div`
 `;
 var Link4 = import_styled_components78.default.a`
   text-decoration: none;
-  color: ${link4.base.color};
+  color: ${link5.base.color};
   ${getFontStyling(defaultTypographyType)}
 
   @media (prefers-reduced-motion: no-preference) {
@@ -12616,7 +12580,7 @@ var Link4 = import_styled_components78.default.a`
     ${focusVisibleOnDark}
   }
   &:hover {
-    color: ${link4.base.color};
+    color: ${link5.base.color};
   }
 `;
 var SkipToContent = (0, import_react94.forwardRef)(
@@ -12784,33 +12748,33 @@ function useIsInTableHead() {
 
 // src/components/Table/normal/Table.tokens.tsx
 var import_dds_design_tokens58 = require("@norges-domstoler/dds-design-tokens");
-var { font: font2, colors: colors31, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = import_dds_design_tokens58.ddsBaseTokens;
+var { font: font2, colors: colors30, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = import_dds_design_tokens58.ddsBaseTokens;
 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
     }
   }
@@ -12828,7 +12792,7 @@ var cell2 = {
     }
   },
   head: {
-    backgroundColor: colors31.DdsColorPrimaryLightest
+    backgroundColor: colors30.DdsColorPrimaryLightest
   },
   sort: {
     gap: spacing35.SizesDdsSpacingX05,
@@ -13390,14 +13354,14 @@ var import_styled_components91 = __toESM(require("styled-components"));
 
 // src/components/Tabs/Tabs.tokens.tsx
 var import_dds_design_tokens59 = require("@norges-domstoler/dds-design-tokens");
-var { border: border14, spacing: spacing36, colors: colors32 } = import_dds_design_tokens59.ddsBaseTokens;
+var { border: border14, spacing: spacing36, colors: colors31 } = import_dds_design_tokens59.ddsBaseTokens;
 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: {
@@ -13407,15 +13371,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 = {
@@ -13515,7 +13479,7 @@ var Button2 = import_styled_components91.default.button`
 var Tab = (0, import_react110.forwardRef)((props, ref) => {
   const {
     active = false,
-    icon: icon12,
+    icon: icon11,
     children,
     focus,
     setFocus,
@@ -13531,19 +13495,13 @@ var Tab = (0, import_react110.forwardRef)((props, ref) => {
   useSetTabWidth(index, width);
   const itemRef = (0, import_react110.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
+  const { tabContentDirection } = useTabsContext();
   (0, import_react110.useEffect)(() => {
     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 = (0, import_react110.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
@@ -13570,7 +13528,7 @@ var Tab = (0, import_react110.forwardRef)((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon12 && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
+        icon11 && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { icon: icon11, iconSize: "inherit" }),
         /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("span", { children })
       ]
     }
@@ -13617,12 +13575,11 @@ var TabList = (0, import_react111.forwardRef)(
       handleTabChange,
       tabListRef,
       hasTabFocus,
-      tabPanelsRef,
       setHasTabFocus
     } = useTabsContext();
     const uniqueId = id != null ? id : `${tabsId}-tablist`;
     const childrenArray = import_react111.Children.toArray(children).length;
-    const [focus, setFocus] = useRoveFocus(childrenArray, !hasTabFocus, "row");
+    const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
     const tabListChildren = import_react111.Children.map(children, (child, index) => {
       return (0, import_react111.isValidElement)(child) && (0, import_react111.cloneElement)(child, {
@@ -13636,28 +13593,34 @@ var TabList = (0, import_react111.forwardRef)(
       });
     });
     const [widths, setWidths] = (0, import_react111.useState)([]);
-    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__ */ (0, import_jsx_runtime266.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
+      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";
@@ -13724,7 +13687,7 @@ var import_styled_components94 = __toESM(require("styled-components"));
 
 // src/components/Tag/Tag.tokens.tsx
 var import_dds_design_tokens60 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } = import_dds_design_tokens60.ddsBaseTokens;
+var { colors: colors32, borderRadius: borderRadius10, spacing: spacing37 } = import_dds_design_tokens60.ddsBaseTokens;
 var typographyType5 = "bodySans01";
 var wrapper7 = {
   border: "1px solid",
@@ -13744,13 +13707,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
       }
     },
@@ -13759,14 +13722,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
         }
       }
     },
@@ -13775,14 +13738,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
         }
       }
     },
@@ -13791,14 +13754,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
         }
       }
     },
@@ -13807,14 +13770,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
         }
       }
     }
@@ -13840,7 +13803,7 @@ var Wrapper7 = (0, import_styled_components94.default)(TextOverflowEllipsisWrapp
     border-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].borderColor};
   `}
 `;
-var StyledIcon5 = (0, import_styled_components94.default)(Icon)`
+var StyledIcon4 = (0, import_styled_components94.default)(Icon)`
   color: ${({ $purpose, $strong }) => {
   var _a;
   return (_a = wrapper8.purpose[$purpose][$strong ? "strong" : "base"].icon) == null ? void 0 : _a.color;
@@ -13858,7 +13821,7 @@ var Tag = (0, import_react114.forwardRef)((props, ref) => {
     withIcon,
     ...rest
   } = props;
-  const icon12 = tagTokens.wrapper.purpose[purpose].icon;
+  const icon11 = tagTokens.wrapper.purpose[purpose].icon;
   return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
     Wrapper7,
     {
@@ -13866,14 +13829,14 @@ var Tag = (0, import_react114.forwardRef)((props, ref) => {
       ref,
       $purpose: purpose,
       $strong: strong,
-      $withIcon: Boolean(withIcon && icon12),
+      $withIcon: Boolean(withIcon && icon11),
       children: [
-        withIcon && icon12 && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
-          StyledIcon5,
+        withIcon && icon11 && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
+          StyledIcon4,
           {
             $purpose: purpose,
             $strong: strong,
-            icon: icon12,
+            icon: icon11,
             iconSize: tagTokens.wrapper.icon.size
           }
         ),
@@ -13922,7 +13885,7 @@ var import_styled_components96 = __toESM(require("styled-components"));
 
 // src/components/TextInput/TextInput.tokens.tsx
 var import_dds_design_tokens61 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } = import_dds_design_tokens61.ddsBaseTokens;
+var { colors: colors33, spacing: spacing38, iconSizes: iconSizes4 } = import_dds_design_tokens61.ddsBaseTokens;
 var input5 = {
   withIcon: {
     medium: {
@@ -13938,11 +13901,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,
@@ -13960,22 +13923,22 @@ var icon10 = {
 };
 var textInputTokens = {
   input: input5,
-  icon: icon10,
+  icon: icon9,
   affix
 };
 
 // src/components/TextInput/TextInput.styles.tsx
 var { iconSizes: iconSizes5 } = import_dds_design_tokens62.ddsBaseTokens;
-var { input: input6, icon: icon11 } = textInputTokens;
+var { input: input6, icon: icon10 } = textInputTokens;
 var MessageContainer2 = import_styled_components96.default.div`
   display: flex;
   justify-content: space-between;
 `;
-var StyledIcon6 = (0, import_styled_components96.default)(Icon)`
+var StyledIcon5 = (0, import_styled_components96.default)(Icon)`
   position: absolute;
-  color: ${icon11.color};
+  color: ${icon10.color};
   ${({ $size, iconSize }) => import_styled_components96.css`
-    left: ${icon11.sizes[$size].left};
+    left: ${icon10.sizes[$size].left};
     ${iconSize === "small" ? import_styled_components96.css`
           top: ${`calc(50% - ${iconSizes5.DdsIconsizeSmallNumberPx / 2}px)`};
         ` : import_styled_components96.css`
@@ -14057,7 +14020,7 @@ var TextInput2 = (0, import_react116.forwardRef)(
     defaultValue,
     "aria-required": ariaRequired,
     "aria-describedby": ariaDescribedby,
-    icon: icon12,
+    icon: icon11,
     prefix: prefix2,
     suffix,
     ...rest
@@ -14089,7 +14052,7 @@ var TextInput2 = (0, import_react116.forwardRef)(
     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,
@@ -14127,9 +14090,9 @@ var TextInput2 = (0, import_react116.forwardRef)(
     if (hasIcon) {
       extendedInput = /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(InputContainer, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
-          StyledIcon6,
+          StyledIcon5,
           {
-            icon: icon12,
+            icon: icon11,
             iconSize: getFormInputIconSize(componentSize),
             $size: componentSize
           }
@@ -14205,7 +14168,7 @@ var useToggleBarContext = () => (0, import_react117.useContext)(ToggleBarContext
 
 // src/components/ToggleBar/ToggleBar.tokens.tsx
 var import_dds_design_tokens63 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = import_dds_design_tokens63.ddsBaseTokens;
+var { colors: colors34, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = import_dds_design_tokens63.ddsBaseTokens;
 var typographyTypes6 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -14233,17 +14196,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
   },
@@ -14253,12 +14216,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: {
@@ -14471,7 +14434,7 @@ var ToggleRadio = (0, import_react119.forwardRef)(
       checked,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
-      icon: icon12,
+      icon: icon11,
       label: label3,
       htmlProps,
       className,
@@ -14500,8 +14463,8 @@ var ToggleRadio = (0, import_react119.forwardRef)(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
-        icon12 && /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Content2, { $size: group4.size, $justIcon: !!icon11 && !label3, children: [
+        icon11 && /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Icon, { icon: icon11, iconSize: "inherit" }),
         label3 && /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("span", { children: label3 })
       ] })
     ] });
@@ -14515,21 +14478,21 @@ var import_styled_components100 = __toESM(require("styled-components"));
 
 // src/components/ToggleButton/ToggleButton.tokens.tsx
 var import_dds_design_tokens64 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors36, spacing: spacing40 } = import_dds_design_tokens64.ddsBaseTokens;
+var { colors: colors35, spacing: spacing40 } = import_dds_design_tokens64.ddsBaseTokens;
 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
   }
 };
@@ -14601,7 +14564,7 @@ var Container16 = import_styled_components100.default.label`
   }
 `;
 var ToggleButton = (0, import_react120.forwardRef)(
-  ({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
+  ({ id, label: label3, icon: icon11, className, htmlProps, ...rest }, ref) => {
     const generatedId = (0, import_react120.useId)();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(Container16, { htmlFor: uniqueId, children: [
@@ -14613,8 +14576,8 @@ var ToggleButton = (0, import_react120.forwardRef)(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(Content3, { $hasIcon: !!icon12, children: [
-        icon12 && /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(Content3, { $hasIcon: !!icon11, children: [
+        icon11 && /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(Icon, { icon: icon11, iconSize: "inherit" }),
         " ",
         label3
       ] })