@norges-domstoler/dds-components 14.1.0 → 14.3.0

package/dist/index.js

@@ -216,7 +216,7 @@ __export(src_exports, {
   PublishIcon: () => PublishIcon,
   QuestionAnswerIcon: () => QuestionAnswerIcon,
   RadioButton: () => RadioButton,
-  RadioButtonGroup: () => RadioButtonGroup2,
+  RadioButtonGroup: () => RadioButtonGroup,
   ReceiptIcon: () => ReceiptIcon,
   RedoIcon: () => RedoIcon,
   RefreshIcon: () => RefreshIcon,
@@ -244,7 +244,7 @@ __export(src_exports, {
   TabList: () => TabList,
   TabPanel: () => TabPanel,
   TabPanels: () => TabPanels,
-  Table: () => Table2,
+  Table: () => Table,
   Tabs: () => Tabs,
   Tag: () => Tag,
   TextArea: () => TextArea,
@@ -280,6 +280,7 @@ __export(src_exports, {
   WarningIcon: () => WarningIcon,
   ZoomInIcon: () => ZoomInIcon,
   ZoomOutIcon: () => ZoomOutIcon,
+  calendarDateToNativeDate: () => calendarDateToNativeDate,
   cn: () => cn,
   createSelectOptions: () => createSelectOptions,
   dangerInputfield: () => dangerInputfield,
@@ -317,7 +318,9 @@ __export(src_exports, {
   isInlineElement: () => isInlineElement,
   isKeyboardEvent: () => isKeyboardEvent,
   isRelativeGridColumn: () => isRelativeGridColumn,
+  nativeDateToCalendarDate: () => nativeDateToCalendarDate,
   nativeDateToDateValue: () => nativeDateToDateValue,
+  nativeDateToTime: () => nativeDateToTime,
   normalizeButton: () => normalizeButton,
   outlineOffset: () => outlineOffset,
   removeButtonStyling: () => removeButtonStyling,
@@ -447,135 +450,55 @@ var inputTokens = {
   container
 };
 
-// src/components/helpers/styling/danger.tsx
-var import_dds_design_tokens2 = require("@norges-domstoler/dds-design-tokens");
-var { colors: Colors } = import_dds_design_tokens2.ddsBaseTokens;
-var dangerInputfield = {
-  borderColor: Colors.DdsColorDangerBase,
-  boxShadow: `0 0 0 1px ${Colors.DdsColorDangerBase}`
-};
-
-// src/components/helpers/styling/focus.tsx
-var import_dds_design_tokens3 = require("@norges-domstoler/dds-design-tokens");
-var { border: border2 } = import_dds_design_tokens3.ddsBaseTokens;
-var focusInputfield = {
-  outline: "none",
-  borderColor: border2.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: `0 0 0 2px ${border2.BordersDdsBorderFocusInputfieldStroke}`
-};
-var focusDangerInputfield = {
-  borderColor: border2.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: `0 0 0 2px ${border2.BordersDdsBorderFocusInputfieldStroke}`
-};
-
-// src/components/helpers/styling/focusVisible.tsx
-var import_dds_design_tokens4 = require("@norges-domstoler/dds-design-tokens");
-var { border: Border, spacing: spacing2 } = import_dds_design_tokens4.ddsBaseTokens;
-var outlineOffset = spacing2.SizesDdsSpacingX0125;
-var focusVisible = {
-  outline: `${Border.BordersDdsBorderFocusBaseStrokeWeight} ${Border.BordersDdsBorderFocusBaseStroke} solid`,
-  outlineOffset
-};
-var focusVisibleOnDark = {
-  outline: `${Border.BordersDdsBorderFocusOndarkStrokeWeight} ${Border.BordersDdsBorderFocusOndarkStroke} solid`,
-  outlineOffset
-};
-var focusVisibleTransitionValue = "outline-offset 0.2s";
-var focusVisibleWithBorder = {
-  outline: "none",
-  borderColor: Border.BordersDdsBorderFocusCardStroke,
-  boxShadow: `inset 0 0 0 1px ${Border.BordersDdsBorderFocusCardStroke}`
-};
-var focusVisibleThickWithBorderOnDark = {
-  outline: "none",
-  borderColor: Border.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: `inset 0 0 0 1px ${Border.BordersDdsBorderFocusOndarkStroke}`
-};
-var focusVisibleInset = {
-  outline: "none",
-  boxShadow: `inset 0 0 0 2px ${Border.BordersDdsBorderFocusCardStroke}`
-};
-
-// src/components/helpers/styling/hideInput.tsx
-var hideInput = {
-  clip: "rect(0 0 0 0)",
-  position: "absolute",
-  height: "1px",
-  width: "1px",
-  margin: 0
-};
-
-// src/components/helpers/styling/hover.tsx
-var import_dds_design_tokens5 = require("@norges-domstoler/dds-design-tokens");
-var { border: Border2, colors: Colors2 } = import_dds_design_tokens5.ddsBaseTokens;
-var hoverWithBorder = {
-  borderColor: Border2.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: `inset 0 0 0 1px ${Border2.BordersDdsBorderFocusInputfieldStroke}`
-};
-var hoverInputfield = {
-  borderColor: Border2.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: `0 0 0 1px ${Border2.BordersDdsBorderFocusInputfieldStroke}`
-};
-var hoverDangerInputfield = {
-  borderColor: Colors2.DdsColorDangerBase,
-  boxShadow: `0 0 0 1px ${Colors2.DdsColorDangerBase}`
-};
-
-// src/components/helpers/styling/normalize.tsx
-var normalizeButton = {
-  margin: 0,
-  textTransform: "none"
-};
-
-// src/components/helpers/styling/removeButtonStyling.tsx
-var removeButtonStyling = {
-  background: "none",
-  color: "inherit",
-  border: "none",
-  padding: 0,
-  font: "inherit",
-  cursor: "pointer",
-  outline: "inherit"
-};
-
-// src/components/helpers/styling/removeListStyling.tsx
-var removeListStyling = {
-  listStyle: "none",
-  padding: 0,
-  margin: 0
-};
+// src/components/Typography/Caption/Caption.tsx
+var import_react3 = require("react");
 
-// src/components/helpers/styling/selection.tsx
-var import_dds_design_tokens6 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors2 } = import_dds_design_tokens6.ddsBaseTokens;
-var selection = {
-  color: colors2.DdsColorNeutralsGray9,
-  backgroundColor: colors2.DdsColorTertiaryLightest
-};
+// src/utils/dom.ts
+function cn(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
 
-// src/components/helpers/styling/visibilityTransition.tsx
-var import_styled_components3 = require("styled-components");
-var visibilityTransition = (open) => {
-  return import_styled_components3.css`
-    @media (prefers-reduced-motion: no-preference) {
-      transition:
-        visibility 0.4s,
-        opacity 0.2s;
-    }
-    visibility: ${open ? "visible" : "hidden"};
-    opacity: ${open ? 1 : 0};
-  `;
+// src/types/BaseComponentProps.ts
+var getBaseHTMLProps = (id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unknownPropsOrUndefined) => {
+  if (typeof htmlPropsOrClassName === "string" || unknownPropsOrUndefined != void 0) {
+    const {
+      id: idFromHtmlProps,
+      className: classNameFromHtmlProps,
+      ...restHTMLProps
+    } = htmlPropsOrUnknownProps != null ? htmlPropsOrUnknownProps : {};
+    const propId = id != null ? id : idFromHtmlProps;
+    const propClassName = cn(
+      htmlPropsOrClassName,
+      classNameFromHtmlProps
+    );
+    return {
+      ...unknownPropsOrUndefined,
+      ...restHTMLProps,
+      ...propClassName && { className: propClassName },
+      ...propId && { id: propId }
+    };
+  } else {
+    const {
+      id: htmlPropsId,
+      className: htmlPropsClassName,
+      ...restHTMLProps
+    } = htmlPropsOrClassName != null ? htmlPropsOrClassName : {};
+    const propId = id != null ? id : htmlPropsId;
+    return {
+      ...htmlPropsOrUnknownProps,
+      ...restHTMLProps,
+      ...htmlPropsClassName && { className: htmlPropsClassName },
+      ...propId && { id: propId }
+    };
+  }
 };
 
-// src/components/Typography/Caption/Caption.tsx
-var import_react3 = require("react");
-
 // src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.tsx
-var import_styled_components4 = __toESM(require("styled-components"));
-var TextOverflowEllipsisWrapper = import_styled_components4.default.span`
+var import_styled_components3 = __toESM(require("styled-components"));
+var TextOverflowEllipsisWrapper = import_styled_components3.default.span`
   max-width: 100%;
 `;
-var TextOverflowEllipsisInner = import_styled_components4.default.span`
+var TextOverflowEllipsisInner = import_styled_components3.default.span`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -583,26 +506,134 @@ var TextOverflowEllipsisInner = import_styled_components4.default.span`
 
 // src/components/Typography/Typography/Typography.tsx
 var import_react2 = require("react");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
+
+// src/components/Typography/Typography/Typography.styles.ts
+var import_dds_design_tokens3 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components4 = require("styled-components");
+
+// src/components/Typography/Typography/openExternal.svg
+var openExternal_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M19 19H5V5H12V3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z" fill="%230B0D0E"/>%0A</svg>%0A';
+
+// src/components/Typography/Typography/Typography.utils.ts
+var defaultTypographyType = "bodySans02";
+var getElementType = (element3) => {
+  switch (element3) {
+    case "a":
+      return "a";
+    case "headingSans01":
+      return "h6";
+    case "headingSans02":
+      return "h5";
+    case "headingSans03":
+      return "h4";
+    case "headingSans04":
+      return "h3";
+    case "headingSans05":
+      return "h2";
+    case "headingSans06":
+    case "headingSans07":
+    case "headingSans08":
+      return "h1";
+    case "supportingStyleLabel01":
+      return "label";
+    case "bodySans01":
+    case "bodySans02":
+    case "bodySans03":
+    case "bodySans04":
+    case "leadSans01":
+    case "leadSans02":
+    case "leadSans03":
+    case "leadSans04":
+    case "leadSans05":
+    case "supportingStyleHelperText01":
+    case "supportingStylePlaceholderText01":
+    case "supportingStylePlaceholderText02":
+    case "supportingStylePlaceholderText03":
+    case "supportingStyleTiny01":
+    case "supportingStyleTiny02":
+    default:
+      return "p";
+  }
+};
+var isHeading = (type) => {
+  return true;
+};
+var inlineElements = [
+  "a",
+  "abbr",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "big",
+  "br",
+  "button",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "datalist",
+  "del",
+  "dfn",
+  "em",
+  "embed",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "meter",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "progress",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "select",
+  "slot",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "template",
+  "textarea",
+  "time",
+  "u",
+  "var",
+  "video",
+  "wbr"
+];
+var isInlineElement = (as) => inlineElements.indexOf(as) !== -1;
 
 // src/components/Typography/Typography.tokens.tsx
-var import_dds_design_tokens7 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors3, fontPackages, spacing: spacing3 } = import_dds_design_tokens7.ddsBaseTokens;
-var { textDefault } = import_dds_design_tokens7.ddsReferenceTokens;
+var import_dds_design_tokens2 = require("@norges-domstoler/dds-design-tokens");
+var { colors: colors2, fontPackages, spacing: spacing2 } = import_dds_design_tokens2.ddsBaseTokens;
+var { textDefault } = import_dds_design_tokens2.ddsReferenceTokens;
 var a = {
   base: {
-    color: colors3.DdsColorInteractiveBase
+    color: colors2.DdsColorInteractiveBase
   },
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.body_sans_02.paragraph.paragraphSpacing
   },
   hover: {
-    color: colors3.DdsColorInteractiveDark
+    color: colors2.DdsColorInteractiveDark
   },
   icon: {
-    marginTop: spacing3.SizesDdsSpacingX025,
-    marginLeft: spacing3.SizesDdsSpacingX025
+    marginTop: spacing2.SizesDdsSpacingX025,
+    marginLeft: spacing2.SizesDdsSpacingX025
   }
 };
 var bold = {
@@ -616,7 +647,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -627,7 +658,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -638,7 +669,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -649,7 +680,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -660,7 +691,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -671,7 +702,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -682,7 +713,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -693,7 +724,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing3.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing2.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -788,7 +819,7 @@ var leadSans05 = {
 };
 var supportingStyleLabel01 = {
   base: {
-    color: colors3.DdsColorNeutralsGray7,
+    color: colors2.DdsColorNeutralsGray7,
     font: fontPackages.supportingStyle_label_01.base,
     margin: 0
   },
@@ -799,7 +830,7 @@ var supportingStyleLabel01 = {
 };
 var supportingStyleHelperText01 = {
   base: {
-    color: colors3.DdsColorNeutralsGray6,
+    color: colors2.DdsColorNeutralsGray6,
     font: fontPackages.supportingStyle_helpertext_01.base,
     margin: 0
   },
@@ -810,7 +841,7 @@ var supportingStyleHelperText01 = {
 };
 var supportingStylePlaceholderText01 = {
   base: {
-    color: colors3.DdsColorNeutralsGray6,
+    color: colors2.DdsColorNeutralsGray6,
     font: fontPackages.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
@@ -821,7 +852,7 @@ var supportingStylePlaceholderText01 = {
 };
 var supportingStylePlaceholderText02 = {
   base: {
-    color: colors3.DdsColorNeutralsGray6,
+    color: colors2.DdsColorNeutralsGray6,
     font: fontPackages.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
@@ -832,7 +863,7 @@ var supportingStylePlaceholderText02 = {
 };
 var supportingStylePlaceholderText03 = {
   base: {
-    color: colors3.DdsColorNeutralsGray6,
+    color: colors2.DdsColorNeutralsGray6,
     font: fontPackages.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
@@ -897,127 +928,17 @@ var typographyTokens = {
 };
 
 // src/components/Typography/Typography/Typography.styles.ts
-var import_styled_components5 = require("styled-components");
-
-// src/components/Typography/Typography/openExternal.svg
-var openExternal_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M19 19H5V5H12V3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z" fill="%230B0D0E"/>%0A</svg>%0A';
-
-// src/components/Typography/Typography/Typography.styles.ts
-var import_dds_design_tokens8 = require("@norges-domstoler/dds-design-tokens");
-
-// src/components/Typography/Typography/Typography.utils.ts
-var defaultTypographyType = "bodySans02";
-var getElementType = (element3) => {
-  switch (element3) {
-    case "a":
-      return "a";
-    case "headingSans01":
-      return "h6";
-    case "headingSans02":
-      return "h5";
-    case "headingSans03":
-      return "h4";
-    case "headingSans04":
-      return "h3";
-    case "headingSans05":
-      return "h2";
-    case "headingSans06":
-    case "headingSans07":
-    case "headingSans08":
-      return "h1";
-    case "supportingStyleLabel01":
-      return "label";
-    case "bodySans01":
-    case "bodySans02":
-    case "bodySans03":
-    case "bodySans04":
-    case "leadSans01":
-    case "leadSans02":
-    case "leadSans03":
-    case "leadSans04":
-    case "leadSans05":
-    case "supportingStyleHelperText01":
-    case "supportingStylePlaceholderText01":
-    case "supportingStylePlaceholderText02":
-    case "supportingStylePlaceholderText03":
-    case "supportingStyleTiny01":
-    case "supportingStyleTiny02":
-    default:
-      return "p";
-  }
-};
-var isHeading = (type) => {
-  return true;
-};
-var inlineElements = [
-  "a",
-  "abbr",
-  "audio",
-  "b",
-  "bdi",
-  "bdo",
-  "big",
-  "br",
-  "button",
-  "canvas",
-  "cite",
-  "code",
-  "data",
-  "datalist",
-  "del",
-  "dfn",
-  "em",
-  "embed",
-  "i",
-  "iframe",
-  "img",
-  "input",
-  "ins",
-  "kbd",
-  "label",
-  "map",
-  "mark",
-  "meter",
-  "noscript",
-  "object",
-  "output",
-  "picture",
-  "progress",
-  "q",
-  "ruby",
-  "s",
-  "samp",
-  "script",
-  "select",
-  "slot",
-  "small",
-  "span",
-  "strong",
-  "sub",
-  "sup",
-  "svg",
-  "template",
-  "textarea",
-  "time",
-  "u",
-  "var",
-  "video",
-  "wbr"
-];
-var isInlineElement = (as) => inlineElements.indexOf(as) !== -1;
-
-// src/components/Typography/Typography/Typography.styles.ts
-var { border: border3, colors: colors4 } = import_dds_design_tokens8.ddsBaseTokens;
+var { border: border2, colors: colors3 } = import_dds_design_tokens3.ddsBaseTokens;
 var focusVisibleLink = {
   outline: "none",
-  backgroundColor: border3.BordersDdsBorderFocusBaseStroke,
-  color: colors4.DdsColorNeutralsWhite,
+  backgroundColor: border2.BordersDdsBorderFocusBaseStroke,
+  color: colors3.DdsColorNeutralsWhite,
   textDecoration: "none"
 };
 var focusVisibleLinkOnDark = {
   outline: "none",
-  backgroundColor: border3.BordersDdsBorderFocusOndarkStroke,
-  color: colors4.DdsColorNeutralsGray9,
+  backgroundColor: border2.BordersDdsBorderFocusOndarkStroke,
+  color: colors3.DdsColorNeutralsGray9,
   textDecoration: "none"
 };
 var focusVisibleLinkTransitionValue = "background-color 0.2s, text-decoration 0.2s, color 0.2s";
@@ -1028,35 +949,35 @@ var getFontStyling = (type, withColor) => {
   };
 };
 var getAdditionalFontStyle = (bold2, italic, underline) => {
-  return import_styled_components5.css`
-    ${bold2 && import_styled_components5.css`
+  return import_styled_components4.css`
+    ${bold2 && import_styled_components4.css`
       font-weight: ${typographyTokens.style.bold.fontWeight};
     `}
-    ${italic && import_styled_components5.css`
+    ${italic && import_styled_components4.css`
       font-style: italic;
     `}
-  ${underline && import_styled_components5.css`
+  ${underline && import_styled_components4.css`
       text-decoration: underline;
     `}
   `;
 };
-var getMarginStyling = (typographyType7, element3, withMargins) => withMargins ? import_styled_components5.css`
-        ${isInlineElement(element3) && element3 !== "a" && import_styled_components5.css`
+var getMarginStyling = (typographyType7, element3, withMargins) => withMargins ? import_styled_components4.css`
+        ${isInlineElement(element3) && element3 !== "a" && import_styled_components4.css`
           display: block;
         `}
         margin-top: ${typographyTokens.typographyType[typographyType7].margins.marginTop};
         margin-bottom: ${typographyTokens.typographyType[typographyType7].margins.marginBottom};
-        ${isHeading(typographyType7) && import_styled_components5.css`
+        ${isHeading(typographyType7) && import_styled_components4.css`
           padding-top: ${typographyTokens.typographyType[typographyType7].margins.paddingTop};
         `}
-      ` : import_styled_components5.css`
+      ` : import_styled_components4.css`
         margin: 0;
       `;
-var getAnchorStyling = (external, interactionStyling, typographyType7, withMargins) => import_styled_components5.css`
-  ${typographyType7 ? import_styled_components5.css`
+var getAnchorStyling = (external, interactionStyling, typographyType7, withMargins) => import_styled_components4.css`
+  ${typographyType7 ? import_styled_components4.css`
         ${typographyTokens.typographyType[typographyType7].base.font};
         ${getMarginStyling(typographyType7, "a", withMargins)}
-      ` : import_styled_components5.css`
+      ` : import_styled_components4.css`
         font: inherit;
         ${getMarginStyling("a", "a", withMargins)}
       `}
@@ -1066,7 +987,7 @@ var getAnchorStyling = (external, interactionStyling, typographyType7, withMargi
   @media (prefers-reduced-motion: no-preference) {
     transition: ${focusVisibleLinkTransitionValue};
   }
-  ${external && import_styled_components5.css`
+  ${external && import_styled_components4.css`
     padding-right: calc(1em + ${typographyTokens.typographyType.a.icon.marginLeft});
     position: relative;
     &::after {
@@ -1083,11 +1004,11 @@ var getAnchorStyling = (external, interactionStyling, typographyType7, withMargi
   `}
   &:hover {
     color: ${typographyTokens.typographyType.a.hover.color};
-    ${(interactionStyling == null ? void 0 : interactionStyling.hover) && import_styled_components5.css`
+    ${(interactionStyling == null ? void 0 : interactionStyling.hover) && import_styled_components4.css`
       ${interactionStyling.hover}
     `}
   }
-  ${(interactionStyling == null ? void 0 : interactionStyling.active) && import_styled_components5.css`
+  ${(interactionStyling == null ? void 0 : interactionStyling.active) && import_styled_components4.css`
     &:active {
       ${interactionStyling.active}
     }
@@ -1097,50 +1018,10 @@ var getAnchorStyling = (external, interactionStyling, typographyType7, withMargi
   }
 `;
 
-// src/utils/dom.ts
-function cn(...classNames) {
-  return classNames.filter(Boolean).join(" ");
-}
-
-// src/types/BaseComponentProps.ts
-var getBaseHTMLProps = (id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unknownPropsOrUndefined) => {
-  if (typeof htmlPropsOrClassName === "string" || unknownPropsOrUndefined != void 0) {
-    const {
-      id: idFromHtmlProps,
-      className: classNameFromHtmlProps,
-      ...restHTMLProps
-    } = htmlPropsOrUnknownProps != null ? htmlPropsOrUnknownProps : {};
-    const propId = id != null ? id : idFromHtmlProps;
-    const propClassName = cn(
-      htmlPropsOrClassName,
-      classNameFromHtmlProps
-    );
-    return {
-      ...unknownPropsOrUndefined,
-      ...restHTMLProps,
-      ...propClassName && { className: propClassName },
-      ...propId && { id: propId }
-    };
-  } else {
-    const {
-      id: htmlPropsId,
-      className: htmlPropsClassName,
-      ...restHTMLProps
-    } = htmlPropsOrClassName != null ? htmlPropsOrClassName : {};
-    const propId = id != null ? id : htmlPropsId;
-    return {
-      ...htmlPropsOrUnknownProps,
-      ...restHTMLProps,
-      ...htmlPropsClassName && { className: htmlPropsClassName },
-      ...propId && { id: propId }
-    };
-  }
-};
-
 // src/utils/color.tsx
-var import_dds_design_tokens9 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors5 } = import_dds_design_tokens9.ddsBaseTokens;
-var { textDefault: textDefault2 } = import_dds_design_tokens9.ddsReferenceTokens;
+var import_dds_design_tokens4 = require("@norges-domstoler/dds-design-tokens");
+var { colors: colors4 } = import_dds_design_tokens4.ddsBaseTokens;
+var { textDefault: textDefault2 } = import_dds_design_tokens4.ddsReferenceTokens;
 var changeRGBAAlpha = (value, alpha) => {
   if (!value.startsWith("rgba(") || !value.endsWith(")")) {
     return "";
@@ -1148,22 +1029,22 @@ var changeRGBAAlpha = (value, alpha) => {
   return value.replace(/[\d.]+\)$/g, alpha.toString() + ")");
 };
 var textColors = {
-  interactive: colors5.DdsColorInteractiveBase,
-  primary: colors5.DdsColorPrimaryBase,
-  danger: colors5.DdsColorDangerBase,
-  success: colors5.DdsColorSuccessBase,
-  warning: colors5.DdsColorWarningBase,
+  interactive: colors4.DdsColorInteractiveBase,
+  primary: colors4.DdsColorPrimaryBase,
+  danger: colors4.DdsColorDangerBase,
+  success: colors4.DdsColorSuccessBase,
+  warning: colors4.DdsColorWarningBase,
   onLight: textDefault2.textColor,
-  onDark: colors5.DdsColorNeutralsWhite,
-  gray1: colors5.DdsColorNeutralsGray1,
-  gray2: colors5.DdsColorNeutralsGray2,
-  gray3: colors5.DdsColorNeutralsGray3,
-  gray4: colors5.DdsColorNeutralsGray4,
-  gray5: colors5.DdsColorNeutralsGray5,
-  gray6: colors5.DdsColorNeutralsGray6,
-  gray7: colors5.DdsColorNeutralsGray7,
-  gray8: colors5.DdsColorNeutralsGray8,
-  gray9: colors5.DdsColorNeutralsGray9
+  onDark: colors4.DdsColorNeutralsWhite,
+  gray1: colors4.DdsColorNeutralsGray1,
+  gray2: colors4.DdsColorNeutralsGray2,
+  gray3: colors4.DdsColorNeutralsGray3,
+  gray4: colors4.DdsColorNeutralsGray4,
+  gray5: colors4.DdsColorNeutralsGray5,
+  gray6: colors4.DdsColorNeutralsGray6,
+  gray7: colors4.DdsColorNeutralsGray7,
+  gray8: colors4.DdsColorNeutralsGray8,
+  gray9: colors4.DdsColorNeutralsGray9
 };
 var textColorsArray = [
   "interactive",
@@ -1228,47 +1109,45 @@ var spaceSeparatedIdListGenerator = (values) => {
 };
 
 // src/components/InputMessage/InputMessage.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_react = require("react");
+var import_styled_components6 = __toESM(require("styled-components"));
 
 // src/components/InputMessage/InputMessage.tokens.tsx
-var import_dds_design_tokens10 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors6, spacing: spacing4 } = import_dds_design_tokens10.ddsBaseTokens;
+var import_dds_design_tokens5 = require("@norges-domstoler/dds-design-tokens");
+var { colors: colors5, spacing: spacing3 } = import_dds_design_tokens5.ddsBaseTokens;
 var message = {
   tip: {
-    backgroundColor: colors6.DdsColorNeutralsWhite
+    backgroundColor: colors5.DdsColorNeutralsWhite
   },
   error: {
-    padding: `${spacing4.SizesDdsSpacingX025} ${spacing4.SizesDdsSpacingX05}`,
-    color: colors6.DdsColorDangerBase,
-    backgroundColor: colors6.DdsColorDangerLightest,
-    gap: spacing4.SizesDdsSpacingX05
+    padding: `${spacing3.SizesDdsSpacingX025} ${spacing3.SizesDdsSpacingX05}`,
+    color: colors5.DdsColorDangerBase,
+    backgroundColor: colors5.DdsColorDangerLightest,
+    gap: spacing3.SizesDdsSpacingX05
   }
 };
 var icon = {
-  marginTop: spacing4.SizesDdsSpacingX0125
+  marginTop: spacing3.SizesDdsSpacingX0125
 };
 var inputMessageTokens = {
   message,
   icon
 };
 
-// src/components/InputMessage/InputMessage.tsx
-var import_react = require("react");
-
 // src/components/Icon/Icon.tsx
-var import_dds_design_tokens11 = require("@norges-domstoler/dds-design-tokens");
+var import_dds_design_tokens6 = require("@norges-domstoler/dds-design-tokens");
 var getSize = (iconSize) => {
   switch (iconSize) {
     case "small":
-      return import_dds_design_tokens11.ddsBaseTokens.iconSizes.DdsIconsizeSmall;
+      return import_dds_design_tokens6.ddsBaseTokens.iconSizes.DdsIconsizeSmall;
     case "medium":
-      return import_dds_design_tokens11.ddsBaseTokens.iconSizes.DdsIconsizeMedium;
+      return import_dds_design_tokens6.ddsBaseTokens.iconSizes.DdsIconsizeMedium;
     case "large":
-      return import_dds_design_tokens11.ddsBaseTokens.iconSizes.DdsIconsizeLarge;
+      return import_dds_design_tokens6.ddsBaseTokens.iconSizes.DdsIconsizeLarge;
     case "inherit":
       return "1em";
     default:
-      return import_dds_design_tokens11.ddsBaseTokens.iconSizes.DdsIconsizeMedium;
+      return import_dds_design_tokens6.ddsBaseTokens.iconSizes.DdsIconsizeMedium;
   }
 };
 function Icon(props) {
@@ -1295,10 +1174,10 @@ function Icon(props) {
 Icon.displayName = "Icon";
 
 // src/components/Icon/utils/StyledSvg.ts
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 var size = 24;
 var sizePx = `${size}px`;
-var StyledSvg = import_styled_components6.default.svg.attrs(
+var StyledSvg = import_styled_components5.default.svg.attrs(
   ({ height, width, fill }) => {
     return {
       height: height ? height : sizePx,
@@ -2493,14 +2372,14 @@ function LibraryAddIcon(props) {
 
 // src/components/InputMessage/InputMessage.tsx
 var import_jsx_runtime157 = require("react/jsx-runtime");
-var InputMessageWrapper = import_styled_components7.default.div.withConfig({
+var InputMessageWrapper = import_styled_components6.default.div.withConfig({
   shouldForwardProp: (prop) => prop !== "messageType"
 })`
   display: flex;
   width: fit-content;
   word-break: break-word;
   max-width: 100%;
-  ${({ messageType }) => messageType === "error" ? import_styled_components7.css`
+  ${({ messageType }) => messageType === "error" ? import_styled_components6.css`
           color: ${inputMessageTokens.message.error.color};
           background-color: ${inputMessageTokens.message.error.backgroundColor};
           padding: ${inputMessageTokens.message.error.padding};
@@ -2568,7 +2447,7 @@ var calculateHeightWithLineHeight = (lineHeight, fontSize) => {
 
 // src/components/Typography/Typography/Typography.tsx
 var import_jsx_runtime159 = require("react/jsx-runtime");
-var StyledTypography = import_styled_components8.default.p.withConfig({
+var StyledTypography = import_styled_components7.default.p.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
       "externalLink",
@@ -2590,19 +2469,19 @@ var StyledTypography = import_styled_components8.default.p.withConfig({
     ${selection}
   }
 
-  ${({ typographyType: typographyType7, externalLink, interactionProps }) => typographyType7 === "a" ? import_styled_components8.css`
+  ${({ typographyType: typographyType7, externalLink, interactionProps }) => typographyType7 === "a" ? import_styled_components7.css`
           ${getAnchorStyling(externalLink, interactionProps)}
-        ` : import_styled_components8.css`
+        ` : import_styled_components7.css`
           color: ${typographyTokens.typographyType[typographyType7].base.color};
           ${typographyTokens.typographyType[typographyType7].base.font};
         `}
 
-  ${({ interactionProps }) => (interactionProps == null ? void 0 : interactionProps.hover) && import_styled_components8.css`
+  ${({ interactionProps }) => (interactionProps == null ? void 0 : interactionProps.hover) && import_styled_components7.css`
       &:hover {
         ${interactionProps.hover}
       }
     `}
-      ${({ interactionProps }) => (interactionProps == null ? void 0 : interactionProps.active) && import_styled_components8.css`
+      ${({ interactionProps }) => (interactionProps == null ? void 0 : interactionProps.active) && import_styled_components7.css`
       &:active {
         ${interactionProps.active}
       }
@@ -2759,9 +2638,9 @@ Legend.displayName = "Legend";
 
 // src/components/Typography/Link/Link.tsx
 var import_react7 = require("react");
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime164 = require("react/jsx-runtime");
-var StyledLink = import_styled_components9.default.a`
+var StyledLink = import_styled_components8.default.a`
   ${({ $external, $typographyType, $withMargins }) => getAnchorStyling($external, void 0, $typographyType, $withMargins)}
 `;
 var Link = (0, import_react7.forwardRef)((props, ref) => {
@@ -2814,89 +2693,209 @@ var Paragraph = (0, import_react8.forwardRef)(
 );
 Paragraph.displayName = "Paragraph";
 
-// src/components/helpers/Input/Input.styles.tsx
-var { input: input2, container: container2 } = inputTokens;
-var Input = import_styled_components10.default.input`
-  position: relative;
-  color: ${input2.base.color};
-  border-radius: ${input2.base.borderRadius};
-  border: ${input2.base.border};
-  border-color: ${input2.base.borderColor};
-  background-color: ${input2.base.backgroundColor};
-  padding: ${input2.base.padding};
-  width: 100%;
-  margin: 0;
-  box-sizing: border-box;
-  box-shadow: none;
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      box-shadow 0.2s,
-      border-color 0.2s,
-      background-color 0.2s;
-  }
-  &[type='text'],
-  &[type='password'],
-  &[type='number'],
-  &[type='tel'],
-  &[type='date'],
-  &[type='url'],
-  &[type='email'],
-  &[type='search'],
-  &[type='datetime-local'] {
-    -webkit-appearance: none;
-  }
-  &::selection {
-    ${selection}
-  }
-
-  &:not(.disabled):not(.read-only):not(.active):hover,
-  &:hover:enabled:read-write {
-    ${hoverInputfield}
-  }
-  &:not(.disabled):not(.read-only):focus-within,
-  &.active,
-  &:focus:enabled:read-write,
-  &:active:enabled:read-write {
-    ${focusInputfield}
-  }
-`;
-var StatefulInput = (0, import_styled_components10.default)(Input).withConfig({
-  shouldForwardProp: (prop) => {
-    const stylingProps = [
-      "componentSize",
-      "hasErrorMessage",
-      "prefixLength",
-      "suffixLength"
-    ];
-    return !stylingProps.some((styleProp) => styleProp === prop);
-  }
-})`
-  -webkit-appearance: textfield;
+// src/components/helpers/styling/danger.tsx
+var import_dds_design_tokens7 = require("@norges-domstoler/dds-design-tokens");
+var { colors: Colors } = import_dds_design_tokens7.ddsBaseTokens;
+var dangerInputfield = {
+  borderColor: Colors.DdsColorDangerBase,
+  boxShadow: `0 0 0 1px ${Colors.DdsColorDangerBase}`
+};
 
-  padding-left: ${({ prefixLength, readOnly }) => prefixLength && (readOnly ? `${prefixLength}px !important` : `calc(${input2.affix.gap}px + ${prefixLength}px) !important`)};
-  padding-right: ${({ suffixLength, readOnly }) => suffixLength && (readOnly ? `${suffixLength}px !important` : `calc(${input2.affix.gap}px + ${suffixLength}px) !important`)};
-  ${({ componentSize }) => componentSize && import_styled_components10.css`
-      padding: ${input2.sizes[componentSize].padding};
-      ${getFontStyling(inputTypographyTypes[componentSize])}
-    `}
+// src/components/helpers/styling/focus.tsx
+var import_dds_design_tokens8 = require("@norges-domstoler/dds-design-tokens");
+var { border: border3 } = import_dds_design_tokens8.ddsBaseTokens;
+var focusInputfield = {
+  outline: "none",
+  borderColor: border3.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: `0 0 0 2px ${border3.BordersDdsBorderFocusInputfieldStroke}`
+};
+var focusDangerInputfield = {
+  borderColor: border3.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: `0 0 0 2px ${border3.BordersDdsBorderFocusInputfieldStroke}`
+};
 
-  ${({ hasErrorMessage }) => hasErrorMessage && import_styled_components10.css`
-      ${dangerInputfield}
-      &:not(.disabled):hover,
-      &:hover:enabled:read-write {
-        ${hoverDangerInputfield}
-      }
-      &:not(.disabled):focus-within,
-      &:focus-within:enabled:read-write,
-      &:active:enabled:read-write {
-        ${focusDangerInputfield}
-      }
-    `}
-  &:not(.disabled).read-only,
-  &:enabled:read-only {
-    border: none;
-    outline: none;
-    cursor: default;
+// src/components/helpers/styling/focusVisible.tsx
+var import_dds_design_tokens9 = require("@norges-domstoler/dds-design-tokens");
+var { border: Border, spacing: spacing4 } = import_dds_design_tokens9.ddsBaseTokens;
+var outlineOffset = spacing4.SizesDdsSpacingX0125;
+var focusVisible = {
+  outline: `${Border.BordersDdsBorderFocusBaseStrokeWeight} ${Border.BordersDdsBorderFocusBaseStroke} solid`,
+  outlineOffset
+};
+var focusVisibleOnDark = {
+  outline: `${Border.BordersDdsBorderFocusOndarkStrokeWeight} ${Border.BordersDdsBorderFocusOndarkStroke} solid`,
+  outlineOffset
+};
+var focusVisibleTransitionValue = "outline-offset 0.2s";
+var focusVisibleWithBorder = {
+  outline: "none",
+  borderColor: Border.BordersDdsBorderFocusCardStroke,
+  boxShadow: `inset 0 0 0 1px ${Border.BordersDdsBorderFocusCardStroke}`
+};
+var focusVisibleThickWithBorderOnDark = {
+  outline: "none",
+  borderColor: Border.BordersDdsBorderFocusOndarkStroke,
+  boxShadow: `inset 0 0 0 1px ${Border.BordersDdsBorderFocusOndarkStroke}`
+};
+var focusVisibleInset = {
+  outline: "none",
+  boxShadow: `inset 0 0 0 2px ${Border.BordersDdsBorderFocusCardStroke}`
+};
+
+// src/components/helpers/styling/hideInput.tsx
+var hideInput = {
+  clip: "rect(0 0 0 0)",
+  position: "absolute",
+  height: "1px",
+  width: "1px",
+  margin: 0
+};
+
+// src/components/helpers/styling/hover.tsx
+var import_dds_design_tokens10 = require("@norges-domstoler/dds-design-tokens");
+var { border: Border2, colors: Colors2 } = import_dds_design_tokens10.ddsBaseTokens;
+var hoverWithBorder = {
+  borderColor: Border2.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: `inset 0 0 0 1px ${Border2.BordersDdsBorderFocusInputfieldStroke}`
+};
+var hoverInputfield = {
+  borderColor: Border2.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: `0 0 0 1px ${Border2.BordersDdsBorderFocusInputfieldStroke}`
+};
+var hoverDangerInputfield = {
+  borderColor: Colors2.DdsColorDangerBase,
+  boxShadow: `0 0 0 1px ${Colors2.DdsColorDangerBase}`
+};
+
+// src/components/helpers/styling/normalize.tsx
+var normalizeButton = {
+  margin: 0,
+  textTransform: "none"
+};
+
+// src/components/helpers/styling/removeButtonStyling.tsx
+var removeButtonStyling = {
+  background: "none",
+  color: "inherit",
+  border: "none",
+  padding: 0,
+  font: "inherit",
+  cursor: "pointer",
+  outline: "inherit"
+};
+
+// src/components/helpers/styling/removeListStyling.tsx
+var removeListStyling = {
+  listStyle: "none",
+  padding: 0,
+  margin: 0
+};
+
+// src/components/helpers/styling/selection.tsx
+var import_dds_design_tokens11 = require("@norges-domstoler/dds-design-tokens");
+var { colors: colors6 } = import_dds_design_tokens11.ddsBaseTokens;
+var selection = {
+  color: colors6.DdsColorNeutralsGray9,
+  backgroundColor: colors6.DdsColorTertiaryLightest
+};
+
+// src/components/helpers/styling/visibilityTransition.tsx
+var import_styled_components9 = require("styled-components");
+var visibilityTransition = (open) => {
+  return import_styled_components9.css`
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        visibility 0.4s,
+        opacity 0.2s;
+    }
+    visibility: ${open ? "visible" : "hidden"};
+    opacity: ${open ? 1 : 0};
+  `;
+};
+
+// src/components/helpers/Input/Input.styles.tsx
+var { input: input2, container: container2 } = inputTokens;
+var Input = import_styled_components10.default.input`
+  position: relative;
+  color: ${input2.base.color};
+  border-radius: ${input2.base.borderRadius};
+  border: ${input2.base.border};
+  border-color: ${input2.base.borderColor};
+  background-color: ${input2.base.backgroundColor};
+  padding: ${input2.base.padding};
+  width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  box-shadow: none;
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s,
+      background-color 0.2s;
+  }
+  &[type='text'],
+  &[type='password'],
+  &[type='number'],
+  &[type='tel'],
+  &[type='date'],
+  &[type='url'],
+  &[type='email'],
+  &[type='search'],
+  &[type='datetime-local'] {
+    -webkit-appearance: none;
+  }
+  &::selection {
+    ${selection}
+  }
+
+  &:not(.disabled):not(.read-only):not(.active):hover,
+  &:hover:enabled:read-write {
+    ${hoverInputfield}
+  }
+  &:not(.disabled):not(.read-only):focus-within,
+  &.active,
+  &:focus:enabled:read-write,
+  &:active:enabled:read-write {
+    ${focusInputfield}
+  }
+`;
+var StatefulInput = (0, import_styled_components10.default)(Input).withConfig({
+  shouldForwardProp: (prop) => {
+    const stylingProps = [
+      "componentSize",
+      "hasErrorMessage",
+      "prefixLength",
+      "suffixLength"
+    ];
+    return !stylingProps.some((styleProp) => styleProp === prop);
+  }
+})`
+  -webkit-appearance: textfield;
+
+  padding-left: ${({ prefixLength, readOnly }) => prefixLength && (readOnly ? `${prefixLength}px !important` : `calc(${input2.affix.gap}px + ${prefixLength}px) !important`)};
+  padding-right: ${({ suffixLength, readOnly }) => suffixLength && (readOnly ? `${suffixLength}px !important` : `calc(${input2.affix.gap}px + ${suffixLength}px) !important`)};
+  ${({ componentSize }) => componentSize && import_styled_components10.css`
+      padding: ${input2.sizes[componentSize].padding};
+      ${getFontStyling(inputTypographyTypes[componentSize])}
+    `}
+
+  ${({ hasErrorMessage }) => hasErrorMessage && import_styled_components10.css`
+      ${dangerInputfield}
+      &:not(.disabled):hover,
+      &:hover:enabled:read-write {
+        ${hoverDangerInputfield}
+      }
+      &:not(.disabled):focus-within,
+      &:focus-within:enabled:read-write,
+      &:active:enabled:read-write {
+        ${focusDangerInputfield}
+      }
+    `}
+  &:not(.disabled).read-only,
+  &:enabled:read-only {
+    border: none;
+    outline: none;
+    cursor: default;
     background-color: ${input2.readOnly.backgroundColor};
     padding-left: 0;
   }
@@ -2933,6 +2932,7 @@ function getDefaultText(value, defaultValue) {
 }
 
 // src/components/helpers/Paper/Paper.tsx
+var import_dds_design_tokens13 = require("@norges-domstoler/dds-design-tokens");
 var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/components/helpers/Paper/Paper.tokens.tsx
@@ -2948,7 +2948,6 @@ var paperTokens = {
 };
 
 // src/components/helpers/Paper/Paper.tsx
-var import_dds_design_tokens13 = require("@norges-domstoler/dds-design-tokens");
 var { outerShadow, border: border4 } = import_dds_design_tokens13.ddsBaseTokens;
 var getElevation = (elevation) => {
   switch (elevation) {
@@ -2989,8 +2988,8 @@ var Paper = import_styled_components11.default.div.withConfig({
 `;
 
 // src/components/helpers/RequiredMarker/RequiredMarker.tsx
-var import_styled_components12 = __toESM(require("styled-components"));
 var import_dds_design_tokens14 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var MarkerWrapper = import_styled_components12.default.span`
   color: ${import_dds_design_tokens14.ddsBaseTokens.colors.DdsColorDangerBase};
@@ -3273,16 +3272,16 @@ function useRoveFocus(size2, reset, direction = "column") {
 }
 
 // src/hooks/useScreenSize.tsx
-var import_react17 = require("react");
 var import_dds_design_tokens16 = require("@norges-domstoler/dds-design-tokens");
+var import_react17 = require("react");
 var { breakpoints } = import_dds_design_tokens16.ddsBaseTokens;
-var ScreenSize = /* @__PURE__ */ ((ScreenSize3) => {
-  ScreenSize3[ScreenSize3["XSmall"] = 0] = "XSmall";
-  ScreenSize3[ScreenSize3["Small"] = 1] = "Small";
-  ScreenSize3[ScreenSize3["Medium"] = 2] = "Medium";
-  ScreenSize3[ScreenSize3["Large"] = 3] = "Large";
-  ScreenSize3[ScreenSize3["XLarge"] = 4] = "XLarge";
-  return ScreenSize3;
+var ScreenSize = /* @__PURE__ */ ((ScreenSize2) => {
+  ScreenSize2[ScreenSize2["XSmall"] = 0] = "XSmall";
+  ScreenSize2[ScreenSize2["Small"] = 1] = "Small";
+  ScreenSize2[ScreenSize2["Medium"] = 2] = "Medium";
+  ScreenSize2[ScreenSize2["Large"] = 3] = "Large";
+  ScreenSize2[ScreenSize2["XLarge"] = 4] = "XLarge";
+  return ScreenSize2;
 })(ScreenSize || {});
 var screenSizesAndMediaQueries = [
   [
@@ -3341,6 +3340,7 @@ var getLiteralScreenSize = (screenSize) => {
 };
 
 // src/components/AppShell/AppShell.tsx
+var import_development_utils3 = require("@norges-domstoler/development-utils");
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/AppShell/AppShell.tokens.ts
@@ -3410,95 +3410,48 @@ var floatingActionButtons = {
 };
 var appShellTokens = { navigation, floatingActionButtons };
 
-// src/components/AppShell/Navigation/Navigation.tsx
-var import_react27 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
-
-// src/components/Divider/Divider.tsx
+// src/components/AppShell/AppShellContext.tsx
 var import_react18 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
-
-// src/components/Divider/Divider.tokens.tsx
-var import_dds_design_tokens18 = require("@norges-domstoler/dds-design-tokens");
-var { border: border5, spacing: spacing6 } = import_dds_design_tokens18.ddsBaseTokens;
-var divider = {
-  borderTop: `${border5.BordersDdsBorderStyleLightStrokeWeight} solid`,
-  marginTop: spacing6.SizesDdsSpacingX1,
-  marginBottom: spacing6.SizesDdsSpacingX1,
-  color: {
-    primary: {
-      borderColor: border5.BordersDdsBorderStyleDarkStroke
-    },
-    primaryLighter: {
-      borderColor: border5.BordersDdsBorderStyleLightStroke
-    }
-  }
-};
-var dividerTokens = {
-  ...divider
-};
-
-// src/components/Divider/Divider.tsx
 var import_jsx_runtime167 = require("react/jsx-runtime");
-var StyledDivider = import_styled_components13.default.hr`
-  border: 0;
-  background-color: transparent;
-  border-top: ${dividerTokens.borderTop};
-  margin-top: ${dividerTokens.marginTop};
-  margin-bottom: ${dividerTokens.marginBottom};
-  ${({ color }) => color && import_styled_components13.css`
-      border-color: ${dividerTokens.color[color].borderColor};
-    `}
-`;
-var Divider = (0, import_react18.forwardRef)((props, ref) => {
-  const { color = "primary", id, className, htmlProps, ...rest } = props;
-  const lineProps = {
-    ...getBaseHTMLProps(id, className, htmlProps, rest),
-    color
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(StyledDivider, { ref, ...lineProps });
-});
-Divider.displayName = "Divider";
-
-// src/components/AppShell/Navigation/NavigationItem.tsx
-var import_styled_components14 = __toESM(require("styled-components"));
-
-// src/components/AppShell/AppShellContext.tsx
-var import_react19 = require("react");
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var AppShellContext = (0, import_react19.createContext)({
+var AppShellContext = (0, import_react18.createContext)({
   isOpen: false,
   setOpen: () => null
 });
 var AppShellContextProvider = ({
   children
 }) => {
-  const [isOpen, setOpen] = (0, import_react19.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(AppShellContext.Provider, { value: { isOpen, setOpen }, children });
+  const [isOpen, setOpen] = (0, import_react18.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(AppShellContext.Provider, { value: { isOpen, setOpen }, children });
 };
 var useAppShellContext = () => {
-  return (0, import_react19.useContext)(AppShellContext);
+  return (0, import_react18.useContext)(AppShellContext);
 };
 
+// src/components/AppShell/Navigation/Navigation.tsx
+var import_development_utils2 = require("@norges-domstoler/development-utils");
+var import_react27 = require("react");
+var import_styled_components23 = __toESM(require("styled-components"));
+
 // src/components/AppShell/Navigation/NavigationItem.tsx
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime168 = require("react/jsx-runtime");
 var { navigation: navTokens } = appShellTokens;
 var navItemTokens = navTokens.navigationItems.item;
-var IconContainer = import_styled_components14.default.div`
+var IconContainer = import_styled_components13.default.div`
   grid-area: icon;
   display: flex;
   align-items: center;
 `;
-var TextContainer = import_styled_components14.default.span`
+var TextContainer = import_styled_components13.default.span`
   grid-area: text;
 `;
-var ChevronContainer = import_styled_components14.default.div`
+var ChevronContainer = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   opacity: 0;
   grid-area: chevron;
 `;
-var BaseLink = import_styled_components14.default.a`
+var BaseLink = import_styled_components13.default.a`
   padding: ${navItemTokens.padding};
   gap: ${navItemTokens.gap};
   border-radius: ${navItemTokens.borderRadius};
@@ -3521,7 +3474,7 @@ var BaseLink = import_styled_components14.default.a`
     background-color: ${navItemTokens.active.backgroundColor};
   }
 `;
-var InternalNavItem = (0, import_styled_components14.default)(BaseLink)`
+var InternalNavItem = (0, import_styled_components13.default)(BaseLink)`
   display: grid;
   align-items: center;
   grid-template-areas: 'icon text chevron';
@@ -3531,7 +3484,7 @@ var InternalNavItem = (0, import_styled_components14.default)(BaseLink)`
     opacity: 1;
   }
 `;
-var ExternalNavItem = (0, import_styled_components14.default)(BaseLink)`
+var ExternalNavItem = (0, import_styled_components13.default)(BaseLink)`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3559,12 +3512,12 @@ var NavigationItem = ({
     setOpen(false);
   };
   if (external) {
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(ExternalNavItem, { as: Comp, ...rest, onClick, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(ExternalNavItem, { as: Comp, ...rest, onClick, children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
+      /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
     InternalNavItem,
     {
       as: Comp,
@@ -3572,37 +3525,17 @@ var NavigationItem = ({
       onClick,
       className: [active ? "active" : "", rest.className].join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(IconContainer, { children: icon12 && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon, { icon: icon12 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(TextContainer, { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(ChevronContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon, { icon: ChevronRightIcon }) })
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(IconContainer, { children: icon12 && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Icon, { icon: icon12 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(TextContainer, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(ChevronContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Icon, { icon: ChevronRightIcon }) })
       ]
     }
   );
 };
 NavigationItem.displayName = "AppShell.NavItem";
 
-// src/components/AppShell/Navigation/TopBar.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_development_utils = require("@norges-domstoler/development-utils");
-
-// src/components/AppShell/Navigation/EmbeteIcon.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var EmbeteIcon = ({ type, ...rest }) => {
-  switch (type) {
-    case "jordskifterett":
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(JordskifterettIcon, { ...rest });
-    case "tingrett":
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(TingrettIcon, { ...rest });
-    case "lagmannsrett":
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(LagmannsrettIcon, { ...rest });
-    case "h\xF8yesterett":
-    case void 0:
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(PersonIcon, { ...rest });
-  }
-};
-
 // src/components/AppShell/Navigation/NavigationLogo.tsx
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var { navigation: navTokens2 } = appShellTokens;
 var fontPackage = (small) => {
   if (small) {
@@ -3610,7 +3543,7 @@ var fontPackage = (small) => {
   }
   return navTokens2.logoAndVersion.logo;
 };
-var NavigationLogo = import_styled_components15.default.a.withConfig({
+var NavigationLogo = import_styled_components14.default.a.withConfig({
   shouldForwardProp: (prop) => prop !== "small"
 })`
   font-size: ${({ small }) => fontPackage(small).fontSize};
@@ -3622,12 +3555,35 @@ var NavigationLogo = import_styled_components15.default.a.withConfig({
   text-align: middle;
 `;
 
-// src/components/Button/Button.tsx
-var import_react21 = require("react");
+// src/components/AppShell/Navigation/TopBar.tsx
+var import_development_utils = require("@norges-domstoler/development-utils");
+var import_styled_components22 = __toESM(require("styled-components"));
+
+// src/components/AppShell/Navigation/EmbeteIcon.tsx
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var EmbeteIcon = ({ type, ...rest }) => {
+  switch (type) {
+    case "jordskifterett":
+      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(JordskifterettIcon, { ...rest });
+    case "tingrett":
+      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(TingrettIcon, { ...rest });
+    case "lagmannsrett":
+      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(LagmannsrettIcon, { ...rest });
+    case "h\xF8yesterett":
+    case void 0:
+      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(PersonIcon, { ...rest });
+  }
+};
+
+// src/components/Button/Button.tsx
+var import_react20 = require("react");
+
+// src/components/Button/Button.styles.tsx
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/components/Button/Button.tokens.tsx
-var import_dds_design_tokens19 = require("@norges-domstoler/dds-design-tokens");
-var { colors: colors9, border: border6, spacing: spacing7, fontPackages: fontPackages3, borderRadius: borderRadius3, outerShadow: outerShadow2 } = import_dds_design_tokens19.ddsBaseTokens;
+var import_dds_design_tokens18 = require("@norges-domstoler/dds-design-tokens");
+var { colors: colors9, border: border5, spacing: spacing6, fontPackages: fontPackages3, borderRadius: borderRadius3, outerShadow: outerShadow2 } = import_dds_design_tokens18.ddsBaseTokens;
 var typographyTypes = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -3650,7 +3606,7 @@ var iconSizeLargePx = calculateHeightWithLineHeight(
   fontPackages3.body_sans_04.numbers.lineHeightNumber,
   fontPackages3.body_sans_04.numbers.fontSizeNumber
 );
-var svgOffset = spacing7.SizesDdsSpacingX0125NumberPx;
+var svgOffset = spacing6.SizesDdsSpacingX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
@@ -3715,7 +3671,7 @@ var sizes = {
     justIcon: {
       icon: {
         fontSize: `${iconSizeLargePx + svgOffset}px`,
-        padding: spacing7.SizesDdsSpacingX1
+        padding: spacing6.SizesDdsSpacingX1
       },
       wrapper: {
         height: `${iconSizeLargePx}px`,
@@ -3723,15 +3679,15 @@ var sizes = {
       }
     },
     text: {
-      padding: `${spacing7.SizesDdsSpacingX1} ${spacing7.SizesDdsSpacingX2NumberPx - 2}px`
+      padding: `${spacing6.SizesDdsSpacingX1} ${spacing6.SizesDdsSpacingX2NumberPx - 2}px`
     },
-    textAndIcon: { gap: spacing7.SizesDdsSpacingX1 }
+    textAndIcon: { gap: spacing6.SizesDdsSpacingX1 }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: `${iconSizeMediumPx + svgOffset}px`,
-        padding: spacing7.SizesDdsSpacingX075
+        padding: spacing6.SizesDdsSpacingX075
       },
       wrapper: {
         height: `${iconSizeMediumPx}px`,
@@ -3739,15 +3695,15 @@ var sizes = {
       }
     },
     text: {
-      padding: `${spacing7.SizesDdsSpacingX075} ${spacing7.SizesDdsSpacingX15NumberPx - 2}px`
+      padding: `${spacing6.SizesDdsSpacingX075} ${spacing6.SizesDdsSpacingX15NumberPx - 2}px`
     },
-    textAndIcon: { gap: spacing7.SizesDdsSpacingX075 }
+    textAndIcon: { gap: spacing6.SizesDdsSpacingX075 }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: `${iconSizeSmallPx + svgOffset}px`,
-        padding: spacing7.SizesDdsSpacingX05
+        padding: spacing6.SizesDdsSpacingX05
       },
       wrapper: {
         height: `${iconSizeSmallPx}px`,
@@ -3755,15 +3711,15 @@ var sizes = {
       }
     },
     text: {
-      padding: `${spacing7.SizesDdsSpacingX05} ${spacing7.SizesDdsSpacingX1NumberPx - 2}px`
+      padding: `${spacing6.SizesDdsSpacingX05} ${spacing6.SizesDdsSpacingX1NumberPx - 2}px`
     },
-    textAndIcon: { gap: spacing7.SizesDdsSpacingX05 }
+    textAndIcon: { gap: spacing6.SizesDdsSpacingX05 }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: `${iconSizeTinyPx + svgOffset}px`,
-        padding: spacing7.SizesDdsSpacingX025
+        padding: spacing6.SizesDdsSpacingX025
       },
       wrapper: {
         height: `${iconSizeTinyPx}px`,
@@ -3771,9 +3727,9 @@ var sizes = {
       }
     },
     text: {
-      padding: `${spacing7.SizesDdsSpacingX025} ${spacing7.SizesDdsSpacingX075}`
+      padding: `${spacing6.SizesDdsSpacingX025} ${spacing6.SizesDdsSpacingX075}`
     },
-    textAndIcon: { gap: spacing7.SizesDdsSpacingX05 }
+    textAndIcon: { gap: spacing6.SizesDdsSpacingX05 }
   }
 };
 var appearances = {
@@ -3957,7 +3913,7 @@ var appearances = {
 };
 var button = {
   base: {
-    border: `${border6.BordersDdsBorderStyleLightStrokeWeight} solid`
+    border: `${border5.BordersDdsBorderStyleLightStrokeWeight} solid`
   },
   sizes,
   appearances
@@ -3966,102 +3922,7 @@ var buttonTokens = {
   button
 };
 
-// src/components/Spinner/Spinner.tsx
-var import_react20 = __toESM(require("react"));
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_dds_design_tokens20 = require("@norges-domstoler/dds-design-tokens");
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var StyledSpinner = import_styled_components16.default.svg`
-  display: block;
-  width: ${({ $size }) => $size};
-  height: ${({ $size }) => $size};
-  stroke-dasharray: 90, 150;
-  animation: rotate 1.5s linear infinite;
-  animation-delay: ${({ $outerAnimationDelay }) => $outerAnimationDelay}ms;
-
-  @media (prefers-reduced-motion: no-preference) {
-    animation: rotate 2s linear infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-var Circle = import_styled_components16.default.circle`
-  stroke: ${({ $color }) => $color && getTextColor($color)};
-  stroke-linecap: round;
-
-  @media (prefers-reduced-motion: no-preference) {
-    animation: dash 1.5s ease-in-out infinite;
-    animation-delay: ${({ $innerAnimationDelay }) => $innerAnimationDelay}ms;
-
-    @keyframes dash {
-      0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-      }
-    }
-  }
-`;
-function Spinner(props) {
-  const {
-    size: size2 = import_dds_design_tokens20.ddsBaseTokens.iconSizes.DdsIconsizeMedium,
-    color = "interactive",
-    tooltip = "Innlasting p\xE5g\xE5r",
-    id,
-    className,
-    htmlProps,
-    ...rest
-  } = props;
-  const mountTime = import_react20.default.useRef(Date.now());
-  const outerAnimationDelay = -(mountTime.current % 2e3);
-  const innerAnimationDelay = -(mountTime.current % 1500);
-  const generatedId = (0, import_react20.useId)();
-  const uniqueId = `${generatedId}-spinnerTitle`;
-  const spinnerProps = {
-    ...getBaseHTMLProps(id, className, htmlProps, rest),
-    $outerAnimationDelay: outerAnimationDelay,
-    $size: size2
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
-    StyledSpinner,
-    {
-      viewBox: "0 0 50 50",
-      role: "img",
-      "aria-labelledby": uniqueId,
-      ...spinnerProps,
-      children: [
-        tooltip && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("title", { id: uniqueId, children: tooltip }),
-        /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
-          Circle,
-          {
-            $innerAnimationDelay: innerAnimationDelay,
-            $color: color,
-            cx: "25",
-            cy: "25",
-            r: "20",
-            fill: "none",
-            strokeWidth: "4"
-          }
-        )
-      ]
-    }
-  );
-}
-Spinner.displayName = "Spinner";
-
 // src/components/Button/Button.styles.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
 var {
   button: { base, sizes: sizes2, appearances: appearances2 }
 } = buttonTokens;
@@ -4069,7 +3930,7 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
   switch (appearance) {
     case "filled":
     case "rounded":
-      return import_styled_components17.css`
+      return import_styled_components15.css`
         background-color: ${appearances2[appearance].purpose[purpose].base.backgroundColor};
         border-color: ${appearances2[appearance].purpose[purpose].base.borderColor};
         &:hover {
@@ -4082,7 +3943,7 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
         }
       `;
     case "ghost":
-      return import_styled_components17.css`
+      return import_styled_components15.css`
         background-color: ${appearances2.ghost.base.backgroundColor};
         border-color: ${appearances2.ghost.purpose[purpose].base.borderColor};
         &:hover {
@@ -4097,7 +3958,7 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
         }
       `;
     case "borderless":
-      return import_styled_components17.css`
+      return import_styled_components15.css`
         background-color: ${appearances2.borderless.base.backgroundColor};
         border-color: ${appearances2.borderless.base.borderColor};
         text-decoration: ${appearances2.borderless.base.textDecoration};
@@ -4113,7 +3974,7 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       `;
   }
 };
-var ButtonWrapper = import_styled_components17.default.button.withConfig({
+var ButtonWrapper = import_styled_components15.default.button.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
       "appearance",
@@ -4150,14 +4011,14 @@ var ButtonWrapper = import_styled_components17.default.button.withConfig({
       ${focusVisibleTransitionValue};
   }
 
-  ${({ appearance, purpose }) => import_styled_components17.css`
+  ${({ appearance, purpose }) => import_styled_components15.css`
     border-radius: ${appearances2[appearance].base.borderRadius};
     box-shadow: ${appearances2[appearance].base.boxShadow};
     color: ${appearances2[appearance].purpose[purpose].base.color};
     ${getAppearanceAndPurposeStyling(appearance, purpose)}
   `}
 
-  ${({ hasIcon, hasLabel, appearance, purpose }) => hasIcon && !hasLabel && appearance === "borderless" && import_styled_components17.css`
+  ${({ hasIcon, hasLabel, appearance, purpose }) => hasIcon && !hasLabel && appearance === "borderless" && import_styled_components15.css`
       &:hover {
         border-color: ${appearances2[appearance].purpose[purpose].icon.hover.borderColor};
         box-shadow: ${appearances2[appearance].purpose[purpose].icon.hover.boxShadow};
@@ -4167,23 +4028,23 @@ var ButtonWrapper = import_styled_components17.default.button.withConfig({
         box-shadow: ${appearances2[appearance].purpose[purpose].icon.active.boxShadow};
       }
     `}
-    ${({ hasIcon, hasLabel, size: size2 }) => hasIcon && hasLabel && import_styled_components17.css`
+    ${({ hasIcon, hasLabel, size: size2 }) => hasIcon && hasLabel && import_styled_components15.css`
       gap: ${sizes2[size2].textAndIcon.gap};
     `}
 
-  ${({ size: size2, hasLabel }) => hasLabel ? import_styled_components17.css`
+  ${({ size: size2, hasLabel }) => hasLabel ? import_styled_components15.css`
           ${getFontStyling(typographyTypes[size2])}
           padding: ${sizes2[size2].text.padding};
-        ` : import_styled_components17.css`
+        ` : import_styled_components15.css`
           font-size: ${sizes2[size2].justIcon.icon.fontSize};
           padding: ${sizes2[size2].justIcon.icon.padding};
         `}
 
-  ${({ fullWidth, hasIcon, hasLabel, isLoading, iconPosition }) => fullWidth && (!hasIcon || !hasLabel || isLoading ? import_styled_components17.css`
+  ${({ fullWidth, hasIcon, hasLabel, isLoading, iconPosition }) => fullWidth && (!hasIcon || !hasLabel || isLoading ? import_styled_components15.css`
           justify-content: center;
-        ` : hasIcon && hasLabel && iconPosition === "left" ? import_styled_components17.css`
+        ` : hasIcon && hasLabel && iconPosition === "left" ? import_styled_components15.css`
             justify-content: left;
-          ` : import_styled_components17.css`
+          ` : import_styled_components15.css`
             justify-content: space-between;
           `)}
 
@@ -4195,7 +4056,7 @@ var ButtonWrapper = import_styled_components17.default.button.withConfig({
     ${selection}
   }
 `;
-var StyledIconWrapperSpan = import_styled_components17.default.span.withConfig({
+var StyledIconWrapperSpan = import_styled_components15.default.span.withConfig({
   shouldForwardProp: (prop) => {
     const styleOnlyProps = [
       "iconPosition",
@@ -4210,31 +4071,125 @@ var StyledIconWrapperSpan = import_styled_components17.default.span.withConfig({
   display: flex;
   align-items: center;
   justify-content: center;
-  ${({ absolutePosition }) => absolutePosition && import_styled_components17.css`
+  ${({ absolutePosition }) => absolutePosition && import_styled_components15.css`
       position: absolute;
     `}
-  ${({ isHidden }) => isHidden && import_styled_components17.css`
+  ${({ isHidden }) => isHidden && import_styled_components15.css`
       visibility: hidden;
     `}
-  ${({ justIcon, size: size2 }) => justIcon && import_styled_components17.css`
+  ${({ justIcon, size: size2 }) => justIcon && import_styled_components15.css`
       height: ${sizes2[size2].justIcon.wrapper.height};
       width: ${sizes2[size2].justIcon.wrapper.width};
     `}
 `;
-var Label2 = import_styled_components17.default.span.withConfig({
+var Label2 = import_styled_components15.default.span.withConfig({
   shouldForwardProp: (prop) => prop !== "isHidden"
 })`
-  ${({ isHidden }) => isHidden && import_styled_components17.css`
+  ${({ isHidden }) => isHidden && import_styled_components15.css`
       visibility: hidden;
     `}
 `;
 
+// src/components/Spinner/Spinner.tsx
+var import_dds_design_tokens19 = require("@norges-domstoler/dds-design-tokens");
+var import_react19 = require("react");
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var StyledSpinner = import_styled_components16.default.svg`
+  display: block;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  stroke-dasharray: 90, 150;
+  animation: rotate 1.5s linear infinite;
+  animation-delay: ${({ $outerAnimationDelay }) => $outerAnimationDelay}ms;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: rotate 2s linear infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var Circle = import_styled_components16.default.circle`
+  stroke: ${({ $color }) => $color && getTextColor($color)};
+  stroke-linecap: round;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: dash 1.5s ease-in-out infinite;
+    animation-delay: ${({ $innerAnimationDelay }) => $innerAnimationDelay}ms;
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  }
+`;
+function Spinner(props) {
+  const {
+    size: size2 = import_dds_design_tokens19.ddsBaseTokens.iconSizes.DdsIconsizeMedium,
+    color = "interactive",
+    tooltip = "Innlasting p\xE5g\xE5r",
+    id,
+    className,
+    htmlProps,
+    ...rest
+  } = props;
+  const mountTime = (0, import_react19.useRef)(Date.now());
+  const outerAnimationDelay = -(mountTime.current % 2e3);
+  const innerAnimationDelay = -(mountTime.current % 1500);
+  const generatedId = (0, import_react19.useId)();
+  const uniqueId = `${generatedId}-spinnerTitle`;
+  const spinnerProps = {
+    ...getBaseHTMLProps(id, className, htmlProps, rest),
+    $outerAnimationDelay: outerAnimationDelay,
+    $size: size2
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
+    StyledSpinner,
+    {
+      viewBox: "0 0 50 50",
+      role: "img",
+      "aria-labelledby": uniqueId,
+      ...spinnerProps,
+      children: [
+        tooltip && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("title", { id: uniqueId, children: tooltip }),
+        /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+          Circle,
+          {
+            $innerAnimationDelay: innerAnimationDelay,
+            $color: color,
+            cx: "25",
+            cy: "25",
+            r: "20",
+            fill: "none",
+            strokeWidth: "4"
+          }
+        )
+      ]
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+
 // src/components/Button/Button.tsx
-var import_jsx_runtime172 = require("react/jsx-runtime");
+var import_jsx_runtime171 = require("react/jsx-runtime");
 var {
   button: { sizes: sizes3, appearances: appearances3 }
 } = buttonTokens;
-var Button = (0, import_react21.forwardRef)(
+var Button = (0, import_react20.forwardRef)(
   (props, ref) => {
     const {
       label: label3,
@@ -4284,28 +4239,28 @@ var Button = (0, import_react21.forwardRef)(
       onBlur
     };
     const isIconButton = !hasLabel && hasIcon;
-    const iconElement = icon12 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+    const iconElement = icon12 && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       StyledIconWrapperSpan,
       {
         size: size2,
         isHidden: hasIcon && loading,
         justIcon: isIconButton,
-        children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { icon: icon12, iconSize: "inherit" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon, { icon: icon12, iconSize: "inherit" })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(ButtonWrapper, { ...wrapperProps, "aria-disabled": loading, children: [
-      !isIconButton && /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(import_jsx_runtime172.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(ButtonWrapper, { ...wrapperProps, "aria-disabled": loading, children: [
+      !isIconButton && /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_jsx_runtime171.Fragment, { children: [
         iconPosition === "left" && iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Label2, { isHidden: loading, "aria-hidden": loading, children: children != null ? children : label3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Label2, { isHidden: loading, "aria-hidden": loading, children: children != null ? children : label3 }),
         iconPosition === "right" && iconElement
       ] }),
       isIconButton && iconElement,
-      loading && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+      loading && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         StyledIconWrapperSpan,
         {
           size: size2,
           absolutePosition: hasIcon || hasLabel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
             Spinner,
             {
               color: appearances3[appearance].purpose[purpose].base.color,
@@ -4324,64 +4279,289 @@ Button.displayName = "Button";
 var import_react25 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 
-// src/components/ScrollableContainer/Scrollbar.tsx
-var import_react22 = require("react");
-var import_styled_components18 = __toESM(require("styled-components"));
-
-// src/components/ScrollableContainer/ScrollableContainer.tokens.tsx
-var import_dds_design_tokens21 = require("@norges-domstoler/dds-design-tokens");
-var scrollbarWidthNumberPx = 10;
-var scrollbarWidth = `${scrollbarWidthNumberPx}px`;
-var { colors: colors10, spacing: spacing8 } = import_dds_design_tokens21.ddsBaseTokens;
-var track = {
-  backgroundColor: "transparent",
-  borderRadius: "100px",
-  width: scrollbarWidth
-};
-var thumb = {
+// src/components/OverflowMenu/OverflowMenu.tokens.tsx
+var import_dds_design_tokens20 = require("@norges-domstoler/dds-design-tokens");
+var { border: border6, borderRadius: borderRadius4, colors: colors10, spacing: spacing7, fontPackages: fontPackages4 } = import_dds_design_tokens20.ddsBaseTokens;
+var typographyType = "bodySans01";
+var element = {
   base: {
-    backgroundColor: colors10.DdsColorPrimaryDarkest.slice(0, -2) + "0.35)",
-    borderRadius: "100px",
-    width: scrollbarWidth
+    color: colors10.DdsColorNeutralsGray9,
+    textDecoration: "none",
+    backgroundColor: colors10.DdsColorNeutralsWhite,
+    padding: `${spacing7.SizesDdsSpacingX075} ${spacing7.SizesDdsSpacingX1}`,
+    gap: spacing7.SizesDdsSpacingX025
+  }
+};
+var iconHeight = calculateHeightWithLineHeight(
+  fontPackages4.body_sans_01.numbers.lineHeightNumber,
+  fontPackages4.body_sans_01.numbers.fontSizeNumber
+);
+var link = {
+  iconWrapper: {
+    height: `${iconHeight}px`
   },
   hover: {
-    backgroundColor: colors10.DdsColorPrimaryDarkest.slice(0, -2) + "0.5)"
+    backgroundColor: colors10.DdsColorInteractiveLightest
+  },
+  active: {
+    backgroundColor: colors10.DdsColorInteractiveLightest
   }
 };
-var content = {
-  paddingRight: spacing8.SizesDdsSpacingX05
+var container3 = {
+  border: `${border6.BordersDdsBorderStyleLightStrokeWeight} ${border6.BordersDdsBorderStyleLightStroke} solid `,
+  backgroundColor: colors10.DdsColorNeutralsWhite,
+  borderRadius: borderRadius4.RadiiDdsBorderRadius1Radius
 };
-var outerContainer = {
-  padding: spacing8.SizesDdsSpacingX025
+var divider = {
+  marginRight: spacing7.SizesDdsSpacingX15,
+  marginLeft: spacing7.SizesDdsSpacingX15
 };
-var scrollbarTokens = {
-  minThumbHeightPx: 15,
-  track,
-  thumb,
-  content,
-  outerContainer
+var overflowMenuTokens = {
+  container: container3,
+  element,
+  link,
+  divider,
+  offset: spacing7.SizesDdsSpacingX0125NumberPx
 };
 
-// src/components/ScrollableContainer/Scrollbar.tsx
-var import_jsx_runtime173 = require("react/jsx-runtime");
-var { track: track2, thumb: thumb2, minThumbHeightPx } = scrollbarTokens;
-var ScrollbarOuterWrapper = import_styled_components18.default.div``;
-var ScrollbarElements = import_styled_components18.default.div`
-  display: block;
-  height: 100%;
-  position: relative;
-  display: grid;
-  justify-items: center;
-`;
-var Track = import_styled_components18.default.div`
-  bottom: 0;
-  top: 0;
-  position: absolute;
+// src/components/OverflowMenu/OverflowMenuItem.tsx
+var import_react21 = require("react");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var { element: element2, link: link2 } = overflowMenuTokens;
+var elementBaseCSS = import_styled_components17.css`
+  display: flex;
+  box-sizing: border-box;
+  color: ${element2.base.color};
+  text-decoration: ${element2.base.textDecoration};
+  background-color: ${element2.base.backgroundColor};
+  padding: ${element2.base.padding};
+  gap: ${element2.base.gap};
+  ${getFontStyling(typographyType)}
+`;
+var Span = import_styled_components17.default.span`
+  ${elementBaseCSS}
+`;
+var Link2 = import_styled_components17.default.a`
+  ${normalizeButton}
+  text-align: left;
+  user-select: text;
+  border: none;
+  cursor: pointer;
+  outline: inherit;
+  width: 100%;
+  ${elementBaseCSS}
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 0.2s;
+  }
+  &:hover {
+    background-color: ${link2.hover.backgroundColor};
+  }
+  &:active {
+    background-color: ${link2.active.backgroundColor};
+  }
+  &:focus-visible,
+  &.focus-visible {
+    ${focusVisibleLink}
+  }
+`;
+var IconWrapper = import_styled_components17.default.span`
+  display: flex;
+  align-items: center;
+  height: ${link2.iconWrapper.height};
+`;
+var isAnchorProps2 = (props) => props.href !== void 0;
+var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
+var OverflowMenuItem = (0, import_react21.forwardRef)((props, ref) => {
+  const {
+    title: title3,
+    icon: icon12,
+    focus,
+    setFocus,
+    index,
+    id,
+    className,
+    htmlProps = {},
+    ...rest
+  } = props;
+  const { onKeyDown } = htmlProps;
+  let href;
+  let onClick;
+  if (isAnchorProps2(props)) {
+    href = props.href;
+  } else if (isButtonProps(props)) {
+    onClick = props.onClick;
+  }
+  const itemRef = (0, import_react21.useRef)(null);
+  const combinedRef = useCombinedRef(ref, itemRef);
+  (0, import_react21.useEffect)(() => {
+    var _a;
+    if (focus) {
+      (_a = itemRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [focus]);
+  const handleSelect = (0, import_react21.useCallback)(() => {
+    if (setFocus && index) {
+      setFocus(index);
+    }
+  }, [index, setFocus]);
+  const handleOnClick = (e) => {
+    handleSelect();
+    onClick && onClick(e);
+  };
+  const handleOnKeyDown = (e) => {
+    handleSelect();
+    onKeyDown && onKeyDown(e);
+  };
+  const linkProps = {
+    href,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    role: "menuitem",
+    tabIndex: focus ? 0 : -1
+  };
+  const iconElement = icon12 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { iconSize: "inherit", icon: icon12 });
+  if (!href && !onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(Span, { ...{ ...getBaseHTMLProps(id, className, htmlProps, rest), ref }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(IconWrapper, { children: iconElement }),
+      title3
+    ] });
+  }
+  if (!href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
+      Link2,
+      {
+        ...getBaseHTMLProps(id, className, htmlProps, rest),
+        ...linkProps,
+        as: "button",
+        ref: combinedRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(IconWrapper, { children: iconElement }),
+          title3
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
+    Link2,
+    {
+      ...getBaseHTMLProps(id, className, htmlProps, rest),
+      ...linkProps,
+      as: "a",
+      ref: combinedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(IconWrapper, { children: iconElement }),
+        title3
+      ]
+    }
+  );
+});
+OverflowMenuItem.displayName = "OverflowMenuItem";
+
+// src/components/Divider/Divider.tsx
+var import_react22 = require("react");
+var import_styled_components18 = __toESM(require("styled-components"));
+
+// src/components/Divider/Divider.tokens.tsx
+var import_dds_design_tokens21 = require("@norges-domstoler/dds-design-tokens");
+var { border: border7, spacing: spacing8 } = import_dds_design_tokens21.ddsBaseTokens;
+var divider2 = {
+  borderTop: `${border7.BordersDdsBorderStyleLightStrokeWeight} solid`,
+  marginTop: spacing8.SizesDdsSpacingX1,
+  marginBottom: spacing8.SizesDdsSpacingX1,
+  color: {
+    primary: {
+      borderColor: border7.BordersDdsBorderStyleDarkStroke
+    },
+    primaryLighter: {
+      borderColor: border7.BordersDdsBorderStyleLightStroke
+    }
+  }
+};
+var dividerTokens = {
+  ...divider2
+};
+
+// src/components/Divider/Divider.tsx
+var import_jsx_runtime173 = require("react/jsx-runtime");
+var StyledDivider = import_styled_components18.default.hr`
+  border: 0;
+  background-color: transparent;
+  border-top: ${dividerTokens.borderTop};
+  margin-top: ${dividerTokens.marginTop};
+  margin-bottom: ${dividerTokens.marginBottom};
+  ${({ color }) => color && import_styled_components18.css`
+      border-color: ${dividerTokens.color[color].borderColor};
+    `}
+`;
+var Divider = (0, import_react22.forwardRef)((props, ref) => {
+  const { color = "primary", id, className, htmlProps, ...rest } = props;
+  const lineProps = {
+    ...getBaseHTMLProps(id, className, htmlProps, rest),
+    color
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(StyledDivider, { ref, ...lineProps });
+});
+Divider.displayName = "Divider";
+
+// src/components/ScrollableContainer/Scrollbar.tsx
+var import_react23 = require("react");
+var import_styled_components19 = __toESM(require("styled-components"));
+
+// src/components/ScrollableContainer/ScrollableContainer.tokens.tsx
+var import_dds_design_tokens22 = require("@norges-domstoler/dds-design-tokens");
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth = `${scrollbarWidthNumberPx}px`;
+var { colors: colors11, spacing: spacing9 } = import_dds_design_tokens22.ddsBaseTokens;
+var track = {
+  backgroundColor: "transparent",
+  borderRadius: "100px",
+  width: scrollbarWidth
+};
+var thumb = {
+  base: {
+    backgroundColor: colors11.DdsColorPrimaryDarkest.slice(0, -2) + "0.35)",
+    borderRadius: "100px",
+    width: scrollbarWidth
+  },
+  hover: {
+    backgroundColor: colors11.DdsColorPrimaryDarkest.slice(0, -2) + "0.5)"
+  }
+};
+var content = {
+  paddingRight: spacing9.SizesDdsSpacingX05
+};
+var outerContainer = {
+  padding: spacing9.SizesDdsSpacingX025
+};
+var scrollbarTokens = {
+  minThumbHeightPx: 15,
+  track,
+  thumb,
+  content,
+  outerContainer
+};
+
+// src/components/ScrollableContainer/Scrollbar.tsx
+var import_jsx_runtime174 = require("react/jsx-runtime");
+var { track: track2, thumb: thumb2, minThumbHeightPx } = scrollbarTokens;
+var ScrollbarOuterWrapper = import_styled_components19.default.div``;
+var ScrollbarElements = import_styled_components19.default.div`
+  display: block;
+  height: 100%;
+  position: relative;
+  display: grid;
+  justify-items: center;
+`;
+var Track = import_styled_components19.default.div`
+  bottom: 0;
+  top: 0;
+  position: absolute;
   background-color: ${track2.backgroundColor};
   border-radius: ${track2.borderRadius};
   width: ${track2.width};
 `;
-var Thumb = import_styled_components18.default.div`
+var Thumb = import_styled_components19.default.div`
   position: absolute;
   background-color: ${thumb2.base.backgroundColor};
   border-radius: ${thumb2.base.borderRadius};
@@ -4393,15 +4573,15 @@ var Thumb = import_styled_components18.default.div`
 `;
 var Scrollbar = (props) => {
   const { id, className, htmlProps, contentRef, ...rest } = props;
-  const trackRef = (0, import_react22.useRef)(null);
-  const thumbRef = (0, import_react22.useRef)(null);
-  const [thumbHeight, setThumbHeight] = (0, import_react22.useState)(minThumbHeightPx);
-  const [isScrollable, setIsScrollable] = (0, import_react22.useState)(true);
-  const [thumbTop, setThumbTop] = (0, import_react22.useState)(0);
-  const observer = (0, import_react22.useRef)(null);
-  const [scrollStartPosition, setScrollStartPosition] = (0, import_react22.useState)(0);
-  const [initialScrollTop, setInitialScrollTop] = (0, import_react22.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const trackRef = (0, import_react23.useRef)(null);
+  const thumbRef = (0, import_react23.useRef)(null);
+  const [thumbHeight, setThumbHeight] = (0, import_react23.useState)(minThumbHeightPx);
+  const [isScrollable, setIsScrollable] = (0, import_react23.useState)(true);
+  const [thumbTop, setThumbTop] = (0, import_react23.useState)(0);
+  const observer = (0, import_react23.useRef)(null);
+  const [scrollStartPosition, setScrollStartPosition] = (0, import_react23.useState)(0);
+  const [initialScrollTop, setInitialScrollTop] = (0, import_react23.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
   function handleResize(ref, trackSize) {
     const { clientHeight, scrollHeight } = ref;
     setIsScrollable(clientHeight !== scrollHeight);
@@ -4409,7 +4589,7 @@ var Scrollbar = (props) => {
       Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx)
     );
   }
-  const handleTrackClick = (0, import_react22.useCallback)(
+  const handleTrackClick = (0, import_react23.useCallback)(
     (e) => {
       if (contentRef == null ? void 0 : contentRef.current) {
         const { current: trackCurrent } = trackRef;
@@ -4433,7 +4613,7 @@ var Scrollbar = (props) => {
     },
     [thumbHeight]
   );
-  const handleThumbPositioning = (0, import_react22.useCallback)(() => {
+  const handleThumbPositioning = (0, import_react23.useCallback)(() => {
     if (!(contentRef == null ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
       return;
     }
@@ -4443,7 +4623,7 @@ var Scrollbar = (props) => {
     newTop = Math.min(newTop, clientHeight - thumbHeight);
     setThumbTop(newTop);
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if ((contentRef == null ? void 0 : contentRef.current) && trackRef.current) {
       const ref = contentRef.current;
       const { clientHeight } = trackRef.current;
@@ -4459,18 +4639,18 @@ var Scrollbar = (props) => {
       };
     }
   }, []);
-  const handleThumbMousedown = (0, import_react22.useCallback)((e) => {
+  const handleThumbMousedown = (0, import_react23.useCallback)((e) => {
     setScrollStartPosition(e.clientY);
     if (contentRef == null ? void 0 : contentRef.current)
       setInitialScrollTop(contentRef.current.scrollTop);
     setIsDragging(true);
   }, []);
-  const handleThumbMouseup = (0, import_react22.useCallback)(() => {
+  const handleThumbMouseup = (0, import_react23.useCallback)(() => {
     if (isDragging) {
       setIsDragging(false);
     }
   }, [isDragging]);
-  const handleThumbMousemove = (0, import_react22.useCallback)(
+  const handleThumbMousemove = (0, import_react23.useCallback)(
     (e) => {
       if (contentRef == null ? void 0 : contentRef.current) {
         if (isDragging) {
@@ -4489,7 +4669,7 @@ var Scrollbar = (props) => {
     },
     [isDragging, scrollStartPosition, thumbHeight]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     document.addEventListener("mousemove", handleThumbMousemove);
     document.addEventListener("mouseup", handleThumbMouseup);
     document.addEventListener("mouseleave", handleThumbMouseup);
@@ -4499,13 +4679,13 @@ var Scrollbar = (props) => {
       document.removeEventListener("mouseleave", handleThumbMouseup);
     };
   }, [handleThumbMousemove, handleThumbMouseup]);
-  return isScrollable ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+  return isScrollable ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
     ScrollbarOuterWrapper,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
-      children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(ScrollbarElements, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Track, { ref: trackRef, onClick: handleTrackClick }),
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(ScrollbarElements, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Track, { ref: trackRef, onClick: handleTrackClick }),
+        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
           Thumb,
           {
             style: {
@@ -4523,18 +4703,18 @@ var Scrollbar = (props) => {
 Scrollbar.displayName = "Scrollbar";
 
 // src/components/ScrollableContainer/ScrollableContainer.tsx
-var import_react23 = require("react");
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime174 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_jsx_runtime175 = require("react/jsx-runtime");
 var { track: track3, content: content2, outerContainer: outerContainer2 } = scrollbarTokens;
-var StyledScrollableContainer = import_styled_components19.default.div`
+var StyledScrollableContainer = import_styled_components20.default.div`
   grid-template: auto / 1fr ${track3.width};
   overflow: hidden;
   position: relative;
   display: grid;
   padding: ${outerContainer2.padding};
 `;
-var Content = import_styled_components19.default.div`
+var Content = import_styled_components20.default.div`
   height: ${({ $height }) => $height};
   overflow: auto;
   scrollbar-width: none;
@@ -4560,14 +4740,14 @@ var ScrollableContainer = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const ref = (0, import_react23.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+  const ref = (0, import_react24.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
     StyledScrollableContainer,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Content, { $height: contentHeight, ref, tabIndex: 0, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Scrollbar, { contentRef: ref })
+        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Content, { $height: contentHeight, ref, tabIndex: 0, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Scrollbar, { contentRef: ref })
       ]
     }
   );
@@ -4605,187 +4785,6 @@ var scrollbarStyling = {
   }
 };
 
-// src/components/OverflowMenu/OverflowMenuItem.tsx
-var import_react24 = require("react");
-var import_styled_components20 = __toESM(require("styled-components"));
-
-// src/components/OverflowMenu/OverflowMenu.tokens.tsx
-var import_dds_design_tokens22 = require("@norges-domstoler/dds-design-tokens");
-var { border: border7, borderRadius: borderRadius4, colors: colors11, spacing: spacing9, fontPackages: fontPackages4 } = import_dds_design_tokens22.ddsBaseTokens;
-var typographyType = "bodySans01";
-var element = {
-  base: {
-    color: colors11.DdsColorNeutralsGray9,
-    textDecoration: "none",
-    backgroundColor: colors11.DdsColorNeutralsWhite,
-    padding: `${spacing9.SizesDdsSpacingX075} ${spacing9.SizesDdsSpacingX1}`,
-    gap: spacing9.SizesDdsSpacingX025
-  }
-};
-var iconHeight = calculateHeightWithLineHeight(
-  fontPackages4.body_sans_01.numbers.lineHeightNumber,
-  fontPackages4.body_sans_01.numbers.fontSizeNumber
-);
-var link = {
-  iconWrapper: {
-    height: `${iconHeight}px`
-  },
-  hover: {
-    backgroundColor: colors11.DdsColorInteractiveLightest
-  },
-  active: {
-    backgroundColor: colors11.DdsColorInteractiveLightest
-  }
-};
-var container3 = {
-  border: `${border7.BordersDdsBorderStyleLightStrokeWeight} ${border7.BordersDdsBorderStyleLightStroke} solid `,
-  backgroundColor: colors11.DdsColorNeutralsWhite,
-  borderRadius: borderRadius4.RadiiDdsBorderRadius1Radius
-};
-var divider2 = {
-  marginRight: spacing9.SizesDdsSpacingX15,
-  marginLeft: spacing9.SizesDdsSpacingX15
-};
-var overflowMenuTokens = {
-  container: container3,
-  element,
-  link,
-  divider: divider2,
-  offset: spacing9.SizesDdsSpacingX0125NumberPx
-};
-
-// src/components/OverflowMenu/OverflowMenuItem.tsx
-var import_jsx_runtime175 = require("react/jsx-runtime");
-var { element: element2, link: link2 } = overflowMenuTokens;
-var elementBaseCSS = import_styled_components20.css`
-  display: flex;
-  box-sizing: border-box;
-  color: ${element2.base.color};
-  text-decoration: ${element2.base.textDecoration};
-  background-color: ${element2.base.backgroundColor};
-  padding: ${element2.base.padding};
-  gap: ${element2.base.gap};
-  ${getFontStyling(typographyType)}
-`;
-var Span = import_styled_components20.default.span`
-  ${elementBaseCSS}
-`;
-var Link2 = import_styled_components20.default.a`
-  ${normalizeButton}
-  text-align: left;
-  user-select: text;
-  border: none;
-  cursor: pointer;
-  outline: inherit;
-  width: 100%;
-  ${elementBaseCSS}
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s;
-  }
-  &:hover {
-    background-color: ${link2.hover.backgroundColor};
-  }
-  &:active {
-    background-color: ${link2.active.backgroundColor};
-  }
-  &:focus-visible,
-  &.focus-visible {
-    ${focusVisibleLink}
-  }
-`;
-var IconWrapper = import_styled_components20.default.span`
-  display: flex;
-  align-items: center;
-  height: ${link2.iconWrapper.height};
-`;
-var isAnchorProps2 = (props) => props.href !== void 0;
-var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
-var OverflowMenuItem = (0, import_react24.forwardRef)((props, ref) => {
-  const {
-    title: title3,
-    icon: icon12,
-    focus,
-    setFocus,
-    index,
-    id,
-    className,
-    htmlProps = {},
-    ...rest
-  } = props;
-  const { onKeyDown } = htmlProps;
-  let href;
-  let onClick;
-  if (isAnchorProps2(props)) {
-    href = props.href;
-  } else if (isButtonProps(props)) {
-    onClick = props.onClick;
-  }
-  const itemRef = (0, import_react24.useRef)(null);
-  const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react24.useEffect)(() => {
-    var _a;
-    if (focus) {
-      (_a = itemRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [focus]);
-  const handleSelect = (0, import_react24.useCallback)(() => {
-    if (setFocus && index) {
-      setFocus(index);
-    }
-  }, [index, setFocus]);
-  const handleOnClick = (e) => {
-    handleSelect();
-    onClick && onClick(e);
-  };
-  const handleOnKeyDown = (e) => {
-    handleSelect();
-    onKeyDown && onKeyDown(e);
-  };
-  const linkProps = {
-    href,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
-    role: "menuitem",
-    tabIndex: focus ? 0 : -1
-  };
-  const iconElement = icon12 && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Icon, { iconSize: "inherit", icon: icon12 });
-  if (!href && !onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(Span, { ...{ ...getBaseHTMLProps(id, className, htmlProps, rest), ref }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(IconWrapper, { children: iconElement }),
-      title3
-    ] });
-  }
-  if (!href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
-      Link2,
-      {
-        ...getBaseHTMLProps(id, className, htmlProps, rest),
-        ...linkProps,
-        as: "button",
-        ref: combinedRef,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(IconWrapper, { children: iconElement }),
-          title3
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
-    Link2,
-    {
-      ...getBaseHTMLProps(id, className, htmlProps, rest),
-      ...linkProps,
-      as: "a",
-      ref: combinedRef,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(IconWrapper, { children: iconElement }),
-        title3
-      ]
-    }
-  );
-});
-OverflowMenuItem.displayName = "OverflowMenuItem";
-
 // src/components/OverflowMenu/OverflowMenu.tsx
 var import_jsx_runtime176 = require("react/jsx-runtime");
 var { container: container4, divider: divider3 } = overflowMenuTokens;
@@ -5100,7 +5099,6 @@ var TopBar = ({
 };
 
 // src/components/AppShell/Navigation/Navigation.tsx
-var import_development_utils2 = require("@norges-domstoler/development-utils");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 var { navigation: navTokens4 } = appShellTokens;
 var Sidebar = import_styled_components23.default.div.withConfig({
@@ -5240,7 +5238,6 @@ var Navigation = ({
 };
 
 // src/components/AppShell/AppShell.tsx
-var import_development_utils3 = require("@norges-domstoler/development-utils");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 var AppShellContainer = import_styled_components24.default.div`
   display: flex;
@@ -5300,8 +5297,8 @@ AppShell2.NavItem = NavigationItem;
 var import_react29 = require("react");
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-var import_react28 = __toESM(require("react"));
-var RadioButtonGroupContext = import_react28.default.createContext(null);
+var import_react28 = require("react");
+var RadioButtonGroupContext = (0, import_react28.createContext)(null);
 var useRadioButtonGroup = () => {
   return (0, import_react28.useContext)(RadioButtonGroupContext);
 };
@@ -5743,15 +5740,15 @@ var RadioButtonGroupInner = (props, ref) => {
     }
   );
 };
-var RadioButtonGroup2 = (0, import_react30.forwardRef)(RadioButtonGroupInner);
-RadioButtonGroup2.displayName = "RadioButtonGroup";
+var RadioButtonGroup = (0, import_react30.forwardRef)(RadioButtonGroupInner);
+RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
 var import_react32 = require("react");
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-var import_react31 = __toESM(require("react"));
-var CheckboxGroupContext = import_react31.default.createContext(null);
+var import_react31 = require("react");
+var CheckboxGroupContext = (0, import_react31.createContext)(null);
 var useCheckboxGroup = () => {
   return (0, import_react31.useContext)(CheckboxGroupContext);
 };
@@ -5897,6 +5894,38 @@ CheckboxGroup.displayName = "CheckboxGroup";
 var import_react35 = require("react");
 var import_styled_components28 = __toESM(require("styled-components"));
 
+// src/components/TextInput/CharCounter.tsx
+var import_react34 = require("react");
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime185 = require("react/jsx-runtime");
+var Wrapper = (0, import_styled_components26.default)(Typography)`
+  margin-left: auto;
+`;
+function CharCounter(props) {
+  const { current, max, id, className, htmlProps, ...rest } = props;
+  const generatedId = (0, import_react34.useId)();
+  const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+    Wrapper,
+    {
+      ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
+      forwardedAs: "div",
+      typographyType: "supportingStyleHelperText01",
+      "aria-label": `${current} av ${max} tegn skrevet`,
+      children: [
+        current,
+        "/",
+        max
+      ]
+    }
+  );
+}
+var CharCounter_default = CharCounter;
+
+// src/components/TextInput/TextInput.styles.tsx
+var import_dds_design_tokens25 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components27 = __toESM(require("styled-components"));
+
 // src/components/TextInput/TextInput.tokens.tsx
 var import_dds_design_tokens24 = require("@norges-domstoler/dds-design-tokens");
 var { colors: colors13, spacing: spacing11, iconSizes } = import_dds_design_tokens24.ddsBaseTokens;
@@ -5941,37 +5970,7 @@ var textInputTokens = {
   affix
 };
 
-// src/components/TextInput/CharCounter.tsx
-var import_react34 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime185 = require("react/jsx-runtime");
-var Wrapper = (0, import_styled_components26.default)(Typography)`
-  margin-left: auto;
-`;
-function CharCounter(props) {
-  const { current, max, id, className, htmlProps, ...rest } = props;
-  const generatedId = (0, import_react34.useId)();
-  const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
-    Wrapper,
-    {
-      ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
-      forwardedAs: "div",
-      typographyType: "supportingStyleHelperText01",
-      "aria-label": `${current} av ${max} tegn skrevet`,
-      children: [
-        current,
-        "/",
-        max
-      ]
-    }
-  );
-}
-var CharCounter_default = CharCounter;
-
 // src/components/TextInput/TextInput.styles.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_dds_design_tokens25 = require("@norges-domstoler/dds-design-tokens");
 var { iconSizes: iconSizes2 } = import_dds_design_tokens25.ddsBaseTokens;
 var { input: input4, icon: icon3 } = textInputTokens;
 var MessageContainer = import_styled_components27.default.div`
@@ -6200,7 +6199,7 @@ var TextInput2 = (0, import_react35.forwardRef)(
 TextInput2.displayName = "TextInput";
 
 // src/components/Select/Select.tsx
-var import_react36 = __toESM(require("react"));
+var import_react36 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
 
 // src/components/Select/Select.styles.ts
@@ -6749,15 +6748,15 @@ function SelectInner(props, ref) {
     renderInputMessage(tip, tipId, errorMessage, errorMessageId)
   ] });
 }
-var Select = import_react36.default.forwardRef(SelectInner);
+var Select = (0, import_react36.forwardRef)(SelectInner);
 Select.displayName = "Select";
 
 // src/components/Select/utils.ts
 var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
 var import_react37 = require("react");
+var import_styled_components30 = __toESM(require("styled-components"));
 
 // src/components/GlobalMessage/GlobalMessage.tokens.tsx
 var import_dds_design_tokens27 = require("@norges-domstoler/dds-design-tokens");
@@ -6903,8 +6902,8 @@ var GlobalMessage = (0, import_react37.forwardRef)(
 GlobalMessage.displayName = "GlobalMessage";
 
 // src/components/LocalMessage/LocalMessage.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
 var import_react38 = require("react");
+var import_styled_components31 = __toESM(require("styled-components"));
 
 // src/components/LocalMessage/LocalMessage.tokens.tsx
 var import_dds_design_tokens28 = require("@norges-domstoler/dds-design-tokens");
@@ -7121,31 +7120,6 @@ LocalMessage.displayName = "LocalMessage";
 var import_react41 = require("react");
 var import_styled_components34 = __toESM(require("styled-components"));
 
-// src/components/VisuallyHidden/VisuallyHidden.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime191 = require("react/jsx-runtime");
-var Wrapper2 = import_styled_components32.default.span`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0px;
-  padding: 0px;
-  top: 0px;
-  inset-inline-start: 0px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  border: 0px;
-`;
-var VisuallyHidden = (props) => {
-  const { children, id, className, htmlProps, as, ...rest } = props;
-  if (as === "div") {
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Wrapper2, { ...getBaseHTMLProps(id, className, htmlProps, rest), as, children });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Wrapper2, { ...getBaseHTMLProps(id, className, htmlProps, rest), children });
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
 // src/components/Search/AutocompleteSearch.context.tsx
 var import_react39 = require("react");
 var AutocompleteSearchContext = (0, import_react39.createContext)({});
@@ -7260,11 +7234,11 @@ function createEmptyChangeEvent(inputElementId) {
 }
 
 // src/components/Search/SearchSuggestions.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
 var import_react40 = require("react");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_jsx_runtime191 = require("react/jsx-runtime");
 var { suggestionsContainer: suggestionsContainer2, suggestionsHeader: suggestionsHeader2 } = searchTokens;
-var SuggestionsContainer = (0, import_styled_components33.default)(Paper)`
+var SuggestionsContainer = (0, import_styled_components32.default)(Paper)`
   ${({ $isHidden }) => visibilityTransition(!$isHidden)};
   position: absolute;
   top: 100%;
@@ -7278,13 +7252,13 @@ var SuggestionsContainer = (0, import_styled_components33.default)(Paper)`
   ${scrollbarStyling.firefox}
   ${scrollbarStyling.webkit}
 `;
-var MenuItem = (0, import_styled_components33.default)(OverflowMenuItem)`
+var MenuItem = (0, import_styled_components32.default)(OverflowMenuItem)`
   ${({ $size }) => $size && getFontStyling(typographyTypes3[$size])}
 `;
-var SuggestionsList = import_styled_components33.default.ul`
+var SuggestionsList = import_styled_components32.default.ul`
   ${removeListStyling}
 `;
-var SuggestionsHeader = (0, import_styled_components33.default)(Typography)`
+var SuggestionsHeader = (0, import_styled_components32.default)(Typography)`
   padding-left: ${suggestionsHeader2.paddingLeft};
 `;
 var SearchSuggestions = (0, import_react40.forwardRef)((props, ref) => {
@@ -7306,8 +7280,8 @@ var SearchSuggestions = (0, import_react40.forwardRef)((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__ */ (0, import_jsx_runtime192.jsx)(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+  const renderedSuggestions = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
       MenuItem,
       {
         index,
@@ -7323,7 +7297,7 @@ var SearchSuggestions = (0, import_react40.forwardRef)((props, ref) => {
     ) }, index);
   }) });
   const isHidden = !showSuggestions;
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
     SuggestionsContainer,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -7331,7 +7305,7 @@ var SearchSuggestions = (0, import_react40.forwardRef)((props, ref) => {
       $isHidden: isHidden,
       "aria-hidden": isHidden,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
           SuggestionsHeader,
           {
             typographyType: "supportingStyleTiny01",
@@ -7347,6 +7321,31 @@ var SearchSuggestions = (0, import_react40.forwardRef)((props, ref) => {
 });
 SearchSuggestions.displayName = "SearchSuggestions";
 
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime192 = require("react/jsx-runtime");
+var Wrapper2 = import_styled_components33.default.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0px;
+  padding: 0px;
+  top: 0px;
+  inset-inline-start: 0px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  border: 0px;
+`;
+var VisuallyHidden = (props) => {
+  const { children, id, className, htmlProps, as, ...rest } = props;
+  if (as === "div") {
+    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Wrapper2, { ...getBaseHTMLProps(id, className, htmlProps, rest), as, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Wrapper2, { ...getBaseHTMLProps(id, className, htmlProps, rest), children });
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
 // src/components/Search/Search.tsx
 var import_jsx_runtime193 = require("react/jsx-runtime");
 var { input: input6, outerContainer: outerContainer4, horisontalContainer: horisontalContainer2, searchIcon: searchIcon2, clearButton: clearButton2 } = searchTokens;
@@ -7626,9 +7625,41 @@ var Search2 = Search;
 Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search2.Suggestions = SearchSuggestions;
 
-// src/components/Table/Table.tsx
+// src/components/Table/Body.tsx
 var import_react43 = require("react");
 var import_styled_components35 = __toESM(require("styled-components"));
+var import_jsx_runtime195 = require("react/jsx-runtime");
+var StyledBody = import_styled_components35.default.tbody``;
+var Body = (0, import_react43.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    const bodyProps = {
+      ...rest
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(StyledBody, { ref, ...bodyProps, children });
+  }
+);
+Body.displayName = "Table.Body";
+
+// src/components/Table/Cell.tsx
+var import_react49 = require("react");
+var import_styled_components41 = __toESM(require("styled-components"));
+
+// src/components/Table/Head.tsx
+var import_react44 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var StyledHead = import_styled_components36.default.thead``;
+var Head = (0, import_react44.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StyledHead, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(HeadContext.Provider, { value: true, children }) });
+  }
+);
+Head.displayName = "Table.Head";
+var HeadContext = (0, import_react44.createContext)(false);
+function useIsInTableHead() {
+  const isInTableHead = (0, import_react44.useContext)(HeadContext);
+  return isInTableHead;
+}
 
 // src/components/Table/Table.tokens.tsx
 var import_dds_design_tokens30 = require("@norges-domstoler/dds-design-tokens");
@@ -7702,235 +7733,9 @@ var tableTokens = {
   collapseButton
 };
 
-// src/components/Table/Table.tsx
-var import_jsx_runtime195 = require("react/jsx-runtime");
-var { cell: cell2, row: row2 } = tableTokens;
-var StyledTable = import_styled_components35.default.table`
-  border-spacing: 0;
-  border-collapse: collapse;
-  *::selection {
-    ${selection}
-  }
-  ${scrollbarStyling.webkit}
-  ${scrollbarStyling.firefox}
-  ${({ $density }) => import_styled_components35.css`
-    td,
-    th {
-      padding: ${cell2.density[$density].padding};
-    }
-  `}
-  ${({ $density }) => $density === "extraCompact" && import_styled_components35.css`
-      th {
-        background-color: ${row2.head.extraCompact.backgroundColor};
-        font-size: ${row2.head.extraCompact.fontSize};
-      }
-      tr[type='body'] {
-        &:nth-of-type(even) {
-          background-color: ${row2.body.odd.backgroundColor};
-        }
-        &:nth-of-type(odd) {
-          background-color: ${row2.body.even.backgroundColor};
-        }
-      }
-    `}
-  ${({ $stickyHeader }) => $stickyHeader && import_styled_components35.css`
-      tr[type='head'] {
-        th[type='head'] {
-          position: sticky;
-          top: 0;
-          z-index: 50;
-        }
-      }
-    `}
-  ${({ $withDividers }) => $withDividers && import_styled_components35.css`
-      tr[type='body'] {
-        border-bottom: ${row2.body.withDividers.borderBottom};
-      }
-    `}
-`;
-var Table = (0, import_react43.forwardRef)(
-  ({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
-      StyledTable,
-      {
-        ...rest,
-        ref,
-        $density: density,
-        $stickyHeader: stickyHeader,
-        $withDividers: withDividers,
-        children
-      }
-    );
-  }
-);
-Table.displayName = "Table";
-
-// src/components/Table/collapsible/CollapsibleTable.tsx
+// src/components/DescriptionList/DescriptionList.tsx
 var import_react45 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
-
-// src/components/Table/collapsible/Table.context.tsx
-var import_react44 = require("react");
-var CollapsibleTableContext = (0, import_react44.createContext)({
-  headerValues: [],
-  definingColumnIndex: [0]
-});
-var useCollapsibleTableContext = () => (0, import_react44.useContext)(CollapsibleTableContext);
-
-// src/components/Table/collapsible/CollapsibleTable.tsx
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var StyledTable2 = (0, import_styled_components36.default)(Table)`
-  width: 100%;
-  ${({ withDividers }) => withDividers && import_styled_components36.css`
-      tr[data-isopencollapsibleheader='true'] {
-        border-bottom: none;
-      }
-    `}
-`;
-var CollapsibleTable = (0, import_react45.forwardRef)((props, ref) => {
-  const {
-    density = "normal",
-    children,
-    isCollapsed,
-    headerValues,
-    definingColumnIndex = [0],
-    ...rest
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-    CollapsibleTableContext.Provider,
-    {
-      value: {
-        isCollapsed,
-        headerValues,
-        definingColumnIndex
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StyledTable2, { ref, density, ...rest, children })
-    }
-  );
-});
-CollapsibleTable.displayName = "CollapsibleTable";
-
-// src/components/Table/Head.tsx
-var import_react46 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime197 = require("react/jsx-runtime");
-var StyledHead = import_styled_components37.default.thead``;
-var Head = (0, import_react46.forwardRef)(
-  ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(StyledHead, { ref, ...rest, children });
-  }
-);
-Head.displayName = "Table.Head";
-
-// src/components/Table/Body.tsx
-var import_react47 = require("react");
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime198 = require("react/jsx-runtime");
-var StyledBody = import_styled_components38.default.tbody``;
-var Body = (0, import_react47.forwardRef)(
-  ({ children, ...rest }, ref) => {
-    const bodyProps = {
-      ...rest
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(StyledBody, { ref, ...bodyProps, children });
-  }
-);
-Body.displayName = "Table.Body";
-
-// src/components/Table/Foot.tsx
-var import_react48 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime199 = require("react/jsx-runtime");
-var StyledFoot = import_styled_components39.default.tfoot``;
-var Foot = (0, import_react48.forwardRef)(
-  ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(StyledFoot, { ref, ...rest, children });
-  }
-);
-Foot.displayName = "Table.Foot";
-
-// src/components/Table/Row.tsx
-var import_react49 = require("react");
-
-// src/components/Table/Table.styles.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
-var { row: row3 } = tableTokens;
-var bodyRowStyles = (mode, selected) => {
-  return import_styled_components40.css`
-    ${mode === "sum" && import_styled_components40.css`
-      font-weight: 600;
-      border-top: ${row3.body.mode.sum.borderTop};
-      border-bottom: ${row3.body.mode.sum.borderBottom};
-      background-color: ${row3.body.mode.sum.backgroundColor};
-    `}
-    ${selected && import_styled_components40.css`
-      background-color: ${row3.body.selected.backgroundColor};
-    `}
-  `;
-};
-var StyledRow = import_styled_components40.default.tr`
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color 0.2s,
-      border-color 0.2s,
-      box-shadow 0.2s;
-  }
-
-  ${getFontStyling(defaultTypographyType, true)}
-
-  ${({ type }) => type === "head" && import_styled_components40.css`
-      font-weight: 600;
-      text-align: left;
-    `}
-  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && import_styled_components40.css`
-      &:nth-of-type(even) {
-        background-color: ${row3.body.even.backgroundColor};
-        ${bodyRowStyles(mode, selected)}
-      }
-
-      &:nth-of-type(odd) {
-        background-color: ${row3.body.odd.backgroundColor};
-        ${bodyRowStyles(mode, selected)}
-      }
-
-      ${hoverable && import_styled_components40.css`
-        &:hover {
-          background-color: ${row3.body.hover.backgroundColor};
-        }
-      `}
-      &:focus-visible, &.focus-visible {
-        ${focusVisibleInset}
-      }
-    `}
-`;
-
-// src/components/Table/Row.tsx
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var Row = (0, import_react49.forwardRef)(
-  ({ type = "body", mode = "normal", hoverable, selected, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
-      StyledRow,
-      {
-        type,
-        $mode: mode,
-        $hoverable: hoverable,
-        $selected: selected,
-        ref,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-Row.displayName = "Table.Row";
-
-// src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react55 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-
-// src/components/DescriptionList/DescriptionList.tsx
-var import_react50 = require("react");
-var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/components/DescriptionList/DescriptionList.tokens.tsx
 var import_dds_design_tokens31 = require("@norges-domstoler/dds-design-tokens");
@@ -7978,19 +7783,19 @@ var descriptionListTokens = {
 };
 
 // src/components/DescriptionList/DescriptionList.tsx
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 var { term: term2, desc: desc2, list: list2 } = descriptionListTokens;
-var DList = import_styled_components41.default.dl.withConfig({
+var DList = import_styled_components37.default.dl.withConfig({
   shouldForwardProp: (prop) => prop !== "appearance" && prop !== "direction"
 })`
   margin: 0;
   *::selection {
     ${selection}
   }
-  ${({ appearance }) => appearance && import_styled_components41.css`
+  ${({ appearance }) => appearance && import_styled_components37.css`
       dt {
         color: ${term2.appearance[appearance].color};
-        ${appearance === "bold" && import_styled_components41.css`
+        ${appearance === "bold" && import_styled_components37.css`
           font-weight: 600;
         `}
       }
@@ -8013,7 +7818,7 @@ var DList = import_styled_components41.default.dl.withConfig({
     margin-top: ${list2.beforeNextTerm.marginTop};
   }
 `;
-var DescriptionList = (0, import_react50.forwardRef)((props, ref) => {
+var DescriptionList = (0, import_react45.forwardRef)((props, ref) => {
   const {
     appearance = "bold",
     direction = "column",
@@ -8029,44 +7834,44 @@ var DescriptionList = (0, import_react50.forwardRef)((props, ref) => {
     direction,
     ref
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(DList, { ...dListProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(DList, { ...dListProps, children });
 });
 DescriptionList.displayName = "DescriptionList";
 
 // src/components/DescriptionList/DescriptionListTerm.tsx
-var import_react51 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var DListTerm = import_styled_components42.default.dt``;
-var DescriptionListTerm = (0, import_react51.forwardRef)(({ children, ...rest }, ref) => {
+var import_react46 = require("react");
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var DListTerm = import_styled_components38.default.dt``;
+var DescriptionListTerm = (0, import_react46.forwardRef)(({ children, ...rest }, ref) => {
   const dListTermProps = {
     ref,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(DListTerm, { ...dListTermProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(DListTerm, { ...dListTermProps, children });
 });
 DescriptionListTerm.displayName = "DescriptionListTerm";
 
 // src/components/DescriptionList/DescriptionListDesc.tsx
-var import_react52 = require("react");
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var DListDesc = import_styled_components43.default.dd`
+var import_react47 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var DListDesc = import_styled_components39.default.dd`
   margin-inline-start: 0;
   align-items: center;
   display: flex;
   color: ${descriptionListTokens.desc.base.color};
   gap: ${descriptionListTokens.desc.base.gap};
 `;
-var DescriptionListDesc = (0, import_react52.forwardRef)((props, ref) => {
+var DescriptionListDesc = (0, import_react47.forwardRef)((props, ref) => {
   const { children, icon: icon12, id, className, htmlProps, ...rest } = props;
   const dListDescProps = {
     ...getBaseHTMLProps(id, className, htmlProps, rest),
     children,
     ref
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(DListDesc, { ...dListDescProps, children: [
-    icon12 && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Icon, { icon: icon12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(DListDesc, { ...dListDescProps, children: [
+    icon12 && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Icon, { icon: icon12 }),
     " ",
     children
   ] });
@@ -8074,15 +7879,15 @@ var DescriptionListDesc = (0, import_react52.forwardRef)((props, ref) => {
 DescriptionListDesc.displayName = "DescriptionListDesc";
 
 // src/components/DescriptionList/DescriptionListGroup.tsx
-var import_react53 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var DListGroup = import_styled_components44.default.div`
+var import_react48 = require("react");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime200 = require("react/jsx-runtime");
+var DListGroup = import_styled_components40.default.div`
   margin: ${({ margin }) => margin ? margin : descriptionListTokens.group.base.margin};
   ${({ minWidth }) => minWidth && `min-width: ${minWidth}`}
   ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth}`}
 `;
-var DescriptionListGroup = (0, import_react53.forwardRef)((props, ref) => {
+var DescriptionListGroup = (0, import_react48.forwardRef)((props, ref) => {
   const {
     children,
     margin,
@@ -8101,66 +7906,130 @@ var DescriptionListGroup = (0, import_react53.forwardRef)((props, ref) => {
     minWidth,
     maxWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(DListGroup, { ...dListGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(DListGroup, { ...dListGroupProps, children });
 });
 DescriptionListGroup.displayName = "DescriptionListGroup";
 
 // src/components/Table/Cell.tsx
-var import_react54 = require("react");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var { cell: cell3 } = tableTokens;
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var { cell: cell2 } = tableTokens;
 var getLayoutStyle = (layout) => {
   switch (layout) {
     case "center":
-      return import_styled_components45.css`
+      return import_styled_components41.css`
         justify-content: center;
       `;
     case "right":
-      return import_styled_components45.css`
+      return import_styled_components41.css`
         justify-content: flex-end;
       `;
     case "text and icon":
-      return import_styled_components45.css`
-        gap: ${cell3.layout.textAndIcon.gap};
+      return import_styled_components41.css`
+        gap: ${cell2.layout.textAndIcon.gap};
       `;
     default:
     case "left":
       return;
   }
-};
-var StyledCell = import_styled_components45.default.td`
-  ${({ $type: type }) => type === "head" && import_styled_components45.css`
-      background-color: ${cell3.head.backgroundColor};
+};
+var StyledCell = import_styled_components41.default.td`
+  ${({ $type: type }) => type === "head" && import_styled_components41.css`
+      background-color: ${cell2.head.backgroundColor};
+    `}
+`;
+var InnerCell = import_styled_components41.default.div`
+  display: flex;
+  align-items: center;
+  ${({ $layout: layout }) => getLayoutStyle(layout)}
+`;
+var getTableCellType = (type) => {
+  switch (type) {
+    case "head":
+      return "th";
+    default:
+    case "data":
+      return "td";
+  }
+};
+var Cell = (0, import_react49.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime201.jsx)(DescriptionListDesc, { children }) : /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(InnerCell, { $layout: layout, children }) });
+  }
+);
+Cell.displayName = "Table.Cell";
+
+// src/components/Table/collapsible/CollapsibleRow.tsx
+var import_react51 = require("react");
+var import_styled_components43 = __toESM(require("styled-components"));
+
+// src/components/Table/collapsible/Table.context.tsx
+var import_react50 = require("react");
+var CollapsibleTableContext = (0, import_react50.createContext)({
+  headerValues: [],
+  definingColumnIndex: [0]
+});
+var useCollapsibleTableContext = () => (0, import_react50.useContext)(CollapsibleTableContext);
+
+// src/components/Table/Table.styles.tsx
+var import_styled_components42 = __toESM(require("styled-components"));
+var { row: row2 } = tableTokens;
+var bodyRowStyles = (mode, selected) => {
+  return import_styled_components42.css`
+    ${mode === "sum" && import_styled_components42.css`
+      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 && import_styled_components42.css`
+      background-color: ${row2.body.selected.backgroundColor};
+    `}
+  `;
+};
+var StyledRow = import_styled_components42.default.tr`
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+
+  ${getFontStyling(defaultTypographyType, true)}
+
+  ${({ type }) => type === "head" && import_styled_components42.css`
+      font-weight: 600;
+      text-align: left;
+    `}
+  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && import_styled_components42.css`
+      &:nth-of-type(even) {
+        background-color: ${row2.body.even.backgroundColor};
+        ${bodyRowStyles(mode, selected)}
+      }
+
+      &:nth-of-type(odd) {
+        background-color: ${row2.body.odd.backgroundColor};
+        ${bodyRowStyles(mode, selected)}
+      }
+
+      ${hoverable && import_styled_components42.css`
+        &:hover {
+          background-color: ${row2.body.hover.backgroundColor};
+        }
+      `}
+      &:focus-visible, &.focus-visible {
+        ${focusVisibleInset}
+      }
     `}
 `;
-var InnerCell = import_styled_components45.default.div`
-  display: flex;
-  align-items: center;
-  ${({ $layout: layout }) => getLayoutStyle(layout)}
-`;
-var getTableCellType = (type) => {
-  switch (type) {
-    case "head":
-      return "th";
-    default:
-    case "data":
-      return "td";
-  }
-};
-var Cell = (0, import_react54.forwardRef)(
-  ({ children, type = "data", layout = "left", collapsibleProps, ...rest }, ref) => {
-    const as = getTableCellType(type);
-    const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
-    return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DescriptionListDesc, { children }) : /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(InnerCell, { $layout: layout, children }) });
-  }
-);
-Cell.displayName = "Table.Cell";
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_jsx_runtime206 = require("react/jsx-runtime");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var { collapseButton: collapseButton2 } = tableTokens;
-var CollapseButton = import_styled_components46.default.button`
+var CollapseButton = import_styled_components43.default.button`
   ${removeButtonStyling}
   margin-left: auto;
   margin-right: auto;
@@ -8175,13 +8044,15 @@ var CollapseButton = import_styled_components46.default.button`
     ${focusVisible}
   }
 `;
-var DescriptionListCell = (0, import_styled_components46.default)(Cell)`
+var DescriptionListCell = (0, import_styled_components43.default)(Cell)`
   & > div {
     display: block;
   }
 `;
-var CollapsibleRow = (0, import_react55.forwardRef)(
-  ({ type = "body", mode = "normal", selected, hoverable, children, ...rest }, ref) => {
+var CollapsibleRow = (0, import_react51.forwardRef)(
+  ({ type: _type, mode = "normal", selected, hoverable, children, ...rest }, ref) => {
+    const isInHead = useIsInTableHead();
+    const type = _type != null ? _type : isInHead ? "head" : "body";
     const rowProps = {
       $type: type,
       $mode: mode,
@@ -8190,14 +8061,14 @@ var CollapsibleRow = (0, import_react55.forwardRef)(
       ...rest
     };
     const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react55.useState)(true);
-    (0, import_react55.useEffect)(() => {
+    const [childrenCollapsed, setChildrenCollapsed] = (0, import_react51.useState)(true);
+    (0, import_react51.useEffect)(() => {
       !isCollapsed && setChildrenCollapsed(true);
     }, [isCollapsed]);
     const collapsedHeaderValues = headerValues.filter(
       (column, index) => definingColumnIndex.indexOf(index) === -1
     );
-    const childrenArray = import_react55.Children.toArray(children);
+    const childrenArray = import_react51.Children.toArray(children);
     const collapsedChildren = childrenArray.filter(
       (column, index) => definingColumnIndex.indexOf(index) === -1
     );
@@ -8206,25 +8077,25 @@ var CollapsibleRow = (0, import_react55.forwardRef)(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix2, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_react55.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-        (0, import_react55.isValidElement)(child) && (0, import_react55.cloneElement)(child, {
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_react51.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+        (0, import_react51.isValidElement)(child) && (0, import_react51.cloneElement)(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledRow, { type, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledRow, { type, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(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__ */ (0, import_jsx_runtime206.jsx)(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_jsx_runtime206.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
         definingColumnCells,
-        /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(Table.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(VisuallyHidden, { as: "span", children: "raden" })
         ] })
       ] }) });
     };
@@ -8232,7 +8103,7 @@ var CollapsibleRow = (0, import_react55.forwardRef)(
     const rowWithChevron = () => {
       if (type !== "body" || !isCollapsed)
         return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
         StyledRow,
         {
           ref,
@@ -8241,13 +8112,13 @@ var CollapsibleRow = (0, import_react55.forwardRef)(
           "data-isopencollapsibleheader": !childrenCollapsed && true,
           children: [
             definingColumnCells,
-            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
               CollapseButton,
               {
                 onClick: () => setChildrenCollapsed(!childrenCollapsed),
                 "aria-expanded": !childrenCollapsed,
                 "aria-controls": idList,
-                children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
                   AnimatedChevronUpDown,
                   {
                     isUp: childrenCollapsed ? false : true,
@@ -8261,17 +8132,154 @@ var CollapsibleRow = (0, import_react55.forwardRef)(
         }
       );
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_jsx_runtime206.Fragment, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_jsx_runtime206.Fragment, { children: [
+      type === "body" && /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledRow, { ref, type, ...rowProps, children });
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledRow, { ref, type, ...rowProps, children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
+// src/components/Table/collapsible/CollapsibleTable.tsx
+var import_react53 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+
+// src/components/Table/Table.tsx
+var import_react52 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var { cell: cell3, row: row3 } = tableTokens;
+var StyledTable = import_styled_components44.default.table`
+  border-spacing: 0;
+  border-collapse: collapse;
+  *::selection {
+    ${selection}
+  }
+  ${scrollbarStyling.webkit}
+  ${scrollbarStyling.firefox}
+  ${({ $density }) => import_styled_components44.css`
+    td,
+    th {
+      padding: ${cell3.density[$density].padding};
+    }
+  `}
+  ${({ $density }) => $density === "extraCompact" && import_styled_components44.css`
+      th {
+        background-color: ${row3.head.extraCompact.backgroundColor};
+        font-size: ${row3.head.extraCompact.fontSize};
+      }
+      tr[type='body'] {
+        &:nth-of-type(even) {
+          background-color: ${row3.body.odd.backgroundColor};
+        }
+        &:nth-of-type(odd) {
+          background-color: ${row3.body.even.backgroundColor};
+        }
+      }
+    `}
+  ${({ $stickyHeader }) => $stickyHeader && import_styled_components44.css`
+      tr[type='head'] {
+        th[type='head'] {
+          position: sticky;
+          top: 0;
+          z-index: 50;
+        }
+      }
+    `}
+  ${({ $withDividers }) => $withDividers && import_styled_components44.css`
+      tr[type='body'] {
+        border-bottom: ${row3.body.withDividers.borderBottom};
+      }
+    `}
+`;
+var Table2 = (0, import_react52.forwardRef)(
+  ({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+      StyledTable,
+      {
+        ...rest,
+        ref,
+        $density: density,
+        $stickyHeader: stickyHeader,
+        $withDividers: withDividers,
+        children
+      }
+    );
+  }
+);
+Table2.displayName = "Table";
+
+// src/components/Table/collapsible/CollapsibleTable.tsx
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var StyledTable2 = (0, import_styled_components45.default)(Table2)`
+  width: 100%;
+  ${({ withDividers }) => withDividers && import_styled_components45.css`
+      tr[data-isopencollapsibleheader='true'] {
+        border-bottom: none;
+      }
+    `}
+`;
+var CollapsibleTable = (0, import_react53.forwardRef)((props, ref) => {
+  const {
+    density = "normal",
+    children,
+    isCollapsed,
+    headerValues,
+    definingColumnIndex = [0],
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+    CollapsibleTableContext.Provider,
+    {
+      value: {
+        isCollapsed,
+        headerValues,
+        definingColumnIndex
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(StyledTable2, { ref, density, ...rest, children })
+    }
+  );
+});
+CollapsibleTable.displayName = "CollapsibleTable";
+
+// src/components/Table/Foot.tsx
+var import_react54 = require("react");
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var StyledFoot = import_styled_components46.default.tfoot``;
+var Foot = (0, import_react54.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StyledFoot, { ref, ...rest, children });
+  }
+);
+Foot.displayName = "Table.Foot";
+
+// src/components/Table/Row.tsx
+var import_react55 = require("react");
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var Row = (0, import_react55.forwardRef)(
+  ({ type: _type, mode = "normal", hoverable, selected, children, ...rest }, ref) => {
+    const isInHeader = useIsInTableHead();
+    const type = _type != null ? _type : isInHeader ? "head" : "body";
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      StyledRow,
+      {
+        type,
+        $mode: mode,
+        $hoverable: hoverable,
+        $selected: selected,
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Row.displayName = "Table.Row";
+
 // src/components/Table/SortCell.tsx
 var import_react56 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
@@ -8356,14 +8364,14 @@ var TableWrapper = ({ children, ...rest }) => {
 TableWrapper.displayName = "Table.Wrapper";
 
 // src/components/Table/index.ts
-var Table2 = Table;
-Table2.Wrapper = TableWrapper;
-Table2.Head = Head;
-Table2.Body = Body;
-Table2.Cell = Cell;
-Table2.SortCell = SortCell;
-Table2.Row = Row;
-Table2.Foot = Foot;
+var Table = Table2;
+Table.Wrapper = TableWrapper;
+Table.Head = Head;
+Table.Body = Body;
+Table.Cell = Cell;
+Table.SortCell = SortCell;
+Table.Row = Row;
+Table.Foot = Foot;
 var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
@@ -8455,6 +8463,28 @@ Breadcrumbs.displayName = "Breadcrumbs";
 var import_react60 = require("react");
 var import_styled_components50 = __toESM(require("styled-components"));
 
+// src/components/Pagination/Pagination.tokens.tsx
+var import_dds_design_tokens33 = require("@norges-domstoler/dds-design-tokens");
+var { spacing: spacing19, colors: colors21 } = import_dds_design_tokens33.ddsBaseTokens;
+var list5 = {
+  gap: spacing19.SizesDdsSpacingX075
+};
+var truncationIcon = {
+  color: colors21.DdsColorNeutralsGray7
+};
+var outerContainer5 = {
+  gap: spacing19.SizesDdsSpacingX075
+};
+var indicatorsContainer = {
+  gap: spacing19.SizesDdsSpacingX075
+};
+var paginationTokens = {
+  outerContainer: outerContainer5,
+  indicatorsContainer,
+  truncationIcon,
+  list: list5
+};
+
 // src/components/Pagination/paginationGenerator.tsx
 var arrayRange = (start, end) => {
   const length = end - start + 1;
@@ -8488,28 +8518,6 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-// src/components/Pagination/Pagination.tokens.tsx
-var import_dds_design_tokens33 = require("@norges-domstoler/dds-design-tokens");
-var { spacing: spacing19, colors: colors21 } = import_dds_design_tokens33.ddsBaseTokens;
-var list5 = {
-  gap: spacing19.SizesDdsSpacingX075
-};
-var truncationIcon = {
-  color: colors21.DdsColorNeutralsGray7
-};
-var outerContainer5 = {
-  gap: spacing19.SizesDdsSpacingX075
-};
-var indicatorsContainer = {
-  gap: spacing19.SizesDdsSpacingX075
-};
-var paginationTokens = {
-  outerContainer: outerContainer5,
-  indicatorsContainer,
-  truncationIcon,
-  list: list5
-};
-
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime211 = require("react/jsx-runtime");
 var { outerContainer: outerContainer6, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list6 } = paginationTokens;
@@ -9420,12 +9428,27 @@ var StyledOverflowMenu = (0, import_styled_components57.default)(OverflowMenu)`
   max-height: calc(100vh - 110px);
 `;
 
-// src/components/InternalHeader/NavigationItem.tsx
+// src/components/InternalHeader/InternalHeaderListItem.tsx
 var import_react68 = require("react");
 var import_styled_components58 = __toESM(require("styled-components"));
 var import_jsx_runtime219 = require("react/jsx-runtime");
+var Li = import_styled_components58.default.li`
+  box-sizing: border-box;
+`;
+var InternalHeaderListItem = (0, import_react68.forwardRef)(({ children, ...rest }, ref) => {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Li, { ...props, children });
+});
+
+// src/components/InternalHeader/NavigationItem.tsx
+var import_react69 = require("react");
+var import_styled_components59 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
 var { navLink: navLink2 } = internalHeaderTokens;
-var Link3 = import_styled_components58.default.a.withConfig({
+var Link3 = import_styled_components59.default.a.withConfig({
   shouldForwardProp: (prop) => prop !== "isCurrent"
 })`
   display: flex;
@@ -9450,7 +9473,7 @@ var Link3 = import_styled_components58.default.a.withConfig({
   &.focus-visible {
     ${focusVisible};
   }
-  ${({ isCurrent }) => isCurrent && import_styled_components58.css`
+  ${({ isCurrent }) => isCurrent && import_styled_components59.css`
       color: ${navLink2.current.color};
       background-color: ${navLink2.current.backgroundColor};
       &:hover {
@@ -9458,28 +9481,13 @@ var Link3 = import_styled_components58.default.a.withConfig({
       }
     `}
 `;
-var NavigationItem2 = (0, import_react68.forwardRef)(({ title: title3, isCurrent, ...rest }, ref) => {
+var NavigationItem2 = (0, import_react69.forwardRef)(({ title: title3, isCurrent, ...rest }, ref) => {
   const linkProps = {
     ref,
     isCurrent,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Link3, { ...linkProps, "aria-current": isCurrent ? "page" : void 0, children: title3 });
-});
-
-// src/components/InternalHeader/InternalHeaderListItem.tsx
-var import_react69 = require("react");
-var import_styled_components59 = __toESM(require("styled-components"));
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var Li = import_styled_components59.default.li`
-  box-sizing: border-box;
-`;
-var InternalHeaderListItem = (0, import_react69.forwardRef)(({ children, ...rest }, ref) => {
-  const props = {
-    ref,
-    ...rest
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Li, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Link3, { ...linkProps, "aria-current": isCurrent ? "page" : void 0, children: title3 });
 });
 
 // src/components/InternalHeader/InternalHeader.tsx
@@ -9827,49 +9835,28 @@ var Tooltip = (0, import_react72.forwardRef)(
           ),
           /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
             "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M26.5.5l-6.732 6.94a2.5 2.5 0 01-3.536 0L9.5.5H11l5.94 6.232a1.5 1.5 0 002.12 0L25 .5h1.5z",
-              fill: svgArrow2.border.fill
-            }
-          )
-        ] }) })
-      ] })
-    ] });
-  }
-);
-Tooltip.displayName = "Tooltip";
-
-// src/components/Modal/Modal.tsx
-var import_react73 = require("react");
-var import_styled_components63 = __toESM(require("styled-components"));
-
-// src/components/Modal/Modal.tokens.tsx
-var import_dds_design_tokens40 = require("@norges-domstoler/dds-design-tokens");
-var { spacing: spacing25 } = import_dds_design_tokens40.ddsBaseTokens;
-var container11 = {
-  padding: `${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX15} ${spacing25.SizesDdsSpacingX15}`
-};
-var contentContainer3 = {
-  paddingRight: spacing25.SizesDdsSpacingX1,
-  gap: spacing25.SizesDdsSpacingX1
-};
-var actionsContainer = {
-  gap: spacing25.SizesDdsSpacingX1
-};
-var modalTokens = {
-  container: container11,
-  contentContainer: contentContainer3,
-  actionsContainer
-};
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M26.5.5l-6.732 6.94a2.5 2.5 0 01-3.536 0L9.5.5H11l5.94 6.232a1.5 1.5 0 002.12 0L25 .5h1.5z",
+              fill: svgArrow2.border.fill
+            }
+          )
+        ] }) })
+      ] })
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
 
 // src/components/Modal/Modal.tsx
+var import_react73 = require("react");
 var import_react_dom2 = require("react-dom");
+var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/components/Modal/Backdrop/Backdrop.tsx
+var import_dds_design_tokens40 = require("@norges-domstoler/dds-design-tokens");
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_dds_design_tokens41 = require("@norges-domstoler/dds-design-tokens");
 var Backdrop = import_styled_components62.default.div.withConfig({
   shouldForwardProp: (prop) => prop !== "isOpen"
 })`
@@ -9878,7 +9865,7 @@ var Backdrop = import_styled_components62.default.div.withConfig({
   align-items: center;
   justify-content: center;
   background-color: ${changeRGBAAlpha(
-  import_dds_design_tokens41.ddsBaseTokens.colors.DdsColorNeutralsGray9,
+  import_dds_design_tokens40.ddsBaseTokens.colors.DdsColorNeutralsGray9,
   0.5
 )};
   overflow-y: auto;
@@ -9914,6 +9901,25 @@ function handleElementWithBackdropUnmount(container18) {
   window.scrollTo(0, scrollY * -1);
 }
 
+// src/components/Modal/Modal.tokens.tsx
+var import_dds_design_tokens41 = require("@norges-domstoler/dds-design-tokens");
+var { spacing: spacing25 } = import_dds_design_tokens41.ddsBaseTokens;
+var container11 = {
+  padding: `${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX1} ${spacing25.SizesDdsSpacingX15} ${spacing25.SizesDdsSpacingX15}`
+};
+var contentContainer3 = {
+  paddingRight: spacing25.SizesDdsSpacingX1,
+  gap: spacing25.SizesDdsSpacingX1
+};
+var actionsContainer = {
+  gap: spacing25.SizesDdsSpacingX1
+};
+var modalTokens = {
+  container: container11,
+  contentContainer: contentContainer3,
+  actionsContainer
+};
+
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var { container: container12, contentContainer: contentContainer4 } = modalTokens;
@@ -10272,12 +10278,6 @@ var import_date3 = require("@internationalized/date");
 var import_calendar2 = require("@react-aria/calendar");
 var import_styled_components68 = __toESM(require("styled-components"));
 
-// src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
-var import_react78 = require("react");
-var import_calendar = require("@react-aria/calendar");
-var import_date = require("@internationalized/date");
-var import_styled_components67 = __toESM(require("styled-components"));
-
 // src/components/date-inputs/DatePicker/Calendar/Calendar.tokens.ts
 var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
 var cellVariantStyles = {
@@ -10346,6 +10346,12 @@ var popover = {
 };
 var calendarTokens = { grid, cell: cell5, popover };
 
+// src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
+var import_date = require("@internationalized/date");
+var import_calendar = require("@react-aria/calendar");
+var import_react78 = require("react");
+var import_styled_components67 = __toESM(require("styled-components"));
+
 // src/components/date-inputs/DatePicker/constants.ts
 var locale = "no-NO";
 var timezone = "Europe/Oslo";
@@ -10607,20 +10613,87 @@ function Calendar(props) {
 Calendar.displayName = "Calendar";
 
 // src/components/date-inputs/DatePicker/DatePicker.tsx
-var import_datepicker4 = require("@react-stately/datepicker");
-var import_datepicker5 = require("@react-aria/datepicker");
+var import_datepicker4 = require("@react-aria/datepicker");
+var import_datepicker5 = require("@react-stately/datepicker");
 var import_react85 = require("react");
 
+// src/components/date-inputs/DatePicker/CalendarPopover.tsx
+var import_react79 = require("react");
+var import_styled_components70 = __toESM(require("styled-components"));
+var import_jsx_runtime232 = require("react/jsx-runtime");
+var { popover: popoverTokens } = calendarTokens;
+var CalendarPopoverContext = (0, import_react79.createContext)({
+  anchorRef: null,
+  isOpen: false,
+  onClose: () => null
+});
+var CalendarPopover = ({
+  children,
+  isOpen,
+  onClose
+}) => {
+  const anchorRef = (0, import_react79.useRef)(null);
+  useOnKeyDown("Escape", onClose);
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
+};
+var Anchor = import_styled_components70.default.div`
+  display: inline-flex;
+`;
+var CalendarPopoverAnchor = ({
+  children
+}) => {
+  const { anchorRef } = (0, import_react79.useContext)(CalendarPopoverContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Anchor, { ref: anchorRef != null ? anchorRef : void 0, children });
+};
+var PopoverContentContainer = import_styled_components70.default.div`
+  background-color: ${popoverTokens.backgroundColor};
+  border: ${popoverTokens.border};
+  border-radius: ${popoverTokens.borderRadius};
+  padding: ${popoverTokens.padding};
+  z-index: ${popoverTokens.zIndex};
+`;
+var CalendarPopoverContent = ({
+  children
+}) => {
+  const ref = (0, import_react79.useRef)(null);
+  const { refs, styles } = useFloatPosition(null, {
+    placement: "bottom-start"
+  });
+  const { isOpen, onClose, anchorRef } = (0, import_react79.useContext)(CalendarPopoverContext);
+  const combinedRef = useCombinedRef(refs.setFloating, ref);
+  useOnClickOutside(ref.current, onClose);
+  (0, import_react79.useEffect)(() => {
+    var _a;
+    refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
+  }, []);
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+    PopoverContentContainer,
+    {
+      ref: combinedRef,
+      style: styles.floating,
+      onBlur: (e) => {
+        const newFocus = e.relatedTarget;
+        if (ref.current && !ref.current.contains(newFocus)) {
+          onClose();
+        }
+      },
+      children
+    }
+  );
+};
+
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
-var import_react82 = require("react");
+var import_date5 = require("@internationalized/date");
 var import_datepicker2 = require("@react-aria/datepicker");
 var import_datepicker3 = require("@react-stately/datepicker");
-var import_date5 = require("@internationalized/date");
+var import_react83 = require("react");
 
-// src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
-var import_react79 = require("react");
-var import_datepicker = require("@react-aria/datepicker");
-var import_styled_components70 = __toESM(require("styled-components"));
+// src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
+var import_button = require("@react-aria/button");
+var import_react80 = require("react");
+var import_styled_components71 = __toESM(require("styled-components"));
 
 // src/components/date-inputs/DatePicker/DatePicker.tokens.ts
 var import_dds_design_tokens44 = require("@norges-domstoler/dds-design-tokens");
@@ -10713,92 +10786,7 @@ var datePickerTokens = {
   calendarButton
 };
 
-// src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
-var import_jsx_runtime232 = require("react/jsx-runtime");
-var {
-  datefield: { segment: segmentTokens }
-} = datePickerTokens;
-var Segment = import_styled_components70.default.div`
-  display: block;
-  width: max-content;
-  font-variant-numeric: tabular-nums;
-  outline: none;
-  padding: ${segmentTokens.padding.y} ${segmentTokens.padding.x};
-  ${({ $componentSize }) => import_styled_components70.css`
-    font-family: ${segmentTokens[$componentSize].font.fontFamily};
-    font-size: ${segmentTokens[$componentSize].font.fontSize};
-    font-style: ${segmentTokens[$componentSize].font.fontStyle};
-    font-weight: ${segmentTokens[$componentSize].font.fontWeight};
-    line-height: ${segmentTokens[$componentSize].font.lineHeight};
-  `}
-
-  &:focus:not([aria-readonly]) {
-    background-color: ${segmentTokens.focus.backgroundColor};
-    color: ${segmentTokens.focus.textColor};
-  }
-`;
-var SegmentPlaceholder = import_styled_components70.default.span`
-  display: block;
-  width: 100%;
-  font-variant-numeric: tabular-nums;
-
-  ${({ $componentSize }) => import_styled_components70.css`
-    font-family: ${segmentTokens[$componentSize].placeholder.fontFamily};
-    font-size: ${segmentTokens[$componentSize].placeholder.fontSize};
-    font-style: ${segmentTokens[$componentSize].placeholder.fontStyle};
-    font-weight: ${segmentTokens[$componentSize].placeholder.fontWeight};
-    line-height: ${segmentTokens[$componentSize].placeholder.lineHeight};
-    color: ${segmentTokens[$componentSize].placeholder.textColor};
-  `}
-
-  ${Segment}:focus & {
-    color: ${segmentTokens.focus.textColor};
-  }
-`;
-function DateSegment({
-  segment: segment2,
-  state,
-  componentSize
-}) {
-  var _a;
-  const ref = (0, import_react79.useRef)(null);
-  const { segmentProps } = (0, import_datepicker.useDateSegment)(segment2, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
-    Segment,
-    {
-      ...segmentProps,
-      $componentSize: componentSize,
-      ref,
-      style: {
-        ...segmentProps.style,
-        minWidth: segment2.maxValue != null ? String(segment2.maxValue).length + "ch" : void 0
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
-          SegmentPlaceholder,
-          {
-            "aria-hidden": "true",
-            $componentSize: componentSize,
-            style: {
-              visibility: segment2.isPlaceholder ? void 0 : "hidden",
-              height: segment2.isPlaceholder ? void 0 : 0,
-              width: segment2.isPlaceholder ? void 0 : 0,
-              pointerEvents: "none"
-            },
-            children: segment2.placeholder
-          }
-        ),
-        segment2.isPlaceholder ? "" : segment2.text.padStart(String((_a = segment2.maxValue) != null ? _a : "").length, "0")
-      ]
-    }
-  );
-}
-DateSegment.displayName = "DateSegment";
-
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
-var import_button = require("@react-aria/button");
-var import_styled_components71 = __toESM(require("styled-components"));
-var import_react80 = require("react");
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var StyledButton4 = import_styled_components71.default.button`
   ${normalizeButton}
@@ -10835,55 +10823,144 @@ var StyledButton4 = import_styled_components71.default.button`
     outline: none;
   }
 
-  *::selection {
-    ${selection}
+  *::selection {
+    ${selection}
+  }
+`;
+function CalendarButton({
+  componentSize,
+  ...props
+}) {
+  const ref = (0, import_react80.useRef)(null);
+  const { buttonProps } = (0, import_button.useButton)(props, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+    StyledButton4,
+    {
+      ...buttonProps,
+      ref,
+      type: "button",
+      $isDisabled: props.isDisabled,
+      $componentSize: componentSize,
+      onClick: (e) => {
+        var _a;
+        if (!props.isDisabled) {
+          (_a = buttonProps.onClick) == null ? void 0 : _a.call(buttonProps, e);
+        }
+      },
+      className: [props.isDisabled ? "disabled" : false].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+        Icon,
+        {
+          icon: CalendarIcon,
+          iconSize: componentSize === "medium" ? "medium" : "small"
+        }
+      )
+    }
+  );
+}
+
+// src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
+var import_datepicker = require("@react-aria/datepicker");
+var import_react81 = require("react");
+var import_styled_components72 = __toESM(require("styled-components"));
+var import_jsx_runtime234 = require("react/jsx-runtime");
+var {
+  datefield: { segment: segmentTokens }
+} = datePickerTokens;
+var Segment = import_styled_components72.default.div`
+  display: block;
+  width: max-content;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  padding: ${segmentTokens.padding.y} ${segmentTokens.padding.x};
+  ${({ $componentSize }) => import_styled_components72.css`
+    font-family: ${segmentTokens[$componentSize].font.fontFamily};
+    font-size: ${segmentTokens[$componentSize].font.fontSize};
+    font-style: ${segmentTokens[$componentSize].font.fontStyle};
+    font-weight: ${segmentTokens[$componentSize].font.fontWeight};
+    line-height: ${segmentTokens[$componentSize].font.lineHeight};
+  `}
+
+  &:focus:not([aria-readonly]) {
+    background-color: ${segmentTokens.focus.backgroundColor};
+    color: ${segmentTokens.focus.textColor};
+  }
+`;
+var SegmentPlaceholder = import_styled_components72.default.span`
+  display: block;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+
+  ${({ $componentSize }) => import_styled_components72.css`
+    font-family: ${segmentTokens[$componentSize].placeholder.fontFamily};
+    font-size: ${segmentTokens[$componentSize].placeholder.fontSize};
+    font-style: ${segmentTokens[$componentSize].placeholder.fontStyle};
+    font-weight: ${segmentTokens[$componentSize].placeholder.fontWeight};
+    line-height: ${segmentTokens[$componentSize].placeholder.lineHeight};
+    color: ${segmentTokens[$componentSize].placeholder.textColor};
+  `}
+
+  ${Segment}:focus & {
+    color: ${segmentTokens.focus.textColor};
   }
 `;
-function CalendarButton({
-  componentSize,
-  ...props
+function DateSegment({
+  segment: segment2,
+  state,
+  componentSize
 }) {
-  const ref = (0, import_react80.useRef)(null);
-  const { buttonProps } = (0, import_button.useButton)(props, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-    StyledButton4,
+  var _a;
+  const ref = (0, import_react81.useRef)(null);
+  const { segmentProps } = (0, import_datepicker.useDateSegment)(segment2, state, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
+    Segment,
     {
-      ...buttonProps,
-      ref,
-      type: "button",
-      $isDisabled: props.isDisabled,
+      ...segmentProps,
       $componentSize: componentSize,
-      onClick: (e) => {
-        var _a;
-        if (!props.isDisabled) {
-          (_a = buttonProps.onClick) == null ? void 0 : _a.call(buttonProps, e);
-        }
+      ref,
+      style: {
+        ...segmentProps.style,
+        minWidth: segment2.maxValue != null ? String(segment2.maxValue).length + "ch" : void 0
       },
-      className: [props.isDisabled ? "disabled" : false].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-        Icon,
-        {
-          icon: CalendarIcon,
-          iconSize: componentSize === "medium" ? "medium" : "small"
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+          SegmentPlaceholder,
+          {
+            "aria-hidden": "true",
+            $componentSize: componentSize,
+            style: {
+              visibility: segment2.isPlaceholder ? void 0 : "hidden",
+              height: segment2.isPlaceholder ? void 0 : 0,
+              width: segment2.isPlaceholder ? void 0 : 0,
+              pointerEvents: "none"
+            },
+            children: segment2.placeholder
+          }
+        ),
+        segment2.isPlaceholder ? "" : segment2.text.padStart(String((_a = segment2.maxValue) != null ? _a : "").length, "0")
+      ]
     }
   );
 }
+DateSegment.displayName = "DateSegment";
 
 // src/components/date-inputs/common/DateInput.tsx
-var import_react81 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var DateFieldContainer = import_styled_components72.default.div`
+var import_react82 = require("react");
+var import_styled_components73 = __toESM(require("styled-components"));
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var DateFieldContainer = import_styled_components73.default.div`
   display: inline-flex;
   flex-direction: column;
   gap: ${datePickerTokens.labelGap};
 `;
-var InputDiv = (0, import_styled_components72.default)(StatefulInput).attrs({
+var InputDiv = (0, import_styled_components73.default)(StatefulInput).attrs({
   as: "div"
 })`
-  min-width: ${({ componentSize = "medium" }) => datePickerTokens.datefield[componentSize].minWidth};
+  ${({ $width, componentSize = "medium" }) => $width ? import_styled_components73.css`
+          width: ${$width};
+        ` : import_styled_components73.css`
+          min-width: ${datePickerTokens.datefield[componentSize].minWidth};
+        `}
   display: inline-flex;
   flex-direction: row;
   gap: ${datePickerTokens.gap};
@@ -10891,11 +10968,11 @@ var InputDiv = (0, import_styled_components72.default)(StatefulInput).attrs({
   padding-left: ${({ componentSize = "medium" }) => datePickerTokens.datefield[componentSize].paddingX};
   padding-right: ${({ componentSize = "medium" }) => datePickerTokens.datefield[componentSize].paddingX};
 `;
-var DateSegmentContainer = import_styled_components72.default.div`
+var DateSegmentContainer = import_styled_components73.default.div`
   display: flex;
   flex-direction: row;
 `;
-var DateInput = (0, import_react81.forwardRef)(
+var DateInput = (0, import_react82.forwardRef)(
   ({
     errorMessage,
     tip,
@@ -10911,6 +10988,7 @@ var DateInput = (0, import_react81.forwardRef)(
     prefix: button3,
     labelProps,
     fieldProps,
+    width,
     ...props
   }, forwardedRef) => {
     var _a;
@@ -10918,12 +10996,13 @@ var DateInput = (0, import_react81.forwardRef)(
     const hasTip = !!tip;
     const hasLabel = props.label != null;
     const hasMessage = hasErrorMessage || hasTip;
-    return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(DateFieldContainer, { className, ref: forwardedRef, children: [
-      hasLabel && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(DateFieldContainer, { className, ref: forwardedRef, children: [
+      hasLabel && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
         InputDiv,
         {
           ...fieldProps,
+          $width: width,
           style,
           disabled,
           componentSize,
@@ -10936,11 +11015,11 @@ var DateInput = (0, import_react81.forwardRef)(
           ),
           children: [
             button3,
-            /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(DateSegmentContainer, { children })
+            /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(DateSegmentContainer, { children })
           ]
         }
       ),
-      hasMessage && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+      hasMessage && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
         InputMessage,
         {
           messageType: hasErrorMessage ? "error" : "tip",
@@ -10953,18 +11032,18 @@ var DateInput = (0, import_react81.forwardRef)(
 DateInput.displayName = "DateInput";
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
-var import_jsx_runtime235 = require("react/jsx-runtime");
-var DateField = (0, import_react82.forwardRef)(
+var import_jsx_runtime236 = require("react/jsx-runtime");
+var DateField = (0, import_react83.forwardRef)(
   ({ componentSize = "medium", buttonProps, ...props }, forwardedRef) => {
     const state = (0, import_datepicker3.useDateFieldState)({
       ...props,
       locale,
       createCalendar: import_date5.createCalendar
     });
-    const ref = (0, import_react82.useRef)(null);
+    const ref = (0, import_react83.useRef)(null);
     const { labelProps, fieldProps } = (0, import_datepicker2.useDateField)(props, state, ref);
     const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
-    return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
       DateInput,
       {
         ...props,
@@ -10975,7 +11054,7 @@ var DateField = (0, import_react82.forwardRef)(
         ref: forwardedRef,
         internalRef: ref,
         readOnly: props.isReadOnly,
-        prefix: !props.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+        prefix: !props.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
           CalendarButton,
           {
             componentSize,
@@ -10985,7 +11064,7 @@ var DateField = (0, import_react82.forwardRef)(
         ),
         labelProps,
         fieldProps,
-        children: state.segments.map((segment2, i) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+        children: state.segments.map((segment2, i) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
           DateSegment,
           {
             componentSize,
@@ -11000,76 +11079,9 @@ var DateField = (0, import_react82.forwardRef)(
 );
 DateField.displayName = "DateField";
 
-// src/components/date-inputs/DatePicker/CalendarPopover.tsx
-var import_react83 = require("react");
-var import_styled_components73 = __toESM(require("styled-components"));
-var import_jsx_runtime236 = require("react/jsx-runtime");
-var { popover: popoverTokens } = calendarTokens;
-var CalendarPopoverContext = (0, import_react83.createContext)({
-  anchorRef: null,
-  isOpen: false,
-  onClose: () => null
-});
-var CalendarPopover = ({
-  children,
-  isOpen,
-  onClose
-}) => {
-  const anchorRef = (0, import_react83.useRef)(null);
-  useOnKeyDown("Escape", onClose);
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
-};
-var Anchor = import_styled_components73.default.div`
-  display: inline-flex;
-`;
-var CalendarPopoverAnchor = ({
-  children
-}) => {
-  const { anchorRef } = (0, import_react83.useContext)(CalendarPopoverContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Anchor, { ref: anchorRef != null ? anchorRef : void 0, children });
-};
-var PopoverContentContainer = import_styled_components73.default.div`
-  background-color: ${popoverTokens.backgroundColor};
-  border: ${popoverTokens.border};
-  border-radius: ${popoverTokens.borderRadius};
-  padding: ${popoverTokens.padding};
-  z-index: ${popoverTokens.zIndex};
-`;
-var CalendarPopoverContent = ({
-  children
-}) => {
-  const ref = (0, import_react83.useRef)(null);
-  const { refs, styles } = useFloatPosition(null, {
-    placement: "bottom-start"
-  });
-  const { isOpen, onClose, anchorRef } = (0, import_react83.useContext)(CalendarPopoverContext);
-  const combinedRef = useCombinedRef(refs.setFloating, ref);
-  useOnClickOutside(ref.current, onClose);
-  (0, import_react83.useEffect)(() => {
-    var _a;
-    refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
-  }, []);
-  if (!isOpen)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
-    PopoverContentContainer,
-    {
-      ref: combinedRef,
-      style: styles.floating,
-      onBlur: (e) => {
-        const newFocus = e.relatedTarget;
-        if (ref.current && !ref.current.contains(newFocus)) {
-          onClose();
-        }
-      },
-      children
-    }
-  );
-};
-
 // src/components/date-inputs/utils/useFocusManagerRef.ts
-var import_react84 = require("react");
 var import_focus = require("@react-aria/focus");
+var import_react84 = require("react");
 function useFocusManagerRef(ref) {
   const domRef = (0, import_react84.useRef)(null);
   (0, import_react84.useImperativeHandle)(ref, () => ({
@@ -11093,14 +11105,14 @@ var import_jsx_runtime237 = require("react/jsx-runtime");
 var refIsFocusable = (ref) => {
   return typeof ref === "object" && ref !== null && "focus" in ref;
 };
-function _DatePicker({ errorMessage, componentSize, tip, style, ...props }, forwardedRef) {
-  const state = (0, import_datepicker4.useDatePickerState)(props);
+function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props }, forwardedRef) {
+  const state = (0, import_datepicker5.useDatePickerState)(props);
   const domRef = useFocusManagerRef(
     refIsFocusable(import_react85.forwardRef) ? forwardedRef : null
   );
   const ref = (0, import_react85.useRef)(null);
   const combinedRef = useCombinedRef(ref, domRef);
-  const { buttonProps, calendarProps, fieldProps } = (0, import_datepicker5.useDatePicker)(
+  const { buttonProps, calendarProps, fieldProps } = (0, import_datepicker4.useDatePicker)(
     { ...props, granularity: "day" },
     state,
     ref
@@ -11117,7 +11129,8 @@ function _DatePicker({ errorMessage, componentSize, tip, style, ...props }, forw
         errorMessage,
         buttonProps,
         isOpen: state.isOpen,
-        style
+        style,
+        width
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(CalendarPopoverContent, { children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Calendar, { ...calendarProps }) })
@@ -11127,9 +11140,9 @@ var DatePicker = (0, import_react85.forwardRef)(_DatePicker);
 DatePicker.displayName = "DatePicker";
 
 // src/components/date-inputs/TimePicker/TimePicker.tsx
-var import_react86 = require("react");
 var import_datepicker6 = require("@react-aria/datepicker");
 var import_datepicker7 = require("@react-stately/datepicker");
+var import_react86 = require("react");
 var import_styled_components74 = __toESM(require("styled-components"));
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var TimePickerIcon = (0, import_styled_components74.default)(Icon)`
@@ -11137,7 +11150,7 @@ var TimePickerIcon = (0, import_styled_components74.default)(Icon)`
   width: ${({ $componentSize }) => datePickerTokens.calendarButton[$componentSize].size};
   margin-left: -1px; // To align with TextInputs icons
 `;
-function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
+function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef) {
   const ref = (0, import_react86.useRef)(null);
   const state = (0, import_datepicker7.useTimeFieldState)({
     ...props,
@@ -11153,6 +11166,7 @@ function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
     DateInput,
     {
       ...props,
+      width,
       disabled,
       required: props.isRequired,
       componentSize,
@@ -11192,6 +11206,26 @@ function nativeDateToDateValue(date, timeZone = "Europe/Oslo") {
 function dateValueToNativeDate(date, timeZone = "Europe/Oslo") {
   return date.toDate(timeZone);
 }
+function nativeDateToCalendarDate(date) {
+  return new import_date6.CalendarDate(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate()
+  );
+}
+function nativeDateToTime(date) {
+  return new import_date6.Time(date.getHours(), date.getMinutes(), date.getSeconds());
+}
+function calendarDateToNativeDate(date, time = new import_date6.Time(12, 0, 0, 0)) {
+  return new Date(
+    date.year,
+    date.month - 1,
+    date.day,
+    time.hour,
+    time.minute,
+    time.second
+  );
+}
 
 // src/components/Popover/Popover.tsx
 var import_dds_design_tokens46 = require("@norges-domstoler/dds-design-tokens");
@@ -11560,8 +11594,8 @@ var ToggleButtonGroup = (props) => {
 ToggleButtonGroup.displayName = "ToggleButtonGroup";
 
 // src/components/Tabs/Tabs.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
 var import_react92 = require("react");
+var import_styled_components78 = __toESM(require("styled-components"));
 
 // src/components/Tabs/Tabs.context.tsx
 var import_react91 = require("react");
@@ -12435,6 +12469,15 @@ ToggleRadio.displayName = "ToggleRadio";
 // src/components/Grid/Grid.tsx
 var import_styled_components87 = __toESM(require("styled-components"));
 
+// src/components/Grid/Grid.context.tsx
+var import_react104 = require("react");
+var GridContext = (0, import_react104.createContext)({
+  screenSize: 3 /* Large */
+});
+var useGridContext = () => {
+  return (0, import_react104.useContext)(GridContext);
+};
+
 // src/components/Grid/Grid.tokens.tsx
 var import_dds_design_tokens52 = require("@norges-domstoler/dds-design-tokens");
 var { grid: grid2, spacing: spacing33 } = import_dds_design_tokens52.ddsBaseTokens;
@@ -12529,15 +12572,6 @@ var gridTokens2 = {
   }
 };
 
-// src/components/Grid/Grid.context.tsx
-var import_react104 = require("react");
-var GridContext = (0, import_react104.createContext)({
-  screenSize: 3 /* Large */
-});
-var useGridContext = () => {
-  return (0, import_react104.useContext)(GridContext);
-};
-
 // src/components/Grid/Grid.tsx
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var getHooksGridStyling = (screenSize, maxWidth, rowGap) => {
@@ -13656,6 +13690,7 @@ var File = (props) => {
 };
 
 // src/components/FileUploader/useFileUploader.ts
+var import_file_selector = require("file-selector");
 var import_react116 = require("react");
 
 // src/components/FileUploader/fileUploaderReducer.ts
@@ -13693,9 +13728,6 @@ var fileUploaderReducer = (state, action) => {
   }
 };
 
-// src/components/FileUploader/useFileUploader.ts
-var import_file_selector = require("file-selector");
-
 // src/components/FileUploader/utils.ts
 var import_attr_accept = __toESM(require("attr-accept"));
 var preventDefaults = (event) => {
@@ -14111,65 +14143,14 @@ BackLink.displayName = "BackLink";
 // src/components/Feedback/Feedback.tsx
 var import_react119 = require("react");
 
-// src/components/Feedback/RatingComponent.tsx
-var import_styled_components100 = __toESM(require("styled-components"));
+// src/components/Feedback/CommentComponent.tsx
 var import_dds_design_tokens61 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components100 = __toESM(require("styled-components"));
 var import_jsx_runtime272 = require("react/jsx-runtime");
-var RatingContainer = import_styled_components100.default.div`
-  display: flex;
-  gap: ${import_dds_design_tokens61.ddsBaseTokens.spacing.SizesDdsSpacingX1};
-  ${({ $layout }) => import_styled_components100.css`
-    flex-direction: ${$layout === "horizontal" ? "row" : "column"};
-    align-items: ${$layout === "horizontal" ? "center" : "start"};
-  `}
-`;
-var RatingButton = (0, import_styled_components100.default)(Button)`
-  padding: 0px;
-  color: ${import_dds_design_tokens61.ddsBaseTokens.colors.DdsColorNeutralsGray7};
-`;
-var RatingComponent = ({
-  layout,
-  ratingLabel,
-  loading,
-  thumbUpTooltip,
-  thumbDownTooltip,
-  handleRatingChange
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(RatingContainer, { $layout: layout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(Label, { children: ratingLabel }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(HStack, { gap: "x1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
-        RatingButton,
-        {
-          htmlProps: { "aria-label": thumbUpTooltip },
-          icon: Thumbup,
-          appearance: "borderless",
-          onClick: () => handleRatingChange("positive"),
-          size: "large"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
-        RatingButton,
-        {
-          htmlProps: { "aria-label": thumbDownTooltip },
-          icon: Thumbdown,
-          appearance: "borderless",
-          onClick: () => handleRatingChange("negative"),
-          size: "large"
-        }
-      ) }) })
-    ] })
-  ] });
-};
-
-// src/components/Feedback/CommentComponent.tsx
-var import_styled_components101 = __toESM(require("styled-components"));
-var import_dds_design_tokens62 = require("@norges-domstoler/dds-design-tokens");
-var import_jsx_runtime273 = require("react/jsx-runtime");
-var IconLabelSpan = import_styled_components101.default.span`
+var IconLabelSpan = import_styled_components100.default.span`
   display: inline-flex;
   align-items: center;
-  gap: ${import_dds_design_tokens62.ddsBaseTokens.spacing.SizesDdsSpacingX05};
+  gap: ${import_dds_design_tokens61.ddsBaseTokens.spacing.SizesDdsSpacingX05};
 `;
 var CommentComponent = ({
   rating,
@@ -14181,21 +14162,21 @@ var CommentComponent = ({
   handleSubmit,
   handleFeedbackTextChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(VStack, { gap: "x1", align: "flex-start", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(IconLabelSpan, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(VStack, { gap: "x1", align: "flex-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(IconLabelSpan, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
         Icon,
         {
           icon: rating === "positive" ? ThumbupFilled : ThumbdownFilled,
-          color: import_dds_design_tokens62.ddsBaseTokens.colors.DdsColorInteractiveBase
+          color: import_dds_design_tokens61.ddsBaseTokens.colors.DdsColorInteractiveBase
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Paragraph, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
       TextArea,
       {
         value: feedbackText,
@@ -14204,7 +14185,7 @@ var CommentComponent = ({
         tip: "Ikke send inn personopplysninger eller annen sensitiv informasjon"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
       Button,
       {
         purpose: "secondary",
@@ -14217,6 +14198,57 @@ var CommentComponent = ({
   ] });
 };
 
+// src/components/Feedback/RatingComponent.tsx
+var import_dds_design_tokens62 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components101 = __toESM(require("styled-components"));
+var import_jsx_runtime273 = require("react/jsx-runtime");
+var RatingContainer = import_styled_components101.default.div`
+  display: flex;
+  gap: ${import_dds_design_tokens62.ddsBaseTokens.spacing.SizesDdsSpacingX1};
+  ${({ $layout }) => import_styled_components101.css`
+    flex-direction: ${$layout === "horizontal" ? "row" : "column"};
+    align-items: ${$layout === "horizontal" ? "center" : "start"};
+  `}
+`;
+var RatingButton = (0, import_styled_components101.default)(Button)`
+  padding: 0px;
+  color: ${import_dds_design_tokens62.ddsBaseTokens.colors.DdsColorNeutralsGray7};
+`;
+var RatingComponent = ({
+  layout,
+  ratingLabel,
+  loading,
+  thumbUpTooltip,
+  thumbDownTooltip,
+  handleRatingChange
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(RatingContainer, { $layout: layout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Label, { children: ratingLabel }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(HStack, { gap: "x1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+        RatingButton,
+        {
+          htmlProps: { "aria-label": thumbUpTooltip },
+          icon: Thumbup,
+          appearance: "borderless",
+          onClick: () => handleRatingChange("positive"),
+          size: "large"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+        RatingButton,
+        {
+          htmlProps: { "aria-label": thumbDownTooltip },
+          icon: Thumbdown,
+          appearance: "borderless",
+          onClick: () => handleRatingChange("negative"),
+          size: "large"
+        }
+      ) }) })
+    ] })
+  ] });
+};
+
 // src/components/Feedback/Feedback.tsx
 var import_jsx_runtime274 = require("react/jsx-runtime");
 var Feedback = ({
@@ -14544,6 +14576,7 @@ var Feedback = ({
   WarningIcon,
   ZoomInIcon,
   ZoomOutIcon,
+  calendarDateToNativeDate,
   cn,
   createSelectOptions,
   dangerInputfield,
@@ -14581,7 +14614,9 @@ var Feedback = ({
   isInlineElement,
   isKeyboardEvent,
   isRelativeGridColumn,
+  nativeDateToCalendarDate,
   nativeDateToDateValue,
+  nativeDateToTime,
   normalizeButton,
   outlineOffset,
   removeButtonStyling,