@norges-domstoler/dds-components 21.1.0 → 21.2.1

package/dist/index.mjs

@@ -2664,6 +2664,7 @@ var getLiteralScreenSize = (screenSize) => {
 // src/components/helpers/StylelessList/StylelessList.tsx
 import { jsx as jsx176 } from "react/jsx-runtime";
 var StylelessList = ({ className, ...rest }) => /* @__PURE__ */ jsx176("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
+var StylelessOList = ({ className, ...rest }) => /* @__PURE__ */ jsx176("ol", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
 
 // src/components/helpers/styling/utils.ts
 var outlineOffset = "var(--dds-spacing-x0-125)";
@@ -4586,7 +4587,7 @@ var SelectionControl_default = {
 };
 
 // src/components/SelectionControl/SelectionControl.styles.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx211, jsxs as jsxs34 } from "react/jsx-runtime";
 var SelectionControl = ({
   controlType,
   className,
@@ -4612,8 +4613,14 @@ var Label2 = ({
   ...rest
 }) => {
   return /* @__PURE__ */ jsx211(
-    "label",
+    Box,
     {
+      as: "label",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      width: "fit-content",
+      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
       className: cn(
         className,
         SelectionControl_default.label,
@@ -4629,6 +4636,35 @@ var Label2 = ({
     }
   );
 };
+var GroupLabel = ({
+  id,
+  showRequiredMarker,
+  readOnly,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs34(
+    Typography,
+    {
+      as: "span",
+      typographyType: "labelMedium",
+      id,
+      className: readOnly ? Label_default["read-only"] : void 0,
+      children: [
+        readOnly && /* @__PURE__ */ jsx211(
+          Icon,
+          {
+            icon: LockIcon,
+            className: Label_default["read-only__icon"],
+            iconSize: "small"
+          }
+        ),
+        children,
+        " ",
+        showRequiredMarker && /* @__PURE__ */ jsx211(RequiredMarker, {})
+      ]
+    }
+  );
+};
 
 // src/components/SelectionControl/SelectionControl.utils.tsx
 var selectionControlSizeNumberPx = 18;
@@ -4640,7 +4676,7 @@ var selectionControlTypographyProps = {
 };
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-import { jsx as jsx212, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx212, jsxs as jsxs35 } from "react/jsx-runtime";
 var Checkbox = ({
   id,
   name,
@@ -4664,15 +4700,9 @@ 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__ */ jsxs34(
-    Box,
+  return /* @__PURE__ */ jsxs35(
+    Label2,
     {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      width: "fit-content",
-      paddingInline: "calc(18px + var(--dds-spacing-x0-5)) 0",
-      as: Label2,
       hasError,
       disabled: isDisabled,
       readOnly: isReadOnly,
@@ -4728,6 +4758,17 @@ Checkbox.displayName = "Checkbox";
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
 import { useId as useId6 } from "react";
 
+// src/types/Booleanish.ts
+function convertBooleanishToBoolean(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  } else {
+    return value;
+  }
+}
+
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
@@ -4736,7 +4777,7 @@ var InputMessage_default = {
 };
 
 // src/components/InputMessage/InputMessage.tsx
-import { Fragment as Fragment3, jsx as jsx213, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx213, jsxs as jsxs36 } from "react/jsx-runtime";
 var InputMessage = ({
   message,
   messageType,
@@ -4746,7 +4787,7 @@ var InputMessage = ({
   ...rest
 }) => {
   const isError = messageType === "error";
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ...getBaseHTMLProps(
@@ -4771,7 +4812,7 @@ var InputMessage = ({
   );
 };
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs35(Fragment3, { children: [
+var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs36(Fragment3, { children: [
   errorMessage && errorMessageId && /* @__PURE__ */ jsx213(
     InputMessage,
     {
@@ -4784,7 +4825,7 @@ var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PUR
 ] });
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx214, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs37 } from "react/jsx-runtime";
 var CheckboxGroup = (props) => {
   const {
     label,
@@ -4805,7 +4846,7 @@ var CheckboxGroup = (props) => {
   const generatedId = useId6();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const errorMessageId = derivativeIdGenerator(uniqueGroupId, "errorMessage");
   const tipId = derivativeIdGenerator(uniqueGroupId, "tip");
   const contextProps = {
@@ -4816,7 +4857,7 @@ var CheckboxGroup = (props) => {
     disabled,
     readOnly
   };
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ...getBaseHTMLProps(
@@ -4826,19 +4867,13 @@ var CheckboxGroup = (props) => {
         rest
       ),
       children: [
-        label !== void 0 ? /* @__PURE__ */ jsxs36(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ jsx214(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ jsx214(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ jsx214(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
         ) : null,
         renderInputMessage(tip, tipId),
@@ -4865,7 +4900,7 @@ var CookieBanner_default = {
 };
 
 // src/components/CookieBanner/CookieBannerCheckbox.tsx
-import { jsx as jsx215, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs38 } from "react/jsx-runtime";
 function CookieBannerCheckbox({
   headerText,
   description,
@@ -4883,9 +4918,9 @@ function CookieBannerCheckbox({
         htmlProps,
         rest
       ),
-      children: /* @__PURE__ */ jsxs37(VStack, { gap: "x0.5", children: [
+      children: /* @__PURE__ */ jsxs38(VStack, { gap: "x0.5", children: [
         /* @__PURE__ */ jsx215(Typography, { as: "span", typographyType: "headingSmall", children: headerText }),
-        /* @__PURE__ */ jsxs37(Typography, { as: "span", children: [
+        /* @__PURE__ */ jsxs38(Typography, { as: "span", children: [
           " ",
           description,
           " "
@@ -4897,7 +4932,7 @@ function CookieBannerCheckbox({
 CookieBannerCheckbox.displayName = "CookieBannerCheckbox";
 
 // src/components/CookieBanner/CookieBanner.tsx
-import { jsx as jsx216, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs39 } from "react/jsx-runtime";
 function CookieBanner({
   headerText,
   description,
@@ -4928,7 +4963,7 @@ function CookieBanner({
       maxHeight,
       border: "border-default",
       background: "brand-tertiary-medium",
-      children: /* @__PURE__ */ jsxs38(VStack, { maxWidth: "70ch", gap: "x1", children: [
+      children: /* @__PURE__ */ jsxs39(VStack, { maxWidth: "70ch", gap: "x1", children: [
         headerText && /* @__PURE__ */ jsx216(Heading, { level: 2, typographyType: "headingMedium", children: headerText }),
         children,
         description && /* @__PURE__ */ jsx216("div", { children: description }),
@@ -5170,7 +5205,7 @@ function useTheme() {
 }
 
 // src/components/date-inputs/DatePicker/CalendarPopover.tsx
-import { Fragment as Fragment4, jsx as jsx220, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx220, jsxs as jsxs40 } from "react/jsx-runtime";
 var CalendarPopoverContext = createContext6({
   anchorRef: null,
   closeButtonRef: null,
@@ -5244,9 +5279,9 @@ var CalendarPopoverContent = ({
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs39(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment4, { children: [
     portalTarget && hasBreakpoint && createPortal(
-      /* @__PURE__ */ jsx220(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx220(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs39(
+      /* @__PURE__ */ jsx220(ShowHide, { showBelow: smallScreenBreakpoint, children: /* @__PURE__ */ jsx220(Backdrop, { zIndex: "modal", isMounted, children: /* @__PURE__ */ jsxs40(
         Paper,
         {
           ref: modalRef,
@@ -5289,7 +5324,7 @@ var CalendarPopoverContent = ({
 };
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
-import { jsx as jsx221, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs41 } from "react/jsx-runtime";
 function CalendarGrid({ state, ...props }) {
   const { locale: locale2 } = useLocale();
   const {
@@ -5303,7 +5338,7 @@ function CalendarGrid({ state, ...props }) {
     typographyStyles_default["body-xsmall"],
     typographyStyles_default["text-color--subtle"]
   ];
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "table",
     {
       ...gridProps,
@@ -5315,8 +5350,8 @@ function CalendarGrid({ state, ...props }) {
       },
       cellPadding: "0",
       children: [
-        /* @__PURE__ */ jsx221("thead", { ...headerProps, children: /* @__PURE__ */ jsxs40("tr", { children: [
-          showWeekNumbers && /* @__PURE__ */ jsxs40("th", { className: cn(...typographyCn), children: [
+        /* @__PURE__ */ jsx221("thead", { ...headerProps, children: /* @__PURE__ */ jsxs41("tr", { children: [
+          showWeekNumbers && /* @__PURE__ */ jsxs41("th", { className: cn(...typographyCn), children: [
             "# ",
             /* @__PURE__ */ jsx221(VisuallyHidden, { as: "span", children: "Ukenummer" })
           ] }),
@@ -5326,7 +5361,7 @@ function CalendarGrid({ state, ...props }) {
           const datesInWeek = state.getDatesInWeek(weekIndex);
           const firstExistingDay = datesInWeek.find(Boolean);
           const weekNumber = firstExistingDay ? getWeekNumber(firstExistingDay) : "";
-          return /* @__PURE__ */ jsxs40("tr", { children: [
+          return /* @__PURE__ */ jsxs41("tr", { children: [
             showWeekNumbers && /* @__PURE__ */ jsx221(
               "td",
               {
@@ -5357,7 +5392,7 @@ function CalendarGrid({ state, ...props }) {
 CalendarGrid.displayName = "CalendarGrid";
 
 // src/components/date-inputs/DatePicker/Calendar/Calendar.tsx
-import { jsx as jsx222, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs42 } from "react/jsx-runtime";
 function createCalendar(identifier) {
   switch (identifier) {
     case "gregory":
@@ -5388,8 +5423,8 @@ function Calendar(props) {
       }
     }
   };
-  return /* @__PURE__ */ jsxs41("div", { ...calendarProps, className: DateInput_default.calendar, children: [
-    /* @__PURE__ */ jsxs41("div", { className: DateInput_default.calendar__header, children: [
+  return /* @__PURE__ */ jsxs42("div", { ...calendarProps, className: DateInput_default.calendar, children: [
+    /* @__PURE__ */ jsxs42("div", { className: DateInput_default.calendar__header, children: [
       /* @__PURE__ */ jsx222(
         Button,
         {
@@ -5482,7 +5517,7 @@ function CalendarButton({
 // src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
 import { useDateSegment } from "@react-aria/datepicker";
 import { useRef as useRef13 } from "react";
-import { jsx as jsx224, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx224, jsxs as jsxs43 } from "react/jsx-runtime";
 var typographyTypes = {
   medium: "bodyMedium",
   small: "bodySmall",
@@ -5496,7 +5531,7 @@ function DateSegment({
   var _a;
   const ref = useRef13(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       ...segmentProps,
@@ -5532,7 +5567,7 @@ DateSegment.displayName = "DateSegment";
 
 // src/components/date-inputs/common/DateInput.tsx
 import { useContext as useContext9 } from "react";
-import { jsx as jsx225, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs44 } from "react/jsx-runtime";
 function DateInput({
   errorMessage,
   tip,
@@ -5559,7 +5594,7 @@ function DateInput({
   const hasLabel = props.label != null;
   const hasMessage = hasErrorMessage || hasTip;
   const { isOpen } = useContext9(CalendarPopoverContext);
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       ...groupProps,
@@ -5576,7 +5611,7 @@ function DateInput({
             children: props.label
           }
         ),
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
           Box,
           {
             ...fieldProps,
@@ -5696,7 +5731,7 @@ function createDOMRef(ref) {
 }
 
 // src/components/date-inputs/DatePicker/DatePicker.tsx
-import { jsx as jsx227, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx227, jsxs as jsxs45 } from "react/jsx-runtime";
 var refIsFocusable = (ref) => {
   return typeof ref === "object" && ref !== null && "focus" in ref;
 };
@@ -5720,7 +5755,7 @@ function DatePicker({
     state,
     internalRef
   );
-  return /* @__PURE__ */ jsx227(I18nProvider, { locale, children: /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsx227(I18nProvider, { locale, children: /* @__PURE__ */ jsxs45(
     CalendarPopover,
     {
       isOpen: state.isOpen,
@@ -5897,7 +5932,7 @@ var DescriptionListTerm = (props) => {
 DescriptionListTerm.displayName = "DescriptionListTerm";
 
 // src/components/DescriptionList/DescriptionListDesc.tsx
-import { jsx as jsx231, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs46 } from "react/jsx-runtime";
 var DescriptionListDesc = ({
   children,
   icon,
@@ -5905,7 +5940,7 @@ var DescriptionListDesc = ({
   className,
   htmlProps,
   ...rest
-}) => /* @__PURE__ */ jsxs45("dd", { ...getBaseHTMLProps(id, cn(className, DescriptionList_default.desc), htmlProps, rest), children: [
+}) => /* @__PURE__ */ jsxs46("dd", { ...getBaseHTMLProps(id, cn(className, DescriptionList_default.desc), htmlProps, rest), children: [
   icon && /* @__PURE__ */ jsx231(Icon, { icon }),
   " ",
   children
@@ -5990,11 +6025,11 @@ var DetailListDesc = ({ className, ...rest }) => /* @__PURE__ */ jsx234("dd", {
 DetailListDesc.displayName = "DetailListDesc";
 
 // src/components/DetailList/DetailListRow.tsx
-import { Fragment as Fragment5, jsx as jsx235, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx235, jsxs as jsxs47 } from "react/jsx-runtime";
 var DetailListRow = ({ className, ...rest }) => {
   const { smallScreenBreakpoint: bp } = useDetailListContext();
   const hasBp = !!bp;
-  return /* @__PURE__ */ jsxs46(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs47(Fragment5, { children: [
     /* @__PURE__ */ jsx235(
       Box,
       {
@@ -6051,7 +6086,7 @@ var DrawerContext = createContext8({});
 var useDrawerContext = () => useContext11(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx237, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx237, jsxs as jsxs48 } from "react/jsx-runtime";
 var Drawer = ({
   children,
   header,
@@ -6112,7 +6147,7 @@ var Drawer = ({
         return "800px";
     }
   };
-  const drawer = /* @__PURE__ */ jsxs47(
+  const drawer = /* @__PURE__ */ jsxs48(
     Paper,
     {
       ref: combinedRef,
@@ -6144,7 +6179,7 @@ var Drawer = ({
       elevation: 4,
       "aria-labelledby": headerId,
       children: [
-        /* @__PURE__ */ jsxs47(
+        /* @__PURE__ */ jsxs48(
           HStack,
           {
             position: "sticky",
@@ -6270,7 +6305,7 @@ var EmptyContent_default = {
 };
 
 // src/components/EmptyContent/EmptyContent.tsx
-import { jsx as jsx239, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs49 } from "react/jsx-runtime";
 function EmptyContent({
   headerText,
   message,
@@ -6290,7 +6325,7 @@ function EmptyContent({
       background: "surface-subtle",
       borderRadius: "0",
       ...rest,
-      children: /* @__PURE__ */ jsxs48(VStack, { maxWidth: "70ch", gap: "x1", textAlign: "center", children: [
+      children: /* @__PURE__ */ jsxs49(VStack, { maxWidth: "70ch", gap: "x1", textAlign: "center", children: [
         headerText && /* @__PURE__ */ jsx239(Heading, { level: headerHeadingLevel, typographyType: "headingMedium", children: headerText }),
         /* @__PURE__ */ jsx239(Paragraph, { className: EmptyContent_default.message, children: message })
       ] })
@@ -6349,7 +6384,7 @@ function useControllableState(props) {
 }
 
 // src/components/FavStar/FavStar.tsx
-import { jsx as jsx240, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs50 } from "react/jsx-runtime";
 var FavStar = ({
   id,
   className,
@@ -6373,7 +6408,7 @@ var FavStar = ({
     defaultValue: defaultChecked != null ? defaultChecked : false,
     onChange
   });
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "label",
     {
       className: cn(
@@ -6440,7 +6475,7 @@ var TextArea_default = {
 };
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx241, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs51 } from "react/jsx-runtime";
 var TextArea = ({
   id,
   value,
@@ -6488,7 +6523,7 @@ var TextArea = ({
   );
   const showRequiredStyling = required || !!ariaRequired;
   const inputWidth = getInputWidth(width);
-  return /* @__PURE__ */ jsxs50("div", { className: cn(className, Input_default.container), style: { ...style }, children: [
+  return /* @__PURE__ */ jsxs51("div", { className: cn(className, Input_default.container), style: { ...style }, children: [
     hasLabel && /* @__PURE__ */ jsx241(
       Label,
       {
@@ -6532,7 +6567,7 @@ var TextArea = ({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsxs50(
+    /* @__PURE__ */ jsxs51(
       Box,
       {
         display: "flex",
@@ -6573,7 +6608,7 @@ var ThumbIcon = ({ rating, layout, type }) => type === "comment" ? /* @__PURE__
 );
 
 // src/components/Feedback/CommentComponent.tsx
-import { jsx as jsx243, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs52 } from "react/jsx-runtime";
 var CommentComponent = ({
   layout,
   rating,
@@ -6586,10 +6621,10 @@ var CommentComponent = ({
   handleSubmit,
   handleFeedbackTextChange
 }) => {
-  return /* @__PURE__ */ jsxs51(VStack, { gap: "x1", children: [
-    /* @__PURE__ */ jsxs51("span", { className: Feedback_default["rating-submitted-title"], children: [
+  return /* @__PURE__ */ jsxs52(VStack, { gap: "x1", children: [
+    /* @__PURE__ */ jsxs52("span", { className: Feedback_default["rating-submitted-title"], children: [
       ThumbIcon({ rating, layout, type: "comment" }),
-      /* @__PURE__ */ jsxs51(Paragraph, { children: [
+      /* @__PURE__ */ jsxs52(Paragraph, { children: [
         ratingSubmittedTitle,
         " "
       ] })
@@ -6635,7 +6670,7 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx244, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs53 } from "react/jsx-runtime";
 var Tooltip = ({
   text,
   placement = "bottom",
@@ -6717,7 +6752,7 @@ var Tooltip = ({
     })
   );
   const openCn = open && inView ? "open" : "closed";
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53(
     "div",
     {
       ...getBaseHTMLProps(
@@ -6731,7 +6766,7 @@ var Tooltip = ({
       onMouseOver: combineHandlers(openTooltip, onMouseOver),
       children: [
         anchorElement,
-        /* @__PURE__ */ jsxs52(
+        /* @__PURE__ */ jsxs53(
           Paper,
           {
             id: uniqueTooltipId,
@@ -6749,7 +6784,7 @@ var Tooltip = ({
             ),
             children: [
               text,
-              /* @__PURE__ */ jsx244("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs52("svg", { width: "36", height: "9", children: [
+              /* @__PURE__ */ jsx244("div", { ref: setArrowElement, style: positionStyles.arrow, children: /* @__PURE__ */ jsxs53("svg", { width: "36", height: "9", children: [
                 /* @__PURE__ */ jsx244(
                   "path",
                   {
@@ -6777,7 +6812,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Feedback/RatingComponent.tsx
-import { jsx as jsx245, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs54 } from "react/jsx-runtime";
 var RatingComponent = ({
   layout,
   ratingLabel,
@@ -6800,7 +6835,7 @@ var RatingComponent = ({
       children: ThumbIcon({ rating, layout: layout2, type: "rating" })
     }
   );
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       className: cn(
@@ -6809,7 +6844,7 @@ var RatingComponent = ({
       ),
       children: [
         /* @__PURE__ */ jsx245("h2", { className: typographyStyles_default["label-medium"], children: ratingLabel }),
-        loading ? /* @__PURE__ */ jsx245(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs53(HStack, { gap: "x1", children: [
+        loading ? /* @__PURE__ */ jsx245(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs54(HStack, { gap: "x1", children: [
           /* @__PURE__ */ jsx245(Tooltip, { text: thumbUpTooltip, children: button("positive", layout, thumbUpTooltip) }),
           /* @__PURE__ */ jsx245(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx245("div", { children: button("negative", layout, thumbDownTooltip) }) })
         ] })
@@ -6971,15 +7006,15 @@ var FileUploader_default = {
 };
 
 // src/components/FileUploader/File.tsx
-import { jsx as jsx250, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs55 } from "react/jsx-runtime";
 var File = (props) => {
   const { parentId, index, file: stateFile, removeFile, isValid } = props;
   const errorsList = stateFile.errors.map((e, errorIndex) => ({
     id: derivativeIdGenerator(parentId, `file-${index}-error-${errorIndex}`),
     message: e
   }));
-  return /* @__PURE__ */ jsxs54("li", { children: [
-    /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55("li", { children: [
+    /* @__PURE__ */ jsxs55(
       Paper,
       {
         display: "flex",
@@ -7319,7 +7354,7 @@ var useFileUploader = (props) => {
 };
 
 // src/components/FileUploader/FileUploader.tsx
-import { jsx as jsx251, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx251, jsxs as jsxs56 } from "react/jsx-runtime";
 var FileUploader = (props) => {
   const {
     id,
@@ -7402,7 +7437,7 @@ var FileUploader = (props) => {
       children: btnLabel
     }
   );
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     Box,
     {
       id: uniqueId,
@@ -7420,7 +7455,7 @@ var FileUploader = (props) => {
           }
         ),
         hasTip && /* @__PURE__ */ jsx251(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
-        withDragAndDrop ? /* @__PURE__ */ jsxs55(
+        withDragAndDrop ? /* @__PURE__ */ jsxs56(
           VStack,
           {
             gap: "x1",
@@ -7445,7 +7480,7 @@ var FileUploader = (props) => {
               button
             ]
           }
-        ) : /* @__PURE__ */ jsxs55("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
+        ) : /* @__PURE__ */ jsxs56("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
           /* @__PURE__ */ jsx251("input", { ...getInputProps(), id: inputId }),
           button
         ] }),
@@ -7544,7 +7579,7 @@ var GlobalMessage_default = {
 };
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-import { jsx as jsx260, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx260, jsxs as jsxs57 } from "react/jsx-runtime";
 var icons = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -7562,7 +7597,7 @@ var GlobalMessage = ({
   ...rest
 }) => {
   const [isClosed, setClosed] = useState15(false);
-  return !isClosed ? /* @__PURE__ */ jsxs56(
+  return !isClosed ? /* @__PURE__ */ jsxs57(
     "div",
     {
       ...getBaseHTMLProps(
@@ -7577,7 +7612,7 @@ var GlobalMessage = ({
         rest
       ),
       children: [
-        /* @__PURE__ */ jsxs56(
+        /* @__PURE__ */ jsxs57(
           "div",
           {
             className: cn(GlobalMessage_default.content, closable && GlobalMessage_default["content--closable"]),
@@ -7710,15 +7745,15 @@ var InlineEdit_default = {
 };
 
 // src/components/InlineEdit/InlineEdit.utils.tsx
-import { jsxs as jsxs57 } from "react/jsx-runtime";
-var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs57(VisuallyHidden, { id, as: "span", children: [
+import { jsxs as jsxs58 } from "react/jsx-runtime";
+var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs58(VisuallyHidden, { id, as: "span", children: [
   "Escape, Enter eller Tab for \xE5 lagre.",
   " ",
   !emptiable && "Inputfeltet er ikke t\xF8mmbar."
 ] });
 
 // src/components/InlineEdit/InlineTextArea.tsx
-import { jsx as jsx263, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs59 } from "react/jsx-runtime";
 var InlineTextArea = ({
   id,
   error,
@@ -7739,8 +7774,8 @@ var InlineTextArea = ({
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = useRef24(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsxs58(Box, { position: "relative", width, children: [
-    /* @__PURE__ */ jsxs58("div", { className: Input_default["input-group"], children: [
+  return /* @__PURE__ */ jsxs59(Box, { position: "relative", width, children: [
+    /* @__PURE__ */ jsxs59("div", { className: Input_default["input-group"], children: [
       !isEditing && !hideIcon && /* @__PURE__ */ jsx263(
         "span",
         {
@@ -7820,7 +7855,7 @@ import { useRef as useRef27 } from "react";
 
 // src/components/InlineEdit/InlineInput.tsx
 import { useId as useId13, useRef as useRef26 } from "react";
-import { jsx as jsx265, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs60 } from "react/jsx-runtime";
 var InlineInput = ({
   id,
   error,
@@ -7841,8 +7876,8 @@ var InlineInput = ({
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const inputRef = useRef26(null);
   const combinedRef = useCombinedRef(ref, inputRef);
-  return /* @__PURE__ */ jsxs59(Box, { position: "relative", width, children: [
-    /* @__PURE__ */ jsxs59("div", { className: Input_default["input-group"], children: [
+  return /* @__PURE__ */ jsxs60(Box, { position: "relative", width, children: [
+    /* @__PURE__ */ jsxs60("div", { className: Input_default["input-group"], children: [
       !isEditing && !hideIcon && /* @__PURE__ */ jsx265(
         "span",
         {
@@ -7948,7 +7983,7 @@ var NavigationItem = ({ isCurrent, ...rest }) => /* @__PURE__ */ jsx267(
 );
 
 // src/components/InternalHeader/InternalHeader.tsx
-import { jsx as jsx268, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs61 } from "react/jsx-runtime";
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -7999,7 +8034,7 @@ var InternalHeader = (props) => {
   ) }) : null;
   const hasContextMenu = hasContextMenuElements || !!user || hasNavInContextMenu;
   const hasContextMenuLargeScreen = hasContextMenuElements || !!user;
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     Box,
     {
       display: "flex",
@@ -8034,7 +8069,7 @@ var InternalHeader = (props) => {
           {
             showBelow: !hasContextMenuLargeScreen && hasSmallScreenBreakpoint ? smallScreenBreakpoint : void 0,
             className: cn(InternalHeader_default["context-menu-group"]),
-            children: /* @__PURE__ */ jsxs60(OverflowMenuGroup, { children: [
+            children: /* @__PURE__ */ jsxs61(OverflowMenuGroup, { children: [
               /* @__PURE__ */ jsx268(
                 Button,
                 {
@@ -8043,7 +8078,7 @@ var InternalHeader = (props) => {
                   "aria-label": "\xE5pne meny"
                 }
               ),
-              /* @__PURE__ */ jsxs60(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
+              /* @__PURE__ */ jsxs61(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
                 user && /* @__PURE__ */ jsx268(OverflowMenuList, { children: user.href ? /* @__PURE__ */ jsx268(OverflowMenuLink, { icon: PersonIcon, ...user }) : /* @__PURE__ */ jsx268(OverflowMenuSpan, { icon: PersonIcon, ...user }) }),
                 hasNavInContextMenu && /* @__PURE__ */ jsx268(
                   ShowHide,
@@ -8142,7 +8177,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment6, jsx as jsx271, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx271, jsxs as jsxs62 } from "react/jsx-runtime";
 var icons2 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -8167,7 +8202,7 @@ var LocalMessage = ({
   if (isClosed) {
     return /* @__PURE__ */ jsx271(Fragment6, {});
   }
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     Box,
     {
       ...getBaseHTMLProps(
@@ -8185,8 +8220,7 @@ var LocalMessage = ({
       ),
       width,
       display: "grid",
-      alignItems: "center",
-      padding: "x0.75",
+      padding: "x0.75 x0.75 x0.75 x0.5",
       gap: "x0.5",
       children: [
         /* @__PURE__ */ jsx271(
@@ -8206,7 +8240,7 @@ var LocalMessage = ({
               setClosed(true);
               onClose && onClose();
             },
-            size: "small",
+            size: "xsmall",
             "aria-label": "Lukk melding",
             className: LocalMessage_default.container__button
           }
@@ -8237,7 +8271,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx272, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs63 } from "react/jsx-runtime";
 var Modal = ({
   isOpen = false,
   parentElement,
@@ -8294,7 +8328,7 @@ var Modal = ({
         isMounted: isOpen && hasTransitionedIn,
         ref: backdropRef,
         onClick: onBackdropClick,
-        children: /* @__PURE__ */ jsxs62(
+        children: /* @__PURE__ */ jsxs63(
           Paper,
           {
             display: "flex",
@@ -8321,7 +8355,7 @@ var Modal = ({
             id: modalId,
             elevation: 4,
             children: [
-              /* @__PURE__ */ jsxs62(
+              /* @__PURE__ */ jsxs63(
                 HStack,
                 {
                   paddingBlock: "0 x0.75",
@@ -8728,7 +8762,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 import {
   components
 } from "react-select";
-import { jsx as jsx275, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx275, jsxs as jsxs64 } from "react/jsx-runtime";
 var {
   Option,
   NoOptionsMessage,
@@ -8749,7 +8783,7 @@ var getIndicatorIconSize = (componentSize) => {
       return "small";
   }
 };
-var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs63(Option, { ...props, children: [
+var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs64(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ jsx275(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
@@ -8779,7 +8813,7 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx275(
 );
 var DDSControl = (props, componentSize, readOnly, icon, dataTestId) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx275("div", { "data-testid": dataTestId ? dataTestId + "-control" : void 0, children: /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsx275("div", { "data-testid": dataTestId ? dataTestId + "-control" : void 0, children: /* @__PURE__ */ jsxs64(
     Control,
     {
       ...rest,
@@ -8808,7 +8842,7 @@ var DDSControl = (props, componentSize, readOnly, icon, dataTestId) => {
 };
 
 // src/components/Select/Select.tsx
-import { jsx as jsx276, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs65 } from "react/jsx-runtime";
 function Select({
   id,
   label,
@@ -8908,7 +8942,7 @@ function Select({
     openMenuOnClick: readOnly ? false : openMenuOnClick ? openMenuOnClick : void 0,
     ...rest
   };
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs65(
     Box,
     {
       width: inputWidth,
@@ -8954,7 +8988,7 @@ var NativeSelect_default = {
 };
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { jsx as jsx277, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx277, jsxs as jsxs66 } from "react/jsx-runtime";
 var NativeSelect = ({
   id,
   children,
@@ -8986,7 +9020,7 @@ var NativeSelect = ({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
-  return /* @__PURE__ */ jsxs65("div", { className, style, children: [
+  return /* @__PURE__ */ jsxs66("div", { className, style, children: [
     hasLabel && /* @__PURE__ */ jsx277(
       Label,
       {
@@ -8997,7 +9031,7 @@ var NativeSelect = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs65(Box, { position: "relative", width: inputWidth, children: [
+    /* @__PURE__ */ jsxs66(Box, { position: "relative", width: inputWidth, children: [
       /* @__PURE__ */ jsx277(
         "select",
         {
@@ -9052,7 +9086,7 @@ NativeSelectPlaceholder.displayName = "NativeSelectPlaceholder";
 var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx278, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx278, jsxs as jsxs67 } from "react/jsx-runtime";
 var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
@@ -9140,7 +9174,7 @@ var Pagination = ({
   );
   const isOnFirstPage = activePage === 1;
   const isOnLastPage = activePage === pagesLength;
-  const navigation = withPagination ? /* @__PURE__ */ jsxs66(
+  const navigation = withPagination ? /* @__PURE__ */ jsxs67(
     Box,
     {
       as: "nav",
@@ -9152,7 +9186,7 @@ var Pagination = ({
         ...getBaseHTMLProps(id, className, htmlProps, rest)
       },
       children: [
-        /* @__PURE__ */ jsxs66(
+        /* @__PURE__ */ jsxs67(
           ShowHide,
           {
             as: "ol",
@@ -9185,7 +9219,7 @@ var Pagination = ({
             ]
           }
         ),
-        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs66(
+        !!smallScreenBreakpoint && /* @__PURE__ */ jsxs67(
           ShowHide,
           {
             as: "ol",
@@ -9276,7 +9310,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__ */ jsxs66(
+  return !withCounter && !withSelect ? navigation : /* @__PURE__ */ jsxs67(
     Box,
     {
       display: "flex",
@@ -9287,7 +9321,7 @@ var Pagination = ({
       alignItems: applyResponsiveStyle("center", smallScreenBreakpoint),
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       children: [
-        /* @__PURE__ */ jsxs66("div", { className: Pagination_default.indicators, children: [
+        /* @__PURE__ */ jsxs67("div", { className: Pagination_default.indicators, children: [
           withSelect && /* @__PURE__ */ jsx278(
             Select,
             {
@@ -9304,7 +9338,7 @@ var Pagination = ({
               "aria-label": "Antall elementer per side"
             }
           ),
-          withCounter && /* @__PURE__ */ jsxs66(Paragraph, { children: [
+          withCounter && /* @__PURE__ */ jsxs67(Paragraph, { children: [
             "Viser ",
             activePageFirstItem,
             "-",
@@ -9727,7 +9761,7 @@ var PhoneInput_default = {
 };
 
 // src/components/PhoneInput/PhoneInput.tsx
-import { jsx as jsx279, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx279, jsxs as jsxs68 } from "react/jsx-runtime";
 var prioritizedCountries = [
   COUNTRIES.NO,
   COUNTRIES.SE,
@@ -9862,7 +9896,7 @@ var PhoneInput = ({
   const showRequiredStyling = !!(required || ariaRequired);
   const bp = props.smallScreenBreakpoint;
   const widthDefault = componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)";
-  return /* @__PURE__ */ jsxs67("div", { className: cn(className, Input_default.container), style, children: [
+  return /* @__PURE__ */ jsxs68("div", { className: cn(className, Input_default.container), style, children: [
     hasLabel && /* @__PURE__ */ jsx279(
       Label,
       {
@@ -9873,7 +9907,7 @@ var PhoneInput = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs67(
+    /* @__PURE__ */ jsxs68(
       Box,
       {
         display: "flex",
@@ -9911,7 +9945,7 @@ var PhoneInput = ({
               children: countryOptions.map((item, index) => /* @__PURE__ */ jsx279("option", { value: item.countryCode, children: item.label }, index))
             }
           ),
-          /* @__PURE__ */ jsxs67(Box, { width: "100%", className: Input_default["input-group"], children: [
+          /* @__PURE__ */ jsxs68(Box, { width: "100%", className: Input_default["input-group"], children: [
             /* @__PURE__ */ jsx279(
               "span",
               {
@@ -9988,7 +10022,7 @@ var PopoverContext = createContext10({});
 var usePopoverContext = () => useContext16(PopoverContext);
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx280, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx280, jsxs as jsxs69 } from "react/jsx-runtime";
 var Popover = ({
   id,
   header,
@@ -10075,7 +10109,7 @@ var Popover = ({
   });
   const hasTitle = !!header;
   const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
-  const popover = /* @__PURE__ */ jsxs68(
+  const popover = /* @__PURE__ */ jsxs69(
     Paper,
     {
       ...getBaseHTMLProps(
@@ -10223,7 +10257,6 @@ PopoverGroup.displayName = "PopoverGroup";
 // src/components/ProgressTracker/ProgressTracker.tsx
 import {
   Children as Children3,
-  Fragment as Fragment8,
   cloneElement as cloneElement5,
   isValidElement as isValidElement5,
   useEffect as useEffect27,
@@ -10235,7 +10268,8 @@ import {
 import { createContext as createContext11, useContext as useContext18 } from "react";
 var ProgressTrackerContext = createContext11(
   {
-    activeStep: 0
+    activeStep: 0,
+    direction: "column"
   }
 );
 var useProgressTrackerContext = () => useContext18(ProgressTrackerContext);
@@ -10243,8 +10277,9 @@ var useProgressTrackerContext = () => useContext18(ProgressTrackerContext);
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
   list: "ProgressTracker_list",
-  connector: "ProgressTracker_connector",
-  item: "ProgressTracker_item",
+  "list-item": "ProgressTracker_list-item",
+  "list-item--column": "ProgressTracker_list-item--column",
+  "list-item--row": "ProgressTracker_list-item--row",
   "item-button": "ProgressTracker_item-button",
   "item-number--active-incomplete": "ProgressTracker_item-number--active-incomplete",
   "item-number--inactive-incomplete": "ProgressTracker_item-number--inactive-incomplete",
@@ -10263,7 +10298,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment7, jsx as jsx282, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx282, jsxs as jsxs70 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -10281,7 +10316,8 @@ var itemStateCn = {
   inactiveCompleted: "inactive-completed",
   inactiveIncomplete: "inactive-incomplete"
 };
-var getVisuallyHiddenText = (active, completed, index) => `${index + 1}, ${active ? "" : "Trinn, "}${completed ? "Ferdig, " : "Ikke ferdig, "}`;
+var getVisuallyHiddenTextBefore = (index) => `${index + 1}. trinn, `;
+var getVisuallyHiddenTextAfter = (completed) => `, ${completed ? "ferdig" : "ikke ferdig"}`;
 var ProgressTrackerItem = (props) => {
   const {
     id,
@@ -10295,7 +10331,7 @@ var ProgressTrackerItem = (props) => {
     children,
     ...rest
   } = props;
-  const { activeStep, handleStepChange } = useProgressTrackerContext();
+  const { activeStep, handleStepChange, direction } = useProgressTrackerContext();
   const active = activeStep === index;
   const itemState = toItemState(active, completed, disabled);
   const handleClick = () => {
@@ -10313,10 +10349,13 @@ var ProgressTrackerItem = (props) => {
     }
     return index + 1;
   }, [completed, icon, index]);
-  const stepContent = /* @__PURE__ */ jsxs69(Fragment7, { children: [
+  const stepContent = /* @__PURE__ */ jsxs70(Fragment7, { children: [
     /* @__PURE__ */ jsx282(
-      "div",
+      Box,
       {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         "aria-hidden": true,
         className: cn(
           ProgressTracker_default["item-number"],
@@ -10326,7 +10365,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsxs70(
       "div",
       {
         className: cn(
@@ -10335,50 +10374,61 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ jsx282(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
-          children
+          /* @__PURE__ */ jsx282(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextBefore(index) }),
+          children,
+          /* @__PURE__ */ jsx282(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextAfter(completed) })
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx282("li", { "aria-current": active ? "step" : void 0, className: ProgressTracker_default.item, children: handleStepChange ? /* @__PURE__ */ jsx282(
-    "button",
-    {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, ProgressTracker_default["item-button"], focusable),
-        htmlProps,
-        rest
-      ),
-      onClick: () => handleClick(),
-      disabled,
-      children: stepContent
-    }
-  ) : /* @__PURE__ */ jsx282(
-    "div",
+  return /* @__PURE__ */ jsx282(
+    Box,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
-        htmlProps,
-        rest
-      ),
-      children: stepContent
+      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__ */ jsx282(
+        "button",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, ProgressTracker_default["item-button"], focusable),
+            htmlProps,
+            rest
+          ),
+          onClick: () => handleClick(),
+          disabled,
+          children: stepContent
+        }
+      ) : /* @__PURE__ */ jsx282(
+        "div",
+        {
+          ...getBaseHTMLProps(
+            id,
+            cn(className, cn(ProgressTracker_default["item-button"], ProgressTracker_default["item-div"])),
+            htmlProps,
+            rest
+          ),
+          children: stepContent
+        }
+      )
     }
-  ) });
+  );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-import { jsx as jsx283, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx283 } from "react/jsx-runtime";
 var ProgressTracker = (() => {
   const Res = ({
     id,
     activeStep = 0,
     onStepChange,
+    direction = "column",
     children,
     className,
-    htmlProps,
+    htmlProps = {},
     ...rest
   }) => {
     const [thisActiveStep, setActiveStep] = useState22(activeStep);
@@ -10394,23 +10444,38 @@ var ProgressTracker = (() => {
     const steps = useMemo3(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
-      const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
-      return itemsWithConnectorsBetween;
+      return itemsWithIndex;
     }, [children]);
+    const isRow = direction === "row";
+    const { "aria-label": ariaLabel } = htmlProps;
     return /* @__PURE__ */ jsx283(
       ProgressTrackerContext,
       {
         value: {
           activeStep: thisActiveStep,
-          handleStepChange: handleChange
+          handleStepChange: handleChange,
+          direction
         },
         children: /* @__PURE__ */ jsx283(
-          "div",
+          "nav",
           {
-            role: "group",
-            "aria-label": "progress",
+            "aria-label": ariaLabel != null ? ariaLabel : "stegprogresjon",
             ...getBaseHTMLProps(id, className, htmlProps, rest),
-            children: /* @__PURE__ */ jsx283("ol", { className: ProgressTracker_default.list, children: steps })
+            children: /* @__PURE__ */ jsx283(
+              Box,
+              {
+                as: StylelessOList,
+                display: "flex",
+                flexDirection: direction,
+                alignItems: "start",
+                gap: isRow ? "x0.5" : "x0.125",
+                overflowX: isRow ? "auto" : void 0,
+                margin: "0",
+                padding: isRow ? "x0.25" : "0",
+                className: cn(ProgressTracker_default.list, scrollbar),
+                children: steps
+              }
+            )
           }
         )
       }
@@ -10432,15 +10497,6 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var intersperseItemsWithConnector = (children) => Children3.map(children, (child, index) => {
-  if (index === 0) {
-    return child;
-  }
-  return /* @__PURE__ */ jsxs70(Fragment8, { children: [
-    /* @__PURE__ */ jsx283("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
-    child
-  ] }, index);
-});
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { useId as useId20 } from "react";
@@ -10544,17 +10600,11 @@ var useAutocompleteSearch = () => {
 
 // src/components/Search/Search.module.css
 var Search_default = {
-  container: "Search_container",
-  "input-group": "Search_input-group",
   "with-button-container": "Search_with-button-container",
   input: "Search_input",
-  "input--small": "Search_input--small",
-  "input--medium": "Search_input--medium",
-  "input--large": "Search_input--large",
   "search-icon": "Search_search-icon",
   "clear-button": "Search_clear-button",
-  suggestions: "Search_suggestions",
-  suggestions__header: "Search_suggestions__header"
+  suggestions: "Search_suggestions"
 };
 
 // src/components/Search/Search.utils.ts
@@ -10660,15 +10710,20 @@ var SearchSuggestions = ({
       ),
       "aria-hidden": !showSuggestions,
       border: "border-default",
+      position: "absolute",
+      top: "100%",
+      width: "100%",
+      maxHeight: "300px",
+      overflowY: "scroll",
+      marginBlock: "x0.25 0",
       children: [
         /* @__PURE__ */ jsx286(
-          "span",
+          Box,
           {
+            as: "h2",
+            paddingInline: "0 x1",
             id: suggestionsHeaderId,
-            className: cn(
-              Search_default.suggestions__header,
-              typographyStyles_default["body-xsmall"]
-            ),
+            className: typographyStyles_default["body-xsmall"],
             children: "S\xF8keforslag"
           }
         ),
@@ -10694,7 +10749,7 @@ var SearchSuggestions = ({
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment9, jsx as jsx287, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx287, jsxs as jsxs73 } from "react/jsx-runtime";
 var getIconSize2 = (size2) => {
   switch (size2) {
     case "large":
@@ -10705,9 +10760,28 @@ var getIconSize2 = (size2) => {
       return "small";
   }
 };
+var getPadding = (size2, showIcon) => {
+  const paddingRight = (textSize) => `calc(
+ var(--dds-spacing-x1) + ${textSize} * 1.5 + var(--dds-spacing-x0-5)
+ )`;
+  const paddingLeft = (iconSize) => `calc(
+ var(--dds-spacing-x0-75) + ${iconSize} + var(--dds-spacing-x0-5)
+ )`;
+  const pRSmallButton = paddingRight("0.875rem");
+  const pRMediumButton = paddingRight("1rem");
+  const pLSmallIcon = paddingLeft("var(--dds-icon-size-small)");
+  const pLMediumIcon = paddingLeft("var(--dds-icon-size-medium)");
+  const paddingMap = {
+    large: `x1 ${pRMediumButton} x1 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    medium: `x0.75 ${pRSmallButton} x0.75 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    small: `x0.5 ${pRSmallButton} x0.5 ${showIcon ? pLSmallIcon : "x0.75"}`
+  };
+  return paddingMap[size2];
+};
 var Search = ({
   componentSize = "medium",
   buttonProps,
+  showIcon = true,
   name,
   label,
   tip,
@@ -10750,87 +10824,98 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  return /* @__PURE__ */ jsxs73("div", { className: Search_default.container, children: [
+  const inputGroup = /* @__PURE__ */ jsxs73(
+    HStack,
+    {
+      position: "relative",
+      width: !showSearchButton ? width : void 0,
+      className: !showSearchButton ? className : void 0,
+      children: [
+        showIcon && /* @__PURE__ */ jsx287(
+          Icon,
+          {
+            icon: SearchIcon,
+            iconSize: getIconSize2(componentSize),
+            className: cn(
+              Input_default["input-group__absolute-element"],
+              Search_default["search-icon"]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx287(
+          Box,
+          {
+            as: Input,
+            ...rest,
+            ref: combinedRef,
+            name,
+            type: "search",
+            id: uniqueId,
+            "aria-describedby": spaceSeparatedIdListGenerator([
+              tip ? tipId : void 0,
+              context.suggestions ? suggestionsDescriptionId : void 0,
+              ariaDescribedby
+            ]),
+            value: (_a = context.inputValue) != null ? _a : value,
+            onChange: handleChange,
+            autoComplete: "off",
+            "aria-autocomplete": hasSuggestions ? "list" : void 0,
+            "aria-controls": hasSuggestions ? suggestionsId : void 0,
+            "aria-expanded": context.showSuggestions,
+            role: hasSuggestions ? "combobox" : void 0,
+            width: "100%",
+            padding: getPadding(componentSize, showIcon),
+            className: cn(
+              Search_default.input,
+              typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
+            )
+          }
+        ),
+        hasSuggestions && /* @__PURE__ */ jsxs73(Fragment8, { children: [
+          /* @__PURE__ */ jsx287(
+            SearchSuggestions,
+            {
+              id: suggestionsId,
+              ref: context.suggestionsRef,
+              searchId: uniqueId,
+              onSuggestionClick: context.onSugggestionClick,
+              suggestions: context.suggestions,
+              showSuggestions: context.showSuggestions,
+              componentSize
+            }
+          ),
+          /* @__PURE__ */ jsx287(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+        ] }),
+        hasValue && /* @__PURE__ */ jsx287(
+          Button,
+          {
+            icon: CloseSmallIcon,
+            size: componentSize === "large" ? "medium" : "small",
+            purpose: "tertiary",
+            "aria-label": "T\xF8m",
+            onClick: clearInput,
+            className: Search_default["clear-button"]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs73(VStack, { gap: "x0.125", children: [
     hasLabel && /* @__PURE__ */ jsx287(Label, { htmlFor: uniqueId, children: label }),
     /* @__PURE__ */ jsxs73("div", { children: [
-      /* @__PURE__ */ jsxs73(
-        Box,
+      showSearchButton ? /* @__PURE__ */ jsxs73(
+        Grid,
         {
-          className: cn(
-            className,
-            showSearchButton && Search_default["with-button-container"]
-          ),
+          className,
           width,
-          gap: "x0.5",
+          columnGap: "x0.5",
+          rowGap: "0",
+          marginInline: "0",
+          gridTemplateColumns: "1fr auto",
           style,
           children: [
-            /* @__PURE__ */ jsxs73("div", { className: Search_default["input-group"], children: [
-              /* @__PURE__ */ jsx287(
-                Icon,
-                {
-                  icon: SearchIcon,
-                  iconSize: getIconSize2(componentSize),
-                  className: cn(
-                    Input_default["input-group__absolute-element"],
-                    Search_default["search-icon"]
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx287(
-                Input,
-                {
-                  ...rest,
-                  ref: combinedRef,
-                  name,
-                  type: "search",
-                  id: uniqueId,
-                  "aria-describedby": spaceSeparatedIdListGenerator([
-                    tip ? tipId : void 0,
-                    context.suggestions ? suggestionsDescriptionId : void 0,
-                    ariaDescribedby
-                  ]),
-                  value: (_a = context.inputValue) != null ? _a : value,
-                  onChange: handleChange,
-                  autoComplete: "off",
-                  "aria-autocomplete": hasSuggestions ? "list" : void 0,
-                  "aria-controls": hasSuggestions ? suggestionsId : void 0,
-                  "aria-expanded": context.showSuggestions,
-                  role: hasSuggestions ? "combobox" : void 0,
-                  className: cn(
-                    Search_default.input,
-                    Search_default[`input--${componentSize}`],
-                    typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
-                  )
-                }
-              ),
-              hasSuggestions && /* @__PURE__ */ jsxs73(Fragment9, { children: [
-                /* @__PURE__ */ jsx287(
-                  SearchSuggestions,
-                  {
-                    id: suggestionsId,
-                    ref: context.suggestionsRef,
-                    searchId: uniqueId,
-                    onSuggestionClick: context.onSugggestionClick,
-                    suggestions: context.suggestions,
-                    showSuggestions: context.showSuggestions,
-                    componentSize
-                  }
-                ),
-                /* @__PURE__ */ jsx287(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
-              ] }),
-              hasValue && /* @__PURE__ */ jsx287(
-                Button,
-                {
-                  icon: CloseSmallIcon,
-                  size: componentSize === "large" ? "medium" : "small",
-                  purpose: "tertiary",
-                  "aria-label": "T\xF8m",
-                  onClick: clearInput,
-                  className: Search_default["clear-button"]
-                }
-              )
-            ] }),
-            showSearchButton && /* @__PURE__ */ jsx287(
+            inputGroup,
+            /* @__PURE__ */ jsx287(
               Button,
               {
                 size: componentSize,
@@ -10841,7 +10926,7 @@ var Search = ({
             )
           ]
         }
-      ),
+      ) : inputGroup,
       renderInputMessage(tip, tipId)
     ] })
   ] });
@@ -11091,7 +11176,7 @@ var RadioButtonGroup = ({
     }
   };
   const hasErrorMessage = !!errorMessage;
-  const showRequiredMarker = required || ariaRequired;
+  const showRequiredMarker = required || convertBooleanishToBoolean(ariaRequired);
   const tipId = tip && `${uniqueGroupId}-tip`;
   const errorMessageId = errorMessage && `${uniqueGroupId}-errorMessage`;
   const contextProps = {
@@ -11115,21 +11200,15 @@ var RadioButtonGroup = ({
         rest
       ),
       children: [
-        /* @__PURE__ */ jsxs75(
-          Typography,
+        label !== void 0 ? /* @__PURE__ */ jsx290(
+          GroupLabel,
           {
-            as: "span",
-            typographyType: "labelMedium",
             id: uniqueGroupId,
-            className: readOnly ? Label_default["read-only"] : void 0,
-            children: [
-              readOnly && /* @__PURE__ */ jsx290(Icon, { icon: LockIcon, className: Label_default["read-only__icon"] }),
-              label,
-              " ",
-              showRequiredMarker && /* @__PURE__ */ jsx290(RequiredMarker, {})
-            ]
+            readOnly,
+            showRequiredMarker,
+            children: label
           }
-        ),
+        ) : null,
         renderInputMessage(tip, tipId),
         /* @__PURE__ */ jsx290(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ jsx290(
           "div",
@@ -11266,7 +11345,7 @@ SplitButton.displayName = "SplitButton";
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children4,
-  Fragment as Fragment10,
+  Fragment as Fragment9,
   cloneElement as cloneElement6,
   isValidElement as isValidElement6,
   useEffect as useEffect31,
@@ -11520,7 +11599,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment11, jsx as jsx302, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx302, jsxs as jsxs78 } from "react/jsx-runtime";
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -11562,7 +11641,7 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ jsxs78(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs78(Fragment9, { children: [
       /* @__PURE__ */ jsx302(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       isValidElement6(child) && cloneElement6(child, {
         collapsibleProps: { isCollapsibleChild: true }
@@ -11575,7 +11654,7 @@ var CollapsibleRow = ({
   });
   const headerRow = () => {
     if (type !== "head" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsx302(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment11, { children: [
+    return /* @__PURE__ */ jsx302(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment10, { children: [
       definingColumnCells,
       /* @__PURE__ */ jsxs78(Table2.Cell, { type: "head", layout: "center", children: [
         "Utvid",
@@ -11612,9 +11691,9 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment11, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment10, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ jsxs78(Fragment11, { children: [
+    type === "body" && /* @__PURE__ */ jsxs78(Fragment10, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
@@ -12964,6 +13043,7 @@ export {
   StarIcon,
   StatefulInput,
   StylelessList,
+  StylelessOList,
   SvgWrapper,
   SyncIcon,
   Tab,