@norges-domstoler/dds-components 22.11.0 → 23.0.0

package/dist/index.mjs

@@ -13,9 +13,7 @@ var typographyStyles_default = {
   "a--nested__parent": "typographyStyles_a--nested__parent",
   "a--nested__child": "typographyStyles_a--nested__child",
   "a--margins": "typographyStyles_a--margins",
-  "a--external": "typographyStyles_a--external",
-  svg: "typographyStyles_svg",
-  a__icon: "typographyStyles_a__icon",
+  "a--with-icon": "typographyStyles_a--with-icon",
   "a--visited": "typographyStyles_a--visited",
   "body-short-xsmall": "typographyStyles_body-short-xsmall",
   "body-short-xsmall--margins": "typographyStyles_body-short-xsmall--margins",
@@ -348,6 +346,21 @@ var TEXT_COLORS = [
   "icon-subtle",
   "icon-medium"
 ];
+var ICON_COLORS = [
+  ...TEXT_COLORS,
+  "brand-primary-default",
+  "brand-primary-strong",
+  "brand-primary-medium",
+  "brand-primary-subtle",
+  "brand-secondary-default",
+  "brand-secondary-strong",
+  "brand-secondary-medium",
+  "brand-secondary-subtle",
+  "brand-tertiary-default",
+  "brand-tertiary-strong",
+  "brand-tertiary-medium",
+  "brand-tertiary-subtle"
+];
 var TEXT_COLOR_VALUES = TEXT_COLORS.reduce(
   (acc, key) => {
     acc[key] = `var(--dds-color-${key})`;
@@ -355,6 +368,13 @@ var TEXT_COLOR_VALUES = TEXT_COLORS.reduce(
   },
   {}
 );
+var ICON_COLOR_VALUES = ICON_COLORS.reduce(
+  (acc, key) => {
+    acc[key] = `var(--dds-color-${key})`;
+    return acc;
+  },
+  {}
+);
 var isTextColor = (value) => {
   return typeof value === "string" && TEXT_COLORS.includes(value);
 };
@@ -362,6 +382,13 @@ var getTextColor = (color) => {
   if (isTextColor(color)) return TEXT_COLOR_VALUES[color];
   return color;
 };
+var isIconColor = (value) => {
+  return typeof value === "string" && ICON_COLORS.includes(value);
+};
+var getIconColor = (color) => {
+  if (isIconColor(color)) return ICON_COLOR_VALUES[color];
+  return color;
+};
 
 // src/utils/combineHandlers.tsx
 var combineHandlers = (handler1, handler2) => {
@@ -552,7 +579,7 @@ import { useEffect as useEffect5 } from "react";
 function useOnClickOutside(element, handler) {
   useEffect5(() => {
     const listener = (event) => {
-      const elements = Array.isArray(element) ? element : [element].filter(Boolean);
+      const elements = Array.isArray(element) ? element.map((ref) => ref == null ? void 0 : ref.current).filter((el) => Boolean(el)) : (element == null ? void 0 : element.current) ? [element.current] : [];
       const hasClickedInside = elements.some(
         (el) => el == null ? void 0 : el.contains(event.target)
       );
@@ -1052,6 +1079,7 @@ var layout_default = {
   "dds-a-i": "layout_dds-a-i",
   "dds-a-c": "layout_dds-a-c",
   "dds-j-i": "layout_dds-j-i",
+  "dds-pl-i": "layout_dds-pl-i",
   "dds-j-c": "layout_dds-j-c",
   "dds-wrap": "layout_dds-wrap",
   "dds-basis": "layout_dds-basis",
@@ -1220,6 +1248,7 @@ var Box = ({
   alignItems,
   alignContent,
   justifyItems,
+  placeItems,
   justifyContent,
   flexWrap,
   flexBasis,
@@ -1258,6 +1287,7 @@ var Box = ({
     ...getResponsiveCSSProperties(alignItems, "r", "a-i"),
     ...getResponsiveCSSProperties(alignContent, "r", "a-c"),
     ...getResponsiveCSSProperties(justifyItems, "r", "j-i"),
+    ...getResponsiveCSSProperties(placeItems, "r", "pl-i"),
     ...getResponsiveCSSProperties(justifyContent, "r", "j-c"),
     ...getResponsiveCSSProperties(flexWrap, "r", "wrap"),
     ...getResponsiveCSSProperties(flexBasis, "r", "basis"),
@@ -1301,6 +1331,7 @@ var Box = ({
           alignItems && layout_default["dds-a-i"],
           justifyContent && layout_default["dds-j-c"],
           justifyItems && layout_default["dds-j-i"],
+          placeItems && layout_default["dds-pl-i"],
           flexWrap && layout_default["dds-wrap"],
           flexBasis && layout_default["dds-basis"],
           flexFlow && layout_default["dds-flow"],
@@ -1619,7 +1650,42 @@ var commonTexts = createTexts({
     nn: "Innlastning p\xE5g\xE5r",
     en: "Loading",
     se: "Vie\u017E\u017Eamin"
-  }
+  },
+  nextPage: {
+    nb: "Neste side",
+    no: "Neste side",
+    nn: "Neste side",
+    en: "Next page",
+    se: "Boahte siidu"
+  },
+  previousPage: {
+    nb: "Forrige side",
+    no: "Forrige side",
+    nn: "F\xF8rre side",
+    en: "Previous page",
+    se: "Ovddit siidu"
+  },
+  page: (page) => ({
+    nb: `Side ${page}`,
+    no: `Side ${page}`,
+    nn: `Side ${page}`,
+    en: `Page ${page}`,
+    se: `Siidu ${page}`
+  }),
+  currentPage: (page) => ({
+    nb: `N\xE5v\xE6rende side (${page})`,
+    no: `N\xE5v\xE6rende side (${page})`,
+    nn: `Noverande side (${page})`,
+    en: `Current page (${page})`,
+    se: `D\xE1la siidu (${page})`
+  }),
+  pageOf: (current, max) => ({
+    nb: `Side ${current} av ${max}`,
+    no: `Side ${current} av ${max}`,
+    nn: `Side ${current} ${max}`,
+    en: `Page ${current} of ${max}`,
+    se: `Siidu ${current} ${max}`
+  })
 });
 
 // src/components/Spinner/Spinner.tsx
@@ -2078,7 +2144,7 @@ function SvgWrapper({
     "svg",
     {
       ...props,
-      fill: getTextColor(fill),
+      fill: getIconColor(fill),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: `0 0 ${size} ${size}`,
       className: cn(className, Icon_default.svg),
@@ -3823,7 +3889,7 @@ var getColorCn = (color) => {
 };
 
 // src/components/Typography/Typography/Typography.tsx
-import { jsx as jsx197, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx197 } from "react/jsx-runtime";
 var isAnchorProps = (props) => props.typographyType === "a";
 var Typography = (props) => {
   const {
@@ -3844,15 +3910,10 @@ var Typography = (props) => {
   const as = propAs ? propAs : getElementType(typographyType);
   const typographyCn = getTypographyCn(typographyType);
   let relProp;
-  let targetProp;
-  let externalLinkProp;
   if (isAnchorProps(props)) {
-    const { externalLink, target } = props;
     relProp = as === "a" ? "noopener noreferer" : void 0;
-    targetProp = as !== "a" ? void 0 : externalLink ? "_blank" : target;
-    externalLinkProp = as === "a" && externalLink ? externalLink : void 0;
   }
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsx197(
     Box,
     {
       ...getBaseHTMLProps(
@@ -3861,7 +3922,6 @@ var Typography = (props) => {
           className,
           getColorCn(color),
           Typography_default.container,
-          externalLinkProp && typographyStyles_default["a--external"],
           typographyStyles_default[typographyCn],
           withMargins && typographyStyles_default[`${typographyCn}--margins`],
           isLegend(as) && typographyStyles_default.legend,
@@ -3881,11 +3941,7 @@ var Typography = (props) => {
       ),
       as,
       rel: relProp,
-      target: targetProp,
-      children: [
-        children,
-        externalLinkProp && /* @__PURE__ */ jsx197(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
-      ]
+      children
     }
   );
 };
@@ -3977,7 +4033,7 @@ var Label_default = {
 };
 
 // src/components/Typography/Label/Label.tsx
-import { Fragment, jsx as jsx200, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx200, jsxs as jsxs70 } from "react/jsx-runtime";
 var Label = ({
   showRequiredStyling,
   readOnly,
@@ -3989,7 +4045,7 @@ var Label = ({
   afterLabelContent,
   ...rest
 }) => {
-  const content = /* @__PURE__ */ jsxs71(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs70(Fragment, { children: [
     readOnly && /* @__PURE__ */ jsx200(
       Icon,
       {
@@ -4010,7 +4066,7 @@ var Label = ({
       rest
     )
   };
-  const render = afterLabelContent ? /* @__PURE__ */ jsxs71(
+  const render = afterLabelContent ? /* @__PURE__ */ jsxs70(
     Typography,
     {
       typographyType: "labelMedium",
@@ -4068,7 +4124,7 @@ var Legend = ({
 Legend.displayName = "Legend";
 
 // src/components/Typography/Link/Link.tsx
-import { jsx as jsx202, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var Link = ({
   id,
   className,
@@ -4077,21 +4133,19 @@ var Link = ({
   typographyType,
   withMargins,
   withVisited,
-  external,
-  target,
   style,
   color,
   as: propAs,
   isAnchor: propIsAnchor,
+  withIconStyling,
   ...rest
 }) => {
   const as = propAs ? propAs : "a";
   const isAnchor = as === "a" || propIsAnchor;
   const aProps = isAnchor ? {
-    rel: "noopener noreferrer",
-    target: external ? "_blank" : target
+    rel: "noopener noreferrer"
   } : {};
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsx202(
     ElementAs,
     {
       as,
@@ -4100,7 +4154,7 @@ var Link = ({
         cn(
           className,
           typographyStyles_default.a,
-          external && typographyStyles_default["a--external"],
+          withIconStyling && typographyStyles_default["a--with-icon"],
           withVisited && typographyStyles_default["a--visited"],
           typographyType && typographyStyles_default[getTypographyCn(typographyType)],
           typographyType && withMargins && typographyStyles_default[`${getTypographyCn(typographyType)}--margins`],
@@ -4115,17 +4169,7 @@ var Link = ({
         rest
       ),
       ...aProps,
-      children: [
-        children,
-        external && /* @__PURE__ */ jsx202(
-          Icon,
-          {
-            iconSize: "inherit",
-            icon: OpenExternalIcon,
-            className: typographyStyles_default.svg
-          }
-        )
-      ]
+      children
     }
   );
 };
@@ -4154,7 +4198,7 @@ var Paragraph = ({
 Paragraph.displayName = "Paragraph";
 
 // src/components/Accordion/AccordionHeader.tsx
-import { jsx as jsx204, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx204, jsxs as jsxs71 } from "react/jsx-runtime";
 var AccordionHeader = ({
   children,
   className,
@@ -4185,7 +4229,7 @@ var AccordionHeader = ({
         rest
       ),
       ...restHeaderProps,
-      children: /* @__PURE__ */ jsxs73(
+      children: /* @__PURE__ */ jsxs71(
         "div",
         {
           className: cn(
@@ -4252,7 +4296,7 @@ var BackLink_default = {
 };
 
 // src/components/BackLink/BackLink.tsx
-import { jsx as jsx206, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs72 } from "react/jsx-runtime";
 var BackLink = ({ label, ref, as = "a", ...rest }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx206(
@@ -4261,7 +4305,7 @@ var BackLink = ({ label, ref, as = "a", ...rest }) => {
       ref,
       "aria-label": t(texts.goBack),
       className: typographyStyles_default["body-short-medium"],
-      children: /* @__PURE__ */ jsxs74(
+      children: /* @__PURE__ */ jsxs72(
         HStack,
         {
           as,
@@ -4353,7 +4397,7 @@ var ButtonGroupContext = createContext4({});
 var useButtonGroupContext = () => useContext4(ButtonGroupContext);
 
 // src/components/Button/Button.tsx
-import { Fragment as Fragment2, jsx as jsx208, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx208, jsxs as jsxs73 } from "react/jsx-runtime";
 var Button = ({
   as: propAs,
   children,
@@ -4408,8 +4452,8 @@ var Button = ({
       iconState
     }
   );
-  const content = /* @__PURE__ */ jsxs75(Fragment2, { children: [
-    hasLabel && /* @__PURE__ */ jsxs75(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs73(Fragment2, { children: [
+    hasLabel && /* @__PURE__ */ jsxs73(Fragment2, { children: [
       iconPosition === "left" && iconElement,
       /* @__PURE__ */ jsx208("span", { "aria-hidden": loading, className: cn(loading && invisible), children }),
       iconPosition === "right" && iconElement
@@ -4707,7 +4751,7 @@ var VisuallyHidden = ({
 VisuallyHidden.displayName = "VisuallyHidden";
 
 // src/components/Toggle/Toggle.tsx
-import { Fragment as Fragment3, jsx as jsx214, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx214, jsxs as jsxs74 } from "react/jsx-runtime";
 var TOGGLE_SIZES = createSizes("medium", "large");
 var Toggle = ({
   id,
@@ -4735,7 +4779,7 @@ var Toggle = ({
     onChange
   });
   const isColorScheme = variant === "colorScheme";
-  const marker = isColorScheme ? /* @__PURE__ */ jsxs76(Fragment3, { children: [
+  const marker = isColorScheme ? /* @__PURE__ */ jsxs74(Fragment3, { children: [
     /* @__PURE__ */ jsx214(
       Icon,
       {
@@ -4754,7 +4798,7 @@ var Toggle = ({
     )
   ] }) : /* @__PURE__ */ jsx214(Icon, { className: Toggle_default.checkmark, icon: CheckIcon, iconSize });
   console.log("disabled", disabled);
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs74(
     "label",
     {
       htmlFor: uniqueId,
@@ -4793,7 +4837,7 @@ var Toggle = ({
           }
         ),
         /* @__PURE__ */ jsx214("span", { className: cn(Toggle_default.track, focus_default["focus-styled-sibling"]), children: /* @__PURE__ */ jsx214("span", { className: Toggle_default.thumb, children: isLoading ? /* @__PURE__ */ jsx214(Spinner, { size: `var(--dds-size-icon-${size2})` }) : marker }) }),
-        /* @__PURE__ */ jsxs76("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
+        /* @__PURE__ */ jsxs74("span", { className: cn(readOnly && Toggle_default["labeltext--readonly"]), children: [
           readOnly && /* @__PURE__ */ jsx214(
             Icon,
             {
@@ -4957,7 +5001,7 @@ var OverflowMenuGroup = ({
     if (isOpen) onClose == null ? void 0 : onClose();
     toggle();
   };
-  useOnClickOutside([menuRef.current, buttonRef.current], () => {
+  useOnClickOutside([menuRef, buttonRef], () => {
     handleClose();
   });
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -4996,7 +5040,7 @@ var OverflowMenuGroup = ({
 OverflowMenuGroup.displayName = "OverflowMenuGroup";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Fragment as Fragment4, jsx as jsx222, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx222, jsxs as jsxs75 } from "react/jsx-runtime";
 var Breadcrumbs = ({
   children,
   smallScreenBreakpoint,
@@ -5023,7 +5067,7 @@ var Breadcrumbs = ({
     padding: "x0"
   };
   const bChildren = childrenArray.map((item, index) => {
-    return /* @__PURE__ */ jsxs77(
+    return /* @__PURE__ */ jsxs75(
       HStack,
       {
         ...responsiveLiProps,
@@ -5044,11 +5088,11 @@ var Breadcrumbs = ({
         return /* @__PURE__ */ jsx222(OverflowMenuSpan, { children: item.props.children }, index);
     }
   }) : [];
-  const bChildrenSmallScreen = /* @__PURE__ */ jsxs77(Fragment4, { children: [
+  const bChildrenSmallScreen = /* @__PURE__ */ jsxs75(Fragment4, { children: [
     /* @__PURE__ */ jsx222(HStack, { ...responsiveLiProps, children: childrenArray[0] }),
-    bChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs77(HStack, { ...responsiveLiProps, children: [
+    bChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs75(HStack, { ...responsiveLiProps, children: [
       chevronIcon,
-      /* @__PURE__ */ jsxs77(OverflowMenuGroup, { children: [
+      /* @__PURE__ */ jsxs75(OverflowMenuGroup, { children: [
         /* @__PURE__ */ jsx222(
           Button,
           {
@@ -5061,7 +5105,7 @@ var Breadcrumbs = ({
         /* @__PURE__ */ jsx222(OverflowMenu, { portal: false, children: /* @__PURE__ */ jsx222(OverflowMenuList, { children: bChildrenTruncated }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs77(HStack, { ...responsiveLiProps, children: [
+    /* @__PURE__ */ jsxs75(HStack, { ...responsiveLiProps, children: [
       chevronIcon,
       childrenArray[childrenArray.length - 1]
     ] })
@@ -5073,7 +5117,7 @@ var Breadcrumbs = ({
     alignItems: "center",
     gap: "x0.5"
   };
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs75(
     "nav",
     {
       ...getBaseHTMLProps(
@@ -5272,7 +5316,7 @@ var CardExpandable = ({
 CardExpandable.displayName = "CardExpandable";
 
 // src/components/Card/CardExpandable/CardExpandableHeader.tsx
-import { jsx as jsx226, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx226, jsxs as jsxs76 } from "react/jsx-runtime";
 var CardExpandableHeader = ({
   children,
   className,
@@ -5316,7 +5360,7 @@ var CardExpandableHeader = ({
             typographyStyles_default[getTypographyCn(typographyType)],
             bold && typographyStyles_default.bold
           ),
-          children: /* @__PURE__ */ jsxs78("div", { className: (AccordionBase_default.header__content, CardExpandable_default.header__content), children: [
+          children: /* @__PURE__ */ jsxs76("div", { className: (AccordionBase_default.header__content, CardExpandable_default.header__content), children: [
             children,
             /* @__PURE__ */ jsx226(
               Icon,
@@ -5401,7 +5445,7 @@ var SelectionControl_default = {
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-import { jsx as jsx228, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx228, jsxs as jsxs77 } from "react/jsx-runtime";
 var SelectionControl = ({
   controlType,
   className,
@@ -5453,7 +5497,7 @@ var renderGroupLabel = ({
 }) => {
   const hasLabel = !!label;
   if (hasLabel)
-    return /* @__PURE__ */ jsxs79(
+    return /* @__PURE__ */ jsxs77(
       Typography,
       {
         as: "span",
@@ -5487,7 +5531,7 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { jsx as jsx229, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs78 } from "react/jsx-runtime";
 var Checkbox = ({
   id,
   name,
@@ -5511,7 +5555,7 @@ var Checkbox = ({
   const isReadOnly = readOnly || (checkboxGroup == null ? void 0 : checkboxGroup.readOnly);
   const hasError = error || (checkboxGroup == null ? void 0 : checkboxGroup.error);
   const isDisabled = disabled || (checkboxGroup == null ? void 0 : checkboxGroup.disabled);
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs78(
     Label2,
     {
       disabled: isDisabled,
@@ -5576,7 +5620,7 @@ function convertBooleanishToBoolean(value) {
 }
 
 // src/components/InputMessage/InputMessage.tsx
-import { Fragment as Fragment5, jsx as jsx230, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx230, jsxs as jsxs79 } from "react/jsx-runtime";
 var InputMessage = ({
   messageType,
   id,
@@ -5598,7 +5642,7 @@ var InputMessage = ({
     as: "span",
     children
   };
-  return isError ? /* @__PURE__ */ jsxs81(
+  return isError ? /* @__PURE__ */ jsxs79(
     Paper,
     {
       ...commonProps,
@@ -5635,7 +5679,7 @@ var renderInputMessage = ({
   errorMessage,
   errorMessageId,
   noSpacing
-}) => /* @__PURE__ */ jsxs81(Fragment5, { children: [
+}) => /* @__PURE__ */ jsxs79(Fragment5, { children: [
   errorMessage && /* @__PURE__ */ jsx230(
     InputMessage,
     {
@@ -5649,7 +5693,7 @@ var renderInputMessage = ({
 ] });
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx231, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs80 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
     label,
@@ -5682,7 +5726,7 @@ var CheckboxGroup = (props) => {
     disabled,
     readOnly
   };
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs80(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5728,7 +5772,7 @@ var useRadioButtonGroup = () => {
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-import { jsx as jsx232, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx232, jsxs as jsxs81 } from "react/jsx-runtime";
 var getIsChecked = ({
   value,
   groupValue,
@@ -5783,7 +5827,7 @@ var RadioButton = ({
     groupValue: radioButtonGroup == null ? void 0 : radioButtonGroup.value,
     checked
   });
-  return /* @__PURE__ */ jsxs83(
+  return /* @__PURE__ */ jsxs81(
     Label2,
     {
       disabled: isDisabled,
@@ -5832,7 +5876,7 @@ RadioButton.displayName = "RadioButton";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
 import { useId as useId8 } from "react";
-import { jsx as jsx233, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx233, jsxs as jsxs82 } from "react/jsx-runtime";
 var RadioButtonGroup = ({
   name,
   label,
@@ -5876,7 +5920,7 @@ var RadioButtonGroup = ({
     value: groupValue,
     onChange: handleChange
   };
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs82(
     "div",
     {
       ...getBaseHTMLProps(
@@ -5994,7 +6038,7 @@ CardSelectable.displayName = "CardSelectable";
 
 // src/components/Card/CardSelectionControl/CardSelectableGroup.tsx
 import { useId as useId9 } from "react";
-import { jsx as jsx235, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx235, jsxs as jsxs83 } from "react/jsx-runtime";
 var CardSelectableGroup = ({
   name,
   cardType,
@@ -6057,7 +6101,7 @@ var CardSelectableGroup = ({
       children: /* @__PURE__ */ jsx235(CardSelectableContext, { value: generalContextProps, children: cardType === "radio" ? /* @__PURE__ */ jsx235(RadioButtonGroupContext, { value: contextProps, children }) : cardType === "checkbox" ? /* @__PURE__ */ jsx235(CheckboxGroupContext, { value: contextProps, children }) : null })
     }
   );
-  return hasErrorMessage ? /* @__PURE__ */ jsxs85("div", { children: [
+  return hasErrorMessage ? /* @__PURE__ */ jsxs83("div", { children: [
     mainContent,
     renderInputMessage({ errorMessage, errorMessageId })
   ] }) : mainContent;
@@ -6096,7 +6140,7 @@ var InlineIconButton = ({
 InlineIconButton.displayName = "InlineIconButton";
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx237, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx237, jsxs as jsxs84 } from "react/jsx-runtime";
 var Chip = ({
   children,
   onClose,
@@ -6113,7 +6157,7 @@ var Chip = ({
     setIsOpen(false);
     onClose == null ? void 0 : onClose();
   };
-  return isOpen ? /* @__PURE__ */ jsxs86(
+  return isOpen ? /* @__PURE__ */ jsxs84(
     Box,
     {
       display: "inline-flex",
@@ -6173,7 +6217,7 @@ var CookieBanner_default = {
 };
 
 // src/components/CookieBanner/CookieBannerCheckbox.tsx
-import { jsx as jsx239, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs85 } from "react/jsx-runtime";
 function CookieBannerCheckbox({
   headerText,
   description,
@@ -6193,7 +6237,7 @@ function CookieBannerCheckbox({
         htmlProps,
         rest
       ),
-      children: /* @__PURE__ */ jsxs87(VStack, { gap: "x0.5", children: [
+      children: /* @__PURE__ */ jsxs85(VStack, { gap: "x0.5", children: [
         /* @__PURE__ */ jsx239(Typography, { as: "span", typographyType: "headingSmall", children: headerText }),
         /* @__PURE__ */ jsx239(Typography, { as: "span", typographyType: "bodyLongSmall", children: description })
       ] })
@@ -6203,7 +6247,7 @@ function CookieBannerCheckbox({
 CookieBannerCheckbox.displayName = "CookieBannerCheckbox";
 
 // src/components/CookieBanner/CookieBanner.tsx
-import { jsx as jsx240, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs86 } from "react/jsx-runtime";
 import { createElement } from "react";
 function CookieBanner({
   headerText,
@@ -6254,8 +6298,8 @@ function CookieBanner({
       border: "border-default",
       background: "brand-tertiary-medium",
       elevation: "large",
-      children: /* @__PURE__ */ jsxs88(VStack, { maxWidth: "70ch", gap: "x1", children: [
-        hasBp && isCollapsedOnBreakpoint ? /* @__PURE__ */ jsxs88(HStack, { alignItems: "center", justifyContent: "space-between", gap: "x1", children: [
+      children: /* @__PURE__ */ jsxs86(VStack, { maxWidth: "70ch", gap: "x1", children: [
+        hasBp && isCollapsedOnBreakpoint ? /* @__PURE__ */ jsxs86(HStack, { alignItems: "center", justifyContent: "space-between", gap: "x1", children: [
           heading,
           /* @__PURE__ */ jsx240(
             ShowHide,
@@ -6270,7 +6314,7 @@ function CookieBanner({
             }
           )
         ] }) : heading,
-        /* @__PURE__ */ jsxs88(
+        /* @__PURE__ */ jsxs86(
           VStack,
           {
             gap: "x1",
@@ -6460,7 +6504,7 @@ import {
   useRef as useRef13
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx242, jsxs as jsxs89 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx242, jsxs as jsxs87 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext9({
   anchorRef: null,
   closeButtonRef: null,
@@ -6512,7 +6556,7 @@ var CalendarPopoverContent = ({
   const hasTransitionedIn = useMountTransition(isOpen, 500);
   const isMounted = isOpen && hasTransitionedIn;
   const combinedRef = useCombinedRef(refs.setFloating, ref);
-  useOnClickOutside([ref.current, modalRef.current], onClose);
+  useOnClickOutside([ref, modalRef], onClose);
   useEffect18(() => {
     var _a;
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
@@ -6540,9 +6584,9 @@ var CalendarPopoverContent = ({
     border: "border-default",
     padding: "x0.75"
   };
-  return /* @__PURE__ */ jsxs89(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs87(Fragment6, { children: [
     portalTarget && hasBreakpoint && createPortal2(
-      /* @__PURE__ */ jsx242(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx242(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs89(
+      /* @__PURE__ */ jsx242(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx242(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs87(
         Paper,
         {
           ref: modalRef,
@@ -6582,7 +6626,7 @@ var CalendarPopoverContent = ({
 };
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
-import { jsx as jsx243, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs88 } from "react/jsx-runtime";
 function CalendarGrid({ state, ...props }) {
   const { t } = useTranslation();
   const { locale } = useLocale();
@@ -6606,7 +6650,7 @@ function CalendarGrid({ state, ...props }) {
     typographyStyles_default["text-color--subtle"],
     DateInput_default.calendar__th
   );
-  return /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs88(
     "table",
     {
       ...gridProps,
@@ -6619,12 +6663,12 @@ function CalendarGrid({ state, ...props }) {
       cellPadding: "0",
       className: typographyStyles_default["body-short-xsmall"],
       children: [
-        /* @__PURE__ */ jsx243("thead", { ...headerProps, children: /* @__PURE__ */ jsxs90("tr", { children: [
-          showWeekNumbers && /* @__PURE__ */ jsxs90("th", { className: cn(thCn), children: [
+        /* @__PURE__ */ jsx243("thead", { ...headerProps, children: /* @__PURE__ */ jsxs88("tr", { children: [
+          showWeekNumbers && /* @__PURE__ */ jsxs88("th", { className: cn(thCn), children: [
             /* @__PURE__ */ jsx243("span", { "aria-hidden": true, children: "#" }),
             /* @__PURE__ */ jsx243(VisuallyHidden, { children: t(texts6.weekNumber) })
           ] }),
-          weekDays.map((day, index) => /* @__PURE__ */ jsxs90("th", { className: thCn, children: [
+          weekDays.map((day, index) => /* @__PURE__ */ jsxs88("th", { className: thCn, children: [
             /* @__PURE__ */ jsx243("span", { "aria-hidden": true, children: day.short }),
             /* @__PURE__ */ jsx243(VisuallyHidden, { children: day.full })
           ] }, index))
@@ -6633,7 +6677,7 @@ function CalendarGrid({ state, ...props }) {
           const datesInWeek = state.getDatesInWeek(weekIndex);
           const firstExistingDay = datesInWeek.find(Boolean);
           const weekNumber = firstExistingDay ? getWeekNumber(firstExistingDay) : "";
-          return /* @__PURE__ */ jsxs90("tr", { children: [
+          return /* @__PURE__ */ jsxs88("tr", { children: [
             showWeekNumbers && /* @__PURE__ */ jsx243("td", { className: cn(thCn, DateInput_default["calendar__week-number"]), children: weekNumber }),
             datesInWeek.map(
               (date, i) => date ? /* @__PURE__ */ jsx243(
@@ -6762,7 +6806,7 @@ var texts6 = createTexts({
 });
 
 // src/components/date-inputs/DatePicker/Calendar/Calendar.tsx
-import { jsx as jsx244, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs89 } from "react/jsx-runtime";
 function createCalendar(identifier) {
   switch (identifier) {
     case "gregory":
@@ -6794,8 +6838,8 @@ function Calendar(props) {
       }
     }
   };
-  return /* @__PURE__ */ jsxs91(VStack, { ...calendarProps, gap: "x0.25", height: "337px", children: [
-    /* @__PURE__ */ jsxs91(HStack, { justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs89(VStack, { ...calendarProps, gap: "x0.25", height: "337px", children: [
+    /* @__PURE__ */ jsxs89(HStack, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx244(
         Button,
         {
@@ -6996,7 +7040,7 @@ var texts8 = createTexts({
 // src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
 import { useDateSegment } from "@react-aria/datepicker";
 import { useRef as useRef15 } from "react";
-import { jsx as jsx246, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs90 } from "react/jsx-runtime";
 function DateSegment({
   segment,
   state,
@@ -7006,7 +7050,7 @@ function DateSegment({
 }) {
   const ref = useRef15(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs90(
     "div",
     {
       ...segmentProps,
@@ -7125,7 +7169,7 @@ function renderLabel(props) {
 }
 
 // src/components/date-inputs/common/DateInput.tsx
-import { jsx as jsx250, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs91 } from "react/jsx-runtime";
 function DateInput({
   errorMessage,
   tip,
@@ -7153,7 +7197,7 @@ function DateInput({
 }) {
   const hasErrorMessage = !!errorMessage;
   const { isOpen } = useContext13(CalendarPopoverContext);
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs91(
     "div",
     {
       ...groupProps,
@@ -7167,7 +7211,7 @@ function DateInput({
           readOnly,
           afterLabelContent
         }),
-        /* @__PURE__ */ jsxs93(
+        /* @__PURE__ */ jsxs91(
           Box,
           {
             style,
@@ -7333,7 +7377,7 @@ function createDOMRef(ref) {
 }
 
 // src/components/date-inputs/DatePicker/DatePicker.tsx
-import { jsx as jsx252, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs92 } from "react/jsx-runtime";
 var refIsFocusable = (ref) => {
   return typeof ref === "object" && ref !== null && "focus" in ref;
 };
@@ -7368,7 +7412,7 @@ function DatePicker({
   const uniqueId = (_a = props.id) != null ? _a : useId11();
   const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
   const tipId = hasTip ? `${uniqueId}-tip` : void 0;
-  return /* @__PURE__ */ jsx252(I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsx252(I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ jsxs92(
     CalendarPopover,
     {
       isOpen: state.isOpen,
@@ -7596,7 +7640,7 @@ var DescriptionListTerm = (props) => {
 DescriptionListTerm.displayName = "DescriptionListTerm";
 
 // src/components/DescriptionList/DescriptionListDesc.tsx
-import { jsx as jsx256, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx256, jsxs as jsxs93 } from "react/jsx-runtime";
 var DescriptionListDesc = ({
   children,
   icon,
@@ -7605,7 +7649,7 @@ var DescriptionListDesc = ({
   style,
   htmlProps,
   ...rest
-}) => /* @__PURE__ */ jsxs95(
+}) => /* @__PURE__ */ jsxs93(
   "dd",
   {
     ...getBaseHTMLProps(
@@ -7740,11 +7784,11 @@ var DetailListDesc = ({ className, ...rest }) => /* @__PURE__ */ jsx259(Box, { a
 DetailListDesc.displayName = "DetailListDesc";
 
 // src/components/DetailList/DetailListRow.tsx
-import { Fragment as Fragment7, jsx as jsx260, jsxs as jsxs96 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx260, jsxs as jsxs94 } from "react/jsx-runtime";
 var DetailListRow = ({ className, ...rest }) => {
   const { smallScreenBreakpoint: bp } = useDetailListContext();
   const hasBp = !!bp;
-  return /* @__PURE__ */ jsxs96(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs94(Fragment7, { children: [
     /* @__PURE__ */ jsx260(
       Box,
       {
@@ -7806,7 +7850,7 @@ var DrawerContext = createContext11({});
 var useDrawerContext = () => useContext15(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx262, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs95 } from "react/jsx-runtime";
 var DRAWER_SIZES = createSizes("small", "medium", "large");
 var Drawer = ({
   children,
@@ -7830,7 +7874,7 @@ var Drawer = ({
   }
   const { t } = useTranslation();
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
-  const { isOpen = false, onClose, drawerId, triggerEl } = useDrawerContext();
+  const { isOpen = false, onClose, drawerId, triggerRef } = useDrawerContext();
   const hasHeader = !!header;
   const headerId = hasHeader ? `${drawerId}-header` : void 0;
   const drawerRef = useFocusTrap(isOpen);
@@ -7845,8 +7889,8 @@ var Drawer = ({
       return () => handleElementWithBackdropUnmount(document.body);
     }
   }, [isOpen]);
-  const elements = [drawerRef.current];
-  if (triggerEl) elements.push(triggerEl);
+  const elements = [drawerRef];
+  if (triggerRef) elements.push(triggerRef);
   useOnClickOutside(elements, () => {
     if (isOpen && !withBackdrop) {
       onClose == null ? void 0 : onClose();
@@ -7871,7 +7915,7 @@ var Drawer = ({
         return "800px";
     }
   };
-  const drawer = /* @__PURE__ */ jsxs97(
+  const drawer = /* @__PURE__ */ jsxs95(
     Paper,
     {
       ref: combinedRef,
@@ -7904,7 +7948,7 @@ var Drawer = ({
       elevation: "large",
       "aria-labelledby": headerId,
       children: [
-        /* @__PURE__ */ jsxs97(
+        /* @__PURE__ */ jsxs95(
           HStack,
           {
             position: "sticky",
@@ -8016,7 +8060,7 @@ var DrawerGroup = ({
         drawerId: uniqueDrawerId,
         isOpen,
         onClose: handleClose,
-        triggerEl: triggerRef.current
+        triggerRef
       },
       children: Children7
     }
@@ -8025,7 +8069,7 @@ var DrawerGroup = ({
 DrawerGroup.displayName = "DrawerGroup";
 
 // src/components/EmptyContent/EmptyContent.tsx
-import { jsx as jsx264, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx264, jsxs as jsxs96 } from "react/jsx-runtime";
 function EmptyContent({
   headerText,
   children,
@@ -8045,7 +8089,7 @@ function EmptyContent({
       background: "surface-medium",
       borderRadius: "surface",
       ...rest,
-      children: /* @__PURE__ */ jsxs98(
+      children: /* @__PURE__ */ jsxs96(
         VStack,
         {
           maxWidth: "70ch",
@@ -8111,7 +8155,7 @@ var ListItem = ({ className, ...rest }) => /* @__PURE__ */ jsx266("li", { ...res
 ListItem.displayName = "ListItem";
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { jsx as jsx267, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs97 } from "react/jsx-runtime";
 var ErrorSummary = ({
   heading: pHeading,
   className,
@@ -8123,7 +8167,7 @@ var ErrorSummary = ({
 }) => {
   const { t } = useTranslation();
   const heading = typeof pHeading === "string" ? /* @__PURE__ */ jsx267(Heading, { level: 2, typographyType: "headingSmall", children: pHeading }) : pHeading ? pHeading : /* @__PURE__ */ jsx267(Heading, { level: 2, typographyType: "headingSmall", children: t(texts10.toProceedCorrectErrors) });
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs97(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -8180,7 +8224,7 @@ var FavStar_default = {
 };
 
 // src/components/FavStar/FavStar.tsx
-import { jsx as jsx269, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs98 } from "react/jsx-runtime";
 var FAVSTAR_SIZES = createSizes("medium", "large");
 var FavStar = ({
   id,
@@ -8208,7 +8252,7 @@ var FavStar = ({
     defaultValue: defaultChecked != null ? defaultChecked : false,
     onChange
   });
-  return /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs98(
     "label",
     {
       className: cn(
@@ -8291,13 +8335,13 @@ var CharCounter_default = {
 };
 
 // src/components/helpers/CharCounter/CharCounter.tsx
-import { jsx as jsx270, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs99 } from "react/jsx-runtime";
 function CharCounter(props) {
   const { t } = useTranslation();
   const { current, max, id } = props;
   const generatedId = useId15();
   const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
-  return /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsxs99(
     Typography,
     {
       id: uniqueId,
@@ -8306,7 +8350,7 @@ function CharCounter(props) {
       typographyType: "bodyShortXsmall",
       color: "text-subtle",
       children: [
-        /* @__PURE__ */ jsxs101("span", { "aria-hidden": true, children: [
+        /* @__PURE__ */ jsxs99("span", { "aria-hidden": true, children: [
           current,
           "/",
           max
@@ -8331,7 +8375,7 @@ var texts12 = createTexts({
 });
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx271, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx271, jsxs as jsxs100 } from "react/jsx-runtime";
 var TextArea = ({
   id,
   value,
@@ -8380,7 +8424,7 @@ var TextArea = ({
   );
   const showRequiredStyling = required || !!ariaRequired;
   const inputWidth = getInputWidth(width);
-  return /* @__PURE__ */ jsxs102("div", { className: cn(className, Input_default.container), style: { ...style }, children: [
+  return /* @__PURE__ */ jsxs100("div", { className: cn(className, Input_default.container), style: { ...style }, children: [
     renderLabel({ label, htmlFor: uniqueId, readOnly, showRequiredStyling }),
     /* @__PURE__ */ jsx271(
       Box,
@@ -8415,7 +8459,7 @@ var TextArea = ({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsxs102(
+    /* @__PURE__ */ jsxs100(
       Box,
       {
         display: "flex",
@@ -8440,7 +8484,7 @@ TextArea.displayName = "TextArea";
 var getIconSize = (layout) => layout === "vertical" ? "large" : "medium";
 
 // src/components/Feedback/CommentComponent.tsx
-import { jsx as jsx272, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs101 } from "react/jsx-runtime";
 var CommentComponent = ({
   layout,
   rating,
@@ -8454,8 +8498,8 @@ var CommentComponent = ({
   handleFeedbackTextChange
 }) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs103(VStack, { gap: "x1", children: [
-    /* @__PURE__ */ jsxs103("span", { className: Feedback_default["rating-submitted-title"], children: [
+  return /* @__PURE__ */ jsxs101(VStack, { gap: "x1", children: [
+    /* @__PURE__ */ jsxs101("span", { className: Feedback_default["rating-submitted-title"], children: [
       /* @__PURE__ */ jsx272(
         Icon,
         {
@@ -8464,7 +8508,7 @@ var CommentComponent = ({
           iconSize: getIconSize(layout)
         }
       ),
-      /* @__PURE__ */ jsxs103(Paragraph, { children: [
+      /* @__PURE__ */ jsxs101(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
@@ -8516,7 +8560,7 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx273, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs102 } from "react/jsx-runtime";
 var Tooltip = ({
   text,
   placement = "bottom",
@@ -8607,7 +8651,7 @@ var Tooltip = ({
   );
   const openCn = keepMounted && open && inView || isTransientlyMounted ? "open" : "closed";
   const ariaHidden = keepMounted ? !open : void 0;
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs102(
     Box,
     {
       ...getBaseHTMLProps(id, className, style, htmlProps, rest),
@@ -8645,7 +8689,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Feedback/RatingComponent.tsx
-import { jsx as jsx274, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx274, jsxs as jsxs103 } from "react/jsx-runtime";
 var RatingComponent = ({
   layout,
   ratingLabel,
@@ -8665,7 +8709,7 @@ var RatingComponent = ({
       color: "icon-medium"
     }
   );
-  return /* @__PURE__ */ jsxs105(
+  return /* @__PURE__ */ jsxs103(
     "div",
     {
       className: cn(
@@ -8674,7 +8718,7 @@ var RatingComponent = ({
       ),
       children: [
         /* @__PURE__ */ jsx274("h2", { className: typographyStyles_default["label-medium"], children: ratingLabel }),
-        loading ? /* @__PURE__ */ jsx274(Spinner, { tooltip: t(texts14.uploadingFeedback) }) : /* @__PURE__ */ jsxs105(HStack, { gap: "x1", children: [
+        loading ? /* @__PURE__ */ jsx274(Spinner, { tooltip: t(texts14.uploadingFeedback) }) : /* @__PURE__ */ jsxs103(HStack, { gap: "x1", children: [
           /* @__PURE__ */ jsx274(Tooltip, { text: thumbUpTooltip, children: button("positive", layout, thumbUpTooltip) }),
           /* @__PURE__ */ jsx274(Tooltip, { text: thumbDownTooltip, children: button("negative", layout, thumbDownTooltip) })
         ] })
@@ -8897,7 +8941,7 @@ var FileUploader_default = {
 };
 
 // src/components/FileUploader/File.tsx
-import { Fragment as Fragment8, jsx as jsx279, jsxs as jsxs106 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx279, jsxs as jsxs104 } from "react/jsx-runtime";
 var File2 = (props) => {
   const { t } = useTranslation();
   const {
@@ -8971,8 +9015,8 @@ var File2 = (props) => {
       );
       break;
   }
-  return /* @__PURE__ */ jsxs106("li", { children: [
-    /* @__PURE__ */ jsxs106(
+  return /* @__PURE__ */ jsxs104("li", { children: [
+    /* @__PURE__ */ jsxs104(
       Paper,
       {
         marginBlock: "x0.5 0",
@@ -8981,7 +9025,7 @@ var File2 = (props) => {
         background: inactive ? "surface-field-disabled" : "surface-subtle",
         className: cn(hasError && FileUploader_default["file--invalid"]),
         children: [
-          /* @__PURE__ */ jsxs106(HStack, { alignItems: "center", justifyContent: "space-between", gap: "x0.75", children: [
+          /* @__PURE__ */ jsxs104(HStack, { alignItems: "center", justifyContent: "space-between", gap: "x0.75", children: [
             /* @__PURE__ */ jsx279(
               Typography,
               {
@@ -8991,7 +9035,7 @@ var File2 = (props) => {
                 children: fileUrl ? /* @__PURE__ */ jsx279(Link, { href: fileUrl, target: "_blank", children: stateFile.name }) : stateFile.name
               }
             ),
-            !inactive && /* @__PURE__ */ jsxs106(Fragment8, { children: [
+            !inactive && /* @__PURE__ */ jsxs104(Fragment8, { children: [
               statusIndicator,
               /* @__PURE__ */ jsx279(
                 Button,
@@ -9394,7 +9438,7 @@ var texts17 = createTexts({
 });
 
 // src/components/FileUploader/FileUploader.tsx
-import { jsx as jsx280, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx280, jsxs as jsxs105 } from "react/jsx-runtime";
 var FileUploader = (props) => {
   const {
     id,
@@ -9518,7 +9562,7 @@ var FileUploader = (props) => {
       "aria-describedby": fileListId
     }
   );
-  return /* @__PURE__ */ jsxs107(
+  return /* @__PURE__ */ jsxs105(
     Box,
     {
       id: uniqueId,
@@ -9535,7 +9579,7 @@ var FileUploader = (props) => {
           afterLabelContent
         }),
         renderInputMessage({ tip, tipId }),
-        inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs107(
+        inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs105(
           VStack,
           {
             gap: "x1",
@@ -9553,12 +9597,12 @@ var FileUploader = (props) => {
               button
             ]
           }
-        ) : /* @__PURE__ */ jsxs107(Box, { padding: "x 0", children: [
+        ) : /* @__PURE__ */ jsxs105(Box, { padding: "x 0", children: [
           input,
           button
         ] }),
         /* @__PURE__ */ jsx280(ErrorList, { errors: rootErrorsList }),
-        !hideFileList && /* @__PURE__ */ jsxs107(
+        !hideFileList && /* @__PURE__ */ jsxs105(
           "div",
           {
             id: fileListId,
@@ -9718,7 +9762,7 @@ var FormSummary_default = {
 };
 
 // src/components/FormSummary/FormSummary.components.tsx
-import { jsx as jsx290, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx290, jsxs as jsxs106 } from "react/jsx-runtime";
 function FormSummaryHeader({ ...props }) {
   return /* @__PURE__ */ jsx290(
     HStack,
@@ -9766,10 +9810,10 @@ function FormSummaryValue({
 }
 function FormSummaryEmptyValue() {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs108("span", { children: [
+  return /* @__PURE__ */ jsxs106("span", { children: [
     /* @__PURE__ */ jsx290("span", { "aria-hidden": true, children: "-" }),
     " ",
-    /* @__PURE__ */ jsxs108(VisuallyHidden, { children: [
+    /* @__PURE__ */ jsxs106(VisuallyHidden, { children: [
       " ",
       t(texts19.noValue),
       " "
@@ -9804,7 +9848,7 @@ var GlobalMessage_default = {
 };
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-import { jsx as jsx291, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx291, jsxs as jsxs107 } from "react/jsx-runtime";
 var G_MESSAGE_PURPOSES = createPurposes("info", "warning", "danger");
 var icons = {
   info: InfoIcon,
@@ -9824,7 +9868,7 @@ var GlobalMessage = ({
 }) => {
   const { t } = useTranslation();
   const [isClosed, setClosed] = useState18(false);
-  return !isClosed ? /* @__PURE__ */ jsxs109(
+  return !isClosed ? /* @__PURE__ */ jsxs107(
     "div",
     {
       ...getBaseHTMLProps(
@@ -9840,7 +9884,7 @@ var GlobalMessage = ({
         rest
       ),
       children: [
-        /* @__PURE__ */ jsxs109(
+        /* @__PURE__ */ jsxs107(
           "div",
           {
             className: cn(GlobalMessage_default.content, closable && GlobalMessage_default["content--closable"]),
@@ -9956,7 +10000,7 @@ var InlineEditContextProvider = (props) => {
   };
   useOnKeyDown(["Enter"], () => onExitHandler());
   useOnKeyDown(["Escape"], () => onExitHandler());
-  useOnClickOutside(inputRef == null ? void 0 : inputRef.current, () => onExitHandler());
+  useOnClickOutside(inputRef, () => onExitHandler());
   return /* @__PURE__ */ jsx293(
     InlineEditContext,
     {
@@ -9992,10 +10036,10 @@ var InlineEdit_default = {
 };
 
 // src/components/InlineEdit/InlineEdit.utils.tsx
-import { jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsxs as jsxs108 } from "react/jsx-runtime";
 var inlineEditVisuallyHidden = (id, clearable) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs110(VisuallyHidden, { id, children: [
+  return /* @__PURE__ */ jsxs108(VisuallyHidden, { id, children: [
     t(texts20.inlineEditInfo),
     " ",
     !clearable && t(texts20.notClearable)
@@ -10072,7 +10116,7 @@ function createClearChangeEvent(elementId) {
 }
 
 // src/components/InlineEdit/InlineField.tsx
-import { Fragment as Fragment9, jsx as jsx294, jsxs as jsxs111 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx294, jsxs as jsxs109 } from "react/jsx-runtime";
 function InlineField(props) {
   const {
     elementType,
@@ -10153,7 +10197,7 @@ function InlineField(props) {
           }
         );
       case "select":
-        return /* @__PURE__ */ jsxs111(Fragment9, { children: [
+        return /* @__PURE__ */ jsxs109(Fragment9, { children: [
           /* @__PURE__ */ jsx294(
             "select",
             {
@@ -10178,8 +10222,8 @@ function InlineField(props) {
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs111(Box, { position: "relative", width, children: [
-    /* @__PURE__ */ jsxs111("div", { className: Input_default["input-group"], children: [
+  return /* @__PURE__ */ jsxs109(Box, { position: "relative", width, children: [
+    /* @__PURE__ */ jsxs109("div", { className: Input_default["input-group"], children: [
       !isEditing && !hideIcon && makeIcon(EditIcon, InlineEdit_default["edit-icon"]),
       renderElement()
     ] }),
@@ -10310,7 +10354,7 @@ var NavigationItem = ({ isCurrent, ...rest }) => /* @__PURE__ */ jsx298(
 );
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx299, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx299, jsxs as jsxs110 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var InternalHeader = (props) => {
   const {
@@ -10364,7 +10408,7 @@ var InternalHeader = (props) => {
   ) }) : null;
   const hasContextMenu = hasContextMenuElements || !!user || hasNavInContextMenu;
   const hasContextMenuLargeScreen = hasContextMenuElements || !!user;
-  return /* @__PURE__ */ jsxs112(
+  return /* @__PURE__ */ jsxs110(
     Box,
     {
       display: "flex",
@@ -10400,7 +10444,7 @@ var InternalHeader = (props) => {
           {
             showBelow: !hasContextMenuLargeScreen && hasSmallScreenBreakpoint ? smallScreenBreakpoint : void 0,
             className: cn(InternalHeader_default["context-menu-group"]),
-            children: /* @__PURE__ */ jsxs112(OverflowMenuGroup, { children: [
+            children: /* @__PURE__ */ jsxs110(OverflowMenuGroup, { children: [
               /* @__PURE__ */ jsx299(
                 Button,
                 {
@@ -10409,7 +10453,7 @@ var InternalHeader = (props) => {
                   "aria-label": t(texts21.openMenu)
                 }
               ),
-              /* @__PURE__ */ jsxs112(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
+              /* @__PURE__ */ jsxs110(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
                 user && /* @__PURE__ */ jsx299(OverflowMenuList, { children: user.href ? /* @__PURE__ */ jsx299(OverflowMenuLink, { icon: PersonIcon, ...user }) : /* @__PURE__ */ jsx299(OverflowMenuSpan, { icon: PersonIcon, ...user }) }),
                 hasNavInContextMenu && /* @__PURE__ */ jsx299(
                   ShowHide,
@@ -10490,7 +10534,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment10, jsx as jsx300, jsxs as jsxs113 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx300, jsxs as jsxs111 } from "react/jsx-runtime";
 var L_MESSAGE_PURPOSES = createPurposes(
   "info",
   "success",
@@ -10523,7 +10567,7 @@ var LocalMessage = ({
   if (isClosed) {
     return /* @__PURE__ */ jsx300(Fragment10, {});
   }
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs111(
     Box,
     {
       ...getBaseHTMLProps(
@@ -10594,7 +10638,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx301, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx301, jsxs as jsxs112 } from "react/jsx-runtime";
 var Modal = ({
   isOpen = false,
   parentElement,
@@ -10653,7 +10697,7 @@ var Modal = ({
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
-        children: /* @__PURE__ */ jsxs114(
+        children: /* @__PURE__ */ jsxs112(
           Paper,
           {
             display: "flex",
@@ -10681,7 +10725,7 @@ var Modal = ({
             id: modalId,
             elevation: "large",
             children: [
-              /* @__PURE__ */ jsxs114(
+              /* @__PURE__ */ jsxs112(
                 HStack,
                 {
                   paddingBlock: "0 x0.75",
@@ -10756,6 +10800,189 @@ import { jsx as jsx303 } from "react/jsx-runtime";
 var ModalActions = (props) => /* @__PURE__ */ jsx303(Box, { display: "flex", flexWrap: "wrap", gap: "x1", ...props });
 ModalActions.displayName = "ModalActions";
 
+// src/components/NewsPopover/NewsPopover.module.css
+var NewsPopover_default = {
+  "close-button": "NewsPopover_close-button",
+  "img-wrapper": "NewsPopover_img-wrapper"
+};
+
+// src/components/NewsPopover/NewsPopover.tsx
+import { Fragment as Fragment11, jsx as jsx304, jsxs as jsxs113 } from "react/jsx-runtime";
+var NewsPopover = ({
+  id,
+  className,
+  style,
+  htmlProps,
+  header,
+  news,
+  defaultActiveSlide = 0,
+  activeSlide: activeSlideProp,
+  setActiveSlide: setActiveSlideProp,
+  isOpen: isOpenProp,
+  isInitiallyOpen = true,
+  setIsOpen: setIsOpenProp,
+  smallScreenBreakpoint = "xs",
+  closeOnClickOutside = true,
+  ref,
+  ...rest
+}) => {
+  if (news.length === 0) {
+    throw new Error('NewsPopover must have at least one item in "news" prop');
+  }
+  if (header.length > 35) {
+    console.warn(
+      "[NewsPopover] header exceeds recommended length (about 35 characters). This may cause wrapping or layout issues depending on theme."
+    );
+  }
+  news.forEach((n, i) => {
+    if (n.heading.length > 35) {
+      console.warn(
+        `[NewsPopover] news[${i}].heading exceeds recommended length (about 35 characters). This may cause wrapping or layout issues depending on theme.`
+      );
+    }
+    if (n.text.length > 135) {
+      console.warn(
+        `[NewsPopover] news[${i}].text exceeds recommended length (about 135 characters). This may cause wrapping or layout issues depending on theme.`
+      );
+    }
+  });
+  const { t } = useTranslation();
+  const [activeSlide, setActiveSlide] = useControllableState({
+    value: activeSlideProp,
+    defaultValue: defaultActiveSlide,
+    onChange: setActiveSlideProp
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    onChange: setIsOpenProp,
+    value: isOpenProp,
+    defaultValue: isInitiallyOpen
+  });
+  function handleSlideChange(slide) {
+    setActiveSlide(slide);
+  }
+  const popoverRef = useFocusTrap(true);
+  const combinedRef = useCombinedRef(ref, popoverRef);
+  useOnClickOutside(popoverRef, () => {
+    if (closeOnClickOutside && isOpen) {
+      setIsOpen(false);
+    }
+  });
+  useOnKeyDown("Escape", () => setIsOpen(false));
+  const isList = news.length > 1;
+  const slideContent = (el, i) => /* @__PURE__ */ jsxs113(Fragment11, { children: [
+    /* @__PURE__ */ jsxs113(
+      Paper,
+      {
+        background: "brand-secondary-subtle",
+        width: "100%",
+        borderRadius: "0",
+        display: "grid",
+        placeItems: "center",
+        paddingBlock: "x0.5",
+        children: [
+          i !== void 0 && /* @__PURE__ */ jsx304(VisuallyHidden, { children: t(commonTexts.pageOf(i + 1, news.length)) }),
+          /* @__PURE__ */ jsx304(Box, { height: "113px", maxWidth: "380px", className: NewsPopover_default["img-wrapper"], children: el.image })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs113(VStack, { gap: "x0.75", alignItems: "center", margin: "x0.75 x0.75 x1 x0.75", children: [
+      /* @__PURE__ */ jsx304(Heading, { level: 3, children: el.heading }),
+      /* @__PURE__ */ jsx304(Paragraph, { textAlign: "center", children: el.text })
+    ] })
+  ] });
+  const content = isList ? /* @__PURE__ */ jsx304(Box, { as: StylelessList, width: "100%", children: news.map((el, i) => {
+    const active = activeSlide === i;
+    return /* @__PURE__ */ jsx304("li", { "aria-current": active, hidden: !active, children: slideContent(el, i) }, i);
+  }) }) : /* @__PURE__ */ jsx304(Box, { width: "100%", children: slideContent(news[0]) });
+  function handleNext() {
+    if (activeSlide === news.length - 1) handleSlideChange(0);
+    else handleSlideChange(activeSlide + 1);
+  }
+  function handlePrevious() {
+    if (activeSlide === 0) handleSlideChange(news.length - 1);
+    else handleSlideChange(activeSlide - 1);
+  }
+  const headerId = "dds-news-popover-header";
+  return isOpen ? /* @__PURE__ */ jsxs113(
+    Paper,
+    {
+      ...getBaseHTMLProps(
+        id,
+        cn(className, focusable),
+        style,
+        htmlProps,
+        rest
+      ),
+      ref: combinedRef,
+      position: "relative",
+      border: "border-subtle",
+      role: "dialog",
+      "aria-labelledby": headerId,
+      height: isList ? "368px" : "327px",
+      width: styleUpToBreakpoint("100%", smallScreenBreakpoint, "405px"),
+      children: [
+        /* @__PURE__ */ jsx304(HStack, { margin: "x0.75 x3 x0.75 x0.75", children: /* @__PURE__ */ jsx304(Heading, { id: headerId, level: 2, typographyType: "headingSmall", children: header }) }),
+        /* @__PURE__ */ jsxs113(
+          VStack,
+          {
+            alignItems: "center",
+            height: isList ? "299px" : void 0,
+            "aria-live": "polite",
+            children: [
+              content,
+              isList && /* @__PURE__ */ jsxs113(HStack, { alignItems: "center", gap: "x1", marginBlock: "auto 0", children: [
+                /* @__PURE__ */ jsx304(
+                  Button,
+                  {
+                    "aria-label": t(commonTexts.previousPage),
+                    size: "small",
+                    purpose: "tertiary",
+                    icon: ChevronLeftIcon,
+                    onClick: () => handlePrevious()
+                  }
+                ),
+                news.map((slide, i) => {
+                  const active = activeSlide === i;
+                  return /* @__PURE__ */ jsx304(
+                    Icon,
+                    {
+                      iconSize: "small",
+                      icon: CircleFilledIcon,
+                      color: active ? "brand-tertiary-default" : "brand-tertiary-subtle"
+                    }
+                  );
+                }),
+                /* @__PURE__ */ jsx304(
+                  Button,
+                  {
+                    "aria-label": t(commonTexts.nextPage),
+                    size: "small",
+                    purpose: "tertiary",
+                    icon: ChevronRightIcon,
+                    onClick: () => handleNext()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx304(
+                Button,
+                {
+                  icon: CloseIcon,
+                  purpose: "tertiary",
+                  size: "small",
+                  "aria-label": t(commonTexts.close),
+                  onClick: () => setIsOpen(false),
+                  className: NewsPopover_default["close-button"]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+};
+NewsPopover.displayName = "NewsPopover";
+
 // src/components/Pagination/Pagination.tsx
 import { useState as useState23 } from "react";
 
@@ -11067,7 +11294,7 @@ import React from "react";
 import {
   components
 } from "react-select";
-import { jsx as jsx304, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs114 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -11080,25 +11307,25 @@ var {
 } = components;
 var DDSOption = ({
   ...props
-}) => /* @__PURE__ */ jsxs115(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx304(Icon, { icon: CheckIcon, iconSize: "small" }),
+}) => /* @__PURE__ */ jsxs114(Option, { ...props, children: [
+  props.isSelected && /* @__PURE__ */ jsx305(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
-var CustomOption = (props) => /* @__PURE__ */ jsx304(Option, { ...props, children: React.createElement(props.customElement, props) });
+var CustomOption = (props) => /* @__PURE__ */ jsx305(Option, { ...props, children: React.createElement(props.customElement, props) });
 var CustomSingleValue = ({
   id,
   Element,
   ...props
-}) => /* @__PURE__ */ jsx304(SingleValue, { ...props, children: /* @__PURE__ */ jsx304("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx304(Element, { ...props }) : props.children }) });
-var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx304(NoOptionsMessage, { ...props, children: "Ingen treff" });
+}) => /* @__PURE__ */ jsx305(SingleValue, { ...props, children: /* @__PURE__ */ jsx305("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx305(Element, { ...props }) : props.children }) });
+var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx305(NoOptionsMessage, { ...props, children: "Ingen treff" });
 var DDSClearIndicator = ({
   ...props
-}) => /* @__PURE__ */ jsx304(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx304(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
-var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx304(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx304(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
+}) => /* @__PURE__ */ jsx305(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx305(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
+var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx305(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx305(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
 var DDSDropdownIndicator = (props) => {
   const { className, componentSize, ...rest } = props;
   const iconState = rest.selectProps.menuIsOpen ? "up" : "down";
-  return /* @__PURE__ */ jsx304(
+  return /* @__PURE__ */ jsx305(
     DropdownIndicator,
     {
       ...rest,
@@ -11107,7 +11334,7 @@ var DDSDropdownIndicator = (props) => {
         Select_default["dropdown-indicator"],
         Input_default[`input-with-el-right--${componentSize}`]
       ),
-      children: /* @__PURE__ */ jsx304(
+      children: /* @__PURE__ */ jsx305(
         Icon,
         {
           icon: AnimatedChevronUpDownIcon,
@@ -11122,7 +11349,7 @@ var DDSInput = ({
   ariaInvalid,
   ariaDescribedby,
   ...props
-}) => /* @__PURE__ */ jsx304(
+}) => /* @__PURE__ */ jsx305(
   Input2,
   {
     ...props,
@@ -11142,7 +11369,7 @@ function DDSControl(props) {
     ...rest
   } = props;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ jsxs115(
+  return /* @__PURE__ */ jsxs114(
     Control,
     {
       ...rest,
@@ -11159,7 +11386,7 @@ function DDSControl(props) {
         hasIcon && Input_default[`input-with-icon--${componentSize}`]
       ),
       children: [
-        hasIcon && /* @__PURE__ */ jsx304(
+        hasIcon && /* @__PURE__ */ jsx305(
           Icon,
           {
             icon,
@@ -11177,7 +11404,7 @@ function DDSControl(props) {
 }
 
 // src/components/Select/Select.tsx
-import { jsx as jsx305, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs115 } from "react/jsx-runtime";
 function Select({
   id,
   label,
@@ -11228,7 +11455,7 @@ function Select({
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
   const customInput = useCallback7(
-    (props) => /* @__PURE__ */ jsx305(
+    (props) => /* @__PURE__ */ jsx306(
       DDSInput,
       {
         ...props,
@@ -11246,7 +11473,7 @@ function Select({
     []
   );
   const customSingleValue = useCallback7(
-    (props) => /* @__PURE__ */ jsx305(
+    (props) => /* @__PURE__ */ jsx306(
       CustomSingleValue,
       {
         ...props,
@@ -11257,15 +11484,15 @@ function Select({
     []
   );
   const customClearIndicator = useCallback7(
-    (props) => /* @__PURE__ */ jsx305(DDSClearIndicator, { ...props }),
+    (props) => /* @__PURE__ */ jsx306(DDSClearIndicator, { ...props }),
     []
   );
   const customDropdownIndicator = useCallback7(
-    (props) => /* @__PURE__ */ jsx305(DDSDropdownIndicator, { ...props, componentSize }),
+    (props) => /* @__PURE__ */ jsx306(DDSDropdownIndicator, { ...props, componentSize }),
     []
   );
   const customControl = useCallback7(
-    (props) => /* @__PURE__ */ jsx305(
+    (props) => /* @__PURE__ */ jsx306(
       DDSControl,
       {
         ...props,
@@ -11280,9 +11507,9 @@ function Select({
   const customOptionComponent = useCallback7(
     (props) => {
       if (customOptionElement) {
-        return /* @__PURE__ */ jsx305(CustomOption, { ...props, customElement: customOptionElement });
+        return /* @__PURE__ */ jsx306(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ jsx305(DDSOption, { ...props });
+        return /* @__PURE__ */ jsx306(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -11323,7 +11550,7 @@ function Select({
     openMenuOnClick: readOnly ? false : openMenuOnClick ? openMenuOnClick : void 0,
     ...rest
   };
-  return /* @__PURE__ */ jsxs116(
+  return /* @__PURE__ */ jsxs115(
     Box,
     {
       width: inputWidth,
@@ -11344,7 +11571,7 @@ function Select({
           readOnly,
           afterLabelContent
         }),
-        /* @__PURE__ */ jsx305(ReactSelect, { ...reactSelectProps, ref }),
+        /* @__PURE__ */ jsx306(ReactSelect, { ...reactSelectProps, ref }),
         renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
       ]
     }
@@ -11373,7 +11600,7 @@ var NativeSelect_default = {
 };
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { jsx as jsx306, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx307, jsxs as jsxs116 } from "react/jsx-runtime";
 var NativeSelect = ({
   ref,
   id,
@@ -11442,7 +11669,7 @@ var NativeSelect = ({
   const iconSize = componentSize === "medium" ? "medium" : "small";
   const showClearButton = clearable && hasValue && !readOnly && !rest.disabled;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ jsxs117("div", { className, style, children: [
+  return /* @__PURE__ */ jsxs116("div", { className, style, children: [
     renderLabel({
       label,
       htmlFor: uniqueId,
@@ -11450,7 +11677,7 @@ var NativeSelect = ({
       readOnly,
       afterLabelContent
     }),
-    /* @__PURE__ */ jsxs117(
+    /* @__PURE__ */ jsxs116(
       Box,
       {
         position: "relative",
@@ -11460,7 +11687,7 @@ var NativeSelect = ({
           Input_default["input-group"]
         ),
         children: [
-          hasIcon && /* @__PURE__ */ jsx306(
+          hasIcon && /* @__PURE__ */ jsx307(
             Icon,
             {
               icon,
@@ -11471,7 +11698,7 @@ var NativeSelect = ({
               iconSize: "component"
             }
           ),
-          /* @__PURE__ */ jsx306(
+          /* @__PURE__ */ jsx307(
             "select",
             {
               ref: useCombinedRef(ref, selectRef),
@@ -11505,7 +11732,7 @@ var NativeSelect = ({
               children
             }
           ),
-          showClearButton && /* @__PURE__ */ jsx306(
+          showClearButton && /* @__PURE__ */ jsx307(
             ClearButton,
             {
               "aria-label": t(commonTexts.clearSelect),
@@ -11514,7 +11741,7 @@ var NativeSelect = ({
               className: NativeSelect_default[`clear-button--${componentSize}`]
             }
           ),
-          !multiple && /* @__PURE__ */ jsx306(
+          !multiple && /* @__PURE__ */ jsx307(
             Icon,
             {
               icon: ChevronDownIcon,
@@ -11537,7 +11764,7 @@ var NativeSelect = ({
 var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx307, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs117 } from "react/jsx-runtime";
 var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
@@ -11592,7 +11819,7 @@ var Pagination = ({
   };
   const listItems = items.length > 0 ? items.map((item, i) => {
     const isActive = item === activePage;
-    return /* @__PURE__ */ jsx307("li", { className: Pagination_default.list__item, children: item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ jsx307(
+    return /* @__PURE__ */ jsx308("li", { className: Pagination_default.list__item, children: item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ jsx308(
       Button,
       {
         purpose: isActive ? "primary" : "secondary",
@@ -11600,10 +11827,10 @@ var Pagination = ({
         onClick: (event) => {
           onPageChange(event, item);
         },
-        "aria-label": isActive ? t(texts22.currentPage(item)) : t(texts22.page(item)),
+        "aria-label": isActive ? t(commonTexts.currentPage(item)) : t(commonTexts.page(item)),
         children: item
       }
-    ) : /* @__PURE__ */ jsx307(
+    ) : /* @__PURE__ */ jsx308(
       Icon,
       {
         icon: MoreHorizontalIcon,
@@ -11611,7 +11838,7 @@ var Pagination = ({
       }
     ) }, `pagination-item-${i}`);
   }) : void 0;
-  const previousPageButton = /* @__PURE__ */ jsx307(
+  const previousPageButton = /* @__PURE__ */ jsx308(
     Button,
     {
       purpose: "secondary",
@@ -11620,10 +11847,10 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts22.previousPage)
+      "aria-label": t(commonTexts.previousPage)
     }
   );
-  const nextPageButton = /* @__PURE__ */ jsx307(
+  const nextPageButton = /* @__PURE__ */ jsx308(
     Button,
     {
       purpose: "secondary",
@@ -11632,13 +11859,13 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage + 1);
       },
-      "aria-label": t(texts22.nextPage)
+      "aria-label": t(commonTexts.nextPage)
     }
   );
   const isOnFirstPage = activePage === 1;
   const isOnLastPage = activePage === pagesLength;
   const baseHTMLProps = getBaseHTMLProps(id, className, style, htmlProps, rest);
-  const navigation = withPagination ? /* @__PURE__ */ jsxs118(
+  const navigation = withPagination ? /* @__PURE__ */ jsxs117(
     Box,
     {
       as: "nav",
@@ -11650,14 +11877,14 @@ var Pagination = ({
         ...baseHTMLProps
       },
       children: [
-        /* @__PURE__ */ jsxs118(
+        /* @__PURE__ */ jsxs117(
           ShowHide,
           {
             as: "ol",
             hideBelow: smallScreenBreakpoint,
             className: Pagination_default.list,
             children: [
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11669,7 +11896,7 @@ var Pagination = ({
                 }
               ),
               listItems,
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11683,14 +11910,14 @@ var Pagination = ({
             ]
           }
         ),
-        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs118(
+        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs117(
           ShowHide,
           {
             as: "ol",
             showBelow: smallScreenBreakpoint,
             className: Pagination_default.list,
             children: [
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11698,7 +11925,7 @@ var Pagination = ({
                     isOnFirstPage && Pagination_default["list__item--hidden"]
                   ),
                   "aria-hidden": isOnFirstPage,
-                  children: /* @__PURE__ */ jsx307(
+                  children: /* @__PURE__ */ jsx308(
                     Button,
                     {
                       purpose: "secondary",
@@ -11712,7 +11939,7 @@ var Pagination = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11723,7 +11950,7 @@ var Pagination = ({
                   children: previousPageButton
                 }
               ),
-              /* @__PURE__ */ jsx307("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ jsx308(
                 Button,
                 {
                   size: "small",
@@ -11733,7 +11960,7 @@ var Pagination = ({
                   children: activePage
                 }
               ) }),
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11744,7 +11971,7 @@ var Pagination = ({
                   children: nextPageButton
                 }
               ),
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx308(
                 "li",
                 {
                   className: cn(
@@ -11752,7 +11979,7 @@ var Pagination = ({
                     isOnLastPage && Pagination_default["list__item--hidden"]
                   ),
                   "aria-hidden": isOnLastPage,
-                  children: /* @__PURE__ */ jsx307(
+                  children: /* @__PURE__ */ jsx308(
                     Button,
                     {
                       purpose: "secondary",
@@ -11774,7 +12001,7 @@ var Pagination = ({
   ) : null;
   const activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
   const activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
-  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ jsxs118(
+  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ jsxs117(
     Box,
     {
       display: "flex",
@@ -11785,7 +12012,7 @@ var Pagination = ({
       alignItems: styleUpToBreakpoint("center", smallScreenBreakpoint),
       ...baseHTMLProps,
       children: [
-        /* @__PURE__ */ jsxs118(
+        /* @__PURE__ */ jsxs117(
           Box,
           {
             display: "grid",
@@ -11793,7 +12020,7 @@ var Pagination = ({
             alignItems: "center",
             className: Pagination_default.indicators,
             children: [
-              withSelect && /* @__PURE__ */ jsx307(
+              withSelect && /* @__PURE__ */ jsx308(
                 Select,
                 {
                   options: tSelectOptions,
@@ -11809,7 +12036,7 @@ var Pagination = ({
                   "aria-label": t(texts22.itemsPerPage)
                 }
               ),
-              withCounter && /* @__PURE__ */ jsx307(Paragraph, { typographyType: "bodyShortMedium", children: t(
+              withCounter && /* @__PURE__ */ jsx308(Paragraph, { typographyType: "bodyShortMedium", children: t(
                 texts22.showsAmountOfTotalItems(
                   activePageFirstItem,
                   activePageLastItem,
@@ -11840,20 +12067,6 @@ var texts22 = createTexts({
     en: "Items per page",
     se: "Elementat juohki siidui"
   },
-  nextPage: {
-    nb: "Neste side",
-    no: "Neste side",
-    nn: "Neste side",
-    en: "Next page",
-    se: "Boahte siidu"
-  },
-  previousPage: {
-    nb: "Forrige side",
-    no: "Forrige side",
-    nn: "F\xF8rre side",
-    en: "Previous page",
-    se: "Ovddit siidu"
-  },
   firstPage: {
     nb: "F\xF8rste side",
     no: "F\xF8rste side",
@@ -11868,20 +12081,6 @@ var texts22 = createTexts({
     en: "Last page",
     se: "Ma\u014Bimu\u0161 siidu"
   },
-  currentPage: (page) => ({
-    nb: `N\xE5v\xE6rende side (${page})`,
-    no: `N\xE5v\xE6rende side (${page})`,
-    nn: `Noverande side (${page})`,
-    en: `Current page (${page})`,
-    se: `D\xE1la siidu (${page})`
-  }),
-  page: (page) => ({
-    nb: `Side ${page}`,
-    no: `Side ${page}`,
-    nn: `Side ${page}`,
-    en: `Page ${page}`,
-    se: `Siidu ${page}`
-  }),
   showsAmountOfTotalItems: (first, last, total) => ({
     nb: `Viser ${first}-${last} av ${total}`,
     no: `Viser ${first}-${last} av ${total}`,
@@ -12305,7 +12504,7 @@ var PhoneInput_default = {
 };
 
 // src/components/PhoneInput/PhoneInput.tsx
-import { jsx as jsx308, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx309, jsxs as jsxs118 } from "react/jsx-runtime";
 var prioritizedCountries = [
   COUNTRIES.NO,
   COUNTRIES.SE,
@@ -12443,7 +12642,7 @@ var PhoneInput = ({
   const showRequiredStyling = !!(required || ariaRequired);
   const bp = props.smallScreenBreakpoint;
   const widthDefault = componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)";
-  return /* @__PURE__ */ jsxs119("div", { className: cn(className, Input_default.container), style, children: [
+  return /* @__PURE__ */ jsxs118("div", { className: cn(className, Input_default.container), style, children: [
     renderLabel({
       label,
       htmlFor: phoneNumberId,
@@ -12451,7 +12650,7 @@ var PhoneInput = ({
       readOnly,
       afterLabelContent
     }),
-    /* @__PURE__ */ jsxs119(
+    /* @__PURE__ */ jsxs118(
       Box,
       {
         display: "flex",
@@ -12464,8 +12663,8 @@ var PhoneInput = ({
         role: "group",
         "aria-label": tGroupLabel,
         children: [
-          /* @__PURE__ */ jsx308("label", { className: utilStyles_default["visually-hidden"], htmlFor: selectId, children: tSelectLabel }),
-          /* @__PURE__ */ jsx308(
+          /* @__PURE__ */ jsx309("label", { className: utilStyles_default["visually-hidden"], htmlFor: selectId, children: tSelectLabel }),
+          /* @__PURE__ */ jsx309(
             NativeSelect,
             {
               width: styleUpToBreakpoint(
@@ -12486,11 +12685,11 @@ var PhoneInput = ({
                 hasTip ? tipId : void 0,
                 ariaDescribedby
               ]),
-              children: countryOptions.map((item, index) => /* @__PURE__ */ jsx308("option", { value: item.countryCode, children: item.label }, index))
+              children: countryOptions.map((item, index) => /* @__PURE__ */ jsx309("option", { value: item.countryCode, children: item.label }, index))
             }
           ),
-          /* @__PURE__ */ jsxs119(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
-            /* @__PURE__ */ jsx308(
+          /* @__PURE__ */ jsxs118(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
+            /* @__PURE__ */ jsx309(
               "span",
               {
                 className: cn(
@@ -12502,7 +12701,7 @@ var PhoneInput = ({
                 children: callingCode
               }
             ),
-            /* @__PURE__ */ jsx308(
+            /* @__PURE__ */ jsx309(
               Box,
               {
                 as: StatefulInput,
@@ -12582,7 +12781,7 @@ var PopoverContext = createContext13({});
 var usePopoverContext = () => useContext20(PopoverContext);
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx309, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs119 } from "react/jsx-runtime";
 var Popover = ({
   id,
   header,
@@ -12663,7 +12862,7 @@ var Popover = ({
   useEffect28(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
-  useOnClickOutside([popoverRef.current, anchorEl], () => {
+  useOnClickOutside([popoverRef, anchorRef], () => {
     if (isOpen && !hasContext) onClose == null ? void 0 : onClose();
   });
   useOnKeyDown("Escape", () => {
@@ -12671,7 +12870,7 @@ var Popover = ({
   });
   const hasTitle = !!header;
   const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
-  const popover = /* @__PURE__ */ jsxs120(
+  const popover = /* @__PURE__ */ jsxs119(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -12702,15 +12901,15 @@ var Popover = ({
       elevation: "large",
       border: "border-subtle",
       children: [
-        header && /* @__PURE__ */ jsx309("div", { className: Popover_default.header, children: typeof header === "string" ? /* @__PURE__ */ jsx309(Heading, { level: 2, typographyType: "headingMedium", children: header }) : header }),
-        /* @__PURE__ */ jsx309(
+        header && /* @__PURE__ */ jsx310("div", { className: Popover_default.header, children: typeof header === "string" ? /* @__PURE__ */ jsx310(Heading, { level: 2, typographyType: "headingMedium", children: header }) : header }),
+        /* @__PURE__ */ jsx310(
           "div",
           {
             className: !hasTitle && withCloseButton ? Popover_default["content--closable--no-header"] : "",
             children
           }
         ),
-        withCloseButton && /* @__PURE__ */ jsx309(
+        withCloseButton && /* @__PURE__ */ jsx310(
           Button,
           {
             icon: CloseIcon,
@@ -12737,7 +12936,7 @@ import {
   useRef as useRef32,
   useState as useState25
 } from "react";
-import { jsx as jsx310 } from "react/jsx-runtime";
+import { jsx as jsx311 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen: propIsOpen,
   setIsOpen: propSetIsOpen,
@@ -12783,8 +12982,8 @@ var PopoverGroup = ({
       (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
     }
   });
-  const elements = [popoverRef.current];
-  if (buttonRef.current) elements.push(buttonRef.current);
+  const elements = [popoverRef];
+  if (buttonRef) elements.push(buttonRef);
   useOnClickOutside(elements, () => {
     if (open) handleClose();
   });
@@ -12798,7 +12997,7 @@ var PopoverGroup = ({
       ref: combinedAnchorRef
     }) : child);
   });
-  return /* @__PURE__ */ jsx310(
+  return /* @__PURE__ */ jsx311(
     PopoverContext,
     {
       value: {
@@ -12856,7 +13055,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment11, jsx as jsx311, jsxs as jsxs121 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx312, jsxs as jsxs120 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -12901,10 +13100,10 @@ var ProgressTrackerItem = (props) => {
   };
   const stepNumberContent = useMemo2(() => {
     if (completed) {
-      return /* @__PURE__ */ jsx311(Icon, { icon: CheckIcon, iconSize: "small" });
+      return /* @__PURE__ */ jsx312(Icon, { icon: CheckIcon, iconSize: "small" });
     }
     if (icon !== void 0) {
-      return /* @__PURE__ */ jsx311(Icon, { icon, iconSize: "small" });
+      return /* @__PURE__ */ jsx312(Icon, { icon, iconSize: "small" });
     }
     return stepNumber;
   }, [completed, icon, index]);
@@ -12913,8 +13112,8 @@ var ProgressTrackerItem = (props) => {
     if (active) return "text-action-resting";
   }
   const isInactiveLink = disabled || active;
-  const stepContent = /* @__PURE__ */ jsxs121(Fragment11, { children: [
-    /* @__PURE__ */ jsx311(
+  const stepContent = /* @__PURE__ */ jsxs120(Fragment12, { children: [
+    /* @__PURE__ */ jsx312(
       Box,
       {
         display: "flex",
@@ -12929,7 +13128,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsx311(
+    /* @__PURE__ */ jsx312(
       Typography,
       {
         as: "div",
@@ -12945,14 +13144,14 @@ var ProgressTrackerItem = (props) => {
     )
   ] });
   const ariaLabel = (htmlProps == null ? void 0 : htmlProps["aria-label"]) ? htmlProps == null ? void 0 : htmlProps["aria-label"] : `${children}, ${stepNumber}. ${completed ? t(texts24.completed) : t(texts24.uncompleted)}`;
-  return /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsx312(
     Box,
     {
       as: "li",
       display: direction === "row" ? "flex" : void 0,
       "aria-current": active ? "step" : void 0,
       className: cn(ProgressTracker_default["list-item"], ProgressTracker_default[`list-item--${direction}`]),
-      children: handleStepChange ? /* @__PURE__ */ jsx311(
+      children: handleStepChange ? /* @__PURE__ */ jsx312(
         Box,
         {
           as: StylelessButton,
@@ -12977,7 +13176,7 @@ var ProgressTrackerItem = (props) => {
           disabled,
           children: stepContent
         }
-      ) : /* @__PURE__ */ jsx311(
+      ) : /* @__PURE__ */ jsx312(
         "div",
         {
           ...getBaseHTMLProps(
@@ -13013,7 +13212,7 @@ var texts24 = createTexts({
 });
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-import { jsx as jsx312 } from "react/jsx-runtime";
+import { jsx as jsx313 } from "react/jsx-runtime";
 var ProgressTracker = (() => {
   const Res = ({
     id,
@@ -13044,7 +13243,7 @@ var ProgressTracker = (() => {
     }, [children]);
     const isRow = direction === "row";
     const { "aria-label": ariaLabel } = htmlProps;
-    return /* @__PURE__ */ jsx312(
+    return /* @__PURE__ */ jsx313(
       ProgressTrackerContext,
       {
         value: {
@@ -13052,12 +13251,12 @@ var ProgressTracker = (() => {
           handleStepChange: handleChange,
           direction
         },
-        children: /* @__PURE__ */ jsx312(
+        children: /* @__PURE__ */ jsx313(
           "nav",
           {
             "aria-label": ariaLabel != null ? ariaLabel : t(texts25.stepProgression),
             ...getBaseHTMLProps(id, className, style, htmlProps, rest),
-            children: /* @__PURE__ */ jsx312(
+            children: /* @__PURE__ */ jsx313(
               Box,
               {
                 as: StylelessOList,
@@ -13117,7 +13316,7 @@ var ProgressBar_default = {
 };
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx313, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx314, jsxs as jsxs121 } from "react/jsx-runtime";
 var PROGRESS_BAR_SIZES = createSizes("small", "medium");
 var ProgressBar = ({
   label,
@@ -13143,9 +13342,9 @@ var ProgressBar = ({
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
   const fillPrecentage = hasValidValue && value / (max != null ? max : 1) * 100 + "%";
   const isIndeterminate = !hasValidValue && !hasErrorMessage;
-  return /* @__PURE__ */ jsxs122(Box, { width: "100%", className, style, children: [
+  return /* @__PURE__ */ jsxs121(Box, { width: "100%", className, style, children: [
     renderLabel({ label, htmlFor: uniqueId }),
-    /* @__PURE__ */ jsx313(
+    /* @__PURE__ */ jsx314(
       "progress",
       {
         id: uniqueId,
@@ -13161,13 +13360,13 @@ var ProgressBar = ({
         children: fillPrecentage
       }
     ),
-    /* @__PURE__ */ jsx313(
+    /* @__PURE__ */ jsx314(
       Box,
       {
         width: getInputWidth(width),
         height: size2 === "small" ? "x0.75" : "x1.5",
         className: cn(ProgressBar_default.progress),
-        children: /* @__PURE__ */ jsx313(
+        children: /* @__PURE__ */ jsx314(
           Box,
           {
             height: "100%",
@@ -13213,7 +13412,7 @@ var Search_default = {
 
 // src/components/Search/SearchSuggestionItem.tsx
 import { useEffect as useEffect30, useRef as useRef33 } from "react";
-import { jsx as jsx314 } from "react/jsx-runtime";
+import { jsx as jsx315 } from "react/jsx-runtime";
 var SearchSuggestionItem = ({
   focus,
   ref,
@@ -13227,7 +13426,7 @@ var SearchSuggestionItem = ({
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  return /* @__PURE__ */ jsx314(
+  return /* @__PURE__ */ jsx315(
     DropdownItem,
     {
       as: StylelessButton,
@@ -13240,7 +13439,7 @@ var SearchSuggestionItem = ({
 SearchSuggestionItem.displayName = "SearchSuggestionItem";
 
 // src/components/Search/SearchSuggestions.tsx
-import { jsx as jsx315, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs122 } from "react/jsx-runtime";
 var SearchSuggestions = ({
   id,
   searchId,
@@ -13260,7 +13459,7 @@ var SearchSuggestions = ({
   const { t } = useTranslation();
   const [focus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, showSuggestions);
   const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
-  return /* @__PURE__ */ jsxs123(
+  return /* @__PURE__ */ jsxs122(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -13285,9 +13484,9 @@ var SearchSuggestions = ({
       overflowY: "scroll",
       marginBlock: "x0.25 0",
       children: [
-        /* @__PURE__ */ jsx315(DropdownHeader, { id: suggestionsHeaderId, children: t(texts26.searchSuggestions) }),
-        /* @__PURE__ */ jsx315(StylelessList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
-          return /* @__PURE__ */ jsx315("li", { role: "option", children: /* @__PURE__ */ jsx315(
+        /* @__PURE__ */ jsx316(DropdownHeader, { id: suggestionsHeaderId, children: t(texts26.searchSuggestions) }),
+        /* @__PURE__ */ jsx316(StylelessList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
+          return /* @__PURE__ */ jsx316("li", { role: "option", children: /* @__PURE__ */ jsx316(
             SearchSuggestionItem,
             {
               index,
@@ -13323,7 +13522,7 @@ var texts26 = createTexts({
 });
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment12, jsx as jsx316, jsxs as jsxs124 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx317, jsxs as jsxs123 } from "react/jsx-runtime";
 var Search = ({
   componentSize = "medium",
   buttonProps,
@@ -13371,7 +13570,7 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  const inputGroup = /* @__PURE__ */ jsxs124(
+  const inputGroup = /* @__PURE__ */ jsxs123(
     HStack,
     {
       position: "relative",
@@ -13382,7 +13581,7 @@ var Search = ({
         Input_default["input-group"]
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx316(
+        showIcon && /* @__PURE__ */ jsx317(
           Icon,
           {
             icon: SearchIcon,
@@ -13393,7 +13592,7 @@ var Search = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx316(
+        /* @__PURE__ */ jsx317(
           Box,
           {
             as: Input,
@@ -13423,8 +13622,8 @@ var Search = ({
             )
           }
         ),
-        hasSuggestions && /* @__PURE__ */ jsxs124(Fragment12, { children: [
-          /* @__PURE__ */ jsx316(
+        hasSuggestions && /* @__PURE__ */ jsxs123(Fragment13, { children: [
+          /* @__PURE__ */ jsx317(
             SearchSuggestions,
             {
               id: suggestionsId,
@@ -13435,9 +13634,9 @@ var Search = ({
               showSuggestions: context.showSuggestions
             }
           ),
-          /* @__PURE__ */ jsx316(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts27.useArrowKeys) })
+          /* @__PURE__ */ jsx317(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts27.useArrowKeys) })
         ] }),
-        hasValue && /* @__PURE__ */ jsx316(
+        hasValue && /* @__PURE__ */ jsx317(
           ClearButton,
           {
             size: "component",
@@ -13452,10 +13651,10 @@ var Search = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs124("div", { children: [
+  return /* @__PURE__ */ jsxs123("div", { children: [
     renderLabel({ htmlFor: uniqueId, label }),
-    /* @__PURE__ */ jsxs124("div", { children: [
-      showSearchButton ? /* @__PURE__ */ jsxs124(
+    /* @__PURE__ */ jsxs123("div", { children: [
+      showSearchButton ? /* @__PURE__ */ jsxs123(
         Grid,
         {
           className,
@@ -13467,7 +13666,7 @@ var Search = ({
           style,
           children: [
             inputGroup,
-            /* @__PURE__ */ jsx316(
+            /* @__PURE__ */ jsx317(
               Button,
               {
                 size: componentSize,
@@ -13514,7 +13713,7 @@ import {
   useRef as useRef34,
   useState as useState28
 } from "react";
-import { jsx as jsx317 } from "react/jsx-runtime";
+import { jsx as jsx318 } from "react/jsx-runtime";
 var SearchAutocompleteWrapper = (props) => {
   const {
     value,
@@ -13577,7 +13776,7 @@ var SearchAutocompleteWrapper = (props) => {
   };
   const inputRef = useRef34(null);
   const suggestionsRef = useRef34(null);
-  useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
+  useOnClickOutside([inputRef, suggestionsRef], () => {
     closeSuggestions();
   });
   useOnKeyDown("Tab", () => closeSuggestions());
@@ -13590,7 +13789,7 @@ var SearchAutocompleteWrapper = (props) => {
     inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return /* @__PURE__ */ jsx317(AutocompleteSearchContext, { value: contextProps, children });
+  return /* @__PURE__ */ jsx318(AutocompleteSearchContext, { value: contextProps, children });
 };
 SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
 
@@ -13606,7 +13805,7 @@ var Skeleton_default = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx318 } from "react/jsx-runtime";
+import { jsx as jsx319 } from "react/jsx-runtime";
 var Skeleton = ({
   width,
   height,
@@ -13616,7 +13815,7 @@ var Skeleton = ({
   ref,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsx319(
     Box,
     {
       width,
@@ -13636,7 +13835,7 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx320 } from "react/jsx-runtime";
 var SkipToContent = ({
   text = "Til hovedinnhold",
   top = 0,
@@ -13646,7 +13845,7 @@ var SkipToContent = ({
   style,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx319(
+  return /* @__PURE__ */ jsx320(
     Contrast,
     {
       padding: "x0.25",
@@ -13658,7 +13857,7 @@ var SkipToContent = ({
       className: cn(className, SkipToContent_default.wrapper),
       style,
       top,
-      children: /* @__PURE__ */ jsx319(Link, { ...rest, ...htmlProps, id, typographyType: "bodyShortMedium", children: text })
+      children: /* @__PURE__ */ jsx320(Link, { ...rest, ...htmlProps, id, typographyType: "bodyShortMedium", children: text })
     }
   );
 };
@@ -13676,7 +13875,7 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-import { jsx as jsx320, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs124 } from "react/jsx-runtime";
 var SplitButton = ({
   size: size2,
   primaryAction,
@@ -13691,8 +13890,8 @@ var SplitButton = ({
     purpose,
     size: size2
   };
-  return /* @__PURE__ */ jsxs125("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
-    /* @__PURE__ */ jsx320(
+  return /* @__PURE__ */ jsxs124("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
+    /* @__PURE__ */ jsx321(
       Button,
       {
         ...buttonStyleProps,
@@ -13701,8 +13900,8 @@ var SplitButton = ({
         className: SplitButton_default.main
       }
     ),
-    /* @__PURE__ */ jsxs125(OverflowMenuGroup, { isOpen, setIsOpen, children: [
-      /* @__PURE__ */ jsx320(
+    /* @__PURE__ */ jsxs124(OverflowMenuGroup, { isOpen, setIsOpen, children: [
+      /* @__PURE__ */ jsx321(
         Button,
         {
           ...buttonStyleProps,
@@ -13716,7 +13915,7 @@ var SplitButton = ({
           type: "button"
         }
       ),
-      /* @__PURE__ */ jsx320(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ jsx320(OverflowMenuList, { children: secondaryActions.map((item, index) => /* @__PURE__ */ jsx320(OverflowMenuButton, { ...item, children: item.children }, index)) }) })
+      /* @__PURE__ */ jsx321(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ jsx321(OverflowMenuList, { children: secondaryActions.map((item, index) => /* @__PURE__ */ jsx321(OverflowMenuButton, { ...item, children: item.children }, index)) }) })
     ] })
   ] });
 };
@@ -13734,7 +13933,7 @@ var texts28 = createTexts({
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children4,
-  Fragment as Fragment13,
+  Fragment as Fragment14,
   cloneElement as cloneElement6,
   isValidElement as isValidElement6,
   useEffect as useEffect33,
@@ -13750,14 +13949,14 @@ var CollapsibleTableContext = createContext16({
 var useCollapsibleTableContext = () => useContext24(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-import { jsx as jsx321 } from "react/jsx-runtime";
-var Body = (props) => /* @__PURE__ */ jsx321("tbody", { ...props });
+import { jsx as jsx322 } from "react/jsx-runtime";
+var Body = (props) => /* @__PURE__ */ jsx322("tbody", { ...props });
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
 import { createContext as createContext17, useContext as useContext25 } from "react";
-import { jsx as jsx322 } from "react/jsx-runtime";
-var Head = ({ children, ...rest }) => /* @__PURE__ */ jsx322("thead", { ...rest, children: /* @__PURE__ */ jsx322(HeadContext, { value: true, children }) });
+import { jsx as jsx323 } from "react/jsx-runtime";
+var Head = ({ children, ...rest }) => /* @__PURE__ */ jsx323("thead", { ...rest, children: /* @__PURE__ */ jsx323(HeadContext, { value: true, children }) });
 var HeadContext = createContext17(false);
 function useIsInTableHead() {
   const isInTableHead = useContext25(HeadContext);
@@ -13765,7 +13964,7 @@ function useIsInTableHead() {
 }
 
 // src/components/Table/normal/Cell.tsx
-import { jsx as jsx323 } from "react/jsx-runtime";
+import { jsx as jsx324 } from "react/jsx-runtime";
 var Cell = ({
   children,
   type: _type,
@@ -13778,7 +13977,7 @@ var Cell = ({
   const type = _type != null ? _type : isInHead ? "head" : "data";
   const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
   const isComplexLayout = layout === "text and icon";
-  return isCollapsibleChild ? /* @__PURE__ */ jsx323(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx323(
+  return isCollapsibleChild ? /* @__PURE__ */ jsx324(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ jsx324(
     "th",
     {
       ...rest,
@@ -13787,26 +13986,26 @@ var Cell = ({
         !isComplexLayout && Table_default[`cell--${layout}`],
         Table_default["cell--head"]
       ),
-      children: isComplexLayout ? /* @__PURE__ */ jsx323("div", { className: Table_default.cell__inner, children }) : children
+      children: isComplexLayout ? /* @__PURE__ */ jsx324("div", { className: Table_default.cell__inner, children }) : children
     }
-  ) : /* @__PURE__ */ jsx323(
+  ) : /* @__PURE__ */ jsx324(
     "td",
     {
       ...rest,
       className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-      children: isComplexLayout ? /* @__PURE__ */ jsx323("div", { className: Table_default.cell__inner, children }) : children
+      children: isComplexLayout ? /* @__PURE__ */ jsx324("div", { className: Table_default.cell__inner, children }) : children
     }
   );
 };
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-import { jsx as jsx324 } from "react/jsx-runtime";
-var Foot = (props) => /* @__PURE__ */ jsx324("tfoot", { ...props });
+import { jsx as jsx325 } from "react/jsx-runtime";
+var Foot = (props) => /* @__PURE__ */ jsx325("tfoot", { ...props });
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-import { jsx as jsx325 } from "react/jsx-runtime";
+import { jsx as jsx326 } from "react/jsx-runtime";
 var Row = ({
   type: _type,
   mode = "normal",
@@ -13817,7 +14016,7 @@ var Row = ({
 }) => {
   const isInHeader = useIsInTableHead();
   const type = _type != null ? _type : isInHeader ? "head" : "body";
-  return /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsx326(
     "tr",
     {
       className: cn(
@@ -13837,7 +14036,7 @@ var Row = ({
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-import { jsx as jsx326, jsxs as jsxs126 } from "react/jsx-runtime";
+import { jsx as jsx327, jsxs as jsxs125 } from "react/jsx-runtime";
 var SortCell = ({
   isSorted,
   sortOrder,
@@ -13851,13 +14050,13 @@ var SortCell = ({
     if (sortOrder === "ascending") return ChevronDownIcon;
     return ChevronUpIcon;
   };
-  return /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsx327(
     Cell,
     {
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs126(
+      children: /* @__PURE__ */ jsxs125(
         StylelessButton,
         {
           onClick,
@@ -13866,7 +14065,7 @@ var SortCell = ({
           children: [
             children,
             " ",
-            /* @__PURE__ */ jsx326(Icon, { icon: SortIcon(), iconSize: "component" })
+            /* @__PURE__ */ jsx327(Icon, { icon: SortIcon(), iconSize: "component" })
           ]
         }
       )
@@ -13885,7 +14084,7 @@ var texts29 = createTexts({
 });
 
 // src/components/Table/normal/Table.tsx
-import { jsx as jsx327 } from "react/jsx-runtime";
+import { jsx as jsx328 } from "react/jsx-runtime";
 var Table = ({
   size: size2 = "medium",
   stickyHeader,
@@ -13904,7 +14103,7 @@ var Table = ({
         return "medium";
     }
   };
-  return /* @__PURE__ */ jsx327(
+  return /* @__PURE__ */ jsx328(
     "table",
     {
       ...rest,
@@ -13931,7 +14130,7 @@ import {
   useRef as useRef35,
   useState as useState30
 } from "react";
-import { jsx as jsx328 } from "react/jsx-runtime";
+import { jsx as jsx329 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
   const themeContext = useContext26(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
@@ -13956,7 +14155,7 @@ var TableWrapper = ({ className, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsx329(
     "div",
     {
       ref: wrapperRef,
@@ -13983,7 +14182,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment14, jsx as jsx329, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx330, jsxs as jsxs126 } from "react/jsx-runtime";
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -14026,24 +14225,24 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ jsxs127(Fragment13, { children: [
-      /* @__PURE__ */ jsx329(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+    return /* @__PURE__ */ jsxs126(Fragment14, { children: [
+      /* @__PURE__ */ jsx330(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       isValidElement6(child) && cloneElement6(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
   }) : null;
-  const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx329(Row, { ...rowProps(), children: /* @__PURE__ */ jsx329(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx329(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+  const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx330(Row, { ...rowProps(), children: /* @__PURE__ */ jsx330(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx330(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
   const definingColumnCells = childrenArray.slice().filter((column, index) => definingColumnIndex.indexOf(index) > -1).sort((a, b) => {
     return definingColumnIndex.indexOf(childrenArray.indexOf(a)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
   });
   const headerRow = () => {
     if (type !== "head" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsx329(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs127(Fragment14, { children: [
+    return /* @__PURE__ */ jsx330(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs126(Fragment15, { children: [
       definingColumnCells,
-      /* @__PURE__ */ jsxs127(Table2.Cell, { type: "head", layout: "center", children: [
+      /* @__PURE__ */ jsxs126(Table2.Cell, { type: "head", layout: "center", children: [
         t(texts30.expand),
-        /* @__PURE__ */ jsx329(VisuallyHidden, { children: t(texts30.row) })
+        /* @__PURE__ */ jsx330(VisuallyHidden, { children: t(texts30.row) })
       ] })
     ] }) });
   };
@@ -14051,16 +14250,16 @@ var CollapsibleRow = ({
   const rowWithChevron = () => {
     if (type !== "body" || !isCollapsed) return null;
     const iconState = childrenCollapsed ? "down" : "up";
-    return /* @__PURE__ */ jsxs127(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
+    return /* @__PURE__ */ jsxs126(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
       definingColumnCells,
-      /* @__PURE__ */ jsx329(Table2.Cell, { children: /* @__PURE__ */ jsx329(
+      /* @__PURE__ */ jsx330(Table2.Cell, { children: /* @__PURE__ */ jsx330(
         StylelessButton,
         {
           onClick: () => setChildrenCollapsed(!childrenCollapsed),
           "aria-expanded": !childrenCollapsed,
           "aria-controls": idList,
           className: cn(Table_default["collapse-button"], focusable),
-          children: /* @__PURE__ */ jsx329(
+          children: /* @__PURE__ */ jsx330(
             Icon,
             {
               icon: AnimatedChevronUpDownIcon,
@@ -14072,13 +14271,13 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs127(Fragment14, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs126(Fragment15, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ jsxs127(Fragment14, { children: [
+    type === "body" && /* @__PURE__ */ jsxs126(Fragment15, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
-  ] }) : /* @__PURE__ */ jsx329(Row, { ref, ...rowProps(), children });
+  ] }) : /* @__PURE__ */ jsx330(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 var texts30 = createTexts({
@@ -14099,14 +14298,14 @@ var texts30 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-import { jsx as jsx330 } from "react/jsx-runtime";
+import { jsx as jsx331 } from "react/jsx-runtime";
 var CollapsibleTable = ({
   isCollapsed,
   headerValues,
   definingColumnIndex = [0],
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx330(
+  return /* @__PURE__ */ jsx331(
     CollapsibleTableContext,
     {
       value: {
@@ -14114,7 +14313,7 @@ var CollapsibleTable = ({
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx330(Table2, { ...rest })
+      children: /* @__PURE__ */ jsx331(Table2, { ...rest })
     }
   );
 };
@@ -14164,13 +14363,13 @@ import {
   useContext as useContext28,
   useLayoutEffect as useLayoutEffect4
 } from "react";
-import { jsx as jsx331 } from "react/jsx-runtime";
+import { jsx as jsx332 } from "react/jsx-runtime";
 var TabContext = createContext19(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx332(
     TabContext,
     {
       value: {
@@ -14202,7 +14401,7 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/AddTabButton.tsx
-import { jsx as jsx332, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx333, jsxs as jsxs127 } from "react/jsx-runtime";
 var AddTabButton = ({
   ref,
   children,
@@ -14215,7 +14414,7 @@ var AddTabButton = ({
   const buttonRef = useRef36(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
-  return /* @__PURE__ */ jsxs128(
+  return /* @__PURE__ */ jsxs127(
     "button",
     {
       ...rest,
@@ -14228,8 +14427,8 @@ var AddTabButton = ({
         focus_default["focusable--inset"]
       ),
       children: [
-        /* @__PURE__ */ jsx332(Icon, { icon: PlusIcon, iconSize: "inherit" }),
-        /* @__PURE__ */ jsx332("span", { children })
+        /* @__PURE__ */ jsx333(Icon, { icon: PlusIcon, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx333("span", { children })
       ]
     }
   );
@@ -14238,7 +14437,7 @@ AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
 import { useEffect as useEffect34, useId as useId28, useRef as useRef37, useState as useState32 } from "react";
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx334 } from "react/jsx-runtime";
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
   id,
@@ -14269,7 +14468,7 @@ var Tabs = ({
       setActiveTab(activeTab);
     }
   }, [activeTab, thisActiveTab]);
-  return /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsx334(
     TabsContext,
     {
       value: {
@@ -14284,7 +14483,7 @@ var Tabs = ({
         tabContentDirection,
         addTabButtonProps
       },
-      children: /* @__PURE__ */ jsx333(
+      children: /* @__PURE__ */ jsx334(
         Box,
         {
           ...getBaseHTMLProps(uniqueId, className, style, htmlProps, rest),
@@ -14303,7 +14502,7 @@ import {
   useEffect as useEffect35,
   useRef as useRef38
 } from "react";
-import { jsx as jsx334, jsxs as jsxs129 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs128 } from "react/jsx-runtime";
 var Tab = ({
   active = false,
   icon,
@@ -14346,7 +14545,7 @@ var Tab = ({
     handleSelect();
     onKeyDown == null ? void 0 : onKeyDown(e);
   };
-  return /* @__PURE__ */ jsxs129(
+  return /* @__PURE__ */ jsxs128(
     "button",
     {
       ...getBaseHTMLProps(
@@ -14371,8 +14570,8 @@ var Tab = ({
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon && /* @__PURE__ */ jsx334(Icon, { icon, iconSize: "component" }),
-        /* @__PURE__ */ jsx334("span", { children })
+        icon && /* @__PURE__ */ jsx335(Icon, { icon, iconSize: "component" }),
+        /* @__PURE__ */ jsx335("span", { children })
       ]
     }
   );
@@ -14386,7 +14585,7 @@ import {
   isValidElement as isValidElement7,
   useState as useState33
 } from "react";
-import { jsx as jsx335, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx336, jsxs as jsxs129 } from "react/jsx-runtime";
 var TabList = ({
   children,
   id,
@@ -14444,7 +14643,7 @@ var TabList = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tab-widths"]: widths.join(" ")
   };
-  return /* @__PURE__ */ jsx335(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsxs130(
+  return /* @__PURE__ */ jsx336(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsxs129(
     "div",
     {
       ...rest,
@@ -14464,7 +14663,7 @@ var TabList = ({
       style: { ...style, ...customWidths },
       children: [
         tabListChildren,
-        hasButton && /* @__PURE__ */ jsx335(
+        hasButton && /* @__PURE__ */ jsx336(
           AddTabButton,
           {
             index: tabListChildren ? tabListChildren.length : 0,
@@ -14478,7 +14677,7 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-import { jsx as jsx336 } from "react/jsx-runtime";
+import { jsx as jsx337 } from "react/jsx-runtime";
 var TabPanel = ({
   active = false,
   children,
@@ -14488,7 +14687,7 @@ var TabPanel = ({
   htmlProps,
   padding = "x0.25",
   ...rest
-}) => /* @__PURE__ */ jsx336(
+}) => /* @__PURE__ */ jsx337(
   Box,
   {
     padding,
@@ -14507,7 +14706,7 @@ import {
   cloneElement as cloneElement8,
   isValidElement as isValidElement8
 } from "react";
-import { jsx as jsx337 } from "react/jsx-runtime";
+import { jsx as jsx338 } from "react/jsx-runtime";
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
@@ -14522,7 +14721,7 @@ var TabPanels = ({ children, ref, ...rest }) => {
       }
     });
   });
-  return /* @__PURE__ */ jsx337(Box, { ref: combinedRef, ...rest, children: panelChildren });
+  return /* @__PURE__ */ jsx338(Box, { ref: combinedRef, ...rest, children: panelChildren });
 };
 TabPanels.displayName = "TabPanels";
 
@@ -14543,7 +14742,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx338, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx339, jsxs as jsxs130 } from "react/jsx-runtime";
 var icons3 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -14570,7 +14769,7 @@ var Tag = ({
   ...rest
 }) => {
   const icon = icons3[purpose];
-  return /* @__PURE__ */ jsxs131(
+  return /* @__PURE__ */ jsxs130(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -14587,8 +14786,8 @@ var Tag = ({
         rest
       ),
       children: [
-        withIcon && icon && /* @__PURE__ */ jsx338(Icon, { icon, iconSize: "component" }),
-        /* @__PURE__ */ jsx338(TextOverflowEllipsisInner, { children })
+        withIcon && icon && /* @__PURE__ */ jsx339(Icon, { icon, iconSize: "component" }),
+        /* @__PURE__ */ jsx339(TextOverflowEllipsisInner, { children })
       ]
     }
   );
@@ -14611,7 +14810,7 @@ var TextInput_default = {
 };
 
 // src/components/TextInput/TextInput.tsx
-import { jsx as jsx339, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx340, jsxs as jsxs131 } from "react/jsx-runtime";
 var TextInput = ({
   label,
   afterLabelContent,
@@ -14711,7 +14910,7 @@ var TextInput = ({
     disabled && TextInput_default["affix--disabled"]
   ];
   if (hasIcon) {
-    extendedInput = /* @__PURE__ */ jsxs132(
+    extendedInput = /* @__PURE__ */ jsxs131(
       Box,
       {
         className: cn(
@@ -14720,7 +14919,7 @@ var TextInput = ({
         ),
         width: inputWidth,
         children: [
-          /* @__PURE__ */ jsx339(
+          /* @__PURE__ */ jsx340(
             Icon,
             {
               icon,
@@ -14731,7 +14930,7 @@ var TextInput = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx339(
+          /* @__PURE__ */ jsx340(
             StatefulInput,
             {
               className: cn(
@@ -14745,7 +14944,7 @@ var TextInput = ({
       }
     );
   } else if (hasAffix) {
-    extendedInput = /* @__PURE__ */ jsxs132(
+    extendedInput = /* @__PURE__ */ jsxs131(
       Box,
       {
         position: "relative",
@@ -14753,7 +14952,7 @@ var TextInput = ({
         alignItems: "center",
         width: inputWidth,
         children: [
-          prefix2 && /* @__PURE__ */ jsx339(
+          prefix2 && /* @__PURE__ */ jsx340(
             "span",
             {
               ref: prefixRef,
@@ -14766,7 +14965,7 @@ var TextInput = ({
               children: prefix2
             }
           ),
-          /* @__PURE__ */ jsx339(
+          /* @__PURE__ */ jsx340(
             StatefulInput,
             {
               style: {
@@ -14777,7 +14976,7 @@ var TextInput = ({
               ...generalInputProps
             }
           ),
-          suffix && /* @__PURE__ */ jsx339(
+          suffix && /* @__PURE__ */ jsx340(
             "span",
             {
               ref: suffixRef,
@@ -14795,7 +14994,7 @@ var TextInput = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs132(
+  return /* @__PURE__ */ jsxs131(
     "div",
     {
       className: cn(
@@ -14814,8 +15013,8 @@ var TextInput = ({
           readOnly,
           afterLabelContent
         }),
-        extendedInput ? extendedInput : /* @__PURE__ */ jsx339(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
-        hasBottomContainer && /* @__PURE__ */ jsxs132(
+        extendedInput ? extendedInput : /* @__PURE__ */ jsx340(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
+        hasBottomContainer && /* @__PURE__ */ jsxs131(
           Box,
           {
             display: "flex",
@@ -14860,7 +15059,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { jsx as jsx340, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx341, jsxs as jsxs132 } from "react/jsx-runtime";
 var ToggleBar = (props) => {
   const {
     children,
@@ -14885,7 +15084,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ jsx340(
+  return /* @__PURE__ */ jsx341(
     ToggleBarContext,
     {
       value: {
@@ -14895,7 +15094,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ jsxs133(
+      children: /* @__PURE__ */ jsxs132(
         VStack,
         {
           ...getBaseHTMLProps(id, className, style, htmlProps, rest),
@@ -14904,8 +15103,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ jsx340(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ jsx340("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ jsx341(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
+            /* @__PURE__ */ jsx341("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -14916,7 +15115,7 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 import { useId as useId31 } from "react";
-import { jsx as jsx341, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx342, jsxs as jsxs133 } from "react/jsx-runtime";
 var typographyTypes = {
   large: "bodyShortLarge",
   medium: "bodyShortMedium",
@@ -14959,13 +15158,13 @@ var ToggleRadio = ({
   const hasLabel = !!label;
   const hasIcon = !!icon;
   const contentTypeCn = !hasLabel ? "just-icon" : !hasIcon ? "just-text" : "with-text-and-icon";
-  return /* @__PURE__ */ jsxs134(
+  return /* @__PURE__ */ jsxs133(
     "label",
     {
       htmlFor: uniqueId,
       className: cn(ToggleBar_default.label, ToggleBar_default[`label--${group.purpose}`]),
       children: [
-        /* @__PURE__ */ jsx341(
+        /* @__PURE__ */ jsx342(
           HiddenInput,
           {
             ...getBaseHTMLProps(
@@ -14984,7 +15183,7 @@ var ToggleRadio = ({
             "aria-labelledby": ariaLabelledBy
           }
         ),
-        /* @__PURE__ */ jsxs134(
+        /* @__PURE__ */ jsxs133(
           Typography,
           {
             as: "span",
@@ -14997,8 +15196,8 @@ var ToggleRadio = ({
               focus_default["focus-styled-sibling"]
             ),
             children: [
-              icon && /* @__PURE__ */ jsx341(Icon, { icon, iconSize: "component" }),
-              label && /* @__PURE__ */ jsx341("span", { children: label })
+              icon && /* @__PURE__ */ jsx342(Icon, { icon, iconSize: "component" }),
+              label && /* @__PURE__ */ jsx342("span", { children: label })
             ]
           }
         )
@@ -15020,7 +15219,7 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { jsx as jsx342, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs134 } from "react/jsx-runtime";
 var ToggleButton = ({
   id,
   label,
@@ -15034,8 +15233,8 @@ var ToggleButton = ({
   const generatedId = useId32();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ jsxs135(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
-    /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsxs134(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
+    /* @__PURE__ */ jsx343(
       HiddenInput,
       {
         ...getBaseHTMLProps(
@@ -15048,7 +15247,7 @@ var ToggleButton = ({
         type: "checkbox"
       }
     ),
-    /* @__PURE__ */ jsxs135(
+    /* @__PURE__ */ jsxs134(
       "span",
       {
         className: cn(
@@ -15059,7 +15258,7 @@ var ToggleButton = ({
           focus_default["focus-styled-sibling"]
         ),
         children: [
-          hasIcon && /* @__PURE__ */ jsx342(Icon, { icon, iconSize: "component" }),
+          hasIcon && /* @__PURE__ */ jsx343(Icon, { icon, iconSize: "component" }),
           " ",
           label
         ]
@@ -15071,7 +15270,7 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 import { useId as useId33 } from "react";
-import { jsx as jsx343, jsxs as jsxs136 } from "react/jsx-runtime";
+import { jsx as jsx344, jsxs as jsxs135 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -15086,7 +15285,7 @@ var ToggleButtonGroup = (props) => {
   } = props;
   const generatedId = useId33();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ jsxs136(
+  return /* @__PURE__ */ jsxs135(
     "div",
     {
       ...getBaseHTMLProps(id, className, style, htmlProps, rest),
@@ -15094,7 +15293,7 @@ var ToggleButtonGroup = (props) => {
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
         renderGroupLabel({ label, id: uniqueLabelId }),
-        /* @__PURE__ */ jsx343(Box, { display: "flex", flexWrap: "wrap", gap: "x0.75", flexDirection: direction, children })
+        /* @__PURE__ */ jsx344(Box, { display: "flex", flexWrap: "wrap", gap: "x0.75", flexDirection: direction, children })
       ]
     }
   );
@@ -15313,6 +15512,7 @@ export {
   MoreHorizontalIcon,
   MoreVerticalIcon,
   NativeSelect,
+  NewsPopover,
   NotarialIcon,
   NotebookPenIcon,
   NotificationsIcon,