@norges-domstoler/dds-components 21.13.0 → 21.15.0

package/dist/index.mjs

@@ -312,6 +312,7 @@ var BACKGROUNDS = [
   "surface-info-strong",
   "surface-paper-default",
   "surface-notification",
+  "surface-field-disabled",
   "brand-primary-default",
   "brand-primary-subtle",
   "brand-primary-medium",
@@ -379,6 +380,8 @@ var readOnlyKeyDownHandler = (type, readOnly, onKeyDown) => {
         evt.preventDefault();
       } else if (type === "selectionControl" && evt.key === " ") {
         evt.preventDefault();
+      } else if (type === "file" && (evt.key === " " || evt.key === "Enter")) {
+        evt.preventDefault();
       }
     } else onKeyDown == null ? void 0 : onKeyDown(evt);
   };
@@ -2888,8 +2891,8 @@ function useTranslation() {
   const t = (text) => text[lang];
   return { t, lang };
 }
-function createTexts(texts26) {
-  return texts26;
+function createTexts(texts27) {
+  return texts27;
 }
 
 // src/DdsProvider/DdsProvider.tsx
@@ -5641,7 +5644,12 @@ var DateInput_default = {
 };
 
 // src/components/date-inputs/DatePicker/constants.ts
-var locale = "no-NO";
+var LOCALE = {
+  nb: "nb-NO",
+  no: "no-NO",
+  nn: "nn-NO",
+  en: "en-GB"
+};
 var timezone = "Europe/Oslo";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
@@ -5885,12 +5893,12 @@ var CalendarPopoverContent = ({
 import { jsx as jsx226, jsxs as jsxs43 } from "react/jsx-runtime";
 function CalendarGrid({ state, ...props }) {
   const { t } = useTranslation();
-  const { locale: locale2 } = useLocale();
+  const { locale } = useLocale();
   const {
     gridProps: { onKeyDown, ...gridProps },
     headerProps
   } = useCalendarGrid(props, state);
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale2);
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weekDays = [
     { short: t(texts5.mo), full: t(texts5.monday) },
     { short: t(texts5.tu), full: t(texts5.tuesday) },
@@ -6072,11 +6080,11 @@ function createCalendar(identifier) {
 }
 function Calendar(props) {
   const { t } = useTranslation();
-  const { locale: locale2 } = useLocale2();
+  const { locale } = useLocale2();
   const state = useCalendarState({
     ...props,
     createCalendar,
-    locale: locale2
+    locale
   });
   const {
     calendarProps,
@@ -6220,6 +6228,39 @@ function CalendarButton({
   );
 }
 
+// src/components/date-inputs/DatePicker/DateField/DateField.utils.tsx
+function formatDateFieldSegments(segments) {
+  const daySegment = segments.find((segment) => segment.type === "day");
+  const monthSegment = segments.find((segment) => segment.type === "month");
+  const yearSegment = segments.find((segment) => segment.type === "year");
+  const separatorSegment = segments.find((segment) => segment.type === "literal");
+  if (!daySegment || !monthSegment || !yearSegment || !separatorSegment) {
+    throw new Error("Invalid date field segments");
+  }
+  const formattedDaySegment = {
+    ...daySegment,
+    text: daySegment.text.padStart(2, "0"),
+    placeholder: "dd"
+  };
+  const formattedMonthSegment = {
+    ...monthSegment,
+    text: monthSegment.text.padStart(2, "0"),
+    placeholder: "mm"
+  };
+  const formattedYearSegment = {
+    ...yearSegment,
+    placeholder: "\xE5\xE5\xE5\xE5"
+  };
+  const formattedSeparatorSegment = { ...separatorSegment, text: "." };
+  return [
+    formattedDaySegment,
+    formattedSeparatorSegment,
+    formattedMonthSegment,
+    formattedSeparatorSegment,
+    formattedYearSegment
+  ];
+}
+
 // src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
 import { useDateSegment } from "@react-aria/datepicker";
 import { useRef as useRef14 } from "react";
@@ -6234,7 +6275,6 @@ function DateSegment({
   state,
   componentSize
 }) {
-  var _a;
   const ref = useRef14(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
   return /* @__PURE__ */ jsxs45(
@@ -6264,7 +6304,7 @@ function DateSegment({
             children: segment.placeholder
           }
         ),
-        segment.isPlaceholder ? "" : segment.text.padStart(String((_a = segment.maxValue) != null ? _a : "").length, "0")
+        segment.isPlaceholder ? "" : segment.text
       ]
     }
   );
@@ -6469,11 +6509,11 @@ function DateField({
   clearable,
   ...props
 }) {
-  const { locale: locale2 } = useLocale3();
+  const { locale } = useLocale3();
   const { t } = useTranslation();
   const state = useDateFieldState({
     ...props,
-    locale: locale2,
+    locale,
     createCalendar: createCalendar2
   });
   const internalRef = useRef15(null);
@@ -6488,6 +6528,7 @@ function DateField({
   const clearDate = () => {
     state.setValue(null);
   };
+  const formattedSegments = formatDateFieldSegments(state.segments);
   return /* @__PURE__ */ jsx235(
     DateInput,
     {
@@ -6526,7 +6567,7 @@ function DateField({
       ),
       labelProps,
       fieldProps,
-      children: state.segments.map((segment, i) => /* @__PURE__ */ jsx235(
+      children: formattedSegments.map((segment, i) => /* @__PURE__ */ jsx235(
         DateSegment,
         {
           "aria-readonly": props.isReadOnly,
@@ -6587,6 +6628,10 @@ function DatePicker({
   ref,
   ...props
 }) {
+  const lang = useLanguage();
+  if (!lang) {
+    throw new Error("DatePicker must be used within a DdsProvider");
+  }
   const state = useDatePickerState(props);
   const domRef = useFocusManagerRef(ref && refIsFocusable(ref) ? ref : null);
   const internalRef = useRef17(null);
@@ -6596,7 +6641,7 @@ function DatePicker({
     state,
     internalRef
   );
-  return /* @__PURE__ */ jsx236(I18nProvider, { locale, children: /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsx236(I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ jsxs47(
     CalendarPopover,
     {
       isOpen: state.isOpen,
@@ -6637,10 +6682,14 @@ function TimePicker({
   ref,
   ...props
 }) {
+  const lang = useLanguage();
+  if (!lang) {
+    throw new Error("DatePicker must be used within a DdsProvider");
+  }
   const internalRef = useRef18(null);
   const state = useTimeFieldState({
     ...props,
-    locale
+    locale: LOCALE[lang]
   });
   const { labelProps, fieldProps } = useTimeField(
     { ...props, hideTimeZone: true, granularity: "hour" },
@@ -7909,22 +7958,31 @@ var FileUploader_default = {
   "input-container": "FileUploader_input-container",
   "input-container--with-errors": "FileUploader_input-container--with-errors",
   "input-container--drag-active": "FileUploader_input-container--drag-active",
-  "input-container--no-drag-zone": "FileUploader_input-container--no-drag-zone",
   "file--invalid": "FileUploader_file--invalid",
   "file__icon--invalid": "FileUploader_file__icon--invalid",
   "file__icon--valid": "FileUploader_file__icon--valid",
-  file__name: "FileUploader_file__name"
+  file__name: "FileUploader_file__name",
+  "readonly--file-list": "FileUploader_readonly--file-list"
 };
 
 // src/components/FileUploader/File.tsx
-import { jsx as jsx259, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx259, jsxs as jsxs58 } from "react/jsx-runtime";
 var File = (props) => {
   const { t } = useTranslation();
-  const { parentId, index, file: stateFile, removeFile, isValid } = props;
+  const {
+    parentId,
+    index,
+    file: stateFile,
+    removeFile,
+    isValid,
+    disabled,
+    readOnly
+  } = props;
   const errorsList = stateFile.errors.map((e, errorIndex) => ({
     id: derivativeIdGenerator(parentId, `file-${index}-error-${errorIndex}`),
     message: e
   }));
+  const inactive = disabled || readOnly;
   return /* @__PURE__ */ jsxs58("li", { children: [
     /* @__PURE__ */ jsxs58(
       Paper,
@@ -7935,42 +7993,46 @@ var File = (props) => {
         gap: "x0.75",
         marginBlock: "x0.5 0",
         padding: "x0.5 x1",
-        border: isValid ? "border-default" : "border-danger",
-        background: "surface-subtle",
+        border: disabled ? "border-subtle" : isValid ? "border-default" : "border-danger",
+        background: inactive ? "surface-field-disabled" : "surface-subtle",
         className: cn(!isValid && FileUploader_default["file--invalid"]),
         children: [
           /* @__PURE__ */ jsx259(
-            "span",
+            Typography,
             {
-              className: cn(FileUploader_default.file__name, typographyStyles_default["body-medium"]),
+              as: "span",
+              color: disabled ? "text-subtle" : readOnly ? "text-medium" : void 0,
+              className: cn(FileUploader_default.file__name),
               children: stateFile.file.name
             }
           ),
-          /* @__PURE__ */ jsx259(
-            Icon,
-            {
-              icon: isValid ? CheckCircledIcon : ErrorIcon,
-              className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
-            }
-          ),
-          /* @__PURE__ */ jsx259(
-            Button,
-            {
-              size: "small",
-              purpose: "tertiary",
-              type: "button",
-              onClick: removeFile,
-              icon: CloseIcon,
-              htmlProps: {
-                "aria-label": t(texts13.removeFile(stateFile.file.name)),
-                "aria-invalid": !isValid ? true : void 0,
-                "aria-errormessage": !isValid ? t(texts13.invalidFile) : void 0,
-                "aria-describedby": spaceSeparatedIdListGenerator(
-                  errorsList.map((e) => e.id)
-                )
+          !inactive && /* @__PURE__ */ jsxs58(Fragment6, { children: [
+            /* @__PURE__ */ jsx259(
+              Icon,
+              {
+                icon: isValid ? CheckCircledIcon : ErrorIcon,
+                className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
               }
-            }
-          )
+            ),
+            /* @__PURE__ */ jsx259(
+              Button,
+              {
+                size: "small",
+                purpose: "tertiary",
+                type: "button",
+                onClick: removeFile,
+                icon: CloseIcon,
+                htmlProps: {
+                  "aria-label": t(texts13.removeFile(stateFile.file.name)),
+                  "aria-invalid": !isValid ? true : void 0,
+                  "aria-errormessage": !isValid ? t(texts13.invalidFile) : void 0,
+                  "aria-describedby": spaceSeparatedIdListGenerator(
+                    errorsList.map((e) => e.id)
+                  )
+                }
+              }
+            )
+          ] })
         ]
       }
     ),
@@ -8071,14 +8133,12 @@ var isEventWithFiles = (event) => {
 var isFileAccepted = (file, accept) => {
   return accept !== void 0 ? isAccepted(file, accept) : true;
 };
-var getTooManyFilesErrorMessage = (maxFiles) => `For mange filer, maks ${maxFiles}stk`;
-var getInvalidFileTypeErrorMessage = () => "Ugyldig filtype";
 
 // src/components/FileUploader/useFileUploader.ts
-var calcRootErrors = (files, maxFiles, errorMessage) => {
+var calcRootErrors = (maxFilesErrorMessage, files, maxFiles, errorMessage) => {
   const errors = [];
   if (maxFiles && maxFiles >= 1 && files.length > maxFiles) {
-    errors.push(getTooManyFilesErrorMessage(maxFiles));
+    errors.push(maxFilesErrorMessage + maxFiles);
   }
   if (errorMessage) {
     errors.push(errorMessage);
@@ -8090,11 +8150,14 @@ var useFileUploader = (props) => {
     initialFiles,
     value,
     onChange,
+    onKeyDown,
     accept,
     maxFiles,
     disabled,
+    readOnly,
     errorMessage
   } = props;
+  const { t } = useTranslation();
   const rootRef = useRef23(null);
   const inputRef = useRef23(null);
   const buttonRef = useRef23(null);
@@ -8112,6 +8175,7 @@ var useFileUploader = (props) => {
     isFileDialogActive: false,
     isDragActive: false,
     rootErrors: calcRootErrors(
+      t(texts14.invalidFileAmount),
       initialFileUploaderFiles,
       maxFiles,
       errorMessage
@@ -8124,7 +8188,7 @@ var useFileUploader = (props) => {
         const accepted = isFileAccepted(file, accept);
         return {
           file,
-          errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+          errors: accepted ? [] : [t(texts14.invalidFileType)]
         };
       });
       dispatch({
@@ -8136,7 +8200,12 @@ var useFileUploader = (props) => {
   useEffect23(() => {
     dispatch({
       type: "setRootErrors",
-      payload: calcRootErrors(stateFiles, maxFiles, errorMessage)
+      payload: calcRootErrors(
+        t(texts14.invalidFileAmount),
+        stateFiles,
+        maxFiles,
+        errorMessage
+      )
     });
   }, [dispatch, stateFiles, maxFiles, errorMessage]);
   const onRootFocus = useCallback6(
@@ -8186,7 +8255,7 @@ var useFileUploader = (props) => {
           const accepted = isFileAccepted(file, accept);
           return {
             file,
-            errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+            errors: accepted ? [] : [t(texts14.invalidFileType)]
           };
         }).concat(stateFiles);
         onChange(newFiles.map((f) => f.file));
@@ -8258,10 +8327,13 @@ var useFileUploader = (props) => {
   const getInputProps = useCallback6(
     () => ({
       type: "file",
-      style: { display: "none" },
-      tabIndex: -1,
+      tabIndex: readOnly ? void 0 : -1,
       ref: inputRef,
-      onChange: setFiles,
+      disabled,
+      "aria-hidden": readOnly ? void 0 : true,
+      onChange: readOnlyChangeHandler(readOnly, setFiles),
+      onKeyDown: readOnlyKeyDownHandler("file", readOnly, onKeyDown),
+      readOnly,
       multiple: !maxFiles || maxFiles > 1,
       ...accept ? { accept: accept.join(",") } : {}
     }),
@@ -8275,6 +8347,20 @@ var useFileUploader = (props) => {
     removeFile
   };
 };
+var texts14 = createTexts({
+  invalidFileType: {
+    nb: "Ugyldig filtype",
+    no: "Ugyldig filtype",
+    nn: "Ugyldig filtype",
+    en: "Invalid file type"
+  },
+  invalidFileAmount: {
+    nb: "For mange filer. Maksimalt antall er ",
+    no: "For mange filer. Maksimalt antall er ",
+    nn: "For mange filer. Maksimalt antall er ",
+    en: "Too many files. The maximum allowed is "
+  }
+});
 
 // src/components/FileUploader/FileUploader.tsx
 import { jsx as jsx260, jsxs as jsxs59 } from "react/jsx-runtime";
@@ -8292,7 +8378,9 @@ var FileUploader = (props) => {
     accept,
     maxFiles,
     disabled,
+    readOnly,
     onChange,
+    onKeyDown,
     width = "var(--dds-input-default-width)",
     errorMessage,
     hideFileList,
@@ -8300,7 +8388,7 @@ var FileUploader = (props) => {
     ...rest
   } = props;
   const { t } = useTranslation();
-  const tDropAreaLabel = dropAreaLabel != null ? dropAreaLabel : t(texts14.dragAndDropOr);
+  const tDropAreaLabel = dropAreaLabel != null ? dropAreaLabel : t(texts15.dragAndDropOr);
   const generatedId = useId14();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
@@ -8316,16 +8404,21 @@ var FileUploader = (props) => {
     onChange,
     accept,
     disabled,
+    readOnly,
     maxFiles,
-    errorMessage
+    errorMessage,
+    onKeyDown
   });
   const hasLabel = label !== void 0;
   const hasTip = tip !== void 0;
   const hasRootErrors = rootErrors.length > 0;
+  const inactive = disabled || readOnly;
   const labelId = derivativeIdGenerator(uniqueId, "label");
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const buttonId = derivativeIdGenerator(uniqueId, "button");
   const inputId = derivativeIdGenerator(uniqueId, "input");
+  const fileListId = derivativeIdGenerator(uniqueId, "file-list");
+  const fileListNameId = derivativeIdGenerator(uniqueId, "file-list-name");
   const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx260(
     File,
     {
@@ -8333,7 +8426,9 @@ var FileUploader = (props) => {
       index,
       file: stateFile,
       isValid: stateFile.errors.length === 0,
-      removeFile: () => removeFile(stateFile)
+      removeFile: () => removeFile(stateFile),
+      disabled,
+      readOnly
     },
     stateFile.file.name
   ));
@@ -8361,6 +8456,16 @@ var FileUploader = (props) => {
       children: btnLabel
     }
   );
+  const input = /* @__PURE__ */ jsx260(
+    HiddenInput,
+    {
+      ...getInputProps(),
+      className: cn(readOnly && focus_default["focusable-sibling"]),
+      id: inputId,
+      "data-testid": "file-uploader-input",
+      "aria-describedby": fileListId
+    }
+  );
   return /* @__PURE__ */ jsxs59(
     Box,
     {
@@ -8373,10 +8478,11 @@ var FileUploader = (props) => {
           label,
           id: labelId,
           showRequiredStyling: required,
-          htmlFor: inputId
+          htmlFor: inputId,
+          readOnly
         }),
         hasTip && /* @__PURE__ */ jsx260(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
-        withDragAndDrop ? /* @__PURE__ */ jsxs59(
+        inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs59(
           VStack,
           {
             gap: "x1",
@@ -8388,31 +8494,45 @@ var FileUploader = (props) => {
               isDragActive && FileUploader_default["input-container--drag-active"]
             ),
             children: [
-              /* @__PURE__ */ jsx260(
-                "input",
-                {
-                  ...getInputProps(),
-                  id: inputId,
-                  "data-testid": "file-uploader-input"
-                }
-              ),
+              input,
               tDropAreaLabel,
-              /* @__PURE__ */ jsx260(VisuallyHidden, { children: t(texts14.uploadFileWithButton) }),
+              /* @__PURE__ */ jsx260(VisuallyHidden, { children: t(texts15.uploadFileWithButton) }),
               button
             ]
           }
-        ) : /* @__PURE__ */ jsxs59("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
-          /* @__PURE__ */ jsx260("input", { ...getInputProps(), id: inputId }),
+        ) : /* @__PURE__ */ jsxs59(Box, { padding: "x 0", children: [
+          input,
           button
         ] }),
         /* @__PURE__ */ jsx260(ErrorList, { errors: rootErrorsList }),
-        !hideFileList && /* @__PURE__ */ jsx260(StylelessList, { children: fileListElements })
+        !hideFileList && /* @__PURE__ */ jsxs59(
+          "div",
+          {
+            id: fileListId,
+            className: cn(
+              readOnly && focus_default["focus-styled-sibling"],
+              readOnly && FileUploader_default["readonly--file-list"]
+            ),
+            children: [
+              /* @__PURE__ */ jsx260(VisuallyHidden, { id: fileListNameId, children: t(texts15.uploadedFiles) }),
+              inactive && fileListElements.length === 0 ? /* @__PURE__ */ jsx260(
+                Typography,
+                {
+                  italic: true,
+                  as: "span",
+                  color: disabled ? "text-subtle" : "text-medium",
+                  children: t(texts15.noFiles)
+                }
+              ) : /* @__PURE__ */ jsx260(StylelessList, { "aria-labelledby": fileListNameId, children: fileListElements })
+            ]
+          }
+        )
       ]
     }
   );
 };
 FileUploader.displayName = "FileUploader";
-var texts14 = createTexts({
+var texts15 = createTexts({
   dragAndDropOr: {
     nb: "Dra og slipp filer her eller",
     no: "Dra og slipp filer her eller",
@@ -8424,6 +8544,18 @@ var texts14 = createTexts({
     no: "last opp en fil med den p\xE5f\xF8lgende knappen",
     nn: "last opp ei fil med den p\xE5f\xF8lgjande knappen",
     en: "upload using the following button"
+  },
+  noFiles: {
+    nb: "Ingen filer.",
+    no: "Ingen filer.",
+    nn: "Ingen filer.",
+    en: "No files."
+  },
+  uploadedFiles: {
+    nb: "Opplastede filer",
+    no: "Opplastede filer",
+    nn: "Opplasta filer",
+    en: "Uploaded files"
   }
 });
 
@@ -8694,11 +8826,11 @@ import { jsxs as jsxs61 } from "react/jsx-runtime";
 var inlineEditVisuallyHidden = (id, clearable) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs61(VisuallyHidden, { id, children: [
-    t(texts15.inlineEditInfo),
-    !clearable && t(texts15.notClearable)
+    t(texts16.inlineEditInfo),
+    !clearable && t(texts16.notClearable)
   ] });
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   inlineEditInfo: {
     nb: "Escape, Enter eller Tab for \xE5 lagre.",
     no: "Escape, Enter eller Tab for \xE5 lagre.",
@@ -8759,7 +8891,7 @@ function createClearChangeEvent(elementId) {
 }
 
 // src/components/InlineEdit/InlineField.tsx
-import { Fragment as Fragment6, jsx as jsx272, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx272, jsxs as jsxs62 } from "react/jsx-runtime";
 function InlineField(props) {
   const {
     elementType,
@@ -8840,7 +8972,7 @@ function InlineField(props) {
           }
         );
       case "select":
-        return /* @__PURE__ */ jsxs62(Fragment6, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment7, { children: [
           /* @__PURE__ */ jsx272(
             "select",
             {
@@ -9027,7 +9159,7 @@ var InternalHeader = (props) => {
   const hasContextMenuElements = !!contextMenuItems && contextMenuItems.length > 0;
   const hasSmallScreenBreakpoint = !!smallScreenBreakpoint;
   const hasNavInContextMenu = hasSmallScreenBreakpoint && hasNavigationElements;
-  const navigation = hasNavigationElements ? /* @__PURE__ */ jsx277("nav", { "aria-label": t(texts16.siteNavigation), children: /* @__PURE__ */ jsx277(
+  const navigation = hasNavigationElements ? /* @__PURE__ */ jsx277("nav", { "aria-label": t(texts17.siteNavigation), children: /* @__PURE__ */ jsx277(
     ShowHide,
     {
       as: StylelessList,
@@ -9091,7 +9223,7 @@ var InternalHeader = (props) => {
                 {
                   icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
                   purpose: "tertiary",
-                  "aria-label": t(texts16.openMenu)
+                  "aria-label": t(texts17.openMenu)
                 }
               ),
               /* @__PURE__ */ jsxs63(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
@@ -9100,7 +9232,7 @@ var InternalHeader = (props) => {
                   ShowHide,
                   {
                     as: "nav",
-                    "aria-label": t(texts16.siteNavigation),
+                    "aria-label": t(texts17.siteNavigation),
                     showBelow: smallScreenBreakpoint,
                     children: /* @__PURE__ */ jsx277(OverflowMenuList, { children: navItems.map((item, i) => /* @__PURE__ */ createElement2(OverflowMenuLink, { ...item, key: `nav-${i}` })) })
                   }
@@ -9136,7 +9268,7 @@ var InternalHeader = (props) => {
   );
 };
 InternalHeader.displayName = "InternalHeader";
-var texts16 = createTexts({
+var texts17 = createTexts({
   openMenu: {
     nb: "\xC5pne meny",
     no: "\xC5pne meny",
@@ -9214,7 +9346,7 @@ var LocalMessage_default = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment7, jsx as jsx280, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx280, jsxs as jsxs64 } from "react/jsx-runtime";
 var icons2 = {
   info: InfoIcon,
   danger: ErrorIcon,
@@ -9238,7 +9370,7 @@ var LocalMessage = ({
   const { t } = useTranslation();
   const [isClosed, setClosed] = useState20(false);
   if (isClosed) {
-    return /* @__PURE__ */ jsx280(Fragment7, {});
+    return /* @__PURE__ */ jsx280(Fragment8, {});
   }
   return /* @__PURE__ */ jsxs64(
     Box,
@@ -9757,7 +9889,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
-    gap: "var(--dds-spacing-x0-5)",
+    gap: "var(--dds-spacing-x0-25)",
     padding: "var(--dds-spacing-x0-75)",
     backgroundColor: "var(--dds-color-surface-default)",
     ...typography.option[size2],
@@ -9825,10 +9957,9 @@ var getIndicatorIconSize = (componentSize) => {
   }
 };
 var DDSOption = ({
-  componentSize,
   ...props
 }) => /* @__PURE__ */ jsxs66(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ jsx284(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ jsx284(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
 var CustomOption = (props) => /* @__PURE__ */ jsx284(Option, { ...props, children: React.createElement(props.customElement, props) });
@@ -10019,7 +10150,7 @@ function Select({
       if (customOptionElement) {
         return /* @__PURE__ */ jsx285(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ jsx285(DDSOption, { ...props, componentSize });
+        return /* @__PURE__ */ jsx285(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -10254,6 +10385,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10273,7 +10405,15 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = useState22(defaultActivePage);
+  if (withSelect && !selectOptions.some((o) => o.value === defaultItemsPerPage)) {
+    console.warn(
+      `[Pagination] defaultItemsPerPage prop value (${defaultItemsPerPage}) is not included in customOptions prop. Please add it to ensure it appears in the dropdown.`
+    );
+  }
+  const [activePage, setActivePage] = useControllableState({
+    value: activePageProp,
+    defaultValue: defaultActivePage
+  });
   const [itemsPerPage, setItemsPerPage] = useState22(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
@@ -10301,7 +10441,7 @@ var Pagination = ({
         onClick: (event) => {
           onPageChange(event, item);
         },
-        "aria-label": isActive ? t(texts17.currentPage(item)) : t(texts17.page(item)),
+        "aria-label": isActive ? t(texts18.currentPage(item)) : t(texts18.page(item)),
         children: item
       }
     ) : /* @__PURE__ */ jsx287(
@@ -10321,7 +10461,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts17.previousPage)
+      "aria-label": t(texts18.previousPage)
     }
   );
   const nextPageButton = /* @__PURE__ */ jsx287(
@@ -10333,7 +10473,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage + 1);
       },
-      "aria-label": t(texts17.nextPage)
+      "aria-label": t(texts18.nextPage)
     }
   );
   const isOnFirstPage = activePage === 1;
@@ -10343,7 +10483,7 @@ var Pagination = ({
     {
       as: "nav",
       ref,
-      "aria-label": t(texts17.pagination),
+      "aria-label": t(texts18.pagination),
       display: "flex",
       alignItems: "center",
       ...!withSelect && !withCounter && {
@@ -10407,7 +10547,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, 1);
                       },
-                      "aria-label": t(texts17.firstPage)
+                      "aria-label": t(texts18.firstPage)
                     }
                   )
                 }
@@ -10461,7 +10601,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, pagesLength);
                       },
-                      "aria-label": t(texts17.lastPage)
+                      "aria-label": t(texts18.lastPage)
                     }
                   )
                 }
@@ -10491,7 +10631,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage
@@ -10499,11 +10639,11 @@ var Pagination = ({
               isClearable: false,
               onChange: handleSelectChange,
               componentSize: "small",
-              "aria-label": t(texts17.itemsPerPage)
+              "aria-label": t(texts18.itemsPerPage)
             }
           ),
           withCounter && /* @__PURE__ */ jsx287(Paragraph, { children: t(
-            texts17.showsAmountOfTotalItems(
+            texts18.showsAmountOfTotalItems(
               activePageFirstItem,
               activePageLastItem,
               itemsAmount
@@ -10516,7 +10656,7 @@ var Pagination = ({
   );
 };
 Pagination.displayName = "Pagination";
-var texts17 = createTexts({
+var texts18 = createTexts({
   pagination: {
     nb: "Paginering",
     no: "Paginering",
@@ -10660,12 +10800,12 @@ var COUNTRIES = {
   CO: { name: "Colombia", id: "CO", dialCode: "+57" },
   KM: { name: "Komorene (\u202B\u062C\u0632\u0631 \u0627\u0644\u0642\u0645\u0631\u202C\u200E)", id: "KM", dialCode: "+269" },
   CD: {
-    name: "Kongo (DR) (Jamhuri ya Kisoemokrasia ya Kongo)",
+    name: "Kongo, den demokratiske republikken (R\xE9publique d\xE9mocratique du Congo)",
     id: "CD",
     dialCode: "+243"
   },
   CG: {
-    name: "Kongo (Republikken) (Congo-Brazzaville)",
+    name: "Kongo, republikken (R\xE9publique du Congo)",
     id: "CG",
     dialCode: "+242"
   },
@@ -10743,7 +10883,7 @@ var COUNTRIES = {
   IR: { name: "Iran (\u202B\u0627\u06CC\u0631\u0627\u0646\u202C\u200E)", id: "IR", dialCode: "+98" },
   IQ: { name: "Irak (\u202B\u0627\u0644\u0639\u0631\u0627\u0642\u202C\u200E)", id: "IQ", dialCode: "+964" },
   IE: { name: "Irland (\xC9ire)", id: "IE", dialCode: "+353" },
-  IM: { name: "Isle of Man", id: "IM", dialCode: "+44" },
+  IM: { name: "Man (Isle of Man)", id: "IM", dialCode: "+44" },
   IL: { name: "Israel (\u202B\u05D9\u05E9\u05E8\u05D0\u05DC\u202C\u200E)", id: "IL", dialCode: "+972" },
   IT: { name: "Italia", id: "IT", dialCode: "+39" },
   JM: { name: "Jamaica", id: "JM", dialCode: "+1" },
@@ -10767,7 +10907,7 @@ var COUNTRIES = {
   LU: { name: "Luxembourg", id: "LU", dialCode: "+352" },
   MO: { name: "Macao (\u6FB3\u9580)", id: "MO", dialCode: "+853" },
   MK: {
-    name: "Nord-Makedonia (FYROM) (\u041C\u0430\u043A\u0435\u0434\u043E\u043D\u0438\u0458\u0430)",
+    name: "Nord-Makedonia (\u041C\u0430\u043A\u0435\u0434\u043E\u043D\u0438\u0458\u0430)",
     id: "MK",
     dialCode: "+389"
   },
@@ -10856,7 +10996,7 @@ var COUNTRIES = {
   },
   LC: { name: "Saint Lucia", id: "LC", dialCode: "+1758" },
   MF: {
-    name: "Saint Martin (Saint-Martin (partie fran\xE7aise))",
+    name: "Saint-Martin (Collectivit\xE9 de Saint-Martin)",
     id: "MF",
     dialCode: "+590"
   },
@@ -11039,8 +11179,8 @@ var PhoneInput = ({
 }) => {
   var _a;
   const { t } = useTranslation();
-  const tGroupLabel = groupLabel != null ? groupLabel : t(texts18.countryCodeAndPhoneNumber);
-  const tSelectLabel = selectLabel != null ? selectLabel : t(texts18.countryCode);
+  const tGroupLabel = groupLabel != null ? groupLabel : t(texts19.countryCodeAndPhoneNumber);
+  const tSelectLabel = selectLabel != null ? selectLabel : t(texts19.countryCode);
   const generatedId = useId19();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
@@ -11213,7 +11353,7 @@ var getCallingCode = (s) => {
   var _a;
   return (_a = s.substring(s.indexOf("+"), s.length)) != null ? _a : "";
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   countryCode: {
     nb: "Landskode",
     no: "Landskode",
@@ -11526,7 +11666,7 @@ var ProgressTracker_default = {
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
 import { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment8, jsx as jsx291, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx291, jsxs as jsxs72 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
     return "disabled";
@@ -11558,6 +11698,7 @@ var ProgressTrackerItem = (props) => {
     ...rest
   } = props;
   const { t } = useTranslation();
+  const stepNumber = index + 1;
   const { activeStep, handleStepChange, direction } = useProgressTrackerContext();
   const active = activeStep === index;
   const itemState = toItemState(active, completed, disabled);
@@ -11574,14 +11715,14 @@ var ProgressTrackerItem = (props) => {
     if (icon !== void 0) {
       return /* @__PURE__ */ jsx291(Icon, { icon, iconSize: "small" });
     }
-    return index + 1;
+    return stepNumber;
   }, [completed, icon, index]);
   function getTextColor2() {
     if (disabled) return "text-subtle";
     if (active) return "text-action-resting";
   }
   const isInactiveLink = disabled || active;
-  const stepContent = /* @__PURE__ */ jsxs72(Fragment8, { children: [
+  const stepContent = /* @__PURE__ */ jsxs72(Fragment9, { children: [
     /* @__PURE__ */ jsx291(
       Box,
       {
@@ -11597,7 +11738,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ jsxs72(
+    /* @__PURE__ */ jsx291(
       Typography,
       {
         as: "div",
@@ -11607,14 +11748,11 @@ var ProgressTrackerItem = (props) => {
           isInactiveLink && ProgressTracker_default["item-text--inactive-link"]
         ),
         color: getTextColor2(),
-        children: [
-          /* @__PURE__ */ jsx291(VisuallyHidden, { children: t(texts19.stepTextBefore(index + 1)) }),
-          children,
-          /* @__PURE__ */ jsx291(VisuallyHidden, { children: completed ? t(texts19.completed) : t(texts19.uncompleted) })
-        ]
+        children
       }
     )
   ] });
+  const ariaLabel = props["aria-label"] ? props["aria-label"] : `${children}, ${stepNumber}. ${completed ? t(texts20.completed) : t(texts20.uncompleted)}`;
   return /* @__PURE__ */ jsx291(
     Box,
     {
@@ -11641,6 +11779,7 @@ var ProgressTrackerItem = (props) => {
             htmlProps,
             rest
           ),
+          "aria-label": ariaLabel,
           onClick: () => handleClick(),
           disabled,
           children: stepContent
@@ -11654,6 +11793,7 @@ var ProgressTrackerItem = (props) => {
             htmlProps,
             rest
           ),
+          "aria-label": ariaLabel,
           children: stepContent
         }
       )
@@ -11661,24 +11801,18 @@ var ProgressTrackerItem = (props) => {
   );
 };
 ProgressTrackerItem.displayName = "ProgressTracker.Item";
-var texts19 = createTexts({
-  stepTextBefore: (index) => ({
-    nb: `${index}. trinn, `,
-    no: `${index}. trinn, `,
-    nn: `${index}. trinn, `,
-    en: `${index}. step, `
-  }),
+var texts20 = createTexts({
   uncompleted: {
-    nb: ", ikke ferdig",
-    no: ", ikke ferdig",
-    nn: ", ikkje ferdig",
-    en: "uncompleted"
+    nb: "trinn ikke ferdig",
+    no: "trinn ikke ferdig",
+    nn: "trinn ikkje ferdig",
+    en: "step uncompleted"
   },
   completed: {
-    nb: ", ferdig",
-    no: ", ferdig",
-    nn: ", ferdig",
-    en: ", completed"
+    nb: "trinn ferdig",
+    no: "trinn ferdig",
+    nn: "trinn ferdig",
+    en: "step completed"
   }
 });
 
@@ -11724,7 +11858,7 @@ var ProgressTracker = (() => {
         children: /* @__PURE__ */ jsx292(
           "nav",
           {
-            "aria-label": ariaLabel != null ? ariaLabel : t(texts20.stepProgression),
+            "aria-label": ariaLabel != null ? ariaLabel : t(texts21.stepProgression),
             ...getBaseHTMLProps(id, className, htmlProps, rest),
             children: /* @__PURE__ */ jsx292(
               Box,
@@ -11762,7 +11896,7 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var texts20 = createTexts({
+var texts21 = createTexts({
   stepProgression: {
     nb: "Stegprogresjon",
     no: "Stegprogresjon",
@@ -11983,7 +12117,7 @@ var SearchSuggestions = ({
             {
               index,
               focus: focus === index && showSuggestions,
-              "aria-label": t(texts21.search(suggestion)),
+              "aria-label": t(texts22.search(suggestion)),
               onClick: onSuggestionClick,
               "aria-setsize": suggestionsToRender.length,
               "aria-posinset": index,
@@ -11997,7 +12131,7 @@ var SearchSuggestions = ({
   );
 };
 SearchSuggestions.displayName = "SearchSuggestions";
-var texts21 = createTexts({
+var texts22 = createTexts({
   search: (suggestion) => ({
     no: `${suggestion} s\xF8k`,
     nb: `${suggestion} s\xF8k`,
@@ -12007,7 +12141,7 @@ var texts21 = createTexts({
 });
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment9, jsx as jsx296, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx296, jsxs as jsxs75 } from "react/jsx-runtime";
 var getIconSize2 = (size2) => {
   switch (size2) {
     case "large":
@@ -12130,7 +12264,7 @@ var Search = ({
             )
           }
         ),
-        hasSuggestions && /* @__PURE__ */ jsxs75(Fragment9, { children: [
+        hasSuggestions && /* @__PURE__ */ jsxs75(Fragment10, { children: [
           /* @__PURE__ */ jsx296(
             SearchSuggestions,
             {
@@ -12143,13 +12277,13 @@ var Search = ({
               componentSize
             }
           ),
-          /* @__PURE__ */ jsx296(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts22.useArrowKeys) })
+          /* @__PURE__ */ jsx296(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts23.useArrowKeys) })
         ] }),
         hasValue && /* @__PURE__ */ jsx296(
           ClearButton,
           {
             size: getIconSize2(componentSize),
-            "aria-label": t(texts22.clearSearch),
+            "aria-label": t(texts23.clearSearch),
             onClick: clearInput,
             className: Search_default["clear-button"]
           }
@@ -12178,7 +12312,7 @@ var Search = ({
                 size: componentSize,
                 onClick,
                 ...otherButtonProps,
-                children: buttonLabel != null ? buttonLabel : t(texts22.search)
+                children: buttonLabel != null ? buttonLabel : t(texts23.search)
               }
             )
           ]
@@ -12189,7 +12323,7 @@ var Search = ({
   ] });
 };
 Search.displayName = "Search";
-var texts22 = createTexts({
+var texts23 = createTexts({
   clearSearch: {
     nb: "T\xF8m s\xF8k",
     no: "T\xF8m s\xF8k",
@@ -12402,7 +12536,7 @@ var SplitButton = ({
         {
           ...buttonStyleProps,
           icon: isOpen ? ChevronUpIcon : ChevronDownIcon,
-          "aria-label": t(texts23.moreActions),
+          "aria-label": t(texts24.moreActions),
           purpose,
           className: cn(
             SplitButton_default.option,
@@ -12416,7 +12550,7 @@ var SplitButton = ({
   ] });
 };
 SplitButton.displayName = "SplitButton";
-var texts23 = createTexts({
+var texts24 = createTexts({
   moreActions: {
     nb: "Flere handlinger",
     no: "Flere handlinger",
@@ -12428,7 +12562,7 @@ var texts23 = createTexts({
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children4,
-  Fragment as Fragment10,
+  Fragment as Fragment11,
   cloneElement as cloneElement6,
   isValidElement as isValidElement6,
   useEffect as useEffect32,
@@ -12581,7 +12715,7 @@ var SortCell = ({
         StylelessButton,
         {
           onClick,
-          "aria-description": t(texts24.changeSort),
+          "aria-description": t(texts25.changeSort),
           className: cn(Table_default["sort-button"], focusable),
           children: [
             children,
@@ -12594,7 +12728,7 @@ var SortCell = ({
   );
 };
 SortCell.displayName = "Table.SortCell";
-var texts24 = createTexts({
+var texts25 = createTexts({
   changeSort: {
     nb: "Aktiver for \xE5 endre sorteringsrekkef\xF8lge",
     no: "Aktiver for \xE5 endre sorteringsrekkef\xF8lge",
@@ -12688,7 +12822,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment11, jsx as jsx309, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx309, jsxs as jsxs78 } from "react/jsx-runtime";
 var CollapsibleRow = ({
   type: _type,
   className,
@@ -12731,7 +12865,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(Fragment11, { children: [
       /* @__PURE__ */ jsx309(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
       isValidElement6(child) && cloneElement6(child, {
         collapsibleProps: { isCollapsibleChild: true }
@@ -12744,11 +12878,11 @@ var CollapsibleRow = ({
   });
   const headerRow = () => {
     if (type !== "head" || !isCollapsed) return null;
-    return /* @__PURE__ */ jsx309(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment11, { children: [
+    return /* @__PURE__ */ jsx309(Row, { ref, ...rowProps(), children: /* @__PURE__ */ jsxs78(Fragment12, { children: [
       definingColumnCells,
       /* @__PURE__ */ jsxs78(Table2.Cell, { type: "head", layout: "center", children: [
-        t(texts25.expand),
-        /* @__PURE__ */ jsx309(VisuallyHidden, { children: t(texts25.row) })
+        t(texts26.expand),
+        /* @__PURE__ */ jsx309(VisuallyHidden, { children: t(texts26.row) })
       ] })
     ] }) });
   };
@@ -12776,16 +12910,16 @@ var CollapsibleRow = ({
       ) })
     ] });
   };
-  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment11, { children: [
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs78(Fragment12, { children: [
     headerRow(),
-    type === "body" && /* @__PURE__ */ jsxs78(Fragment11, { children: [
+    type === "body" && /* @__PURE__ */ jsxs78(Fragment12, { children: [
       rowWithChevron(),
       childrenCollapsed ? null : collapsedRows
     ] })
   ] }) : /* @__PURE__ */ jsx309(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
-var texts25 = createTexts({
+var texts26 = createTexts({
   expand: {
     nb: "Utvid",
     no: "Utvid",