@norges-domstoler/dds-components 21.13.0 → 21.15.0

package/dist/index.js

@@ -706,6 +706,7 @@ var BACKGROUNDS = [
   "surface-info-strong",
   "surface-paper-default",
   "surface-notification",
+  "surface-field-disabled",
   "brand-primary-default",
   "brand-primary-subtle",
   "brand-primary-medium",
@@ -773,6 +774,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);
   };
@@ -3263,8 +3266,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
@@ -5986,7 +5989,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
@@ -6221,12 +6229,12 @@ var CalendarPopoverContent = ({
 var import_jsx_runtime226 = require("react/jsx-runtime");
 function CalendarGrid({ state, ...props }) {
   const { t } = useTranslation();
-  const { locale: locale2 } = (0, import_i18n8.useLocale)();
+  const { locale } = (0, import_i18n8.useLocale)();
   const {
     gridProps: { onKeyDown, ...gridProps },
     headerProps
   } = (0, import_calendar2.useCalendarGrid)(props, state);
-  const weeksInMonth = (0, import_date3.getWeeksInMonth)(state.visibleRange.start, locale2);
+  const weeksInMonth = (0, import_date3.getWeeksInMonth)(state.visibleRange.start, locale);
   const weekDays = [
     { short: t(texts5.mo), full: t(texts5.monday) },
     { short: t(texts5.tu), full: t(texts5.tuesday) },
@@ -6408,11 +6416,11 @@ function createCalendar(identifier) {
 }
 function Calendar(props) {
   const { t } = useTranslation();
-  const { locale: locale2 } = (0, import_i18n10.useLocale)();
+  const { locale } = (0, import_i18n10.useLocale)();
   const state = (0, import_calendar4.useCalendarState)({
     ...props,
     createCalendar,
-    locale: locale2
+    locale
   });
   const {
     calendarProps,
@@ -6552,6 +6560,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
 var import_datepicker = require("@react-aria/datepicker");
 var import_react43 = require("react");
@@ -6566,7 +6607,6 @@ function DateSegment({
   state,
   componentSize
 }) {
-  var _a;
   const ref = (0, import_react43.useRef)(null);
   const { segmentProps } = (0, import_datepicker.useDateSegment)(segment, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
@@ -6596,7 +6636,7 @@ function DateSegment({
             children: segment.placeholder
           }
         ),
-        segment.isPlaceholder ? "" : segment.text.padStart(String((_a = segment.maxValue) != null ? _a : "").length, "0")
+        segment.isPlaceholder ? "" : segment.text
       ]
     }
   );
@@ -6801,11 +6841,11 @@ function DateField({
   clearable,
   ...props
 }) {
-  const { locale: locale2 } = (0, import_i18n12.useLocale)();
+  const { locale } = (0, import_i18n12.useLocale)();
   const { t } = useTranslation();
   const state = (0, import_datepicker3.useDateFieldState)({
     ...props,
-    locale: locale2,
+    locale,
     createCalendar: import_date5.createCalendar
   });
   const internalRef = (0, import_react45.useRef)(null);
@@ -6820,6 +6860,7 @@ function DateField({
   const clearDate = () => {
     state.setValue(null);
   };
+  const formattedSegments = formatDateFieldSegments(state.segments);
   return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
     DateInput,
     {
@@ -6858,7 +6899,7 @@ function DateField({
       ),
       labelProps,
       fieldProps,
-      children: state.segments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+      children: formattedSegments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
         DateSegment,
         {
           "aria-readonly": props.isReadOnly,
@@ -6919,6 +6960,10 @@ function DatePicker({
   ref,
   ...props
 }) {
+  const lang = useLanguage();
+  if (!lang) {
+    throw new Error("DatePicker must be used within a DdsProvider");
+  }
   const state = (0, import_datepicker5.useDatePickerState)(props);
   const domRef = useFocusManagerRef(ref && refIsFocusable(ref) ? ref : null);
   const internalRef = (0, import_react47.useRef)(null);
@@ -6928,7 +6973,7 @@ function DatePicker({
     state,
     internalRef
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(import_i18n14.I18nProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(import_i18n14.I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
     CalendarPopover,
     {
       isOpen: state.isOpen,
@@ -6969,10 +7014,14 @@ function TimePicker({
   ref,
   ...props
 }) {
+  const lang = useLanguage();
+  if (!lang) {
+    throw new Error("DatePicker must be used within a DdsProvider");
+  }
   const internalRef = (0, import_react48.useRef)(null);
   const state = (0, import_datepicker7.useTimeFieldState)({
     ...props,
-    locale
+    locale: LOCALE[lang]
   });
   const { labelProps, fieldProps } = (0, import_datepicker6.useTimeField)(
     { ...props, hideTimeZone: true, granularity: "hour" },
@@ -8214,22 +8263,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
 var import_jsx_runtime259 = require("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__ */ (0, import_jsx_runtime259.jsxs)("li", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
       Paper,
@@ -8240,42 +8298,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__ */ (0, import_jsx_runtime259.jsx)(
-            "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__ */ (0, import_jsx_runtime259.jsx)(
-            Icon,
-            {
-              icon: isValid ? CheckCircledIcon : ErrorIcon,
-              className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
-            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__ */ (0, import_jsx_runtime259.jsxs)(import_jsx_runtime259.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+              Icon,
+              {
+                icon: isValid ? CheckCircledIcon : ErrorIcon,
+                className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
               }
-            }
-          )
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+              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)
+                  )
+                }
+              }
+            )
+          ] })
         ]
       }
     ),
@@ -8374,14 +8436,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);
@@ -8393,11 +8453,14 @@ var useFileUploader = (props) => {
     initialFiles,
     value,
     onChange,
+    onKeyDown,
     accept,
     maxFiles,
     disabled,
+    readOnly,
     errorMessage
   } = props;
+  const { t } = useTranslation();
   const rootRef = (0, import_react58.useRef)(null);
   const inputRef = (0, import_react58.useRef)(null);
   const buttonRef = (0, import_react58.useRef)(null);
@@ -8415,6 +8478,7 @@ var useFileUploader = (props) => {
     isFileDialogActive: false,
     isDragActive: false,
     rootErrors: calcRootErrors(
+      t(texts14.invalidFileAmount),
       initialFileUploaderFiles,
       maxFiles,
       errorMessage
@@ -8427,7 +8491,7 @@ var useFileUploader = (props) => {
         const accepted = isFileAccepted(file, accept);
         return {
           file,
-          errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+          errors: accepted ? [] : [t(texts14.invalidFileType)]
         };
       });
       dispatch({
@@ -8439,7 +8503,12 @@ var useFileUploader = (props) => {
   (0, import_react58.useEffect)(() => {
     dispatch({
       type: "setRootErrors",
-      payload: calcRootErrors(stateFiles, maxFiles, errorMessage)
+      payload: calcRootErrors(
+        t(texts14.invalidFileAmount),
+        stateFiles,
+        maxFiles,
+        errorMessage
+      )
     });
   }, [dispatch, stateFiles, maxFiles, errorMessage]);
   const onRootFocus = (0, import_react58.useCallback)(
@@ -8489,7 +8558,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));
@@ -8561,10 +8630,13 @@ var useFileUploader = (props) => {
   const getInputProps = (0, import_react58.useCallback)(
     () => ({
       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(",") } : {}
     }),
@@ -8578,6 +8650,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
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -8595,7 +8681,9 @@ var FileUploader = (props) => {
     accept,
     maxFiles,
     disabled,
+    readOnly,
     onChange,
+    onKeyDown,
     width = "var(--dds-input-default-width)",
     errorMessage,
     hideFileList,
@@ -8603,7 +8691,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 = (0, import_react59.useId)();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
@@ -8619,16 +8707,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__ */ (0, import_jsx_runtime260.jsx)(
     File,
     {
@@ -8636,7 +8729,9 @@ var FileUploader = (props) => {
       index,
       file: stateFile,
       isValid: stateFile.errors.length === 0,
-      removeFile: () => removeFile(stateFile)
+      removeFile: () => removeFile(stateFile),
+      disabled,
+      readOnly
     },
     stateFile.file.name
   ));
@@ -8664,6 +8759,16 @@ var FileUploader = (props) => {
       children: btnLabel
     }
   );
+  const input = /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+    HiddenInput,
+    {
+      ...getInputProps(),
+      className: cn(readOnly && focus_default["focusable-sibling"]),
+      id: inputId,
+      "data-testid": "file-uploader-input",
+      "aria-describedby": fileListId
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
     Box,
     {
@@ -8676,10 +8781,11 @@ var FileUploader = (props) => {
           label,
           id: labelId,
           showRequiredStyling: required,
-          htmlFor: inputId
+          htmlFor: inputId,
+          readOnly
         }),
         hasTip && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
-        withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+        inactive ? input : withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
           VStack,
           {
             gap: "x1",
@@ -8691,31 +8797,45 @@ var FileUploader = (props) => {
               isDragActive && FileUploader_default["input-container--drag-active"]
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
-                "input",
-                {
-                  ...getInputProps(),
-                  id: inputId,
-                  "data-testid": "file-uploader-input"
-                }
-              ),
+              input,
               tDropAreaLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(VisuallyHidden, { children: t(texts14.uploadFileWithButton) }),
+              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(VisuallyHidden, { children: t(texts15.uploadFileWithButton) }),
               button
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)("div", { className: FileUploader_default["input-container--no-drag-zone"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("input", { ...getInputProps(), id: inputId }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(Box, { padding: "x 0", children: [
+          input,
           button
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(ErrorList, { errors: rootErrorsList }),
-        !hideFileList && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StylelessList, { children: fileListElements })
+        !hideFileList && /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+          "div",
+          {
+            id: fileListId,
+            className: cn(
+              readOnly && focus_default["focus-styled-sibling"],
+              readOnly && FileUploader_default["readonly--file-list"]
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(VisuallyHidden, { id: fileListNameId, children: t(texts15.uploadedFiles) }),
+              inactive && fileListElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+                Typography,
+                {
+                  italic: true,
+                  as: "span",
+                  color: disabled ? "text-subtle" : "text-medium",
+                  children: t(texts15.noFiles)
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(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",
@@ -8727,6 +8847,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"
   }
 });
 
@@ -8993,11 +9125,11 @@ var import_jsx_runtime272 = require("react/jsx-runtime");
 var inlineEditVisuallyHidden = (id, clearable) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(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.",
@@ -9326,7 +9458,7 @@ var InternalHeader = (props) => {
   const hasContextMenuElements = !!contextMenuItems && contextMenuItems.length > 0;
   const hasSmallScreenBreakpoint = !!smallScreenBreakpoint;
   const hasNavInContextMenu = hasSmallScreenBreakpoint && hasNavigationElements;
-  const navigation = hasNavigationElements ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("nav", { "aria-label": t(texts16.siteNavigation), children: /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
+  const navigation = hasNavigationElements ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("nav", { "aria-label": t(texts17.siteNavigation), children: /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
     ShowHide,
     {
       as: StylelessList,
@@ -9390,7 +9522,7 @@ var InternalHeader = (props) => {
                 {
                   icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
                   purpose: "tertiary",
-                  "aria-label": t(texts16.openMenu)
+                  "aria-label": t(texts17.openMenu)
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(OverflowMenu, { className: InternalHeader_default["context-menu"], children: [
@@ -9399,7 +9531,7 @@ var InternalHeader = (props) => {
                   ShowHide,
                   {
                     as: "nav",
-                    "aria-label": t(texts16.siteNavigation),
+                    "aria-label": t(texts17.siteNavigation),
                     showBelow: smallScreenBreakpoint,
                     children: /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(OverflowMenuList, { children: navItems.map((item, i) => /* @__PURE__ */ (0, import_react67.createElement)(OverflowMenuLink, { ...item, key: `nav-${i}` })) })
                   }
@@ -9435,7 +9567,7 @@ var InternalHeader = (props) => {
   );
 };
 InternalHeader.displayName = "InternalHeader";
-var texts16 = createTexts({
+var texts17 = createTexts({
   openMenu: {
     nb: "\xC5pne meny",
     no: "\xC5pne meny",
@@ -10045,7 +10177,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],
@@ -10111,10 +10243,9 @@ var getIndicatorIconSize = (componentSize) => {
   }
 };
 var DDSOption = ({
-  componentSize,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(Option, { ...props, children: [
-  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
+  props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
 var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(Option, { ...props, children: import_react70.default.createElement(props.customElement, props) });
@@ -10305,7 +10436,7 @@ function Select({
       if (customOptionElement) {
         return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(CustomOption, { ...props, customElement: customOptionElement });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props, componentSize });
+        return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(DDSOption, { ...props });
       }
     },
     [customOptionElement, componentSize]
@@ -10540,6 +10671,7 @@ var Pagination = ({
   itemsAmount,
   defaultItemsPerPage = 10,
   defaultActivePage = 1,
+  activePage: activePageProp,
   withPagination = true,
   withCounter,
   withSelect,
@@ -10559,7 +10691,15 @@ var Pagination = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [activePage, setActivePage] = (0, import_react73.useState)(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] = (0, import_react73.useState)(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
@@ -10587,7 +10727,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__ */ (0, import_jsx_runtime288.jsx)(
@@ -10607,7 +10747,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage - 1);
       },
-      "aria-label": t(texts17.previousPage)
+      "aria-label": t(texts18.previousPage)
     }
   );
   const nextPageButton = /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
@@ -10619,7 +10759,7 @@ var Pagination = ({
       onClick: (event) => {
         onPageChange(event, activePage + 1);
       },
-      "aria-label": t(texts17.nextPage)
+      "aria-label": t(texts18.nextPage)
     }
   );
   const isOnFirstPage = activePage === 1;
@@ -10629,7 +10769,7 @@ var Pagination = ({
     {
       as: "nav",
       ref,
-      "aria-label": t(texts17.pagination),
+      "aria-label": t(texts18.pagination),
       display: "flex",
       alignItems: "center",
       ...!withSelect && !withCounter && {
@@ -10693,7 +10833,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, 1);
                       },
-                      "aria-label": t(texts17.firstPage)
+                      "aria-label": t(texts18.firstPage)
                     }
                   )
                 }
@@ -10747,7 +10887,7 @@ var Pagination = ({
                       onClick: (event) => {
                         onPageChange(event, pagesLength);
                       },
-                      "aria-label": t(texts17.lastPage)
+                      "aria-label": t(texts18.lastPage)
                     }
                   )
                 }
@@ -10777,7 +10917,7 @@ var Pagination = ({
             {
               options: selectOptions,
               isSearchable: false,
-              width: "74px",
+              width: "90px",
               defaultValue: {
                 label: itemsPerPage.toString(),
                 value: itemsPerPage
@@ -10785,11 +10925,11 @@ var Pagination = ({
               isClearable: false,
               onChange: handleSelectChange,
               componentSize: "small",
-              "aria-label": t(texts17.itemsPerPage)
+              "aria-label": t(texts18.itemsPerPage)
             }
           ),
           withCounter && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Paragraph, { children: t(
-            texts17.showsAmountOfTotalItems(
+            texts18.showsAmountOfTotalItems(
               activePageFirstItem,
               activePageLastItem,
               itemsAmount
@@ -10802,7 +10942,7 @@ var Pagination = ({
   );
 };
 Pagination.displayName = "Pagination";
-var texts17 = createTexts({
+var texts18 = createTexts({
   pagination: {
     nb: "Paginering",
     no: "Paginering",
@@ -10940,12 +11080,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"
   },
@@ -11023,7 +11163,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" },
@@ -11047,7 +11187,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"
   },
@@ -11136,7 +11276,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"
   },
@@ -11319,8 +11459,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 = (0, import_react74.useId)();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
@@ -11493,7 +11633,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",
@@ -11817,6 +11957,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);
@@ -11833,7 +11974,7 @@ var ProgressTrackerItem = (props) => {
     if (icon !== void 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(Icon, { icon, iconSize: "small" });
     }
-    return index + 1;
+    return stepNumber;
   }, [completed, icon, index]);
   function getTextColor2() {
     if (disabled) return "text-subtle";
@@ -11856,7 +11997,7 @@ var ProgressTrackerItem = (props) => {
         children: stepNumberContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime292.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
       Typography,
       {
         as: "div",
@@ -11866,14 +12007,11 @@ var ProgressTrackerItem = (props) => {
           isInactiveLink && ProgressTracker_default["item-text--inactive-link"]
         ),
         color: getTextColor2(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(VisuallyHidden, { children: t(texts19.stepTextBefore(index + 1)) }),
-          children,
-          /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(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__ */ (0, import_jsx_runtime292.jsx)(
     Box,
     {
@@ -11900,6 +12038,7 @@ var ProgressTrackerItem = (props) => {
             htmlProps,
             rest
           ),
+          "aria-label": ariaLabel,
           onClick: () => handleClick(),
           disabled,
           children: stepContent
@@ -11913,6 +12052,7 @@ var ProgressTrackerItem = (props) => {
             htmlProps,
             rest
           ),
+          "aria-label": ariaLabel,
           children: stepContent
         }
       )
@@ -11920,24 +12060,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"
   }
 });
 
@@ -11983,7 +12117,7 @@ var ProgressTracker = (() => {
         children: /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
           "nav",
           {
-            "aria-label": ariaLabel != null ? ariaLabel : t(texts20.stepProgression),
+            "aria-label": ariaLabel != null ? ariaLabel : t(texts21.stepProgression),
             ...getBaseHTMLProps(id, className, htmlProps, rest),
             children: /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
               Box,
@@ -12021,7 +12155,7 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var texts20 = createTexts({
+var texts21 = createTexts({
   stepProgression: {
     nb: "Stegprogresjon",
     no: "Stegprogresjon",
@@ -12236,7 +12370,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,
@@ -12250,7 +12384,7 @@ var SearchSuggestions = ({
   );
 };
 SearchSuggestions.displayName = "SearchSuggestions";
-var texts21 = createTexts({
+var texts22 = createTexts({
   search: (suggestion) => ({
     no: `${suggestion} s\xF8k`,
     nb: `${suggestion} s\xF8k`,
@@ -12396,13 +12530,13 @@ var Search = ({
               componentSize
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts22.useArrowKeys) })
+          /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: t(texts23.useArrowKeys) })
         ] }),
         hasValue && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
           ClearButton,
           {
             size: getIconSize2(componentSize),
-            "aria-label": t(texts22.clearSearch),
+            "aria-label": t(texts23.clearSearch),
             onClick: clearInput,
             className: Search_default["clear-button"]
           }
@@ -12431,7 +12565,7 @@ var Search = ({
                 size: componentSize,
                 onClick,
                 ...otherButtonProps,
-                children: buttonLabel != null ? buttonLabel : t(texts22.search)
+                children: buttonLabel != null ? buttonLabel : t(texts23.search)
               }
             )
           ]
@@ -12442,7 +12576,7 @@ var Search = ({
   ] });
 };
 Search.displayName = "Search";
-var texts22 = createTexts({
+var texts23 = createTexts({
   clearSearch: {
     nb: "T\xF8m s\xF8k",
     no: "T\xF8m s\xF8k",
@@ -12651,7 +12785,7 @@ var SplitButton = ({
         {
           ...buttonStyleProps,
           icon: isOpen ? ChevronUpIcon : ChevronDownIcon,
-          "aria-label": t(texts23.moreActions),
+          "aria-label": t(texts24.moreActions),
           purpose,
           className: cn(
             SplitButton_default.option,
@@ -12665,7 +12799,7 @@ var SplitButton = ({
   ] });
 };
 SplitButton.displayName = "SplitButton";
-var texts23 = createTexts({
+var texts24 = createTexts({
   moreActions: {
     nb: "Flere handlinger",
     no: "Flere handlinger",
@@ -12823,7 +12957,7 @@ var SortCell = ({
         StylelessButton,
         {
           onClick,
-          "aria-description": t(texts24.changeSort),
+          "aria-description": t(texts25.changeSort),
           className: cn(Table_default["sort-button"], focusable),
           children: [
             children,
@@ -12836,7 +12970,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",
@@ -12984,8 +13118,8 @@ var CollapsibleRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(Row, { ref, ...rowProps(), children: /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(import_jsx_runtime310.Fragment, { children: [
       definingColumnCells,
       /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
-        t(texts25.expand),
-        /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(VisuallyHidden, { children: t(texts25.row) })
+        t(texts26.expand),
+        /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(VisuallyHidden, { children: t(texts26.row) })
       ] })
     ] }) });
   };
@@ -13022,7 +13156,7 @@ var CollapsibleRow = ({
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(Row, { ref, ...rowProps(), children });
 };
 CollapsibleRow.displayName = "CollapsibleTable.Row";
-var texts25 = createTexts({
+var texts26 = createTexts({
   expand: {
     nb: "Utvid",
     no: "Utvid",