@norges-domstoler/dds-components 14.5.0 → 14.6.0

package/dist/index.mjs

@@ -692,7 +692,7 @@ var Input = styled3.input`
     ${selection}
   }
 
-  &:not(.disabled):not(.read-only):not(.active):hover,
+  &:not(input):not(textarea):not(.disabled):not(.read-only):not(.active):hover,
   &:hover:enabled:read-write {
     ${hoverInputfield}
   }
@@ -804,8 +804,8 @@ var getElevation = (elevation) => {
       return outerShadow.DdsShadow4Onlight;
   }
 };
-var getBorder = (borderStyle2) => {
-  switch (borderStyle2) {
+var getBorder = (borderStyle) => {
+  switch (borderStyle) {
     case "light":
       return `${border3.BordersDdsBorderStyleLightStrokeWeight} solid ${border3.BordersDdsBorderStyleLightStroke}`;
     case "dark":
@@ -8998,185 +8998,156 @@ 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 borderStyle = `${border10.BordersDdsBorderStyleLightStrokeWeight} ${border10.BordersDdsBorderStyleLightStroke} solid `;
-var typographyTypes3 = {
-  navLink: "bodySans01"
+var bar = {
+  backgroundColor: colors23.DdsColorNeutralsWhite,
+  itemGap: spacing24.SizesDdsSpacingX1,
+  minHeight: "57px",
+  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`
 };
-var navLink = {
-  base: {
-    color: colors23.DdsColorNeutralsGray9,
-    backgroundColor: colors23.DdsColorNeutralsWhite,
-    padding: `${spacing24.SizesDdsSpacingX075} ${spacing24.SizesDdsSpacingX15}`
-  },
-  hover: {
-    color: colors23.DdsColorInteractiveDark
-  },
-  active: {
-    color: colors23.DdsColorInteractiveDark
-  },
-  current: {
-    color: colors23.DdsColorInteractiveDarkest,
-    backgroundColor: colors23.DdsColorPrimaryLightest
-  }
-};
-var outerContainer3 = {
-  backgroundColor: colors23.DdsColorNeutralsWhite
-};
-var applicationNameWrapper = {
-  padding: `${spacing24.SizesDdsSpacingX1} ${spacing24.SizesDdsSpacingX15}`
-};
-var lovisaWrapper = {
-  padding: `${spacing24.SizesDdsSpacingX1} ${spacing24.SizesDdsSpacingX15}`,
-  borderRight: borderStyle
-};
-var banner = {
-  borderBottom: borderStyle,
-  paddingRight: spacing24.SizesDdsSpacingX1,
-  hasContextMenu: {
-    paddingRight: spacing24.SizesDdsSpacingX4
-  }
-};
-var navigation2 = {
-  borderBottom: borderStyle
-};
-var contextGroup = {
-  right: spacing24.SizesDdsSpacingX075,
-  top: spacing24.SizesDdsSpacingX025
+var separator = {
+  color: border10.BordersDdsBorderStyleLightStroke,
+  width: border10.BordersDdsBorderStyleLightStrokeWeight
 };
 var internalHeaderTokens = {
-  navLink,
-  outerContainer: outerContainer3,
-  applicationNameWrapper,
-  lovisaWrapper,
-  banner,
-  navigation: navigation2,
-  contextGroup
+  bar,
+  separator
 };
 
 // src/components/InternalHeader/InternalHeader.styles.tsx
-var {
-  outerContainer: outerContainer4,
-  applicationNameWrapper: applicationNameWrapper2,
-  lovisaWrapper: lovisaWrapper2,
-  banner: banner2,
-  navigation: navigation3,
-  contextGroup: contextGroup2
-} = internalHeaderTokens;
-var OuterContainer = styled59.div`
-  position: relative;
+var { bar: bar2, separator: separator2 } = internalHeaderTokens;
+var Bar2 = styled59.div`
   *::selection {
     ${selection}
   }
-  background-color: ${outerContainer4.backgroundColor};
-`;
-var BannerWrapper = styled59.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-bottom: ${banner2.borderBottom};
-  padding-right: ${banner2.paddingRight};
-  ${({ $hasContextMenu }) => $hasContextMenu && css24`
-      padding-right: ${banner2.hasContextMenu.paddingRight};
-    `}
-`;
-var BannerLeftWrapper = styled59.div`
-  display: flex;
-`;
-var ApplicationNameWrapper = styled59.div`
+  background-color: ${bar2.backgroundColor};
   display: flex;
+  gap: ${bar2.itemGap};
   align-items: center;
-  padding: ${applicationNameWrapper2.padding};
-`;
-var LovisaWrapper = styled59.div`
-  padding: ${lovisaWrapper2.padding};
-  border-right: ${lovisaWrapper2.borderRight};
+  min-height: ${bar2.minHeight};
+  border-bottom: ${bar2.borderBottom};
+
+  ${({ $hasNavigation }) => $hasNavigation ? css24`
+          ${ContextMenuGroup} {
+            margin-left: auto;
+          }
+        ` : css24`
+          ${BarSeparator} {
+            margin-left: auto;
+          }
+        `}
 `;
-var Navigation2 = styled59.nav`
-  border-bottom: ${navigation3.borderBottom};
+var BarSeparator = styled59.div`
+  border-left: ${separator2.width} solid ${separator2.color};
+  align-self: stretch;
 `;
 var NavigationList = styled59.ul`
   box-sizing: border-box;
   display: flex;
+  gap: ${bar2.itemGap};
+  align-items: center;
+  width: 100%;
   ${({ smallScreen }) => smallScreen && css24`
+      align-items: initial;
       flex-direction: column;
     `}
   list-style-type: none;
   padding: 0;
   margin: 0;
 `;
-var ContextMenuGroup = styled59.div`
-  position: absolute;
-  top: ${contextGroup2.top};
-  right: ${contextGroup2.right};
-`;
+var ContextMenuGroup = styled59.div``;
 var StyledOverflowMenu = styled59(OverflowMenu)`
   max-height: calc(100vh - 110px);
 `;
+var NavLi = styled59.li`
+  display: flex;
+`;
 
-// src/components/InternalHeader/InternalHeaderListItem.tsx
+// src/components/InternalHeader/NavigationItem.tsx
 import { forwardRef as forwardRef39 } from "react";
 import styled60 from "styled-components";
-import { jsx as jsx226 } from "react/jsx-runtime";
-var Li = styled60.li`
-  box-sizing: border-box;
-`;
-var InternalHeaderListItem = forwardRef39(({ children, ...rest }, ref) => {
-  const props = {
-    ref,
-    ...rest
+
+// src/components/InternalHeader/NavigationItem.tokens.ts
+import { ddsBaseTokens as ddsBaseTokens43 } from "@norges-domstoler/dds-design-tokens";
+var navTokens5 = {
+  base: {
+    padding: [
+      ddsBaseTokens43.spacing.SizesDdsSpacingX075,
+      ddsBaseTokens43.spacing.SizesDdsSpacingX1
+    ].join(" "),
+    borderRadius: ddsBaseTokens43.borderRadius.RadiiDdsBorderRadius1Radius,
+    backgroundColor: "transparent",
+    color: ddsBaseTokens43.colors.DdsColorNeutralsGray6,
+    hover: {
+      backgroundColor: ddsBaseTokens43.colors.DdsColorNeutralsGray1,
+      color: ddsBaseTokens43.colors.DdsColorNeutralsGray9
+    }
+  },
+  active: {
+    base: {
+      backgroundColor: ddsBaseTokens43.colors.DdsColorInteractiveLightest,
+      color: ddsBaseTokens43.colors.DdsColorNeutralsGray9
+    },
+    hover: {
+      backgroundColor: ddsBaseTokens43.colors.DdsColorInteractiveLightest,
+      color: ddsBaseTokens43.colors.DdsColorNeutralsGray9
+    }
+  }
+};
+function getNavTokens({ active }) {
+  return {
+    ...navTokens5.base,
+    ...active ? navTokens5.active.base : {},
+    hover: {
+      ...navTokens5.base.hover,
+      ...active ? navTokens5.active.hover : {}
+    }
   };
-  return /* @__PURE__ */ jsx226(Li, { ...props, children });
-});
+}
 
 // src/components/InternalHeader/NavigationItem.tsx
-import { forwardRef as forwardRef40 } from "react";
-import styled61, { css as css25 } from "styled-components";
-import { jsx as jsx227 } from "react/jsx-runtime";
-var { navLink: navLink2 } = internalHeaderTokens;
-var Link3 = styled61.a.withConfig({
-  shouldForwardProp: (prop) => prop !== "isCurrent"
-})`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  box-sizing: border-box;
+import { jsx as jsx226 } from "react/jsx-runtime";
+var Link3 = styled60.a`
+  ${getFontStyling("bodySans02")}
   text-decoration: none;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s;
-  }
-  color: ${navLink2.base.color};
-  background-color: ${navLink2.base.backgroundColor};
-  padding: ${navLink2.base.padding};
-  ${getFontStyling(typographyTypes3.navLink)}
+
+  color: ${({ $active }) => getNavTokens({ active: $active }).color};
+  background-color: ${({ $active }) => getNavTokens({ active: $active }).backgroundColor};
+  padding: ${({ $active }) => getNavTokens({ active: $active }).padding};
+  border-radius: ${({ $active }) => getNavTokens({ active: $active }).borderRadius};
+
   &:hover {
-    color: ${navLink2.hover.color};
+    color: ${({ $active }) => getNavTokens({ active: $active }).hover.color};
+    background-color: ${({ $active }) => getNavTokens({ active: $active }).hover.backgroundColor};
   }
+
   &:active {
-    color: ${navLink2.active.color};
+    color: ${getNavTokens({ active: true }).color};
+    background-color: ${getNavTokens({ active: true }).backgroundColor};
   }
   &:focus-visible,
   &.focus-visible {
-    ${focusVisible};
+    ${focusVisibleInset};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 0.2s;
   }
-  ${({ isCurrent }) => isCurrent && css25`
-      color: ${navLink2.current.color};
-      background-color: ${navLink2.current.backgroundColor};
-      &:hover {
-        color: ${navLink2.current.color};
-      }
-    `}
 `;
-var NavigationItem2 = forwardRef40(({ title: title3, isCurrent, ...rest }, ref) => {
-  const linkProps = {
-    ref,
-    isCurrent,
-    ...rest
-  };
-  return /* @__PURE__ */ jsx227(Link3, { ...linkProps, "aria-current": isCurrent ? "page" : void 0, children: title3 });
+var NavigationItem2 = forwardRef39(({ title: title3, isCurrent, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx226(
+    Link3,
+    {
+      ...rest,
+      ref,
+      "aria-current": isCurrent ? "page" : void 0,
+      $active: isCurrent != null ? isCurrent : false,
+      children: title3
+    }
+  );
 });
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx228, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx227, jsxs as jsxs52 } from "react/jsx-runtime";
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -9208,10 +9179,10 @@ var InternalHeader = (props) => {
   const hasNavigationElements = !!navigationElements && navigationElements.length > 0;
   const hasContextMenuElements = !!contextMenuElements && contextMenuElements.length > 0;
   const hasNavInContextMenu = smallScreen && hasNavigationElements;
-  const navigation4 = hasNavigationElements && !smallScreen ? /* @__PURE__ */ jsx228(Navigation2, { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx228(NavigationList, { children: navigationElements.map((item, index) => {
+  const navigation2 = hasNavigationElements && !smallScreen ? /* @__PURE__ */ jsx227("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx227(NavigationList, { children: navigationElements.map((item, index) => {
     const { href, ...rest2 } = item;
     const isCurrent = href === currentPage;
-    return /* @__PURE__ */ jsx228(InternalHeaderListItem, { children: /* @__PURE__ */ jsx228(
+    return /* @__PURE__ */ jsx227(NavLi, { children: /* @__PURE__ */ jsx227(
       NavigationItem2,
       {
         href,
@@ -9222,45 +9193,51 @@ var InternalHeader = (props) => {
     ) }, index);
   }) }) }) : null;
   const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return /* @__PURE__ */ jsxs52(OuterContainer, { ...getBaseHTMLProps(id, className, htmlProps, rest), children: [
-    /* @__PURE__ */ jsx228(BannerWrapper, { $hasContextMenu: hasContextMenu, children: /* @__PURE__ */ jsxs52(BannerLeftWrapper, { children: [
-      /* @__PURE__ */ jsx228(LovisaWrapper, { children: /* @__PURE__ */ jsx228(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }) }),
-      /* @__PURE__ */ jsx228(ApplicationNameWrapper, { children: /* @__PURE__ */ jsx228(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }) })
-    ] }) }),
-    navigation4,
-    hasContextMenu && /* @__PURE__ */ jsxs52(ContextMenuGroup, { children: [
-      /* @__PURE__ */ jsx228(
-        Button,
-        {
-          ref: buttonRef,
-          icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
-          appearance: "borderless",
-          purpose: "secondary",
-          onClick: handleContextMenuClick,
-          "aria-haspopup": "menu",
-          "aria-expanded": !contextMenuIsClosed ? true : void 0,
-          "aria-label": "\xE5pne meny"
-        }
-      ),
-      /* @__PURE__ */ jsx228(
-        StyledOverflowMenu,
-        {
-          isOpen: !contextMenuIsClosed,
-          onClose: onOveflowMenuClose,
-          anchorRef: buttonRef,
-          navItems: hasNavInContextMenu ? navigationElements : void 0,
-          items: hasContextMenuElements ? contextMenuElements : void 0,
-          userProps
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs52(
+    Bar2,
+    {
+      ...getBaseHTMLProps(id, className, htmlProps, rest),
+      $hasNavigation: !!navigation2,
+      children: [
+        /* @__PURE__ */ jsx227(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }),
+        /* @__PURE__ */ jsx227(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
+        /* @__PURE__ */ jsx227(BarSeparator, {}),
+        navigation2,
+        hasContextMenu && /* @__PURE__ */ jsxs52(ContextMenuGroup, { children: [
+          /* @__PURE__ */ jsx227(
+            Button,
+            {
+              ref: buttonRef,
+              icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
+              appearance: "borderless",
+              purpose: "secondary",
+              onClick: handleContextMenuClick,
+              "aria-haspopup": "menu",
+              "aria-expanded": !contextMenuIsClosed ? true : void 0,
+              "aria-label": "\xE5pne meny"
+            }
+          ),
+          /* @__PURE__ */ jsx227(
+            StyledOverflowMenu,
+            {
+              isOpen: !contextMenuIsClosed,
+              onClose: onOveflowMenuClose,
+              anchorRef: buttonRef,
+              navItems: hasNavInContextMenu ? navigationElements : void 0,
+              items: hasContextMenuElements ? contextMenuElements : void 0,
+              userProps
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 InternalHeader.displayName = "InternalHeader";
 
 // src/components/List/List.tsx
-import { forwardRef as forwardRef41 } from "react";
-import styled62, { css as css26 } from "styled-components";
+import { forwardRef as forwardRef40 } from "react";
+import styled61, { css as css25 } from "styled-components";
 
 // src/components/List/bullets/jordskifterett_bullet1.svg
 var jordskifterett_bullet1_default = 'data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A';
@@ -9273,10 +9250,10 @@ var tingrett_bullet3_default = 'data:image/svg+xml,<svg width="14" height="14" v
 
 // src/components/List/List.tokens.tsx
 import {
-  ddsBaseTokens as ddsBaseTokens43,
+  ddsBaseTokens as ddsBaseTokens44,
   ddsReferenceTokens as ddsReferenceTokens5
 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing25 } = ddsBaseTokens43;
+var { spacing: spacing25 } = ddsBaseTokens44;
 var { textDefault: textDefault4 } = ddsReferenceTokens5;
 var ulLiPaddingLeft = `1em + ${spacing25.SizesDdsSpacingX025}`;
 var ulPaddingLeft = `${spacing25.SizesDdsSpacingX2} - (${ulLiPaddingLeft})`;
@@ -9309,9 +9286,9 @@ var listTokens = {
 };
 
 // src/components/List/List.tsx
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var { list: list6, listItem: listItem4, bullet: bullet2 } = listTokens;
-var StyledList = styled62.ul`
+var StyledList = styled61.ul`
   margin: ${list6.base.margin};
   color: ${list6.base.color};
   ul,
@@ -9322,13 +9299,13 @@ var StyledList = styled62.ul`
     ${selection}
   }
 
-  ${({ $typographyType }) => $typographyType === "inherit" ? css26`
+  ${({ $typographyType }) => $typographyType === "inherit" ? css25`
           font: inherit;
-        ` : css26`
+        ` : css25`
           ${getFontStyling($typographyType)}
         `}
 
-  ${({ $listType }) => $listType === "unordered" ? css26`
+  ${({ $listType }) => $listType === "unordered" ? css25`
           padding-left: ${list6.ul.paddingLeft};
           list-style: none;
           li {
@@ -9353,7 +9330,7 @@ var StyledList = styled62.ul`
               background-image: ${`url('${tingrett_bullet3_default}')`};
             }
           }
-        ` : css26`
+        ` : css25`
           padding-left: ${list6.ol.paddingLeft};
           & > li > ol {
             list-style-type: lower-alpha;
@@ -9363,7 +9340,7 @@ var StyledList = styled62.ul`
           }
         `}
 `;
-var List2 = forwardRef41(
+var List2 = forwardRef40(
   (props, ref) => {
     const {
       listType = "unordered",
@@ -9375,7 +9352,7 @@ var List2 = forwardRef41(
       ...rest
     } = props;
     const as = listType === "ordered" ? "ol" : "ul";
-    return /* @__PURE__ */ jsx229(
+    return /* @__PURE__ */ jsx228(
       StyledList,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -9391,26 +9368,26 @@ var List2 = forwardRef41(
 List2.displayName = "List";
 
 // src/components/List/ListItem.tsx
-import { forwardRef as forwardRef42 } from "react";
-import styled63 from "styled-components";
-import { jsx as jsx230 } from "react/jsx-runtime";
-var StyledListItem = styled63.li`
+import { forwardRef as forwardRef41 } from "react";
+import styled62 from "styled-components";
+import { jsx as jsx229 } from "react/jsx-runtime";
+var StyledListItem = styled62.li`
   line-height: ${listTokens.listItem.lineHeight};
 `;
-var ListItem2 = forwardRef42(
+var ListItem2 = forwardRef41(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx230(StyledListItem, { ref, ...rest, children });
+    return /* @__PURE__ */ jsx229(StyledListItem, { ref, ...rest, children });
   }
 );
 ListItem2.displayName = "ListItem";
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { forwardRef as forwardRef43, useState as useState19 } from "react";
-import styled64, { css as css27 } from "styled-components";
+import { forwardRef as forwardRef42, useState as useState19 } from "react";
+import styled63, { css as css26 } from "styled-components";
 
 // src/components/LocalMessage/LocalMessage.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens44 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = ddsBaseTokens44;
+import { ddsBaseTokens as ddsBaseTokens45 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = ddsBaseTokens45;
 var container9 = {
   base: {
     boxShadow: outerShadow3.DdsShadow1Onlight,
@@ -9500,10 +9477,10 @@ var localMessageTokens = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment7, jsx as jsx231, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx230, jsxs as jsxs53 } from "react/jsx-runtime";
 var defaultWidth4 = "400px";
 var { container: container10, icon: icon7, purposeVariants: purposeVariants3 } = localMessageTokens;
-var Container8 = styled64.div.withConfig({
+var Container8 = styled63.div.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
       "layout",
@@ -9529,7 +9506,7 @@ var Container8 = styled64.div.withConfig({
   *::selection {
     ${selection}
   }
-  ${({ purpose }) => purpose && css27`
+  ${({ purpose }) => purpose && css26`
       border-color: ${container10.purpose[purpose].borderColor};
       background-color: ${container10.purpose[purpose].backgroundColor};
     `}
@@ -9554,17 +9531,17 @@ function getGridTemplateColumns(layout, closable) {
   }
   return layout === "horisontal" ? "min-content 1fr" : "1fr";
 }
-var MessageIconWrapper2 = styled64(Icon)`
+var MessageIconWrapper2 = styled63(Icon)`
   grid-area: icon;
 `;
-var TextContainer2 = styled64.div`
+var TextContainer2 = styled63.div`
   grid-area: text;
 `;
-var CloseButton = styled64(Button)`
+var CloseButton = styled63(Button)`
   grid-area: closeButton;
   margin: -${container10.base.padding} 0;
 `;
-var LocalMessage = forwardRef43(
+var LocalMessage = forwardRef42(
   (props, ref) => {
     const {
       message: message2,
@@ -9589,18 +9566,18 @@ var LocalMessage = forwardRef43(
       ref
     };
     if (isClosed) {
-      return /* @__PURE__ */ jsx231(Fragment7, {});
+      return /* @__PURE__ */ jsx230(Fragment7, {});
     }
     return /* @__PURE__ */ jsxs53(Container8, { ...containerProps, children: [
-      /* @__PURE__ */ jsx231(
+      /* @__PURE__ */ jsx230(
         MessageIconWrapper2,
         {
           icon: purposeVariants3[purpose].icon,
           color: icon7[purpose].color
         }
       ),
-      /* @__PURE__ */ jsx231(TextContainer2, { children: children != null ? children : /* @__PURE__ */ jsx231(Typography, { as: "span", children: message2 }) }),
-      closable && /* @__PURE__ */ jsx231(
+      /* @__PURE__ */ jsx230(TextContainer2, { children: children != null ? children : /* @__PURE__ */ jsx230(Typography, { as: "span", children: message2 }) }),
+      closable && /* @__PURE__ */ jsx230(
         CloseButton,
         {
           icon: CloseIcon,
@@ -9621,17 +9598,17 @@ LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
 import {
-  forwardRef as forwardRef44,
+  forwardRef as forwardRef43,
   useEffect as useEffect22,
   useId as useId13
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import styled66 from "styled-components";
+import styled65 from "styled-components";
 
 // src/components/Modal/Backdrop/Backdrop.tsx
-import { ddsBaseTokens as ddsBaseTokens45 } from "@norges-domstoler/dds-design-tokens";
-import styled65 from "styled-components";
-var Backdrop = styled65.div.withConfig({
+import { ddsBaseTokens as ddsBaseTokens46 } from "@norges-domstoler/dds-design-tokens";
+import styled64 from "styled-components";
+var Backdrop = styled64.div.withConfig({
   shouldForwardProp: (prop) => prop !== "isOpen"
 })`
   position: fixed;
@@ -9639,7 +9616,7 @@ var Backdrop = styled65.div.withConfig({
   align-items: center;
   justify-content: center;
   background-color: ${changeRGBAAlpha(
-  ddsBaseTokens45.colors.DdsColorNeutralsGray9,
+  ddsBaseTokens46.colors.DdsColorNeutralsGray9,
   0.5
 )};
   overflow-y: auto;
@@ -9676,8 +9653,8 @@ function handleElementWithBackdropUnmount(container16) {
 }
 
 // src/components/Modal/Modal.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens46 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing27 } = ddsBaseTokens46;
+import { ddsBaseTokens as ddsBaseTokens47 } from "@norges-domstoler/dds-design-tokens";
+var { spacing: spacing27 } = ddsBaseTokens47;
 var container11 = {
   padding: `${spacing27.SizesDdsSpacingX1} ${spacing27.SizesDdsSpacingX1} ${spacing27.SizesDdsSpacingX15} ${spacing27.SizesDdsSpacingX15}`
 };
@@ -9695,9 +9672,9 @@ var modalTokens = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx232, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs54 } from "react/jsx-runtime";
 var { container: container12, contentContainer: contentContainer6 } = modalTokens;
-var Container9 = styled66(Paper)`
+var Container9 = styled65(Paper)`
   display: flex;
   flex-direction: column-reverse;
   min-width: 200px;
@@ -9711,16 +9688,16 @@ var Container9 = styled66(Paper)`
     ${focusVisible}
   }
 `;
-var ContentContainer3 = styled66.div`
+var ContentContainer3 = styled65.div`
   display: grid;
   padding-right: ${contentContainer6.paddingRight};
   gap: ${contentContainer6.gap};
 `;
-var HeaderContainer3 = styled66.div``;
-var StyledButton3 = styled66(Button)`
+var HeaderContainer3 = styled65.div``;
+var StyledButton3 = styled65(Button)`
   align-self: flex-end;
 `;
-var Modal = forwardRef44((props, ref) => {
+var Modal = forwardRef43((props, ref) => {
   const {
     isOpen = false,
     parentElement = document.body,
@@ -9758,7 +9735,7 @@ var Modal = forwardRef44((props, ref) => {
   useOnKeyDown(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
   return isOpen || hasTransitionedIn ? createPortal2(
-    /* @__PURE__ */ jsx232(Backdrop, { isOpen: hasTransitionedIn && isOpen, children: /* @__PURE__ */ jsxs54(
+    /* @__PURE__ */ jsx231(Backdrop, { isOpen: hasTransitionedIn && isOpen, children: /* @__PURE__ */ jsxs54(
       Container9,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -9772,10 +9749,10 @@ var Modal = forwardRef44((props, ref) => {
         elevation: 4,
         children: [
           /* @__PURE__ */ jsxs54(ContentContainer3, { children: [
-            header3 && /* @__PURE__ */ jsx232(HeaderContainer3, { id: headerId, children: typeof header3 === "string" ? /* @__PURE__ */ jsx232(Typography, { typographyType: "headingSans03", children: header3 }) : header3 }),
+            header3 && /* @__PURE__ */ jsx231(HeaderContainer3, { id: headerId, children: typeof header3 === "string" ? /* @__PURE__ */ jsx231(Typography, { typographyType: "headingSans03", children: header3 }) : header3 }),
             children
           ] }),
-          onClose && /* @__PURE__ */ jsx232(
+          onClose && /* @__PURE__ */ jsx231(
             StyledButton3,
             {
               size: "small",
@@ -9795,63 +9772,63 @@ var Modal = forwardRef44((props, ref) => {
 Modal.displayName = "Modal";
 
 // src/components/Modal/ModalBody.tsx
-import { forwardRef as forwardRef45 } from "react";
-import styled67 from "styled-components";
-import { jsx as jsx233 } from "react/jsx-runtime";
-var Container10 = styled67.div``;
-var ModalBody = forwardRef45(
+import { forwardRef as forwardRef44 } from "react";
+import styled66 from "styled-components";
+import { jsx as jsx232 } from "react/jsx-runtime";
+var Container10 = styled66.div``;
+var ModalBody = forwardRef44(
   (props, ref) => {
     const { children, scrollable, id, className, htmlProps, height, ...rest } = props;
     const containerProps = {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       ref
     };
-    return scrollable ? /* @__PURE__ */ jsx233(Container10, { ...containerProps, children: /* @__PURE__ */ jsx233(ScrollableContainer, { contentHeight: height, children }) }) : /* @__PURE__ */ jsx233(Container10, { ...containerProps, children });
+    return scrollable ? /* @__PURE__ */ jsx232(Container10, { ...containerProps, children: /* @__PURE__ */ jsx232(ScrollableContainer, { contentHeight: height, children }) }) : /* @__PURE__ */ jsx232(Container10, { ...containerProps, children });
   }
 );
 ModalBody.displayName = "ModalBody";
 
 // src/components/Modal/ModalActions.tsx
-import { forwardRef as forwardRef46 } from "react";
-import styled68 from "styled-components";
-import { jsx as jsx234 } from "react/jsx-runtime";
-var Container11 = styled68.div`
+import { forwardRef as forwardRef45 } from "react";
+import styled67 from "styled-components";
+import { jsx as jsx233 } from "react/jsx-runtime";
+var Container11 = styled67.div`
   display: flex;
   flex-wrap: wrap;
   gap: ${modalTokens.actionsContainer.gap};
 `;
-var ModalActions = forwardRef46(
+var ModalActions = forwardRef45(
   ({ children, ...rest }, ref) => {
     const containerProps = {
       ref,
       ...rest
     };
-    return /* @__PURE__ */ jsx234(Container11, { ...containerProps, children });
+    return /* @__PURE__ */ jsx233(Container11, { ...containerProps, children });
   }
 );
 ModalActions.displayName = "ModalActions";
 
 // src/components/Pagination/Pagination.tsx
-import { forwardRef as forwardRef48, useState as useState20 } from "react";
-import styled70, { css as css29 } from "styled-components";
+import { forwardRef as forwardRef47, useState as useState20 } from "react";
+import styled69, { css as css28 } from "styled-components";
 
 // src/components/Pagination/Pagination.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens47 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing28, colors: colors25 } = ddsBaseTokens47;
+import { ddsBaseTokens as ddsBaseTokens48 } from "@norges-domstoler/dds-design-tokens";
+var { spacing: spacing28, colors: colors25 } = ddsBaseTokens48;
 var list7 = {
   gap: spacing28.SizesDdsSpacingX075
 };
 var truncationIcon = {
   color: colors25.DdsColorNeutralsGray7
 };
-var outerContainer5 = {
+var outerContainer3 = {
   gap: spacing28.SizesDdsSpacingX075
 };
 var indicatorsContainer = {
   gap: spacing28.SizesDdsSpacingX075
 };
 var paginationTokens = {
-  outerContainer: outerContainer5,
+  outerContainer: outerContainer3,
   indicatorsContainer,
   truncationIcon,
   list: list7
@@ -9891,20 +9868,20 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-import { forwardRef as forwardRef47, useId as useId14 } from "react";
+import { forwardRef as forwardRef46, useId as useId14 } from "react";
 import {
   default as ReactSelect
 } from "react-select";
 
 // src/components/Select/Select.styles.ts
-import styled69, { css as css28 } from "styled-components";
+import styled68, { css as css27 } from "styled-components";
 
 // src/components/Select/Select.tokens.tsx
 import {
-  ddsBaseTokens as ddsBaseTokens48,
+  ddsBaseTokens as ddsBaseTokens49,
   ddsReferenceTokens as ddsReferenceTokens6
 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = ddsBaseTokens48;
+var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = ddsBaseTokens49;
 var { textDefault: textDefault5 } = ddsReferenceTokens6;
 var placeholderTypographyTypes = {
   medium: "supportingStylePlaceholderText01",
@@ -9916,7 +9893,7 @@ var multiValueLabelTypographyTypes = {
   small: "bodySans01",
   tiny: "supportingStyleTiny01"
 };
-var typographyTypes4 = {
+var typographyTypes3 = {
   control: inputTypographyTypes,
   option: inputTypographyTypes,
   placeholder: placeholderTypographyTypes,
@@ -10000,6 +9977,7 @@ var groupHeading = {
 };
 var option = {
   base: {
+    color: textDefault5.textColor,
     gap: spacing29.SizesDdsSpacingX05,
     padding: `${spacing29.SizesDdsSpacingX075}`,
     backgroundColor: colors26.DdsColorNeutralsWhite
@@ -10013,6 +9991,7 @@ var option = {
     backgroundColor: colors26.DdsColorInteractiveLightest
   },
   selected: {
+    color: textDefault5.textColor,
     backgroundColor: colors26.DdsColorNeutralsWhite
   }
 };
@@ -10087,7 +10066,7 @@ var prefix = "dds-select";
 function getContainerControlPadding(componentSize, isMulti) {
   return isMulti ? control2.isMulti.sizes[componentSize].padding : control2.sizes[componentSize].padding;
 }
-var Container12 = styled69.div`
+var Container12 = styled68.div`
   margin: 0;
   width: ${({ $width }) => $width};
   position: relative;
@@ -10096,23 +10075,23 @@ var Container12 = styled69.div`
     ${selection}
   }
 
-  ${({ $componentSize, $isMulti }) => css28`
+  ${({ $componentSize, $isMulti }) => css27`
     .${prefix}__control {
       padding: ${getContainerControlPadding($componentSize, $isMulti)};
-      ${getFontStyling(typographyTypes4.control[$componentSize], true)}
+      ${getFontStyling(typographyTypes3.control[$componentSize], true)}
     }
     .${prefix}__option {
-      ${getFontStyling(typographyTypes4.option[$componentSize], true)}
+      ${getFontStyling(typographyTypes3.option[$componentSize], true)}
     }
     .${prefix}__placeholder {
-      ${getFontStyling(typographyTypes4.placeholder[$componentSize])}
+      ${getFontStyling(typographyTypes3.placeholder[$componentSize])}
     }
     .${prefix}__menu-notice--no-options {
-      ${getFontStyling(typographyTypes4.noOptionsMessage[$componentSize])}
+      ${getFontStyling(typographyTypes3.noOptionsMessage[$componentSize])}
     }
   `}
 
-  ${({ $errorMessage }) => $errorMessage && css28`
+  ${({ $errorMessage }) => $errorMessage && css27`
       .${prefix}__control {
         ${dangerInputfield}
       }
@@ -10131,7 +10110,7 @@ var Container12 = styled69.div`
     color: ${dropdownIndicator2.hover.color};
   }
 
-  ${({ $isDisabled, $readOnly }) => $readOnly ? css28`
+  ${({ $isDisabled, $readOnly }) => $readOnly ? css27`
           .${prefix}__control {
             border-color: ${control2.readOnly.borderColor};
             background-color: ${control2.readOnly.backgroundColor};
@@ -10141,7 +10120,7 @@ var Container12 = styled69.div`
             .${prefix}__dropdown-indicator {
             color: ${dropdownIndicator2.readOnly.color};
           }
-        ` : $isDisabled ? css28`
+        ` : $isDisabled ? css27`
             cursor: not-allowed;
             .${prefix}__control {
               border-color: ${control2.disabled.borderColor};
@@ -10152,14 +10131,14 @@ var Container12 = styled69.div`
             }
           ` : ""}
 `;
-var InnerSingleValue = styled69.div`
+var InnerSingleValue = styled68.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   box-sizing: border-box;
   max-width: 100%;
 `;
-var StyledIcon4 = styled69(Icon)`
+var StyledIcon4 = styled68(Icon)`
   margin-right: ${icon9.marginRight};
 `;
 var getCustomStyles = (size2) => ({
@@ -10222,7 +10201,7 @@ var getCustomStyles = (size2) => ({
   multiValueLabel: (provided) => ({
     ...provided,
     padding: multiValueLabel2.padding,
-    ...getFontStyling(typographyTypes4.multiValueLabel[size2]),
+    ...getFontStyling(typographyTypes3.multiValueLabel[size2]),
     color: multiValueLabel2.color
   }),
   multiValueRemove: (provided, state) => state.selectProps.isDisabled ? {
@@ -10256,11 +10235,15 @@ var getCustomStyles = (size2) => ({
     marginTop: menu2.marginTop,
     marginBottom: menu2.marginBottom
   }),
+  menuPortal: (provided) => ({
+    ...provided,
+    zIndex: 99999
+  }),
   group: () => ({
     boxSizing: "border-box"
   }),
   groupHeading: () => ({
-    ...getFontStyling(typographyTypes4.groupHeading),
+    ...getFontStyling(typographyTypes3.groupHeading),
     color: groupHeading2.color,
     padding: groupHeading2.padding
   }),
@@ -10279,6 +10262,7 @@ var getCustomStyles = (size2) => ({
     alignItems: "center",
     gap: option2.base.gap,
     padding: option2.base.padding,
+    color: option2.base.color,
     backgroundColor: option2.base.backgroundColor,
     "@media (prefers-reduced-motion: no-preference)": {
       transition: "color 0.2s, background-color 0.2s"
@@ -10288,6 +10272,7 @@ var getCustomStyles = (size2) => ({
       backgroundColor: option2.hover.backgroundColor
     },
     ...state.isSelected && {
+      color: option2.selected.color,
       backgroundColor: option2.selected.backgroundColor
     },
     ...state.isFocused && {
@@ -10320,7 +10305,7 @@ var getCustomStyles = (size2) => ({
 import {
   components
 } from "react-select";
-import { jsx as jsx235, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs55 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -10332,16 +10317,16 @@ var {
   Control
 } = components;
 var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs55(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx235(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ jsx234(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
-var CustomOption = (props, Element) => /* @__PURE__ */ jsx235(Option, { ...props, children: /* @__PURE__ */ jsx235(Element, { ...props }) });
-var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx235(SingleValue, { ...props, children: /* @__PURE__ */ jsx235(InnerSingleValue, { id, children: Element ? /* @__PURE__ */ jsx235(Element, { ...props }) : props.children }) });
-var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx235(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx235(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx235(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
-var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx235(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx235(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
-var DDSDropdownIndicator = (props, size2) => /* @__PURE__ */ jsx235(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx235(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) }) });
-var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx235(
+var CustomOption = (props, Element) => /* @__PURE__ */ jsx234(Option, { ...props, children: /* @__PURE__ */ jsx234(Element, { ...props }) });
+var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx234(SingleValue, { ...props, children: /* @__PURE__ */ jsx234(InnerSingleValue, { id, children: Element ? /* @__PURE__ */ jsx234(Element, { ...props }) : props.children }) });
+var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx234(NoOptionsMessage, { ...props, children: "Ingen treff" });
+var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx234(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx234(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
+var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx234(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx234(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
+var DDSDropdownIndicator = (props, size2) => /* @__PURE__ */ jsx234(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx234(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) }) });
+var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx234(
   Input2,
   {
     ...props,
@@ -10350,12 +10335,12 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx235(
   }
 );
 var DDSControl = (props, componentSize, icon12) => /* @__PURE__ */ jsxs55(Control, { ...props, children: [
-  icon12 && /* @__PURE__ */ jsx235(StyledIcon4, { icon: icon12, iconSize: getFormInputIconSize(componentSize) }),
+  icon12 && /* @__PURE__ */ jsx234(StyledIcon4, { icon: icon12, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
 
 // src/components/Select/Select.tsx
-import { jsx as jsx236, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx235, jsxs as jsxs56 } from "react/jsx-runtime";
 var defaultWidth5 = "320px";
 var getPlaceholder = (placeholder3, isMulti) => placeholder3 ? placeholder3 : isMulti ? "-- Velg en eller flere --" : "-- Velg fra listen --";
 function SelectInner(props, ref) {
@@ -10443,56 +10428,56 @@ function SelectInner(props, ref) {
     ...rest
   };
   return /* @__PURE__ */ jsxs56(Container12, { ...containerProps, children: [
-    hasLabel && /* @__PURE__ */ jsx236(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
-    /* @__PURE__ */ jsx236(ReactSelect, { ...reactSelectProps, ref }),
+    hasLabel && /* @__PURE__ */ jsx235(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
+    /* @__PURE__ */ jsx235(ReactSelect, { ...reactSelectProps, ref }),
     renderInputMessage(tip, tipId, errorMessage, errorMessageId)
   ] });
 }
-var Select = forwardRef47(SelectInner);
+var Select = forwardRef46(SelectInner);
 Select.displayName = "Select";
 
 // src/components/Select/utils.ts
 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: outerContainer6, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list8 } = paginationTokens;
-var Nav2 = styled70.nav`
+import { jsx as jsx236, jsxs as jsxs57 } from "react/jsx-runtime";
+var { outerContainer: outerContainer4, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list8 } = paginationTokens;
+var Nav2 = styled69.nav`
   display: flex;
   align-items: center;
 `;
-var List3 = styled70.ol`
+var List3 = styled69.ol`
   display: grid;
   grid-auto-flow: column;
   gap: ${list8.gap};
   margin: 0;
   padding: 0;
 `;
-var ListItem3 = styled70.li`
+var ListItem3 = styled69.li`
   display: inline-grid;
   align-content: center;
-  ${({ $isHidden }) => $isHidden && css29`
+  ${({ $isHidden }) => $isHidden && css28`
       visibility: hidden;
     `}
 `;
-var OuterContainer2 = styled70.div`
+var OuterContainer = styled69.div`
   display: flex;
-  gap: ${outerContainer6.gap};
-  ${({ $smallScreen }) => $smallScreen ? css29`
+  gap: ${outerContainer4.gap};
+  ${({ $smallScreen }) => $smallScreen ? css28`
           flex-direction: column;
           align-items: center;
-        ` : css29`
+        ` : css28`
           justify-content: space-between;
           flex-wrap: wrap;
         `}
 `;
-var IndicatorsContainer = styled70.div`
+var IndicatorsContainer = styled69.div`
   display: grid;
   grid-auto-flow: column;
   align-items: center;
   gap: ${indicatorsContainer2.gap};
 `;
-var Pagination = forwardRef48(
+var Pagination = forwardRef47(
   (props, ref) => {
     const {
       itemsAmount,
@@ -10535,7 +10520,7 @@ var Pagination = forwardRef48(
     };
     const listItems = items.length > 0 ? items.map((item, i) => {
       const isActive = item === activePage;
-      return /* @__PURE__ */ jsx237(ListItem3, { children: item !== "truncator" ? /* @__PURE__ */ jsx237(
+      return /* @__PURE__ */ jsx236(ListItem3, { children: item !== "truncator" ? /* @__PURE__ */ jsx236(
         Button,
         {
           purpose: isActive ? "primary" : "secondary",
@@ -10547,7 +10532,7 @@ var Pagination = forwardRef48(
           "aria-label": isActive ? `N\xE5v\xE6rende side (side ${item})` : `G\xE5 til side ${item}`,
           children: item
         }
-      ) : /* @__PURE__ */ jsx237(
+      ) : /* @__PURE__ */ jsx236(
         Icon,
         {
           icon: MoreHorizontalIcon,
@@ -10555,7 +10540,7 @@ var Pagination = forwardRef48(
         }
       ) }, `pagination-item-${i}`);
     }) : void 0;
-    const previousPageButton = /* @__PURE__ */ jsx237(
+    const previousPageButton = /* @__PURE__ */ jsx236(
       Button,
       {
         purpose: "secondary",
@@ -10568,7 +10553,7 @@ var Pagination = forwardRef48(
         "aria-label": "G\xE5 til forrige siden"
       }
     );
-    const nextPageButton = /* @__PURE__ */ jsx237(
+    const nextPageButton = /* @__PURE__ */ jsx236(
       Button,
       {
         purpose: "secondary",
@@ -10590,13 +10575,13 @@ var Pagination = forwardRef48(
     };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
-    const navigation4 = withPagination ? /* @__PURE__ */ jsx237(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+    const navigation2 = withPagination ? /* @__PURE__ */ jsx236(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
+      /* @__PURE__ */ jsx236(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       listItems,
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
+      /* @__PURE__ */ jsx236(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: [
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ jsx237(
+    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx236(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs57(List3, { children: [
+      /* @__PURE__ */ jsx236(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ jsx236(
         Button,
         {
           purpose: "secondary",
@@ -10609,8 +10594,8 @@ var Pagination = forwardRef48(
           "aria-label": "G\xE5 til f\xF8rste siden"
         }
       ) }),
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
-      /* @__PURE__ */ jsx237(ListItem3, { children: /* @__PURE__ */ jsx237(
+      /* @__PURE__ */ jsx236(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+      /* @__PURE__ */ jsx236(ListItem3, { children: /* @__PURE__ */ jsx236(
         Button,
         {
           size: "small",
@@ -10620,8 +10605,8 @@ var Pagination = forwardRef48(
           children: activePage
         }
       ) }),
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
-      /* @__PURE__ */ jsx237(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ jsx237(
+      /* @__PURE__ */ jsx236(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
+      /* @__PURE__ */ jsx236(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ jsx236(
         Button,
         {
           purpose: "secondary",
@@ -10637,10 +10622,10 @@ var Pagination = forwardRef48(
     ] }) }) : null;
     const activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
     const activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
-    const navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation4;
-    return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ jsxs57(OuterContainer2, { ...containerProps, children: [
+    const navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation2;
+    return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ jsxs57(OuterContainer, { ...containerProps, children: [
       /* @__PURE__ */ jsxs57(IndicatorsContainer, { children: [
-        withSelect && /* @__PURE__ */ jsx237(
+        withSelect && /* @__PURE__ */ jsx236(
           Select,
           {
             options: selectOptions,
@@ -10671,13 +10656,13 @@ var Pagination = forwardRef48(
 Pagination.displayName = "Pagination";
 
 // src/components/Popover/Popover.tsx
-import { ddsBaseTokens as ddsBaseTokens50 } from "@norges-domstoler/dds-design-tokens";
-import { forwardRef as forwardRef49 } from "react";
-import styled71, { css as css30 } from "styled-components";
+import { ddsBaseTokens as ddsBaseTokens51 } from "@norges-domstoler/dds-design-tokens";
+import { forwardRef as forwardRef48 } from "react";
+import styled70, { css as css29 } from "styled-components";
 
 // src/components/Popover/Popover.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens49 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing30 } = ddsBaseTokens49;
+import { ddsBaseTokens as ddsBaseTokens50 } from "@norges-domstoler/dds-design-tokens";
+var { spacing: spacing30 } = ddsBaseTokens50;
 var wrapper3 = {
   padding: `${spacing30.SizesDdsSpacingX075} ${spacing30.SizesDdsSpacingX1} ${spacing30.SizesDdsSpacingX15} ${spacing30.SizesDdsSpacingX1}`
 };
@@ -10701,10 +10686,10 @@ var popoverTokens2 = {
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx238, jsxs as jsxs58 } from "react/jsx-runtime";
-var { spacing: Spacing } = ddsBaseTokens50;
+import { jsx as jsx237, jsxs as jsxs58 } from "react/jsx-runtime";
+var { spacing: Spacing } = ddsBaseTokens51;
 var { wrapper: wrapper4, content: content4, closeButton: closeButton2, title: title2 } = popoverTokens2;
-var Wrapper4 = styled71(Paper)`
+var Wrapper4 = styled70(Paper)`
   opacity: 0;
   ${({ $hasTransitionedIn, $isOpen }) => $hasTransitionedIn && visibilityTransition($hasTransitionedIn && $isOpen)}
   position: absolute;
@@ -10715,7 +10700,7 @@ var Wrapper4 = styled71(Paper)`
   &:focus-visible {
     ${focusVisible}
   }
-  ${({ $sizeProps }) => $sizeProps && css30`
+  ${({ $sizeProps }) => $sizeProps && css29`
       width: ${$sizeProps.width};
       height: ${$sizeProps.height};
       min-width: ${$sizeProps.minWidth};
@@ -10724,20 +10709,20 @@ var Wrapper4 = styled71(Paper)`
       max-height: ${$sizeProps.maxHeight};
     `}
 `;
-var TitleContainer = styled71.div`
+var TitleContainer = styled70.div`
   margin-right: ${title2.marginRight};
 `;
-var ContentContainer4 = styled71.div`
-  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && css30`
+var ContentContainer4 = styled70.div`
+  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && css29`
       margin-top: ${content4.noTitle.marginTop};
     `}
 `;
-var StyledButton4 = styled71(Button)`
+var StyledButton4 = styled70(Button)`
   position: absolute;
   top: ${closeButton2.top};
   right: ${closeButton2.right};
 `;
-var Popover = forwardRef49(
+var Popover = forwardRef48(
   (props, ref) => {
     const {
       title: title3,
@@ -10790,8 +10775,8 @@ var Popover = forwardRef49(
         elevation: 3,
         border: "light",
         children: [
-          title3 && /* @__PURE__ */ jsx238(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ jsx238(Typography, { typographyType: "headingSans02", children: title3 }) : title3 }),
-          /* @__PURE__ */ jsx238(
+          title3 && /* @__PURE__ */ jsx237(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ jsx237(Typography, { typographyType: "headingSans02", children: title3 }) : title3 }),
+          /* @__PURE__ */ jsx237(
             ContentContainer4,
             {
               $hasTitle: !!title3,
@@ -10799,7 +10784,7 @@ var Popover = forwardRef49(
               children
             }
           ),
-          withCloseButton && /* @__PURE__ */ jsx238(
+          withCloseButton && /* @__PURE__ */ jsx237(
             StyledButton4,
             {
               icon: CloseIcon,
@@ -10826,7 +10811,7 @@ import {
   useRef as useRef28,
   useState as useState21
 } from "react";
-import { Fragment as Fragment8, jsx as jsx239 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx238 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen = false,
   onCloseButtonClick,
@@ -10872,7 +10857,7 @@ var PopoverGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsx239(Fragment8, { children: Children9 });
+  return /* @__PURE__ */ jsx238(Fragment8, { children: Children9 });
 };
 PopoverGroup.displayName = "PopoverGroup";
 
@@ -10881,13 +10866,13 @@ import {
   Children as Children5,
   Fragment as Fragment9,
   cloneElement as cloneElement6,
-  forwardRef as forwardRef50,
+  forwardRef as forwardRef49,
   isValidElement as isValidElement6,
   useEffect as useEffect23,
   useMemo as useMemo3,
   useState as useState22
 } from "react";
-import styled73 from "styled-components";
+import styled72 from "styled-components";
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
@@ -10899,9 +10884,9 @@ var ProgressTrackerContext = createContext5(
 var useProgressTrackerContext = () => useContext5(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens51 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors27, spacing: spacing31 } = ddsBaseTokens51;
-var typographyTypes5 = {
+import { ddsBaseTokens as ddsBaseTokens52 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors27, spacing: spacing31 } = ddsBaseTokens52;
+var typographyTypes4 = {
   number: "bodySans01",
   label: "bodySans03"
 };
@@ -10979,8 +10964,8 @@ var progressTrackerTokens = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import styled72, { css as css31 } from "styled-components";
-import { jsx as jsx240, jsxs as jsxs59 } from "react/jsx-runtime";
+import styled71, { css as css30 } from "styled-components";
+import { jsx as jsx239, jsxs as jsxs59 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -10992,13 +10977,13 @@ var toItemState = (active, completed, disabled) => {
   }
 };
 var { itemNumber: itemNumber2, itemText: itemText2, itemContentWrapper: itemContentWrapper2 } = progressTrackerTokens;
-var ItemWrapper = styled72.li`
+var ItemWrapper = styled71.li`
   flex: 1;
   position: relative;
   display: flex;
   justify-content: center;
 `;
-var ItemNumber = styled72.div`
+var ItemNumber = styled71.div`
   transition:
     background-color 0.2s,
     border-color 0.2s,
@@ -11011,37 +10996,37 @@ var ItemNumber = styled72.div`
   align-items: center;
   justify-content: center;
   z-index: 2;
-  ${getFontStyling(typographyTypes5.number)}
+  ${getFontStyling(typographyTypes4.number)}
   font-weight: 600;
 
   ${({ $state: state }) => {
   switch (state) {
     case "activeIncomplete":
-      return css31`
+      return css30`
           border-color: ${itemNumber2.active.borderColor};
           color: ${itemNumber2.active.color};
           background-color: ${itemNumber2.active.backgroundColor};
         `;
     case "activeCompleted":
-      return css31`
+      return css30`
           border-color: ${itemNumber2.completed.borderColor};
           color: ${itemNumber2.completed.color};
           background-color: ${itemNumber2.completed.backgroundColor};
         `;
     case "inactiveCompleted":
-      return css31`
+      return css30`
           border-color: ${itemNumber2.completed.borderColor};
           color: ${itemNumber2.completed.color};
           background-color: ${itemNumber2.completed.backgroundColor};
         `;
     case "inactiveIncomplete":
-      return css31`
+      return css30`
           border-color: ${itemNumber2.inactive.borderColor};
           color: ${itemNumber2.inactive.color};
           background-color: ${itemNumber2.inactive.backgroundColor};
         `;
     case "disabled":
-      return css31`
+      return css30`
           border-color: ${itemNumber2.disabled.borderColor};
           color: ${itemNumber2.disabled.color};
           background-color: ${itemNumber2.disabled.backgroundColor};
@@ -11049,8 +11034,8 @@ var ItemNumber = styled72.div`
   }
 }}
 `;
-var ItemText = styled72.div`
-  ${getFontStyling(typographyTypes5.label)}
+var ItemText = styled71.div`
+  ${getFontStyling(typographyTypes4.label)}
   text-align: start;
   text-decoration: ${itemText2.textDecoration};
   transition: text-decoration-color 0.2s;
@@ -11059,25 +11044,25 @@ var ItemText = styled72.div`
   switch (state) {
     case "activeCompleted":
     case "activeIncomplete":
-      return css31`
+      return css30`
           color: ${itemText2.active.color};
           text-decoration-color: ${itemText2.active.textDecorationColor};
         `;
     case "inactiveCompleted":
     case "inactiveIncomplete":
-      return css31`
+      return css30`
           color: ${itemText2.inactive.color};
           text-decoration-color: ${itemText2.inactive.textDecorationColor};
         `;
     case "disabled":
-      return css31`
+      return css30`
           color: ${itemText2.disabled.color};
           text-decoration: ${itemText2.disabled.textDecoration};
         `;
   }
 }};
 `;
-var ItemContentWrapper = styled72.button`
+var ItemContentWrapper = styled71.button`
   background: none;
   border: none;
   margin: 0;
@@ -11094,7 +11079,7 @@ var ItemContentWrapper = styled72.button`
     ${focusVisible}
   }
 
-  ${({ $state: state }) => state !== "disabled" && css31`
+  ${({ $state: state }) => state !== "disabled" && css30`
       cursor: pointer;
     `}
 `;
@@ -11114,14 +11099,14 @@ var ProgressTrackerItem = (props) => {
   };
   const stepNumberContent = useMemo2(() => {
     if (completed) {
-      return /* @__PURE__ */ jsx240(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
+      return /* @__PURE__ */ jsx239(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
     }
     if (icon12 !== void 0) {
-      return /* @__PURE__ */ jsx240(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
+      return /* @__PURE__ */ jsx239(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
     }
     return index + 1;
   }, [completed, icon12, index]);
-  return /* @__PURE__ */ jsx240(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsx239(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs59(
     ItemContentWrapper,
     {
       ...styleProps,
@@ -11129,9 +11114,9 @@ var ProgressTrackerItem = (props) => {
       onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
       disabled,
       children: [
-        /* @__PURE__ */ jsx240(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
+        /* @__PURE__ */ jsx239(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
         /* @__PURE__ */ jsxs59(ItemText, { ...styleProps, children: [
-          /* @__PURE__ */ jsx240(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
+          /* @__PURE__ */ jsx239(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
           children
         ] })
       ]
@@ -11141,8 +11126,8 @@ var ProgressTrackerItem = (props) => {
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-import { jsx as jsx241, jsxs as jsxs60 } from "react/jsx-runtime";
-var ItemsWrapper = styled73.ol`
+import { jsx as jsx240, jsxs as jsxs60 } from "react/jsx-runtime";
+var ItemsWrapper = styled72.ol`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -11150,7 +11135,7 @@ var ItemsWrapper = styled73.ol`
   margin: 0;
   padding: 0;
 `;
-var ProgressTrackerConnector = styled73.div`
+var ProgressTrackerConnector = styled72.div`
   margin-left: calc(
     (${progressTrackerTokens.itemNumber.size} / 2) -
       (${progressTrackerTokens.connector.width} / 2)
@@ -11160,7 +11145,7 @@ var ProgressTrackerConnector = styled73.div`
     ${progressTrackerTokens.connector.color};
 `;
 var ProgressTracker = (() => {
-  const Res = forwardRef50((props, ref) => {
+  const Res = forwardRef49((props, ref) => {
     const {
       id,
       activeStep = 0,
@@ -11190,14 +11175,14 @@ var ProgressTracker = (() => {
       const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
       return itemsWithConnectorsBetween;
     }, [children]);
-    return /* @__PURE__ */ jsx241(
+    return /* @__PURE__ */ jsx240(
       ProgressTrackerContext.Provider,
       {
         value: {
           activeStep: thisActiveStep,
           handleStepChange: handleChange
         },
-        children: /* @__PURE__ */ jsx241("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx241(ItemsWrapper, { children: steps }) })
+        children: /* @__PURE__ */ jsx240("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx240(ItemsWrapper, { children: steps }) })
       }
     );
   });
@@ -11222,18 +11207,18 @@ var intersperseItemsWithConnector = (children) => Children5.map(children, (child
     return child;
   }
   return /* @__PURE__ */ jsxs60(Fragment9, { children: [
-    /* @__PURE__ */ jsx241(ProgressTrackerConnector, { "aria-hidden": true }),
+    /* @__PURE__ */ jsx240(ProgressTrackerConnector, { "aria-hidden": true }),
     child
   ] }, index);
 });
 
 // src/components/Search/Search.tsx
 import {
-  forwardRef as forwardRef52,
+  forwardRef as forwardRef51,
   useId as useId16,
   useState as useState23
 } from "react";
-import styled75, { css as css32 } from "styled-components";
+import styled74, { css as css31 } from "styled-components";
 
 // src/components/Search/AutocompleteSearch.context.tsx
 import {
@@ -11247,12 +11232,12 @@ var useAutocompleteSearch = () => {
 
 // src/components/Search/Search.tokens.tsx
 import {
-  ddsBaseTokens as ddsBaseTokens52,
+  ddsBaseTokens as ddsBaseTokens53,
   ddsReferenceTokens as ddsReferenceTokens7
 } from "@norges-domstoler/dds-design-tokens";
-var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } = ddsBaseTokens52;
+var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } = ddsBaseTokens53;
 var { textDefault: textDefault6 } = ddsReferenceTokens7;
-var typographyTypes6 = {
+var typographyTypes5 = {
   small: "bodySans01",
   medium: "bodySans02",
   large: "bodySans04"
@@ -11286,7 +11271,7 @@ var input3 = {
 var horisontalContainer = {
   gap: spacing32.SizesDdsSpacingX05
 };
-var outerContainer7 = {
+var outerContainer5 = {
   gap: spacing32.SizesDdsSpacingX0125
 };
 var searchIcon = {
@@ -11323,7 +11308,7 @@ var searchTokens = {
   searchIcon,
   clearButton,
   horisontalContainer,
-  outerContainer: outerContainer7,
+  outerContainer: outerContainer5,
   suggestionsContainer,
   suggestionsHeader
 };
@@ -11355,11 +11340,11 @@ function createEmptyChangeEvent(inputElementId) {
 }
 
 // src/components/Search/SearchSuggestions.tsx
-import { forwardRef as forwardRef51 } from "react";
-import styled74 from "styled-components";
-import { jsx as jsx242, jsxs as jsxs61 } from "react/jsx-runtime";
+import { forwardRef as forwardRef50 } from "react";
+import styled73 from "styled-components";
+import { jsx as jsx241, jsxs as jsxs61 } from "react/jsx-runtime";
 var { suggestionsContainer: suggestionsContainer2, suggestionsHeader: suggestionsHeader2 } = searchTokens;
-var SuggestionsContainer = styled74(Paper)`
+var SuggestionsContainer = styled73(Paper)`
   ${({ $isHidden }) => visibilityTransition(!$isHidden)};
   position: absolute;
   top: 100%;
@@ -11373,16 +11358,16 @@ var SuggestionsContainer = styled74(Paper)`
   ${scrollbarStyling.firefox}
   ${scrollbarStyling.webkit}
 `;
-var MenuItem = styled74(OverflowMenuItem)`
-  ${({ $size }) => $size && getFontStyling(typographyTypes6[$size])}
+var MenuItem = styled73(OverflowMenuItem)`
+  ${({ $size }) => $size && getFontStyling(typographyTypes5[$size])}
 `;
-var SuggestionsList = styled74.ul`
+var SuggestionsList = styled73.ul`
   ${removeListStyling}
 `;
-var SuggestionsHeader = styled74(Typography)`
+var SuggestionsHeader = styled73(Typography)`
   padding-left: ${suggestionsHeader2.paddingLeft};
 `;
-var SearchSuggestions = forwardRef51((props, ref) => {
+var SearchSuggestions = forwardRef50((props, ref) => {
   const {
     id,
     searchId,
@@ -11401,8 +11386,8 @@ var SearchSuggestions = forwardRef51((props, ref) => {
   );
   const [focus, setFocus] = 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(
+  const renderedSuggestions = /* @__PURE__ */ jsx241(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
+    return /* @__PURE__ */ jsx241("li", { role: "option", children: /* @__PURE__ */ jsx241(
       MenuItem,
       {
         index,
@@ -11426,7 +11411,7 @@ var SearchSuggestions = forwardRef51((props, ref) => {
       $isHidden: isHidden,
       "aria-hidden": isHidden,
       children: [
-        /* @__PURE__ */ jsx242(
+        /* @__PURE__ */ jsx241(
           SuggestionsHeader,
           {
             typographyType: "supportingStyleTiny01",
@@ -11443,8 +11428,8 @@ var SearchSuggestions = forwardRef51((props, ref) => {
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment10, jsx as jsx243, jsxs as jsxs62 } from "react/jsx-runtime";
-var { input: input4, outerContainer: outerContainer8, horisontalContainer: horisontalContainer2, searchIcon: searchIcon2, clearButton: clearButton2 } = searchTokens;
+import { Fragment as Fragment10, jsx as jsx242, jsxs as jsxs62 } from "react/jsx-runtime";
+var { input: input4, outerContainer: outerContainer6, horisontalContainer: horisontalContainer2, searchIcon: searchIcon2, clearButton: clearButton2 } = searchTokens;
 var getIconSize = (size2) => {
   switch (size2) {
     case "large":
@@ -11455,7 +11440,7 @@ var getIconSize = (size2) => {
       return "small";
   }
 };
-var Input3 = styled75(Input)`
+var Input3 = styled74(Input)`
   &[type='search']::-webkit-search-decoration,
   &[type='search']::-webkit-search-cancel-button,
   &[type='search']::-webkit-search-results-button,
@@ -11464,45 +11449,45 @@ var Input3 = styled75(Input)`
   }
   padding-right: ${input4.base.paddingRight};
 
-  ${({ $componentSize }) => css32`
+  ${({ $componentSize }) => css31`
     padding-top: ${input4.sizes[$componentSize].paddingTop};
     padding-bottom: ${input4.sizes[$componentSize].paddingBottom};
     padding-left: ${input4.sizes[$componentSize].paddingLeft};
-    ${getFontStyling(typographyTypes6[$componentSize])}
+    ${getFontStyling(typographyTypes5[$componentSize])}
   `}
 `;
-var StyledSearchIcon = styled75(Icon)`
+var StyledSearchIcon = styled74(Icon)`
   position: absolute;
   left: ${searchIcon2.base.left};
   color: ${searchIcon2.base.color};
-  ${({ $size }) => css32`
+  ${({ $size }) => css31`
     top: ${searchTokens.searchIcon[$size].top};
   `}
   z-index: 1;
 `;
-var StyledClearButton = styled75(Button)`
+var StyledClearButton = styled74(Button)`
   position: absolute;
   right: ${clearButton2.right};
   color: ${clearButton2.color};
   top: ${clearButton2.top};
 `;
-var OuterContainer3 = styled75.div`
+var OuterContainer2 = styled74.div`
   display: flex;
   flex-direction: column;
-  gap: ${outerContainer8.gap};
+  gap: ${outerContainer6.gap};
 `;
-var HorisontalContainer = styled75.div`
-  ${(props) => props.$hasSearchButton && css32`
+var HorisontalContainer = styled74.div`
+  ${(props) => props.$hasSearchButton && css31`
       display: grid;
       grid-template-columns: 1fr auto;
       gap: ${horisontalContainer2.gap};
     `}
 `;
-var InputContainer2 = styled75.div`
+var InputContainer2 = styled74.div`
   position: relative;
   display: flex;
 `;
-var Search = forwardRef52(
+var Search = forwardRef51(
   ({
     componentSize = "medium",
     buttonProps,
@@ -11546,8 +11531,8 @@ var Search = forwardRef52(
     } = buttonProps != null ? buttonProps : {};
     const hasSuggestions = !!context.suggestions;
     const showSearchButton = !!buttonProps && !!onClick;
-    return /* @__PURE__ */ jsxs62(OuterContainer3, { children: [
-      hasLabel && /* @__PURE__ */ jsx243(Label, { htmlFor: uniqueId, children: label3 }),
+    return /* @__PURE__ */ jsxs62(OuterContainer2, { children: [
+      hasLabel && /* @__PURE__ */ jsx242(Label, { htmlFor: uniqueId, children: label3 }),
       /* @__PURE__ */ jsxs62("div", { children: [
         /* @__PURE__ */ jsxs62(
           HorisontalContainer,
@@ -11557,7 +11542,7 @@ var Search = forwardRef52(
             style,
             children: [
               /* @__PURE__ */ jsxs62(InputContainer2, { children: [
-                /* @__PURE__ */ jsx243(
+                /* @__PURE__ */ jsx242(
                   StyledSearchIcon,
                   {
                     icon: SearchIcon,
@@ -11565,7 +11550,7 @@ var Search = forwardRef52(
                     iconSize: getIconSize(componentSize)
                   }
                 ),
-                /* @__PURE__ */ jsx243(
+                /* @__PURE__ */ jsx242(
                   Input3,
                   {
                     ...rest,
@@ -11589,7 +11574,7 @@ var Search = forwardRef52(
                   }
                 ),
                 hasSuggestions && /* @__PURE__ */ jsxs62(Fragment10, { children: [
-                  /* @__PURE__ */ jsx243(
+                  /* @__PURE__ */ jsx242(
                     SearchSuggestions,
                     {
                       id: suggestionsId,
@@ -11601,9 +11586,9 @@ var Search = forwardRef52(
                       componentSize
                     }
                   ),
-                  /* @__PURE__ */ jsx243(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+                  /* @__PURE__ */ jsx242(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
                 ] }),
-                hasValue && /* @__PURE__ */ jsx243(
+                hasValue && /* @__PURE__ */ jsx242(
                   StyledClearButton,
                   {
                     icon: CloseSmallIcon,
@@ -11615,7 +11600,7 @@ var Search = forwardRef52(
                   }
                 )
               ] }),
-              showSearchButton && /* @__PURE__ */ jsx243(
+              showSearchButton && /* @__PURE__ */ jsx242(
                 Button,
                 {
                   size: componentSize,
@@ -11640,7 +11625,7 @@ import {
   useRef as useRef29,
   useState as useState24
 } from "react";
-import { jsx as jsx244 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
 var SearchAutocompleteWrapper = (props) => {
   const {
     value,
@@ -11716,7 +11701,7 @@ var SearchAutocompleteWrapper = (props) => {
     inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return /* @__PURE__ */ jsx244(AutocompleteSearchContext.Provider, { value: contextProps, children });
+  return /* @__PURE__ */ jsx243(AutocompleteSearchContext.Provider, { value: contextProps, children });
 };
 SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
 
@@ -11726,7 +11711,7 @@ Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search2.Suggestions = SearchSuggestions;
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef53, useId as useId17 } from "react";
+import { forwardRef as forwardRef52, useId as useId17 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
@@ -11736,17 +11721,17 @@ var useCheckboxGroup = () => {
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-import styled76, { css as css33 } from "styled-components";
+import styled75, { css as css32 } from "styled-components";
 
 // src/components/SelectionControl/SelectionControl.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens53 } from "@norges-domstoler/dds-design-tokens";
+import { ddsBaseTokens as ddsBaseTokens54 } from "@norges-domstoler/dds-design-tokens";
 
 // src/components/SelectionControl/SelectionControl.utils.tsx
 var selectionControlSizeNumberPx = 18;
 var selectionControlSize = `${selectionControlSizeNumberPx}px`;
 
 // src/components/SelectionControl/SelectionControl.tokens.tsx
-var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } = ddsBaseTokens53;
+var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } = ddsBaseTokens54;
 var checkmark = {
   checkbox: {
     borderColor: colors29.DdsColorNeutralsWhite
@@ -11851,7 +11836,7 @@ var {
   groupContainer: groupContainer2,
   outerGroupContainer: outerGroupContainer2
 } = selectionControlTokens;
-var CustomSelectionControl = styled76.span`
+var CustomSelectionControl = styled75.span`
   position: absolute;
   left: 0;
   box-sizing: border-box;
@@ -11861,7 +11846,7 @@ var CustomSelectionControl = styled76.span`
   border-radius: ${selectionControl2.base.borderRadius};
   height: ${selectionControl2.base.height};
   width: ${selectionControl2.base.width};
-  ${({ $controlType }) => $controlType === "radio" && css33`
+  ${({ $controlType }) => $controlType === "radio" && css32`
       border-radius: 50%;
     `}
   &:after {
@@ -11870,7 +11855,7 @@ var CustomSelectionControl = styled76.span`
     display: none;
   }
 `;
-var Container13 = styled76.label`
+var Container13 = styled75.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -11878,9 +11863,9 @@ var Container13 = styled76.label`
   user-select: none;
   width: fit-content;
   color: ${container14.color};
-  ${({ $hasLabel }) => $hasLabel ? css33`
+  ${({ $hasLabel }) => $hasLabel ? css32`
           padding-left: ${container14.withLabel.paddingLeft};
-        ` : css33`
+        ` : css32`
           padding: ${container14.noLabel.padding};
         `}
 
@@ -11924,7 +11909,7 @@ var Container13 = styled76.label`
     border-color: ${selectionControl2.checked.hover.borderColor};
   }
 
-  ${({ $error }) => $error && css33`
+  ${({ $error }) => $error && css32`
       &:hover input:enabled ~ ${CustomSelectionControl} {
         background-color: ${selectionControl2.hover.danger.backgroundColor};
         box-shadow: ${selectionControl2.hover.danger.boxShadow};
@@ -11958,11 +11943,11 @@ var Container13 = styled76.label`
     display: block;
   }
 
-  ${({ disabled }) => disabled && css33`
+  ${({ disabled }) => disabled && css32`
       cursor: not-allowed;
       color: ${container14.disabled.color};
     `}
-  ${({ $controlType }) => $controlType === "checkbox" ? css33`
+  ${({ $controlType }) => $controlType === "checkbox" ? css32`
           ${CustomSelectionControl}:after {
             border: solid ${checkmark2.checkbox.borderColor};
 
@@ -11981,7 +11966,7 @@ var Container13 = styled76.label`
             height: 1px;
             transform: none;
           }
-        ` : css33`
+        ` : css32`
           ${CustomSelectionControl}:after {
             border-radius: 50%;
             background-color: ${checkmark2.radio.backgroundColor};
@@ -11992,22 +11977,22 @@ var Container13 = styled76.label`
           }
         `}
 `;
-var OuterGroupContainer = styled76.div`
+var OuterGroupContainer = styled75.div`
   display: flex;
   flex-direction: column;
   gap: ${outerGroupContainer2.gap};
 `;
-var GroupContainer = styled76.div`
+var GroupContainer = styled75.div`
   display: flex;
-  ${({ $direction }) => css33`
+  ${({ $direction }) => css32`
     flex-direction: ${$direction};
     gap: ${groupContainer2[$direction].gap};
   `}
 `;
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { jsx as jsx245, jsxs as jsxs63 } from "react/jsx-runtime";
-var Checkbox = forwardRef53(
+import { jsx as jsx244, jsxs as jsxs63 } from "react/jsx-runtime";
+var Checkbox = forwardRef52(
   (props, ref) => {
     const {
       id,
@@ -12042,7 +12027,7 @@ var Checkbox = forwardRef53(
         className: cn(className, htmlPropsClassName),
         style,
         children: [
-          /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx244(
             HiddenInput,
             {
               ...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
@@ -12062,8 +12047,8 @@ var Checkbox = forwardRef53(
               "data-indeterminate": indeterminate
             }
           ),
-          /* @__PURE__ */ jsx245(CustomSelectionControl, { $controlType: "checkbox" }),
-          hasLabel && /* @__PURE__ */ jsx245(Typography, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
+          /* @__PURE__ */ jsx244(CustomSelectionControl, { $controlType: "checkbox" }),
+          hasLabel && /* @__PURE__ */ jsx244(Typography, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
         ]
       }
     );
@@ -12073,7 +12058,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
 import { useId as useId18 } from "react";
-import { jsx as jsx246, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs64 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
     label: label3,
@@ -12120,12 +12105,12 @@ var CheckboxGroup = (props) => {
             children: [
               label3,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx246(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx245(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx246(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx246(
+        /* @__PURE__ */ jsx245(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx245(
           GroupContainer,
           {
             role: "group",
@@ -12143,7 +12128,7 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { forwardRef as forwardRef54, useId as useId19 } from "react";
+import { forwardRef as forwardRef53, useId as useId19 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -12153,7 +12138,7 @@ var useRadioButtonGroup = () => {
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { jsx as jsx247, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs65 } from "react/jsx-runtime";
 var isValueEqualToGroupValueOrFalsy = (value, group4) => {
   if (typeof value !== "undefined" && value !== null && group4) {
     if (typeof value === "number") {
@@ -12163,7 +12148,7 @@ var isValueEqualToGroupValueOrFalsy = (value, group4) => {
   }
   return !!value;
 };
-var RadioButton = forwardRef54(
+var RadioButton = forwardRef53(
   (props, ref) => {
     const {
       id,
@@ -12224,9 +12209,9 @@ var RadioButton = forwardRef54(
         htmlFor: uniqueId,
         $controlType: "radio",
         children: [
-          /* @__PURE__ */ jsx247(HiddenInput, { ...inputProps, ref }),
-          /* @__PURE__ */ jsx247(CustomSelectionControl, { $controlType: "radio" }),
-          /* @__PURE__ */ jsx247(Typography, { as: "span", children: children != null ? children : label3 })
+          /* @__PURE__ */ jsx246(HiddenInput, { ...inputProps, ref }),
+          /* @__PURE__ */ jsx246(CustomSelectionControl, { $controlType: "radio" }),
+          /* @__PURE__ */ jsx246(Typography, { as: "span", children: children != null ? children : label3 })
         ]
       }
     );
@@ -12236,11 +12221,11 @@ RadioButton.displayName = "RadioButton";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
 import {
-  forwardRef as forwardRef55,
+  forwardRef as forwardRef54,
   useId as useId20,
   useState as useState25
 } from "react";
-import { jsx as jsx248, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs66 } from "react/jsx-runtime";
 var RadioButtonGroupInner = (props, ref) => {
   const {
     name,
@@ -12302,12 +12287,12 @@ var RadioButtonGroupInner = (props, ref) => {
             children: [
               label3,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx248(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx247(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx248(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx248(
+        /* @__PURE__ */ jsx247(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx247(
           GroupContainer,
           {
             role: "radiogroup",
@@ -12323,16 +12308,16 @@ var RadioButtonGroupInner = (props, ref) => {
     }
   );
 };
-var RadioButtonGroup = forwardRef55(RadioButtonGroupInner);
+var RadioButtonGroup = forwardRef54(RadioButtonGroupInner);
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { forwardRef as forwardRef56 } from "react";
-import styled77 from "styled-components";
+import { forwardRef as forwardRef55 } from "react";
+import styled76 from "styled-components";
 
 // src/components/SkipToContent/SkipToContent.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens54 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors30, spacing: spacing34 } = ddsBaseTokens54;
+import { ddsBaseTokens as ddsBaseTokens55 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors30, spacing: spacing34 } = ddsBaseTokens55;
 var link3 = {
   base: {
     color: colors30.DdsColorNeutralsWhite
@@ -12351,9 +12336,9 @@ var skipToContentTokens = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { jsx as jsx249 } from "react/jsx-runtime";
+import { jsx as jsx248 } from "react/jsx-runtime";
 var { wrapper: wrapper6, link: link4 } = skipToContentTokens;
-var Wrapper5 = styled77.div`
+var Wrapper5 = styled76.div`
   box-sizing: border-box;
   position: absolute;
   top: ${({ $top: top }) => top};
@@ -12380,7 +12365,7 @@ var Wrapper5 = styled77.div`
     opacity: 1;
   }
 `;
-var Link4 = styled77.a`
+var Link4 = styled76.a`
   text-decoration: none;
   color: ${link4.base.color};
   ${getFontStyling(defaultTypographyType)}
@@ -12395,7 +12380,7 @@ var Link4 = styled77.a`
     color: ${link4.base.color};
   }
 `;
-var SkipToContent = forwardRef56(
+var SkipToContent = forwardRef55(
   (props, ref) => {
     const {
       text = "Til hovedinnhold",
@@ -12410,13 +12395,13 @@ var SkipToContent = forwardRef56(
       style,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsx249(
+    return /* @__PURE__ */ jsx248(
       Wrapper5,
       {
         $top: top,
         className: cn(className, htmlPropsClassName),
         style,
-        children: /* @__PURE__ */ jsx249(Link4, { ...getBaseHTMLProps(id, restHtmlProps, rest), ref, children: text })
+        children: /* @__PURE__ */ jsx248(Link4, { ...getBaseHTMLProps(id, restHtmlProps, rest), ref, children: text })
       }
     );
   }
@@ -12424,14 +12409,14 @@ var SkipToContent = forwardRef56(
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-import { forwardRef as forwardRef57, useState as useState26 } from "react";
-import styled78 from "styled-components";
+import { forwardRef as forwardRef56, useState as useState26 } from "react";
+import styled77 from "styled-components";
 
 // src/components/SplitButton/SplitButton.tokens.ts
-import { ddsBaseTokens as ddsBaseTokens55 } from "@norges-domstoler/dds-design-tokens";
+import { ddsBaseTokens as ddsBaseTokens56 } from "@norges-domstoler/dds-design-tokens";
 var mainButton = {
   primary: {
-    borderLeft: `1px solid ${ddsBaseTokens55.colors.DdsColorNeutralsWhite}`
+    borderLeft: `1px solid ${ddsBaseTokens56.colors.DdsColorNeutralsWhite}`
   }
 };
 var tokens3 = {
@@ -12439,11 +12424,11 @@ var tokens3 = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx250, jsxs as jsxs67 } from "react/jsx-runtime";
-var Container14 = styled78.div`
+import { jsx as jsx249, jsxs as jsxs67 } from "react/jsx-runtime";
+var Container14 = styled77.div`
   display: flex;
 `;
-var MainButton = styled78(Button)`
+var MainButton = styled77(Button)`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: none;
@@ -12452,7 +12437,7 @@ var MainButton = styled78(Button)`
     z-index: 0;
   }
 `;
-var OptionButton = styled78(Button)`
+var OptionButton = styled77(Button)`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -12470,7 +12455,7 @@ var OptionButton = styled78(Button)`
     ${(props) => props.purpose === "primary" && `border-left: ${tokens3.mainButton.primary.borderLeft}`};
   }
 `;
-var SplitButton = forwardRef57(
+var SplitButton = forwardRef56(
   (props, ref) => {
     const {
       size: size2,
@@ -12485,7 +12470,7 @@ var SplitButton = forwardRef57(
       size: size2
     };
     return /* @__PURE__ */ jsxs67(Container14, { ref, children: [
-      /* @__PURE__ */ jsx250(
+      /* @__PURE__ */ jsx249(
         MainButton,
         {
           ...buttonStyleProps,
@@ -12494,7 +12479,7 @@ var SplitButton = forwardRef57(
         }
       ),
       /* @__PURE__ */ jsxs67(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
-        /* @__PURE__ */ jsx250(
+        /* @__PURE__ */ jsx249(
           OptionButton,
           {
             ...buttonStyleProps,
@@ -12503,7 +12488,7 @@ var SplitButton = forwardRef57(
             purpose
           }
         ),
-        /* @__PURE__ */ jsx250(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
+        /* @__PURE__ */ jsx249(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
       ] })
     ] });
   }
@@ -12515,12 +12500,12 @@ import {
   Children as Children6,
   Fragment as Fragment11,
   cloneElement as cloneElement7,
-  forwardRef as forwardRef65,
+  forwardRef as forwardRef64,
   isValidElement as isValidElement7,
   useEffect as useEffect26,
   useState as useState28
 } from "react";
-import styled87 from "styled-components";
+import styled86 from "styled-components";
 
 // src/components/Table/collapsible/Table.context.tsx
 import { createContext as createContext9, useContext as useContext9 } from "react";
@@ -12531,38 +12516,38 @@ var CollapsibleTableContext = createContext9({
 var useCollapsibleTableContext = () => useContext9(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-import { forwardRef as forwardRef58 } from "react";
-import styled79 from "styled-components";
-import { jsx as jsx251 } from "react/jsx-runtime";
-var StyledBody = styled79.tbody``;
-var Body2 = forwardRef58(
+import { forwardRef as forwardRef57 } from "react";
+import styled78 from "styled-components";
+import { jsx as jsx250 } from "react/jsx-runtime";
+var StyledBody = styled78.tbody``;
+var Body2 = forwardRef57(
   ({ children, ...rest }, ref) => {
     const bodyProps = {
       ...rest
     };
-    return /* @__PURE__ */ jsx251(StyledBody, { ref, ...bodyProps, children });
+    return /* @__PURE__ */ jsx250(StyledBody, { ref, ...bodyProps, children });
   }
 );
 Body2.displayName = "Table.Body";
 
 // src/components/Table/normal/Cell.tsx
 import {
-  forwardRef as forwardRef60
+  forwardRef as forwardRef59
 } from "react";
-import styled81, { css as css34 } from "styled-components";
+import styled80, { css as css33 } from "styled-components";
 
 // src/components/Table/normal/Head.tsx
 import {
   createContext as createContext10,
-  forwardRef as forwardRef59,
+  forwardRef as forwardRef58,
   useContext as useContext10
 } from "react";
-import styled80 from "styled-components";
-import { jsx as jsx252 } from "react/jsx-runtime";
-var StyledHead = styled80.thead``;
-var Head = forwardRef59(
+import styled79 from "styled-components";
+import { jsx as jsx251 } from "react/jsx-runtime";
+var StyledHead = styled79.thead``;
+var Head = forwardRef58(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx252(StyledHead, { ref, ...rest, children: /* @__PURE__ */ jsx252(HeadContext.Provider, { value: true, children }) });
+    return /* @__PURE__ */ jsx251(StyledHead, { ref, ...rest, children: /* @__PURE__ */ jsx251(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
@@ -12573,8 +12558,8 @@ function useIsInTableHead() {
 }
 
 // src/components/Table/normal/Table.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens56 } from "@norges-domstoler/dds-design-tokens";
-var { font: font2, colors: colors31, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = ddsBaseTokens56;
+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 row = {
   body: {
     odd: {
@@ -12645,20 +12630,20 @@ var tableTokens = {
 };
 
 // src/components/Table/normal/Cell.tsx
-import { jsx as jsx253 } from "react/jsx-runtime";
+import { jsx as jsx252 } from "react/jsx-runtime";
 var { cell: cell3 } = tableTokens;
 var getLayoutStyle = (layout) => {
   switch (layout) {
     case "center":
-      return css34`
+      return css33`
         justify-content: center;
       `;
     case "right":
-      return css34`
+      return css33`
         justify-content: flex-end;
       `;
     case "text and icon":
-      return css34`
+      return css33`
         gap: ${cell3.layout.textAndIcon.gap};
       `;
     default:
@@ -12666,12 +12651,12 @@ var getLayoutStyle = (layout) => {
       return;
   }
 };
-var StyledCell = styled81.td`
-  ${({ $type: type }) => type === "head" && css34`
+var StyledCell = styled80.td`
+  ${({ $type: type }) => type === "head" && css33`
       background-color: ${cell3.head.backgroundColor};
     `}
 `;
-var InnerCell = styled81.div`
+var InnerCell = styled80.div`
   display: flex;
   align-items: center;
   ${({ $layout: layout }) => getLayoutStyle(layout)}
@@ -12685,49 +12670,49 @@ var getTableCellType = (type) => {
       return "td";
   }
 };
-var Cell2 = forwardRef60(
+var Cell2 = forwardRef59(
   ({ children, type: _type, layout = "left", collapsibleProps, ...rest }, ref) => {
     const isInHead = useIsInTableHead();
     const type = _type != null ? _type : isInHead ? "head" : "data";
     const as = getTableCellType(type);
     const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
-    return isCollapsibleChild ? /* @__PURE__ */ jsx253(DescriptionListDesc, { children }) : /* @__PURE__ */ jsx253(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ jsx253(InnerCell, { $layout: layout, children }) });
+    return isCollapsibleChild ? /* @__PURE__ */ jsx252(DescriptionListDesc, { children }) : /* @__PURE__ */ jsx252(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ jsx252(InnerCell, { $layout: layout, children }) });
   }
 );
 Cell2.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-import { forwardRef as forwardRef61 } from "react";
-import styled82 from "styled-components";
-import { jsx as jsx254 } from "react/jsx-runtime";
-var StyledFoot = styled82.tfoot``;
-var Foot = forwardRef61(
+import { forwardRef as forwardRef60 } from "react";
+import styled81 from "styled-components";
+import { jsx as jsx253 } from "react/jsx-runtime";
+var StyledFoot = styled81.tfoot``;
+var Foot = forwardRef60(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx254(StyledFoot, { ref, ...rest, children });
+    return /* @__PURE__ */ jsx253(StyledFoot, { ref, ...rest, children });
   }
 );
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-import { forwardRef as forwardRef62 } from "react";
+import { forwardRef as forwardRef61 } from "react";
 
 // src/components/Table/normal/Table.styles.tsx
-import styled83, { css as css35 } from "styled-components";
+import styled82, { css as css34 } from "styled-components";
 var { row: row2 } = tableTokens;
 var bodyRowStyles = (mode, selected) => {
-  return css35`
-    ${mode === "sum" && css35`
+  return css34`
+    ${mode === "sum" && css34`
       font-weight: 600;
       border-top: ${row2.body.mode.sum.borderTop};
       border-bottom: ${row2.body.mode.sum.borderBottom};
       background-color: ${row2.body.mode.sum.backgroundColor};
     `}
-    ${selected && css35`
+    ${selected && css34`
       background-color: ${row2.body.selected.backgroundColor};
     `}
   `;
 };
-var StyledRow = styled83.tr`
+var StyledRow = styled82.tr`
   @media (prefers-reduced-motion: no-preference) {
     transition:
       background-color 0.2s,
@@ -12737,11 +12722,11 @@ var StyledRow = styled83.tr`
 
   ${getFontStyling(defaultTypographyType, true)}
 
-  ${({ type }) => type === "head" && css35`
+  ${({ type }) => type === "head" && css34`
       font-weight: 600;
       text-align: left;
     `}
-  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && css35`
+  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && css34`
       &:nth-of-type(even) {
         background-color: ${row2.body.even.backgroundColor};
         ${bodyRowStyles(mode, selected)}
@@ -12752,7 +12737,7 @@ var StyledRow = styled83.tr`
         ${bodyRowStyles(mode, selected)}
       }
 
-      ${hoverable && css35`
+      ${hoverable && css34`
         &:hover {
           background-color: ${row2.body.hover.backgroundColor};
         }
@@ -12764,12 +12749,12 @@ var StyledRow = styled83.tr`
 `;
 
 // src/components/Table/normal/Row.tsx
-import { jsx as jsx255 } from "react/jsx-runtime";
-var Row = forwardRef62(
+import { jsx as jsx254 } from "react/jsx-runtime";
+var Row = forwardRef61(
   ({ type: _type, mode = "normal", hoverable, selected, children, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
-    return /* @__PURE__ */ jsx255(
+    return /* @__PURE__ */ jsx254(
       StyledRow,
       {
         type,
@@ -12786,11 +12771,11 @@ var Row = forwardRef62(
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-import { forwardRef as forwardRef63 } from "react";
-import styled84 from "styled-components";
-import { jsx as jsx256, jsxs as jsxs68 } from "react/jsx-runtime";
+import { forwardRef as forwardRef62 } from "react";
+import styled83 from "styled-components";
+import { jsx as jsx255, jsxs as jsxs68 } from "react/jsx-runtime";
 var { cell: cell4 } = tableTokens;
-var StyledButton5 = styled84.button`
+var StyledButton5 = styled83.button`
   ${normalizeButton}
   user-select: text;
   ${removeButtonStyling}
@@ -12803,12 +12788,12 @@ var StyledButton5 = styled84.button`
 `;
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
-    return /* @__PURE__ */ jsx256(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
+    return /* @__PURE__ */ jsx255(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
   }
-  return sortOrder === "ascending" ? /* @__PURE__ */ jsx256(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx256(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
+  return sortOrder === "ascending" ? /* @__PURE__ */ jsx255(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx255(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
-var SortCell = forwardRef63(
-  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx256(
+var SortCell = forwardRef62(
+  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx255(
     Cell2,
     {
       ref,
@@ -12833,11 +12818,11 @@ var SortCell = forwardRef63(
 SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
-import { forwardRef as forwardRef64 } from "react";
-import styled85, { css as css36 } from "styled-components";
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { forwardRef as forwardRef63 } from "react";
+import styled84, { css as css35 } from "styled-components";
+import { jsx as jsx256 } from "react/jsx-runtime";
 var { cell: cell5, row: row3 } = tableTokens;
-var StyledTable = styled85.table`
+var StyledTable = styled84.table`
   border-spacing: 0;
   border-collapse: collapse;
   *::selection {
@@ -12845,13 +12830,13 @@ var StyledTable = styled85.table`
   }
   ${scrollbarStyling.webkit}
   ${scrollbarStyling.firefox}
-  ${({ $density }) => css36`
+  ${({ $density }) => css35`
     td,
     th {
       padding: ${cell5.density[$density].padding};
     }
   `}
-  ${({ $density }) => $density === "extraCompact" && css36`
+  ${({ $density }) => $density === "extraCompact" && css35`
       th {
         background-color: ${row3.head.extraCompact.backgroundColor};
         font-size: ${row3.head.extraCompact.fontSize};
@@ -12865,7 +12850,7 @@ var StyledTable = styled85.table`
         }
       }
     `}
-  ${({ $stickyHeader }) => $stickyHeader && css36`
+  ${({ $stickyHeader }) => $stickyHeader && css35`
       tr[type='head'] {
         th[type='head'] {
           position: sticky;
@@ -12874,15 +12859,15 @@ var StyledTable = styled85.table`
         }
       }
     `}
-  ${({ $withDividers }) => $withDividers && css36`
+  ${({ $withDividers }) => $withDividers && css35`
       tr[type='body'] {
         border-bottom: ${row3.body.withDividers.borderBottom};
       }
     `}
 `;
-var Table = forwardRef64(
+var Table = forwardRef63(
   ({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx257(
+    return /* @__PURE__ */ jsx256(
       StyledTable,
       {
         ...rest,
@@ -12899,10 +12884,10 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import { useEffect as useEffect25, useRef as useRef30, useState as useState27 } from "react";
-import styled86, { css as css37 } from "styled-components";
-import { jsx as jsx258 } from "react/jsx-runtime";
-var Wrapper6 = styled86.div`
-  ${({ $overflowX }) => $overflowX && css37`
+import styled85, { css as css36 } from "styled-components";
+import { jsx as jsx257 } from "react/jsx-runtime";
+var Wrapper6 = styled85.div`
+  ${({ $overflowX }) => $overflowX && css36`
       overflow-x: auto;
     `}
   ${scrollbarStyling.webkit}
@@ -12929,7 +12914,7 @@ var TableWrapper = ({ children, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ jsx258(Wrapper6, { $overflowX: overflowX, ref: wrapperRef, ...rest, children });
+  return /* @__PURE__ */ jsx257(Wrapper6, { $overflowX: overflowX, ref: wrapperRef, ...rest, children });
 };
 TableWrapper.displayName = "Table.Wrapper";
 
@@ -12944,9 +12929,9 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment12, jsx as jsx259, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx258, jsxs as jsxs69 } from "react/jsx-runtime";
 var { collapseButton: collapseButton2 } = tableTokens;
-var CollapseButton = styled87.button`
+var CollapseButton = styled86.button`
   ${removeButtonStyling}
   margin-left: auto;
   margin-right: auto;
@@ -12961,12 +12946,12 @@ var CollapseButton = styled87.button`
     ${focusVisible}
   }
 `;
-var DescriptionListCell = styled87(Cell2)`
+var DescriptionListCell = styled86(Cell2)`
   & > div {
     display: block;
   }
 `;
-var CollapsibleRow = forwardRef65(
+var CollapsibleRow = forwardRef64(
   ({ type: _type, mode = "normal", selected, hoverable, children, ...rest }, ref) => {
     const isInHead = useIsInTableHead();
     const type = _type != null ? _type : isInHead ? "head" : "body";
@@ -12995,24 +12980,24 @@ var CollapsibleRow = forwardRef65(
       const id = derivativeIdGenerator(prefix2, index.toString());
       collapsibleIds.push(id);
       return /* @__PURE__ */ jsxs69(Fragment11, { children: [
-        /* @__PURE__ */ jsx259(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+        /* @__PURE__ */ jsx258(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
         isValidElement7(child) && cloneElement7(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx259(StyledRow, { type, children: /* @__PURE__ */ jsx259(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx259(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx258(StyledRow, { type, children: /* @__PURE__ */ jsx258(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx258(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
     const definingColumnCells = childrenArray.slice().filter((column, index) => definingColumnIndex.indexOf(index) > -1).sort((a2, b) => {
       return definingColumnIndex.indexOf(childrenArray.indexOf(a2)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
     });
     const headerRow = () => {
       if (type !== "head" || !isCollapsed)
         return null;
-      return /* @__PURE__ */ jsx259(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ jsxs69(Fragment12, { children: [
+      return /* @__PURE__ */ jsx258(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ jsxs69(Fragment12, { children: [
         definingColumnCells,
         /* @__PURE__ */ jsxs69(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ jsx259(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ jsx258(VisuallyHidden, { as: "span", children: "raden" })
         ] })
       ] }) });
     };
@@ -13029,13 +13014,13 @@ var CollapsibleRow = forwardRef65(
           "data-isopencollapsibleheader": !childrenCollapsed && true,
           children: [
             definingColumnCells,
-            /* @__PURE__ */ jsx259(Table2.Cell, { children: /* @__PURE__ */ jsx259(
+            /* @__PURE__ */ jsx258(Table2.Cell, { children: /* @__PURE__ */ jsx258(
               CollapseButton,
               {
                 onClick: () => setChildrenCollapsed(!childrenCollapsed),
                 "aria-expanded": !childrenCollapsed,
                 "aria-controls": idList,
-                children: /* @__PURE__ */ jsx259(
+                children: /* @__PURE__ */ jsx258(
                   AnimatedChevronUpDown,
                   {
                     isUp: childrenCollapsed ? false : true,
@@ -13055,24 +13040,24 @@ var CollapsibleRow = forwardRef65(
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ jsx259(StyledRow, { ref, type, ...rowProps, children });
+    ] }) : /* @__PURE__ */ jsx258(StyledRow, { ref, type, ...rowProps, children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-import { forwardRef as forwardRef66 } from "react";
-import styled88, { css as css38 } from "styled-components";
-import { jsx as jsx260 } from "react/jsx-runtime";
-var StyledTable2 = styled88(Table2)`
+import { forwardRef as forwardRef65 } from "react";
+import styled87, { css as css37 } from "styled-components";
+import { jsx as jsx259 } from "react/jsx-runtime";
+var StyledTable2 = styled87(Table2)`
   width: 100%;
-  ${({ withDividers }) => withDividers && css38`
+  ${({ withDividers }) => withDividers && css37`
       tr[data-isopencollapsibleheader='true'] {
         border-bottom: none;
       }
     `}
 `;
-var CollapsibleTable = forwardRef66((props, ref) => {
+var CollapsibleTable = forwardRef65((props, ref) => {
   const {
     density = "normal",
     children,
@@ -13081,7 +13066,7 @@ var CollapsibleTable = forwardRef66((props, ref) => {
     definingColumnIndex = [0],
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx260(
+  return /* @__PURE__ */ jsx259(
     CollapsibleTableContext.Provider,
     {
       value: {
@@ -13089,7 +13074,7 @@ var CollapsibleTable = forwardRef66((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx260(StyledTable2, { ref, density, ...rest, children })
+      children: /* @__PURE__ */ jsx259(StyledTable2, { ref, density, ...rest, children })
     }
   );
 });
@@ -13101,13 +13086,13 @@ CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/Tabs.tsx
 import {
-  forwardRef as forwardRef67,
+  forwardRef as forwardRef66,
   useEffect as useEffect27,
   useId as useId21,
   useRef as useRef31,
   useState as useState29
 } from "react";
-import styled89, { css as css39 } from "styled-components";
+import styled88, { css as css38 } from "styled-components";
 
 // src/components/Tabs/Tabs.context.tsx
 import { createContext as createContext11, useContext as useContext11 } from "react";
@@ -13124,13 +13109,13 @@ var TabsContext = createContext11({
 var useTabsContext = () => useContext11(TabsContext);
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx261 } from "react/jsx-runtime";
-var Container15 = styled89.div`
-  ${({ $width }) => $width && css39`
+import { jsx as jsx260 } from "react/jsx-runtime";
+var Container15 = styled88.div`
+  ${({ $width }) => $width && css38`
       width: ${$width};
     `};
 `;
-var Tabs = forwardRef67((props, ref) => {
+var Tabs = forwardRef66((props, ref) => {
   const {
     id,
     activeTab,
@@ -13161,7 +13146,7 @@ var Tabs = forwardRef67((props, ref) => {
     ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
     ref
   };
-  return /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx260(
     TabsContext.Provider,
     {
       value: {
@@ -13174,7 +13159,7 @@ var Tabs = forwardRef67((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ jsx261(Container15, { ...containerProps, $width: width, children })
+      children: /* @__PURE__ */ jsx260(Container15, { ...containerProps, $width: width, children })
     }
   );
 });
@@ -13182,16 +13167,16 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 import {
-  forwardRef as forwardRef68,
+  forwardRef as forwardRef67,
   useCallback as useCallback9,
   useEffect as useEffect28,
   useRef as useRef32
 } from "react";
-import styled90, { css as css40 } from "styled-components";
+import styled89, { css as css39 } from "styled-components";
 
 // src/components/Tabs/Tabs.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens57 } from "@norges-domstoler/dds-design-tokens";
-var { border: border14, spacing: spacing36, colors: colors32 } = ddsBaseTokens57;
+import { ddsBaseTokens as ddsBaseTokens58 } from "@norges-domstoler/dds-design-tokens";
+var { border: border14, spacing: spacing36, colors: colors32 } = ddsBaseTokens58;
 var tabList = {
   borderBottom: `${border14.BordersDdsBorderStyleLightStrokeWeight} solid ${border14.BordersDdsBorderStyleLightStroke}`
 };
@@ -13234,13 +13219,13 @@ import {
   useContext as useContext12,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { jsx as jsx262 } from "react/jsx-runtime";
+import { jsx as jsx261 } from "react/jsx-runtime";
 var TabContext = createContext12(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ jsx262(
+  return /* @__PURE__ */ jsx261(
     TabContext.Provider,
     {
       value: {
@@ -13272,9 +13257,9 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx263, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs70 } from "react/jsx-runtime";
 var { tab: tab2 } = tabsTokens;
-var Button2 = styled90.button`
+var Button2 = styled89.button`
   ${normalizeButton}
   ${removeButtonStyling}
   user-select: text;
@@ -13294,12 +13279,12 @@ var Button2 = styled90.button`
       ${focusVisibleTransitionValue};
   }
 
-  ${({ $direction }) => css40`
+  ${({ $direction }) => css39`
     flex-direction: ${$direction};
     gap: ${tab2[$direction].gap};
   `};
 
-  ${({ $active }) => $active && css40`
+  ${({ $active }) => $active && css39`
       background-color: ${tab2.active.backgroundColor};
       border-color: ${tab2.active.borderColor};
       color: ${tab2.active.color};
@@ -13317,7 +13302,7 @@ var Button2 = styled90.button`
     box-shadow: ${tab2.hover.boxShadow};
   }
 `;
-var Tab = forwardRef68((props, ref) => {
+var Tab = forwardRef67((props, ref) => {
   const {
     active = false,
     icon: icon12,
@@ -13375,8 +13360,8 @@ var Tab = forwardRef68((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon12 && /* @__PURE__ */ jsx263(Icon, { icon: icon12, iconSize: "inherit" }),
-        /* @__PURE__ */ jsx263("span", { children })
+        icon12 && /* @__PURE__ */ jsx262(Icon, { icon: icon12, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx262("span", { children })
       ]
     }
   );
@@ -13387,21 +13372,21 @@ Tab.displayName = "Tab";
 import {
   Children as Children7,
   cloneElement as cloneElement8,
-  forwardRef as forwardRef69,
+  forwardRef as forwardRef68,
   isValidElement as isValidElement8,
   useState as useState30
 } from "react";
-import styled91, { css as css41 } from "styled-components";
-import { jsx as jsx264 } from "react/jsx-runtime";
+import styled90, { css as css40 } from "styled-components";
+import { jsx as jsx263 } from "react/jsx-runtime";
 var { tabList: tabList2 } = tabsTokens;
-var autoFlow = css41`
+var autoFlow = css40`
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
 `;
-var templateColumns = (templateColumns2) => css41`
+var templateColumns = (templateColumns2) => css40`
   grid-template-columns: ${templateColumns2};
 `;
-var TabRow = styled91.div`
+var TabRow = styled90.div`
   border-bottom: ${tabList2.borderBottom};
   display: grid;
   ${({ $gridTemplateColumns }) => $gridTemplateColumns === "" ? autoFlow : templateColumns($gridTemplateColumns)}
@@ -13420,7 +13405,7 @@ var TabRow = styled91.div`
     outline: none;
   }
 `;
-var TabList = forwardRef69(
+var TabList = forwardRef68(
   ({ children, id, onFocus, ...rest }, ref) => {
     const {
       activeTab,
@@ -13468,32 +13453,32 @@ var TabList = forwardRef69(
       tabIndex: 0,
       onFocus: handleOnFocus
     };
-    return /* @__PURE__ */ jsx264(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx264(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
+    return /* @__PURE__ */ jsx263(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx263(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
   }
 );
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-import { forwardRef as forwardRef70 } from "react";
-import styled92, { css as css42 } from "styled-components";
-import { jsx as jsx265 } from "react/jsx-runtime";
+import { forwardRef as forwardRef69 } from "react";
+import styled91, { css as css41 } from "styled-components";
+import { jsx as jsx264 } from "react/jsx-runtime";
 var { panel: panel2 } = tabsTokens;
-var Panel = styled92.div`
+var Panel = styled91.div`
   padding: ${panel2.padding};
   @media (prefers-reduced-motion: no-preference) {
     transition: ${focusVisibleTransitionValue};
   }
 
-  ${({ $active }) => !$active && css42`
+  ${({ $active }) => !$active && css41`
       display: none;
     `}
   &:focus-visible {
     ${focusVisible}
   }
 `;
-var TabPanel = forwardRef70(
+var TabPanel = forwardRef69(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx265(
+    return /* @__PURE__ */ jsx264(
       Panel,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -13512,11 +13497,11 @@ TabPanel.displayName = "TabPanel";
 import {
   Children as Children8,
   cloneElement as cloneElement9,
-  forwardRef as forwardRef71,
+  forwardRef as forwardRef70,
   isValidElement as isValidElement9
 } from "react";
-import { jsx as jsx266 } from "react/jsx-runtime";
-var TabPanels = forwardRef71(
+import { jsx as jsx265 } from "react/jsx-runtime";
+var TabPanels = forwardRef70(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
@@ -13529,18 +13514,18 @@ var TabPanels = forwardRef71(
         "aria-expanded": active
       });
     });
-    return /* @__PURE__ */ jsx266("div", { ref: combinedRef, ...rest, children: panelChildren });
+    return /* @__PURE__ */ jsx265("div", { ref: combinedRef, ...rest, children: panelChildren });
   }
 );
 TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef72 } from "react";
-import styled93, { css as css43 } from "styled-components";
+import { forwardRef as forwardRef71 } from "react";
+import styled92, { css as css42 } from "styled-components";
 
 // src/components/Tag/Tag.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens58 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } = ddsBaseTokens58;
+import { ddsBaseTokens as ddsBaseTokens59 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } = ddsBaseTokens59;
 var typographyType5 = "bodySans01";
 var wrapper7 = {
   border: "1px solid",
@@ -13597,9 +13582,9 @@ var tagTokens = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx267, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs71 } from "react/jsx-runtime";
 var { wrapper: wrapper8 } = tagTokens;
-var Wrapper7 = styled93(TextOverflowEllipsisWrapper)`
+var Wrapper7 = styled92(TextOverflowEllipsisWrapper)`
   display: inline-flex;
   align-items: center;
   gap: ${tagTokens.wrapper.icon.gap};
@@ -13607,18 +13592,18 @@ var Wrapper7 = styled93(TextOverflowEllipsisWrapper)`
   border-radius: ${wrapper8.borderRadius};
   padding: ${({ $withIcon }) => $withIcon ? wrapper8.icon.padding : wrapper8.padding};
   ${getFontStyling(typographyType5)}
-  ${({ $purpose }) => css43`
+  ${({ $purpose }) => css42`
     background-color: ${wrapper8.purpose[$purpose].backgroundColor};
     border-color: ${wrapper8.purpose[$purpose].borderColor};
   `}
 `;
-var StyledIcon5 = styled93(Icon)`
+var StyledIcon5 = styled92(Icon)`
   color: ${({ $purpose }) => {
   var _a;
   return (_a = wrapper8.purpose[$purpose].icon) == null ? void 0 : _a.color;
 }};
 `;
-var Tag = forwardRef72((props, ref) => {
+var Tag = forwardRef71((props, ref) => {
   const {
     text,
     purpose = "default",
@@ -13638,7 +13623,7 @@ var Tag = forwardRef72((props, ref) => {
       $purpose: purpose,
       $withIcon: Boolean(withIcon && icon12),
       children: [
-        withIcon && icon12 && /* @__PURE__ */ jsx267(
+        withIcon && icon12 && /* @__PURE__ */ jsx266(
           StyledIcon5,
           {
             $purpose: purpose,
@@ -13646,7 +13631,7 @@ var Tag = forwardRef72((props, ref) => {
             iconSize: tagTokens.wrapper.icon.size
           }
         ),
-        /* @__PURE__ */ jsx267(TextOverflowEllipsisInner, { children: children != null ? children : text })
+        /* @__PURE__ */ jsx266(TextOverflowEllipsisInner, { children: children != null ? children : text })
       ]
     }
   );
@@ -13655,19 +13640,19 @@ Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
 import {
-  forwardRef as forwardRef73,
+  forwardRef as forwardRef72,
   useId as useId23,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef33,
   useState as useState31
 } from "react";
-import styled96, { css as css45 } from "styled-components";
+import styled95, { css as css44 } from "styled-components";
 
 // src/components/TextInput/CharCounter.tsx
 import { useId as useId22 } from "react";
-import styled94 from "styled-components";
+import styled93 from "styled-components";
 import { jsxs as jsxs72 } from "react/jsx-runtime";
-var Wrapper8 = styled94(Typography)`
+var Wrapper8 = styled93(Typography)`
   margin-left: auto;
 `;
 function CharCounter(props) {
@@ -13692,12 +13677,12 @@ function CharCounter(props) {
 var CharCounter_default = CharCounter;
 
 // src/components/TextInput/TextInput.styles.tsx
-import { ddsBaseTokens as ddsBaseTokens60 } from "@norges-domstoler/dds-design-tokens";
-import styled95, { css as css44 } from "styled-components";
+import { ddsBaseTokens as ddsBaseTokens61 } from "@norges-domstoler/dds-design-tokens";
+import styled94, { css as css43 } from "styled-components";
 
 // src/components/TextInput/TextInput.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens59 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } = ddsBaseTokens59;
+import { ddsBaseTokens as ddsBaseTokens60 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } = ddsBaseTokens60;
 var input5 = {
   withIcon: {
     medium: {
@@ -13740,33 +13725,33 @@ var textInputTokens = {
 };
 
 // src/components/TextInput/TextInput.styles.tsx
-var { iconSizes: iconSizes5 } = ddsBaseTokens60;
+var { iconSizes: iconSizes5 } = ddsBaseTokens61;
 var { input: input6, icon: icon11 } = textInputTokens;
-var MessageContainer2 = styled95.div`
+var MessageContainer2 = styled94.div`
   display: flex;
   justify-content: space-between;
 `;
-var StyledIcon6 = styled95(Icon)`
+var StyledIcon6 = styled94(Icon)`
   position: absolute;
   color: ${icon11.color};
-  ${({ $size, iconSize }) => css44`
+  ${({ $size, iconSize }) => css43`
     left: ${icon11.sizes[$size].left};
-    ${iconSize === "small" ? css44`
+    ${iconSize === "small" ? css43`
           top: ${`calc(50% - ${iconSizes5.DdsIconsizeSmallNumberPx / 2}px)`};
-        ` : css44`
+        ` : css43`
           top: ${`calc(50% - ${iconSizes5.DdsIconsizeMediumNumberPx / 2}px)`};
         `}
   `}
   z-index: 1;
 `;
-var StyledInput = styled95(StatefulInput)`
-  ${({ componentSize, $hasIcon }) => $hasIcon && componentSize && css44`
+var StyledInput = styled94(StatefulInput)`
+  ${({ componentSize, $hasIcon }) => $hasIcon && componentSize && css43`
       padding-left: ${input6.withIcon[componentSize].paddingLeft};
     `}
 `;
 
 // src/components/TextInput/TextInput.tsx
-import { jsx as jsx268, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs73 } from "react/jsx-runtime";
 var defaultWidth6 = "320px";
 var defaultTinyWidth = "210px";
 var getWidth = (size2, width) => {
@@ -13777,7 +13762,7 @@ var getWidth = (size2, width) => {
   }
   return defaultWidth6;
 };
-var Affix = styled96.span`
+var Affix = styled95.span`
   position: absolute;
   height: 100%;
   top: 50%;
@@ -13787,31 +13772,31 @@ var Affix = styled96.span`
   pointer-events: none;
   z-index: 1;
 `;
-var Prefix = styled96(Affix)`
+var Prefix = styled95(Affix)`
   left: 0;
   margin-left: 8px;
   padding-right: 8px;
   border-right: 1px solid ${textInputTokens.affix.border.color};
 
-  ${({ readOnly }) => readOnly && css45`
+  ${({ readOnly }) => readOnly && css44`
       margin-left: 0;
       padding-right: 0.5ch;
       border-right: none;
     `};
 `;
-var Suffix = styled96(Affix)`
+var Suffix = styled95(Affix)`
   right: 0;
   margin-right: 8px;
   padding-left: 8px;
   border-left: 1px solid ${textInputTokens.affix.border.color};
 
-  ${({ readOnly }) => readOnly && css45`
+  ${({ readOnly }) => readOnly && css44`
       margin-right: 0;
       padding-left: 0.5ch;
       border-left: none;
     `};
 `;
-var TextInput2 = forwardRef73(
+var TextInput2 = forwardRef72(
   ({
     label: label3,
     disabled,
@@ -13901,7 +13886,7 @@ var TextInput2 = forwardRef73(
     let extendedInput = null;
     if (hasIcon) {
       extendedInput = /* @__PURE__ */ jsxs73(InputContainer, { children: [
-        /* @__PURE__ */ jsx268(
+        /* @__PURE__ */ jsx267(
           StyledIcon6,
           {
             icon: icon12,
@@ -13909,7 +13894,7 @@ var TextInput2 = forwardRef73(
             $size: componentSize
           }
         ),
-        /* @__PURE__ */ jsx268(
+        /* @__PURE__ */ jsx267(
           StyledInput,
           {
             ref,
@@ -13923,8 +13908,8 @@ var TextInput2 = forwardRef73(
       ] });
     } else if (hasAffix) {
       extendedInput = /* @__PURE__ */ jsxs73(InputAffixContainer, { children: [
-        prefix2 && /* @__PURE__ */ jsx268(Prefix, { readOnly, ref: prefixRef, "aria-hidden": true, children: prefix2 }),
-        /* @__PURE__ */ jsx268(
+        prefix2 && /* @__PURE__ */ jsx267(Prefix, { readOnly, ref: prefixRef, "aria-hidden": true, children: prefix2 }),
+        /* @__PURE__ */ jsx267(
           StatefulInput,
           {
             ref,
@@ -13936,12 +13921,12 @@ var TextInput2 = forwardRef73(
             ...generalInputProps
           }
         ),
-        suffix && /* @__PURE__ */ jsx268(Suffix, { readOnly, ref: suffixRef, "aria-hidden": true, children: suffix })
+        suffix && /* @__PURE__ */ jsx267(Suffix, { readOnly, ref: suffixRef, "aria-hidden": true, children: suffix })
       ] });
     }
     return /* @__PURE__ */ jsxs73(OuterInputContainer, { ...outerInputContainerProps, children: [
-      hasLabel && /* @__PURE__ */ jsx268(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
-      extendedInput ? extendedInput : /* @__PURE__ */ jsx268(
+      hasLabel && /* @__PURE__ */ jsx267(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
+      extendedInput ? extendedInput : /* @__PURE__ */ jsx267(
         StatefulInput,
         {
           ref,
@@ -13953,7 +13938,7 @@ var TextInput2 = forwardRef73(
       ),
       hasMessage && /* @__PURE__ */ jsxs73(MessageContainer2, { children: [
         renderInputMessage(tip, tipId, errorMessage, errorMessageId),
-        maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && /* @__PURE__ */ jsx268(
+        maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && /* @__PURE__ */ jsx267(
           CharCounter_default,
           {
             id: characterCounterId,
@@ -13969,7 +13954,7 @@ TextInput2.displayName = "TextInput";
 
 // src/components/ToggleBar/ToggleBar.tsx
 import { useId as useId24, useState as useState32 } from "react";
-import styled97, { css as css46 } from "styled-components";
+import styled96, { css as css45 } from "styled-components";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext13, useContext as useContext13 } from "react";
@@ -13979,9 +13964,9 @@ var ToggleBarContext = createContext13({
 var useToggleBarContext = () => useContext13(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens61 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = ddsBaseTokens61;
-var typographyTypes7 = {
+import { ddsBaseTokens as ddsBaseTokens62 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = ddsBaseTokens62;
+var typographyTypes6 = {
   large: "bodySans04",
   medium: "bodySans02",
   small: "bodySans01",
@@ -14003,7 +13988,7 @@ var iconSizeLarge = `${calculateHeightWithLineHeight(
   fontPackages6.body_sans_04.numbers.lineHeightNumber,
   fontPackages6.body_sans_04.numbers.fontSizeNumber
 )}px`;
-var outerContainer9 = {
+var outerContainer7 = {
   gap: spacing39.SizesDdsSpacingX0125
 };
 var label = {
@@ -14079,14 +14064,14 @@ var content5 = {
   }
 };
 var toggleBarTokens = {
-  outerContainer: outerContainer9,
+  outerContainer: outerContainer7,
   content: content5,
   label
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx269, jsxs as jsxs74 } from "react/jsx-runtime";
-var OuterContainer4 = styled97.div`
+import { jsx as jsx268, jsxs as jsxs74 } from "react/jsx-runtime";
+var OuterContainer3 = styled96.div`
   display: flex;
   flex-direction: column;
   gap: ${toggleBarTokens.outerContainer.gap};
@@ -14094,11 +14079,11 @@ var OuterContainer4 = styled97.div`
   *::selection {
     ${selection}
   }
-  ${({ $width }) => $width && css46`
+  ${({ $width }) => $width && css45`
       width: ${$width};
     `}
 `;
-var Bar2 = styled97.div`
+var Bar3 = styled96.div`
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
@@ -14125,7 +14110,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label3 && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx269(
+  return /* @__PURE__ */ jsx268(
     ToggleBarContext.Provider,
     {
       value: {
@@ -14135,15 +14120,15 @@ var ToggleBar = (props) => {
         value: groupValue
       },
       children: /* @__PURE__ */ jsxs74(
-        OuterContainer4,
+        OuterContainer3,
         {
           ...getBaseHTMLProps(id, className, htmlProps, rest),
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           $width: width,
           children: [
-            label3 && /* @__PURE__ */ jsx269(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
-            /* @__PURE__ */ jsx269(Bar2, { children })
+            label3 && /* @__PURE__ */ jsx268(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
+            /* @__PURE__ */ jsx268(Bar3, { children })
           ]
         }
       )
@@ -14154,14 +14139,14 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
-  forwardRef as forwardRef74,
+  forwardRef as forwardRef73,
   useId as useId25
 } from "react";
 
 // src/components/ToggleBar/ToggleRadio.styles.tsx
-import styled98, { css as css47 } from "styled-components";
+import styled97, { css as css46 } from "styled-components";
 var { content: content6, label: label2 } = toggleBarTokens;
-var Content2 = styled98.span`
+var Content2 = styled97.span`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14179,18 +14164,18 @@ var Content2 = styled98.span`
   }
   background-color: ${content6.base.backgroundColor};
 
-  ${({ $size, $justIcon }) => css47`
-    ${$justIcon ? css47`
+  ${({ $size, $justIcon }) => css46`
+    ${$justIcon ? css46`
           font-size: ${content6.size[$size].justIcon.fontSize};
           padding: ${content6.size[$size].justIcon.padding};
-        ` : css47`
+        ` : css46`
           gap: ${content6.size[$size].withText.gap};
           padding: ${content6.size[$size].withText.padding};
-          ${getFontStyling(typographyTypes7[$size])}
+          ${getFontStyling(typographyTypes6[$size])}
         `}
   `}
 `;
-var Label3 = styled98.label`
+var Label3 = styled97.label`
   ${Content2} {
     border-right: ${label2.base.borderRight};
     border-top: ${label2.base.borderTop};
@@ -14228,7 +14213,7 @@ var Label3 = styled98.label`
 `;
 
 // src/components/ToggleBar/ToggleRadio.tsx
-import { jsx as jsx270, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs75 } from "react/jsx-runtime";
 var calculateChecked = (value, group4, checked) => {
   if (typeof checked !== "undefined")
     return checked;
@@ -14240,7 +14225,7 @@ var calculateChecked = (value, group4, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = forwardRef74(
+var ToggleRadio = forwardRef73(
   (props, ref) => {
     const {
       value,
@@ -14262,7 +14247,7 @@ var ToggleRadio = forwardRef74(
       (group4 == null ? void 0 : group4.onChange) && group4.onChange(event);
     };
     return /* @__PURE__ */ jsxs75(Label3, { size: group4.size, htmlFor: uniqueId, children: [
-      /* @__PURE__ */ jsx270(
+      /* @__PURE__ */ jsx269(
         HiddenInput,
         {
           ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
@@ -14275,8 +14260,8 @@ var ToggleRadio = forwardRef74(
         }
       ),
       /* @__PURE__ */ jsxs75(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
-        icon12 && /* @__PURE__ */ jsx270(Icon, { icon: icon12, iconSize: "inherit" }),
-        label3 && /* @__PURE__ */ jsx270("span", { children: label3 })
+        icon12 && /* @__PURE__ */ jsx269(Icon, { icon: icon12, iconSize: "inherit" }),
+        label3 && /* @__PURE__ */ jsx269("span", { children: label3 })
       ] })
     ] });
   }
@@ -14284,12 +14269,12 @@ var ToggleRadio = forwardRef74(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef75, useId as useId26 } from "react";
-import styled99, { css as css48 } from "styled-components";
+import { forwardRef as forwardRef74, useId as useId26 } from "react";
+import styled98, { css as css47 } from "styled-components";
 
 // src/components/ToggleButton/ToggleButton.tokens.tsx
-import { ddsBaseTokens as ddsBaseTokens62 } from "@norges-domstoler/dds-design-tokens";
-var { colors: colors36, spacing: spacing40 } = ddsBaseTokens62;
+import { ddsBaseTokens as ddsBaseTokens63 } from "@norges-domstoler/dds-design-tokens";
+var { colors: colors36, spacing: spacing40 } = ddsBaseTokens63;
 var { button: button2 } = buttonTokens;
 var { selectionControl: selectionControl3 } = selectionControlTokens;
 var typographyType6 = typographyTypes.small;
@@ -14320,9 +14305,9 @@ var toggleButtonTokens = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx271, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs76 } from "react/jsx-runtime";
 var { toggleButton: toggleButton2 } = toggleButtonTokens;
-var Content3 = styled99.span`
+var Content3 = styled98.span`
   display: flex;
   align-items: center;
   width: 100%;
@@ -14344,7 +14329,7 @@ var Content3 = styled99.span`
       ${focusVisibleTransitionValue};
   }
 
-  ${({ $hasIcon }) => $hasIcon && css48`
+  ${({ $hasIcon }) => $hasIcon && css47`
       gap: ${toggleButton2.gap};
     `}
 
@@ -14358,7 +14343,7 @@ var Content3 = styled99.span`
     border-color: ${toggleButton2.hover.borderColor};
   }
 `;
-var Container16 = styled99.label`
+var Container16 = styled98.label`
   width: fit-content;
   ${HiddenInput}:checked + ${Content3} {
     background-color: ${toggleButton2.checked.backgroundColor};
@@ -14374,12 +14359,12 @@ var Container16 = styled99.label`
     ${focusVisible}
   }
 `;
-var ToggleButton = forwardRef75(
+var ToggleButton = forwardRef74(
   ({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
     const generatedId = useId26();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     return /* @__PURE__ */ jsxs76(Container16, { htmlFor: uniqueId, children: [
-      /* @__PURE__ */ jsx271(
+      /* @__PURE__ */ jsx270(
         HiddenInput,
         {
           ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
@@ -14388,7 +14373,7 @@ var ToggleButton = forwardRef75(
         }
       ),
       /* @__PURE__ */ jsxs76(Content3, { $hasIcon: !!icon12, children: [
-        icon12 && /* @__PURE__ */ jsx271(Icon, { icon: icon12, iconSize: "inherit" }),
+        icon12 && /* @__PURE__ */ jsx270(Icon, { icon: icon12, iconSize: "inherit" }),
         " ",
         label3
       ] })
@@ -14399,17 +14384,17 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 import { useId as useId27 } from "react";
-import styled100, { css as css49 } from "styled-components";
-import { jsx as jsx272, jsxs as jsxs77 } from "react/jsx-runtime";
-var Group2 = styled100.div`
+import styled99, { css as css48 } from "styled-components";
+import { jsx as jsx271, jsxs as jsxs77 } from "react/jsx-runtime";
+var Group2 = styled99.div`
   gap: ${toggleButtonTokens.group.gap};
   display: flex;
   flex-wrap: wrap;
-  ${({ direction }) => css49`
+  ${({ direction }) => css48`
     flex-direction: ${direction};
   `}
 `;
-var Container17 = styled100.div`
+var Container17 = styled99.div`
   display: flex;
   flex-direction: column;
   gap: ${toggleButtonTokens.container.gap};
@@ -14436,7 +14421,7 @@ var ToggleButtonGroup = (props) => {
     "aria-labelledby": label3 ? uniqueLabelId : void 0
   };
   return /* @__PURE__ */ jsxs77(Container17, { ...containerProps, children: [
-    !!label3 && /* @__PURE__ */ jsx272(
+    !!label3 && /* @__PURE__ */ jsx271(
       Typography,
       {
         as: "span",
@@ -14445,7 +14430,7 @@ var ToggleButtonGroup = (props) => {
         children: label3
       }
     ),
-    /* @__PURE__ */ jsx272(Group2, { ...groupProps, children })
+    /* @__PURE__ */ jsx271(Group2, { ...groupProps, children })
   ] });
 };
 ToggleButtonGroup.displayName = "ToggleButtonGroup";