optimized-react-component-library-xyz123 3.1.1 → 3.2.1

package/dist/index.mjs

@@ -516,7 +516,7 @@ var PreviewTextField = ({
 };
 
 // src/components/input-components/AddFilesStandard/AddFilesStandard.tsx
-import { useCallback, useEffect as useEffect6, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
 import clsx3 from "clsx";
 
 // src/components/input-components/AddFilesStandard/DropFilesStandard.tsx
@@ -622,7 +622,7 @@ var ExploreFiles = ({
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  let addFilesInfoText = numberOfFiles > 0 ? activatedLanguage === "sv" ? `${numberOfFiles} filer valda (max ${allowedNumberOfFiles})` : `${numberOfFiles} files chosed (max ${allowedNumberOfFiles})` : activatedLanguage === "sv" ? "Ingen fil vald" : "No file chosen";
+  const addFilesInfoText = numberOfFiles > 0 ? activatedLanguage === "sv" ? `${numberOfFiles} filer valda (max ${allowedNumberOfFiles})` : `${numberOfFiles} files chosed (max ${allowedNumberOfFiles})` : activatedLanguage === "sv" ? "Ingen fil vald" : "No file chosen";
   const ariaLabelText = `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`;
   return /* @__PURE__ */ jsx9(Fragment8, { children: /* @__PURE__ */ jsxs8("div", { className: "inputContainer", children: [
     /* @__PURE__ */ jsxs8(
@@ -680,7 +680,7 @@ var ExploreFiles = ({
 var ExploreFilesStandard_default = ExploreFiles;
 
 // src/components/input-components/AddFilesStandard/SelectedFilesStandard.tsx
-import React6, { useEffect as useEffect5, useState as useState6, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useState as useState6, useRef as useRef3 } from "react";
 import { Col, Row } from "react-bootstrap";
 
 // src/components/input-components/AddFilesStandard/IndicatorStandard.tsx
@@ -710,7 +710,7 @@ var SelectedFiles = ({
 }) => {
   const theDiv = useRef3(null);
   const remove = (file) => {
-    let newFiles = questionObject.files.filter((f) => f !== file);
+    const newFiles = questionObject.files.filter((f) => f !== file);
     const newCountOfFiles = newFiles.length;
     setNumberOfFiles(newCountOfFiles);
     let e = { target: { value: `${newCountOfFiles} files`, files: newFiles } };
@@ -721,7 +721,7 @@ var SelectedFiles = ({
   };
   const useWindowWidth = () => {
     const [windowWidth2, setWindowWidth] = useState6(window.innerWidth);
-    useEffect5(() => {
+    useEffect4(() => {
       const handleResize = () => {
         setWindowWidth(window.innerWidth);
       };
@@ -744,7 +744,7 @@ var SelectedFiles = ({
           mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
           const fileType = errorObj.FileName.split(".").pop();
           mobileFirstFileName = mobileFirstFileName + "." + fileType;
-          return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React6.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
+          return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(Fragment10, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
             /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsx11("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ jsx11("span", { className: "desktopFileName", children: errorObj.FileName }) }) }),
             /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(
               Col,
@@ -758,7 +758,7 @@ var SelectedFiles = ({
                 children: activatedLanguage === "sv" ? errorObj.svMessage : errorObj.enMessage
               }
             ) })
-          ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
+          ] }) }) }) }) }, `error-${errorObj.FileName}-${index}`);
         })
       ] }) }),
       /* @__PURE__ */ jsx11("div", { className: "addFile-error-close-button", children: /* @__PURE__ */ jsx11(
@@ -791,60 +791,67 @@ var SelectedFiles = ({
         }
       ) })
     ] }) }),
-    questionObject.files.length > 0 && /* @__PURE__ */ jsx11("ul", { className: "fileListUnorderedList", "aria-label": activatedLanguage === "en" ? "Uploaded files" : "Uppladdade filer", children: questionObject.files.map((file, index) => {
-      const indicatorfileName = file.FileName;
-      let mobileFirstFileName = file.FileName.split(".").shift();
-      mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
-      const fileType = file.FileName.split(".").pop();
-      mobileFirstFileName = mobileFirstFileName + "." + fileType;
-      return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React6.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "fileItem", children: [
-          /* @__PURE__ */ jsx11(Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "uploadedDot", children: /* @__PURE__ */ jsx11(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              children: /* @__PURE__ */ jsx11(
-                "path",
+    questionObject.files.length > 0 && /* @__PURE__ */ jsx11(
+      "ul",
+      {
+        className: "fileListUnorderedList",
+        "aria-label": activatedLanguage === "en" ? "Uploaded files" : "Uppladdade filer",
+        children: questionObject.files.map((file, index) => {
+          const indicatorfileName = file.FileName;
+          let mobileFirstFileName = file.FileName.split(".").shift();
+          mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
+          const fileType = file.FileName.split(".").pop();
+          mobileFirstFileName = mobileFirstFileName + "." + fileType;
+          return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(Fragment10, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "fileItem", children: [
+              /* @__PURE__ */ jsx11(Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "uploadedDot", children: /* @__PURE__ */ jsx11(
+                "svg",
                 {
-                  d: "M1 4.65913L2.8 6.45913L7 1.35913",
-                  stroke: "white",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round"
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "8",
+                  height: "8",
+                  viewBox: "0 0 8 8",
+                  fill: "none",
+                  children: /* @__PURE__ */ jsx11(
+                    "path",
+                    {
+                      d: "M1 4.65913L2.8 6.45913L7 1.35913",
+                      stroke: "white",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
                 }
-              )
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx11(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsxs9("span", { className: "mobileFirstFileName", children: [
-            mobileFirstFileName,
-            " (",
-            Math.ceil(file.FileSize / (1024 * 1024)),
-            " ",
-            "MB)"
-          ] }) : /* @__PURE__ */ jsxs9("span", { className: "desktopFileName", children: [
-            file.FileName,
-            " (",
-            /* @__PURE__ */ jsx11("span", { className: "fileSizeText", children: file.FileSize < 1024 * 1024 ? `${Math.round(file.FileSize / 1024)} kB` : `${(file.FileSize / (1024 * 1024)).toFixed(1)} MB` }),
-            " ",
-            ")"
-          ] }) }),
-          /* @__PURE__ */ jsx11(Col, { className: "lastCol", children: /* @__PURE__ */ jsx11(
-            "button",
-            {
-              className: "selectedFilesLinkButton",
-              onClick: () => remove(file),
-              "aria-label": activatedLanguage === "sv" ? `Radera ${indicatorfileName}` : `Delete ${indicatorfileName}`,
-              children: activatedLanguage === "sv" ? "Radera" : "Delete"
-            }
-          ) })
-        ] }),
-        showIndicator && /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(Col, { style: { width: "100%", padding: 0 }, children: /* @__PURE__ */ jsx11(IndicatorStandard_default, { filename: indicatorfileName }) }) }),
-        /* @__PURE__ */ jsx11(Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx11(Col, { className: "makeSpace" }) })
-      ] }, index) }) }) }, `file-${file.FileName}-${index}`) });
-    }) }),
+              ) }) }),
+              /* @__PURE__ */ jsx11(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsxs9("span", { className: "mobileFirstFileName", children: [
+                mobileFirstFileName,
+                " (",
+                Math.ceil(file.FileSize / (1024 * 1024)),
+                " ",
+                "MB)"
+              ] }) : /* @__PURE__ */ jsxs9("span", { className: "desktopFileName", children: [
+                file.FileName,
+                " (",
+                /* @__PURE__ */ jsx11("span", { className: "fileSizeText", children: file.FileSize < 1024 * 1024 ? `${Math.round(file.FileSize / 1024)} kB` : `${(file.FileSize / (1024 * 1024)).toFixed(1)} MB` }),
+                " ",
+                ")"
+              ] }) }),
+              /* @__PURE__ */ jsx11(Col, { className: "lastCol", children: /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  className: "selectedFilesLinkButton",
+                  onClick: () => remove(file),
+                  "aria-label": activatedLanguage === "sv" ? `Radera ${indicatorfileName}` : `Delete ${indicatorfileName}`,
+                  children: activatedLanguage === "sv" ? "Radera" : "Delete"
+                }
+              ) })
+            ] }),
+            showIndicator && /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(Col, { style: { width: "100%", padding: 0 }, children: /* @__PURE__ */ jsx11(IndicatorStandard_default, { filename: indicatorfileName }) }) }),
+            /* @__PURE__ */ jsx11(Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx11(Col, { className: "makeSpace" }) })
+          ] }, index) }) }) }) }, `file-${file.FileName}-${index}`);
+        })
+      }
+    ),
     /* @__PURE__ */ jsx11("div", { ref: theDiv, className: "pts-clipboard-container" })
   ] });
 };
@@ -895,14 +902,14 @@ var AddFiles = ({
   const [errorMessageAddingFile, setErrorMessageAddingFile] = useState7([]);
   const [newFiles, setNewFiles] = useState7([]);
   const [dropFilesText, setDropFilesText] = useState7("Dra och sl\xE4pp dina filer h\xE4r");
-  useEffect6(() => {
+  useEffect5(() => {
     if (activatedLanguage === "sv") {
       setDropFilesText("Dra och sl\xE4pp dina filer h\xE4r");
     } else {
       setDropFilesText("Drag and drop your files here");
     }
   }, [activatedLanguage]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (questionObject.files && questionObject.files.length > 0) {
       setNumberOfFiles(questionObject.files.length);
     }
@@ -997,7 +1004,7 @@ var AddFiles = ({
       reader.readAsDataURL(file);
     });
   };
-  useEffect6(() => {
+  useEffect5(() => {
     if (newFiles.length > 0) {
       const currentFiles = questionObject.files ? questionObject.files : [];
       const e = {
@@ -1015,7 +1022,7 @@ var AddFiles = ({
     setNumberOfFiles(newCount);
   };
   const removeOneError = (errorIndex) => {
-    let newErrors = errorMessageAddingFile.filter((e, index) => index !== errorIndex);
+    const newErrors = errorMessageAddingFile.filter((e, index) => index !== errorIndex);
     setErrorMessageAddingFile(newErrors);
   };
   const removeError = () => {
@@ -1117,7 +1124,7 @@ var PreviewAddFiles = ({
 };
 
 // src/components/input-components/SingleCheckboxStandard/SingleCheckboxStandard.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 import DOMPurify3 from "dompurify";
 import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var SingleCheckbox = ({
@@ -1132,7 +1139,7 @@ var SingleCheckbox = ({
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
   const [checked, setChecked] = useState8(false);
-  useEffect7(() => {
+  useEffect6(() => {
     if (question.answer && question.answer === "true") {
       setChecked(true);
     } else {
@@ -1141,7 +1148,7 @@ var SingleCheckbox = ({
   }, [question.answer]);
   const handleInputChange = (event) => {
     setChecked(event.target.checked);
-    let answer = event.target.checked ? "true" : "false";
+    const answer = event.target.checked ? "true" : "false";
     const e = { target: { value: answer } };
     handleQuestionInputChange(e, question);
   };
@@ -2063,7 +2070,7 @@ var InfoOnlyStandard_default = InputInfoOnly;
 import React9 from "react";
 
 // src/components/input-components/RadioMultipleWithInfoStandard/RadioCollapseItem.tsx
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 import DOMPurify7 from "dompurify";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioCollapseItem = ({
@@ -2085,7 +2092,7 @@ var RadioCollapseItem = ({
   const openLabel = activatedLanguage === "sv" ? "Visa mer information om" : "Show more information about";
   const closeLabel = activatedLanguage === "sv" ? "D\xF6lj mer information om" : "Hide more information about";
   const buttonLabel = `${isOpen ? closeLabel : openLabel} "${label}"`;
-  useEffect8(() => {
+  useEffect7(() => {
     if (questionAnswer === value) {
       setIsOpen(true);
     } else {
@@ -2194,7 +2201,7 @@ var RadioWithInfo = ({
         children: [
           groupedOptionArray.map((group, g_index) => {
             var _a2;
-            let subId = "subheading-" + g_index;
+            const subId = "subheading-" + g_index;
             return /* @__PURE__ */ jsxs17(React9.Fragment, { children: [
               /* @__PURE__ */ jsx21("legend", { className: "pts-radioWithInfo-sub-headline", id: subId, children: group.category }),
               /* @__PURE__ */ jsx21("div", { role: "group", "aria-labelledby": subId, children: (_a2 = group.items) == null ? void 0 : _a2.map((option, o_index) => {
@@ -2214,7 +2221,8 @@ var RadioWithInfo = ({
                     questionIsMandatory: (_c2 = question.isQuestionMandatory) != null ? _c2 : false,
                     optionText: (_e = (_d = group.items.find((optionInfo) => optionInfo.value === option.value)) == null ? void 0 : _d.info) != null ? _e : "",
                     activatedLanguage
-                  }
+                  },
+                  questionId + groupId + index
                 );
               }) })
             ] }, subId);
@@ -3038,7 +3046,7 @@ var useFormStatusModal = (formStatus, handleModalOpen, handleModalClose, mainSel
 };
 
 // src/hooks/usePTSPageTitle/usePTSPageTitle.ts
-import { useMemo, useEffect as useEffect10 } from "react";
+import { useMemo, useEffect as useEffect9 } from "react";
 var usePTSPageTitle = ({
   formStatus,
   activeStep,
@@ -3056,19 +3064,19 @@ var usePTSPageTitle = ({
     if (activeStep === 0 && baseTitle) return baseTitle;
     return stepTitle || baseTitle || fallbackTitle;
   }, [formStatus, activeStep, applicationContent, thankYouBlock, steps, fallbackTitle]);
-  useEffect10(() => {
+  useEffect9(() => {
     document.title = computedTitle;
   }, [computedTitle]);
   return computedTitle;
 };
 
 // src/hooks/useInputMethodDetection/useInputMethodDetection.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useInputMethodDetection = ({
   mouseClassName = "using-mouse",
   keyboardToggleKey = "Tab"
 } = {}) => {
-  useEffect11(() => {
+  useEffect10(() => {
     const handleMouseDown = () => {
       document.body.classList.add(mouseClassName);
     };
@@ -3087,7 +3095,7 @@ var useInputMethodDetection = ({
 };
 
 // src/hooks/useCookieConsent/useCookieConsent.ts
-import { useCallback as useCallback2, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect11, useMemo as useMemo2, useState as useState10 } from "react";
 var useCookieConsent = ({
   cookieName,
   choiceKey,
@@ -3116,7 +3124,7 @@ var useCookieConsent = ({
     }
     setShowBanner(false);
   }, [areCookiesAccepted, onConsentChange]);
-  useEffect12(() => {
+  useEffect11(() => {
     const cookiesAccepted = areCookiesAccepted();
     const choiceMade = hasChoiceBeenMade();
     setShowBanner(!cookiesAccepted && !choiceMade);
@@ -3245,7 +3253,7 @@ var QuestionRenderer = ({
 var QuestionRenderer_default = QuestionRenderer;
 
 // src/components/question-rendering/QuestionGroup/QuestionGroup.tsx
-import { useEffect as useEffect13, Fragment as Fragment18 } from "react";
+import { useEffect as useEffect12, Fragment as Fragment18 } from "react";
 import { Fragment as Fragment19, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var QuestionGroup = ({
   questions,
@@ -3257,6 +3265,13 @@ var QuestionGroup = ({
   markQuestionAsDisplayed
 }) => {
   var _a, _b, _c;
+  useEffect12(() => {
+    questions.forEach((question) => {
+      if (question.visible && !question.isDisplayed) {
+        markQuestionAsDisplayed(question);
+      }
+    });
+  }, [questions]);
   if (!questions || questions.length === 0) {
     return null;
   }
@@ -3265,13 +3280,6 @@ var QuestionGroup = ({
   const groupMandatory = (_a = firstQuestion.validationType) == null ? void 0 : _a.find(
     (e) => e.startsWith("groupCheck-")
   );
-  useEffect13(() => {
-    questions.forEach((question) => {
-      if (question.visible && !question.isDisplayed) {
-        markQuestionAsDisplayed(question);
-      }
-    });
-  }, [questions]);
   const groupQuestions = /* @__PURE__ */ jsx25(Fragment19, { children: questions.map((question, index) => {
     var _a2;
     return /* @__PURE__ */ jsx25(Fragment18, { children: /* @__PURE__ */ jsx25(
@@ -3948,7 +3956,7 @@ var HeaderStandard_default = Header;
 import { useRef as useRef5, useState as useState13 } from "react";
 
 // src/components/layout/NavigationStandard/NavigationStandard.tsx
-import { useEffect as useEffect14, useState as useState11, useRef as useRef4 } from "react";
+import { useEffect as useEffect13, useState as useState11, useRef as useRef4 } from "react";
 import { Fragment as Fragment20, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var Navigation = ({
   setIsMenyOpen,
@@ -3956,7 +3964,7 @@ var Navigation = ({
   activatedLanguage = "sv",
   menuLinks = [],
   openButtonRef = null,
-  linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx30("a", { ...props }),
+  linkComponent: LinkComponent = "a",
   navigationCloseFocusId,
   activePath = null
 }) => {
@@ -3970,9 +3978,13 @@ var Navigation = ({
   const handleMenuClick = (typeOfInteraction) => {
     var _a, _b;
     setIsMenyOpen == null ? void 0 : setIsMenyOpen(false);
-    typeOfInteraction === "close" ? (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus() : navigationCloseFocusId && ((_b = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _b.focus());
+    if (typeOfInteraction === "close") {
+      (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus();
+    } else if (navigationCloseFocusId) {
+      (_b = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _b.focus();
+    }
   };
-  useEffect14(() => {
+  useEffect13(() => {
     var _a, _b;
     if (!isOpen) {
       setOpenSubMenu(null);
@@ -3984,7 +3996,7 @@ var Navigation = ({
     })) == null ? void 0 : _a.label[activatedLanguage]) != null ? _b : null;
     setOpenSubMenu(defaultOpenSubMenu);
   }, [isOpen, activePath, menuLinks, activatedLanguage]);
-  useEffect14(() => {
+  useEffect13(() => {
     if (!isOpen || !navRef.current) {
       return;
     }
@@ -4035,7 +4047,7 @@ var Navigation = ({
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
   const [instruction, setInstruction] = useState11("");
-  useEffect14(() => {
+  useEffect13(() => {
     if (firstVisitRef.current) {
       firstVisitRef.current = false;
       return;
@@ -4184,7 +4196,7 @@ var NavigationHeader = ({
   menuLinks = void 0,
   SetActivatedLanguage = () => {
   },
-  linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx33("a", { ...props }),
+  linkComponent: LinkComponent = "a",
   noLogoLink = false,
   navigationCloseFocusId,
   activePath = null
@@ -4389,7 +4401,6 @@ var LinkStandard = ({
 }) => {
   let iconClass = "";
   const excelExtensions = ["xls", "xlsx", "xlsm", "xlsb", "xltx", "xltm", "xlam", "csv"];
-  let linkTitle = title;
   const getFileExtension = (url2) => {
     const match = url2.match(/\.([a-zA-Z0-9]+)(?=$|\?|#)/);
     return match ? match[1] : null;
@@ -4411,7 +4422,7 @@ var LinkStandard = ({
       }
     }
   }
-  linkTitle = fileExtension !== null ? `${title} (${fileExtension})` : title;
+  const linkTitle = fileExtension !== null ? `${title} (${fileExtension})` : title;
   return /* @__PURE__ */ jsx36("div", { className: "pts-standard-link", children: /* @__PURE__ */ jsxs31(
     LinkComponent,
     {
@@ -4469,7 +4480,8 @@ var Collapse = ({
   customClass = ""
 }) => {
   const [isOpen, setIsOpen] = useState14(defaultOpen);
-  const uniqueId = id != null ? id : useId2();
+  const generatedId = useId2();
+  const uniqueId = id != null ? id : generatedId;
   const contentId = `${uniqueId}-content`;
   const openLabel = activatedLanguage === "sv" ? "Visa" : "Show";
   const closeLabel = activatedLanguage === "sv" ? "D\xF6lj" : "Hide";