@norges-domstoler/dds-components 22.11.0 → 23.0.0

package/dist/index.js

@@ -243,6 +243,7 @@ __export(index_exports, {
   MoreHorizontalIcon: () => MoreHorizontalIcon,
   MoreVerticalIcon: () => MoreVerticalIcon,
   NativeSelect: () => NativeSelect,
+  NewsPopover: () => NewsPopover,
   NotarialIcon: () => NotarialIcon,
   NotebookPenIcon: () => NotebookPenIcon,
   NotificationsIcon: () => NotificationsIcon,
@@ -433,9 +434,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",
@@ -752,6 +751,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})`;
@@ -759,6 +773,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);
 };
@@ -766,6 +787,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) => {
@@ -956,7 +984,7 @@ var import_react8 = require("react");
 function useOnClickOutside(element, handler) {
   (0, import_react8.useEffect)(() => {
     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)
       );
@@ -1449,6 +1477,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",
@@ -1617,6 +1646,7 @@ var Box = ({
   alignItems,
   alignContent,
   justifyItems,
+  placeItems,
   justifyContent,
   flexWrap,
   flexBasis,
@@ -1655,6 +1685,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"),
@@ -1698,6 +1729,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"],
@@ -2016,7 +2048,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
@@ -2475,7 +2542,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),
@@ -4235,15 +4302,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__ */ (0, import_jsx_runtime197.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
     Box,
     {
       ...getBaseHTMLProps(
@@ -4252,7 +4314,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,
@@ -4272,11 +4333,7 @@ var Typography = (props) => {
       ),
       as,
       rel: relProp,
-      target: targetProp,
-      children: [
-        children,
-        externalLinkProp && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { icon: OpenExternalIcon, iconSize: "inherit" })
-      ]
+      children
     }
   );
 };
@@ -4468,21 +4525,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__ */ (0, import_jsx_runtime202.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     ElementAs,
     {
       as,
@@ -4491,7 +4546,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`],
@@ -4506,17 +4561,7 @@ var Link = ({
         rest
       ),
       ...aProps,
-      children: [
-        children,
-        external && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-          Icon,
-          {
-            iconSize: "inherit",
-            icon: OpenExternalIcon,
-            className: typographyStyles_default.svg
-          }
-        )
-      ]
+      children
     }
   );
 };
@@ -5334,7 +5379,7 @@ var OverflowMenuGroup = ({
     if (isOpen) onClose == null ? void 0 : onClose();
     toggle();
   };
-  useOnClickOutside([menuRef.current, buttonRef.current], () => {
+  useOnClickOutside([menuRef, buttonRef], () => {
     handleClose();
   });
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -6872,7 +6917,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);
   (0, import_react41.useEffect)(() => {
     var _a;
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
@@ -8178,7 +8223,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);
@@ -8193,8 +8238,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();
@@ -8357,7 +8402,7 @@ var DrawerGroup = ({
         drawerId: uniqueDrawerId,
         isOpen,
         onClose: handleClose,
-        triggerEl: triggerRef.current
+        triggerRef
       },
       children: Children7
     }
@@ -10279,7 +10324,7 @@ var InlineEditContextProvider = (props) => {
   };
   useOnKeyDown(["Enter"], () => onExitHandler());
   useOnKeyDown(["Escape"], () => onExitHandler());
-  useOnClickOutside(inputRef == null ? void 0 : inputRef.current, () => onExitHandler());
+  useOnClickOutside(inputRef, () => onExitHandler());
   return /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
     InlineEditContext,
     {
@@ -11074,6 +11119,189 @@ var import_jsx_runtime304 = require("react/jsx-runtime");
 var ModalActions = (props) => /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(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
+var import_jsx_runtime305 = require("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__ */ (0, import_jsx_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+      Paper,
+      {
+        background: "brand-secondary-subtle",
+        width: "100%",
+        borderRadius: "0",
+        display: "grid",
+        placeItems: "center",
+        paddingBlock: "x0.5",
+        children: [
+          i !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(VisuallyHidden, { children: t(commonTexts.pageOf(i + 1, news.length)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Box, { height: "113px", maxWidth: "380px", className: NewsPopover_default["img-wrapper"], children: el.image })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(VStack, { gap: "x0.75", alignItems: "center", margin: "x0.75 x0.75 x1 x0.75", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Heading, { level: 3, children: el.heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Paragraph, { textAlign: "center", children: el.text })
+    ] })
+  ] });
+  const content = isList ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Box, { as: StylelessList, width: "100%", children: news.map((el, i) => {
+    const active = activeSlide === i;
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("li", { "aria-current": active, hidden: !active, children: slideContent(el, i) }, i);
+  }) }) : /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(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__ */ (0, import_jsx_runtime305.jsxs)(
+    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__ */ (0, import_jsx_runtime305.jsx)(HStack, { margin: "x0.75 x3 x0.75 x0.75", children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Heading, { id: headerId, level: 2, typographyType: "headingSmall", children: header }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+          VStack,
+          {
+            alignItems: "center",
+            height: isList ? "299px" : void 0,
+            "aria-live": "polite",
+            children: [
+              content,
+              isList && /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(HStack, { alignItems: "center", gap: "x1", marginBlock: "auto 0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+                  Button,
+                  {
+                    "aria-label": t(commonTexts.previousPage),
+                    size: "small",
+                    purpose: "tertiary",
+                    icon: ChevronLeftIcon,
+                    onClick: () => handlePrevious()
+                  }
+                ),
+                news.map((slide, i) => {
+                  const active = activeSlide === i;
+                  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+                    Icon,
+                    {
+                      iconSize: "small",
+                      icon: CircleFilledIcon,
+                      color: active ? "brand-tertiary-default" : "brand-tertiary-subtle"
+                    }
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+                  Button,
+                  {
+                    "aria-label": t(commonTexts.nextPage),
+                    size: "small",
+                    purpose: "tertiary",
+                    icon: ChevronRightIcon,
+                    onClick: () => handleNext()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+                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
 var import_react76 = require("react");
 
@@ -11377,7 +11605,7 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
 // src/components/Select/SelectComponents.tsx
 var import_react73 = __toESM(require("react"));
 var import_react_select = require("react-select");
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var {
   Option,
   NoOptionsMessage,
@@ -11390,25 +11618,25 @@ var {
 } = import_react_select.components;
 var DDSOption = ({
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(Option, { ...props, children: [
+  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
-var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Option, { ...props, children: import_react73.default.createElement(props.customElement, props) });
+var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Option, { ...props, children: import_react73.default.createElement(props.customElement, props) });
 var CustomSingleValue = ({
   id,
   Element,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Element, { ...props }) : props.children }) });
-var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(NoOptionsMessage, { ...props, children: "Ingen treff" });
+}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Element, { ...props }) : props.children }) });
+var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(NoOptionsMessage, { ...props, children: "Ingen treff" });
 var DDSClearIndicator = ({
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
-var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
+var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "component" }) });
 var DDSDropdownIndicator = (props) => {
   const { className, componentSize, ...rest } = props;
   const iconState = rest.selectProps.menuIsOpen ? "up" : "down";
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
     DropdownIndicator,
     {
       ...rest,
@@ -11417,7 +11645,7 @@ var DDSDropdownIndicator = (props) => {
         Select_default["dropdown-indicator"],
         Input_default[`input-with-el-right--${componentSize}`]
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
         Icon,
         {
           icon: AnimatedChevronUpDownIcon,
@@ -11432,7 +11660,7 @@ var DDSInput = ({
   ariaInvalid,
   ariaDescribedby,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
   Input2,
   {
     ...props,
@@ -11452,7 +11680,7 @@ function DDSControl(props) {
     ...rest
   } = props;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     Control,
     {
       ...rest,
@@ -11469,7 +11697,7 @@ function DDSControl(props) {
         hasIcon && Input_default[`input-with-icon--${componentSize}`]
       ),
       children: [
-        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           Icon,
           {
             icon,
@@ -11487,7 +11715,7 @@ function DDSControl(props) {
 }
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 function Select({
   id,
   label,
@@ -11538,7 +11766,7 @@ function Select({
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
   const customInput = (0, import_react74.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
       DDSInput,
       {
         ...props,
@@ -11556,7 +11784,7 @@ function Select({
     []
   );
   const customSingleValue = (0, import_react74.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
       CustomSingleValue,
       {
         ...props,
@@ -11567,15 +11795,15 @@ function Select({
     []
   );
   const customClearIndicator = (0, import_react74.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(DDSClearIndicator, { ...props }),
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(DDSClearIndicator, { ...props }),
     []
   );
   const customDropdownIndicator = (0, import_react74.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(DDSDropdownIndicator, { ...props, componentSize }),
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(DDSDropdownIndicator, { ...props, componentSize }),
     []
   );
   const customControl = (0, import_react74.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
       DDSControl,
       {
         ...props,
@@ -11590,9 +11818,9 @@ function Select({
   const customOptionComponent = (0, import_react74.useCallback)(
     (props) => {
       if (customOptionElement) {
-        return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CustomOption, { ...props, customElement: customOptionElement });
+        return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(DDSOption, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -11633,7 +11861,7 @@ function Select({
     openMenuOnClick: readOnly ? false : openMenuOnClick ? openMenuOnClick : void 0,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     Box,
     {
       width: inputWidth,
@@ -11654,7 +11882,7 @@ function Select({
           readOnly,
           afterLabelContent
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(import_react_select2.default, { ...reactSelectProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select2.default, { ...reactSelectProps, ref }),
         renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
       ]
     }
@@ -11683,7 +11911,7 @@ var NativeSelect_default = {
 };
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var NativeSelect = ({
   ref,
   id,
@@ -11752,7 +11980,7 @@ var NativeSelect = ({
   const iconSize = componentSize === "medium" ? "medium" : "small";
   const showClearButton = clearable && hasValue && !readOnly && !rest.disabled;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className, style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className, style, children: [
     renderLabel({
       label,
       htmlFor: uniqueId,
@@ -11760,7 +11988,7 @@ var NativeSelect = ({
       readOnly,
       afterLabelContent
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
       Box,
       {
         position: "relative",
@@ -11770,7 +11998,7 @@ var NativeSelect = ({
           Input_default["input-group"]
         ),
         children: [
-          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             Icon,
             {
               icon,
@@ -11781,7 +12009,7 @@ var NativeSelect = ({
               iconSize: "component"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             "select",
             {
               ref: useCombinedRef(ref, selectRef),
@@ -11815,7 +12043,7 @@ var NativeSelect = ({
               children
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             ClearButton,
             {
               "aria-label": t(commonTexts.clearSelect),
@@ -11824,7 +12052,7 @@ var NativeSelect = ({
               className: NativeSelect_default[`clear-button--${componentSize}`]
             }
           ),
-          !multiple && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+          !multiple && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             Icon,
             {
               icon: ChevronDownIcon,
@@ -11847,7 +12075,7 @@ var NativeSelect = ({
 var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
@@ -11902,7 +12130,7 @@ var Pagination = ({
   };
   const listItems = items.length > 0 ? items.map((item, i) => {
     const isActive = item === activePage;
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("li", { className: Pagination_default.list__item, children: item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("li", { className: Pagination_default.list__item, children: item !== "truncator" && typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       Button,
       {
         purpose: isActive ? "primary" : "secondary",
@@ -11910,10 +12138,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__ */ (0, import_jsx_runtime308.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       Icon,
       {
         icon: MoreHorizontalIcon,
@@ -11921,7 +12149,7 @@ var Pagination = ({
       }
     ) }, `pagination-item-${i}`);
   }) : void 0;
-  const previousPageButton = /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  const previousPageButton = /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
     Button,
     {
       purpose: "secondary",
@@ -11930,10 +12158,10 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts22.previousPage)
+      "aria-label": t(commonTexts.previousPage)
     }
   );
-  const nextPageButton = /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  const nextPageButton = /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
     Button,
     {
       purpose: "secondary",
@@ -11942,13 +12170,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__ */ (0, import_jsx_runtime308.jsxs)(
+  const navigation = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
     Box,
     {
       as: "nav",
@@ -11960,14 +12188,14 @@ var Pagination = ({
         ...baseHTMLProps
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
           ShowHide,
           {
             as: "ol",
             hideBelow: smallScreenBreakpoint,
             className: Pagination_default.list,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -11979,7 +12207,7 @@ var Pagination = ({
                 }
               ),
               listItems,
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -11993,14 +12221,14 @@ var Pagination = ({
             ]
           }
         ),
-        !!smallScreenBreakpoint && /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+        !!smallScreenBreakpoint && /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
           ShowHide,
           {
             as: "ol",
             showBelow: smallScreenBreakpoint,
             className: Pagination_default.list,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -12008,7 +12236,7 @@ var Pagination = ({
                     isOnFirstPage && Pagination_default["list__item--hidden"]
                   ),
                   "aria-hidden": isOnFirstPage,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                     Button,
                     {
                       purpose: "secondary",
@@ -12022,7 +12250,7 @@ var Pagination = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -12033,7 +12261,7 @@ var Pagination = ({
                   children: previousPageButton
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("li", { className: Pagination_default.list__item, children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 Button,
                 {
                   size: "small",
@@ -12043,7 +12271,7 @@ var Pagination = ({
                   children: activePage
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -12054,7 +12282,7 @@ var Pagination = ({
                   children: nextPageButton
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "li",
                 {
                   className: cn(
@@ -12062,7 +12290,7 @@ var Pagination = ({
                     isOnLastPage && Pagination_default["list__item--hidden"]
                   ),
                   "aria-hidden": isOnLastPage,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                     Button,
                     {
                       purpose: "secondary",
@@ -12084,7 +12312,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__ */ (0, import_jsx_runtime308.jsxs)(
+  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
     Box,
     {
       display: "flex",
@@ -12095,7 +12323,7 @@ var Pagination = ({
       alignItems: styleUpToBreakpoint("center", smallScreenBreakpoint),
       ...baseHTMLProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
           Box,
           {
             display: "grid",
@@ -12103,7 +12331,7 @@ var Pagination = ({
             alignItems: "center",
             className: Pagination_default.indicators,
             children: [
-              withSelect && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              withSelect && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 Select,
                 {
                   options: tSelectOptions,
@@ -12119,7 +12347,7 @@ var Pagination = ({
                   "aria-label": t(texts22.itemsPerPage)
                 }
               ),
-              withCounter && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Paragraph, { typographyType: "bodyShortMedium", children: t(
+              withCounter && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(Paragraph, { typographyType: "bodyShortMedium", children: t(
                 texts22.showsAmountOfTotalItems(
                   activePageFirstItem,
                   activePageLastItem,
@@ -12150,20 +12378,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",
@@ -12178,20 +12392,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}`,
@@ -12609,7 +12809,7 @@ var PhoneInput_default = {
 };
 
 // src/components/PhoneInput/PhoneInput.tsx
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var prioritizedCountries = [
   COUNTRIES.NO,
   COUNTRIES.SE,
@@ -12747,7 +12947,7 @@ var PhoneInput = ({
   const showRequiredStyling = !!(required || ariaRequired);
   const bp = props.smallScreenBreakpoint;
   const widthDefault = componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)";
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { className: cn(className, Input_default.container), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: cn(className, Input_default.container), style, children: [
     renderLabel({
       label,
       htmlFor: phoneNumberId,
@@ -12755,7 +12955,7 @@ var PhoneInput = ({
       readOnly,
       afterLabelContent
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
       Box,
       {
         display: "flex",
@@ -12768,8 +12968,8 @@ var PhoneInput = ({
         role: "group",
         "aria-label": tGroupLabel,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("label", { className: utilStyles_default["visually-hidden"], htmlFor: selectId, children: tSelectLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("label", { className: utilStyles_default["visually-hidden"], htmlFor: selectId, children: tSelectLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
             NativeSelect,
             {
               width: styleUpToBreakpoint(
@@ -12790,11 +12990,11 @@ var PhoneInput = ({
                 hasTip ? tipId : void 0,
                 ariaDescribedby
               ]),
-              children: countryOptions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("option", { value: item.countryCode, children: item.label }, index))
+              children: countryOptions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("option", { value: item.countryCode, children: item.label }, index))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
-            /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
               "span",
               {
                 className: cn(
@@ -12806,7 +13006,7 @@ var PhoneInput = ({
                 children: callingCode
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
               Box,
               {
                 as: StatefulInput,
@@ -12879,7 +13079,7 @@ var PopoverContext = (0, import_react78.createContext)({});
 var usePopoverContext = () => (0, import_react78.useContext)(PopoverContext);
 
 // src/components/Popover/Popover.tsx
-var import_jsx_runtime310 = require("react/jsx-runtime");
+var import_jsx_runtime311 = require("react/jsx-runtime");
 var Popover = ({
   id,
   header,
@@ -12960,7 +13160,7 @@ var Popover = ({
   (0, import_react79.useEffect)(() => {
     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", () => {
@@ -12968,7 +13168,7 @@ var Popover = ({
   });
   const hasTitle = !!header;
   const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
-  const popover = /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -12999,15 +13199,15 @@ var Popover = ({
       elevation: "large",
       border: "border-subtle",
       children: [
-        header && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: Popover_default.header, children: typeof header === "string" ? /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(Heading, { level: 2, typographyType: "headingMedium", children: header }) : header }),
-        /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+        header && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: Popover_default.header, children: typeof header === "string" ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Heading, { level: 2, typographyType: "headingMedium", children: header }) : header }),
+        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           "div",
           {
             className: !hasTitle && withCloseButton ? Popover_default["content--closable--no-header"] : "",
             children
           }
         ),
-        withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+        withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           Button,
           {
             icon: CloseIcon,
@@ -13027,7 +13227,7 @@ Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
 var import_react80 = require("react");
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen: propIsOpen,
   setIsOpen: propSetIsOpen,
@@ -13073,8 +13273,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();
   });
@@ -13088,7 +13288,7 @@ var PopoverGroup = ({
       ref: combinedAnchorRef
     }) : child);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     PopoverContext,
     {
       value: {
@@ -13139,7 +13339,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 var import_react82 = require("react");
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -13184,10 +13384,10 @@ var ProgressTrackerItem = (props) => {
   };
   const stepNumberContent = (0, import_react82.useMemo)(() => {
     if (completed) {
-      return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
+      return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
     if (icon !== void 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(Icon, { icon, iconSize: "small" });
+      return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Icon, { icon, iconSize: "small" });
     }
     return stepNumber;
   }, [completed, icon, index]);
@@ -13196,8 +13396,8 @@ var ProgressTrackerItem = (props) => {
     if (active) return "text-action-resting";
   }
   const isInactiveLink = disabled || active;
-  const stepContent = /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+  const stepContent = /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_jsx_runtime313.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
       Box,
       {
         display: "flex",
@@ -13212,7 +13412,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
       Typography,
       {
         as: "div",
@@ -13228,14 +13428,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__ */ (0, import_jsx_runtime312.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
     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__ */ (0, import_jsx_runtime312.jsx)(
+      children: handleStepChange ? /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
         Box,
         {
           as: StylelessButton,
@@ -13260,7 +13460,7 @@ var ProgressTrackerItem = (props) => {
           disabled,
           children: stepContent
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
         "div",
         {
           ...getBaseHTMLProps(
@@ -13296,7 +13496,7 @@ var texts24 = createTexts({
 });
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime314 = require("react/jsx-runtime");
 var ProgressTracker = (() => {
   const Res = ({
     id,
@@ -13327,7 +13527,7 @@ var ProgressTracker = (() => {
     }, [children]);
     const isRow = direction === "row";
     const { "aria-label": ariaLabel } = htmlProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
       ProgressTrackerContext,
       {
         value: {
@@ -13335,12 +13535,12 @@ var ProgressTracker = (() => {
           handleStepChange: handleChange,
           direction
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
           "nav",
           {
             "aria-label": ariaLabel != null ? ariaLabel : t(texts25.stepProgression),
             ...getBaseHTMLProps(id, className, style, htmlProps, rest),
-            children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
               Box,
               {
                 as: StylelessOList,
@@ -13400,7 +13600,7 @@ var ProgressBar_default = {
 };
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_jsx_runtime314 = require("react/jsx-runtime");
+var import_jsx_runtime315 = require("react/jsx-runtime");
 var PROGRESS_BAR_SIZES = createSizes("small", "medium");
 var ProgressBar = ({
   label,
@@ -13426,9 +13626,9 @@ var ProgressBar = ({
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
   const fillPrecentage = hasValidValue && value / (max != null ? max : 1) * 100 + "%";
   const isIndeterminate = !hasValidValue && !hasErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(Box, { width: "100%", className, style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(Box, { width: "100%", className, style, children: [
     renderLabel({ label, htmlFor: uniqueId }),
-    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
       "progress",
       {
         id: uniqueId,
@@ -13444,13 +13644,13 @@ var ProgressBar = ({
         children: fillPrecentage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
       Box,
       {
         width: getInputWidth(width),
         height: size2 === "small" ? "x0.75" : "x1.5",
         className: cn(ProgressBar_default.progress),
-        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
           Box,
           {
             height: "100%",
@@ -13490,7 +13690,7 @@ var Search_default = {
 
 // src/components/Search/SearchSuggestionItem.tsx
 var import_react86 = require("react");
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var SearchSuggestionItem = ({
   focus,
   ref,
@@ -13504,7 +13704,7 @@ var SearchSuggestionItem = ({
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
     DropdownItem,
     {
       as: StylelessButton,
@@ -13517,7 +13717,7 @@ var SearchSuggestionItem = ({
 SearchSuggestionItem.displayName = "SearchSuggestionItem";
 
 // src/components/Search/SearchSuggestions.tsx
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var SearchSuggestions = ({
   id,
   searchId,
@@ -13537,7 +13737,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__ */ (0, import_jsx_runtime316.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -13562,9 +13762,9 @@ var SearchSuggestions = ({
       overflowY: "scroll",
       marginBlock: "x0.25 0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(DropdownHeader, { id: suggestionsHeaderId, children: t(texts26.searchSuggestions) }),
-        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(StylelessList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(DropdownHeader, { id: suggestionsHeaderId, children: t(texts26.searchSuggestions) }),
+        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(StylelessList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
             SearchSuggestionItem,
             {
               index,
@@ -13600,7 +13800,7 @@ var texts26 = createTexts({
 });
 
 // src/components/Search/Search.tsx
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var Search = ({
   componentSize = "medium",
   buttonProps,
@@ -13648,7 +13848,7 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  const inputGroup = /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
+  const inputGroup = /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(
     HStack,
     {
       position: "relative",
@@ -13659,7 +13859,7 @@ var Search = ({
         Input_default["input-group"]
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           Icon,
           {
             icon: SearchIcon,
@@ -13670,7 +13870,7 @@ var Search = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           Box,
           {
             as: Input,
@@ -13700,8 +13900,8 @@ var Search = ({
             )
           }
         ),
-        hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(import_jsx_runtime317.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(import_jsx_runtime318.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
             SearchSuggestions,
             {
               id: suggestionsId,
@@ -13712,9 +13912,9 @@ var Search = ({
               showSuggestions: context.showSuggestions
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts27.useArrowKeys) })
+          /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts27.useArrowKeys) })
         ] }),
-        hasValue && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        hasValue && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           ClearButton,
           {
             size: "component",
@@ -13729,10 +13929,10 @@ var Search = ({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { children: [
     renderLabel({ htmlFor: uniqueId, label }),
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { children: [
-      showSearchButton ? /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { children: [
+      showSearchButton ? /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(
         Grid,
         {
           className,
@@ -13744,7 +13944,7 @@ var Search = ({
           style,
           children: [
             inputGroup,
-            /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
               Button,
               {
                 size: componentSize,
@@ -13787,7 +13987,7 @@ var texts27 = createTexts({
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
 var import_react88 = require("react");
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
     value,
@@ -13850,7 +14050,7 @@ var SearchAutocompleteWrapper = (props) => {
   };
   const inputRef = (0, import_react88.useRef)(null);
   const suggestionsRef = (0, import_react88.useRef)(null);
-  useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
+  useOnClickOutside([inputRef, suggestionsRef], () => {
     closeSuggestions();
   });
   useOnKeyDown("Tab", () => closeSuggestions());
@@ -13863,7 +14063,7 @@ var SearchAutocompleteWrapper = (props) => {
     inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(AutocompleteSearchContext, { value: contextProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(AutocompleteSearchContext, { value: contextProps, children });
 };
 SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
 
@@ -13879,7 +14079,7 @@ var Skeleton_default = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var Skeleton = ({
   width,
   height,
@@ -13889,7 +14089,7 @@ var Skeleton = ({
   ref,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
     Box,
     {
       width,
@@ -13909,7 +14109,7 @@ var SkipToContent_default = {
 };
 
 // src/components/SkipToContent/SkipToContent.tsx
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var SkipToContent = ({
   text = "Til hovedinnhold",
   top = 0,
@@ -13919,7 +14119,7 @@ var SkipToContent = ({
   style,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
     Contrast,
     {
       padding: "x0.25",
@@ -13931,7 +14131,7 @@ var SkipToContent = ({
       className: cn(className, SkipToContent_default.wrapper),
       style,
       top,
-      children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Link, { ...rest, ...htmlProps, id, typographyType: "bodyShortMedium", children: text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(Link, { ...rest, ...htmlProps, id, typographyType: "bodyShortMedium", children: text })
     }
   );
 };
@@ -13949,7 +14149,7 @@ var SplitButton_default = {
 };
 
 // src/components/SplitButton/SplitButton.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var SplitButton = ({
   size: size2,
   primaryAction,
@@ -13964,8 +14164,8 @@ var SplitButton = ({
     purpose,
     size: size2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: cn(className, SplitButton_default.container), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
       Button,
       {
         ...buttonStyleProps,
@@ -13974,8 +14174,8 @@ var SplitButton = ({
         className: SplitButton_default.main
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(OverflowMenuGroup, { isOpen, setIsOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(OverflowMenuGroup, { isOpen, setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
         Button,
         {
           ...buttonStyleProps,
@@ -13989,7 +14189,7 @@ var SplitButton = ({
           type: "button"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(OverflowMenuList, { children: secondaryActions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(OverflowMenuButton, { ...item, children: item.children }, index)) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(OverflowMenu, { placement: "bottom-end", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(OverflowMenuList, { children: secondaryActions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(OverflowMenuButton, { ...item, children: item.children }, index)) }) })
     ] })
   ] });
 };
@@ -14016,14 +14216,14 @@ var CollapsibleTableContext = (0, import_react90.createContext)({
 var useCollapsibleTableContext = () => (0, import_react90.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
-var import_jsx_runtime322 = require("react/jsx-runtime");
-var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("tbody", { ...props });
+var import_jsx_runtime323 = require("react/jsx-runtime");
+var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("tbody", { ...props });
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
 var import_react91 = require("react");
-var import_jsx_runtime323 = require("react/jsx-runtime");
-var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(HeadContext, { value: true, children }) });
+var import_jsx_runtime324 = require("react/jsx-runtime");
+var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(HeadContext, { value: true, children }) });
 var HeadContext = (0, import_react91.createContext)(false);
 function useIsInTableHead() {
   const isInTableHead = (0, import_react91.useContext)(HeadContext);
@@ -14031,7 +14231,7 @@ function useIsInTableHead() {
 }
 
 // src/components/Table/normal/Cell.tsx
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var Cell = ({
   children,
   type: _type,
@@ -14044,7 +14244,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__ */ (0, import_jsx_runtime324.jsx)(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+  return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(DescriptionListDesc, { children }) : type === "head" ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
     "th",
     {
       ...rest,
@@ -14053,26 +14253,26 @@ var Cell = ({
         !isComplexLayout && Table_default[`cell--${layout}`],
         Table_default["cell--head"]
       ),
-      children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: Table_default.cell__inner, children }) : children
+      children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: Table_default.cell__inner, children }) : children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
     "td",
     {
       ...rest,
       className: cn(className, !isComplexLayout && Table_default[`cell--${layout}`]),
-      children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: Table_default.cell__inner, children }) : children
+      children: isComplexLayout ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: Table_default.cell__inner, children }) : children
     }
   );
 };
 Cell.displayName = "Table.Cell";
 
 // src/components/Table/normal/Foot.tsx
-var import_jsx_runtime325 = require("react/jsx-runtime");
-var Foot = (props) => /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("tfoot", { ...props });
+var import_jsx_runtime326 = require("react/jsx-runtime");
+var Foot = (props) => /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("tfoot", { ...props });
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/normal/Row.tsx
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var Row = ({
   type: _type,
   mode = "normal",
@@ -14083,7 +14283,7 @@ var Row = ({
 }) => {
   const isInHeader = useIsInTableHead();
   const type = _type != null ? _type : isInHeader ? "head" : "body";
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
     "tr",
     {
       className: cn(
@@ -14103,7 +14303,7 @@ var Row = ({
 Row.displayName = "Table.Row";
 
 // src/components/Table/normal/SortCell.tsx
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var SortCell = ({
   isSorted,
   sortOrder,
@@ -14117,13 +14317,13 @@ var SortCell = ({
     if (sortOrder === "ascending") return ChevronDownIcon;
     return ChevronUpIcon;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
     Cell,
     {
       type: "head",
       "aria-sort": isSorted && sortOrder ? sortOrder : void 0,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(
         StylelessButton,
         {
           onClick,
@@ -14132,7 +14332,7 @@ var SortCell = ({
           children: [
             children,
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Icon, { icon: SortIcon(), iconSize: "component" })
+            /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Icon, { icon: SortIcon(), iconSize: "component" })
           ]
         }
       )
@@ -14151,7 +14351,7 @@ var texts29 = createTexts({
 });
 
 // src/components/Table/normal/Table.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime329 = require("react/jsx-runtime");
 var Table = ({
   size: size2 = "medium",
   stickyHeader,
@@ -14170,7 +14370,7 @@ var Table = ({
         return "medium";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
     "table",
     {
       ...rest,
@@ -14192,7 +14392,7 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 var import_react92 = require("react");
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
   const themeContext = (0, import_react92.useContext)(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
@@ -14217,7 +14417,7 @@ var TableWrapper = ({ className, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
     "div",
     {
       ref: wrapperRef,
@@ -14244,7 +14444,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -14287,24 +14487,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__ */ (0, import_jsx_runtime330.jsxs)(import_react93.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
+    return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(import_react93.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       (0, import_react93.isValidElement)(child) && (0, import_react93.cloneElement)(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
   }) : null;
-  const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(Row, { ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+  const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Row, { ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Cell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(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__ */ (0, import_jsx_runtime330.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(import_jsx_runtime330.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(import_jsx_runtime331.Fragment, { children: [
       definingColumnCells,
-      /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
         t(texts30.expand),
-        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(VisuallyHidden, { children: t(texts30.row) })
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(VisuallyHidden, { children: t(texts30.row) })
       ] })
     ] }) });
   };
@@ -14312,16 +14512,16 @@ var CollapsibleRow = ({
   const rowWithChevron = () => {
     if (type !== "body" || !isCollapsed) return null;
     const iconState = childrenCollapsed ? "down" : "up";
-    return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(Row, { ref, ...rowProps(!childrenCollapsed && true), children: [
       definingColumnCells,
-      /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
         StylelessButton,
         {
           onClick: () => setChildrenCollapsed(!childrenCollapsed),
           "aria-expanded": !childrenCollapsed,
           "aria-controls": idList,
           className: cn(Table_default["collapse-button"], focusable),
-          children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
             Icon,
             {
               icon: AnimatedChevronUpDownIcon,
@@ -14333,13 +14533,13 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(import_jsx_runtime330.Fragment, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(import_jsx_runtime331.Fragment, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(import_jsx_runtime330.Fragment, { children: [
+    type === "body" && /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(import_jsx_runtime331.Fragment, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(Row, { ref, ...rowProps(), children });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
 var texts30 = createTexts({
@@ -14360,14 +14560,14 @@ var texts30 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleTable.tsx
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var CollapsibleTable = ({
   isCollapsed,
   headerValues,
   definingColumnIndex = [0],
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     CollapsibleTableContext,
     {
       value: {
@@ -14375,7 +14575,7 @@ var CollapsibleTable = ({
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Table2, { ...rest })
+      children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Table2, { ...rest })
     }
   );
 };
@@ -14421,13 +14621,13 @@ var Tabs_default = {
 
 // src/components/Tabs/TabWidthContext.tsx
 var import_react95 = require("react");
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime333 = require("react/jsx-runtime");
 var TabContext = (0, import_react95.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     TabContext,
     {
       value: {
@@ -14459,7 +14659,7 @@ function useSetTabWidth(index, width) {
 }
 
 // src/components/Tabs/AddTabButton.tsx
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var AddTabButton = ({
   ref,
   children,
@@ -14472,7 +14672,7 @@ var AddTabButton = ({
   const buttonRef = (0, import_react96.useRef)(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
     "button",
     {
       ...rest,
@@ -14485,8 +14685,8 @@ var AddTabButton = ({
         focus_default["focusable--inset"]
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(Icon, { icon: PlusIcon, iconSize: "inherit" }),
-        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("span", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(Icon, { icon: PlusIcon, iconSize: "inherit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { children })
       ]
     }
   );
@@ -14495,7 +14695,7 @@ AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
 var import_react97 = require("react");
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
   id,
@@ -14526,7 +14726,7 @@ var Tabs = ({
       setActiveTab(activeTab);
     }
   }, [activeTab, thisActiveTab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     TabsContext,
     {
       value: {
@@ -14541,7 +14741,7 @@ var Tabs = ({
         tabContentDirection,
         addTabButtonProps
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
         Box,
         {
           ...getBaseHTMLProps(uniqueId, className, style, htmlProps, rest),
@@ -14556,7 +14756,7 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 var import_react98 = require("react");
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var Tab = ({
   active = false,
   icon,
@@ -14599,7 +14799,7 @@ var Tab = ({
     handleSelect();
     onKeyDown == null ? void 0 : onKeyDown(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)(
     "button",
     {
       ...getBaseHTMLProps(
@@ -14624,8 +14824,8 @@ var Tab = ({
       onKeyDown: handleOnKeyDown,
       tabIndex: focus ? 0 : -1,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(Icon, { icon, iconSize: "component" }),
-        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { children })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(Icon, { icon, iconSize: "component" }),
+        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("span", { children })
       ]
     }
   );
@@ -14634,7 +14834,7 @@ Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
 var import_react99 = require("react");
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var TabList = ({
   children,
   id,
@@ -14692,7 +14892,7 @@ var TabList = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ["--dds-tab-widths"]: widths.join(" ")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
     "div",
     {
       ...rest,
@@ -14712,7 +14912,7 @@ var TabList = ({
       style: { ...style, ...customWidths },
       children: [
         tabListChildren,
-        hasButton && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+        hasButton && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
           AddTabButton,
           {
             index: tabListChildren ? tabListChildren.length : 0,
@@ -14726,7 +14926,7 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabPanel.tsx
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var TabPanel = ({
   active = false,
   children,
@@ -14736,7 +14936,7 @@ var TabPanel = ({
   htmlProps,
   padding = "x0.25",
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
   Box,
   {
     padding,
@@ -14751,7 +14951,7 @@ TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
 var import_react100 = require("react");
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
@@ -14766,7 +14966,7 @@ var TabPanels = ({ children, ref, ...rest }) => {
       }
     });
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(Box, { ref: combinedRef, ...rest, children: panelChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Box, { ref: combinedRef, ...rest, children: panelChildren });
 };
 TabPanels.displayName = "TabPanels";
 
@@ -14787,7 +14987,7 @@ var Tag_default = {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var icons3 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -14814,7 +15014,7 @@ var Tag = ({
   ...rest
 }) => {
   const icon = icons3[purpose];
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
     TextOverflowEllipsisWrapper,
     {
       ...getBaseHTMLProps(
@@ -14831,8 +15031,8 @@ var Tag = ({
         rest
       ),
       children: [
-        withIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Icon, { icon, iconSize: "component" }),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(TextOverflowEllipsisInner, { children })
+        withIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Icon, { icon, iconSize: "component" }),
+        /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(TextOverflowEllipsisInner, { children })
       ]
     }
   );
@@ -14855,7 +15055,7 @@ var TextInput_default = {
 };
 
 // src/components/TextInput/TextInput.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TextInput = ({
   label,
   afterLabelContent,
@@ -14955,7 +15155,7 @@ var TextInput = ({
     disabled && TextInput_default["affix--disabled"]
   ];
   if (hasIcon) {
-    extendedInput = /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
+    extendedInput = /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
       Box,
       {
         className: cn(
@@ -14964,7 +15164,7 @@ var TextInput = ({
         ),
         width: inputWidth,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
             Icon,
             {
               icon,
@@ -14975,7 +15175,7 @@ var TextInput = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
             StatefulInput,
             {
               className: cn(
@@ -14989,7 +15189,7 @@ var TextInput = ({
       }
     );
   } else if (hasAffix) {
-    extendedInput = /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
+    extendedInput = /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
       Box,
       {
         position: "relative",
@@ -14997,7 +15197,7 @@ var TextInput = ({
         alignItems: "center",
         width: inputWidth,
         children: [
-          prefix2 && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+          prefix2 && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
             "span",
             {
               ref: prefixRef,
@@ -15010,7 +15210,7 @@ var TextInput = ({
               children: prefix2
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
             StatefulInput,
             {
               style: {
@@ -15021,7 +15221,7 @@ var TextInput = ({
               ...generalInputProps
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
             "span",
             {
               ref: suffixRef,
@@ -15039,7 +15239,7 @@ var TextInput = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
     "div",
     {
       className: cn(
@@ -15058,8 +15258,8 @@ var TextInput = ({
           readOnly,
           afterLabelContent
         }),
-        extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
-        hasBottomContainer && /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(
+        extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Box, { as: StatefulInput, width: inputWidth, ...generalInputProps }),
+        hasBottomContainer && /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
           Box,
           {
             display: "flex",
@@ -15104,7 +15304,7 @@ var ToggleBar_default = {
 };
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var ToggleBar = (props) => {
   const {
     children,
@@ -15129,7 +15329,7 @@ var ToggleBar = (props) => {
     (e) => onChange && onChange(e, e.target.value)
   );
   const labelId = label && `${uniqueId}-label`;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     ToggleBarContext,
     {
       value: {
@@ -15139,7 +15339,7 @@ var ToggleBar = (props) => {
         name,
         value: groupValue
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
         VStack,
         {
           ...getBaseHTMLProps(id, className, style, htmlProps, rest),
@@ -15148,8 +15348,8 @@ var ToggleBar = (props) => {
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: ToggleBar_default.bar, children })
+            label && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Typography, { id: labelId, as: "span", typographyType: "labelMedium", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: ToggleBar_default.bar, children })
           ]
         }
       )
@@ -15160,7 +15360,7 @@ ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
 var import_react104 = require("react");
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var typographyTypes = {
   large: "bodyShortLarge",
   medium: "bodyShortMedium",
@@ -15203,13 +15403,13 @@ var ToggleRadio = ({
   const hasLabel = !!label;
   const hasIcon = !!icon;
   const contentTypeCn = !hasLabel ? "just-icon" : !hasIcon ? "just-text" : "with-text-and-icon";
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(
     "label",
     {
       htmlFor: uniqueId,
       className: cn(ToggleBar_default.label, ToggleBar_default[`label--${group.purpose}`]),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
           HiddenInput,
           {
             ...getBaseHTMLProps(
@@ -15228,7 +15428,7 @@ var ToggleRadio = ({
             "aria-labelledby": ariaLabelledBy
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(
           Typography,
           {
             as: "span",
@@ -15241,8 +15441,8 @@ var ToggleRadio = ({
               focus_default["focus-styled-sibling"]
             ),
             children: [
-              icon && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { icon, iconSize: "component" }),
-              label && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { children: label })
+              icon && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Icon, { icon, iconSize: "component" }),
+              label && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("span", { children: label })
             ]
           }
         )
@@ -15264,7 +15464,7 @@ var ToggleButton_default = {
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var ToggleButton = ({
   id,
   label,
@@ -15278,8 +15478,8 @@ var ToggleButton = ({
   const generatedId = (0, import_react105.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       HiddenInput,
       {
         ...getBaseHTMLProps(
@@ -15292,7 +15492,7 @@ var ToggleButton = ({
         type: "checkbox"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
       "span",
       {
         className: cn(
@@ -15303,7 +15503,7 @@ var ToggleButton = ({
           focus_default["focus-styled-sibling"]
         ),
         children: [
-          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Icon, { icon, iconSize: "component" }),
+          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Icon, { icon, iconSize: "component" }),
           " ",
           label
         ]
@@ -15315,7 +15515,7 @@ ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
 var import_react106 = require("react");
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
     children,
@@ -15330,7 +15530,7 @@ var ToggleButtonGroup = (props) => {
   } = props;
   const generatedId = (0, import_react106.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
     "div",
     {
       ...getBaseHTMLProps(id, className, style, htmlProps, rest),
@@ -15338,7 +15538,7 @@ var ToggleButtonGroup = (props) => {
       "aria-labelledby": label ? uniqueLabelId : void 0,
       children: [
         renderGroupLabel({ label, id: uniqueLabelId }),
-        /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Box, { display: "flex", flexWrap: "wrap", gap: "x0.75", flexDirection: direction, children })
+        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Box, { display: "flex", flexWrap: "wrap", gap: "x0.75", flexDirection: direction, children })
       ]
     }
   );
@@ -15558,6 +15758,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   MoreHorizontalIcon,
   MoreVerticalIcon,
   NativeSelect,
+  NewsPopover,
   NotarialIcon,
   NotebookPenIcon,
   NotificationsIcon,