@norges-domstoler/dds-components 16.0.0 → 16.1.0

package/dist/index.mjs

@@ -413,14 +413,15 @@ var Input_default = {
   input: "Input_input",
   disabled: "Input_disabled",
   "read-only": "Input_read-only",
-  active: "Input_active",
   "input--stateful": "Input_input--stateful",
   "input--hover": "Input_input--hover",
   "input--stateful-danger": "Input_input--stateful-danger",
   "input--medium": "Input_input--medium",
   "input--small": "Input_input--small",
   "input--tiny": "Input_input--tiny",
-  "input--with-affix": "Input_input--with-affix"
+  "input--with-affix": "Input_input--with-affix",
+  label: "Input_label",
+  "char-counter": "Input_char-counter"
 };
 
 // src/components/Typography/Caption/Caption.tsx
@@ -1044,6 +1045,7 @@ __export(icons_exports, {
   VisibilityOffIcon: () => VisibilityOffIcon,
   VisibilityOnIcon: () => VisibilityOnIcon,
   WarningIcon: () => WarningIcon,
+  WebexIcon: () => WebexIcon,
   XIcon: () => XIcon,
   ZoomInIcon: () => ZoomInIcon,
   ZoomOutIcon: () => ZoomOutIcon
@@ -2031,68 +2033,74 @@ function WarningIcon(props) {
   ] });
 }
 
-// src/components/Icon/icons/x.tsx
+// src/components/Icon/icons/webex.tsx
 import { jsx as jsx155 } from "react/jsx-runtime";
+function WebexIcon(props) {
+  return /* @__PURE__ */ jsx155(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx155("path", { d: "M21.78 7.37601C22.292 8.55701 21.812 10.02 20.67 10.482C18.513 11.37 17.67 9.18701 17.67 9.18701C17.434 8.63701 16.943 7.69101 16.335 7.69101C16.131 7.69101 15.832 7.69101 15.395 8.53501C15.166 8.97801 14.961 9.72001 14.779 10.375L14.689 10.695C14.316 9.10801 13.868 7.24101 13.153 5.87901C12.9577 5.49901 12.7333 5.13901 12.48 4.79901C12.957 4.23202 13.5518 3.77577 14.223 3.46201C14.8838 3.15234 15.6053 2.99416 16.335 2.99901C17.38 2.99901 19.1 3.33701 20.562 5.22601C20.7294 5.43201 20.8787 5.65001 21.01 5.88001C21.288 6.32201 21.53 6.78301 21.736 7.26301L21.779 7.37601H21.78ZM0.0200176 8.40001C-0.149982 7.10501 0.800018 5.84501 1.95302 5.75501C3.74702 5.59801 4.31302 7.14001 4.40802 7.64501L4.43002 7.78201C4.50002 8.22201 4.72002 9.62001 4.91002 10.526C4.98802 10.926 5.15402 11.539 5.26302 11.942L5.26902 11.964L5.29502 12.056C5.40568 12.4567 5.52635 12.8543 5.65702 13.249C5.84235 13.797 6.05602 14.3337 6.29802 14.859C6.76802 15.814 7.22802 16.309 7.66502 16.309C7.86802 16.309 8.17702 16.309 8.62502 15.431C8.90802 14.841 9.13702 14.223 9.30902 13.586C9.68202 15.184 10.12 16.714 10.804 18.042C11.0094 18.4487 11.2477 18.8353 11.519 19.202C11.0424 19.7692 10.448 20.2258 9.77702 20.54C9.11612 20.849 8.39456 21.0065 7.66502 21.001C6.11702 21.001 3.93802 20.303 2.32602 16.996C1.90236 16.0805 1.54218 15.1369 1.24802 14.172C0.972135 13.299 0.740836 12.4125 0.555018 11.516C0.479054 11.1455 0.407383 10.7742 0.340018 10.402C0.212232 9.73822 0.105512 9.07055 0.0200176 8.40001ZM22.067 5.75501L21.865 5.73301H21.813C22.035 6.12501 22.234 6.53001 22.41 6.94801L22.463 7.06101C22.7839 7.82146 22.8082 8.67455 22.531 9.45201C22.2637 10.2164 21.7061 10.8447 20.979 11.201C20.5951 11.3832 20.1759 11.4788 19.751 11.481C19.4614 11.4761 19.174 11.4307 18.897 11.346C18.598 12.528 18.129 13.98 17.702 14.857C17.275 15.734 16.772 16.308 16.324 16.308C16.132 16.308 15.823 16.308 15.374 15.431C15.0917 14.8376 14.8631 14.2202 14.691 13.586C14.5481 13.0638 14.4161 12.5387 14.295 12.011C14.245 11.8128 14.1996 11.6134 14.159 11.413L14.157 11.403C13.751 9.62501 13.292 7.75801 12.502 6.26101C12.2274 5.74058 11.8982 5.25082 11.52 4.80001C11.0419 4.23136 10.4453 3.77403 9.77202 3.46001C9.10921 3.1505 8.3855 2.99332 7.65402 3.00001C6.61802 3.00001 4.90002 3.33801 3.43702 5.22801C3.90302 5.45101 4.30402 5.79001 4.60102 6.21201C4.90602 6.64501 5.10002 7.14501 5.16602 7.67001C5.24202 8.23301 5.42202 9.32401 5.63602 10.358L5.63702 10.365C5.65802 10.475 5.67902 10.586 5.71002 10.707C5.83602 10.367 5.96002 10.065 6.09002 9.75201L6.20202 9.48101L6.33002 9.18801C6.56502 8.63801 7.05602 7.69201 7.65402 7.69201C7.86702 7.69201 8.16702 7.69201 8.60402 8.53601C8.90002 9.14201 9.13602 9.77501 9.31002 10.426C9.44802 10.933 9.58602 11.473 9.70402 12.013C9.74402 12.161 9.77402 12.309 9.80502 12.457L9.81102 12.485C10.238 14.364 10.686 16.175 11.455 17.672C11.6137 17.99 11.7954 18.2937 12 18.583C12.15 18.7983 12.31 19.005 12.48 19.203C13.75 20.653 15.213 21.003 16.323 21.003C17.871 21.003 20.061 20.305 21.673 16.997C22.495 15.297 23.188 12.789 23.445 11.517C23.701 10.247 23.894 9.09801 23.979 8.40201C24.0636 7.78698 23.9086 7.16296 23.546 6.65901C23.37 6.41602 23.1482 6.20982 22.893 6.05201C22.6416 5.89628 22.3601 5.79441 22.067 5.75501Z" }) });
+}
+
+// src/components/Icon/icons/x.tsx
+import { jsx as jsx156 } from "react/jsx-runtime";
 function XIcon(props) {
-  return /* @__PURE__ */ jsx155(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx155("path", { d: "M17.7508 3H20.8175L14.1175 10.6583L22 21.0775H15.8283L10.995 14.7575L5.46333 21.0775H2.395L9.56167 12.8858L2 3.00083H8.32833L12.6975 8.7775L17.7508 3ZM16.675 19.2425H18.3742L7.405 4.73917H5.58167L16.675 19.2425Z" }) });
+  return /* @__PURE__ */ jsx156(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx156("path", { d: "M17.7508 3H20.8175L14.1175 10.6583L22 21.0775H15.8283L10.995 14.7575L5.46333 21.0775H2.395L9.56167 12.8858L2 3.00083H8.32833L12.6975 8.7775L17.7508 3ZM16.675 19.2425H18.3742L7.405 4.73917H5.58167L16.675 19.2425Z" }) });
 }
 
 // src/components/Icon/icons/zoomIn.tsx
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx157 } from "react/jsx-runtime";
 function ZoomInIcon(props) {
-  return /* @__PURE__ */ jsx156(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx156("path", { d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z" }) });
+  return /* @__PURE__ */ jsx157(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx157("path", { d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z" }) });
 }
 
 // src/components/Icon/icons/zoomOut.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 function ZoomOutIcon(props) {
-  return /* @__PURE__ */ jsx157(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx157("path", { d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7V9z" }) });
+  return /* @__PURE__ */ jsx158(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx158("path", { d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7V9z" }) });
 }
 
 // src/components/Icon/icons/barChart.tsx
-import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 function BarChartIcon(props) {
-  return /* @__PURE__ */ jsx158(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx158("path", { d: "M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z" }) });
+  return /* @__PURE__ */ jsx159(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx159("path", { d: "M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z" }) });
 }
 
 // src/components/Icon/icons/barChartBoxed.tsx
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 function BarChartBoxedIcon(props) {
-  return /* @__PURE__ */ jsx159(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx159("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7v-7zm4-3h2v10h-2V7zm4 6h2v4h-2v-4z" }) });
+  return /* @__PURE__ */ jsx160(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx160("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7v-7zm4-3h2v10h-2V7zm4 6h2v4h-2v-4z" }) });
 }
 
 // src/components/Icon/icons/lineChart.tsx
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 function LineChartIcon(props) {
-  return /* @__PURE__ */ jsx160(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx160("path", { d: "M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z" }) });
+  return /* @__PURE__ */ jsx161(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx161("path", { d: "M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z" }) });
 }
 
 // src/components/Icon/icons/trendingUp.tsx
-import { jsx as jsx161 } from "react/jsx-runtime";
+import { jsx as jsx162 } from "react/jsx-runtime";
 function TrendingUpIcon(props) {
-  return /* @__PURE__ */ jsx161(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx161("path", { d: "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z" }) });
+  return /* @__PURE__ */ jsx162(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx162("path", { d: "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z" }) });
 }
 
 // src/components/Icon/icons/trendingDown.tsx
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx163 } from "react/jsx-runtime";
 function TrendingDownIcon(props) {
-  return /* @__PURE__ */ jsx162(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx162("path", { d: "M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6h-6z" }) });
+  return /* @__PURE__ */ jsx163(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx163("path", { d: "M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6h-6z" }) });
 }
 
 // src/components/Icon/icons/libraryAdd.tsx
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
 function LibraryAddIcon(props) {
-  return /* @__PURE__ */ jsx163(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx163("path", { d: "M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7-2h2v-3h3V9h-3V6h-2v3h-3v2h3v3z" }) });
+  return /* @__PURE__ */ jsx164(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx164("path", { d: "M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zm-7-2h2v-3h3V9h-3V6h-2v3h-3v2h3v3z" }) });
 }
 
 // src/components/Icon/icons/helpSimple.tsx
-import { jsx as jsx164 } from "react/jsx-runtime";
+import { jsx as jsx165 } from "react/jsx-runtime";
 function HelpSimpleIcon(props) {
-  return /* @__PURE__ */ jsx164(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx164("path", { d: "M13.25 21H10.75V18.5714H13.25V21ZM15.8375 11.5893L14.7125 12.7064C13.8125 13.5929 13.25 14.3214 13.25 16.1429H10.75V15.5357C10.75 14.2 11.3125 12.9857 12.2125 12.0993L13.7625 10.5693C14.225 10.1321 14.5 9.525 14.5 8.85714C14.5 7.52143 13.375 6.42857 12 6.42857C10.625 6.42857 9.5 7.52143 9.5 8.85714H7C7 6.17357 9.2375 4 12 4C14.7625 4 17 6.17357 17 8.85714C17 9.92571 16.55 10.8971 15.8375 11.5893Z" }) });
+  return /* @__PURE__ */ jsx165(SvgWrapper, { ...props, children: /* @__PURE__ */ jsx165("path", { d: "M13.25 21H10.75V18.5714H13.25V21ZM15.8375 11.5893L14.7125 12.7064C13.8125 13.5929 13.25 14.3214 13.25 16.1429H10.75V15.5357C10.75 14.2 11.3125 12.9857 12.2125 12.0993L13.7625 10.5693C14.225 10.1321 14.5 9.525 14.5 8.85714C14.5 7.52143 13.375 6.42857 12 6.42857C10.625 6.42857 9.5 7.52143 9.5 8.85714H7C7 6.17357 9.2375 4 12 4C14.7625 4 17 6.17357 17 8.85714C17 9.92571 16.55 10.8971 15.8375 11.5893Z" }) });
 }
 
 // src/components/Typography/Typography/Typography.tsx
-import { jsx as jsx165, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs17 } from "react/jsx-runtime";
 var isAnchorProps = (props) => props.typographyType === "a";
 var Typography = forwardRef3(
   (props, ref) => {
@@ -2158,7 +2166,7 @@ var Typography = forwardRef3(
         rel: relProp,
         children: [
           children,
-          externalLinkProp && /* @__PURE__ */ jsx165(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
+          externalLinkProp && /* @__PURE__ */ jsx166(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
         ]
       }
     );
@@ -2167,11 +2175,11 @@ var Typography = forwardRef3(
 Typography.displayName = "Typography";
 
 // src/components/Typography/Caption/Caption.tsx
-import { jsx as jsx166 } from "react/jsx-runtime";
+import { jsx as jsx167 } from "react/jsx-runtime";
 var Caption = forwardRef4(
   (props, ref) => {
     const { id, className, htmlProps, children, ...rest } = props;
-    return /* @__PURE__ */ jsx166(
+    return /* @__PURE__ */ jsx167(
       Typography,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -2519,7 +2527,7 @@ var useScreenSize = function() {
 };
 
 // src/components/Typography/Heading/Heading.tsx
-import { jsx as jsx167 } from "react/jsx-runtime";
+import { jsx as jsx168 } from "react/jsx-runtime";
 var getHeadingElement = (level) => `h${level}`;
 var getDefaultTypographyType = (h) => {
   switch (h) {
@@ -2576,14 +2584,14 @@ var Heading = forwardRef5(
       as: headingElement,
       ref
     };
-    return /* @__PURE__ */ jsx167(Typography, { ...headingProps, children });
+    return /* @__PURE__ */ jsx168(Typography, { ...headingProps, children });
   }
 );
 Heading.displayName = "Heading";
 
 // src/components/Typography/Label/Label.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx168, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs18 } from "react/jsx-runtime";
 var Label = forwardRef6((props, ref) => {
   const { showRequiredStyling, id, className, htmlProps, children, ...rest } = props;
   return /* @__PURE__ */ jsxs18(
@@ -2594,7 +2602,7 @@ var Label = forwardRef6((props, ref) => {
       typographyType: "supportingStyleLabel01",
       children: [
         children,
-        showRequiredStyling && /* @__PURE__ */ jsx168(RequiredMarker, {})
+        showRequiredStyling && /* @__PURE__ */ jsx169(RequiredMarker, {})
       ]
     }
   );
@@ -2603,11 +2611,11 @@ Label.displayName = "Label";
 
 // src/components/Typography/Legend/Legend.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx169 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var Legend = forwardRef7(
   (props, ref) => {
     const { id, className, htmlProps, children, ...rest } = props;
-    return /* @__PURE__ */ jsx169(
+    return /* @__PURE__ */ jsx170(
       Typography,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -2623,7 +2631,7 @@ Legend.displayName = "Legend";
 
 // src/components/Typography/Link/Link.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx170, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx171, jsxs as jsxs19 } from "react/jsx-runtime";
 var Link = forwardRef8((props, ref) => {
   const {
     id,
@@ -2660,7 +2668,7 @@ var Link = forwardRef8((props, ref) => {
       target: external ? "_blank" : target,
       children: [
         children,
-        external && /* @__PURE__ */ jsx170(Icon, { iconSize: "inherit", icon: OpenExternalIcon })
+        external && /* @__PURE__ */ jsx171(Icon, { iconSize: "inherit", icon: OpenExternalIcon })
       ]
     }
   );
@@ -2669,7 +2677,7 @@ Link.displayName = "Link";
 
 // src/components/Typography/Paragraph/Paragraph.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 var Paragraph = forwardRef9(
   (props, ref) => {
     const {
@@ -2680,7 +2688,7 @@ var Paragraph = forwardRef9(
       typographyType = "bodySans02",
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx171(
+    return /* @__PURE__ */ jsx172(
       Typography,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -2694,7 +2702,7 @@ var Paragraph = forwardRef9(
 Paragraph.displayName = "Paragraph";
 
 // src/components/helpers/Input/Input.tsx
-import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 var inputTypographyTypes = {
   medium: "bodySans02",
   small: "bodySans01",
@@ -2702,7 +2710,7 @@ var inputTypographyTypes = {
 };
 var Input = forwardRef10((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx172(
+  return /* @__PURE__ */ jsx173(
     "input",
     {
       ref,
@@ -2720,7 +2728,7 @@ var StatefulInput = forwardRef10(
       hasErrorMessage,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx172(
+    return /* @__PURE__ */ jsx173(
       Input,
       {
         ref,
@@ -2738,6 +2746,38 @@ var StatefulInput = forwardRef10(
 );
 StatefulInput.displayName = "StatefulInput";
 
+// src/components/helpers/Input/CharCounter.tsx
+import { useId } from "react";
+import { jsx as jsx174, jsxs as jsxs20 } from "react/jsx-runtime";
+function CharCounter(props) {
+  const { current, max, id, className, htmlProps, ...rest } = props;
+  const generatedId = useId();
+  const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
+  return /* @__PURE__ */ jsxs20(
+    Typography,
+    {
+      ...getBaseHTMLProps(
+        uniqueId,
+        cn(className, Input_default["char-counter"]),
+        htmlProps,
+        rest
+      ),
+      as: "div",
+      typographyType: "supportingStyleHelperText01",
+      "aria-label": `${current} av ${max} tegn skrevet`,
+      children: [
+        current,
+        "/",
+        max
+      ]
+    }
+  );
+}
+var renderCharCounter = (id, isShown, textLength, maxLength) => {
+  if (!!maxLength && Number.isInteger(maxLength) && maxLength > 0 && isShown)
+    return /* @__PURE__ */ jsx174(CharCounter, { id, max: maxLength, current: textLength });
+};
+
 // src/components/helpers/Input/Input.utils.tsx
 function getDefaultText(value, defaultValue) {
   if (typeof value === "string") {
@@ -2765,11 +2805,11 @@ var Paper_default = {
 };
 
 // src/components/helpers/Paper/Paper.tsx
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var Paper = forwardRef11((props, ref) => {
   const { elevation, border, className, ...rest } = props;
   const borderCn = border === "default" || border === "subtle" ? border : "on-inverse";
-  return /* @__PURE__ */ jsx173(
+  return /* @__PURE__ */ jsx175(
     "div",
     {
       ref,
@@ -4190,10 +4230,10 @@ var BackLink_default = {
 };
 
 // src/components/BackLink/BackLink.tsx
-import { jsx as jsx174, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx176, jsxs as jsxs21 } from "react/jsx-runtime";
 var BackLink = forwardRef12((props, ref) => {
-  return /* @__PURE__ */ jsx174("nav", { ref, "aria-label": "g\xE5 tilbake", children: /* @__PURE__ */ jsxs20(Link, { href: props.href, className: BackLink_default.link, children: [
-    /* @__PURE__ */ jsx174(Icon, { icon: ArrowLeftIcon, iconSize: "small" }),
+  return /* @__PURE__ */ jsx176("nav", { ref, "aria-label": "g\xE5 tilbake", children: /* @__PURE__ */ jsxs21(Link, { href: props.href, className: BackLink_default.link, children: [
+    /* @__PURE__ */ jsx176(Icon, { icon: ArrowLeftIcon, iconSize: "small" }),
     props.label
   ] }) });
 });
@@ -4203,7 +4243,7 @@ BackLink.displayName = "BackLink";
 import {
   forwardRef as forwardRef13
 } from "react";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import { jsx as jsx177 } from "react/jsx-runtime";
 var isAnchorTypographyProps = (props) => {
   return props.href != void 0;
 };
@@ -4211,9 +4251,9 @@ var Breadcrumb = forwardRef13(
   (props, ref) => {
     const { children, ...rest } = props;
     if (isAnchorTypographyProps(props)) {
-      return /* @__PURE__ */ jsx175(Typography, { htmlProps: rest, ref, typographyType: "a", children });
+      return /* @__PURE__ */ jsx177(Typography, { htmlProps: rest, ref, typographyType: "a", children });
     }
-    return /* @__PURE__ */ jsx175(Typography, { htmlProps: rest, ref, as: "span", children });
+    return /* @__PURE__ */ jsx177(Typography, { htmlProps: rest, ref, as: "span", children });
   }
 );
 Breadcrumb.displayName = "Breadcrumb";
@@ -4305,7 +4345,7 @@ var buttonTokens = {
 
 // src/components/Spinner/Spinner.tsx
 import { ddsTokens as ddsTokens11 } from "@norges-domstoler/dds-design-tokens";
-import { useId, useRef as useRef4 } from "react";
+import { useId as useId2, useRef as useRef4 } from "react";
 
 // src/components/Spinner/Spinner.module.css
 var Spinner_default = {
@@ -4316,7 +4356,7 @@ var Spinner_default = {
 };
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx176, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs22 } from "react/jsx-runtime";
 function Spinner(props) {
   const {
     size: size2 = ddsTokens11.DdsIconSizeMedium,
@@ -4330,9 +4370,9 @@ function Spinner(props) {
   const mountTime = useRef4(Date.now());
   const outerAnimationDelay = -(mountTime.current % 2e3);
   const innerAnimationDelay = -(mountTime.current % 1500);
-  const generatedId = useId();
+  const generatedId = useId2();
   const uniqueId = `${generatedId}-spinnerTitle`;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       viewBox: "0 0 50 50",
@@ -4346,8 +4386,8 @@ function Spinner(props) {
         animationDelay: outerAnimationDelay + "ms"
       },
       children: [
-        /* @__PURE__ */ jsx176("title", { id: uniqueId, children: tooltip }),
-        /* @__PURE__ */ jsx176(
+        /* @__PURE__ */ jsx178("title", { id: uniqueId, children: tooltip }),
+        /* @__PURE__ */ jsx178(
           "circle",
           {
             className: cn(Spinner_default.circle),
@@ -4369,7 +4409,7 @@ function Spinner(props) {
 Spinner.displayName = "Spinner";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx177, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx179, jsxs as jsxs23 } from "react/jsx-runtime";
 var typographyTypes = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -4418,7 +4458,7 @@ var Button = forwardRef14(
       typographyStyles_default[getTypographyCn(typographyTypes[size2])],
       focusable
     );
-    const iconElement = hasIcon && /* @__PURE__ */ jsx177(
+    const iconElement = hasIcon && /* @__PURE__ */ jsx179(
       Icon,
       {
         icon: icon2,
@@ -4426,18 +4466,18 @@ var Button = forwardRef14(
         className: cn(Button_default.icon, loading && invisible)
       }
     );
-    const content = /* @__PURE__ */ jsxs22(Fragment, { children: [
-      hasLabel && /* @__PURE__ */ jsxs22(Fragment, { children: [
+    const content = /* @__PURE__ */ jsxs23(Fragment, { children: [
+      hasLabel && /* @__PURE__ */ jsxs23(Fragment, { children: [
         iconPosition === "left" && iconElement,
-        /* @__PURE__ */ jsx177("span", { "aria-hidden": loading, className: cn(loading && invisible), children }),
+        /* @__PURE__ */ jsx179("span", { "aria-hidden": loading, className: cn(loading && invisible), children }),
         iconPosition === "right" && iconElement
       ] }),
       isIconButton && iconElement,
-      loading && /* @__PURE__ */ jsx177(
+      loading && /* @__PURE__ */ jsx179(
         "span",
         {
           className: cn(!noContent && Button_default["spinner-wrapper--absolute"]),
-          children: /* @__PURE__ */ jsx177(
+          children: /* @__PURE__ */ jsx179(
             Spinner,
             {
               size: button2[size2].spinner.size,
@@ -4450,7 +4490,7 @@ var Button = forwardRef14(
       )
     ] });
     if (!href)
-      return /* @__PURE__ */ jsx177(
+      return /* @__PURE__ */ jsx179(
         "button",
         {
           ref,
@@ -4463,7 +4503,7 @@ var Button = forwardRef14(
         }
       );
     else if (href)
-      return /* @__PURE__ */ jsx177(
+      return /* @__PURE__ */ jsx179(
         "a",
         {
           ref,
@@ -4492,7 +4532,7 @@ Button.displayName = "Button";
 
 // src/components/OverflowMenu/OverflowMenu.tsx
 import { ddsTokens as ddsTokens12 } from "@norges-domstoler/dds-design-tokens";
-import { forwardRef as forwardRef17, useEffect as useEffect10, useId as useId2 } from "react";
+import { forwardRef as forwardRef17, useEffect as useEffect10, useId as useId3 } from "react";
 
 // src/components/OverflowMenu/OverflowMenu.module.css
 var OverflowMenu_default = {
@@ -4510,7 +4550,7 @@ import {
   useEffect as useEffect9,
   useRef as useRef5
 } from "react";
-import { jsx as jsx178, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs24 } from "react/jsx-runtime";
 var isAnchorProps2 = (props) => props.href !== void 0;
 var isButtonProps = (props) => props.href === void 0 && props.onClick !== void 0;
 var OverflowMenuItem = forwardRef15((props, ref) => {
@@ -4535,7 +4575,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
     role: "menuitem",
     tabIndex: focus ? 0 : -1
   };
-  const iconElement = icon2 && /* @__PURE__ */ jsx178(Icon, { iconSize: "inherit", icon: icon2 });
+  const iconElement = icon2 && /* @__PURE__ */ jsx180(Icon, { iconSize: "inherit", icon: icon2 });
   const wrapperCn = [
     className,
     OverflowMenu_default.list__item,
@@ -4548,7 +4588,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
     utilStyles_default["normalize-button"]
   ];
   if (!href && !onClick) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "span",
       {
         ...{ ...getBaseHTMLProps(id, cn(...wrapperCn), htmlProps, rest), ref },
@@ -4560,7 +4600,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
     );
   }
   if (!href) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "button",
       {
         ...getBaseHTMLProps(id, cn(...interactiveWrapperCn), htmlProps, rest),
@@ -4573,7 +4613,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "a",
     {
       ...getBaseHTMLProps(id, cn(...interactiveWrapperCn), htmlProps, rest),
@@ -4600,7 +4640,7 @@ var Divider_default = {
 };
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx181 } from "react/jsx-runtime";
 var Divider = forwardRef16((props, ref) => {
   const { color = "default", id, className, htmlProps, ...rest } = props;
   const colorCn = color === "default" || color === "subtle" ? color : "on-inverse";
@@ -4613,12 +4653,12 @@ var Divider = forwardRef16((props, ref) => {
     ),
     color
   };
-  return /* @__PURE__ */ jsx179("hr", { ref, ...lineProps });
+  return /* @__PURE__ */ jsx181("hr", { ref, ...lineProps });
 });
 Divider.displayName = "Divider";
 
 // src/components/OverflowMenu/OverflowMenu.tsx
-import { Fragment as Fragment2, jsx as jsx180, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx182, jsxs as jsxs25 } from "react/jsx-runtime";
 var OverflowMenu = forwardRef17(
   (props, ref) => {
     var _a, _b;
@@ -4679,7 +4719,7 @@ var OverflowMenu = forwardRef17(
     hasContextItems && interactiveItems.push(...items);
     const hasInteractiveItems = interactiveItems.length > 0;
     const [focus] = useRoveFocus(interactiveItems == null ? void 0 : interactiveItems.length, isOpen);
-    const interactiveItemsList = hasInteractiveItems ? interactiveItems.map((item, index) => /* @__PURE__ */ jsx180("li", { children: /* @__PURE__ */ jsx180(
+    const interactiveItemsList = hasInteractiveItems ? interactiveItems.map((item, index) => /* @__PURE__ */ jsx182("li", { children: /* @__PURE__ */ jsx182(
       OverflowMenuItem,
       {
         index,
@@ -4700,14 +4740,14 @@ var OverflowMenu = forwardRef17(
         const navItemsFirstPos = hasNavItems ? userPropsPos + 1 : -1;
         const navItemsLastPos = hasNavItems ? userPropsPos + navItems.length : -1;
         const contextItemsFirstPos = !hasContextItems ? -1 : hasNavItems ? navItemsLastPos + 1 : userPropsPos + 1;
-        return /* @__PURE__ */ jsxs24(Fragment2, { children: [
-          hasInteractiveUser && /* @__PURE__ */ jsx180("ul", { className: ulCn, children: interactiveItemsList == null ? void 0 : interactiveItemsList[0] }),
-          hasNavItems && /* @__PURE__ */ jsx180("nav", { children: /* @__PURE__ */ jsx180("ul", { className: ulCn, children: interactiveItemsList == null ? void 0 : interactiveItemsList.slice(
+        return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+          hasInteractiveUser && /* @__PURE__ */ jsx182("ul", { className: ulCn, children: interactiveItemsList == null ? void 0 : interactiveItemsList[0] }),
+          hasNavItems && /* @__PURE__ */ jsx182("nav", { children: /* @__PURE__ */ jsx182("ul", { className: ulCn, children: interactiveItemsList == null ? void 0 : interactiveItemsList.slice(
             navItemsFirstPos,
             navItemsLastPos + 1
           ) }) }),
-          hasNavItems && hasContextItems && /* @__PURE__ */ jsx180(Divider, { color: "subtle", className: OverflowMenu_default.divider }),
-          hasContextItems && /* @__PURE__ */ jsx180("ul", { className: ulCn, "aria-label": "kontekstmeny", children: interactiveItemsList == null ? void 0 : interactiveItemsList.slice(
+          hasNavItems && hasContextItems && /* @__PURE__ */ jsx182(Divider, { color: "subtle", className: OverflowMenu_default.divider }),
+          hasContextItems && /* @__PURE__ */ jsx182("ul", { className: ulCn, "aria-label": "kontekstmeny", children: interactiveItemsList == null ? void 0 : interactiveItemsList.slice(
             contextItemsFirstPos,
             interactiveItemsList.length
           ) })
@@ -4715,8 +4755,8 @@ var OverflowMenu = forwardRef17(
       }
     };
     const { style = {}, ...restHTMLProps } = htmlProps;
-    const generatedId = useId2();
-    return /* @__PURE__ */ jsxs24(
+    const generatedId = useId3();
+    return /* @__PURE__ */ jsxs25(
       Paper,
       {
         ref: combinedRef,
@@ -4737,7 +4777,7 @@ var OverflowMenu = forwardRef17(
         border: "default",
         style: { ...style, ...floatingStyles.floating },
         children: [
-          hasStaticUser && /* @__PURE__ */ jsx180(OverflowMenuItem, { title: username, icon: PersonIcon }),
+          hasStaticUser && /* @__PURE__ */ jsx182(OverflowMenuItem, { title: username, icon: PersonIcon }),
           interactiveContent()
         ]
       }
@@ -4751,11 +4791,11 @@ import {
   Children as ReactChildren,
   cloneElement,
   isValidElement,
-  useId as useId3,
+  useId as useId4,
   useRef as useRef6,
   useState as useState4
 } from "react";
-import { Fragment as Fragment3, jsx as jsx181 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx183 } from "react/jsx-runtime";
 var OverflowMenuGroup = ({
   children,
   onClose,
@@ -4767,7 +4807,7 @@ var OverflowMenuGroup = ({
   const toggle = () => setIsOpen(!isOpen);
   const close = () => setIsOpen(false);
   const buttonRef = useRef6(null);
-  const generatedId = useId3();
+  const generatedId = useId4();
   const uniqueOverflowMenuId = overflowMenuId != null ? overflowMenuId : `${generatedId}-overflowMenu`;
   const handleClose = () => {
     onClose && onClose();
@@ -4794,16 +4834,16 @@ var OverflowMenuGroup = ({
       anchorRef: buttonRef
     }));
   });
-  return /* @__PURE__ */ jsx181(Fragment3, { children: Children8 });
+  return /* @__PURE__ */ jsx183(Fragment3, { children: Children8 });
 };
 OverflowMenuGroup.displayName = "OverflowMenuGroup";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Fragment as Fragment4, jsx as jsx182, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx184, jsxs as jsxs26 } from "react/jsx-runtime";
 var Breadcrumbs = forwardRef18(
   (props, ref) => {
     const { children, smallScreen, id, className, htmlProps, ...rest } = props;
-    const chevronIcon = /* @__PURE__ */ jsx182(
+    const chevronIcon = /* @__PURE__ */ jsx184(
       Icon,
       {
         className: cn(Breadcrumbs_default.icon),
@@ -4817,7 +4857,7 @@ var Breadcrumbs = forwardRef18(
       !smallScreen && Breadcrumbs_default[`list-item--large-screen`]
     );
     const breadcrumbChildren = childrenArray.map((item, index) => {
-      return /* @__PURE__ */ jsxs25("li", { className: listItemCn, children: [
+      return /* @__PURE__ */ jsxs26("li", { className: listItemCn, children: [
         index !== 0 && chevronIcon,
         item
       ] }, `breadcrumb-${index}`);
@@ -4829,12 +4869,12 @@ var Breadcrumbs = forwardRef18(
           href: item.props.href
         };
     }).filter((item) => item) : [];
-    const breadcrumbChildrenSmallScreen = /* @__PURE__ */ jsxs25(Fragment4, { children: [
-      /* @__PURE__ */ jsx182("li", { className: listItemCn, children: childrenArray[0] }),
-      breadcrumbChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs25("li", { className: listItemCn, children: [
+    const breadcrumbChildrenSmallScreen = /* @__PURE__ */ jsxs26(Fragment4, { children: [
+      /* @__PURE__ */ jsx184("li", { className: listItemCn, children: childrenArray[0] }),
+      breadcrumbChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs26("li", { className: listItemCn, children: [
         chevronIcon,
-        /* @__PURE__ */ jsxs25(OverflowMenuGroup, { children: [
-          /* @__PURE__ */ jsx182(
+        /* @__PURE__ */ jsxs26(OverflowMenuGroup, { children: [
+          /* @__PURE__ */ jsx184(
             Button,
             {
               size: "tiny",
@@ -4843,21 +4883,21 @@ var Breadcrumbs = forwardRef18(
               "aria-label": `Vis br\xF8dsmulesti br\xF8dsmule 2 ${breadcrumbChildrenTruncated.length > 1 && `til ${breadcrumbChildren.length - 1}`}`
             }
           ),
-          /* @__PURE__ */ jsx182(OverflowMenu, { items: breadcrumbChildrenTruncated })
+          /* @__PURE__ */ jsx184(OverflowMenu, { items: breadcrumbChildrenTruncated })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs25("li", { className: listItemCn, children: [
+      /* @__PURE__ */ jsxs26("li", { className: listItemCn, children: [
         chevronIcon,
         childrenArray[childrenArray.length - 1]
       ] })
     ] });
-    return /* @__PURE__ */ jsx182(
+    return /* @__PURE__ */ jsx184(
       "nav",
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
         ref,
         "aria-label": "br\xF8dsmulesti",
-        children: /* @__PURE__ */ jsx182("ul", { className: cn(Breadcrumbs_default.list, utilStyles_default["remove-list-styling"]), children: smallScreen ? breadcrumbChildrenSmallScreen : breadcrumbChildren })
+        children: /* @__PURE__ */ jsx184("ul", { className: cn(Breadcrumbs_default.list, utilStyles_default["remove-list-styling"]), children: smallScreen ? breadcrumbChildrenSmallScreen : breadcrumbChildren })
       }
     );
   }
@@ -4880,7 +4920,7 @@ var ButtonGroup_default = {
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import { jsx as jsx183 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
 var ButtonGroup = forwardRef19(
   (props, ref) => {
     const {
@@ -4899,7 +4939,7 @@ var ButtonGroup = forwardRef19(
         size: buttonSize
       });
     });
-    return /* @__PURE__ */ jsx183(
+    return /* @__PURE__ */ jsx185(
       "div",
       {
         ref,
@@ -4927,7 +4967,7 @@ var Card_default = {
 };
 
 // src/components/Card/Card.tsx
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
 var Card = (props) => {
   const {
     appearance = "filled",
@@ -4947,7 +4987,7 @@ var Card = (props) => {
   );
   if (cardType === "navigation") {
     const { href, target } = props;
-    return /* @__PURE__ */ jsx184(
+    return /* @__PURE__ */ jsx186(
       "a",
       {
         ...getBaseHTMLProps(
@@ -4962,22 +5002,22 @@ var Card = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx184("div", { ...getBaseHTMLProps(id, classNames, htmlProps, rest), ref: cardRef });
+  return /* @__PURE__ */ jsx186("div", { ...getBaseHTMLProps(id, classNames, htmlProps, rest), ref: cardRef });
 };
 Card.displayName = "Card";
 
 // src/components/Card/CardAccordion/CardAccordion.tsx
-import { forwardRef as forwardRef20, useCallback as useCallback4, useEffect as useEffect11, useId as useId4, useState as useState5 } from "react";
+import { forwardRef as forwardRef20, useCallback as useCallback4, useEffect as useEffect11, useId as useId5, useState as useState5 } from "react";
 
 // src/components/Card/CardAccordion/CardAccordionContext.tsx
 import { createContext, useContext } from "react";
-import { jsx as jsx185 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var CardAccordionContext = createContext({});
 var CardAccordionContextProvider = ({
   children,
   ...values
 }) => {
-  return /* @__PURE__ */ jsx185(CardAccordionContext.Provider, { value: values, children });
+  return /* @__PURE__ */ jsx187(CardAccordionContext.Provider, { value: values, children });
 };
 var useCardAccordionContext = () => {
   const context = useContext(CardAccordionContext);
@@ -4990,7 +5030,7 @@ var useCardAccordionContext = () => {
 };
 
 // src/components/Card/CardAccordion/CardAccordion.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx188 } from "react/jsx-runtime";
 var CardAccordion = forwardRef20(
   (props, ref) => {
     const {
@@ -5003,7 +5043,7 @@ var CardAccordion = forwardRef20(
       ...rest
     } = props;
     const [expanded, setExpanded] = useState5(isExpanded);
-    const generatedId = useId4();
+    const generatedId = useId5();
     const accordionId = id != null ? id : `${generatedId}-cardAccordion`;
     useEffect11(() => {
       setExpanded(isExpanded);
@@ -5017,7 +5057,7 @@ var CardAccordion = forwardRef20(
         return newExpanded;
       });
     }, [onChange]);
-    return /* @__PURE__ */ jsx186("div", { ...getBaseHTMLProps(id, className, htmlProps, rest), ref, children: /* @__PURE__ */ jsx186(
+    return /* @__PURE__ */ jsx188("div", { ...getBaseHTMLProps(id, className, htmlProps, rest), ref, children: /* @__PURE__ */ jsx188(
       CardAccordionContextProvider,
       {
         headerId: `${accordionId}-header`,
@@ -5048,7 +5088,7 @@ var CardAccordion_default = {
 };
 
 // src/components/Card/CardAccordion/CardAccordionHeader.tsx
-import { jsx as jsx187, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs27 } from "react/jsx-runtime";
 var CardAccordionHeader = forwardRef21((props, ref) => {
   const {
     children,
@@ -5069,7 +5109,7 @@ var CardAccordionHeader = forwardRef21((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-card-accordion-header-container-padding"]: padding != null ? padding : "var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x1-5)"
   };
-  return /* @__PURE__ */ jsx187(
+  return /* @__PURE__ */ jsx189(
     "button",
     {
       ...getBaseHTMLProps(
@@ -5089,7 +5129,7 @@ var CardAccordionHeader = forwardRef21((props, ref) => {
       "aria-controls": bodyId,
       "aria-expanded": isExpanded,
       type: "button",
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs27(
         "div",
         {
           style: containerStyleVariables,
@@ -5099,8 +5139,8 @@ var CardAccordionHeader = forwardRef21((props, ref) => {
             bold && typographyStyles_default.bold
           ),
           children: [
-            /* @__PURE__ */ jsx187("div", { className: CardAccordion_default.header__content, children }),
-            /* @__PURE__ */ jsx187("span", { className: CardAccordion_default.header__chevron, children: /* @__PURE__ */ jsx187(
+            /* @__PURE__ */ jsx189("div", { className: CardAccordion_default.header__content, children }),
+            /* @__PURE__ */ jsx189("span", { className: CardAccordion_default.header__chevron, children: /* @__PURE__ */ jsx189(
               AnimatedChevronUpDown,
               {
                 width: ddsTokens13.DdsIconSizeMedium,
@@ -5141,7 +5181,7 @@ function useElementHeight(element) {
 }
 
 // src/components/Card/CardAccordion/CardAccordionBody.tsx
-import { jsx as jsx188 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var CardAccordionBody = forwardRef22((props, ref) => {
   var _a;
   const { children, className, htmlProps, padding, ...rest } = props;
@@ -5169,7 +5209,7 @@ var CardAccordionBody = forwardRef22((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-card-accordion-body-content-padding"]: padding != null ? padding : "var(--dds-spacing-x1) calc(var(--dds-spacing-x2) + var(--dds-spacing-x0-75)) var(--dds-spacing-x2) var(--dds-spacing-x1-5)"
   };
-  return /* @__PURE__ */ jsx188(
+  return /* @__PURE__ */ jsx190(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5189,7 +5229,7 @@ var CardAccordionBody = forwardRef22((props, ref) => {
       "aria-labelledby": headerId,
       "aria-hidden": !isExpanded,
       style: { ...htmlProps == null ? void 0 : htmlProps.style, ...styleVariables },
-      children: /* @__PURE__ */ jsx188(
+      children: /* @__PURE__ */ jsx190(
         "div",
         {
           ref: bodyRef,
@@ -5213,7 +5253,7 @@ var Chip_default = {
 };
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx189, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs28 } from "react/jsx-runtime";
 var Chip = forwardRef23((props, ref) => {
   const { text, onClose, id, className, htmlProps = {}, ...rest } = props;
   const { "aria-label": ariaLabel, ...restHTMLprops } = htmlProps;
@@ -5222,7 +5262,7 @@ var Chip = forwardRef23((props, ref) => {
     setIsOpen(false);
     onClose && onClose();
   };
-  return isOpen ? /* @__PURE__ */ jsxs27(
+  return isOpen ? /* @__PURE__ */ jsxs28(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5233,14 +5273,14 @@ var Chip = forwardRef23((props, ref) => {
       ),
       ref,
       children: [
-        /* @__PURE__ */ jsx189(
+        /* @__PURE__ */ jsx191(
           TextOverflowEllipsisInner,
           {
             className: cn(typographyStyles_default["body-sans-01"]),
             children: text
           }
         ),
-        /* @__PURE__ */ jsx189(
+        /* @__PURE__ */ jsx191(
           Button,
           {
             size: "tiny",
@@ -5258,11 +5298,11 @@ Chip.displayName = "Chip";
 
 // src/components/Chip/ChipGroup.tsx
 import { Children as Children2, forwardRef as forwardRef24 } from "react";
-import { jsx as jsx190 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var ChipGroup = forwardRef24(
   ({ children, className, ...rest }, ref) => {
     const childrenArray = Children2.toArray(children);
-    return /* @__PURE__ */ jsx190(
+    return /* @__PURE__ */ jsx192(
       "ul",
       {
         ...rest,
@@ -5272,7 +5312,7 @@ var ChipGroup = forwardRef24(
           utilStyles_default["remove-list-styling"]
         ),
         ref,
-        children: childrenArray.map((item, index) => /* @__PURE__ */ jsx190("li", { children: item }, `chip-${index}`))
+        children: childrenArray.map((item, index) => /* @__PURE__ */ jsx192("li", { children: item }, `chip-${index}`))
       }
     );
   }
@@ -5306,9 +5346,6 @@ import { useContext as useContext3, useRef as useRef9 } from "react";
 
 // src/components/date-inputs/common/DateInput.module.css
 var DateInput_default = {
-  "container--medium": "DateInput_container--medium",
-  "container--small": "DateInput_container--small",
-  "container--tiny": "DateInput_container--tiny",
   "date-input": "DateInput_date-input",
   "date-input--medium": "DateInput_date-input--medium",
   "date-input--small": "DateInput_date-input--small",
@@ -5343,7 +5380,7 @@ import {
   useEffect as useEffect14,
   useRef as useRef8
 } from "react";
-import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext2({
   anchorRef: null,
   isOpen: false,
@@ -5356,13 +5393,13 @@ var CalendarPopover = ({
 }) => {
   const anchorRef = useRef8(null);
   useOnKeyDown("Escape", onClose);
-  return /* @__PURE__ */ jsx191(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
+  return /* @__PURE__ */ jsx193(CalendarPopoverContext.Provider, { value: { anchorRef, isOpen, onClose }, children });
 };
 var CalendarPopoverAnchor = ({
   children
 }) => {
   const { anchorRef } = useContext2(CalendarPopoverContext);
-  return /* @__PURE__ */ jsx191("div", { ref: anchorRef != null ? anchorRef : void 0, children });
+  return /* @__PURE__ */ jsx193("div", { ref: anchorRef != null ? anchorRef : void 0, children });
 };
 var CalendarPopoverContent = ({
   children
@@ -5379,7 +5416,7 @@ var CalendarPopoverContent = ({
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
   }, []);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx191(
+  return /* @__PURE__ */ jsx193(
     "div",
     {
       ref: combinedRef,
@@ -5395,7 +5432,7 @@ var locale = "no-NO";
 var timezone = "Europe/Oslo";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 function CalendarCell({ date, state }) {
   const ref = useRef9(null);
   const {
@@ -5408,7 +5445,7 @@ function CalendarCell({ date, state }) {
     isUnavailable
   } = useCalendarCell({ date }, state, ref);
   if (isDisabled) {
-    return /* @__PURE__ */ jsx192("td", { ...cellProps });
+    return /* @__PURE__ */ jsx194("td", { ...cellProps });
   }
   const { onClose } = useContext3(CalendarPopoverContext);
   const variant = isSelected ? "selected" : isUnavailable || isDisabled ? "unavailable" : "default";
@@ -5417,7 +5454,7 @@ function CalendarCell({ date, state }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx192("td", { ...cellProps, children: /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx194("td", { ...cellProps, children: /* @__PURE__ */ jsx194(
     "button",
     {
       ...buttonProps,
@@ -5478,7 +5515,7 @@ function isLeapYear(date) {
 }
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
-import { jsx as jsx193, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs29 } from "react/jsx-runtime";
 function CalendarGrid({ state, ...props }) {
   const { locale: locale2 } = useLocale();
   const {
@@ -5491,7 +5528,7 @@ function CalendarGrid({ state, ...props }) {
     typographyStyles_default["supporting-style-tiny-02"],
     typographyStyles_default["text-color--subtle"]
   ];
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "table",
     {
       ...gridProps,
@@ -5503,16 +5540,16 @@ function CalendarGrid({ state, ...props }) {
       },
       cellPadding: "0",
       children: [
-        /* @__PURE__ */ jsx193("thead", { ...headerProps, children: /* @__PURE__ */ jsxs28("tr", { children: [
-          /* @__PURE__ */ jsx193("th", { className: cn(...typographyCn), children: "#" }),
-          weekDays.map((day, index) => /* @__PURE__ */ jsx193("th", { className: cn(...typographyCn), children: day }, index))
+        /* @__PURE__ */ jsx195("thead", { ...headerProps, children: /* @__PURE__ */ jsxs29("tr", { children: [
+          /* @__PURE__ */ jsx195("th", { className: cn(...typographyCn), children: "#" }),
+          weekDays.map((day, index) => /* @__PURE__ */ jsx195("th", { className: cn(...typographyCn), children: day }, index))
         ] }) }),
-        /* @__PURE__ */ jsx193("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => {
+        /* @__PURE__ */ jsx195("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => {
           const datesInWeek = state.getDatesInWeek(weekIndex);
           const firstExistingDay = datesInWeek.find(Boolean);
           const weekNumber = firstExistingDay ? getWeekNumber(firstExistingDay) : "";
-          return /* @__PURE__ */ jsxs28("tr", { children: [
-            /* @__PURE__ */ jsx193(
+          return /* @__PURE__ */ jsxs29("tr", { children: [
+            /* @__PURE__ */ jsx195(
               "td",
               {
                 className: cn(DateInput_default["calendar__week-number"], ...typographyCn),
@@ -5520,7 +5557,7 @@ function CalendarGrid({ state, ...props }) {
               }
             ),
             datesInWeek.map(
-              (date, i2) => date ? /* @__PURE__ */ jsx193(CalendarCell, { state, date }, i2) : /* @__PURE__ */ jsx193("td", {}, i2)
+              (date, i2) => date ? /* @__PURE__ */ jsx195(CalendarCell, { state, date }, i2) : /* @__PURE__ */ jsx195("td", {}, i2)
             )
           ] }, weekIndex);
         }) })
@@ -5531,7 +5568,7 @@ function CalendarGrid({ state, ...props }) {
 CalendarGrid.displayName = "CalendarGrid";
 
 // src/components/date-inputs/DatePicker/Calendar/Calendar.tsx
-import { jsx as jsx194, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx196, jsxs as jsxs30 } from "react/jsx-runtime";
 function createCalendar(identifier2) {
   switch (identifier2) {
     case "gregory":
@@ -5559,9 +5596,9 @@ function Calendar(props) {
       onClose();
     }
   };
-  return /* @__PURE__ */ jsxs29("div", { ...calendarProps, className: DateInput_default.calendar, children: [
-    /* @__PURE__ */ jsxs29("div", { className: DateInput_default.calendar__header, children: [
-      /* @__PURE__ */ jsx194(
+  return /* @__PURE__ */ jsxs30("div", { ...calendarProps, className: DateInput_default.calendar, children: [
+    /* @__PURE__ */ jsxs30("div", { className: DateInput_default.calendar__header, children: [
+      /* @__PURE__ */ jsx196(
         Button,
         {
           type: "button",
@@ -5574,7 +5611,7 @@ function Calendar(props) {
           className: DateInput_default["calendar__month-button"]
         }
       ),
-      /* @__PURE__ */ jsx194(
+      /* @__PURE__ */ jsx196(
         Heading,
         {
           level: 2,
@@ -5583,7 +5620,7 @@ function Calendar(props) {
           children: title
         }
       ),
-      /* @__PURE__ */ jsx194(
+      /* @__PURE__ */ jsx196(
         Button,
         {
           type: "button",
@@ -5596,7 +5633,7 @@ function Calendar(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx194(CalendarGrid, { state })
+    /* @__PURE__ */ jsx196(CalendarGrid, { state })
   ] });
 }
 Calendar.displayName = "Calendar";
@@ -5624,7 +5661,7 @@ import {
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
 import { useButton } from "@react-aria/button";
 import { useRef as useRef10 } from "react";
-import { jsx as jsx195 } from "react/jsx-runtime";
+import { jsx as jsx197 } from "react/jsx-runtime";
 function CalendarButton({
   componentSize,
   ...props
@@ -5632,7 +5669,7 @@ function CalendarButton({
   const ref = useRef10(null);
   const { buttonProps } = useButton(props, ref);
   const size2 = componentSize === "tiny" ? "small" : "medium";
-  return /* @__PURE__ */ jsx195(
+  return /* @__PURE__ */ jsx197(
     "button",
     {
       ...buttonProps,
@@ -5652,7 +5689,7 @@ function CalendarButton({
         !props.isDisabled && focusable,
         props.isDisabled && "disabled"
       ),
-      children: /* @__PURE__ */ jsx195(Icon, { icon: CalendarIcon, iconSize: size2 })
+      children: /* @__PURE__ */ jsx197(Icon, { icon: CalendarIcon, iconSize: size2 })
     }
   );
 }
@@ -5660,7 +5697,7 @@ function CalendarButton({
 // src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
 import { useDateSegment } from "@react-aria/datepicker";
 import { useRef as useRef11 } from "react";
-import { jsx as jsx196, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx198, jsxs as jsxs31 } from "react/jsx-runtime";
 var typographyTypes2 = {
   medium: "bodySans02",
   small: "bodySans01",
@@ -5679,7 +5716,7 @@ function DateSegment({
   var _a;
   const ref = useRef11(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...segmentProps,
@@ -5694,7 +5731,7 @@ function DateSegment({
         minWidth: segment.maxValue != null ? String(segment.maxValue).length + "ch" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx196(
+        /* @__PURE__ */ jsx198(
           "span",
           {
             "aria-hidden": "true",
@@ -5731,12 +5768,12 @@ var InputMessage_default = {
 };
 
 // src/components/InputMessage/InputMessage.tsx
-import { Fragment as Fragment5, jsx as jsx197, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx199, jsxs as jsxs32 } from "react/jsx-runtime";
 var InputMessage = forwardRef25(
   (props, ref) => {
     const { message, messageType, id, className, htmlProps, ...rest } = props;
     const isError = messageType === "error";
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "div",
       {
         ...getBaseHTMLProps(
@@ -5747,8 +5784,8 @@ var InputMessage = forwardRef25(
         ),
         ref,
         children: [
-          isError && /* @__PURE__ */ jsx197(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
-          /* @__PURE__ */ jsx197(
+          isError && /* @__PURE__ */ jsx199(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
+          /* @__PURE__ */ jsx199(
             Typography,
             {
               typographyType: isError ? "bodySans01" : "supportingStyleHelperText01",
@@ -5762,8 +5799,8 @@ var InputMessage = forwardRef25(
   }
 );
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs31(Fragment5, { children: [
-  errorMessage && errorMessageId && /* @__PURE__ */ jsx197(
+var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs32(Fragment5, { children: [
+  errorMessage && errorMessageId && /* @__PURE__ */ jsx199(
     InputMessage,
     {
       message: errorMessage,
@@ -5771,11 +5808,11 @@ var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PUR
       id: errorMessageId
     }
   ),
-  tip && tipId && !errorMessage && /* @__PURE__ */ jsx197(InputMessage, { message: tip, messageType: "tip", id: tipId })
+  tip && tipId && !errorMessage && /* @__PURE__ */ jsx199(InputMessage, { message: tip, messageType: "tip", id: tipId })
 ] });
 
 // src/components/date-inputs/common/DateInput.tsx
-import { jsx as jsx198, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx200, jsxs as jsxs33 } from "react/jsx-runtime";
 function _DateInput({
   errorMessage,
   tip,
@@ -5801,28 +5838,36 @@ function _DateInput({
   const hasLabel = props.label != null;
   const hasMessage = hasErrorMessage || hasTip;
   const { isOpen } = useContext5(CalendarPopoverContext);
-  return /* @__PURE__ */ jsxs32(
+  const styleVariables = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ["--dds-date-input-width"]: width ? width : componentSize === "small" ? "148px" : componentSize === "tiny" ? "125px" : "160px"
+  };
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ...groupProps,
-      className: cn(
-        className,
-        Input_default.container,
-        DateInput_default[`container--${componentSize}`]
-      ),
+      className: cn(className, Input_default.container),
       ref: forwardedRef,
-      style: { width },
       children: [
-        hasLabel && /* @__PURE__ */ jsx198(Label, { ...labelProps, showRequiredStyling: required, children: props.label }),
-        /* @__PURE__ */ jsxs32(
+        hasLabel && /* @__PURE__ */ jsx200(
+          Label,
+          {
+            ...labelProps,
+            showRequiredStyling: required,
+            className: Input_default.label,
+            children: props.label
+          }
+        ),
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             ...fieldProps,
-            style,
+            style: { ...style, ...styleVariables },
             ref: internalRef,
             className: cn(
               Input_default.input,
               Input_default["input--stateful"],
+              Input_default["input--hover"],
               Input_default[`input--${componentSize}`],
               hasErrorMessage && Input_default["input--stateful-danger"],
               DateInput_default["date-input"],
@@ -5837,11 +5882,11 @@ function _DateInput({
             ),
             children: [
               button3,
-              /* @__PURE__ */ jsx198("div", { className: DateInput_default["date-segment-container"], children })
+              /* @__PURE__ */ jsx200("div", { className: DateInput_default["date-segment-container"], children })
             ]
           }
         ),
-        hasMessage && /* @__PURE__ */ jsx198(
+        hasMessage && /* @__PURE__ */ jsx200(
           InputMessage,
           {
             messageType: hasErrorMessage ? "error" : "tip",
@@ -5856,7 +5901,7 @@ var DateInput = forwardRef26(_DateInput);
 DateInput.displayName = "DateInput";
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 function _DateField({
   componentSize = "medium",
   buttonProps,
@@ -5872,7 +5917,7 @@ function _DateField({
   const ref = useRef12(null);
   const { labelProps, fieldProps } = useDateField(props, state, ref);
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
-  return /* @__PURE__ */ jsx199(
+  return /* @__PURE__ */ jsx201(
     DateInput,
     {
       ...props,
@@ -5884,7 +5929,7 @@ function _DateField({
       ref: forwardedRef,
       internalRef: ref,
       readOnly: props.isReadOnly,
-      prefix: !props.isReadOnly && /* @__PURE__ */ jsx199(
+      prefix: !props.isReadOnly && /* @__PURE__ */ jsx201(
         CalendarButton,
         {
           componentSize,
@@ -5894,7 +5939,7 @@ function _DateField({
       ),
       labelProps,
       fieldProps,
-      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx199(
+      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx201(
         DateSegment,
         {
           componentSize,
@@ -5931,7 +5976,7 @@ function createDOMRef(ref) {
 }
 
 // src/components/date-inputs/DatePicker/DatePicker.tsx
-import { jsx as jsx200, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs34 } from "react/jsx-runtime";
 var refIsFocusable = (ref) => {
   return typeof ref === "object" && ref !== null && "focus" in ref;
 };
@@ -5947,8 +5992,8 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
     state,
     ref
   );
-  return /* @__PURE__ */ jsx200(I18nProvider, { locale, children: /* @__PURE__ */ jsxs33(CalendarPopover, { isOpen: state.isOpen, onClose: state.close, children: [
-    /* @__PURE__ */ jsx200(CalendarPopoverAnchor, { children: /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsx202(I18nProvider, { locale, children: /* @__PURE__ */ jsxs34(CalendarPopover, { isOpen: state.isOpen, onClose: state.close, children: [
+    /* @__PURE__ */ jsx202(CalendarPopoverAnchor, { children: /* @__PURE__ */ jsx202(
       DateField,
       {
         ...fieldProps,
@@ -5964,7 +6009,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
         width
       }
     ) }),
-    /* @__PURE__ */ jsx200(CalendarPopoverContent, { children: /* @__PURE__ */ jsx200(Calendar, { ...calendarProps }) })
+    /* @__PURE__ */ jsx202(CalendarPopoverContent, { children: /* @__PURE__ */ jsx202(Calendar, { ...calendarProps }) })
   ] }) });
 }
 var DatePicker = forwardRef28(_DatePicker);
@@ -5974,7 +6019,7 @@ DatePicker.displayName = "DatePicker";
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
 import { forwardRef as forwardRef29, useRef as useRef15 } from "react";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx203 } from "react/jsx-runtime";
 function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef) {
   const ref = useRef15(null);
   const state = useTimeFieldState({
@@ -5988,7 +6033,7 @@ function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef
   );
   const iconSize = componentSize === "tiny" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx203(
     DateInput,
     {
       ...props,
@@ -6001,17 +6046,17 @@ function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef
       readOnly: props.isReadOnly,
       labelProps,
       fieldProps,
-      prefix: !props.isReadOnly && /* @__PURE__ */ jsx201(
+      prefix: !props.isReadOnly && /* @__PURE__ */ jsx203(
         "span",
         {
           className: cn(
             DateInput_default["icon-wrapper"],
             DateInput_default[`icon-wrapper--${iconSize}`]
           ),
-          children: /* @__PURE__ */ jsx201(Icon, { icon: TimeIcon, iconSize })
+          children: /* @__PURE__ */ jsx203(Icon, { icon: TimeIcon, iconSize })
         }
       ),
-      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx201(
+      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx203(
         DateSegment,
         {
           componentSize,
@@ -6074,7 +6119,7 @@ var DescriptionList_default = {
 };
 
 // src/components/DescriptionList/DescriptionList.tsx
-import { jsx as jsx202 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var DescriptionList = forwardRef30((props, ref) => {
   const {
     appearance = "default",
@@ -6085,7 +6130,7 @@ var DescriptionList = forwardRef30((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx204(
     "dl",
     {
       ref,
@@ -6108,24 +6153,24 @@ DescriptionList.displayName = "DescriptionList";
 
 // src/components/DescriptionList/DescriptionListTerm.tsx
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
 var DescriptionListTerm = forwardRef31(({ ...rest }, ref) => {
-  return /* @__PURE__ */ jsx203("dt", { ref, ...rest });
+  return /* @__PURE__ */ jsx205("dt", { ref, ...rest });
 });
 DescriptionListTerm.displayName = "DescriptionListTerm";
 
 // src/components/DescriptionList/DescriptionListDesc.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx204, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs35 } from "react/jsx-runtime";
 var DescriptionListDesc = forwardRef32((props, ref) => {
   const { children, icon: icon2, id, className, htmlProps, ...rest } = props;
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "dd",
     {
       ref,
       ...getBaseHTMLProps(id, cn(className, DescriptionList_default.desc), htmlProps, rest),
       children: [
-        icon2 && /* @__PURE__ */ jsx204(Icon, { icon: icon2 }),
+        icon2 && /* @__PURE__ */ jsx206(Icon, { icon: icon2 }),
         " ",
         children
       ]
@@ -6136,7 +6181,7 @@ DescriptionListDesc.displayName = "DescriptionListDesc";
 
 // src/components/DescriptionList/DescriptionListGroup.tsx
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx205 } from "react/jsx-runtime";
+import { jsx as jsx207 } from "react/jsx-runtime";
 var DescriptionListGroup = forwardRef33((props, ref) => {
   const {
     children,
@@ -6148,7 +6193,7 @@ var DescriptionListGroup = forwardRef33((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx207(
     "div",
     {
       ref,
@@ -6161,7 +6206,7 @@ var DescriptionListGroup = forwardRef33((props, ref) => {
 DescriptionListGroup.displayName = "DescriptionListGroup";
 
 // src/components/Drawer/Drawer.tsx
-import { forwardRef as forwardRef34, useId as useId5 } from "react";
+import { forwardRef as forwardRef34, useId as useId6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.module.css
@@ -6181,7 +6226,7 @@ var Drawer_default = {
 };
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx206, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx208, jsxs as jsxs36 } from "react/jsx-runtime";
 var Drawer = forwardRef34((props, ref) => {
   const {
     children,
@@ -6198,7 +6243,7 @@ var Drawer = forwardRef34((props, ref) => {
     widthProps,
     ...rest
   } = props;
-  const generatedId = useId5();
+  const generatedId = useId6();
   const uniqueId = id != null ? id : `${generatedId}-drawer`;
   const hasHeader = !!header;
   const headerId = hasHeader ? `${uniqueId}-header` : void 0;
@@ -6243,8 +6288,8 @@ var Drawer = forwardRef34((props, ref) => {
     style: { ...htmlProps == null ? void 0 : htmlProps.style, ...widthProps }
   };
   return isOpen || hasTransitionedIn ? createPortal(
-    /* @__PURE__ */ jsxs35(Paper, { ...containerProps, elevation: 4, children: [
-      /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsxs36(Paper, { ...containerProps, elevation: 4, children: [
+      /* @__PURE__ */ jsxs36(
         "div",
         {
           className: cn(
@@ -6253,12 +6298,12 @@ var Drawer = forwardRef34((props, ref) => {
             utilStyles_default["scrollable-y"]
           ),
           children: [
-            hasHeader && /* @__PURE__ */ jsx206("div", { id: headerId, children: typeof header === "string" ? /* @__PURE__ */ jsx206(Typography, { typographyType: "headingSans03", children: header }) : header }),
+            hasHeader && /* @__PURE__ */ jsx208("div", { id: headerId, children: typeof header === "string" ? /* @__PURE__ */ jsx208(Typography, { typographyType: "headingSans03", children: header }) : header }),
             children
           ]
         }
       ),
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx208(
         Button,
         {
           className: cn(Drawer_default["button--close"]),
@@ -6281,18 +6326,18 @@ import {
   Children as ReactChildren3,
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
-  useId as useId6,
+  useId as useId7,
   useRef as useRef16,
   useState as useState9
 } from "react";
-import { Fragment as Fragment6, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsxs as jsxs37 } from "react/jsx-runtime";
 var DrawerGroup = ({
   children,
   drawerId,
   onOpen,
   onClose
 }) => {
-  const generatedId = useId6();
+  const generatedId = useId7();
   const uniqueDrawerId = drawerId != null ? drawerId : `${generatedId}-drawer`;
   const buttonRef = useRef16(null);
   const [closed, setClosed] = useState9(true);
@@ -6320,7 +6365,7 @@ var DrawerGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsxs36(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
     " ",
     Children8,
     " "
@@ -6336,7 +6381,7 @@ var EmptyContent_default = {
 };
 
 // src/components/EmptyContent/EmptyContent.tsx
-import { jsx as jsx207, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs38 } from "react/jsx-runtime";
 function EmptyContent({
   title,
   message,
@@ -6344,15 +6389,15 @@ function EmptyContent({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx207("div", { ...rest, className: cn(className, EmptyContent_default.containter), children: /* @__PURE__ */ jsxs37("div", { className: EmptyContent_default.text, children: [
-    title && /* @__PURE__ */ jsx207(Heading, { level: titleHeadingLevel, typographyType: "headingSans02", children: title }),
-    /* @__PURE__ */ jsx207(Paragraph, { className: EmptyContent_default.message, children: message })
+  return /* @__PURE__ */ jsx209("div", { ...rest, className: cn(className, EmptyContent_default.containter), children: /* @__PURE__ */ jsxs38("div", { className: EmptyContent_default.text, children: [
+    title && /* @__PURE__ */ jsx209(Heading, { level: titleHeadingLevel, typographyType: "headingSans02", children: title }),
+    /* @__PURE__ */ jsx209(Paragraph, { className: EmptyContent_default.message, children: message })
   ] }) });
 }
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/FavStar/FavStar.tsx
-import { forwardRef as forwardRef35, useId as useId7 } from "react";
+import { forwardRef as forwardRef35, useId as useId8 } from "react";
 
 // src/components/FavStar/FavStar.module.css
 var FavStar_default = {
@@ -6401,7 +6446,7 @@ function useControllableState(props) {
 }
 
 // src/components/FavStar/FavStar.tsx
-import { jsx as jsx208, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx210, jsxs as jsxs39 } from "react/jsx-runtime";
 var FavStar = forwardRef35(
   ({
     id,
@@ -6420,13 +6465,13 @@ var FavStar = forwardRef35(
       htmlProps,
       rest
     );
-    const generatedId = useId7();
+    const generatedId = useId8();
     const [checked, setChecked] = useControllableState({
       value: checkedProp,
       defaultValue: defaultChecked != null ? defaultChecked : false,
       onChange
     });
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs39(
       "label",
       {
         className: cn(
@@ -6438,7 +6483,7 @@ var FavStar = forwardRef35(
         style,
         htmlFor: id != null ? id : generatedId,
         children: [
-          /* @__PURE__ */ jsx208(
+          /* @__PURE__ */ jsx210(
             "input",
             {
               ...props,
@@ -6451,8 +6496,8 @@ var FavStar = forwardRef35(
               className: utilStyles_default["hide-input"]
             }
           ),
-          /* @__PURE__ */ jsx208(Icon, { iconSize: size2, icon: StarIcon, className: FavStar_default.icon }),
-          /* @__PURE__ */ jsx208(
+          /* @__PURE__ */ jsx210(Icon, { iconSize: size2, icon: StarIcon, className: FavStar_default.icon }),
+          /* @__PURE__ */ jsx210(
             Icon,
             {
               iconSize: size2,
@@ -6518,7 +6563,7 @@ var Stack_default = {
 };
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx209 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var HStack = forwardRef36(
   ({
     id,
@@ -6536,7 +6581,7 @@ var HStack = forwardRef36(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-stack-justify-content"]: justify
     };
-    return /* @__PURE__ */ jsx209(
+    return /* @__PURE__ */ jsx211(
       "div",
       {
         ref,
@@ -6575,7 +6620,7 @@ var VStack = forwardRef36(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-stack-justify-content"]: justify
     };
-    return /* @__PURE__ */ jsx209(
+    return /* @__PURE__ */ jsx211(
       "div",
       {
         ref,
@@ -6602,16 +6647,16 @@ function spacingPropToCn(value) {
 }
 
 // src/components/TextArea/TextArea.tsx
-import { forwardRef as forwardRef37, useEffect as useEffect16, useId as useId8, useRef as useRef18, useState as useState11 } from "react";
+import { forwardRef as forwardRef37, useEffect as useEffect16, useId as useId9, useRef as useRef18, useState as useState11 } from "react";
 
 // src/components/TextArea/TextArea.module.css
 var TextArea_default = {
-  container: "TextArea_container",
-  textarea: "TextArea_textarea"
+  textarea: "TextArea_textarea",
+  "message-container": "TextArea_message-container"
 };
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx210, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx212, jsxs as jsxs40 } from "react/jsx-runtime";
 var TextArea = forwardRef37(
   (props, ref) => {
     const {
@@ -6626,12 +6671,14 @@ var TextArea = forwardRef37(
       label,
       "aria-required": ariaRequired = false,
       "aria-describedby": ariaDescribedby,
+      maxLength,
+      withCharacterCounter = true,
       className,
       style,
       width,
       ...rest
     } = props;
-    const generatedId = useId8();
+    const generatedId = useId9();
     const uniqueId = id != null ? id : `${generatedId}-textArea`;
     const textAreaRef = useRef18(null);
     const multiRef = useCombinedRef(ref, textAreaRef);
@@ -6653,47 +6700,71 @@ var TextArea = forwardRef37(
     const hasLabel = !!label;
     const tipId = derivativeIdGenerator(uniqueId, "tip");
     const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
+    const characterCounterId = derivativeIdGenerator(
+      uniqueId,
+      "characterCounter"
+    );
     const showRequiredStyling = required || !!ariaRequired;
-    const textAreaProps = {
-      ref: multiRef,
-      onChange: onChangeHandler,
-      value,
-      defaultValue,
-      id: uniqueId,
-      disabled,
-      hasErrorMessage,
-      required,
-      "aria-required": ariaRequired,
-      "aria-describedby": spaceSeparatedIdListGenerator([
-        tip ? tipId : void 0,
-        errorMessage ? errorMessageId : void 0,
-        ariaDescribedby
-      ]),
-      "aria-invalid": hasErrorMessage ? true : void 0,
-      ...rest
+    const styleVariables = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ["--dds-text-area-width"]: width != null ? width : "var(--dds-input-default-width)"
     };
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs40(
       "div",
       {
-        className: cn(className, Input_default.container, TextArea_default.container),
-        style: { ...style, width },
+        className: cn(className, Input_default.container),
+        style: { ...style },
         children: [
-          hasLabel && /* @__PURE__ */ jsx210(Label, { showRequiredStyling, htmlFor: uniqueId, children: label }),
-          /* @__PURE__ */ jsx210(
+          hasLabel && /* @__PURE__ */ jsx212(
+            Label,
+            {
+              showRequiredStyling,
+              htmlFor: uniqueId,
+              className: Input_default.label,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx212(
             "textarea",
             {
-              ...textAreaProps,
+              ref: multiRef,
+              id: uniqueId,
+              onChange: onChangeHandler,
+              value,
+              defaultValue,
+              disabled,
+              maxLength,
+              required,
+              "aria-required": ariaRequired,
+              "aria-describedby": spaceSeparatedIdListGenerator([
+                tip ? tipId : void 0,
+                errorMessage ? errorMessageId : void 0,
+                maxLength && withCharacterCounter ? characterCounterId : void 0,
+                ariaDescribedby
+              ]),
+              "aria-invalid": hasErrorMessage ? true : void 0,
               className: cn(
                 Input_default.input,
                 Input_default["input--stateful"],
+                hasErrorMessage && Input_default["input--stateful-danger"],
                 TextArea_default.textarea,
                 scrollbar,
                 typographyStyles_default[getTypographyCn(inputTypographyTypes["medium"])],
                 focusable
-              )
+              ),
+              style: styleVariables,
+              ...rest
             }
           ),
-          renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+          /* @__PURE__ */ jsxs40("div", { className: TextArea_default["message-container"], children: [
+            renderInputMessage(tip, tipId, errorMessage, errorMessageId),
+            renderCharCounter(
+              characterCounterId,
+              withCharacterCounter,
+              text.length,
+              maxLength
+            )
+          ] })
         ]
       }
     );
@@ -6702,7 +6773,7 @@ var TextArea = forwardRef37(
 TextArea.displayName = "TextArea";
 
 // src/components/Feedback/CommentComponent.tsx
-import { jsx as jsx211, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx213, jsxs as jsxs41 } from "react/jsx-runtime";
 var CommentComponent = ({
   rating,
   feedbackText,
@@ -6714,21 +6785,21 @@ var CommentComponent = ({
   handleSubmit,
   handleFeedbackTextChange
 }) => {
-  return /* @__PURE__ */ jsxs40(VStack, { gap: "x1", align: "flex-start", children: [
-    /* @__PURE__ */ jsxs40("span", { className: Feedback_default["rating-submitted-title"], children: [
-      /* @__PURE__ */ jsx211(
+  return /* @__PURE__ */ jsxs41(VStack, { gap: "x1", align: "flex-start", children: [
+    /* @__PURE__ */ jsxs41("span", { className: Feedback_default["rating-submitted-title"], children: [
+      /* @__PURE__ */ jsx213(
         Icon,
         {
           icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
           color: "iconActionResting"
         }
       ),
-      /* @__PURE__ */ jsxs40(Paragraph, { children: [
+      /* @__PURE__ */ jsxs41(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsx211(
+    /* @__PURE__ */ jsx213(
       TextArea,
       {
         value: feedbackText,
@@ -6737,7 +6808,7 @@ var CommentComponent = ({
         tip: textAreaTip
       }
     ),
-    /* @__PURE__ */ jsx211(
+    /* @__PURE__ */ jsx213(
       Button,
       {
         purpose: "secondary",
@@ -6757,7 +6828,7 @@ import {
   forwardRef as forwardRef38,
   isValidElement as isValidElement5,
   useEffect as useEffect17,
-  useId as useId9,
+  useId as useId10,
   useRef as useRef19,
   useState as useState12
 } from "react";
@@ -6771,7 +6842,7 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx212, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs42 } from "react/jsx-runtime";
 var Tooltip = forwardRef38(
   (props, ref) => {
     const {
@@ -6788,7 +6859,7 @@ var Tooltip = forwardRef38(
       htmlProps,
       ...rest
     } = props;
-    const generatedId = useId9();
+    const generatedId = useId10();
     const uniqueTooltipId = tooltipId != null ? tooltipId : `${generatedId}-tooltip`;
     const [open, setOpen] = useState12(false);
     const [inView, setInView] = useState12(false);
@@ -6869,9 +6940,9 @@ var Tooltip = forwardRef38(
       style: { ...positionStyles.floating }
     };
     const openCn = open && inView ? "open" : "closed";
-    return /* @__PURE__ */ jsxs41("div", { ...containerProps, children: [
+    return /* @__PURE__ */ jsxs42("div", { ...containerProps, children: [
       anchorElement,
-      /* @__PURE__ */ jsxs41(
+      /* @__PURE__ */ jsxs42(
         Paper,
         {
           ...wrapperProps,
@@ -6885,15 +6956,15 @@ var Tooltip = forwardRef38(
           ),
           children: [
             text,
-            /* @__PURE__ */ jsx212("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs41("svg", { width: "36", height: "9", children: [
-              /* @__PURE__ */ jsx212(
+            /* @__PURE__ */ jsx214("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs42("svg", { width: "36", height: "9", children: [
+              /* @__PURE__ */ jsx214(
                 "path",
                 {
                   d: "M16.586 6.586L10 0h16.154a.373.373 0 00-.263.11l-6.477 6.476a2 2 0 01-2.828 0z",
                   className: Tooltip_default["svg-arrow__background"]
                 }
               ),
-              /* @__PURE__ */ jsx212(
+              /* @__PURE__ */ jsx214(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -6912,7 +6983,7 @@ var Tooltip = forwardRef38(
 Tooltip.displayName = "Tooltip";
 
 // src/components/Feedback/RatingComponent.tsx
-import { jsx as jsx213, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs43 } from "react/jsx-runtime";
 var RatingComponent = ({
   layout,
   ratingLabel,
@@ -6922,7 +6993,7 @@ var RatingComponent = ({
   handleRatingChange
 }) => {
   const layoutCn = layout === "vertical" ? "column" : "row";
-  const button3 = (purpose, layout2) => /* @__PURE__ */ jsx213(
+  const button3 = (purpose, layout2) => /* @__PURE__ */ jsx215(
     "button",
     {
       "aria-label": purpose === "up" ? thumbUpTooltip : thumbDownTooltip,
@@ -6933,7 +7004,7 @@ var RatingComponent = ({
         Feedback_default[`button--${layout2}`],
         focusable
       ),
-      children: /* @__PURE__ */ jsx213(
+      children: /* @__PURE__ */ jsx215(
         Icon,
         {
           icon: purpose === "up" ? ThumbUpIcon : ThumbDownIcon,
@@ -6942,7 +7013,7 @@ var RatingComponent = ({
       )
     }
   );
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       className: cn(
@@ -6950,10 +7021,10 @@ var RatingComponent = ({
         Feedback_default[`rating-container--${layoutCn}`]
       ),
       children: [
-        /* @__PURE__ */ jsx213(Label, { children: ratingLabel }),
-        loading ? /* @__PURE__ */ jsx213(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs42(HStack, { gap: "x1", children: [
-          /* @__PURE__ */ jsx213(Tooltip, { text: thumbUpTooltip, children: button3("up", layout) }),
-          /* @__PURE__ */ jsx213(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx213("div", { children: button3("down", layout) }) })
+        /* @__PURE__ */ jsx215(Label, { children: ratingLabel }),
+        loading ? /* @__PURE__ */ jsx215(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs43(HStack, { gap: "x1", children: [
+          /* @__PURE__ */ jsx215(Tooltip, { text: thumbUpTooltip, children: button3("up", layout) }),
+          /* @__PURE__ */ jsx215(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx215("div", { children: button3("down", layout) }) })
         ] })
       ]
     }
@@ -6961,7 +7032,7 @@ var RatingComponent = ({
 };
 
 // src/components/Feedback/Feedback.tsx
-import { jsx as jsx214 } from "react/jsx-runtime";
+import { jsx as jsx216 } from "react/jsx-runtime";
 var Feedback = ({
   layout = "vertical",
   ratingLabel = "Hva syns du om tjenesten?",
@@ -7007,7 +7078,7 @@ var Feedback = ({
     isSubmittedProp === void 0 && setIsFeedbackSubmitted(true);
   };
   if (rating === null && !isFeedbackSubmitted) {
-    return /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx216(
       RatingComponent,
       {
         layout,
@@ -7020,7 +7091,7 @@ var Feedback = ({
     );
   }
   if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
-    return /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx216(
       CommentComponent,
       {
         rating,
@@ -7035,7 +7106,7 @@ var Feedback = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx214(Paragraph, { children: submittedTitle });
+  return /* @__PURE__ */ jsx216(Paragraph, { children: submittedTitle });
 };
 
 // src/components/Fieldset/Fieldset.tsx
@@ -7047,11 +7118,11 @@ var Fieldset_default = {
 };
 
 // src/components/Fieldset/Fieldset.tsx
-import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx217 } from "react/jsx-runtime";
 var Fieldset = forwardRef39(
   (props, ref) => {
     const { id, className, htmlProps, ...rest } = props;
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx217(
       "fieldset",
       {
         ref,
@@ -7067,17 +7138,17 @@ var Fieldset = forwardRef39(
 );
 
 // src/components/FileUploader/FileUploader.tsx
-import { useId as useId10 } from "react";
+import { useId as useId11 } from "react";
 
 // src/components/FileUploader/ErrorList.tsx
-import { jsx as jsx216 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 var ErrorList = (props) => {
   const { errors } = props;
   if (errors.length < 1) {
     return null;
   }
   if (errors.length === 1) {
-    return /* @__PURE__ */ jsx216(
+    return /* @__PURE__ */ jsx218(
       InputMessage,
       {
         id: errors[0].id,
@@ -7086,8 +7157,8 @@ var ErrorList = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx216("ul", { className: utilStyles_default["remove-list-styling"], children: errors.map(({ id, message }) => {
-    return /* @__PURE__ */ jsx216("li", { children: /* @__PURE__ */ jsx216(
+  return /* @__PURE__ */ jsx218("ul", { className: utilStyles_default["remove-list-styling"], children: errors.map(({ id, message }) => {
+    return /* @__PURE__ */ jsx218("li", { children: /* @__PURE__ */ jsx218(
       InputMessage,
       {
         id,
@@ -7108,21 +7179,36 @@ var FileUploader_default = {
   "input-container--no-drag-zone": "FileUploader_input-container--no-drag-zone",
   file: "FileUploader_file",
   "file--invalid": "FileUploader_file--invalid",
+  "file__icon--invalid": "FileUploader_file__icon--invalid",
+  "file__icon--valid": "FileUploader_file__icon--valid",
   file__name: "FileUploader_file__name"
 };
 
 // src/components/FileUploader/File.tsx
-import { jsx as jsx217, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs44 } from "react/jsx-runtime";
 var File = (props) => {
   const { parentId, index, file: stateFile, removeFile, isValid } = props;
   const errorsList = stateFile.errors.map((e, errorIndex) => ({
     id: derivativeIdGenerator(parentId, `file-${index}-error-${errorIndex}`),
     message: e
   }));
-  return /* @__PURE__ */ jsxs43("li", { children: [
-    /* @__PURE__ */ jsxs43("div", { className: cn(FileUploader_default.file, !isValid && FileUploader_default["file--invalid"]), children: [
-      /* @__PURE__ */ jsx217("span", { className: FileUploader_default.file__name, children: stateFile.file.name }),
-      /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsxs44("li", { children: [
+    /* @__PURE__ */ jsxs44("div", { className: cn(FileUploader_default.file, !isValid && FileUploader_default["file--invalid"]), children: [
+      /* @__PURE__ */ jsx219(
+        "span",
+        {
+          className: cn(FileUploader_default.file__name, typographyStyles_default["body-sans-02"]),
+          children: stateFile.file.name
+        }
+      ),
+      /* @__PURE__ */ jsx219(
+        Icon,
+        {
+          icon: isValid ? CheckCircledIcon : ErrorIcon,
+          className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
+        }
+      ),
+      /* @__PURE__ */ jsx219(
         Button,
         {
           size: "small",
@@ -7131,7 +7217,7 @@ var File = (props) => {
           onClick: removeFile,
           icon: CloseIcon,
           htmlProps: {
-            "aria-label": `Fjern fil, ${stateFile.file.name}`,
+            "aria-label": `Fjern fil ${stateFile.file.name}`,
             "aria-invalid": !isValid ? true : void 0,
             "aria-errormessage": !isValid ? "Ugyldig fil" : void 0,
             "aria-describedby": spaceSeparatedIdListGenerator(
@@ -7141,7 +7227,7 @@ var File = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx217(ErrorList, { errors: errorsList })
+    /* @__PURE__ */ jsx219(ErrorList, { errors: errorsList })
   ] });
 };
 
@@ -7433,19 +7519,19 @@ var useFileUploader = (props) => {
 };
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
-import { jsx as jsx218 } from "react/jsx-runtime";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var VisuallyHidden = (props) => {
   const { id, className, htmlProps, as, ...rest } = props;
   const cl = cn(className, utilStyles_default["visually-hidden"]);
   if (as === "div") {
-    return /* @__PURE__ */ jsx218("div", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
+    return /* @__PURE__ */ jsx220("div", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
   }
-  return /* @__PURE__ */ jsx218("span", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
+  return /* @__PURE__ */ jsx220("span", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
 };
 VisuallyHidden.displayName = "VisuallyHidden";
 
 // src/components/FileUploader/FileUploader.tsx
-import { jsx as jsx219, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs45 } from "react/jsx-runtime";
 var FileUploader = (props) => {
   const {
     id,
@@ -7468,7 +7554,7 @@ var FileUploader = (props) => {
     className,
     ...rest
   } = props;
-  const generatedId = useId10();
+  const generatedId = useId11();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
     state: { files: stateFiles, isDragActive, rootErrors },
@@ -7494,7 +7580,7 @@ var FileUploader = (props) => {
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const buttonId = derivativeIdGenerator(uniqueId, "button");
   const inputId = derivativeIdGenerator(uniqueId, "input");
-  const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx219(
+  const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx221(
     File,
     {
       parentId: uniqueId,
@@ -7509,7 +7595,7 @@ var FileUploader = (props) => {
     id: derivativeIdGenerator(uniqueId, `error-${index}`),
     message: e
   }));
-  const button3 = /* @__PURE__ */ jsx219(
+  const button3 = /* @__PURE__ */ jsx221(
     Button,
     {
       ...getButtonProps(),
@@ -7529,17 +7615,21 @@ var FileUploader = (props) => {
       children: btnLabel
     }
   );
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       id: uniqueId,
-      className: cn(className, FileUploader_default.container),
+      className: cn(
+        className,
+        FileUploader_default.container,
+        typographyStyles_default["body-sans-02"]
+      ),
       style: { ...style, width },
       ...rest,
       children: [
-        hasLabel && /* @__PURE__ */ jsx219(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
-        hasTip && /* @__PURE__ */ jsx219(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
-        withDragAndDrop ? /* @__PURE__ */ jsxs44(
+        hasLabel && /* @__PURE__ */ jsx221(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
+        hasTip && /* @__PURE__ */ jsx221(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
+        withDragAndDrop ? /* @__PURE__ */ jsxs45(
           "div",
           {
             ...getRootProps(),
@@ -7549,7 +7639,7 @@ var FileUploader = (props) => {
               isDragActive && FileUploader_default["input-container--drag-active"]
             ),
             children: [
-              /* @__PURE__ */ jsx219(
+              /* @__PURE__ */ jsx221(
                 "input",
                 {
                   ...getInputProps(),
@@ -7558,16 +7648,16 @@ var FileUploader = (props) => {
                 }
               ),
               dropAreaLabel,
-              /* @__PURE__ */ jsx219(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
+              /* @__PURE__ */ jsx221(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
               button3
             ]
           }
-        ) : /* @__PURE__ */ jsxs44("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
-          /* @__PURE__ */ jsx219("input", { ...getInputProps(), id: inputId }),
+        ) : /* @__PURE__ */ jsxs45("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
+          /* @__PURE__ */ jsx221("input", { ...getInputProps(), id: inputId }),
           button3
         ] }),
-        /* @__PURE__ */ jsx219(ErrorList, { errors: rootErrorsList }),
-        !hideFileList && /* @__PURE__ */ jsx219("ul", { className: utilStyles_default["remove-list-styling"], children: fileListElements })
+        /* @__PURE__ */ jsx221(ErrorList, { errors: rootErrorsList }),
+        !hideFileList && /* @__PURE__ */ jsx221("ul", { className: utilStyles_default["remove-list-styling"], children: fileListElements })
       ]
     }
   );
@@ -7589,7 +7679,7 @@ var GlobalMessage_default = {
 };
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-import { jsx as jsx220, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs46 } from "react/jsx-runtime";
 var purposeVariants = {
   info: {
     icon: InfoIcon
@@ -7615,7 +7705,7 @@ var GlobalMessage = forwardRef40(
       ...rest
     } = props;
     const [isClosed, setClosed] = useState14(false);
-    return !isClosed ? /* @__PURE__ */ jsxs45(
+    return !isClosed ? /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -7631,7 +7721,7 @@ var GlobalMessage = forwardRef40(
           rest
         ),
         children: [
-          /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsxs46(
             "div",
             {
               className: cn(
@@ -7639,12 +7729,12 @@ var GlobalMessage = forwardRef40(
                 closable && GlobalMessage_default["content--closable"]
               ),
               children: [
-                /* @__PURE__ */ jsx220(Icon, { icon: purposeVariants[purpose].icon, className: GlobalMessage_default.icon }),
-                children != null ? children : /* @__PURE__ */ jsx220("span", { children: message })
+                /* @__PURE__ */ jsx222(Icon, { icon: purposeVariants[purpose].icon, className: GlobalMessage_default.icon }),
+                children != null ? children : /* @__PURE__ */ jsx222("span", { children: message })
               ]
             }
           ),
-          closable && /* @__PURE__ */ jsx220(
+          closable && /* @__PURE__ */ jsx222(
             Button,
             {
               icon: CloseIcon,
@@ -7675,7 +7765,7 @@ var Grid_default = {
 };
 
 // src/components/Grid/Grid.tsx
-import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx223 } from "react/jsx-runtime";
 var Grid = (props) => {
   const { id, className, htmlProps, as, maxWidth, rowGap, style, ...rest } = props;
   const styleVariables = {
@@ -7700,13 +7790,13 @@ var Grid = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-grid-xl-row-gap"]: (rowGap == null ? void 0 : rowGap.xl) ? rowGap.xl : "var(--dds-grid-xl-gutter-size)"
   };
-  return as === "div" ? /* @__PURE__ */ jsx221(
+  return as === "div" ? /* @__PURE__ */ jsx223(
     "div",
     {
       ...getBaseHTMLProps(id, cn(className, Grid_default.grid), htmlProps, rest),
       style: { ...htmlProps == null ? void 0 : htmlProps.style, ...styleVariables }
     }
-  ) : /* @__PURE__ */ jsx221(
+  ) : /* @__PURE__ */ jsx223(
     "form",
     {
       ...getBaseHTMLProps(id, cn(className, Grid_default.grid), htmlProps, rest),
@@ -7717,7 +7807,7 @@ var Grid = (props) => {
 Grid.displayName = "Grid";
 
 // src/components/Grid/GridChild.tsx
-import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx224 } from "react/jsx-runtime";
 var isRelativeGridColumn = (type) => {
   return type === "all" || type === "firstHalf" || type === "secondHalf";
 };
@@ -7767,7 +7857,7 @@ var GridChild = (props) => {
     firstHalf: "first-half",
     secondHalf: "second-half"
   };
-  return /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsx224(
     "div",
     {
       ...getBaseHTMLProps(
@@ -7796,11 +7886,11 @@ var InlineButton_default = {
 };
 
 // src/components/InlineButton/InlineButton.tsx
-import { jsx as jsx223 } from "react/jsx-runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
 var InlineButton = forwardRef41(
   (props, ref) => {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx223(
+    return /* @__PURE__ */ jsx225(
       "button",
       {
         ref,
@@ -7828,7 +7918,7 @@ import {
   isValidElement as isValidElement6,
   useState as useState15
 } from "react";
-import { Fragment as Fragment7, jsx as jsx224 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx226 } from "react/jsx-runtime";
 var InlineEdit = (props) => {
   const {
     emptiable,
@@ -7878,12 +7968,12 @@ var InlineEdit = (props) => {
       emptiable
     })
   );
-  return /* @__PURE__ */ jsx224(Fragment7, { children: inputChild });
+  return /* @__PURE__ */ jsx226(Fragment7, { children: inputChild });
 };
 InlineEdit.displayName = "InlineEdit";
 
 // src/components/InlineEdit/InlineTextArea.tsx
-import { forwardRef as forwardRef42, useId as useId11, useRef as useRef21 } from "react";
+import { forwardRef as forwardRef42, useId as useId12, useRef as useRef21 } from "react";
 
 // src/components/InlineEdit/InlineEdit.module.css
 var InlineEdit_default = {
@@ -7896,15 +7986,15 @@ var InlineEdit_default = {
 };
 
 // src/components/InlineEdit/InlineEdit.utils.tsx
-import { jsxs as jsxs46 } from "react/jsx-runtime";
-var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs46(VisuallyHidden, { id, as: "span", children: [
+import { jsxs as jsxs47 } from "react/jsx-runtime";
+var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs47(VisuallyHidden, { id, as: "span", children: [
   "Escape, Enter eller Tab for \xE5 lagre.",
   " ",
   !emptiable && "Inputfeltet er ikke t\xF8mmbar."
 ] });
 
 // src/components/InlineEdit/InlineTextArea.tsx
-import { jsx as jsx225, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx227, jsxs as jsxs48 } from "react/jsx-runtime";
 var InlineTextArea = forwardRef42((props, ref) => {
   const {
     id,
@@ -7917,7 +8007,7 @@ var InlineTextArea = forwardRef42((props, ref) => {
     hideIcon,
     ...rest
   } = props;
-  const genereatedId = useId11();
+  const genereatedId = useId12();
   const uniqueId = id != null ? id : `${genereatedId}-InlineTextArea`;
   const hasErrorMessage = !!errorMessage;
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
@@ -7926,9 +8016,9 @@ var InlineTextArea = forwardRef42((props, ref) => {
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = useRef21(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsxs47("div", { className: InlineEdit_default.container, style: { width }, children: [
-    /* @__PURE__ */ jsxs47("div", { className: Input_default["input-group"], children: [
-      !isEditing && !hideIcon && /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsxs48("div", { className: InlineEdit_default.container, style: { width }, children: [
+    /* @__PURE__ */ jsxs48("div", { className: Input_default["input-group"], children: [
+      !isEditing && !hideIcon && /* @__PURE__ */ jsx227(
         "span",
         {
           onClick: () => {
@@ -7936,10 +8026,10 @@ var InlineTextArea = forwardRef42((props, ref) => {
             (_a = inputRef.current) == null ? void 0 : _a.focus();
           },
           className: InlineEdit_default["icon-wrapper"],
-          children: /* @__PURE__ */ jsx225(Icon, { icon: EditIcon, iconSize: "small" })
+          children: /* @__PURE__ */ jsx227(Icon, { icon: EditIcon, iconSize: "small" })
         }
       ),
-      /* @__PURE__ */ jsx225(
+      /* @__PURE__ */ jsx227(
         "textarea",
         {
           ...rest,
@@ -7971,12 +8061,12 @@ var InlineTextArea = forwardRef42((props, ref) => {
 InlineTextArea.displayName = "InlineTextArea";
 
 // src/components/InlineEdit/InlineEditTextArea.tsx
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var InlineEditTextArea = forwardRef43((props, ref) => {
   const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
   const textareaRef = useRef22(null);
   const combinedRef = useCombinedRef(ref, textareaRef);
-  return /* @__PURE__ */ jsx226(
+  return /* @__PURE__ */ jsx228(
     InlineEdit,
     {
       onSetValue,
@@ -7986,7 +8076,7 @@ var InlineEditTextArea = forwardRef43((props, ref) => {
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx226(InlineTextArea, { ref: combinedRef, ...rest })
+      children: /* @__PURE__ */ jsx228(InlineTextArea, { ref: combinedRef, ...rest })
     }
   );
 });
@@ -7995,8 +8085,8 @@ var InlineEditTextArea = forwardRef43((props, ref) => {
 import { forwardRef as forwardRef45, useRef as useRef24 } from "react";
 
 // src/components/InlineEdit/InlineInput.tsx
-import { forwardRef as forwardRef44, useId as useId12, useRef as useRef23 } from "react";
-import { jsx as jsx227, jsxs as jsxs48 } from "react/jsx-runtime";
+import { forwardRef as forwardRef44, useId as useId13, useRef as useRef23 } from "react";
+import { jsx as jsx229, jsxs as jsxs49 } from "react/jsx-runtime";
 var InlineInput = forwardRef44(
   (props, ref) => {
     const {
@@ -8010,7 +8100,7 @@ var InlineInput = forwardRef44(
       hideIcon,
       ...rest
     } = props;
-    const genereatedId = useId12();
+    const genereatedId = useId13();
     const uniqueId = id != null ? id : `${genereatedId}-InlineInput`;
     const hasErrorMessage = !!errorMessage;
     const hasError = !!error;
@@ -8019,9 +8109,9 @@ var InlineInput = forwardRef44(
     const descId = derivativeIdGenerator(uniqueId, "desc");
     const inputRef = useRef23(null);
     const combinedRef = useCombinedRef(ref, inputRef);
-    return /* @__PURE__ */ jsxs48("div", { className: InlineEdit_default.container, style: { width }, children: [
-      /* @__PURE__ */ jsxs48("div", { className: Input_default["input-group"], children: [
-        !isEditing && !hideIcon && /* @__PURE__ */ jsx227(
+    return /* @__PURE__ */ jsxs49("div", { className: InlineEdit_default.container, style: { width }, children: [
+      /* @__PURE__ */ jsxs49("div", { className: Input_default["input-group"], children: [
+        !isEditing && !hideIcon && /* @__PURE__ */ jsx229(
           "span",
           {
             onClick: () => {
@@ -8029,10 +8119,10 @@ var InlineInput = forwardRef44(
               (_a = inputRef.current) == null ? void 0 : _a.focus();
             },
             className: InlineEdit_default["icon-wrapper"],
-            children: /* @__PURE__ */ jsx227(Icon, { icon: EditIcon, iconSize: "small" })
+            children: /* @__PURE__ */ jsx229(Icon, { icon: EditIcon, iconSize: "small" })
           }
         ),
-        /* @__PURE__ */ jsx227(
+        /* @__PURE__ */ jsx229(
           "input",
           {
             ...rest,
@@ -8063,12 +8153,12 @@ var InlineInput = forwardRef44(
 InlineInput.displayName = "InlineInput";
 
 // src/components/InlineEdit/InlineEditInput.tsx
-import { jsx as jsx228 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
 var InlineEditInput = forwardRef45((props, ref) => {
   const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
   const inputRef = useRef24(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsx230(
     InlineEdit,
     {
       onSetValue,
@@ -8078,7 +8168,7 @@ var InlineEditInput = forwardRef45((props, ref) => {
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx228(InlineInput, { ...rest, ref: combinedRef })
+      children: /* @__PURE__ */ jsx230(InlineInput, { ...rest, ref: combinedRef })
     }
   );
 });
@@ -8103,9 +8193,9 @@ var InternalHeader_default = {
 
 // src/components/InternalHeader/NavigationItem.tsx
 import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
 var NavigationItem = forwardRef46(({ title, isCurrent, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx231(
     "a",
     {
       ...rest,
@@ -8123,7 +8213,7 @@ var NavigationItem = forwardRef46(({ title, isCurrent, ...rest }, ref) => {
 });
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx230, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx232, jsxs as jsxs50 } from "react/jsx-runtime";
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -8156,7 +8246,7 @@ var InternalHeader = (props) => {
   const hasNavigationElements = !!navigationElements && navigationElements.length > 0;
   const hasContextMenuElements = !!contextMenuElements && contextMenuElements.length > 0;
   const hasNavInContextMenu = smallScreen && hasNavigationElements;
-  const navigation = hasNavigationElements && !smallScreen ? /* @__PURE__ */ jsx230("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx230(
+  const navigation = hasNavigationElements && !smallScreen ? /* @__PURE__ */ jsx232("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx232(
     "ul",
     {
       className: cn(
@@ -8167,7 +8257,7 @@ var InternalHeader = (props) => {
       children: navigationElements.map((item, index) => {
         const { href, ...rest2 } = item;
         const isCurrent = href === currentPage;
-        return /* @__PURE__ */ jsx230("li", { className: InternalHeader_default["nav-list__item"], children: /* @__PURE__ */ jsx230(
+        return /* @__PURE__ */ jsx232("li", { className: InternalHeader_default["nav-list__item"], children: /* @__PURE__ */ jsx232(
           NavigationItem,
           {
             href,
@@ -8180,7 +8270,7 @@ var InternalHeader = (props) => {
     }
   ) }) : null;
   const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "div",
     {
       ...getBaseHTMLProps(
@@ -8195,7 +8285,7 @@ var InternalHeader = (props) => {
         rest
       ),
       children: [
-        /* @__PURE__ */ jsx230(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationHref ? /* @__PURE__ */ jsx230(
+        /* @__PURE__ */ jsx232(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationHref ? /* @__PURE__ */ jsx232(
           "a",
           {
             href: applicationHref,
@@ -8204,11 +8294,11 @@ var InternalHeader = (props) => {
             children: applicationName
           }
         ) : applicationName }),
-        /* @__PURE__ */ jsx230(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
-        (hasContextMenu || navigation !== null) && /* @__PURE__ */ jsx230("div", { className: InternalHeader_default["bar-separator"] }),
+        /* @__PURE__ */ jsx232(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
+        (hasContextMenu || navigation !== null) && /* @__PURE__ */ jsx232("div", { className: InternalHeader_default["bar-separator"] }),
         navigation,
-        hasContextMenu && /* @__PURE__ */ jsxs49("div", { className: InternalHeader_default["context-menu-group"], children: [
-          /* @__PURE__ */ jsx230(
+        hasContextMenu && /* @__PURE__ */ jsxs50("div", { className: InternalHeader_default["context-menu-group"], children: [
+          /* @__PURE__ */ jsx232(
             Button,
             {
               ref: buttonRef,
@@ -8220,7 +8310,7 @@ var InternalHeader = (props) => {
               "aria-label": "\xE5pne meny"
             }
           ),
-          /* @__PURE__ */ jsx230(
+          /* @__PURE__ */ jsx232(
             OverflowMenu,
             {
               isOpen: !contextMenuIsClosed,
@@ -8252,7 +8342,7 @@ var List_default = {
 };
 
 // src/components/List/List.tsx
-import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 var List = forwardRef47((props, ref) => {
   const {
     listType = "unordered",
@@ -8264,7 +8354,7 @@ var List = forwardRef47((props, ref) => {
     ...rest
   } = props;
   const List2 = listType === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx231(
+  return /* @__PURE__ */ jsx233(
     List2,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -8282,10 +8372,10 @@ List.displayName = "List";
 
 // src/components/List/ListItem.tsx
 import { forwardRef as forwardRef48 } from "react";
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx234 } from "react/jsx-runtime";
 var ListItem = forwardRef48(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx232("li", { ref, ...rest, className: cn(className, List_default.li) });
+    return /* @__PURE__ */ jsx234("li", { ref, ...rest, className: cn(className, List_default.li) });
   }
 );
 ListItem.displayName = "ListItem";
@@ -8312,7 +8402,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment8, jsx as jsx233, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx235, jsxs as jsxs51 } from "react/jsx-runtime";
 var purposeVariants2 = {
   info: {
     icon: InfoIcon
@@ -8347,9 +8437,9 @@ var LocalMessage = forwardRef49(
     } = props;
     const [isClosed, setClosed] = useState17(false);
     if (isClosed) {
-      return /* @__PURE__ */ jsx233(Fragment8, {});
+      return /* @__PURE__ */ jsx235(Fragment8, {});
     }
-    return /* @__PURE__ */ jsxs50(
+    return /* @__PURE__ */ jsxs51(
       "div",
       {
         ref,
@@ -8368,15 +8458,15 @@ var LocalMessage = forwardRef49(
         ),
         style: { ...htmlProps == null ? void 0 : htmlProps.style, width },
         children: [
-          /* @__PURE__ */ jsx233(
+          /* @__PURE__ */ jsx235(
             Icon,
             {
               icon: purposeVariants2[purpose].icon,
               className: cn(LocalMessage_default.icon, LocalMessage_default.container__icon)
             }
           ),
-          /* @__PURE__ */ jsx233("div", { className: LocalMessage_default.container__text, children: children != null ? children : /* @__PURE__ */ jsx233("span", { children: message }) }),
-          closable && /* @__PURE__ */ jsx233(
+          /* @__PURE__ */ jsx235("div", { className: LocalMessage_default.container__text, children: children != null ? children : /* @__PURE__ */ jsx235("span", { children: message }) }),
+          closable && /* @__PURE__ */ jsx235(
             Button,
             {
               icon: CloseIcon,
@@ -8401,7 +8491,7 @@ LocalMessage.displayName = "LocalMessage";
 import {
   forwardRef as forwardRef50,
   useEffect as useEffect20,
-  useId as useId13
+  useId as useId14
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -8440,7 +8530,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx234, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs52 } from "react/jsx-runtime";
 var Modal = forwardRef50((props, ref) => {
   const {
     isOpen = false,
@@ -8455,7 +8545,7 @@ var Modal = forwardRef50((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId13();
+  const generatedId = useId14();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -8479,14 +8569,14 @@ var Modal = forwardRef50((props, ref) => {
   useOnKeyDown(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
   return isOpen || hasTransitionedIn ? createPortal2(
-    /* @__PURE__ */ jsx234(
+    /* @__PURE__ */ jsx236(
       "div",
       {
         className: cn(
           Modal_default.backdrop,
           hasTransitionedIn && isOpen ? Modal_default["backdrop--visible"] : Modal_default["backdrop--hidden"]
         ),
-        children: /* @__PURE__ */ jsxs51(
+        children: /* @__PURE__ */ jsxs52(
           Paper,
           {
             ...getBaseHTMLProps(
@@ -8504,11 +8594,11 @@ var Modal = forwardRef50((props, ref) => {
             id: modalId,
             elevation: 4,
             children: [
-              /* @__PURE__ */ jsxs51("div", { className: Modal_default.content, children: [
-                header && /* @__PURE__ */ jsx234("div", { id: headerId, className: Modal_default.header, children: typeof header === "string" ? /* @__PURE__ */ jsx234(Typography, { typographyType: "headingSans03", children: header }) : header }),
+              /* @__PURE__ */ jsxs52("div", { className: Modal_default.content, children: [
+                header && /* @__PURE__ */ jsx236("div", { id: headerId, className: Modal_default.header, children: typeof header === "string" ? /* @__PURE__ */ jsx236(Typography, { typographyType: "headingSans03", children: header }) : header }),
                 children
               ] }),
-              onClose && /* @__PURE__ */ jsx234(
+              onClose && /* @__PURE__ */ jsx236(
                 Button,
                 {
                   size: "small",
@@ -8531,11 +8621,11 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalBody.tsx
 import { forwardRef as forwardRef51 } from "react";
-import { jsx as jsx235 } from "react/jsx-runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
 var ModalBody = forwardRef51(
   (props, ref) => {
     const { children, id, className, scrollable, htmlProps, height, ...rest } = props;
-    return /* @__PURE__ */ jsx235(
+    return /* @__PURE__ */ jsx237(
       "div",
       {
         ref,
@@ -8560,16 +8650,16 @@ ModalBody.displayName = "ModalBody";
 
 // src/components/Modal/ModalActions.tsx
 import { forwardRef as forwardRef52 } from "react";
-import { jsx as jsx236 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
 var ModalActions = forwardRef52(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx236("div", { ref, ...rest, className: cn(className, Modal_default.actions) });
+    return /* @__PURE__ */ jsx238("div", { ref, ...rest, className: cn(className, Modal_default.actions) });
   }
 );
 ModalActions.displayName = "ModalActions";
 
 // src/components/Pagination/Pagination.tsx
-import { forwardRef as forwardRef54, useState as useState18 } from "react";
+import { forwardRef as forwardRef55, useState as useState18 } from "react";
 
 // src/components/Pagination/Pagination.module.css
 var Pagination_default = {
@@ -8617,7 +8707,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-import { forwardRef as forwardRef53, useId as useId14 } from "react";
+import { forwardRef as forwardRef53, useId as useId15 } from "react";
 import {
   default as ReactSelect
 } from "react-select";
@@ -8998,7 +9088,7 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
 import {
   components
 } from "react-select";
-import { jsx as jsx237, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs53 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -9009,27 +9099,27 @@ var {
   MultiValueRemove,
   Control
 } = components;
-var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs52(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx237(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs53(Option, { ...props, children: [
+  props.isSelected && /* @__PURE__ */ jsx239(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
-var CustomOption = (props, Element) => /* @__PURE__ */ jsx237(Option, { ...props, children: /* @__PURE__ */ jsx237(Element, { ...props }) });
-var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx237(SingleValue, { ...props, children: /* @__PURE__ */ jsx237("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx237(Element, { ...props }) : props.children }) });
-var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx237(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx237(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx237(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
-var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx237(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx237(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
+var CustomOption = (props, Element) => /* @__PURE__ */ jsx239(Option, { ...props, children: /* @__PURE__ */ jsx239(Element, { ...props }) });
+var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx239(SingleValue, { ...props, children: /* @__PURE__ */ jsx239("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx239(Element, { ...props }) : props.children }) });
+var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx239(NoOptionsMessage, { ...props, children: "Ingen treff" });
+var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx239(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx239(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
+var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx239(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx239(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
 var DDSDropdownIndicator = (props, size2) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx239(
     DropdownIndicator,
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ jsx237(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
+      children: /* @__PURE__ */ jsx239(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
     }
   );
 };
-var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx237(
+var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx239(
   Input2,
   {
     ...props,
@@ -9039,11 +9129,11 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx237(
 );
 var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx239(
     "div",
     {
       "data-testid": dataTestId ? dataTestId + "-control" : void 0,
-      children: /* @__PURE__ */ jsxs52(
+      children: /* @__PURE__ */ jsxs53(
         Control,
         {
           ...rest,
@@ -9054,7 +9144,7 @@ var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
             readOnly && Select_default["control--readonly"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx237(
+            icon2 && /* @__PURE__ */ jsx239(
               Icon,
               {
                 icon: icon2,
@@ -9071,7 +9161,7 @@ var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
 };
 
 // src/components/Select/Select.tsx
-import { jsx as jsx238, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs54 } from "react/jsx-runtime";
 var getPlaceholder = (placeholder2, isMulti) => placeholder2 ? placeholder2 : isMulti ? "-- Velg en eller flere --" : "-- Velg fra listen --";
 function SelectInner(props, ref) {
   const {
@@ -9100,7 +9190,7 @@ function SelectInner(props, ref) {
     "data-testid": dataTestId,
     ...rest
   } = props;
-  const generatedId = useId14();
+  const generatedId = useId15();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasLabel = !!label;
@@ -9148,7 +9238,7 @@ function SelectInner(props, ref) {
     menuPortalTarget: document == null ? void 0 : document.body,
     ...rest
   };
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       className: cn(
@@ -9158,8 +9248,16 @@ function SelectInner(props, ref) {
       ),
       style: { ...style, width },
       children: [
-        hasLabel && /* @__PURE__ */ jsx238(Label, { htmlFor: uniqueId, showRequiredStyling, children: label }),
-        /* @__PURE__ */ jsx238(ReactSelect, { ...reactSelectProps, ref }),
+        hasLabel && /* @__PURE__ */ jsx240(
+          Label,
+          {
+            htmlFor: uniqueId,
+            showRequiredStyling,
+            className: Input_default.label,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx240(ReactSelect, { ...reactSelectProps, ref }),
         renderInputMessage(tip, tipId, errorMessage, errorMessageId)
       ]
     }
@@ -9168,12 +9266,122 @@ function SelectInner(props, ref) {
 var Select = forwardRef53(SelectInner);
 Select.displayName = "Select";
 
+// src/components/Select/NativeSelect/NativeSelect.tsx
+import { forwardRef as forwardRef54, useId as useId16 } from "react";
+
+// src/components/Select/NativeSelect/NativeSelect.module.css
+var NativeSelect_default = {
+  container: "NativeSelect_container",
+  select: "NativeSelect_select",
+  "select--readonly": "NativeSelect_select--readonly",
+  "select--medium": "NativeSelect_select--medium",
+  "select--small": "NativeSelect_select--small",
+  "select--tiny": "NativeSelect_select--tiny",
+  icon: "NativeSelect_icon"
+};
+
+// src/components/Select/NativeSelect/NativeSelect.tsx
+import { jsx as jsx241, jsxs as jsxs55 } from "react/jsx-runtime";
+var NativeSelect = forwardRef54(
+  (props, ref) => {
+    const {
+      id,
+      children,
+      componentSize = "medium",
+      label,
+      multiple,
+      readOnly,
+      errorMessage,
+      tip,
+      required,
+      "aria-required": ariaRequired,
+      "aria-describedby": ariaDescribedby,
+      width,
+      className,
+      style,
+      ...rest
+    } = props;
+    const generatedId = useId16();
+    const uniqueId = id != null ? id : `${generatedId}-native-select`;
+    const hasErrorMessage = !!errorMessage;
+    const hasTip = !!tip;
+    const hasLabel = !!label;
+    const tipId = derivativeIdGenerator(uniqueId, "tip");
+    const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
+    const showRequiredStyling = !!(required || ariaRequired);
+    const styleVariables = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ["--dds-native-select-width"]: width ? width : componentSize === "tiny" ? "210px" : "var(--dds-input-default-width)"
+    };
+    return /* @__PURE__ */ jsxs55("div", { children: [
+      hasLabel && /* @__PURE__ */ jsx241(
+        Label,
+        {
+          className: Input_default.label,
+          htmlFor: uniqueId,
+          showRequiredStyling,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs55("div", { className: NativeSelect_default.container, children: [
+        /* @__PURE__ */ jsx241(
+          "select",
+          {
+            ref,
+            id: uniqueId,
+            multiple,
+            className: cn(
+              className,
+              NativeSelect_default.select,
+              readOnly && NativeSelect_default["select--readonly"],
+              Input_default.input,
+              Input_default[`input--${componentSize}`],
+              NativeSelect_default[`select--${componentSize}`],
+              scrollbar,
+              focusable,
+              typographyStyles_default[getTypographyCn(inputTypographyTypes[componentSize])],
+              hasErrorMessage && Input_default["input--stateful-danger"]
+            ),
+            tabIndex: readOnly ? -1 : 0,
+            style: { ...style, ...styleVariables },
+            "aria-readonly": readOnly,
+            "aria-invalid": hasErrorMessage,
+            "aria-describedby": spaceSeparatedIdListGenerator([
+              hasTip ? tipId : void 0,
+              hasErrorMessage ? errorMessageId : void 0,
+              ariaDescribedby
+            ]),
+            required,
+            ...rest,
+            children
+          }
+        ),
+        !multiple && /* @__PURE__ */ jsx241(
+          Icon,
+          {
+            icon: ChevronDownIcon,
+            iconSize: componentSize === "tiny" ? "small" : "medium",
+            className: NativeSelect_default.icon
+          }
+        )
+      ] }),
+      renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    ] });
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectPlaceholder = forwardRef54((props, ref) => {
+  const { children = "-- Velg fra listen --", value, ...rest } = props;
+  return /* @__PURE__ */ jsx241("option", { ref, value: value != null ? value : "", selected: true, ...rest, children });
+});
+NativeSelectPlaceholder.displayName = "NativeSelectPlaceholder";
+
 // src/components/Select/utils.ts
 var createSelectOptions = (...args) => args.map((v2) => ({ label: v2, value: v2 }));
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx239, jsxs as jsxs54 } from "react/jsx-runtime";
-var Pagination = forwardRef54(
+import { jsx as jsx242, jsxs as jsxs56 } from "react/jsx-runtime";
+var Pagination = forwardRef55(
   (props, ref) => {
     const {
       itemsAmount,
@@ -9216,7 +9424,7 @@ var Pagination = forwardRef54(
     };
     const listItems = items.length > 0 ? items.map((item, i2) => {
       const isActive = item === activePage;
-      return /* @__PURE__ */ jsx239("li", { className: Pagination_default.list__item, children: item !== "truncator" ? /* @__PURE__ */ jsx239(
+      return /* @__PURE__ */ jsx242("li", { className: Pagination_default.list__item, children: item !== "truncator" ? /* @__PURE__ */ jsx242(
         Button,
         {
           purpose: isActive ? "primary" : "secondary",
@@ -9227,7 +9435,7 @@ var Pagination = forwardRef54(
           "aria-label": isActive ? `N\xE5v\xE6rende side (side ${item})` : `G\xE5 til side ${item}`,
           children: item
         }
-      ) : /* @__PURE__ */ jsx239(
+      ) : /* @__PURE__ */ jsx242(
         Icon,
         {
           icon: MoreHorizontalIcon,
@@ -9235,7 +9443,7 @@ var Pagination = forwardRef54(
         }
       ) }, `pagination-item-${i2}`);
     }) : void 0;
-    const previousPageButton = /* @__PURE__ */ jsx239(
+    const previousPageButton = /* @__PURE__ */ jsx242(
       Button,
       {
         purpose: "secondary",
@@ -9247,7 +9455,7 @@ var Pagination = forwardRef54(
         "aria-label": "G\xE5 til forrige siden"
       }
     );
-    const nextPageButton = /* @__PURE__ */ jsx239(
+    const nextPageButton = /* @__PURE__ */ jsx242(
       Button,
       {
         purpose: "secondary",
@@ -9264,8 +9472,8 @@ var Pagination = forwardRef54(
     } : { className: Pagination_default.nav };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
-    const navigation = withPagination ? /* @__PURE__ */ jsx239("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs54("ol", { className: Pagination_default.list, children: [
-      /* @__PURE__ */ jsx239(
+    const navigation = withPagination ? /* @__PURE__ */ jsx242("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs56("ol", { className: Pagination_default.list, children: [
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9277,7 +9485,7 @@ var Pagination = forwardRef54(
         }
       ),
       listItems,
-      /* @__PURE__ */ jsx239(
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9289,8 +9497,8 @@ var Pagination = forwardRef54(
         }
       )
     ] }) }) : null;
-    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx239("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs54("ol", { className: Pagination_default.list, children: [
-      /* @__PURE__ */ jsx239(
+    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx242("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs56("ol", { className: Pagination_default.list, children: [
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9298,7 +9506,7 @@ var Pagination = forwardRef54(
             isOnFirstPage && Pagination_default["list__item--hidden"]
           ),
           "aria-hidden": isOnFirstPage,
-          children: /* @__PURE__ */ jsx239(
+          children: /* @__PURE__ */ jsx242(
             Button,
             {
               purpose: "secondary",
@@ -9312,7 +9520,7 @@ var Pagination = forwardRef54(
           )
         }
       ),
-      /* @__PURE__ */ jsx239(
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9323,7 +9531,7 @@ var Pagination = forwardRef54(
           children: previousPageButton
         }
       ),
-      /* @__PURE__ */ jsx239("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx239(
+      /* @__PURE__ */ jsx242("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx242(
         Button,
         {
           size: "small",
@@ -9333,7 +9541,7 @@ var Pagination = forwardRef54(
           children: activePage
         }
       ) }),
-      /* @__PURE__ */ jsx239(
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9344,7 +9552,7 @@ var Pagination = forwardRef54(
           children: nextPageButton
         }
       ),
-      /* @__PURE__ */ jsx239(
+      /* @__PURE__ */ jsx242(
         "li",
         {
           className: cn(
@@ -9352,7 +9560,7 @@ var Pagination = forwardRef54(
             isOnLastPage && Pagination_default["list__item--hidden"]
           ),
           "aria-hidden": isOnLastPage,
-          children: /* @__PURE__ */ jsx239(
+          children: /* @__PURE__ */ jsx242(
             Button,
             {
               purpose: "secondary",
@@ -9370,7 +9578,7 @@ var Pagination = forwardRef54(
     const activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
     const activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
     const navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation;
-    return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ jsxs54(
+    return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ jsxs56(
       "div",
       {
         ...getBaseHTMLProps(
@@ -9384,8 +9592,8 @@ var Pagination = forwardRef54(
           rest
         ),
         children: [
-          /* @__PURE__ */ jsxs54("div", { className: Pagination_default.indicators, children: [
-            withSelect && /* @__PURE__ */ jsx239(
+          /* @__PURE__ */ jsxs56("div", { className: Pagination_default.indicators, children: [
+            withSelect && /* @__PURE__ */ jsx242(
               Select,
               {
                 options: selectOptions,
@@ -9401,7 +9609,7 @@ var Pagination = forwardRef54(
                 "aria-label": "Antall elementer per side"
               }
             ),
-            withCounter && /* @__PURE__ */ jsxs54(Typography, { typographyType: "supportingStyleLabel01", as: "p", children: [
+            withCounter && /* @__PURE__ */ jsxs56(Typography, { typographyType: "supportingStyleLabel01", as: "p", children: [
               "Viser ",
               activePageFirstItem,
               "-",
@@ -9420,7 +9628,7 @@ Pagination.displayName = "Pagination";
 
 // src/components/Popover/Popover.tsx
 import { ddsTokens as ddsTokens15 } from "@norges-domstoler/dds-design-tokens";
-import { forwardRef as forwardRef55 } from "react";
+import { forwardRef as forwardRef56 } from "react";
 
 // src/components/Popover/Popover.module.css
 var Popover_default = {
@@ -9431,8 +9639,8 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx240, jsxs as jsxs55 } from "react/jsx-runtime";
-var Popover = forwardRef55(
+import { jsx as jsx243, jsxs as jsxs57 } from "react/jsx-runtime";
+var Popover = forwardRef56(
   (props, ref) => {
     const {
       title,
@@ -9472,7 +9680,7 @@ var Popover = forwardRef55(
     useOnClickOutside(elements, () => {
       if (isOpen) onClose && onClose();
     });
-    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs55(
+    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs57(
       Paper,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -9489,15 +9697,15 @@ var Popover = forwardRef55(
           focus_default.focusable
         ),
         children: [
-          title && /* @__PURE__ */ jsx240("div", { className: Popover_default.title, children: typeof title === "string" ? /* @__PURE__ */ jsx240(Typography, { typographyType: "headingSans02", children: title }) : title }),
-          /* @__PURE__ */ jsx240(
+          title && /* @__PURE__ */ jsx243("div", { className: Popover_default.title, children: typeof title === "string" ? /* @__PURE__ */ jsx243(Typography, { typographyType: "headingSans02", children: title }) : title }),
+          /* @__PURE__ */ jsx243(
             "div",
             {
               className: !hasTitle && withCloseButton ? Popover_default["content--closable--no-title"] : "",
               children
             }
           ),
-          withCloseButton && /* @__PURE__ */ jsx240(
+          withCloseButton && /* @__PURE__ */ jsx243(
             Button,
             {
               icon: CloseIcon,
@@ -9520,11 +9728,11 @@ import {
   Children as ReactChildren5,
   cloneElement as cloneElement6,
   isValidElement as isValidElement7,
-  useId as useId15,
+  useId as useId17,
   useRef as useRef26,
   useState as useState19
 } from "react";
-import { Fragment as Fragment9, jsx as jsx241 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx244 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen = false,
   onCloseButtonClick,
@@ -9533,7 +9741,7 @@ var PopoverGroup = ({
   popoverId
 }) => {
   const [open, setOpen] = useState19(isOpen);
-  const generatedId = useId15();
+  const generatedId = useId17();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const handleOnCloseButtonClick = () => {
     setOpen(false);
@@ -9570,7 +9778,7 @@ var PopoverGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsx241(Fragment9, { children: Children8 });
+  return /* @__PURE__ */ jsx244(Fragment9, { children: Children8 });
 };
 PopoverGroup.displayName = "PopoverGroup";
 
@@ -9579,7 +9787,7 @@ import {
   Children as Children4,
   Fragment as Fragment11,
   cloneElement as cloneElement7,
-  forwardRef as forwardRef56,
+  forwardRef as forwardRef57,
   isValidElement as isValidElement8,
   useEffect as useEffect21,
   useMemo as useMemo3,
@@ -9618,7 +9826,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment10, jsx as jsx242, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx245, jsxs as jsxs58 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -9650,15 +9858,15 @@ var ProgressTrackerItem = (props) => {
   const itemState = toItemState(active, completed, disabled);
   const stepNumberContent = useMemo2(() => {
     if (completed) {
-      return /* @__PURE__ */ jsx242(Icon, { icon: CheckIcon, iconSize: "small" });
+      return /* @__PURE__ */ jsx245(Icon, { icon: CheckIcon, iconSize: "small" });
     }
     if (icon2 !== void 0) {
-      return /* @__PURE__ */ jsx242(Icon, { icon: icon2, iconSize: "small" });
+      return /* @__PURE__ */ jsx245(Icon, { icon: icon2, iconSize: "small" });
     }
     return index + 1;
   }, [completed, icon2, index]);
-  const stepContent = /* @__PURE__ */ jsxs56(Fragment10, { children: [
-    /* @__PURE__ */ jsx242(
+  const stepContent = /* @__PURE__ */ jsxs58(Fragment10, { children: [
+    /* @__PURE__ */ jsx245(
       "div",
       {
         "aria-hidden": true,
@@ -9670,7 +9878,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsxs58(
       "div",
       {
         className: cn(
@@ -9679,13 +9887,13 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-sans-03"]
         ),
         children: [
-          /* @__PURE__ */ jsx242(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
+          /* @__PURE__ */ jsx245(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
           children
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx242("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx245("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ jsx245(
     "button",
     {
       onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
@@ -9693,14 +9901,14 @@ var ProgressTrackerItem = (props) => {
       className: cn(ProgressTracker_default["item-button"], focusable),
       children: stepContent
     }
-  ) : /* @__PURE__ */ jsx242("div", { className: cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"]), children: stepContent }) });
+  ) : /* @__PURE__ */ jsx245("div", { className: cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"]), children: stepContent }) });
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-import { jsx as jsx243, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs59 } from "react/jsx-runtime";
 var ProgressTracker = (() => {
-  const Res = forwardRef56((props, ref) => {
+  const Res = forwardRef57((props, ref) => {
     const {
       id,
       activeStep = 0,
@@ -9730,14 +9938,14 @@ var ProgressTracker = (() => {
       const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
       return itemsWithConnectorsBetween;
     }, [children]);
-    return /* @__PURE__ */ jsx243(
+    return /* @__PURE__ */ jsx246(
       ProgressTrackerContext.Provider,
       {
         value: {
           activeStep: thisActiveStep,
           handleStepChange: handleChange
         },
-        children: /* @__PURE__ */ jsx243("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx243("ol", { className: ProgressTracker_default.list, children: steps }) })
+        children: /* @__PURE__ */ jsx246("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx246("ol", { className: ProgressTracker_default.list, children: steps }) })
       }
     );
   });
@@ -9761,16 +9969,16 @@ var intersperseItemsWithConnector = (children) => Children4.map(children, (child
   if (index === 0) {
     return child;
   }
-  return /* @__PURE__ */ jsxs57(Fragment11, { children: [
-    /* @__PURE__ */ jsx243("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
+  return /* @__PURE__ */ jsxs59(Fragment11, { children: [
+    /* @__PURE__ */ jsx246("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
     child
   ] }, index);
 });
 
 // src/components/Search/Search.tsx
 import {
-  forwardRef as forwardRef58,
-  useId as useId16,
+  forwardRef as forwardRef59,
+  useId as useId18,
   useState as useState21
 } from "react";
 
@@ -9831,9 +10039,9 @@ function createEmptyChangeEvent(inputElementId) {
 }
 
 // src/components/Search/SearchSuggestions.tsx
-import { forwardRef as forwardRef57 } from "react";
-import { jsx as jsx244, jsxs as jsxs58 } from "react/jsx-runtime";
-var SearchSuggestions = forwardRef57((props, ref) => {
+import { forwardRef as forwardRef58 } from "react";
+import { jsx as jsx247, jsxs as jsxs60 } from "react/jsx-runtime";
+var SearchSuggestions = forwardRef58((props, ref) => {
   const {
     id,
     searchId,
@@ -9852,14 +10060,14 @@ var SearchSuggestions = forwardRef57((props, ref) => {
   );
   const [focus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, showSuggestions);
   const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
-  const renderedSuggestions = /* @__PURE__ */ jsx244(
+  const renderedSuggestions = /* @__PURE__ */ jsx247(
     "ul",
     {
       role: "listbox",
       "aria-labelledby": suggestionsHeaderId,
       className: utilStyles_default["remove-list-styling"],
       children: suggestionsToRender.map((suggestion, index) => {
-        return /* @__PURE__ */ jsx244("li", { role: "option", children: /* @__PURE__ */ jsx244(
+        return /* @__PURE__ */ jsx247("li", { role: "option", children: /* @__PURE__ */ jsx247(
           OverflowMenuItem,
           {
             index,
@@ -9875,7 +10083,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
       })
     }
   );
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs60(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -9894,7 +10102,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
       "aria-hidden": !showSuggestions,
       border: "default",
       children: [
-        /* @__PURE__ */ jsx244(
+        /* @__PURE__ */ jsx247(
           "span",
           {
             id: suggestionsHeaderId,
@@ -9913,7 +10121,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment12, jsx as jsx245, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx248, jsxs as jsxs61 } from "react/jsx-runtime";
 var getIconSize = (size2) => {
   switch (size2) {
     case "large":
@@ -9924,7 +10132,7 @@ var getIconSize = (size2) => {
       return "small";
   }
 };
-var Search = forwardRef58(
+var Search = forwardRef59(
   ({
     componentSize = "medium",
     buttonProps,
@@ -9940,7 +10148,7 @@ var Search = forwardRef58(
     ...rest
   }, ref) => {
     var _a;
-    const generatedId = useId16();
+    const generatedId = useId18();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasLabel = !!label;
     const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -9968,10 +10176,10 @@ var Search = forwardRef58(
     } = buttonProps != null ? buttonProps : {};
     const hasSuggestions = !!context.suggestions;
     const showSearchButton = !!buttonProps && !!onClick;
-    return /* @__PURE__ */ jsxs59("div", { className: Search_default.container, children: [
-      hasLabel && /* @__PURE__ */ jsx245(Label, { htmlFor: uniqueId, children: label }),
-      /* @__PURE__ */ jsxs59("div", { children: [
-        /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs61("div", { className: Search_default.container, children: [
+      hasLabel && /* @__PURE__ */ jsx248(Label, { htmlFor: uniqueId, children: label }),
+      /* @__PURE__ */ jsxs61("div", { children: [
+        /* @__PURE__ */ jsxs61(
           "div",
           {
             className: cn(
@@ -9980,8 +10188,8 @@ var Search = forwardRef58(
             ),
             style,
             children: [
-              /* @__PURE__ */ jsxs59("div", { className: Search_default["input-group"], children: [
-                /* @__PURE__ */ jsx245(
+              /* @__PURE__ */ jsxs61("div", { className: Search_default["input-group"], children: [
+                /* @__PURE__ */ jsx248(
                   Icon,
                   {
                     icon: SearchIcon,
@@ -9989,7 +10197,7 @@ var Search = forwardRef58(
                     className: cn(Search_default["search-icon"])
                   }
                 ),
-                /* @__PURE__ */ jsx245(
+                /* @__PURE__ */ jsx248(
                   Input,
                   {
                     ...rest,
@@ -10017,8 +10225,8 @@ var Search = forwardRef58(
                     )
                   }
                 ),
-                hasSuggestions && /* @__PURE__ */ jsxs59(Fragment12, { children: [
-                  /* @__PURE__ */ jsx245(
+                hasSuggestions && /* @__PURE__ */ jsxs61(Fragment12, { children: [
+                  /* @__PURE__ */ jsx248(
                     SearchSuggestions,
                     {
                       id: suggestionsId,
@@ -10030,9 +10238,9 @@ var Search = forwardRef58(
                       componentSize
                     }
                   ),
-                  /* @__PURE__ */ jsx245(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+                  /* @__PURE__ */ jsx248(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
                 ] }),
-                hasValue && /* @__PURE__ */ jsx245(
+                hasValue && /* @__PURE__ */ jsx248(
                   Button,
                   {
                     icon: CloseSmallIcon,
@@ -10044,7 +10252,7 @@ var Search = forwardRef58(
                   }
                 )
               ] }),
-              showSearchButton && /* @__PURE__ */ jsx245(
+              showSearchButton && /* @__PURE__ */ jsx248(
                 Button,
                 {
                   size: componentSize,
@@ -10069,7 +10277,7 @@ import {
   useRef as useRef27,
   useState as useState22
 } from "react";
-import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx249 } from "react/jsx-runtime";
 var SearchAutocompleteWrapper = (props) => {
   const {
     value,
@@ -10145,7 +10353,7 @@ var SearchAutocompleteWrapper = (props) => {
     inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return /* @__PURE__ */ jsx246(AutocompleteSearchContext.Provider, { value: contextProps, children });
+  return /* @__PURE__ */ jsx249(AutocompleteSearchContext.Provider, { value: contextProps, children });
 };
 SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
 
@@ -10155,7 +10363,7 @@ Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search2.Suggestions = SearchSuggestions;
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef60, useId as useId17 } from "react";
+import { forwardRef as forwardRef61, useId as useId19 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
 import { createContext as createContext5, useContext as useContext8 } from "react";
@@ -10166,7 +10374,7 @@ var useCheckboxGroup = () => {
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
 import {
-  forwardRef as forwardRef59
+  forwardRef as forwardRef60
 } from "react";
 
 // src/components/SelectionControl/SelectionControl.module.css
@@ -10187,10 +10395,10 @@ var SelectionControl_default = {
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-import { jsx as jsx247 } from "react/jsx-runtime";
-var SelectionControl = forwardRef59((props, ref) => {
+import { jsx as jsx250 } from "react/jsx-runtime";
+var SelectionControl = forwardRef60((props, ref) => {
   const { controlType, className, ...rest } = props;
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx250(
     "span",
     {
       ref,
@@ -10203,7 +10411,7 @@ var SelectionControl = forwardRef59((props, ref) => {
     }
   );
 });
-var Label2 = forwardRef59(
+var Label2 = forwardRef60(
   (props, ref) => {
     const {
       disabled,
@@ -10214,7 +10422,7 @@ var Label2 = forwardRef59(
       className,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx247(
+    return /* @__PURE__ */ jsx250(
       "label",
       {
         ref,
@@ -10245,8 +10453,8 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { jsx as jsx248, jsxs as jsxs60 } from "react/jsx-runtime";
-var Checkbox = forwardRef60(
+import { jsx as jsx251, jsxs as jsxs62 } from "react/jsx-runtime";
+var Checkbox = forwardRef61(
   (props, ref) => {
     const {
       id,
@@ -10261,7 +10469,7 @@ var Checkbox = forwardRef60(
       htmlProps = {},
       ...rest
     } = props;
-    const generatedId = useId17();
+    const generatedId = useId19();
     const uniqueId = id != null ? id : `${generatedId}-checkbox`;
     const checkboxGroup = useCheckboxGroup();
     const hasLabel = !!label;
@@ -10270,7 +10478,7 @@ var Checkbox = forwardRef60(
       className: htmlPropsClassName,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsxs60(
+    return /* @__PURE__ */ jsxs62(
       Label2,
       {
         hasError: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
@@ -10282,7 +10490,7 @@ var Checkbox = forwardRef60(
         className: cn(className, htmlPropsClassName),
         style,
         children: [
-          /* @__PURE__ */ jsx248(
+          /* @__PURE__ */ jsx251(
             "input",
             {
               ...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
@@ -10306,14 +10514,14 @@ var Checkbox = forwardRef60(
               )
             }
           ),
-          /* @__PURE__ */ jsx248(
+          /* @__PURE__ */ jsx251(
             SelectionControl,
             {
               controlType: "checkbox",
               className: focus_default["focus-styled-sibling"]
             }
           ),
-          hasLabel && /* @__PURE__ */ jsx248(Typography, { ...selectionControlTypographyProps, children: label })
+          hasLabel && /* @__PURE__ */ jsx251(Typography, { ...selectionControlTypographyProps, children: label })
         ]
       }
     );
@@ -10322,8 +10530,8 @@ var Checkbox = forwardRef60(
 Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-import { useId as useId18 } from "react";
-import { jsx as jsx249, jsxs as jsxs61 } from "react/jsx-runtime";
+import { useId as useId20 } from "react";
+import { jsx as jsx252, jsxs as jsxs63 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
     label,
@@ -10341,7 +10549,7 @@ var CheckboxGroup = (props) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired } = htmlProps;
-  const generatedId = useId18();
+  const generatedId = useId20();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
   const showRequiredMarker = required || ariaRequired;
@@ -10355,7 +10563,7 @@ var CheckboxGroup = (props) => {
     disabled,
     readOnly
   };
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
       ...getBaseHTMLProps(
@@ -10365,7 +10573,7 @@ var CheckboxGroup = (props) => {
         rest
       ),
       children: [
-        /* @__PURE__ */ jsxs61(
+        /* @__PURE__ */ jsxs63(
           Typography,
           {
             as: "span",
@@ -10374,12 +10582,12 @@ var CheckboxGroup = (props) => {
             children: [
               label,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx249(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx252(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx249(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx249(
+        /* @__PURE__ */ jsx252(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx252(
           "div",
           {
             role: "group",
@@ -10397,7 +10605,7 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { forwardRef as forwardRef61, useId as useId19 } from "react";
+import { forwardRef as forwardRef62, useId as useId21 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
 import { createContext as createContext6, useContext as useContext9 } from "react";
@@ -10407,7 +10615,7 @@ var useRadioButtonGroup = () => {
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { jsx as jsx250, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs64 } from "react/jsx-runtime";
 var isValueEqualToGroupValueOrFalsy = (value, group) => {
   if (typeof value !== "undefined" && value !== null && group) {
     if (typeof value === "number") {
@@ -10417,7 +10625,7 @@ var isValueEqualToGroupValueOrFalsy = (value, group) => {
   }
   return !!value;
 };
-var RadioButton = forwardRef61(
+var RadioButton = forwardRef62(
   (props, ref) => {
     const {
       id,
@@ -10441,7 +10649,7 @@ var RadioButton = forwardRef61(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const generatedId = useId19();
+    const generatedId = useId21();
     const uniqueId = id != null ? id : `${generatedId}-radioButton`;
     const hasLabel = !!label;
     const radioButtonGroup = useRadioButtonGroup();
@@ -10453,7 +10661,7 @@ var RadioButton = forwardRef61(
     if (radioButtonGroup == null ? void 0 : radioButtonGroup.errorMessageId)
       describedByIds.push(radioButtonGroup == null ? void 0 : radioButtonGroup.errorMessageId);
     if (ariaDescribedby) describedByIds.push(ariaDescribedby);
-    return /* @__PURE__ */ jsxs62(
+    return /* @__PURE__ */ jsxs64(
       Label2,
       {
         hasError: error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error),
@@ -10465,7 +10673,7 @@ var RadioButton = forwardRef61(
         htmlFor: uniqueId,
         controlType: "radio",
         children: [
-          /* @__PURE__ */ jsx250(
+          /* @__PURE__ */ jsx253(
             "input",
             {
               ...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
@@ -10485,14 +10693,14 @@ var RadioButton = forwardRef61(
               ref
             }
           ),
-          /* @__PURE__ */ jsx250(
+          /* @__PURE__ */ jsx253(
             SelectionControl,
             {
               controlType: "radio",
               className: focus_default["focus-styled-sibling"]
             }
           ),
-          /* @__PURE__ */ jsx250(Typography, { ...selectionControlTypographyProps, children: children != null ? children : label })
+          /* @__PURE__ */ jsx253(Typography, { ...selectionControlTypographyProps, children: children != null ? children : label })
         ]
       }
     );
@@ -10502,11 +10710,11 @@ RadioButton.displayName = "RadioButton";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
 import {
-  forwardRef as forwardRef62,
-  useId as useId20,
+  forwardRef as forwardRef63,
+  useId as useId22,
   useState as useState23
 } from "react";
-import { jsx as jsx251, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs65 } from "react/jsx-runtime";
 var RadioButtonGroupInner = (props, ref) => {
   const {
     name,
@@ -10528,7 +10736,7 @@ var RadioButtonGroupInner = (props, ref) => {
   } = props;
   const { "aria-required": ariaRequired = false } = htmlProps;
   const [groupValue, setGroupValue] = useState23(value);
-  const generatedId = useId20();
+  const generatedId = useId22();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
@@ -10548,7 +10756,7 @@ var RadioButtonGroupInner = (props, ref) => {
     value: groupValue,
     onChange: handleChange
   };
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
       ...getBaseHTMLProps(
@@ -10559,7 +10767,7 @@ var RadioButtonGroupInner = (props, ref) => {
       ),
       ref,
       children: [
-        /* @__PURE__ */ jsxs63(
+        /* @__PURE__ */ jsxs65(
           Typography,
           {
             as: "span",
@@ -10568,12 +10776,12 @@ var RadioButtonGroupInner = (props, ref) => {
             children: [
               label,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx251(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx254(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx251(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx251(
+        /* @__PURE__ */ jsx254(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx254(
           "div",
           {
             role: "radiogroup",
@@ -10589,11 +10797,11 @@ var RadioButtonGroupInner = (props, ref) => {
     }
   );
 };
-var RadioButtonGroup = forwardRef62(RadioButtonGroupInner);
+var RadioButtonGroup = forwardRef63(RadioButtonGroupInner);
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { forwardRef as forwardRef63 } from "react";
+import { forwardRef as forwardRef64 } from "react";
 
 // src/components/SkipToContent/SkipToContent.module.css
 var SkipToContent_default = {
@@ -10602,8 +10810,8 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { jsx as jsx252 } from "react/jsx-runtime";
-var SkipToContent = forwardRef63(
+import { jsx as jsx255 } from "react/jsx-runtime";
+var SkipToContent = forwardRef64(
   (props, ref) => {
     const {
       text = "Til hovedinnhold",
@@ -10618,12 +10826,12 @@ var SkipToContent = forwardRef63(
       style,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsx252(
+    return /* @__PURE__ */ jsx255(
       "div",
       {
         className: cn(className, htmlPropsClassName, SkipToContent_default.wrapper),
         style: { ...style, top },
-        children: /* @__PURE__ */ jsx252(
+        children: /* @__PURE__ */ jsx255(
           Link,
           {
             ...getBaseHTMLProps(id, restHtmlProps, rest),
@@ -10640,7 +10848,7 @@ var SkipToContent = forwardRef63(
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-import { forwardRef as forwardRef64, useState as useState24 } from "react";
+import { forwardRef as forwardRef65, useState as useState24 } from "react";
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -10651,8 +10859,8 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx253, jsxs as jsxs64 } from "react/jsx-runtime";
-var SplitButton = forwardRef64(
+import { jsx as jsx256, jsxs as jsxs66 } from "react/jsx-runtime";
+var SplitButton = forwardRef65(
   (props, ref) => {
     const {
       size: size2,
@@ -10667,8 +10875,8 @@ var SplitButton = forwardRef64(
       purpose,
       size: size2
     };
-    return /* @__PURE__ */ jsxs64("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
-      /* @__PURE__ */ jsx253(
+    return /* @__PURE__ */ jsxs66("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
+      /* @__PURE__ */ jsx256(
         Button,
         {
           ...buttonStyleProps,
@@ -10677,8 +10885,8 @@ var SplitButton = forwardRef64(
           className: SplitButton_default.main
         }
       ),
-      /* @__PURE__ */ jsxs64(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
-        /* @__PURE__ */ jsx253(
+      /* @__PURE__ */ jsxs66(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
+        /* @__PURE__ */ jsx256(
           Button,
           {
             ...buttonStyleProps,
@@ -10691,7 +10899,7 @@ var SplitButton = forwardRef64(
             )
           }
         ),
-        /* @__PURE__ */ jsx253(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
+        /* @__PURE__ */ jsx256(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
       ] })
     ] });
   }
@@ -10703,7 +10911,7 @@ import {
   Children as Children5,
   Fragment as Fragment13,
   cloneElement as cloneElement8,
-  forwardRef as forwardRef72,
+  forwardRef as forwardRef73,
   isValidElement as isValidElement9,
   useEffect as useEffect24,
   useState as useState26
@@ -10718,30 +10926,30 @@ var CollapsibleTableContext = createContext7({
 var useCollapsibleTableContext = () => useContext10(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-import { forwardRef as forwardRef65 } from "react";
-import { jsx as jsx254 } from "react/jsx-runtime";
-var Body = forwardRef65(
+import { forwardRef as forwardRef66 } from "react";
+import { jsx as jsx257 } from "react/jsx-runtime";
+var Body = forwardRef66(
   (props, ref) => {
-    return /* @__PURE__ */ jsx254("tbody", { ref, ...props });
+    return /* @__PURE__ */ jsx257("tbody", { ref, ...props });
   }
 );
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Cell.tsx
 import {
-  forwardRef as forwardRef67
+  forwardRef as forwardRef68
 } from "react";
 
 // src/components/Table/normal/Head.tsx
 import {
   createContext as createContext8,
-  forwardRef as forwardRef66,
+  forwardRef as forwardRef67,
   useContext as useContext11
 } from "react";
-import { jsx as jsx255 } from "react/jsx-runtime";
-var Head = forwardRef66(
+import { jsx as jsx258 } from "react/jsx-runtime";
+var Head = forwardRef67(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx255("thead", { ref, ...rest, children: /* @__PURE__ */ jsx255(HeadContext.Provider, { value: true, children }) });
+    return /* @__PURE__ */ jsx258("thead", { ref, ...rest, children: /* @__PURE__ */ jsx258(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
@@ -10777,8 +10985,8 @@ var Table_default = {
 };
 
 // src/components/Table/normal/Cell.tsx
-import { jsx as jsx256 } from "react/jsx-runtime";
-var Cell = forwardRef67(
+import { jsx as jsx259 } from "react/jsx-runtime";
+var Cell = forwardRef68(
   ({
     children,
     type: _type,
@@ -10791,7 +10999,7 @@ var Cell = forwardRef67(
     const type = _type != null ? _type : isInHead ? "head" : "data";
     const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
     const isComplexLayout = layout === "text and icon";
-    return isCollapsibleChild ? /* @__PURE__ */ jsx256(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx256(
+    return isCollapsibleChild ? /* @__PURE__ */ jsx259(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx259(
       "th",
       {
         ref,
@@ -10801,15 +11009,15 @@ var Cell = forwardRef67(
           !isComplexLayout && Table_default[`cell--${layout}`],
           Table_default["cell--head"]
         ),
-        children: isComplexLayout ? /* @__PURE__ */ jsx256("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx259("div", { className: Table_default.cell__inner, children }) : children
       }
-    ) : /* @__PURE__ */ jsx256(
+    ) : /* @__PURE__ */ jsx259(
       "td",
       {
         ref,
         ...rest,
         className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-        children: isComplexLayout ? /* @__PURE__ */ jsx256("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx259("div", { className: Table_default.cell__inner, children }) : children
       }
     );
   }
@@ -10817,23 +11025,23 @@ var Cell = forwardRef67(
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-import { forwardRef as forwardRef68 } from "react";
-import { jsx as jsx257 } from "react/jsx-runtime";
-var Foot = forwardRef68(
+import { forwardRef as forwardRef69 } from "react";
+import { jsx as jsx260 } from "react/jsx-runtime";
+var Foot = forwardRef69(
   (props, ref) => {
-    return /* @__PURE__ */ jsx257("tfoot", { ref, ...props });
+    return /* @__PURE__ */ jsx260("tfoot", { ref, ...props });
   }
 );
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-import { forwardRef as forwardRef69 } from "react";
-import { jsx as jsx258 } from "react/jsx-runtime";
-var Row = forwardRef69(
+import { forwardRef as forwardRef70 } from "react";
+import { jsx as jsx261 } from "react/jsx-runtime";
+var Row = forwardRef70(
   ({ type: _type, mode = "normal", hoverable, selected, className, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
-    return /* @__PURE__ */ jsx258(
+    return /* @__PURE__ */ jsx261(
       "tr",
       {
         ref,
@@ -10856,23 +11064,23 @@ var Row = forwardRef69(
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-import { forwardRef as forwardRef70 } from "react";
-import { jsx as jsx259, jsxs as jsxs65 } from "react/jsx-runtime";
+import { forwardRef as forwardRef71 } from "react";
+import { jsx as jsx262, jsxs as jsxs67 } from "react/jsx-runtime";
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
-    return /* @__PURE__ */ jsx259(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
+    return /* @__PURE__ */ jsx262(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
   }
-  return sortOrder === "ascending" ? /* @__PURE__ */ jsx259(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx259(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
+  return sortOrder === "ascending" ? /* @__PURE__ */ jsx262(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx262(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
-var SortCell = forwardRef70(
-  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx259(
+var SortCell = forwardRef71(
+  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx262(
     Cell,
     {
       ref,
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs65(
+      children: /* @__PURE__ */ jsxs67(
         "button",
         {
           onClick,
@@ -10896,8 +11104,8 @@ var SortCell = forwardRef70(
 SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
-import { forwardRef as forwardRef71 } from "react";
-import { jsx as jsx260 } from "react/jsx-runtime";
+import { forwardRef as forwardRef72 } from "react";
+import { jsx as jsx263 } from "react/jsx-runtime";
 function getDensityCn(value) {
   switch (value) {
     case "normal":
@@ -10907,7 +11115,7 @@ function getDensityCn(value) {
       return "extra-compact";
   }
 }
-var Table = forwardRef71(
+var Table = forwardRef72(
   ({
     density = "normal",
     stickyHeader,
@@ -10916,7 +11124,7 @@ var Table = forwardRef71(
     children,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx260(
+    return /* @__PURE__ */ jsx263(
       "table",
       {
         ref,
@@ -10938,7 +11146,7 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import { useEffect as useEffect23, useRef as useRef28, useState as useState25 } from "react";
-import { jsx as jsx261 } from "react/jsx-runtime";
+import { jsx as jsx264 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
   const [overflowX, setOverflowX] = useState25(false);
   const [windowWidth, setWindowWidth] = useState25(window.innerWidth);
@@ -10960,7 +11168,7 @@ var TableWrapper = ({ className, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx264(
     "div",
     {
       ref: wrapperRef,
@@ -10987,8 +11195,8 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment14, jsx as jsx262, jsxs as jsxs66 } from "react/jsx-runtime";
-var CollapsibleRow = forwardRef72(
+import { Fragment as Fragment14, jsx as jsx265, jsxs as jsxs68 } from "react/jsx-runtime";
+var CollapsibleRow = forwardRef73(
   ({
     type: _type,
     className,
@@ -11029,33 +11237,33 @@ var CollapsibleRow = forwardRef72(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix3, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ jsxs66(Fragment13, { children: [
-        /* @__PURE__ */ jsx262(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+      return /* @__PURE__ */ jsxs68(Fragment13, { children: [
+        /* @__PURE__ */ jsx265(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
         isValidElement9(child) && cloneElement8(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx262(Row, { ...rowProps(), children: /* @__PURE__ */ jsx262(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx262(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx265(Row, { ...rowProps(), children: /* @__PURE__ */ jsx265(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx265(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
     const definingColumnCells = childrenArray.slice().filter((column2, index) => definingColumnIndex.indexOf(index) > -1).sort((a3, b) => {
       return definingColumnIndex.indexOf(childrenArray.indexOf(a3)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
     });
     const headerRow = () => {
       if (type !== "head" || !isCollapsed) return null;
-      return /* @__PURE__ */ jsx262(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs66(Fragment14, { children: [
+      return /* @__PURE__ */ jsx265(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs68(Fragment14, { children: [
         definingColumnCells,
-        /* @__PURE__ */ jsxs66(Table2.Cell, { type: "head", layout: "center", children: [
+        /* @__PURE__ */ jsxs68(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ jsx262(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ jsx265(VisuallyHidden, { as: "span", children: "raden" })
         ] })
       ] }) });
     };
     const idList = spaceSeparatedIdListGenerator(collapsibleIds);
     const rowWithChevron = () => {
       if (type !== "body" || !isCollapsed) return null;
-      return /* @__PURE__ */ jsxs66(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
+      return /* @__PURE__ */ jsxs68(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
         definingColumnCells,
-        /* @__PURE__ */ jsx262(Table2.Cell, { children: /* @__PURE__ */ jsx262(
+        /* @__PURE__ */ jsx265(Table2.Cell, { children: /* @__PURE__ */ jsx265(
           "button",
           {
             onClick: () => setChildrenCollapsed(!childrenCollapsed),
@@ -11067,7 +11275,7 @@ var CollapsibleRow = forwardRef72(
               utilStyles_default["remove-button-styling"],
               focusable
             ),
-            children: /* @__PURE__ */ jsx262(
+            children: /* @__PURE__ */ jsx265(
               AnimatedChevronUpDown,
               {
                 isUp: childrenCollapsed ? false : true,
@@ -11079,28 +11287,28 @@ var CollapsibleRow = forwardRef72(
         ) })
       ] });
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs66(Fragment14, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs68(Fragment14, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ jsxs66(Fragment14, { children: [
+      type === "body" && /* @__PURE__ */ jsxs68(Fragment14, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ jsx262(Row, { ref, ...rowProps(), children });
+    ] }) : /* @__PURE__ */ jsx265(Row, { ref, ...rowProps(), children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-import { forwardRef as forwardRef73 } from "react";
-import { jsx as jsx263 } from "react/jsx-runtime";
-var CollapsibleTable = forwardRef73((props, ref) => {
+import { forwardRef as forwardRef74 } from "react";
+import { jsx as jsx266 } from "react/jsx-runtime";
+var CollapsibleTable = forwardRef74((props, ref) => {
   const {
     isCollapsed,
     headerValues,
     definingColumnIndex = [0],
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx263(
+  return /* @__PURE__ */ jsx266(
     CollapsibleTableContext.Provider,
     {
       value: {
@@ -11108,7 +11316,7 @@ var CollapsibleTable = forwardRef73((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx263(Table2, { ref, ...rest })
+      children: /* @__PURE__ */ jsx266(Table2, { ref, ...rest })
     }
   );
 });
@@ -11120,9 +11328,9 @@ CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/Tabs.tsx
 import {
-  forwardRef as forwardRef74,
+  forwardRef as forwardRef75,
   useEffect as useEffect25,
-  useId as useId21,
+  useId as useId23,
   useRef as useRef29,
   useState as useState27
 } from "react";
@@ -11156,8 +11364,8 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx264 } from "react/jsx-runtime";
-var Tabs = forwardRef74((props, ref) => {
+import { jsx as jsx267 } from "react/jsx-runtime";
+var Tabs = forwardRef75((props, ref) => {
   const {
     id,
     activeTab,
@@ -11169,7 +11377,7 @@ var Tabs = forwardRef74((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId21();
+  const generatedId = useId23();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState27(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState27(false);
@@ -11188,7 +11396,7 @@ var Tabs = forwardRef74((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tabs-width"]: width
   };
-  return /* @__PURE__ */ jsx264(
+  return /* @__PURE__ */ jsx267(
     TabsContext.Provider,
     {
       value: {
@@ -11201,7 +11409,7 @@ var Tabs = forwardRef74((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ jsx264(
+      children: /* @__PURE__ */ jsx267(
         "div",
         {
           ref,
@@ -11222,7 +11430,7 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 import {
-  forwardRef as forwardRef75,
+  forwardRef as forwardRef76,
   useCallback as useCallback7,
   useEffect as useEffect26,
   useRef as useRef30
@@ -11234,13 +11442,13 @@ import {
   useContext as useContext13,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { jsx as jsx265 } from "react/jsx-runtime";
+import { jsx as jsx268 } from "react/jsx-runtime";
 var TabContext = createContext10(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx268(
     TabContext.Provider,
     {
       value: {
@@ -11272,8 +11480,8 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx266, jsxs as jsxs67 } from "react/jsx-runtime";
-var Tab = forwardRef75((props, ref) => {
+import { jsx as jsx269, jsxs as jsxs69 } from "react/jsx-runtime";
+var Tab = forwardRef76((props, ref) => {
   const {
     active = false,
     icon: icon2,
@@ -11312,7 +11520,7 @@ var Tab = forwardRef75((props, ref) => {
     handleSelect();
     onKeyDown && onKeyDown(e);
   };
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs69(
     "button",
     {
       ...getBaseHTMLProps(
@@ -11335,8 +11543,8 @@ var Tab = forwardRef75((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon2 && /* @__PURE__ */ jsx266(Icon, { icon: icon2, iconSize: "inherit" }),
-        /* @__PURE__ */ jsx266("span", { children })
+        icon2 && /* @__PURE__ */ jsx269(Icon, { icon: icon2, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx269("span", { children })
       ]
     }
   );
@@ -11347,12 +11555,12 @@ Tab.displayName = "Tab";
 import {
   Children as Children6,
   cloneElement as cloneElement9,
-  forwardRef as forwardRef76,
+  forwardRef as forwardRef77,
   isValidElement as isValidElement10,
   useState as useState28
 } from "react";
-import { jsx as jsx267 } from "react/jsx-runtime";
-var TabList = forwardRef76(
+import { jsx as jsx270 } from "react/jsx-runtime";
+var TabList = forwardRef77(
   ({ children, id, style, onFocus, ...rest }, ref) => {
     const {
       activeTab,
@@ -11395,7 +11603,7 @@ var TabList = forwardRef76(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-tab-widths"]: widths.join(" ")
     };
-    return /* @__PURE__ */ jsx267(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx267(
+    return /* @__PURE__ */ jsx270(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx270(
       "div",
       {
         ...rest,
@@ -11421,11 +11629,11 @@ var TabList = forwardRef76(
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-import { forwardRef as forwardRef77 } from "react";
-import { jsx as jsx268 } from "react/jsx-runtime";
-var TabPanel = forwardRef77(
+import { forwardRef as forwardRef78 } from "react";
+import { jsx as jsx271 } from "react/jsx-runtime";
+var TabPanel = forwardRef78(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx268(
+    return /* @__PURE__ */ jsx271(
       "div",
       {
         ...getBaseHTMLProps(
@@ -11453,11 +11661,11 @@ TabPanel.displayName = "TabPanel";
 import {
   Children as Children7,
   cloneElement as cloneElement10,
-  forwardRef as forwardRef78,
+  forwardRef as forwardRef79,
   isValidElement as isValidElement11
 } from "react";
-import { jsx as jsx269 } from "react/jsx-runtime";
-var TabPanels = forwardRef78(
+import { jsx as jsx272 } from "react/jsx-runtime";
+var TabPanels = forwardRef79(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
@@ -11470,13 +11678,13 @@ var TabPanels = forwardRef78(
         "aria-expanded": active
       });
     });
-    return /* @__PURE__ */ jsx269("div", { ref: combinedRef, ...rest, children: panelChildren });
+    return /* @__PURE__ */ jsx272("div", { ref: combinedRef, ...rest, children: panelChildren });
   }
 );
 TabPanels.displayName = "TabPanels";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef79 } from "react";
+import { forwardRef as forwardRef80 } from "react";
 
 // src/components/Tag/Tag.module.css
 var Tag_default = {
@@ -11495,7 +11703,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx270, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs70 } from "react/jsx-runtime";
 var purposeVariants3 = {
   info: {
     icon: InfoIcon
@@ -11513,7 +11721,7 @@ var purposeVariants3 = {
     icon: void 0
   }
 };
-var Tag = forwardRef79((props, ref) => {
+var Tag = forwardRef80((props, ref) => {
   const {
     text,
     purpose = "default",
@@ -11526,7 +11734,7 @@ var Tag = forwardRef79((props, ref) => {
     ...rest
   } = props;
   const icon2 = purposeVariants3[purpose].icon;
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs70(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -11543,8 +11751,8 @@ var Tag = forwardRef79((props, ref) => {
       ),
       ref,
       children: [
-        withIcon && icon2 && /* @__PURE__ */ jsx270(Icon, { icon: icon2, iconSize: "small" }),
-        /* @__PURE__ */ jsx270(TextOverflowEllipsisInner, { children: children != null ? children : text })
+        withIcon && icon2 && /* @__PURE__ */ jsx273(Icon, { icon: icon2, iconSize: "small" }),
+        /* @__PURE__ */ jsx273(TextOverflowEllipsisInner, { children: children != null ? children : text })
       ]
     }
   );
@@ -11554,69 +11762,40 @@ Tag.displayName = "Tag";
 // src/components/TextInput/TextInput.tsx
 import { ddsTokens as ddsTokens16 } from "@norges-domstoler/dds-design-tokens";
 import {
-  forwardRef as forwardRef80,
-  useId as useId23,
+  forwardRef as forwardRef81,
+  useId as useId24,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef31,
   useState as useState29
 } from "react";
 
-// src/components/TextInput/CharCounter.tsx
-import { useId as useId22 } from "react";
-
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
   "container--medium": "TextInput_container--medium",
   "container--tiny": "TextInput_container--tiny",
   "affix-container": "TextInput_affix-container",
+  "input-width": "TextInput_input-width",
   input: "TextInput_input",
   "with-icon--medium": "TextInput_with-icon--medium",
   "with-icon--small": "TextInput_with-icon--small",
   "with-icon--tiny": "TextInput_with-icon--tiny",
+  "input--extended": "TextInput_input--extended",
   icon: "TextInput_icon",
   "icon--medium": "TextInput_icon--medium",
   "icon--small": "TextInput_icon--small",
   "icon--tiny": "TextInput_icon--tiny",
+  label: "TextInput_label",
   affix: "TextInput_affix",
   prefix: "TextInput_prefix",
   suffix: "TextInput_suffix",
   "prefix--readonly": "TextInput_prefix--readonly",
   "suffix--readonly": "TextInput_suffix--readonly",
-  "message-container": "TextInput_message-container",
-  "char-counter": "TextInput_char-counter"
+  "message-container": "TextInput_message-container"
 };
 
-// src/components/TextInput/CharCounter.tsx
-import { jsxs as jsxs69 } from "react/jsx-runtime";
-function CharCounter(props) {
-  const { current, max, id, className, htmlProps, ...rest } = props;
-  const generatedId = useId22();
-  const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
-  return /* @__PURE__ */ jsxs69(
-    Typography,
-    {
-      ...getBaseHTMLProps(
-        uniqueId,
-        cn(className, TextInput_default["char-counter"]),
-        htmlProps,
-        rest
-      ),
-      as: "div",
-      typographyType: "supportingStyleHelperText01",
-      "aria-label": `${current} av ${max} tegn skrevet`,
-      children: [
-        current,
-        "/",
-        max
-      ]
-    }
-  );
-}
-var CharCounter_default = CharCounter;
-
 // src/components/TextInput/TextInput.tsx
-import { jsx as jsx271, jsxs as jsxs70 } from "react/jsx-runtime";
-var TextInput = forwardRef80(
+import { jsx as jsx274, jsxs as jsxs71 } from "react/jsx-runtime";
+var TextInput = forwardRef81(
   ({
     label,
     disabled,
@@ -11663,7 +11842,7 @@ var TextInput = forwardRef80(
         onChange(event);
       }
     };
-    const generatedId = useId23();
+    const generatedId = useId24();
     const uniqueId = id != null ? id : `${generatedId}-textInput`;
     const hasErrorMessage = !!errorMessage;
     const hasTip = !!tip;
@@ -11671,7 +11850,6 @@ var TextInput = forwardRef80(
     const hasMessage = hasErrorMessage || hasTip || !!maxLength;
     const hasIcon = !!icon2;
     const hasAffix = !!(prefix3 != null ? prefix3 : suffix);
-    const hasCharCounter = !!maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter;
     const characterCounterId = derivativeIdGenerator(
       uniqueId,
       "characterCounter"
@@ -11679,6 +11857,10 @@ var TextInput = forwardRef80(
     const tipId = derivativeIdGenerator(uniqueId, "tip");
     const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
     const widthCn = componentSize === "tiny" ? componentSize : "medium";
+    const styleVariables = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ["--dds-textinput-width"]: width ? width : componentSize === "tiny" ? "210px" : "var(--dds-input-default-width)"
+    };
     const generalInputProps = {
       id: uniqueId,
       hasErrorMessage,
@@ -11704,72 +11886,91 @@ var TextInput = forwardRef80(
     const suffixPaddingInlineEnd = readOnly && suffixLength ? suffixLength + "px" : suffixLength ? ddsTokens16.DdsSpacingX1NumberPx + suffixLength + "px" : void 0;
     let extendedInput = null;
     if (hasIcon) {
-      extendedInput = /* @__PURE__ */ jsxs70("div", { className: Input_default["input-group"], children: [
-        /* @__PURE__ */ jsx271(
-          Icon,
-          {
-            icon: icon2,
-            iconSize: getFormInputIconSize(componentSize),
-            className: cn(TextInput_default.icon, TextInput_default[`icon--${componentSize}`])
-          }
-        ),
-        /* @__PURE__ */ jsx271(
-          StatefulInput,
-          {
-            ref,
-            onChange: onChangeHandler,
-            type,
-            componentSize,
-            className: cn(TextInput_default.input, TextInput_default[`with-icon--${componentSize}`]),
-            ...generalInputProps
-          }
-        )
-      ] });
+      extendedInput = /* @__PURE__ */ jsxs71(
+        "div",
+        {
+          className: cn(TextInput_default["input-width"], Input_default["input-group"]),
+          style: styleVariables,
+          children: [
+            /* @__PURE__ */ jsx274(
+              Icon,
+              {
+                icon: icon2,
+                iconSize: getFormInputIconSize(componentSize),
+                className: cn(TextInput_default.icon, TextInput_default[`icon--${componentSize}`])
+              }
+            ),
+            /* @__PURE__ */ jsx274(
+              StatefulInput,
+              {
+                ref,
+                onChange: onChangeHandler,
+                type,
+                componentSize,
+                className: cn(
+                  TextInput_default.input,
+                  TextInput_default[`with-icon--${componentSize}`],
+                  TextInput_default["input--extended"]
+                ),
+                ...generalInputProps
+              }
+            )
+          ]
+        }
+      );
     } else if (hasAffix) {
-      extendedInput = /* @__PURE__ */ jsxs70("div", { className: TextInput_default["affix-container"], children: [
-        prefix3 && /* @__PURE__ */ jsx271(
-          "span",
-          {
-            ref: prefixRef,
-            "aria-hidden": true,
-            className: cn(
-              TextInput_default.affix,
-              TextInput_default.prefix,
-              readOnly && TextInput_default["prefix--readonly"]
+      extendedInput = /* @__PURE__ */ jsxs71(
+        "div",
+        {
+          className: cn(TextInput_default["affix-container"], TextInput_default["input-width"]),
+          style: styleVariables,
+          children: [
+            prefix3 && /* @__PURE__ */ jsx274(
+              "span",
+              {
+                ref: prefixRef,
+                "aria-hidden": true,
+                className: cn(
+                  TextInput_default.affix,
+                  TextInput_default.prefix,
+                  readOnly && TextInput_default["prefix--readonly"]
+                ),
+                children: prefix3
+              }
             ),
-            children: prefix3
-          }
-        ),
-        /* @__PURE__ */ jsx271(
-          StatefulInput,
-          {
-            ref,
-            onChange: onChangeHandler,
-            type,
-            componentSize,
-            ...generalInputProps,
-            style: {
-              paddingInlineStart: preffixPaddingInlineStart,
-              paddingInlineEnd: suffixPaddingInlineEnd
-            }
-          }
-        ),
-        suffix && /* @__PURE__ */ jsx271(
-          "span",
-          {
-            ref: suffixRef,
-            "aria-hidden": true,
-            className: cn(
-              TextInput_default.affix,
-              TextInput_default.suffix,
-              readOnly && TextInput_default["suffix--readonly"]
+            /* @__PURE__ */ jsx274(
+              StatefulInput,
+              {
+                ref,
+                onChange: onChangeHandler,
+                type,
+                componentSize,
+                ...generalInputProps,
+                style: {
+                  paddingInlineStart: preffixPaddingInlineStart,
+                  paddingInlineEnd: suffixPaddingInlineEnd
+                },
+                className: TextInput_default["input--extended"]
+              }
             ),
-            children: suffix
-          }
-        )
-      ] });
+            suffix && /* @__PURE__ */ jsx274(
+              "span",
+              {
+                ref: suffixRef,
+                "aria-hidden": true,
+                className: cn(
+                  TextInput_default.affix,
+                  TextInput_default.suffix,
+                  readOnly && TextInput_default["suffix--readonly"]
+                ),
+                children: suffix
+              }
+            )
+          ]
+        }
+      );
     }
-    return /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs71(
       "div",
       {
         className: cn(
@@ -11777,28 +11978,36 @@ var TextInput = forwardRef80(
           Input_default.container,
           TextInput_default[`container--${widthCn}`]
         ),
-        style: { ...style, width },
+        style,
         children: [
-          hasLabel && /* @__PURE__ */ jsx271(Label, { htmlFor: uniqueId, showRequiredStyling, children: label }),
-          extendedInput ? extendedInput : /* @__PURE__ */ jsx271(
+          hasLabel && /* @__PURE__ */ jsx274(
+            Label,
+            {
+              htmlFor: uniqueId,
+              showRequiredStyling,
+              className: TextInput_default.label,
+              children: label
+            }
+          ),
+          extendedInput ? extendedInput : /* @__PURE__ */ jsx274(
             StatefulInput,
             {
               ref,
               onChange: onChangeHandler,
               type,
               componentSize,
-              ...generalInputProps
+              ...generalInputProps,
+              style: styleVariables,
+              className: TextInput_default["input-width"]
             }
           ),
-          hasMessage && /* @__PURE__ */ jsxs70("div", { className: TextInput_default["message-container"], children: [
+          hasMessage && /* @__PURE__ */ jsxs71("div", { className: TextInput_default["message-container"], children: [
             renderInputMessage(tip, tipId, errorMessage, errorMessageId),
-            hasCharCounter && /* @__PURE__ */ jsx271(
-              CharCounter_default,
-              {
-                id: characterCounterId,
-                current: text.length,
-                max: maxLength
-              }
+            renderCharCounter(
+              characterCounterId,
+              withCharacterCounter,
+              text.length,
+              maxLength
             )
           ] })
         ]
@@ -11809,7 +12018,7 @@ var TextInput = forwardRef80(
 TextInput.displayName = "TextInput";
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId24, useState as useState30 } from "react";
+import { useId as useId25, useState as useState30 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext11, useContext as useContext14 } from "react";
@@ -11835,7 +12044,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx272, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx275, jsxs as jsxs72 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -11850,7 +12059,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId24();
+  const generatedId = useId25();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState30(value);
   const handleChange = combineHandlers(
@@ -11858,7 +12067,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx272(
+  return /* @__PURE__ */ jsx275(
     ToggleBarContext.Provider,
     {
       value: {
@@ -11867,7 +12076,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ jsxs71(
+      children: /* @__PURE__ */ jsxs72(
         "div",
         {
           ...getBaseHTMLProps(
@@ -11880,8 +12089,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx272(Label, { id: labelId, children: label }),
-            /* @__PURE__ */ jsx272("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx275(Label, { id: labelId, children: label }),
+            /* @__PURE__ */ jsx275("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -11892,10 +12101,10 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import {
-  forwardRef as forwardRef81,
-  useId as useId25
+  forwardRef as forwardRef82,
+  useId as useId26
 } from "react";
-import { jsx as jsx273, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs73 } from "react/jsx-runtime";
 var typographyTypes5 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -11912,7 +12121,7 @@ var calculateChecked = (value, group, checked) => {
   }
   return !!value;
 };
-var ToggleRadio = forwardRef81(
+var ToggleRadio = forwardRef82(
   (props, ref) => {
     const {
       value,
@@ -11928,7 +12137,7 @@ var ToggleRadio = forwardRef81(
       id,
       ...rest
     } = props;
-    const generatedId = useId25();
+    const generatedId = useId26();
     const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
     const group = useToggleBarContext();
     const handleChange = (event) => {
@@ -11936,8 +12145,8 @@ var ToggleRadio = forwardRef81(
       (group == null ? void 0 : group.onChange) && group.onChange(event);
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
-    return /* @__PURE__ */ jsxs72("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ jsx273(
+    return /* @__PURE__ */ jsxs73("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
+      /* @__PURE__ */ jsx276(
         "input",
         {
           ...getBaseHTMLProps(
@@ -11960,7 +12169,7 @@ var ToggleRadio = forwardRef81(
           "aria-labelledby": ariaLabelledBy
         }
       ),
-      /* @__PURE__ */ jsxs72(
+      /* @__PURE__ */ jsxs73(
         Typography,
         {
           as: "span",
@@ -11971,8 +12180,8 @@ var ToggleRadio = forwardRef81(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx273(Icon, { icon: icon2, iconSize: "inherit" }),
-            label && /* @__PURE__ */ jsx273("span", { children: label })
+            icon2 && /* @__PURE__ */ jsx276(Icon, { icon: icon2, iconSize: "inherit" }),
+            label && /* @__PURE__ */ jsx276("span", { children: label })
           ]
         }
       )
@@ -11982,7 +12191,7 @@ var ToggleRadio = forwardRef81(
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef82, useId as useId26 } from "react";
+import { forwardRef as forwardRef83, useId as useId27 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -11995,13 +12204,13 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx274, jsxs as jsxs73 } from "react/jsx-runtime";
-var ToggleButton = forwardRef82(
+import { jsx as jsx277, jsxs as jsxs74 } from "react/jsx-runtime";
+var ToggleButton = forwardRef83(
   ({ id, label, icon: icon2, className, htmlProps, ...rest }, ref) => {
-    const generatedId = useId26();
+    const generatedId = useId27();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
-    return /* @__PURE__ */ jsxs73("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ jsx274(
+    return /* @__PURE__ */ jsxs74("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
+      /* @__PURE__ */ jsx277(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12018,7 +12227,7 @@ var ToggleButton = forwardRef82(
           type: "checkbox"
         }
       ),
-      /* @__PURE__ */ jsxs73(
+      /* @__PURE__ */ jsxs74(
         "span",
         {
           className: cn(
@@ -12027,7 +12236,7 @@ var ToggleButton = forwardRef82(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx274(Icon, { icon: icon2, iconSize: "inherit" }),
+            icon2 && /* @__PURE__ */ jsx277(Icon, { icon: icon2, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12039,8 +12248,8 @@ var ToggleButton = forwardRef82(
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId27 } from "react";
-import { jsx as jsx275, jsxs as jsxs74 } from "react/jsx-runtime";
+import { useId as useId28 } from "react";
+import { jsx as jsx278, jsxs as jsxs75 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12052,9 +12261,9 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId27();
+  const generatedId = useId28();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsxs75(
     "div",
     {
       ...getBaseHTMLProps(
@@ -12066,7 +12275,7 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ jsx275(
+        !!label && /* @__PURE__ */ jsx278(
           Typography,
           {
             as: "span",
@@ -12075,7 +12284,7 @@ var ToggleButtonGroup = (props) => {
             children: label
           }
         ),
-        /* @__PURE__ */ jsx275("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        /* @__PURE__ */ jsx278("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12116,6 +12325,7 @@ export {
   CardAccordionBody,
   CardAccordionHeader,
   CaringIcon,
+  CharCounter,
   ChatIcon,
   CheckCircledIcon,
   CheckIcon,
@@ -12244,6 +12454,8 @@ export {
   ModalBody,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  NativeSelect,
+  NativeSelectPlaceholder,
   NotarialIcon,
   NotificationsIcon,
   NotificationsOffIcon,
@@ -12339,6 +12551,7 @@ export {
   VisibilityOnIcon,
   VisuallyHidden,
   WarningIcon,
+  WebexIcon,
   XIcon,
   ZoomInIcon,
   ZoomOutIcon,
@@ -12383,6 +12596,7 @@ export {
   purposeVariants,
   removeButtonStyling,
   removeListStyling,
+  renderCharCounter,
   renderInputMessage,
   scrollbarStyling,
   selection,