@norges-domstoler/dds-components 0.0.0-dev-20240614080910 → 0.0.0-dev-20240614081021

package/dist/index.mjs

@@ -421,7 +421,8 @@ var Input_default = {
   "input--small": "Input_input--small",
   "input--tiny": "Input_input--tiny",
   "input--with-affix": "Input_input--with-affix",
-  label: "Input_label"
+  label: "Input_label",
+  "char-counter": "Input_char-counter"
 };
 
 // src/components/Typography/Caption/Caption.tsx
@@ -2746,6 +2747,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") {
@@ -2773,11 +2806,11 @@ var Paper_default = {
 };
 
 // src/components/helpers/Paper/Paper.tsx
-import { jsx as jsx174 } 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__ */ jsx174(
+  return /* @__PURE__ */ jsx175(
     "div",
     {
       ref,
@@ -4198,10 +4231,10 @@ var BackLink_default = {
 };
 
 // src/components/BackLink/BackLink.tsx
-import { jsx as jsx175, 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__ */ jsx175("nav", { ref, "aria-label": "g\xE5 tilbake", children: /* @__PURE__ */ jsxs20(Link, { href: props.href, className: BackLink_default.link, children: [
-    /* @__PURE__ */ jsx175(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
   ] }) });
 });
@@ -4211,7 +4244,7 @@ BackLink.displayName = "BackLink";
 import {
   forwardRef as forwardRef13
 } from "react";
-import { jsx as jsx176 } from "react/jsx-runtime";
+import { jsx as jsx177 } from "react/jsx-runtime";
 var isAnchorTypographyProps = (props) => {
   return props.href != void 0;
 };
@@ -4219,9 +4252,9 @@ var Breadcrumb = forwardRef13(
   (props, ref) => {
     const { children, ...rest } = props;
     if (isAnchorTypographyProps(props)) {
-      return /* @__PURE__ */ jsx176(Typography, { htmlProps: rest, ref, typographyType: "a", children });
+      return /* @__PURE__ */ jsx177(Typography, { htmlProps: rest, ref, typographyType: "a", children });
     }
-    return /* @__PURE__ */ jsx176(Typography, { htmlProps: rest, ref, as: "span", children });
+    return /* @__PURE__ */ jsx177(Typography, { htmlProps: rest, ref, as: "span", children });
   }
 );
 Breadcrumb.displayName = "Breadcrumb";
@@ -4313,7 +4346,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 = {
@@ -4324,7 +4357,7 @@ var Spinner_default = {
 };
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx177, 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,
@@ -4338,9 +4371,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",
@@ -4354,8 +4387,8 @@ function Spinner(props) {
         animationDelay: outerAnimationDelay + "ms"
       },
       children: [
-        /* @__PURE__ */ jsx177("title", { id: uniqueId, children: tooltip }),
-        /* @__PURE__ */ jsx177(
+        /* @__PURE__ */ jsx178("title", { id: uniqueId, children: tooltip }),
+        /* @__PURE__ */ jsx178(
           "circle",
           {
             className: cn(Spinner_default.circle),
@@ -4377,7 +4410,7 @@ function Spinner(props) {
 Spinner.displayName = "Spinner";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx178, 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",
@@ -4426,7 +4459,7 @@ var Button = forwardRef14(
       typographyStyles_default[getTypographyCn(typographyTypes[size2])],
       focusable
     );
-    const iconElement = hasIcon && /* @__PURE__ */ jsx178(
+    const iconElement = hasIcon && /* @__PURE__ */ jsx179(
       Icon,
       {
         icon: icon2,
@@ -4434,18 +4467,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__ */ jsx178("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__ */ jsx178(
+      loading && /* @__PURE__ */ jsx179(
         "span",
         {
           className: cn(!noContent && Button_default["spinner-wrapper--absolute"]),
-          children: /* @__PURE__ */ jsx178(
+          children: /* @__PURE__ */ jsx179(
             Spinner,
             {
               size: button2[size2].spinner.size,
@@ -4458,7 +4491,7 @@ var Button = forwardRef14(
       )
     ] });
     if (!href)
-      return /* @__PURE__ */ jsx178(
+      return /* @__PURE__ */ jsx179(
         "button",
         {
           ref,
@@ -4471,7 +4504,7 @@ var Button = forwardRef14(
         }
       );
     else if (href)
-      return /* @__PURE__ */ jsx178(
+      return /* @__PURE__ */ jsx179(
         "a",
         {
           ref,
@@ -4500,7 +4533,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 = {
@@ -4518,7 +4551,7 @@ import {
   useEffect as useEffect9,
   useRef as useRef5
 } from "react";
-import { jsx as jsx179, 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) => {
@@ -4543,7 +4576,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
     role: "menuitem",
     tabIndex: focus ? 0 : -1
   };
-  const iconElement = icon2 && /* @__PURE__ */ jsx179(Icon, { iconSize: "inherit", icon: icon2 });
+  const iconElement = icon2 && /* @__PURE__ */ jsx180(Icon, { iconSize: "inherit", icon: icon2 });
   const wrapperCn = [
     className,
     OverflowMenu_default.list__item,
@@ -4556,7 +4589,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 },
@@ -4568,7 +4601,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
     );
   }
   if (!href) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "button",
       {
         ...getBaseHTMLProps(id, cn(...interactiveWrapperCn), htmlProps, rest),
@@ -4581,7 +4614,7 @@ var OverflowMenuItem = forwardRef15((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "a",
     {
       ...getBaseHTMLProps(id, cn(...interactiveWrapperCn), htmlProps, rest),
@@ -4608,7 +4641,7 @@ var Divider_default = {
 };
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx180 } 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";
@@ -4621,12 +4654,12 @@ var Divider = forwardRef16((props, ref) => {
     ),
     color
   };
-  return /* @__PURE__ */ jsx180("hr", { ref, ...lineProps });
+  return /* @__PURE__ */ jsx181("hr", { ref, ...lineProps });
 });
 Divider.displayName = "Divider";
 
 // src/components/OverflowMenu/OverflowMenu.tsx
-import { Fragment as Fragment2, jsx as jsx181, 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;
@@ -4687,7 +4720,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__ */ jsx181("li", { children: /* @__PURE__ */ jsx181(
+    const interactiveItemsList = hasInteractiveItems ? interactiveItems.map((item, index) => /* @__PURE__ */ jsx182("li", { children: /* @__PURE__ */ jsx182(
       OverflowMenuItem,
       {
         index,
@@ -4708,14 +4741,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__ */ jsx181("ul", { className: ulCn, children: interactiveItemsList == null ? void 0 : interactiveItemsList[0] }),
-          hasNavItems && /* @__PURE__ */ jsx181("nav", { children: /* @__PURE__ */ jsx181("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__ */ jsx181(Divider, { color: "subtle", className: OverflowMenu_default.divider }),
-          hasContextItems && /* @__PURE__ */ jsx181("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
           ) })
@@ -4723,8 +4756,8 @@ var OverflowMenu = forwardRef17(
       }
     };
     const { style = {}, ...restHTMLProps } = htmlProps;
-    const generatedId = useId2();
-    return /* @__PURE__ */ jsxs24(
+    const generatedId = useId3();
+    return /* @__PURE__ */ jsxs25(
       Paper,
       {
         ref: combinedRef,
@@ -4745,7 +4778,7 @@ var OverflowMenu = forwardRef17(
         border: "default",
         style: { ...style, ...floatingStyles.floating },
         children: [
-          hasStaticUser && /* @__PURE__ */ jsx181(OverflowMenuItem, { title: username, icon: PersonIcon }),
+          hasStaticUser && /* @__PURE__ */ jsx182(OverflowMenuItem, { title: username, icon: PersonIcon }),
           interactiveContent()
         ]
       }
@@ -4759,11 +4792,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 jsx182 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx183 } from "react/jsx-runtime";
 var OverflowMenuGroup = ({
   children,
   onClose,
@@ -4775,7 +4808,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();
@@ -4802,16 +4835,16 @@ var OverflowMenuGroup = ({
       anchorRef: buttonRef
     }));
   });
-  return /* @__PURE__ */ jsx182(Fragment3, { children: Children8 });
+  return /* @__PURE__ */ jsx183(Fragment3, { children: Children8 });
 };
 OverflowMenuGroup.displayName = "OverflowMenuGroup";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Fragment as Fragment4, jsx as jsx183, 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__ */ jsx183(
+    const chevronIcon = /* @__PURE__ */ jsx184(
       Icon,
       {
         className: cn(Breadcrumbs_default.icon),
@@ -4825,7 +4858,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}`);
@@ -4837,12 +4870,12 @@ var Breadcrumbs = forwardRef18(
           href: item.props.href
         };
     }).filter((item) => item) : [];
-    const breadcrumbChildrenSmallScreen = /* @__PURE__ */ jsxs25(Fragment4, { children: [
-      /* @__PURE__ */ jsx183("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__ */ jsx183(
+        /* @__PURE__ */ jsxs26(OverflowMenuGroup, { children: [
+          /* @__PURE__ */ jsx184(
             Button,
             {
               size: "tiny",
@@ -4851,21 +4884,21 @@ var Breadcrumbs = forwardRef18(
               "aria-label": `Vis br\xF8dsmulesti br\xF8dsmule 2 ${breadcrumbChildrenTruncated.length > 1 && `til ${breadcrumbChildren.length - 1}`}`
             }
           ),
-          /* @__PURE__ */ jsx183(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__ */ jsx183(
+    return /* @__PURE__ */ jsx184(
       "nav",
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
         ref,
         "aria-label": "br\xF8dsmulesti",
-        children: /* @__PURE__ */ jsx183("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 })
       }
     );
   }
@@ -4888,7 +4921,7 @@ var ButtonGroup_default = {
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
 var ButtonGroup = forwardRef19(
   (props, ref) => {
     const {
@@ -4907,7 +4940,7 @@ var ButtonGroup = forwardRef19(
         size: buttonSize
       });
     });
-    return /* @__PURE__ */ jsx184(
+    return /* @__PURE__ */ jsx185(
       "div",
       {
         ref,
@@ -4935,7 +4968,7 @@ var Card_default = {
 };
 
 // src/components/Card/Card.tsx
-import { jsx as jsx185 } from "react/jsx-runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
 var Card = (props) => {
   const {
     appearance = "filled",
@@ -4955,7 +4988,7 @@ var Card = (props) => {
   );
   if (cardType === "navigation") {
     const { href, target } = props;
-    return /* @__PURE__ */ jsx185(
+    return /* @__PURE__ */ jsx186(
       "a",
       {
         ...getBaseHTMLProps(
@@ -4970,22 +5003,22 @@ var Card = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx185("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 jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var CardAccordionContext = createContext({});
 var CardAccordionContextProvider = ({
   children,
   ...values
 }) => {
-  return /* @__PURE__ */ jsx186(CardAccordionContext.Provider, { value: values, children });
+  return /* @__PURE__ */ jsx187(CardAccordionContext.Provider, { value: values, children });
 };
 var useCardAccordionContext = () => {
   const context = useContext(CardAccordionContext);
@@ -4998,7 +5031,7 @@ var useCardAccordionContext = () => {
 };
 
 // src/components/Card/CardAccordion/CardAccordion.tsx
-import { jsx as jsx187 } from "react/jsx-runtime";
+import { jsx as jsx188 } from "react/jsx-runtime";
 var CardAccordion = forwardRef20(
   (props, ref) => {
     const {
@@ -5011,7 +5044,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);
@@ -5025,7 +5058,7 @@ var CardAccordion = forwardRef20(
         return newExpanded;
       });
     }, [onChange]);
-    return /* @__PURE__ */ jsx187("div", { ...getBaseHTMLProps(id, className, htmlProps, rest), ref, children: /* @__PURE__ */ jsx187(
+    return /* @__PURE__ */ jsx188("div", { ...getBaseHTMLProps(id, className, htmlProps, rest), ref, children: /* @__PURE__ */ jsx188(
       CardAccordionContextProvider,
       {
         headerId: `${accordionId}-header`,
@@ -5056,7 +5089,7 @@ var CardAccordion_default = {
 };
 
 // src/components/Card/CardAccordion/CardAccordionHeader.tsx
-import { jsx as jsx188, 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,
@@ -5077,7 +5110,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__ */ jsx188(
+  return /* @__PURE__ */ jsx189(
     "button",
     {
       ...getBaseHTMLProps(
@@ -5097,7 +5130,7 @@ var CardAccordionHeader = forwardRef21((props, ref) => {
       "aria-controls": bodyId,
       "aria-expanded": isExpanded,
       type: "button",
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs27(
         "div",
         {
           style: containerStyleVariables,
@@ -5107,8 +5140,8 @@ var CardAccordionHeader = forwardRef21((props, ref) => {
             bold && typographyStyles_default.bold
           ),
           children: [
-            /* @__PURE__ */ jsx188("div", { className: CardAccordion_default.header__content, children }),
-            /* @__PURE__ */ jsx188("span", { className: CardAccordion_default.header__chevron, children: /* @__PURE__ */ jsx188(
+            /* @__PURE__ */ jsx189("div", { className: CardAccordion_default.header__content, children }),
+            /* @__PURE__ */ jsx189("span", { className: CardAccordion_default.header__chevron, children: /* @__PURE__ */ jsx189(
               AnimatedChevronUpDown,
               {
                 width: ddsTokens13.DdsIconSizeMedium,
@@ -5149,7 +5182,7 @@ function useElementHeight(element) {
 }
 
 // src/components/Card/CardAccordion/CardAccordionBody.tsx
-import { jsx as jsx189 } 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;
@@ -5177,7 +5210,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__ */ jsx189(
+  return /* @__PURE__ */ jsx190(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5197,7 +5230,7 @@ var CardAccordionBody = forwardRef22((props, ref) => {
       "aria-labelledby": headerId,
       "aria-hidden": !isExpanded,
       style: { ...htmlProps == null ? void 0 : htmlProps.style, ...styleVariables },
-      children: /* @__PURE__ */ jsx189(
+      children: /* @__PURE__ */ jsx190(
         "div",
         {
           ref: bodyRef,
@@ -5221,7 +5254,7 @@ var Chip_default = {
 };
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx190, 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;
@@ -5230,7 +5263,7 @@ var Chip = forwardRef23((props, ref) => {
     setIsOpen(false);
     onClose && onClose();
   };
-  return isOpen ? /* @__PURE__ */ jsxs27(
+  return isOpen ? /* @__PURE__ */ jsxs28(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5241,14 +5274,14 @@ var Chip = forwardRef23((props, ref) => {
       ),
       ref,
       children: [
-        /* @__PURE__ */ jsx190(
+        /* @__PURE__ */ jsx191(
           TextOverflowEllipsisInner,
           {
             className: cn(typographyStyles_default["body-sans-01"]),
             children: text
           }
         ),
-        /* @__PURE__ */ jsx190(
+        /* @__PURE__ */ jsx191(
           Button,
           {
             size: "tiny",
@@ -5266,11 +5299,11 @@ Chip.displayName = "Chip";
 
 // src/components/Chip/ChipGroup.tsx
 import { Children as Children2, forwardRef as forwardRef24 } from "react";
-import { jsx as jsx191 } 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__ */ jsx191(
+    return /* @__PURE__ */ jsx192(
       "ul",
       {
         ...rest,
@@ -5280,7 +5313,7 @@ var ChipGroup = forwardRef24(
           utilStyles_default["remove-list-styling"]
         ),
         ref,
-        children: childrenArray.map((item, index) => /* @__PURE__ */ jsx191("li", { children: item }, `chip-${index}`))
+        children: childrenArray.map((item, index) => /* @__PURE__ */ jsx192("li", { children: item }, `chip-${index}`))
       }
     );
   }
@@ -5348,7 +5381,7 @@ import {
   useEffect as useEffect14,
   useRef as useRef8
 } from "react";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext2({
   anchorRef: null,
   isOpen: false,
@@ -5361,13 +5394,13 @@ var CalendarPopover = ({
 }) => {
   const anchorRef = useRef8(null);
   useOnKeyDown("Escape", onClose);
-  return /* @__PURE__ */ jsx192(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__ */ jsx192("div", { ref: anchorRef != null ? anchorRef : void 0, children });
+  return /* @__PURE__ */ jsx193("div", { ref: anchorRef != null ? anchorRef : void 0, children });
 };
 var CalendarPopoverContent = ({
   children
@@ -5384,7 +5417,7 @@ var CalendarPopoverContent = ({
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
   }, []);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx193(
     "div",
     {
       ref: combinedRef,
@@ -5400,7 +5433,7 @@ var locale = "no-NO";
 var timezone = "Europe/Oslo";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
-import { jsx as jsx193 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 function CalendarCell({ date, state }) {
   const ref = useRef9(null);
   const {
@@ -5413,7 +5446,7 @@ function CalendarCell({ date, state }) {
     isUnavailable
   } = useCalendarCell({ date }, state, ref);
   if (isDisabled) {
-    return /* @__PURE__ */ jsx193("td", { ...cellProps });
+    return /* @__PURE__ */ jsx194("td", { ...cellProps });
   }
   const { onClose } = useContext3(CalendarPopoverContext);
   const variant = isSelected ? "selected" : isUnavailable || isDisabled ? "unavailable" : "default";
@@ -5422,7 +5455,7 @@ function CalendarCell({ date, state }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx193("td", { ...cellProps, children: /* @__PURE__ */ jsx193(
+  return /* @__PURE__ */ jsx194("td", { ...cellProps, children: /* @__PURE__ */ jsx194(
     "button",
     {
       ...buttonProps,
@@ -5483,7 +5516,7 @@ function isLeapYear(date) {
 }
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
-import { jsx as jsx194, 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 {
@@ -5496,7 +5529,7 @@ function CalendarGrid({ state, ...props }) {
     typographyStyles_default["supporting-style-tiny-02"],
     typographyStyles_default["text-color--subtle"]
   ];
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "table",
     {
       ...gridProps,
@@ -5508,16 +5541,16 @@ function CalendarGrid({ state, ...props }) {
       },
       cellPadding: "0",
       children: [
-        /* @__PURE__ */ jsx194("thead", { ...headerProps, children: /* @__PURE__ */ jsxs28("tr", { children: [
-          /* @__PURE__ */ jsx194("th", { className: cn(...typographyCn), children: "#" }),
-          weekDays.map((day, index) => /* @__PURE__ */ jsx194("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__ */ jsx194("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__ */ jsx194(
+          return /* @__PURE__ */ jsxs29("tr", { children: [
+            /* @__PURE__ */ jsx195(
               "td",
               {
                 className: cn(DateInput_default["calendar__week-number"], ...typographyCn),
@@ -5525,7 +5558,7 @@ function CalendarGrid({ state, ...props }) {
               }
             ),
             datesInWeek.map(
-              (date, i2) => date ? /* @__PURE__ */ jsx194(CalendarCell, { state, date }, i2) : /* @__PURE__ */ jsx194("td", {}, i2)
+              (date, i2) => date ? /* @__PURE__ */ jsx195(CalendarCell, { state, date }, i2) : /* @__PURE__ */ jsx195("td", {}, i2)
             )
           ] }, weekIndex);
         }) })
@@ -5536,7 +5569,7 @@ function CalendarGrid({ state, ...props }) {
 CalendarGrid.displayName = "CalendarGrid";
 
 // src/components/date-inputs/DatePicker/Calendar/Calendar.tsx
-import { jsx as jsx195, 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":
@@ -5564,9 +5597,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__ */ jsx195(
+  return /* @__PURE__ */ jsxs30("div", { ...calendarProps, className: DateInput_default.calendar, children: [
+    /* @__PURE__ */ jsxs30("div", { className: DateInput_default.calendar__header, children: [
+      /* @__PURE__ */ jsx196(
         Button,
         {
           type: "button",
@@ -5579,7 +5612,7 @@ function Calendar(props) {
           className: DateInput_default["calendar__month-button"]
         }
       ),
-      /* @__PURE__ */ jsx195(
+      /* @__PURE__ */ jsx196(
         Heading,
         {
           level: 2,
@@ -5588,7 +5621,7 @@ function Calendar(props) {
           children: title
         }
       ),
-      /* @__PURE__ */ jsx195(
+      /* @__PURE__ */ jsx196(
         Button,
         {
           type: "button",
@@ -5601,7 +5634,7 @@ function Calendar(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx195(CalendarGrid, { state })
+    /* @__PURE__ */ jsx196(CalendarGrid, { state })
   ] });
 }
 Calendar.displayName = "Calendar";
@@ -5629,7 +5662,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 jsx196 } from "react/jsx-runtime";
+import { jsx as jsx197 } from "react/jsx-runtime";
 function CalendarButton({
   componentSize,
   ...props
@@ -5637,7 +5670,7 @@ function CalendarButton({
   const ref = useRef10(null);
   const { buttonProps } = useButton(props, ref);
   const size2 = componentSize === "tiny" ? "small" : "medium";
-  return /* @__PURE__ */ jsx196(
+  return /* @__PURE__ */ jsx197(
     "button",
     {
       ...buttonProps,
@@ -5657,7 +5690,7 @@ function CalendarButton({
         !props.isDisabled && focusable,
         props.isDisabled && "disabled"
       ),
-      children: /* @__PURE__ */ jsx196(Icon, { icon: CalendarIcon, iconSize: size2 })
+      children: /* @__PURE__ */ jsx197(Icon, { icon: CalendarIcon, iconSize: size2 })
     }
   );
 }
@@ -5665,7 +5698,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 jsx197, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx198, jsxs as jsxs31 } from "react/jsx-runtime";
 var typographyTypes2 = {
   medium: "bodySans02",
   small: "bodySans01",
@@ -5684,7 +5717,7 @@ function DateSegment({
   var _a;
   const ref = useRef11(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...segmentProps,
@@ -5699,7 +5732,7 @@ function DateSegment({
         minWidth: segment.maxValue != null ? String(segment.maxValue).length + "ch" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx197(
+        /* @__PURE__ */ jsx198(
           "span",
           {
             "aria-hidden": "true",
@@ -5736,12 +5769,12 @@ var InputMessage_default = {
 };
 
 // src/components/InputMessage/InputMessage.tsx
-import { Fragment as Fragment5, jsx as jsx198, 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(
@@ -5752,8 +5785,8 @@ var InputMessage = forwardRef25(
         ),
         ref,
         children: [
-          isError && /* @__PURE__ */ jsx198(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
-          /* @__PURE__ */ jsx198(
+          isError && /* @__PURE__ */ jsx199(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
+          /* @__PURE__ */ jsx199(
             Typography,
             {
               typographyType: isError ? "bodySans01" : "supportingStyleHelperText01",
@@ -5767,8 +5800,8 @@ var InputMessage = forwardRef25(
   }
 );
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs31(Fragment5, { children: [
-  errorMessage && errorMessageId && /* @__PURE__ */ jsx198(
+var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs32(Fragment5, { children: [
+  errorMessage && errorMessageId && /* @__PURE__ */ jsx199(
     InputMessage,
     {
       message: errorMessage,
@@ -5776,11 +5809,11 @@ var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PUR
       id: errorMessageId
     }
   ),
-  tip && tipId && !errorMessage && /* @__PURE__ */ jsx198(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 jsx199, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx200, jsxs as jsxs33 } from "react/jsx-runtime";
 function _DateInput({
   errorMessage,
   tip,
@@ -5810,14 +5843,14 @@ function _DateInput({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-date-input-width"]: width ? width : componentSize === "small" ? "148px" : componentSize === "tiny" ? "125px" : "160px"
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ...groupProps,
       className: cn(className, Input_default.container),
       ref: forwardedRef,
       children: [
-        hasLabel && /* @__PURE__ */ jsx199(
+        hasLabel && /* @__PURE__ */ jsx200(
           Label,
           {
             ...labelProps,
@@ -5826,7 +5859,7 @@ function _DateInput({
             children: props.label
           }
         ),
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             ...fieldProps,
@@ -5849,11 +5882,11 @@ function _DateInput({
             ),
             children: [
               button3,
-              /* @__PURE__ */ jsx199("div", { className: DateInput_default["date-segment-container"], children })
+              /* @__PURE__ */ jsx200("div", { className: DateInput_default["date-segment-container"], children })
             ]
           }
         ),
-        hasMessage && /* @__PURE__ */ jsx199(
+        hasMessage && /* @__PURE__ */ jsx200(
           InputMessage,
           {
             messageType: hasErrorMessage ? "error" : "tip",
@@ -5868,7 +5901,7 @@ var DateInput = forwardRef26(_DateInput);
 DateInput.displayName = "DateInput";
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
-import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 function _DateField({
   componentSize = "medium",
   buttonProps,
@@ -5884,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__ */ jsx200(
+  return /* @__PURE__ */ jsx201(
     DateInput,
     {
       ...props,
@@ -5896,7 +5929,7 @@ function _DateField({
       ref: forwardedRef,
       internalRef: ref,
       readOnly: props.isReadOnly,
-      prefix: !props.isReadOnly && /* @__PURE__ */ jsx200(
+      prefix: !props.isReadOnly && /* @__PURE__ */ jsx201(
         CalendarButton,
         {
           componentSize,
@@ -5906,7 +5939,7 @@ function _DateField({
       ),
       labelProps,
       fieldProps,
-      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx200(
+      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx201(
         DateSegment,
         {
           componentSize,
@@ -5943,7 +5976,7 @@ function createDOMRef(ref) {
 }
 
 // src/components/date-inputs/DatePicker/DatePicker.tsx
-import { jsx as jsx201, 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;
 };
@@ -5959,8 +5992,8 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
     state,
     ref
   );
-  return /* @__PURE__ */ jsx201(I18nProvider, { locale, children: /* @__PURE__ */ jsxs33(CalendarPopover, { isOpen: state.isOpen, onClose: state.close, children: [
-    /* @__PURE__ */ jsx201(CalendarPopoverAnchor, { children: /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(I18nProvider, { locale, children: /* @__PURE__ */ jsxs34(CalendarPopover, { isOpen: state.isOpen, onClose: state.close, children: [
+    /* @__PURE__ */ jsx202(CalendarPopoverAnchor, { children: /* @__PURE__ */ jsx202(
       DateField,
       {
         ...fieldProps,
@@ -5976,7 +6009,7 @@ function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props
         width
       }
     ) }),
-    /* @__PURE__ */ jsx201(CalendarPopoverContent, { children: /* @__PURE__ */ jsx201(Calendar, { ...calendarProps }) })
+    /* @__PURE__ */ jsx202(CalendarPopoverContent, { children: /* @__PURE__ */ jsx202(Calendar, { ...calendarProps }) })
   ] }) });
 }
 var DatePicker = forwardRef28(_DatePicker);
@@ -5986,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 jsx202 } 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({
@@ -6000,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__ */ jsx202(
+  return /* @__PURE__ */ jsx203(
     DateInput,
     {
       ...props,
@@ -6013,17 +6046,17 @@ function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef
       readOnly: props.isReadOnly,
       labelProps,
       fieldProps,
-      prefix: !props.isReadOnly && /* @__PURE__ */ jsx202(
+      prefix: !props.isReadOnly && /* @__PURE__ */ jsx203(
         "span",
         {
           className: cn(
             DateInput_default["icon-wrapper"],
             DateInput_default[`icon-wrapper--${iconSize}`]
           ),
-          children: /* @__PURE__ */ jsx202(Icon, { icon: TimeIcon, iconSize })
+          children: /* @__PURE__ */ jsx203(Icon, { icon: TimeIcon, iconSize })
         }
       ),
-      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx202(
+      children: state.segments.map((segment, i2) => /* @__PURE__ */ jsx203(
         DateSegment,
         {
           componentSize,
@@ -6086,7 +6119,7 @@ var DescriptionList_default = {
 };
 
 // src/components/DescriptionList/DescriptionList.tsx
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var DescriptionList = forwardRef30((props, ref) => {
   const {
     appearance = "default",
@@ -6097,7 +6130,7 @@ var DescriptionList = forwardRef30((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx204(
     "dl",
     {
       ref,
@@ -6120,24 +6153,24 @@ DescriptionList.displayName = "DescriptionList";
 
 // src/components/DescriptionList/DescriptionListTerm.tsx
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
 var DescriptionListTerm = forwardRef31(({ ...rest }, ref) => {
-  return /* @__PURE__ */ jsx204("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 jsx205, 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__ */ jsx205(Icon, { icon: icon2 }),
+        icon2 && /* @__PURE__ */ jsx206(Icon, { icon: icon2 }),
         " ",
         children
       ]
@@ -6148,7 +6181,7 @@ DescriptionListDesc.displayName = "DescriptionListDesc";
 
 // src/components/DescriptionList/DescriptionListGroup.tsx
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx206 } from "react/jsx-runtime";
+import { jsx as jsx207 } from "react/jsx-runtime";
 var DescriptionListGroup = forwardRef33((props, ref) => {
   const {
     children,
@@ -6160,7 +6193,7 @@ var DescriptionListGroup = forwardRef33((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx206(
+  return /* @__PURE__ */ jsx207(
     "div",
     {
       ref,
@@ -6173,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
@@ -6193,7 +6226,7 @@ var Drawer_default = {
 };
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx207, 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,
@@ -6210,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;
@@ -6255,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(
@@ -6265,12 +6298,12 @@ var Drawer = forwardRef34((props, ref) => {
             utilStyles_default["scrollable-y"]
           ),
           children: [
-            hasHeader && /* @__PURE__ */ jsx207("div", { id: headerId, children: typeof header === "string" ? /* @__PURE__ */ jsx207(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__ */ jsx207(
+      /* @__PURE__ */ jsx208(
         Button,
         {
           className: cn(Drawer_default["button--close"]),
@@ -6293,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);
@@ -6332,7 +6365,7 @@ var DrawerGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsxs36(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
     " ",
     Children8,
     " "
@@ -6348,7 +6381,7 @@ var EmptyContent_default = {
 };
 
 // src/components/EmptyContent/EmptyContent.tsx
-import { jsx as jsx208, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs38 } from "react/jsx-runtime";
 function EmptyContent({
   title,
   message,
@@ -6356,15 +6389,15 @@ function EmptyContent({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx208("div", { ...rest, className: cn(className, EmptyContent_default.containter), children: /* @__PURE__ */ jsxs37("div", { className: EmptyContent_default.text, children: [
-    title && /* @__PURE__ */ jsx208(Heading, { level: titleHeadingLevel, typographyType: "headingSans02", children: title }),
-    /* @__PURE__ */ jsx208(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 = {
@@ -6413,7 +6446,7 @@ function useControllableState(props) {
 }
 
 // src/components/FavStar/FavStar.tsx
-import { jsx as jsx209, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx210, jsxs as jsxs39 } from "react/jsx-runtime";
 var FavStar = forwardRef35(
   ({
     id,
@@ -6432,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(
@@ -6450,7 +6483,7 @@ var FavStar = forwardRef35(
         style,
         htmlFor: id != null ? id : generatedId,
         children: [
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx210(
             "input",
             {
               ...props,
@@ -6463,8 +6496,8 @@ var FavStar = forwardRef35(
               className: utilStyles_default["hide-input"]
             }
           ),
-          /* @__PURE__ */ jsx209(Icon, { iconSize: size2, icon: StarIcon, className: FavStar_default.icon }),
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx210(Icon, { iconSize: size2, icon: StarIcon, className: FavStar_default.icon }),
+          /* @__PURE__ */ jsx210(
             Icon,
             {
               iconSize: size2,
@@ -6530,7 +6563,7 @@ var Stack_default = {
 };
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx210 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var HStack = forwardRef36(
   ({
     id,
@@ -6548,7 +6581,7 @@ var HStack = forwardRef36(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-stack-justify-content"]: justify
     };
-    return /* @__PURE__ */ jsx210(
+    return /* @__PURE__ */ jsx211(
       "div",
       {
         ref,
@@ -6587,7 +6620,7 @@ var VStack = forwardRef36(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-stack-justify-content"]: justify
     };
-    return /* @__PURE__ */ jsx210(
+    return /* @__PURE__ */ jsx211(
       "div",
       {
         ref,
@@ -6614,15 +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 = {
-  textarea: "TextArea_textarea"
+  textarea: "TextArea_textarea",
+  "message-container": "TextArea_message-container"
 };
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx211, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx212, jsxs as jsxs40 } from "react/jsx-runtime";
 var TextArea = forwardRef37(
   (props, ref) => {
     const {
@@ -6637,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);
@@ -6664,36 +6700,22 @@ 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),
         style: { ...style },
         children: [
-          hasLabel && /* @__PURE__ */ jsx211(
+          hasLabel && /* @__PURE__ */ jsx212(
             Label,
             {
               showRequiredStyling,
@@ -6702,22 +6724,47 @@ var TextArea = forwardRef37(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx211(
+          /* @__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
+              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
+            )
+          ] })
         ]
       }
     );
@@ -6726,7 +6773,7 @@ var TextArea = forwardRef37(
 TextArea.displayName = "TextArea";
 
 // src/components/Feedback/CommentComponent.tsx
-import { jsx as jsx212, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx213, jsxs as jsxs41 } from "react/jsx-runtime";
 var CommentComponent = ({
   rating,
   feedbackText,
@@ -6738,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__ */ jsx212(
+  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__ */ jsx212(
+    /* @__PURE__ */ jsx213(
       TextArea,
       {
         value: feedbackText,
@@ -6761,7 +6808,7 @@ var CommentComponent = ({
         tip: textAreaTip
       }
     ),
-    /* @__PURE__ */ jsx212(
+    /* @__PURE__ */ jsx213(
       Button,
       {
         purpose: "secondary",
@@ -6781,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";
@@ -6795,7 +6842,7 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx213, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs42 } from "react/jsx-runtime";
 var Tooltip = forwardRef38(
   (props, ref) => {
     const {
@@ -6812,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);
@@ -6893,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,
@@ -6909,15 +6956,15 @@ var Tooltip = forwardRef38(
           ),
           children: [
             text,
-            /* @__PURE__ */ jsx213("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs41("svg", { width: "36", height: "9", children: [
-              /* @__PURE__ */ jsx213(
+            /* @__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__ */ jsx213(
+              /* @__PURE__ */ jsx214(
                 "path",
                 {
                   fillRule: "evenodd",
@@ -6936,7 +6983,7 @@ var Tooltip = forwardRef38(
 Tooltip.displayName = "Tooltip";
 
 // src/components/Feedback/RatingComponent.tsx
-import { jsx as jsx214, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs43 } from "react/jsx-runtime";
 var RatingComponent = ({
   layout,
   ratingLabel,
@@ -6946,7 +6993,7 @@ var RatingComponent = ({
   handleRatingChange
 }) => {
   const layoutCn = layout === "vertical" ? "column" : "row";
-  const button3 = (purpose, layout2) => /* @__PURE__ */ jsx214(
+  const button3 = (purpose, layout2) => /* @__PURE__ */ jsx215(
     "button",
     {
       "aria-label": purpose === "up" ? thumbUpTooltip : thumbDownTooltip,
@@ -6957,7 +7004,7 @@ var RatingComponent = ({
         Feedback_default[`button--${layout2}`],
         focusable
       ),
-      children: /* @__PURE__ */ jsx214(
+      children: /* @__PURE__ */ jsx215(
         Icon,
         {
           icon: purpose === "up" ? ThumbUpIcon : ThumbDownIcon,
@@ -6966,7 +7013,7 @@ var RatingComponent = ({
       )
     }
   );
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       className: cn(
@@ -6974,10 +7021,10 @@ var RatingComponent = ({
         Feedback_default[`rating-container--${layoutCn}`]
       ),
       children: [
-        /* @__PURE__ */ jsx214(Label, { children: ratingLabel }),
-        loading ? /* @__PURE__ */ jsx214(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs42(HStack, { gap: "x1", children: [
-          /* @__PURE__ */ jsx214(Tooltip, { text: thumbUpTooltip, children: button3("up", layout) }),
-          /* @__PURE__ */ jsx214(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx214("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) }) })
         ] })
       ]
     }
@@ -6985,7 +7032,7 @@ var RatingComponent = ({
 };
 
 // src/components/Feedback/Feedback.tsx
-import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx216 } from "react/jsx-runtime";
 var Feedback = ({
   layout = "vertical",
   ratingLabel = "Hva syns du om tjenesten?",
@@ -7031,7 +7078,7 @@ var Feedback = ({
     isSubmittedProp === void 0 && setIsFeedbackSubmitted(true);
   };
   if (rating === null && !isFeedbackSubmitted) {
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx216(
       RatingComponent,
       {
         layout,
@@ -7044,7 +7091,7 @@ var Feedback = ({
     );
   }
   if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx216(
       CommentComponent,
       {
         rating,
@@ -7059,7 +7106,7 @@ var Feedback = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx215(Paragraph, { children: submittedTitle });
+  return /* @__PURE__ */ jsx216(Paragraph, { children: submittedTitle });
 };
 
 // src/components/Fieldset/Fieldset.tsx
@@ -7071,11 +7118,11 @@ var Fieldset_default = {
 };
 
 // src/components/Fieldset/Fieldset.tsx
-import { jsx as jsx216 } 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__ */ jsx216(
+    return /* @__PURE__ */ jsx217(
       "fieldset",
       {
         ref,
@@ -7091,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 jsx217 } 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__ */ jsx217(
+    return /* @__PURE__ */ jsx218(
       InputMessage,
       {
         id: errors[0].id,
@@ -7110,8 +7157,8 @@ var ErrorList = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx217("ul", { className: utilStyles_default["remove-list-styling"], children: errors.map(({ id, message }) => {
-    return /* @__PURE__ */ jsx217("li", { children: /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsx218("ul", { className: utilStyles_default["remove-list-styling"], children: errors.map(({ id, message }) => {
+    return /* @__PURE__ */ jsx218("li", { children: /* @__PURE__ */ jsx218(
       InputMessage,
       {
         id,
@@ -7138,30 +7185,30 @@ var FileUploader_default = {
 };
 
 // src/components/FileUploader/File.tsx
-import { jsx as jsx218, 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__ */ jsx218(
+  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__ */ jsx218(
+      /* @__PURE__ */ jsx219(
         Icon,
         {
           icon: isValid ? CheckCircledIcon : ErrorIcon,
           className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
         }
       ),
-      /* @__PURE__ */ jsx218(
+      /* @__PURE__ */ jsx219(
         Button,
         {
           size: "small",
@@ -7180,7 +7227,7 @@ var File = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx218(ErrorList, { errors: errorsList })
+    /* @__PURE__ */ jsx219(ErrorList, { errors: errorsList })
   ] });
 };
 
@@ -7472,19 +7519,19 @@ var useFileUploader = (props) => {
 };
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
-import { jsx as jsx219 } 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__ */ jsx219("div", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
+    return /* @__PURE__ */ jsx220("div", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
   }
-  return /* @__PURE__ */ jsx219("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 jsx220, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs45 } from "react/jsx-runtime";
 var FileUploader = (props) => {
   const {
     id,
@@ -7507,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 },
@@ -7533,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__ */ jsx220(
+  const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx221(
     File,
     {
       parentId: uniqueId,
@@ -7548,7 +7595,7 @@ var FileUploader = (props) => {
     id: derivativeIdGenerator(uniqueId, `error-${index}`),
     message: e
   }));
-  const button3 = /* @__PURE__ */ jsx220(
+  const button3 = /* @__PURE__ */ jsx221(
     Button,
     {
       ...getButtonProps(),
@@ -7568,7 +7615,7 @@ var FileUploader = (props) => {
       children: btnLabel
     }
   );
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       id: uniqueId,
@@ -7580,9 +7627,9 @@ var FileUploader = (props) => {
       style: { ...style, width },
       ...rest,
       children: [
-        hasLabel && /* @__PURE__ */ jsx220(Label, { id: labelId, showRequiredStyling: showRequiredMarker, children: label }),
-        hasTip && /* @__PURE__ */ jsx220(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(),
@@ -7592,7 +7639,7 @@ var FileUploader = (props) => {
               isDragActive && FileUploader_default["input-container--drag-active"]
             ),
             children: [
-              /* @__PURE__ */ jsx220(
+              /* @__PURE__ */ jsx221(
                 "input",
                 {
                   ...getInputProps(),
@@ -7601,16 +7648,16 @@ var FileUploader = (props) => {
                 }
               ),
               dropAreaLabel,
-              /* @__PURE__ */ jsx220(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__ */ jsx220("input", { ...getInputProps(), id: inputId }),
+        ) : /* @__PURE__ */ jsxs45("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
+          /* @__PURE__ */ jsx221("input", { ...getInputProps(), id: inputId }),
           button3
         ] }),
-        /* @__PURE__ */ jsx220(ErrorList, { errors: rootErrorsList }),
-        !hideFileList && /* @__PURE__ */ jsx220("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 })
       ]
     }
   );
@@ -7632,7 +7679,7 @@ var GlobalMessage_default = {
 };
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-import { jsx as jsx221, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs46 } from "react/jsx-runtime";
 var purposeVariants = {
   info: {
     icon: InfoIcon
@@ -7658,7 +7705,7 @@ var GlobalMessage = forwardRef40(
       ...rest
     } = props;
     const [isClosed, setClosed] = useState14(false);
-    return !isClosed ? /* @__PURE__ */ jsxs45(
+    return !isClosed ? /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -7674,7 +7721,7 @@ var GlobalMessage = forwardRef40(
           rest
         ),
         children: [
-          /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsxs46(
             "div",
             {
               className: cn(
@@ -7682,12 +7729,12 @@ var GlobalMessage = forwardRef40(
                 closable && GlobalMessage_default["content--closable"]
               ),
               children: [
-                /* @__PURE__ */ jsx221(Icon, { icon: purposeVariants[purpose].icon, className: GlobalMessage_default.icon }),
-                children != null ? children : /* @__PURE__ */ jsx221("span", { children: message })
+                /* @__PURE__ */ jsx222(Icon, { icon: purposeVariants[purpose].icon, className: GlobalMessage_default.icon }),
+                children != null ? children : /* @__PURE__ */ jsx222("span", { children: message })
               ]
             }
           ),
-          closable && /* @__PURE__ */ jsx221(
+          closable && /* @__PURE__ */ jsx222(
             Button,
             {
               icon: CloseIcon,
@@ -7718,7 +7765,7 @@ var Grid_default = {
 };
 
 // src/components/Grid/Grid.tsx
-import { jsx as jsx222 } 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 = {
@@ -7743,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__ */ jsx222(
+  return as === "div" ? /* @__PURE__ */ jsx223(
     "div",
     {
       ...getBaseHTMLProps(id, cn(className, Grid_default.grid), htmlProps, rest),
       style: { ...htmlProps == null ? void 0 : htmlProps.style, ...styleVariables }
     }
-  ) : /* @__PURE__ */ jsx222(
+  ) : /* @__PURE__ */ jsx223(
     "form",
     {
       ...getBaseHTMLProps(id, cn(className, Grid_default.grid), htmlProps, rest),
@@ -7760,7 +7807,7 @@ var Grid = (props) => {
 Grid.displayName = "Grid";
 
 // src/components/Grid/GridChild.tsx
-import { jsx as jsx223 } from "react/jsx-runtime";
+import { jsx as jsx224 } from "react/jsx-runtime";
 var isRelativeGridColumn = (type) => {
   return type === "all" || type === "firstHalf" || type === "secondHalf";
 };
@@ -7810,7 +7857,7 @@ var GridChild = (props) => {
     firstHalf: "first-half",
     secondHalf: "second-half"
   };
-  return /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsx224(
     "div",
     {
       ...getBaseHTMLProps(
@@ -7839,11 +7886,11 @@ var InlineButton_default = {
 };
 
 // src/components/InlineButton/InlineButton.tsx
-import { jsx as jsx224 } from "react/jsx-runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
 var InlineButton = forwardRef41(
   (props, ref) => {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx224(
+    return /* @__PURE__ */ jsx225(
       "button",
       {
         ref,
@@ -7871,7 +7918,7 @@ import {
   isValidElement as isValidElement6,
   useState as useState15
 } from "react";
-import { Fragment as Fragment7, jsx as jsx225 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx226 } from "react/jsx-runtime";
 var InlineEdit = (props) => {
   const {
     emptiable,
@@ -7921,12 +7968,12 @@ var InlineEdit = (props) => {
       emptiable
     })
   );
-  return /* @__PURE__ */ jsx225(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 = {
@@ -7939,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 jsx226, 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,
@@ -7960,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");
@@ -7969,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__ */ jsx226(
+  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: () => {
@@ -7979,10 +8026,10 @@ var InlineTextArea = forwardRef42((props, ref) => {
             (_a = inputRef.current) == null ? void 0 : _a.focus();
           },
           className: InlineEdit_default["icon-wrapper"],
-          children: /* @__PURE__ */ jsx226(Icon, { icon: EditIcon, iconSize: "small" })
+          children: /* @__PURE__ */ jsx227(Icon, { icon: EditIcon, iconSize: "small" })
         }
       ),
-      /* @__PURE__ */ jsx226(
+      /* @__PURE__ */ jsx227(
         "textarea",
         {
           ...rest,
@@ -8014,12 +8061,12 @@ var InlineTextArea = forwardRef42((props, ref) => {
 InlineTextArea.displayName = "InlineTextArea";
 
 // src/components/InlineEdit/InlineEditTextArea.tsx
-import { jsx as jsx227 } 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__ */ jsx227(
+  return /* @__PURE__ */ jsx228(
     InlineEdit,
     {
       onSetValue,
@@ -8029,7 +8076,7 @@ var InlineEditTextArea = forwardRef43((props, ref) => {
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx227(InlineTextArea, { ref: combinedRef, ...rest })
+      children: /* @__PURE__ */ jsx228(InlineTextArea, { ref: combinedRef, ...rest })
     }
   );
 });
@@ -8038,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 jsx228, 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 {
@@ -8053,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;
@@ -8062,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__ */ jsx228(
+    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: () => {
@@ -8072,10 +8119,10 @@ var InlineInput = forwardRef44(
               (_a = inputRef.current) == null ? void 0 : _a.focus();
             },
             className: InlineEdit_default["icon-wrapper"],
-            children: /* @__PURE__ */ jsx228(Icon, { icon: EditIcon, iconSize: "small" })
+            children: /* @__PURE__ */ jsx229(Icon, { icon: EditIcon, iconSize: "small" })
           }
         ),
-        /* @__PURE__ */ jsx228(
+        /* @__PURE__ */ jsx229(
           "input",
           {
             ...rest,
@@ -8106,12 +8153,12 @@ var InlineInput = forwardRef44(
 InlineInput.displayName = "InlineInput";
 
 // src/components/InlineEdit/InlineEditInput.tsx
-import { jsx as jsx229 } 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__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     InlineEdit,
     {
       onSetValue,
@@ -8121,7 +8168,7 @@ var InlineEditInput = forwardRef45((props, ref) => {
       onFocus,
       onChange,
       onBlur,
-      children: /* @__PURE__ */ jsx229(InlineInput, { ...rest, ref: combinedRef })
+      children: /* @__PURE__ */ jsx230(InlineInput, { ...rest, ref: combinedRef })
     }
   );
 });
@@ -8146,9 +8193,9 @@ var InternalHeader_default = {
 
 // src/components/InternalHeader/NavigationItem.tsx
 import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx230 } from "react/jsx-runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
 var NavigationItem = forwardRef46(({ title, isCurrent, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsx231(
     "a",
     {
       ...rest,
@@ -8166,7 +8213,7 @@ var NavigationItem = forwardRef46(({ title, isCurrent, ...rest }, ref) => {
 });
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx231, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx232, jsxs as jsxs50 } from "react/jsx-runtime";
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -8199,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__ */ jsx231("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx231(
+  const navigation = hasNavigationElements && !smallScreen ? /* @__PURE__ */ jsx232("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ jsx232(
     "ul",
     {
       className: cn(
@@ -8210,7 +8257,7 @@ var InternalHeader = (props) => {
       children: navigationElements.map((item, index) => {
         const { href, ...rest2 } = item;
         const isCurrent = href === currentPage;
-        return /* @__PURE__ */ jsx231("li", { className: InternalHeader_default["nav-list__item"], children: /* @__PURE__ */ jsx231(
+        return /* @__PURE__ */ jsx232("li", { className: InternalHeader_default["nav-list__item"], children: /* @__PURE__ */ jsx232(
           NavigationItem,
           {
             href,
@@ -8223,7 +8270,7 @@ var InternalHeader = (props) => {
     }
   ) }) : null;
   const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "div",
     {
       ...getBaseHTMLProps(
@@ -8238,7 +8285,7 @@ var InternalHeader = (props) => {
         rest
       ),
       children: [
-        /* @__PURE__ */ jsx231(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationHref ? /* @__PURE__ */ jsx231(
+        /* @__PURE__ */ jsx232(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationHref ? /* @__PURE__ */ jsx232(
           "a",
           {
             href: applicationHref,
@@ -8247,11 +8294,11 @@ var InternalHeader = (props) => {
             children: applicationName
           }
         ) : applicationName }),
-        /* @__PURE__ */ jsx231(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
-        (hasContextMenu || navigation !== null) && /* @__PURE__ */ jsx231("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__ */ jsx231(
+        hasContextMenu && /* @__PURE__ */ jsxs50("div", { className: InternalHeader_default["context-menu-group"], children: [
+          /* @__PURE__ */ jsx232(
             Button,
             {
               ref: buttonRef,
@@ -8263,7 +8310,7 @@ var InternalHeader = (props) => {
               "aria-label": "\xE5pne meny"
             }
           ),
-          /* @__PURE__ */ jsx231(
+          /* @__PURE__ */ jsx232(
             OverflowMenu,
             {
               isOpen: !contextMenuIsClosed,
@@ -8295,7 +8342,7 @@ var List_default = {
 };
 
 // src/components/List/List.tsx
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 var List = forwardRef47((props, ref) => {
   const {
     listType = "unordered",
@@ -8307,7 +8354,7 @@ var List = forwardRef47((props, ref) => {
     ...rest
   } = props;
   const List2 = listType === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx232(
+  return /* @__PURE__ */ jsx233(
     List2,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -8325,10 +8372,10 @@ List.displayName = "List";
 
 // src/components/List/ListItem.tsx
 import { forwardRef as forwardRef48 } from "react";
-import { jsx as jsx233 } from "react/jsx-runtime";
+import { jsx as jsx234 } from "react/jsx-runtime";
 var ListItem = forwardRef48(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx233("li", { ref, ...rest, className: cn(className, List_default.li) });
+    return /* @__PURE__ */ jsx234("li", { ref, ...rest, className: cn(className, List_default.li) });
   }
 );
 ListItem.displayName = "ListItem";
@@ -8355,7 +8402,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment8, jsx as jsx234, 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
@@ -8390,9 +8437,9 @@ var LocalMessage = forwardRef49(
     } = props;
     const [isClosed, setClosed] = useState17(false);
     if (isClosed) {
-      return /* @__PURE__ */ jsx234(Fragment8, {});
+      return /* @__PURE__ */ jsx235(Fragment8, {});
     }
-    return /* @__PURE__ */ jsxs50(
+    return /* @__PURE__ */ jsxs51(
       "div",
       {
         ref,
@@ -8411,15 +8458,15 @@ var LocalMessage = forwardRef49(
         ),
         style: { ...htmlProps == null ? void 0 : htmlProps.style, width },
         children: [
-          /* @__PURE__ */ jsx234(
+          /* @__PURE__ */ jsx235(
             Icon,
             {
               icon: purposeVariants2[purpose].icon,
               className: cn(LocalMessage_default.icon, LocalMessage_default.container__icon)
             }
           ),
-          /* @__PURE__ */ jsx234("div", { className: LocalMessage_default.container__text, children: children != null ? children : /* @__PURE__ */ jsx234("span", { children: message }) }),
-          closable && /* @__PURE__ */ jsx234(
+          /* @__PURE__ */ jsx235("div", { className: LocalMessage_default.container__text, children: children != null ? children : /* @__PURE__ */ jsx235("span", { children: message }) }),
+          closable && /* @__PURE__ */ jsx235(
             Button,
             {
               icon: CloseIcon,
@@ -8444,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";
 
@@ -8483,7 +8530,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx235, 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,
@@ -8498,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);
@@ -8522,14 +8569,14 @@ var Modal = forwardRef50((props, ref) => {
   useOnKeyDown(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
   return isOpen || hasTransitionedIn ? createPortal2(
-    /* @__PURE__ */ jsx235(
+    /* @__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(
@@ -8547,11 +8594,11 @@ var Modal = forwardRef50((props, ref) => {
             id: modalId,
             elevation: 4,
             children: [
-              /* @__PURE__ */ jsxs51("div", { className: Modal_default.content, children: [
-                header && /* @__PURE__ */ jsx235("div", { id: headerId, className: Modal_default.header, children: typeof header === "string" ? /* @__PURE__ */ jsx235(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__ */ jsx235(
+              onClose && /* @__PURE__ */ jsx236(
                 Button,
                 {
                   size: "small",
@@ -8574,11 +8621,11 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalBody.tsx
 import { forwardRef as forwardRef51 } from "react";
-import { jsx as jsx236 } 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__ */ jsx236(
+    return /* @__PURE__ */ jsx237(
       "div",
       {
         ref,
@@ -8603,10 +8650,10 @@ ModalBody.displayName = "ModalBody";
 
 // src/components/Modal/ModalActions.tsx
 import { forwardRef as forwardRef52 } from "react";
-import { jsx as jsx237 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
 var ModalActions = forwardRef52(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx237("div", { ref, ...rest, className: cn(className, Modal_default.actions) });
+    return /* @__PURE__ */ jsx238("div", { ref, ...rest, className: cn(className, Modal_default.actions) });
   }
 );
 ModalActions.displayName = "ModalActions";
@@ -8660,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";
@@ -9041,7 +9088,7 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
 import {
   components
 } from "react-select";
-import { jsx as jsx238, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs53 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -9052,27 +9099,27 @@ var {
   MultiValueRemove,
   Control
 } = components;
-var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs52(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx238(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__ */ jsx238(Option, { ...props, children: /* @__PURE__ */ jsx238(Element, { ...props }) });
-var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx238(SingleValue, { ...props, children: /* @__PURE__ */ jsx238("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx238(Element, { ...props }) : props.children }) });
-var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx238(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx238(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx238(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
-var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx238(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx238(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__ */ jsx238(
+  return /* @__PURE__ */ jsx239(
     DropdownIndicator,
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ jsx238(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
+      children: /* @__PURE__ */ jsx239(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) })
     }
   );
 };
-var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx238(
+var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx239(
   Input2,
   {
     ...props,
@@ -9082,11 +9129,11 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx238(
 );
 var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(
     "div",
     {
       "data-testid": dataTestId ? dataTestId + "-control" : void 0,
-      children: /* @__PURE__ */ jsxs52(
+      children: /* @__PURE__ */ jsxs53(
         Control,
         {
           ...rest,
@@ -9097,7 +9144,7 @@ var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
             readOnly && Select_default["control--readonly"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx238(
+            icon2 && /* @__PURE__ */ jsx239(
               Icon,
               {
                 icon: icon2,
@@ -9114,7 +9161,7 @@ var DDSControl = (props, componentSize, readOnly, icon2, dataTestId) => {
 };
 
 // src/components/Select/Select.tsx
-import { jsx as jsx239, 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 {
@@ -9143,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;
@@ -9191,7 +9238,7 @@ function SelectInner(props, ref) {
     menuPortalTarget: document == null ? void 0 : document.body,
     ...rest
   };
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       className: cn(
@@ -9201,8 +9248,8 @@ function SelectInner(props, ref) {
       ),
       style: { ...style, width },
       children: [
-        hasLabel && /* @__PURE__ */ jsx239(Label, { htmlFor: uniqueId, showRequiredStyling, children: label }),
-        /* @__PURE__ */ jsx239(ReactSelect, { ...reactSelectProps, ref }),
+        hasLabel && /* @__PURE__ */ jsx240(Label, { htmlFor: uniqueId, showRequiredStyling, children: label }),
+        /* @__PURE__ */ jsx240(ReactSelect, { ...reactSelectProps, ref }),
         renderInputMessage(tip, tipId, errorMessage, errorMessageId)
       ]
     }
@@ -9215,7 +9262,7 @@ Select.displayName = "Select";
 var createSelectOptions = (...args) => args.map((v2) => ({ label: v2, value: v2 }));
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx240, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs55 } from "react/jsx-runtime";
 var Pagination = forwardRef54(
   (props, ref) => {
     const {
@@ -9259,7 +9306,7 @@ var Pagination = forwardRef54(
     };
     const listItems = items.length > 0 ? items.map((item, i2) => {
       const isActive = item === activePage;
-      return /* @__PURE__ */ jsx240("li", { className: Pagination_default.list__item, children: item !== "truncator" ? /* @__PURE__ */ jsx240(
+      return /* @__PURE__ */ jsx241("li", { className: Pagination_default.list__item, children: item !== "truncator" ? /* @__PURE__ */ jsx241(
         Button,
         {
           purpose: isActive ? "primary" : "secondary",
@@ -9270,7 +9317,7 @@ var Pagination = forwardRef54(
           "aria-label": isActive ? `N\xE5v\xE6rende side (side ${item})` : `G\xE5 til side ${item}`,
           children: item
         }
-      ) : /* @__PURE__ */ jsx240(
+      ) : /* @__PURE__ */ jsx241(
         Icon,
         {
           icon: MoreHorizontalIcon,
@@ -9278,7 +9325,7 @@ var Pagination = forwardRef54(
         }
       ) }, `pagination-item-${i2}`);
     }) : void 0;
-    const previousPageButton = /* @__PURE__ */ jsx240(
+    const previousPageButton = /* @__PURE__ */ jsx241(
       Button,
       {
         purpose: "secondary",
@@ -9290,7 +9337,7 @@ var Pagination = forwardRef54(
         "aria-label": "G\xE5 til forrige siden"
       }
     );
-    const nextPageButton = /* @__PURE__ */ jsx240(
+    const nextPageButton = /* @__PURE__ */ jsx241(
       Button,
       {
         purpose: "secondary",
@@ -9307,8 +9354,8 @@ var Pagination = forwardRef54(
     } : { className: Pagination_default.nav };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
-    const navigation = withPagination ? /* @__PURE__ */ jsx240("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs54("ol", { className: Pagination_default.list, children: [
-      /* @__PURE__ */ jsx240(
+    const navigation = withPagination ? /* @__PURE__ */ jsx241("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs55("ol", { className: Pagination_default.list, children: [
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9320,7 +9367,7 @@ var Pagination = forwardRef54(
         }
       ),
       listItems,
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9332,8 +9379,8 @@ var Pagination = forwardRef54(
         }
       )
     ] }) }) : null;
-    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx240("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs54("ol", { className: Pagination_default.list, children: [
-      /* @__PURE__ */ jsx240(
+    const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx241("nav", { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs55("ol", { className: Pagination_default.list, children: [
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9341,7 +9388,7 @@ var Pagination = forwardRef54(
             isOnFirstPage && Pagination_default["list__item--hidden"]
           ),
           "aria-hidden": isOnFirstPage,
-          children: /* @__PURE__ */ jsx240(
+          children: /* @__PURE__ */ jsx241(
             Button,
             {
               purpose: "secondary",
@@ -9355,7 +9402,7 @@ var Pagination = forwardRef54(
           )
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9366,7 +9413,7 @@ var Pagination = forwardRef54(
           children: previousPageButton
         }
       ),
-      /* @__PURE__ */ jsx240("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx241(
         Button,
         {
           size: "small",
@@ -9376,7 +9423,7 @@ var Pagination = forwardRef54(
           children: activePage
         }
       ) }),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9387,7 +9434,7 @@ var Pagination = forwardRef54(
           children: nextPageButton
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         "li",
         {
           className: cn(
@@ -9395,7 +9442,7 @@ var Pagination = forwardRef54(
             isOnLastPage && Pagination_default["list__item--hidden"]
           ),
           "aria-hidden": isOnLastPage,
-          children: /* @__PURE__ */ jsx240(
+          children: /* @__PURE__ */ jsx241(
             Button,
             {
               purpose: "secondary",
@@ -9413,7 +9460,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__ */ jsxs55(
       "div",
       {
         ...getBaseHTMLProps(
@@ -9427,8 +9474,8 @@ var Pagination = forwardRef54(
           rest
         ),
         children: [
-          /* @__PURE__ */ jsxs54("div", { className: Pagination_default.indicators, children: [
-            withSelect && /* @__PURE__ */ jsx240(
+          /* @__PURE__ */ jsxs55("div", { className: Pagination_default.indicators, children: [
+            withSelect && /* @__PURE__ */ jsx241(
               Select,
               {
                 options: selectOptions,
@@ -9444,7 +9491,7 @@ var Pagination = forwardRef54(
                 "aria-label": "Antall elementer per side"
               }
             ),
-            withCounter && /* @__PURE__ */ jsxs54(Typography, { typographyType: "supportingStyleLabel01", as: "p", children: [
+            withCounter && /* @__PURE__ */ jsxs55(Typography, { typographyType: "supportingStyleLabel01", as: "p", children: [
               "Viser ",
               activePageFirstItem,
               "-",
@@ -9474,7 +9521,7 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx241, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs56 } from "react/jsx-runtime";
 var Popover = forwardRef55(
   (props, ref) => {
     const {
@@ -9515,7 +9562,7 @@ var Popover = forwardRef55(
     useOnClickOutside(elements, () => {
       if (isOpen) onClose && onClose();
     });
-    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs55(
+    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs56(
       Paper,
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -9532,15 +9579,15 @@ var Popover = forwardRef55(
           focus_default.focusable
         ),
         children: [
-          title && /* @__PURE__ */ jsx241("div", { className: Popover_default.title, children: typeof title === "string" ? /* @__PURE__ */ jsx241(Typography, { typographyType: "headingSans02", children: title }) : title }),
-          /* @__PURE__ */ jsx241(
+          title && /* @__PURE__ */ jsx242("div", { className: Popover_default.title, children: typeof title === "string" ? /* @__PURE__ */ jsx242(Typography, { typographyType: "headingSans02", children: title }) : title }),
+          /* @__PURE__ */ jsx242(
             "div",
             {
               className: !hasTitle && withCloseButton ? Popover_default["content--closable--no-title"] : "",
               children
             }
           ),
-          withCloseButton && /* @__PURE__ */ jsx241(
+          withCloseButton && /* @__PURE__ */ jsx242(
             Button,
             {
               icon: CloseIcon,
@@ -9563,11 +9610,11 @@ import {
   Children as ReactChildren5,
   cloneElement as cloneElement6,
   isValidElement as isValidElement7,
-  useId as useId15,
+  useId as useId16,
   useRef as useRef26,
   useState as useState19
 } from "react";
-import { Fragment as Fragment9, jsx as jsx242 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx243 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen = false,
   onCloseButtonClick,
@@ -9576,7 +9623,7 @@ var PopoverGroup = ({
   popoverId
 }) => {
   const [open, setOpen] = useState19(isOpen);
-  const generatedId = useId15();
+  const generatedId = useId16();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const handleOnCloseButtonClick = () => {
     setOpen(false);
@@ -9613,7 +9660,7 @@ var PopoverGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsx242(Fragment9, { children: Children8 });
+  return /* @__PURE__ */ jsx243(Fragment9, { children: Children8 });
 };
 PopoverGroup.displayName = "PopoverGroup";
 
@@ -9661,7 +9708,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment10, jsx as jsx243, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx244, jsxs as jsxs57 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -9693,15 +9740,15 @@ var ProgressTrackerItem = (props) => {
   const itemState = toItemState(active, completed, disabled);
   const stepNumberContent = useMemo2(() => {
     if (completed) {
-      return /* @__PURE__ */ jsx243(Icon, { icon: CheckIcon, iconSize: "small" });
+      return /* @__PURE__ */ jsx244(Icon, { icon: CheckIcon, iconSize: "small" });
     }
     if (icon2 !== void 0) {
-      return /* @__PURE__ */ jsx243(Icon, { icon: icon2, iconSize: "small" });
+      return /* @__PURE__ */ jsx244(Icon, { icon: icon2, iconSize: "small" });
     }
     return index + 1;
   }, [completed, icon2, index]);
-  const stepContent = /* @__PURE__ */ jsxs56(Fragment10, { children: [
-    /* @__PURE__ */ jsx243(
+  const stepContent = /* @__PURE__ */ jsxs57(Fragment10, { children: [
+    /* @__PURE__ */ jsx244(
       "div",
       {
         "aria-hidden": true,
@@ -9713,7 +9760,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsxs57(
       "div",
       {
         className: cn(
@@ -9722,13 +9769,13 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-sans-03"]
         ),
         children: [
-          /* @__PURE__ */ jsx243(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
+          /* @__PURE__ */ jsx244(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
           children
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx243("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ jsx243(
+  return /* @__PURE__ */ jsx244("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ jsx244(
     "button",
     {
       onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
@@ -9736,12 +9783,12 @@ var ProgressTrackerItem = (props) => {
       className: cn(ProgressTracker_default["item-button"], focusable),
       children: stepContent
     }
-  ) : /* @__PURE__ */ jsx243("div", { className: cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"]), children: stepContent }) });
+  ) : /* @__PURE__ */ jsx244("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 jsx244, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs58 } from "react/jsx-runtime";
 var ProgressTracker = (() => {
   const Res = forwardRef56((props, ref) => {
     const {
@@ -9773,14 +9820,14 @@ var ProgressTracker = (() => {
       const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
       return itemsWithConnectorsBetween;
     }, [children]);
-    return /* @__PURE__ */ jsx244(
+    return /* @__PURE__ */ jsx245(
       ProgressTrackerContext.Provider,
       {
         value: {
           activeStep: thisActiveStep,
           handleStepChange: handleChange
         },
-        children: /* @__PURE__ */ jsx244("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx244("ol", { className: ProgressTracker_default.list, children: steps }) })
+        children: /* @__PURE__ */ jsx245("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx245("ol", { className: ProgressTracker_default.list, children: steps }) })
       }
     );
   });
@@ -9804,8 +9851,8 @@ var intersperseItemsWithConnector = (children) => Children4.map(children, (child
   if (index === 0) {
     return child;
   }
-  return /* @__PURE__ */ jsxs57(Fragment11, { children: [
-    /* @__PURE__ */ jsx244("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
+  return /* @__PURE__ */ jsxs58(Fragment11, { children: [
+    /* @__PURE__ */ jsx245("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
     child
   ] }, index);
 });
@@ -9813,7 +9860,7 @@ var intersperseItemsWithConnector = (children) => Children4.map(children, (child
 // src/components/Search/Search.tsx
 import {
   forwardRef as forwardRef58,
-  useId as useId16,
+  useId as useId17,
   useState as useState21
 } from "react";
 
@@ -9875,7 +9922,7 @@ function createEmptyChangeEvent(inputElementId) {
 
 // src/components/Search/SearchSuggestions.tsx
 import { forwardRef as forwardRef57 } from "react";
-import { jsx as jsx245, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs59 } from "react/jsx-runtime";
 var SearchSuggestions = forwardRef57((props, ref) => {
   const {
     id,
@@ -9895,14 +9942,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__ */ jsx245(
+  const renderedSuggestions = /* @__PURE__ */ jsx246(
     "ul",
     {
       role: "listbox",
       "aria-labelledby": suggestionsHeaderId,
       className: utilStyles_default["remove-list-styling"],
       children: suggestionsToRender.map((suggestion, index) => {
-        return /* @__PURE__ */ jsx245("li", { role: "option", children: /* @__PURE__ */ jsx245(
+        return /* @__PURE__ */ jsx246("li", { role: "option", children: /* @__PURE__ */ jsx246(
           OverflowMenuItem,
           {
             index,
@@ -9918,7 +9965,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
       })
     }
   );
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -9937,7 +9984,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
       "aria-hidden": !showSuggestions,
       border: "default",
       children: [
-        /* @__PURE__ */ jsx245(
+        /* @__PURE__ */ jsx246(
           "span",
           {
             id: suggestionsHeaderId,
@@ -9956,7 +10003,7 @@ var SearchSuggestions = forwardRef57((props, ref) => {
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment12, jsx as jsx246, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx247, jsxs as jsxs60 } from "react/jsx-runtime";
 var getIconSize = (size2) => {
   switch (size2) {
     case "large":
@@ -9983,7 +10030,7 @@ var Search = forwardRef58(
     ...rest
   }, ref) => {
     var _a;
-    const generatedId = useId16();
+    const generatedId = useId17();
     const uniqueId = id != null ? id : `${generatedId}-searchInput`;
     const hasLabel = !!label;
     const tipId = derivativeIdGenerator(uniqueId, "tip");
@@ -10011,10 +10058,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__ */ jsx246(Label, { htmlFor: uniqueId, children: label }),
-      /* @__PURE__ */ jsxs59("div", { children: [
-        /* @__PURE__ */ jsxs59(
+    return /* @__PURE__ */ jsxs60("div", { className: Search_default.container, children: [
+      hasLabel && /* @__PURE__ */ jsx247(Label, { htmlFor: uniqueId, children: label }),
+      /* @__PURE__ */ jsxs60("div", { children: [
+        /* @__PURE__ */ jsxs60(
           "div",
           {
             className: cn(
@@ -10023,8 +10070,8 @@ var Search = forwardRef58(
             ),
             style,
             children: [
-              /* @__PURE__ */ jsxs59("div", { className: Search_default["input-group"], children: [
-                /* @__PURE__ */ jsx246(
+              /* @__PURE__ */ jsxs60("div", { className: Search_default["input-group"], children: [
+                /* @__PURE__ */ jsx247(
                   Icon,
                   {
                     icon: SearchIcon,
@@ -10032,7 +10079,7 @@ var Search = forwardRef58(
                     className: cn(Search_default["search-icon"])
                   }
                 ),
-                /* @__PURE__ */ jsx246(
+                /* @__PURE__ */ jsx247(
                   Input,
                   {
                     ...rest,
@@ -10060,8 +10107,8 @@ var Search = forwardRef58(
                     )
                   }
                 ),
-                hasSuggestions && /* @__PURE__ */ jsxs59(Fragment12, { children: [
-                  /* @__PURE__ */ jsx246(
+                hasSuggestions && /* @__PURE__ */ jsxs60(Fragment12, { children: [
+                  /* @__PURE__ */ jsx247(
                     SearchSuggestions,
                     {
                       id: suggestionsId,
@@ -10073,9 +10120,9 @@ var Search = forwardRef58(
                       componentSize
                     }
                   ),
-                  /* @__PURE__ */ jsx246(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+                  /* @__PURE__ */ jsx247(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
                 ] }),
-                hasValue && /* @__PURE__ */ jsx246(
+                hasValue && /* @__PURE__ */ jsx247(
                   Button,
                   {
                     icon: CloseSmallIcon,
@@ -10087,7 +10134,7 @@ var Search = forwardRef58(
                   }
                 )
               ] }),
-              showSearchButton && /* @__PURE__ */ jsx246(
+              showSearchButton && /* @__PURE__ */ jsx247(
                 Button,
                 {
                   size: componentSize,
@@ -10112,7 +10159,7 @@ import {
   useRef as useRef27,
   useState as useState22
 } from "react";
-import { jsx as jsx247 } from "react/jsx-runtime";
+import { jsx as jsx248 } from "react/jsx-runtime";
 var SearchAutocompleteWrapper = (props) => {
   const {
     value,
@@ -10188,7 +10235,7 @@ var SearchAutocompleteWrapper = (props) => {
     inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return /* @__PURE__ */ jsx247(AutocompleteSearchContext.Provider, { value: contextProps, children });
+  return /* @__PURE__ */ jsx248(AutocompleteSearchContext.Provider, { value: contextProps, children });
 };
 SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
 
@@ -10198,7 +10245,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 forwardRef60, useId as useId18 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
 import { createContext as createContext5, useContext as useContext8 } from "react";
@@ -10230,10 +10277,10 @@ var SelectionControl_default = {
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-import { jsx as jsx248 } from "react/jsx-runtime";
+import { jsx as jsx249 } from "react/jsx-runtime";
 var SelectionControl = forwardRef59((props, ref) => {
   const { controlType, className, ...rest } = props;
-  return /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsx249(
     "span",
     {
       ref,
@@ -10257,7 +10304,7 @@ var Label2 = forwardRef59(
       className,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx248(
+    return /* @__PURE__ */ jsx249(
       "label",
       {
         ref,
@@ -10288,7 +10335,7 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { jsx as jsx249, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs61 } from "react/jsx-runtime";
 var Checkbox = forwardRef60(
   (props, ref) => {
     const {
@@ -10304,7 +10351,7 @@ var Checkbox = forwardRef60(
       htmlProps = {},
       ...rest
     } = props;
-    const generatedId = useId17();
+    const generatedId = useId18();
     const uniqueId = id != null ? id : `${generatedId}-checkbox`;
     const checkboxGroup = useCheckboxGroup();
     const hasLabel = !!label;
@@ -10313,7 +10360,7 @@ var Checkbox = forwardRef60(
       className: htmlPropsClassName,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsxs60(
+    return /* @__PURE__ */ jsxs61(
       Label2,
       {
         hasError: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
@@ -10325,7 +10372,7 @@ var Checkbox = forwardRef60(
         className: cn(className, htmlPropsClassName),
         style,
         children: [
-          /* @__PURE__ */ jsx249(
+          /* @__PURE__ */ jsx250(
             "input",
             {
               ...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
@@ -10349,14 +10396,14 @@ var Checkbox = forwardRef60(
               )
             }
           ),
-          /* @__PURE__ */ jsx249(
+          /* @__PURE__ */ jsx250(
             SelectionControl,
             {
               controlType: "checkbox",
               className: focus_default["focus-styled-sibling"]
             }
           ),
-          hasLabel && /* @__PURE__ */ jsx249(Typography, { ...selectionControlTypographyProps, children: label })
+          hasLabel && /* @__PURE__ */ jsx250(Typography, { ...selectionControlTypographyProps, children: label })
         ]
       }
     );
@@ -10365,8 +10412,8 @@ var Checkbox = forwardRef60(
 Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-import { useId as useId18 } from "react";
-import { jsx as jsx250, jsxs as jsxs61 } from "react/jsx-runtime";
+import { useId as useId19 } from "react";
+import { jsx as jsx251, jsxs as jsxs62 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
     label,
@@ -10384,7 +10431,7 @@ var CheckboxGroup = (props) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired } = htmlProps;
-  const generatedId = useId18();
+  const generatedId = useId19();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
   const showRequiredMarker = required || ariaRequired;
@@ -10398,7 +10445,7 @@ var CheckboxGroup = (props) => {
     disabled,
     readOnly
   };
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     "div",
     {
       ...getBaseHTMLProps(
@@ -10408,7 +10455,7 @@ var CheckboxGroup = (props) => {
         rest
       ),
       children: [
-        /* @__PURE__ */ jsxs61(
+        /* @__PURE__ */ jsxs62(
           Typography,
           {
             as: "span",
@@ -10417,12 +10464,12 @@ var CheckboxGroup = (props) => {
             children: [
               label,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx250(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx251(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx250(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx250(
+        /* @__PURE__ */ jsx251(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx251(
           "div",
           {
             role: "group",
@@ -10440,7 +10487,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 forwardRef61, useId as useId20 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
 import { createContext as createContext6, useContext as useContext9 } from "react";
@@ -10450,7 +10497,7 @@ var useRadioButtonGroup = () => {
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { jsx as jsx251, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs63 } from "react/jsx-runtime";
 var isValueEqualToGroupValueOrFalsy = (value, group) => {
   if (typeof value !== "undefined" && value !== null && group) {
     if (typeof value === "number") {
@@ -10484,7 +10531,7 @@ var RadioButton = forwardRef61(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const generatedId = useId19();
+    const generatedId = useId20();
     const uniqueId = id != null ? id : `${generatedId}-radioButton`;
     const hasLabel = !!label;
     const radioButtonGroup = useRadioButtonGroup();
@@ -10496,7 +10543,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__ */ jsxs63(
       Label2,
       {
         hasError: error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error),
@@ -10508,7 +10555,7 @@ var RadioButton = forwardRef61(
         htmlFor: uniqueId,
         controlType: "radio",
         children: [
-          /* @__PURE__ */ jsx251(
+          /* @__PURE__ */ jsx252(
             "input",
             {
               ...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
@@ -10528,14 +10575,14 @@ var RadioButton = forwardRef61(
               ref
             }
           ),
-          /* @__PURE__ */ jsx251(
+          /* @__PURE__ */ jsx252(
             SelectionControl,
             {
               controlType: "radio",
               className: focus_default["focus-styled-sibling"]
             }
           ),
-          /* @__PURE__ */ jsx251(Typography, { ...selectionControlTypographyProps, children: children != null ? children : label })
+          /* @__PURE__ */ jsx252(Typography, { ...selectionControlTypographyProps, children: children != null ? children : label })
         ]
       }
     );
@@ -10546,10 +10593,10 @@ RadioButton.displayName = "RadioButton";
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
 import {
   forwardRef as forwardRef62,
-  useId as useId20,
+  useId as useId21,
   useState as useState23
 } from "react";
-import { jsx as jsx252, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs64 } from "react/jsx-runtime";
 var RadioButtonGroupInner = (props, ref) => {
   const {
     name,
@@ -10571,7 +10618,7 @@ var RadioButtonGroupInner = (props, ref) => {
   } = props;
   const { "aria-required": ariaRequired = false } = htmlProps;
   const [groupValue, setGroupValue] = useState23(value);
-  const generatedId = useId20();
+  const generatedId = useId21();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
@@ -10591,7 +10638,7 @@ var RadioButtonGroupInner = (props, ref) => {
     value: groupValue,
     onChange: handleChange
   };
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       ...getBaseHTMLProps(
@@ -10602,7 +10649,7 @@ var RadioButtonGroupInner = (props, ref) => {
       ),
       ref,
       children: [
-        /* @__PURE__ */ jsxs63(
+        /* @__PURE__ */ jsxs64(
           Typography,
           {
             as: "span",
@@ -10611,12 +10658,12 @@ var RadioButtonGroupInner = (props, ref) => {
             children: [
               label,
               " ",
-              showRequiredMarker && /* @__PURE__ */ jsx252(RequiredMarker, {})
+              showRequiredMarker && /* @__PURE__ */ jsx253(RequiredMarker, {})
             ]
           }
         ),
         renderInputMessage(tip, tipId),
-        /* @__PURE__ */ jsx252(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx252(
+        /* @__PURE__ */ jsx253(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ jsx253(
           "div",
           {
             role: "radiogroup",
@@ -10645,7 +10692,7 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { jsx as jsx253 } from "react/jsx-runtime";
+import { jsx as jsx254 } from "react/jsx-runtime";
 var SkipToContent = forwardRef63(
   (props, ref) => {
     const {
@@ -10661,12 +10708,12 @@ var SkipToContent = forwardRef63(
       style,
       ...restHtmlProps
     } = htmlProps;
-    return /* @__PURE__ */ jsx253(
+    return /* @__PURE__ */ jsx254(
       "div",
       {
         className: cn(className, htmlPropsClassName, SkipToContent_default.wrapper),
         style: { ...style, top },
-        children: /* @__PURE__ */ jsx253(
+        children: /* @__PURE__ */ jsx254(
           Link,
           {
             ...getBaseHTMLProps(id, restHtmlProps, rest),
@@ -10694,7 +10741,7 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx254, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs65 } from "react/jsx-runtime";
 var SplitButton = forwardRef64(
   (props, ref) => {
     const {
@@ -10710,8 +10757,8 @@ var SplitButton = forwardRef64(
       purpose,
       size: size2
     };
-    return /* @__PURE__ */ jsxs64("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
-      /* @__PURE__ */ jsx254(
+    return /* @__PURE__ */ jsxs65("div", { ref, className: cn(className, SplitButton_default.container), ...rest, children: [
+      /* @__PURE__ */ jsx255(
         Button,
         {
           ...buttonStyleProps,
@@ -10720,8 +10767,8 @@ var SplitButton = forwardRef64(
           className: SplitButton_default.main
         }
       ),
-      /* @__PURE__ */ jsxs64(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
-        /* @__PURE__ */ jsx254(
+      /* @__PURE__ */ jsxs65(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
+        /* @__PURE__ */ jsx255(
           Button,
           {
             ...buttonStyleProps,
@@ -10734,7 +10781,7 @@ var SplitButton = forwardRef64(
             )
           }
         ),
-        /* @__PURE__ */ jsx254(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
+        /* @__PURE__ */ jsx255(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
       ] })
     ] });
   }
@@ -10762,10 +10809,10 @@ var useCollapsibleTableContext = () => useContext10(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 import { forwardRef as forwardRef65 } from "react";
-import { jsx as jsx255 } from "react/jsx-runtime";
+import { jsx as jsx256 } from "react/jsx-runtime";
 var Body = forwardRef65(
   (props, ref) => {
-    return /* @__PURE__ */ jsx255("tbody", { ref, ...props });
+    return /* @__PURE__ */ jsx256("tbody", { ref, ...props });
   }
 );
 Body.displayName = "Table.Body";
@@ -10781,10 +10828,10 @@ import {
   forwardRef as forwardRef66,
   useContext as useContext11
 } from "react";
-import { jsx as jsx256 } from "react/jsx-runtime";
+import { jsx as jsx257 } from "react/jsx-runtime";
 var Head = forwardRef66(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx256("thead", { ref, ...rest, children: /* @__PURE__ */ jsx256(HeadContext.Provider, { value: true, children }) });
+    return /* @__PURE__ */ jsx257("thead", { ref, ...rest, children: /* @__PURE__ */ jsx257(HeadContext.Provider, { value: true, children }) });
   }
 );
 Head.displayName = "Table.Head";
@@ -10820,7 +10867,7 @@ var Table_default = {
 };
 
 // src/components/Table/normal/Cell.tsx
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { jsx as jsx258 } from "react/jsx-runtime";
 var Cell = forwardRef67(
   ({
     children,
@@ -10834,7 +10881,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__ */ jsx257(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx257(
+    return isCollapsibleChild ? /* @__PURE__ */ jsx258(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx258(
       "th",
       {
         ref,
@@ -10844,15 +10891,15 @@ var Cell = forwardRef67(
           !isComplexLayout && Table_default[`cell--${layout}`],
           Table_default["cell--head"]
         ),
-        children: isComplexLayout ? /* @__PURE__ */ jsx257("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx258("div", { className: Table_default.cell__inner, children }) : children
       }
-    ) : /* @__PURE__ */ jsx257(
+    ) : /* @__PURE__ */ jsx258(
       "td",
       {
         ref,
         ...rest,
         className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-        children: isComplexLayout ? /* @__PURE__ */ jsx257("div", { className: Table_default.cell__inner, children }) : children
+        children: isComplexLayout ? /* @__PURE__ */ jsx258("div", { className: Table_default.cell__inner, children }) : children
       }
     );
   }
@@ -10861,22 +10908,22 @@ Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
 import { forwardRef as forwardRef68 } from "react";
-import { jsx as jsx258 } from "react/jsx-runtime";
+import { jsx as jsx259 } from "react/jsx-runtime";
 var Foot = forwardRef68(
   (props, ref) => {
-    return /* @__PURE__ */ jsx258("tfoot", { ref, ...props });
+    return /* @__PURE__ */ jsx259("tfoot", { ref, ...props });
   }
 );
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
 import { forwardRef as forwardRef69 } from "react";
-import { jsx as jsx259 } from "react/jsx-runtime";
+import { jsx as jsx260 } from "react/jsx-runtime";
 var Row = forwardRef69(
   ({ type: _type, mode = "normal", hoverable, selected, className, ...rest }, ref) => {
     const isInHeader = useIsInTableHead();
     const type = _type != null ? _type : isInHeader ? "head" : "body";
-    return /* @__PURE__ */ jsx259(
+    return /* @__PURE__ */ jsx260(
       "tr",
       {
         ref,
@@ -10900,22 +10947,22 @@ Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
 import { forwardRef as forwardRef70 } from "react";
-import { jsx as jsx260, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx261, jsxs as jsxs66 } from "react/jsx-runtime";
 var makeSortIcon = (isSorted, sortOrder) => {
   if (!isSorted || !sortOrder) {
-    return /* @__PURE__ */ jsx260(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
+    return /* @__PURE__ */ jsx261(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
   }
-  return sortOrder === "ascending" ? /* @__PURE__ */ jsx260(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx260(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
+  return sortOrder === "ascending" ? /* @__PURE__ */ jsx261(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ jsx261(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
 };
 var SortCell = forwardRef70(
-  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx260(
+  ({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ jsx261(
     Cell,
     {
       ref,
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs65(
+      children: /* @__PURE__ */ jsxs66(
         "button",
         {
           onClick,
@@ -10940,7 +10987,7 @@ SortCell.displayName = "Table.SortCell";
 
 // src/components/Table/normal/Table.tsx
 import { forwardRef as forwardRef71 } from "react";
-import { jsx as jsx261 } from "react/jsx-runtime";
+import { jsx as jsx262 } from "react/jsx-runtime";
 function getDensityCn(value) {
   switch (value) {
     case "normal":
@@ -10959,7 +11006,7 @@ var Table = forwardRef71(
     children,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx261(
+    return /* @__PURE__ */ jsx262(
       "table",
       {
         ref,
@@ -10981,7 +11028,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 jsx262 } from "react/jsx-runtime";
+import { jsx as jsx263 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
   const [overflowX, setOverflowX] = useState25(false);
   const [windowWidth, setWindowWidth] = useState25(window.innerWidth);
@@ -11003,7 +11050,7 @@ var TableWrapper = ({ className, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ jsx262(
+  return /* @__PURE__ */ jsx263(
     "div",
     {
       ref: wrapperRef,
@@ -11030,7 +11077,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment14, jsx as jsx263, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx264, jsxs as jsxs67 } from "react/jsx-runtime";
 var CollapsibleRow = forwardRef72(
   ({
     type: _type,
@@ -11072,33 +11119,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__ */ jsx263(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+      return /* @__PURE__ */ jsxs67(Fragment13, { children: [
+        /* @__PURE__ */ jsx264(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
         isValidElement9(child) && cloneElement8(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx263(Row, { ...rowProps(), children: /* @__PURE__ */ jsx263(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx263(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx264(Row, { ...rowProps(), children: /* @__PURE__ */ jsx264(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx264(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__ */ jsx263(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs66(Fragment14, { children: [
+      return /* @__PURE__ */ jsx264(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs67(Fragment14, { children: [
         definingColumnCells,
-        /* @__PURE__ */ jsxs66(Table2.Cell, { type: "head", layout: "center", children: [
+        /* @__PURE__ */ jsxs67(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
-          /* @__PURE__ */ jsx263(VisuallyHidden, { as: "span", children: "raden" })
+          /* @__PURE__ */ jsx264(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__ */ jsxs67(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
         definingColumnCells,
-        /* @__PURE__ */ jsx263(Table2.Cell, { children: /* @__PURE__ */ jsx263(
+        /* @__PURE__ */ jsx264(Table2.Cell, { children: /* @__PURE__ */ jsx264(
           "button",
           {
             onClick: () => setChildrenCollapsed(!childrenCollapsed),
@@ -11110,7 +11157,7 @@ var CollapsibleRow = forwardRef72(
               utilStyles_default["remove-button-styling"],
               focusable
             ),
-            children: /* @__PURE__ */ jsx263(
+            children: /* @__PURE__ */ jsx264(
               AnimatedChevronUpDown,
               {
                 isUp: childrenCollapsed ? false : true,
@@ -11122,20 +11169,20 @@ var CollapsibleRow = forwardRef72(
         ) })
       ] });
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs66(Fragment14, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs67(Fragment14, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ jsxs66(Fragment14, { children: [
+      type === "body" && /* @__PURE__ */ jsxs67(Fragment14, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ jsx263(Row, { ref, ...rowProps(), children });
+    ] }) : /* @__PURE__ */ jsx264(Row, { ref, ...rowProps(), children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
 import { forwardRef as forwardRef73 } from "react";
-import { jsx as jsx264 } from "react/jsx-runtime";
+import { jsx as jsx265 } from "react/jsx-runtime";
 var CollapsibleTable = forwardRef73((props, ref) => {
   const {
     isCollapsed,
@@ -11143,7 +11190,7 @@ var CollapsibleTable = forwardRef73((props, ref) => {
     definingColumnIndex = [0],
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx264(
+  return /* @__PURE__ */ jsx265(
     CollapsibleTableContext.Provider,
     {
       value: {
@@ -11151,7 +11198,7 @@ var CollapsibleTable = forwardRef73((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx264(Table2, { ref, ...rest })
+      children: /* @__PURE__ */ jsx265(Table2, { ref, ...rest })
     }
   );
 });
@@ -11165,7 +11212,7 @@ CollapsibleTable2.Row = CollapsibleRow;
 import {
   forwardRef as forwardRef74,
   useEffect as useEffect25,
-  useId as useId21,
+  useId as useId22,
   useRef as useRef29,
   useState as useState27
 } from "react";
@@ -11199,7 +11246,7 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx265 } from "react/jsx-runtime";
+import { jsx as jsx266 } from "react/jsx-runtime";
 var Tabs = forwardRef74((props, ref) => {
   const {
     id,
@@ -11212,7 +11259,7 @@ var Tabs = forwardRef74((props, ref) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId21();
+  const generatedId = useId22();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState27(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState27(false);
@@ -11231,7 +11278,7 @@ var Tabs = forwardRef74((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tabs-width"]: width
   };
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx266(
     TabsContext.Provider,
     {
       value: {
@@ -11244,7 +11291,7 @@ var Tabs = forwardRef74((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ jsx265(
+      children: /* @__PURE__ */ jsx266(
         "div",
         {
           ref,
@@ -11277,13 +11324,13 @@ import {
   useContext as useContext13,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { jsx as jsx266 } from "react/jsx-runtime";
+import { jsx as jsx267 } from "react/jsx-runtime";
 var TabContext = createContext10(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ jsx266(
+  return /* @__PURE__ */ jsx267(
     TabContext.Provider,
     {
       value: {
@@ -11315,7 +11362,7 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx267, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs68 } from "react/jsx-runtime";
 var Tab = forwardRef75((props, ref) => {
   const {
     active = false,
@@ -11355,7 +11402,7 @@ var Tab = forwardRef75((props, ref) => {
     handleSelect();
     onKeyDown && onKeyDown(e);
   };
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs68(
     "button",
     {
       ...getBaseHTMLProps(
@@ -11378,8 +11425,8 @@ var Tab = forwardRef75((props, ref) => {
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon2 && /* @__PURE__ */ jsx267(Icon, { icon: icon2, iconSize: "inherit" }),
-        /* @__PURE__ */ jsx267("span", { children })
+        icon2 && /* @__PURE__ */ jsx268(Icon, { icon: icon2, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx268("span", { children })
       ]
     }
   );
@@ -11394,7 +11441,7 @@ import {
   isValidElement as isValidElement10,
   useState as useState28
 } from "react";
-import { jsx as jsx268 } from "react/jsx-runtime";
+import { jsx as jsx269 } from "react/jsx-runtime";
 var TabList = forwardRef76(
   ({ children, id, style, onFocus, ...rest }, ref) => {
     const {
@@ -11438,7 +11485,7 @@ var TabList = forwardRef76(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ["--dds-tab-widths"]: widths.join(" ")
     };
-    return /* @__PURE__ */ jsx268(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx268(
+    return /* @__PURE__ */ jsx269(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx269(
       "div",
       {
         ...rest,
@@ -11465,10 +11512,10 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
 import { forwardRef as forwardRef77 } from "react";
-import { jsx as jsx269 } from "react/jsx-runtime";
+import { jsx as jsx270 } from "react/jsx-runtime";
 var TabPanel = forwardRef77(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx269(
+    return /* @__PURE__ */ jsx270(
       "div",
       {
         ...getBaseHTMLProps(
@@ -11499,7 +11546,7 @@ import {
   forwardRef as forwardRef78,
   isValidElement as isValidElement11
 } from "react";
-import { jsx as jsx270 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
 var TabPanels = forwardRef78(
   ({ children, ...rest }, ref) => {
     const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
@@ -11513,7 +11560,7 @@ var TabPanels = forwardRef78(
         "aria-expanded": active
       });
     });
-    return /* @__PURE__ */ jsx270("div", { ref: combinedRef, ...rest, children: panelChildren });
+    return /* @__PURE__ */ jsx271("div", { ref: combinedRef, ...rest, children: panelChildren });
   }
 );
 TabPanels.displayName = "TabPanels";
@@ -11538,7 +11585,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx271, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs69 } from "react/jsx-runtime";
 var purposeVariants3 = {
   info: {
     icon: InfoIcon
@@ -11569,7 +11616,7 @@ var Tag = forwardRef79((props, ref) => {
     ...rest
   } = props;
   const icon2 = purposeVariants3[purpose].icon;
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs69(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -11586,8 +11633,8 @@ var Tag = forwardRef79((props, ref) => {
       ),
       ref,
       children: [
-        withIcon && icon2 && /* @__PURE__ */ jsx271(Icon, { icon: icon2, iconSize: "small" }),
-        /* @__PURE__ */ jsx271(TextOverflowEllipsisInner, { children: children != null ? children : text })
+        withIcon && icon2 && /* @__PURE__ */ jsx272(Icon, { icon: icon2, iconSize: "small" }),
+        /* @__PURE__ */ jsx272(TextOverflowEllipsisInner, { children: children != null ? children : text })
       ]
     }
   );
@@ -11604,9 +11651,6 @@ import {
   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",
@@ -11627,40 +11671,11 @@ var TextInput_default = {
   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 jsx272, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs70 } from "react/jsx-runtime";
 var TextInput = forwardRef80(
   ({
     label,
@@ -11716,7 +11731,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"
@@ -11759,7 +11773,7 @@ var TextInput = forwardRef80(
           className: cn(TextInput_default["input-width"], Input_default["input-group"]),
           style: styleVariables,
           children: [
-            /* @__PURE__ */ jsx272(
+            /* @__PURE__ */ jsx273(
               Icon,
               {
                 icon: icon2,
@@ -11767,7 +11781,7 @@ var TextInput = forwardRef80(
                 className: cn(TextInput_default.icon, TextInput_default[`icon--${componentSize}`])
               }
             ),
-            /* @__PURE__ */ jsx272(
+            /* @__PURE__ */ jsx273(
               StatefulInput,
               {
                 ref,
@@ -11788,7 +11802,7 @@ var TextInput = forwardRef80(
           className: cn(TextInput_default["affix-container"], TextInput_default["input-width"]),
           style: styleVariables,
           children: [
-            prefix3 && /* @__PURE__ */ jsx272(
+            prefix3 && /* @__PURE__ */ jsx273(
               "span",
               {
                 ref: prefixRef,
@@ -11801,7 +11815,7 @@ var TextInput = forwardRef80(
                 children: prefix3
               }
             ),
-            /* @__PURE__ */ jsx272(
+            /* @__PURE__ */ jsx273(
               StatefulInput,
               {
                 ref,
@@ -11815,7 +11829,7 @@ var TextInput = forwardRef80(
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx272(
+            suffix && /* @__PURE__ */ jsx273(
               "span",
               {
                 ref: suffixRef,
@@ -11842,7 +11856,7 @@ var TextInput = forwardRef80(
         ),
         style,
         children: [
-          hasLabel && /* @__PURE__ */ jsx272(
+          hasLabel && /* @__PURE__ */ jsx273(
             Label,
             {
               htmlFor: uniqueId,
@@ -11851,7 +11865,7 @@ var TextInput = forwardRef80(
               children: label
             }
           ),
-          extendedInput ? extendedInput : /* @__PURE__ */ jsx272(
+          extendedInput ? extendedInput : /* @__PURE__ */ jsx273(
             StatefulInput,
             {
               ref,
@@ -11865,13 +11879,11 @@ var TextInput = forwardRef80(
           ),
           hasMessage && /* @__PURE__ */ jsxs70("div", { className: TextInput_default["message-container"], children: [
             renderInputMessage(tip, tipId, errorMessage, errorMessageId),
-            hasCharCounter && /* @__PURE__ */ jsx272(
-              CharCounter_default,
-              {
-                id: characterCounterId,
-                current: text.length,
-                max: maxLength
-              }
+            renderCharCounter(
+              characterCounterId,
+              withCharacterCounter,
+              text.length,
+              maxLength
             )
           ] })
         ]
@@ -11908,7 +11920,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx273, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx274, jsxs as jsxs71 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -11931,7 +11943,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx273(
+  return /* @__PURE__ */ jsx274(
     ToggleBarContext.Provider,
     {
       value: {
@@ -11953,8 +11965,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx273(Label, { id: labelId, children: label }),
-            /* @__PURE__ */ jsx273("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx274(Label, { id: labelId, children: label }),
+            /* @__PURE__ */ jsx274("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -11968,7 +11980,7 @@ import {
   forwardRef as forwardRef81,
   useId as useId25
 } from "react";
-import { jsx as jsx274, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx275, jsxs as jsxs72 } from "react/jsx-runtime";
 var typographyTypes5 = {
   large: "bodySans04",
   medium: "bodySans02",
@@ -12010,7 +12022,7 @@ var ToggleRadio = forwardRef81(
     };
     const contentTypeCn = label ? "with-text" : "just-icon";
     return /* @__PURE__ */ jsxs72("label", { htmlFor: uniqueId, className: ToggleBar_default.label, children: [
-      /* @__PURE__ */ jsx274(
+      /* @__PURE__ */ jsx275(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12044,8 +12056,8 @@ var ToggleRadio = forwardRef81(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx274(Icon, { icon: icon2, iconSize: "inherit" }),
-            label && /* @__PURE__ */ jsx274("span", { children: label })
+            icon2 && /* @__PURE__ */ jsx275(Icon, { icon: icon2, iconSize: "inherit" }),
+            label && /* @__PURE__ */ jsx275("span", { children: label })
           ]
         }
       )
@@ -12068,13 +12080,13 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx275, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs73 } from "react/jsx-runtime";
 var ToggleButton = forwardRef82(
   ({ id, label, icon: icon2, className, htmlProps, ...rest }, ref) => {
     const generatedId = useId26();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
     return /* @__PURE__ */ jsxs73("label", { htmlFor: uniqueId, className: ToggleButton_default.container, children: [
-      /* @__PURE__ */ jsx275(
+      /* @__PURE__ */ jsx276(
         "input",
         {
           ...getBaseHTMLProps(
@@ -12100,7 +12112,7 @@ var ToggleButton = forwardRef82(
             focus_default["focus-styled-sibling"]
           ),
           children: [
-            icon2 && /* @__PURE__ */ jsx275(Icon, { icon: icon2, iconSize: "inherit" }),
+            icon2 && /* @__PURE__ */ jsx276(Icon, { icon: icon2, iconSize: "inherit" }),
             " ",
             label
           ]
@@ -12113,7 +12125,7 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 import { useId as useId27 } from "react";
-import { jsx as jsx276, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx277, jsxs as jsxs74 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -12139,7 +12151,7 @@ var ToggleButtonGroup = (props) => {
       role: "group",
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
-        !!label && /* @__PURE__ */ jsx276(
+        !!label && /* @__PURE__ */ jsx277(
           Typography,
           {
             as: "span",
@@ -12148,7 +12160,7 @@ var ToggleButtonGroup = (props) => {
             children: label
           }
         ),
-        /* @__PURE__ */ jsx276("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
+        /* @__PURE__ */ jsx277("div", { className: cn(ToggleButton_default.group, ToggleButton_default[`group--${direction}`]), children })
       ]
     }
   );
@@ -12189,6 +12201,7 @@ export {
   CardAccordionBody,
   CardAccordionHeader,
   CaringIcon,
+  CharCounter,
   ChatIcon,
   CheckCircledIcon,
   CheckIcon,
@@ -12457,6 +12470,7 @@ export {
   purposeVariants,
   removeButtonStyling,
   removeListStyling,
+  renderCharCounter,
   renderInputMessage,
   scrollbarStyling,
   selection,