optimized-react-component-library-xyz123 0.0.6 → 0.0.7

package/dist/index.css

@@ -612,7 +612,7 @@ textarea:focus-visible,
     sans-serif;
 }
 .files-drop-zone {
-  border: 2px dashed #ccc;
+  border: 2px dashed #6e3282;
   border-radius: 12px;
   padding: 3rem 2rem;
   text-align: center;
@@ -623,17 +623,27 @@ textarea:focus-visible,
   overflow: hidden;
 }
 .files-drop-zone:hover {
-  border-color: #1ea7fd;
-  background-color: #f0f8ff;
+  border-color: #6e3282;
+  background-color: #f5ebf8;
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(30, 167, 253, 0.15);
+  box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
 }
 .files-drop-zone.drag-active {
-  border-color: #1ea7fd;
-  background-color: #e6f7ff;
+  border-color: #6e3282;
+  background-color: #f5ebf8;
   transform: scale(1.02);
   box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
 }
+.files-drop-zone:focus {
+  border: 0.2rem solid #6e3282;
+}
+.files-drop-zone:focus-visible {
+  outline-offset: 0 !important;
+  outline-style: solid !important;
+  outline-color: #fff !important;
+  outline-width: 2px !important;
+  box-shadow: 0 0 0 4px #000 !important;
+}
 .files-drop-content {
   pointer-events: none;
 }
@@ -667,12 +677,12 @@ textarea:focus-visible,
   color: #555;
   margin: 0.75rem 0 0 0;
   padding: 0.5rem;
-  background-color: rgba(30, 167, 253, 0.1);
+  background-color: rgba(146, 64, 252, 0.1);
   border-radius: 6px;
-  border-left: 3px solid #1ea7fd;
+  border-left: 3px solid #ce95e0;
 }
 .files-allowed-types strong {
-  color: #1ea7fd;
+  color: #6e3282;
 }
 .files-input-hidden {
   display: none;
@@ -868,11 +878,11 @@ textarea:focus-visible,
   color: white;
 }
 .action-btn.remove {
-  color: #dc3545;
-  border-color: #dc3545;
+  color: #6e3282;
+  border-color: #6e3282;
 }
 .action-btn.remove:hover {
-  background-color: #dc3545;
+  background-color: #6e3282;
   color: white;
 }
 @media (max-width: 768px) {

package/dist/index.js

@@ -400,17 +400,34 @@ var PreviewTextField = ({
 // src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.tsx
 var import_react2 = require("react");
 var import_clsx = __toESM(require("clsx"));
+var import_dompurify3 = __toESM(require("dompurify"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FilesUpload = ({
   question,
-  isTouched: _isTouched,
+  isTouched,
   visible: _visible = true,
-  showPreview: _showPreview = false,
+  showPreview = false,
   activatedLanguage: _activatedLanguage = "sv",
   onFilesAdded,
   onFileRemoved,
   allowedNumberOfFiles = 5,
-  allowedFileTypes = [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".txt", ".rtf", ".ppt", ".pptx", ".jpg", ".jpeg", ".png", ".tif", ".tiff", ".csv"],
+  allowedFileTypes = [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".txt",
+    ".rtf",
+    ".ppt",
+    ".pptx",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".tif",
+    ".tiff",
+    ".csv"
+  ],
   maxFileSize = 50 * 1024 * 1024,
   // 50MB default
   allowedTotalFileSize = 20 * 1024 * 1024,
@@ -418,6 +435,11 @@ var FilesUpload = ({
   allowDuplicates = false,
   multiple = true
 }) => {
+  var _a;
+  const questionId = `question-${question.id}`;
+  const inputId = `file-${question.id}`;
+  const aboutId = `about-${question.id}`;
+  const errorId = `error-${question.id}`;
   const [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
   const [dragActive, setDragActive] = (0, import_react2.useState)(false);
   const fileInputRef = (0, import_react2.useRef)(null);
@@ -434,28 +456,35 @@ var FilesUpload = ({
   };
   (0, import_react2.useEffect)(() => {
     if (question.files && question.files.length > 0) {
-      const existingFiles = question.files.map((item) => {
-        if (item instanceof File) {
-          return {
-            id: generateFileId(item),
-            file: item
-          };
-        } else {
-          return {
-            id: item.id || generateFileId(item.file),
-            file: item.file,
-            dataURL: item.dataURL
-          };
+      const existingFiles = question.files.map(
+        (item) => {
+          if (item instanceof File) {
+            return {
+              id: generateFileId(item),
+              file: item
+            };
+          } else {
+            return {
+              id: item.id || generateFileId(item.file),
+              file: item.file,
+              dataURL: item.dataURL
+            };
+          }
         }
-      });
+      );
       setSelectedFiles(existingFiles);
     }
   }, [question.files]);
+  (0, import_react2.useEffect)(() => {
+    alert("Selected files changed");
+    const e = {};
+    isTouched(e, question);
+  }, [selectedFiles]);
   const getTotalFileSize = () => {
     return selectedFiles.reduce((total, selectedFile) => total + selectedFile.file.size, 0);
   };
   const validateFile = (file, additionalFiles = []) => {
-    var _a;
+    var _a2;
     if (file.size > maxFileSize) {
       return `Filen \xE4r f\xF6r stor. Max storlek: ${formatFileSize(maxFileSize)}`;
     }
@@ -464,10 +493,12 @@ var FilesUpload = ({
     const newTotalSize = currentTotalSize + additionalSize + file.size;
     if (newTotalSize > allowedTotalFileSize) {
       const remainingSize = allowedTotalFileSize - currentTotalSize - additionalSize;
-      return `Total filstorlek \xF6verskrider gr\xE4nsen p\xE5 ${formatFileSize(allowedTotalFileSize)}. \xC5terst\xE5ende: ${formatFileSize(Math.max(0, remainingSize))}`;
+      return `Total filstorlek \xF6verskrider gr\xE4nsen p\xE5 ${formatFileSize(
+        allowedTotalFileSize
+      )}. \xC5terst\xE5ende: ${formatFileSize(Math.max(0, remainingSize))}`;
     }
     if (allowedFileTypes.length > 0 && !allowedFileTypes.includes("*")) {
-      const fileExtension = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+      const fileExtension = (_a2 = file.name.split(".").pop()) == null ? void 0 : _a2.toLowerCase();
       if (!fileExtension) {
         return `Fil saknar fil\xE4ndelse`;
       }
@@ -542,13 +573,15 @@ var FilesUpload = ({
     const updatedFiles = selectedFiles.filter((f) => f.id !== fileId);
     setSelectedFiles(updatedFiles);
     if (fileToRemove && question.files) {
-      const fileIndex = question.files.findIndex((f) => {
-        if (f instanceof File) {
-          return f.name === fileToRemove.file.name && f.size === fileToRemove.file.size;
-        } else {
-          return f.file.name === fileToRemove.file.name && f.file.size === fileToRemove.file.size;
+      const fileIndex = question.files.findIndex(
+        (f) => {
+          if (f instanceof File) {
+            return f.name === fileToRemove.file.name && f.size === fileToRemove.file.size;
+          } else {
+            return f.file.name === fileToRemove.file.name && f.file.size === fileToRemove.file.size;
+          }
         }
-      });
+      );
       if (fileIndex !== -1) {
         question.files.splice(fileIndex, 1);
       }
@@ -580,8 +613,8 @@ var FilesUpload = ({
     }
   };
   const openFileDialog = () => {
-    var _a;
-    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    var _a2;
+    (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
   };
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
@@ -590,91 +623,139 @@ var FilesUpload = ({
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-upload", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { children: question.questionLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { marginBottom: "1.5rem", color: "#666" }, children: question.aboutText }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
-      {
-        className: (0, import_clsx.default)("files-drop-zone", { "drag-active": dragActive }),
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onClick: openFileDialog,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-drop-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "files-icon", children: "\u{1F4C2}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-text", children: "Dra och sl\xE4pp filer h\xE4r eller klicka f\xF6r att v\xE4lja" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-info" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-drop-info", children: [
-              "Max ",
-              allowedNumberOfFiles,
-              " filer, ",
-              formatFileSize(maxFileSize),
-              " per fil, ",
-              formatFileSize(allowedTotalFileSize),
-              " totalt"
-            ] }),
-            allowedFileTypes.length > 0 && !allowedFileTypes.includes("*") && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-allowed-types", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Till\xE5tna filtyper:" }),
-              " ",
-              allowedFileTypes.map(
-                (type) => type.startsWith(".") ? type : `.${type}`
-              ).join(", ")
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              multiple,
-              accept: allowedFileTypes.join(","),
-              onChange: handleFileInput,
-              className: "files-input-hidden"
-            }
-          )
-        ]
-      }
-    ),
-    selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "files-summary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-summary-stats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "stat", children: [
-        "\u{1F4C1} ",
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: selectedFiles.length }),
-        " filer totalt"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "stat", children: [
-        "\u{1F4BE} ",
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: formatFileSize(getTotalFileSize()) }),
-        " / ",
-        formatFileSize(allowedTotalFileSize)
-      ] })
-    ] }) }),
-    selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-list", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { children: [
-        "Filer (",
-        selectedFiles.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "files-items", children: selectedFiles.map((selectedFile) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "file-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-icon-status", children: "\u{1F4C1}" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "file-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-name", children: selectedFile.file.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-details", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "file-size", children: formatFileSize(selectedFile.file.size) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      id: questionId,
+      className: `pts-root-question pts-textArea-container${question.aboutText ? " pts-question-hasAbout" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, children: [
+          question.questionLabel,
+          " ",
+          question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pts-root-mandatoryAsterisk", "aria-hidden": "true", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-actions", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
+        question.aboutText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
           {
-            className: "action-btn remove",
-            onClick: () => removeFile(selectedFile.id),
-            type: "button",
-            title: "Ta bort fil",
-            children: "\u2715"
+            className: "pts-about",
+            dangerouslySetInnerHTML: {
+              __html: import_dompurify3.default.sanitize(question.aboutText)
+            }
           }
-        ) })
-      ] }, selectedFile.id)) })
-    ] })
-  ] });
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx.default)("files-drop-zone", { "drag-active": dragActive }),
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onClick: openFileDialog,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openFileDialog();
+              }
+            },
+            tabIndex: 0,
+            role: "button",
+            "aria-label": "V\xE4lj filer att ladda upp",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-drop-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "files-icon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "72",
+                    height: "48",
+                    viewBox: "0 0 72 48",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { clipPath: "url(#clip0_247_596)", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "path",
+                        {
+                          d: "M66.6084 23.0844C64.6397 21.6247 62.2209 20.5531 59.6672 19.9752C59.2479 19.8808 58.8641 19.6692 58.5605 19.3649C58.257 19.0606 58.0463 18.6763 57.953 18.2567C56.8561 13.37 54.495 9.1794 51.0244 6.00409C46.9898 2.30706 41.6545 0.273621 36 0.273621C31.0289 0.273621 26.4375 1.83174 22.7292 4.78065C20.216 6.78238 18.193 9.33154 16.8145 12.2338C16.6651 12.5513 16.4434 12.8295 16.1672 13.0461C15.8911 13.2627 15.5681 13.4117 15.2241 13.4811C11.4623 14.2405 8.06625 15.8535 5.47312 18.1386C1.89281 21.3027 0 25.5088 0 30.3111C0 35.1655 2.03766 39.5924 5.73609 42.793C9.26859 45.8431 14.0245 47.5236 19.125 47.5236H33.75V25.956L28.5905 31.1155C28.3751 31.3309 28.1182 31.5003 27.8354 31.6134C27.5525 31.7266 27.2497 31.7811 26.9452 31.7738C26.6406 31.7664 26.3408 31.6973 26.0638 31.5706C25.7867 31.4439 25.5383 31.2623 25.3336 31.0367C24.518 30.141 24.5967 28.7446 25.4531 27.8881L34.4095 18.9331C34.8314 18.5115 35.4035 18.2747 36 18.2747C36.5965 18.2747 37.1686 18.5115 37.5905 18.9331L46.5469 27.8853C47.43 28.7699 47.4806 30.2197 46.6017 31.107C46.3932 31.3176 46.1451 31.485 45.8718 31.5994C45.5984 31.7139 45.3051 31.7732 45.0088 31.774C44.7124 31.7748 44.4188 31.717 44.1449 31.604C43.8709 31.491 43.622 31.325 43.4123 31.1155L38.25 25.956V47.5236H55.6875C60.0947 47.5236 64.1124 46.2861 67.0008 44.0403C70.2717 41.495 72 37.8528 72 33.5174C72 29.3071 70.1353 25.6972 66.6084 23.0844Z",
+                          fill: "#6E3282"
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("clipPath", { id: "clip0_247_596", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "rect",
+                        {
+                          width: "72",
+                          height: "47.1064",
+                          fill: "white",
+                          transform: "translate(0 0.446777)"
+                        }
+                      ) }) })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-text", children: "Dra och sl\xE4pp filer h\xE4r eller klicka f\xF6r att v\xE4lja" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "files-drop-info" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-drop-info", children: [
+                  "Max ",
+                  allowedNumberOfFiles,
+                  " filer, ",
+                  formatFileSize(maxFileSize),
+                  " per fil,",
+                  " ",
+                  formatFileSize(allowedTotalFileSize),
+                  " totalt"
+                ] }),
+                allowedFileTypes.length > 0 && !allowedFileTypes.includes("*") && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "files-allowed-types", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Till\xE5tna filtyper:" }),
+                  " ",
+                  allowedFileTypes.map((type) => type.startsWith(".") ? type : `.${type}`).join(", ")
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple,
+                  accept: allowedFileTypes.join(","),
+                  onChange: handleFileInput,
+                  className: "files-input-hidden",
+                  name: `question-name-${question.id}`,
+                  disabled: (_a = question.questionExtraAttribute) == null ? void 0 : _a.disabled,
+                  required: question.isQuestionMandatory,
+                  "aria-required": question.isQuestionMandatory,
+                  "aria-describedby": `${question.aboutText ? aboutId : ""} ${question.hasValidationError ? errorId : ""}`.trim(),
+                  "aria-invalid": question.hasValidationError,
+                  "aria-errormessage": question.hasValidationError ? errorId : void 0
+                }
+              )
+            ]
+          }
+        ),
+        selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "files-list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { children: [
+            "Filer (",
+            selectedFiles.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "files-items", children: selectedFiles.map((selectedFile) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "file-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "file-info", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-name", children: selectedFile.file.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-details", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "file-size", children: formatFileSize(selectedFile.file.size) }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "file-actions", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                className: "action-btn remove",
+                onClick: () => removeFile(selectedFile.id),
+                type: "button",
+                title: "Ta bort fil",
+                children: "Radera"
+              }
+            ) })
+          ] }, selectedFile.id)) })
+        ] })
+      ]
+    }
+  ) });
 };
 var FilesUploadStandard_default = FilesUpload;
 
@@ -1611,9 +1692,9 @@ var HeaderStandard_default = Header;
 
 // src/NewTextComponentStandard/InfoOnlyStandard/InfoOnlyStandard.tsx
 var import_react4 = require("react");
-var import_dompurify3 = __toESM(require("dompurify"));
+var import_dompurify4 = __toESM(require("dompurify"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var cleanText = (text) => import_dompurify3.default.sanitize(text, { ADD_ATTR: ["target", "class"] });
+var cleanText = (text) => import_dompurify4.default.sanitize(text, { ADD_ATTR: ["target", "class"] });
 var InfoOnly = ({
   questionObject,
   isTouched,
@@ -1680,13 +1761,13 @@ var Modal = ({ showModal: isOpen, activatedLanguage = "" }) => {
 var ModalStandard_default = Modal;
 
 // src/NewTextComponentStandard/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.tsx
-var import_dompurify4 = __toESM(require("dompurify"));
+var import_dompurify5 = __toESM(require("dompurify"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
   const HeadlineTag = headlineType;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "pts-textHeadlineAndBody-container", children: [
     data.headline && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeadlineTag, { children: data.headline }),
-    data.body && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify4.default.sanitize(data.body) } }),
+    data.body && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(data.body) } }),
     data.linksForMoreInfo && data.linksForMoreInfo.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", "aria-label": link.ariaLabel, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "MoreInfoIcon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "svg",
@@ -1767,12 +1848,12 @@ var PrincipleOfPublicity = ({ activatedLanguage = "" }) => {
 var PrincipleOfPublicityStandard_default = PrincipleOfPublicity;
 
 // src/NewTextComponentStandard/ServiceHeadlineAndBodyStandard/ServiceHeadlineAndBodyStandard.tsx
-var import_dompurify5 = __toESM(require("dompurify"));
+var import_dompurify6 = __toESM(require("dompurify"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var ServiceHeadlineAndBody = ({ data, activeStep = 1 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pts-serviceHeadlineAndBody-container", children: [
     data.mainHeadline && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { id: "pts-main-service-headline", children: data.mainHeadline }),
-    activeStep === 1 && data.ingressBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(data.ingressBody) } }),
+    activeStep === 1 && data.ingressBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify6.default.sanitize(data.ingressBody) } }),
     activeStep === 1 && data.linksForMoreInfo && data.linksForMoreInfo.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((moreInfo, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("a", { href: moreInfo.url, target: "_blank", rel: "noopener noreferrer", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "svg",

package/dist/index.mjs

@@ -338,17 +338,34 @@ var PreviewTextField = ({
 // src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.tsx
 import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
 import clsx from "clsx";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import DOMPurify3 from "dompurify";
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FilesUpload = ({
   question,
-  isTouched: _isTouched,
+  isTouched,
   visible: _visible = true,
-  showPreview: _showPreview = false,
+  showPreview = false,
   activatedLanguage: _activatedLanguage = "sv",
   onFilesAdded,
   onFileRemoved,
   allowedNumberOfFiles = 5,
-  allowedFileTypes = [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".txt", ".rtf", ".ppt", ".pptx", ".jpg", ".jpeg", ".png", ".tif", ".tiff", ".csv"],
+  allowedFileTypes = [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".txt",
+    ".rtf",
+    ".ppt",
+    ".pptx",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".tif",
+    ".tiff",
+    ".csv"
+  ],
   maxFileSize = 50 * 1024 * 1024,
   // 50MB default
   allowedTotalFileSize = 20 * 1024 * 1024,
@@ -356,6 +373,11 @@ var FilesUpload = ({
   allowDuplicates = false,
   multiple = true
 }) => {
+  var _a;
+  const questionId = `question-${question.id}`;
+  const inputId = `file-${question.id}`;
+  const aboutId = `about-${question.id}`;
+  const errorId = `error-${question.id}`;
   const [selectedFiles, setSelectedFiles] = useState2([]);
   const [dragActive, setDragActive] = useState2(false);
   const fileInputRef = useRef(null);
@@ -372,28 +394,35 @@ var FilesUpload = ({
   };
   useEffect2(() => {
     if (question.files && question.files.length > 0) {
-      const existingFiles = question.files.map((item) => {
-        if (item instanceof File) {
-          return {
-            id: generateFileId(item),
-            file: item
-          };
-        } else {
-          return {
-            id: item.id || generateFileId(item.file),
-            file: item.file,
-            dataURL: item.dataURL
-          };
+      const existingFiles = question.files.map(
+        (item) => {
+          if (item instanceof File) {
+            return {
+              id: generateFileId(item),
+              file: item
+            };
+          } else {
+            return {
+              id: item.id || generateFileId(item.file),
+              file: item.file,
+              dataURL: item.dataURL
+            };
+          }
         }
-      });
+      );
       setSelectedFiles(existingFiles);
     }
   }, [question.files]);
+  useEffect2(() => {
+    alert("Selected files changed");
+    const e = {};
+    isTouched(e, question);
+  }, [selectedFiles]);
   const getTotalFileSize = () => {
     return selectedFiles.reduce((total, selectedFile) => total + selectedFile.file.size, 0);
   };
   const validateFile = (file, additionalFiles = []) => {
-    var _a;
+    var _a2;
     if (file.size > maxFileSize) {
       return `Filen \xE4r f\xF6r stor. Max storlek: ${formatFileSize(maxFileSize)}`;
     }
@@ -402,10 +431,12 @@ var FilesUpload = ({
     const newTotalSize = currentTotalSize + additionalSize + file.size;
     if (newTotalSize > allowedTotalFileSize) {
       const remainingSize = allowedTotalFileSize - currentTotalSize - additionalSize;
-      return `Total filstorlek \xF6verskrider gr\xE4nsen p\xE5 ${formatFileSize(allowedTotalFileSize)}. \xC5terst\xE5ende: ${formatFileSize(Math.max(0, remainingSize))}`;
+      return `Total filstorlek \xF6verskrider gr\xE4nsen p\xE5 ${formatFileSize(
+        allowedTotalFileSize
+      )}. \xC5terst\xE5ende: ${formatFileSize(Math.max(0, remainingSize))}`;
     }
     if (allowedFileTypes.length > 0 && !allowedFileTypes.includes("*")) {
-      const fileExtension = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+      const fileExtension = (_a2 = file.name.split(".").pop()) == null ? void 0 : _a2.toLowerCase();
       if (!fileExtension) {
         return `Fil saknar fil\xE4ndelse`;
       }
@@ -480,13 +511,15 @@ var FilesUpload = ({
     const updatedFiles = selectedFiles.filter((f) => f.id !== fileId);
     setSelectedFiles(updatedFiles);
     if (fileToRemove && question.files) {
-      const fileIndex = question.files.findIndex((f) => {
-        if (f instanceof File) {
-          return f.name === fileToRemove.file.name && f.size === fileToRemove.file.size;
-        } else {
-          return f.file.name === fileToRemove.file.name && f.file.size === fileToRemove.file.size;
+      const fileIndex = question.files.findIndex(
+        (f) => {
+          if (f instanceof File) {
+            return f.name === fileToRemove.file.name && f.size === fileToRemove.file.size;
+          } else {
+            return f.file.name === fileToRemove.file.name && f.file.size === fileToRemove.file.size;
+          }
         }
-      });
+      );
       if (fileIndex !== -1) {
         question.files.splice(fileIndex, 1);
       }
@@ -518,8 +551,8 @@ var FilesUpload = ({
     }
   };
   const openFileDialog = () => {
-    var _a;
-    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    var _a2;
+    (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
   };
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
@@ -528,91 +561,139 @@ var FilesUpload = ({
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "files-upload", children: [
-    /* @__PURE__ */ jsx5("h2", { children: question.questionLabel }),
-    /* @__PURE__ */ jsx5("p", { style: { marginBottom: "1.5rem", color: "#666" }, children: question.aboutText }),
-    /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        className: clsx("files-drop-zone", { "drag-active": dragActive }),
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onClick: openFileDialog,
-        children: [
-          /* @__PURE__ */ jsxs5("div", { className: "files-drop-content", children: [
-            /* @__PURE__ */ jsx5("div", { className: "files-icon", children: "\u{1F4C2}" }),
-            /* @__PURE__ */ jsx5("p", { className: "files-drop-text", children: "Dra och sl\xE4pp filer h\xE4r eller klicka f\xF6r att v\xE4lja" }),
-            /* @__PURE__ */ jsx5("p", { className: "files-drop-info" }),
-            /* @__PURE__ */ jsxs5("p", { className: "files-drop-info", children: [
-              "Max ",
-              allowedNumberOfFiles,
-              " filer, ",
-              formatFileSize(maxFileSize),
-              " per fil, ",
-              formatFileSize(allowedTotalFileSize),
-              " totalt"
-            ] }),
-            allowedFileTypes.length > 0 && !allowedFileTypes.includes("*") && /* @__PURE__ */ jsxs5("p", { className: "files-allowed-types", children: [
-              /* @__PURE__ */ jsx5("strong", { children: "Till\xE5tna filtyper:" }),
-              " ",
-              allowedFileTypes.map(
-                (type) => type.startsWith(".") ? type : `.${type}`
-              ).join(", ")
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx5(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              multiple,
-              accept: allowedFileTypes.join(","),
-              onChange: handleFileInput,
-              className: "files-input-hidden"
-            }
-          )
-        ]
-      }
-    ),
-    selectedFiles.length > 0 && /* @__PURE__ */ jsx5("div", { className: "files-summary", children: /* @__PURE__ */ jsxs5("div", { className: "files-summary-stats", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "stat", children: [
-        "\u{1F4C1} ",
-        /* @__PURE__ */ jsx5("strong", { children: selectedFiles.length }),
-        " filer totalt"
-      ] }),
-      /* @__PURE__ */ jsxs5("span", { className: "stat", children: [
-        "\u{1F4BE} ",
-        /* @__PURE__ */ jsx5("strong", { children: formatFileSize(getTotalFileSize()) }),
-        " / ",
-        formatFileSize(allowedTotalFileSize)
-      ] })
-    ] }) }),
-    selectedFiles.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "files-list", children: [
-      /* @__PURE__ */ jsxs5("h4", { children: [
-        "Filer (",
-        selectedFiles.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx5("ul", { className: "files-items", children: selectedFiles.map((selectedFile) => /* @__PURE__ */ jsxs5("li", { className: "file-item", children: [
-        /* @__PURE__ */ jsx5("div", { className: "file-icon-status", children: "\u{1F4C1}" }),
-        /* @__PURE__ */ jsxs5("div", { className: "file-info", children: [
-          /* @__PURE__ */ jsx5("div", { className: "file-name", children: selectedFile.file.name }),
-          /* @__PURE__ */ jsx5("div", { className: "file-details", children: /* @__PURE__ */ jsx5("span", { className: "file-size", children: formatFileSize(selectedFile.file.size) }) })
+  return /* @__PURE__ */ jsx5(Fragment5, { children: !showPreview && question.visible && /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      id: questionId,
+      className: `pts-root-question pts-textArea-container${question.aboutText ? " pts-question-hasAbout" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, children: [
+          question.questionLabel,
+          " ",
+          question.isQuestionMandatory && /* @__PURE__ */ jsx5("span", { className: "pts-root-mandatoryAsterisk", "aria-hidden": "true", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "file-actions", children: /* @__PURE__ */ jsx5(
-          "button",
+        question.aboutText && /* @__PURE__ */ jsx5(
+          "div",
           {
-            className: "action-btn remove",
-            onClick: () => removeFile(selectedFile.id),
-            type: "button",
-            title: "Ta bort fil",
-            children: "\u2715"
+            className: "pts-about",
+            dangerouslySetInnerHTML: {
+              __html: DOMPurify3.sanitize(question.aboutText)
+            }
           }
-        ) })
-      ] }, selectedFile.id)) })
-    ] })
-  ] });
+        ),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: clsx("files-drop-zone", { "drag-active": dragActive }),
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onClick: openFileDialog,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openFileDialog();
+              }
+            },
+            tabIndex: 0,
+            role: "button",
+            "aria-label": "V\xE4lj filer att ladda upp",
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: "files-drop-content", children: [
+                /* @__PURE__ */ jsx5("div", { className: "files-icon", children: /* @__PURE__ */ jsxs5(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "72",
+                    height: "48",
+                    viewBox: "0 0 72 48",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ jsx5("g", { clipPath: "url(#clip0_247_596)", children: /* @__PURE__ */ jsx5(
+                        "path",
+                        {
+                          d: "M66.6084 23.0844C64.6397 21.6247 62.2209 20.5531 59.6672 19.9752C59.2479 19.8808 58.8641 19.6692 58.5605 19.3649C58.257 19.0606 58.0463 18.6763 57.953 18.2567C56.8561 13.37 54.495 9.1794 51.0244 6.00409C46.9898 2.30706 41.6545 0.273621 36 0.273621C31.0289 0.273621 26.4375 1.83174 22.7292 4.78065C20.216 6.78238 18.193 9.33154 16.8145 12.2338C16.6651 12.5513 16.4434 12.8295 16.1672 13.0461C15.8911 13.2627 15.5681 13.4117 15.2241 13.4811C11.4623 14.2405 8.06625 15.8535 5.47312 18.1386C1.89281 21.3027 0 25.5088 0 30.3111C0 35.1655 2.03766 39.5924 5.73609 42.793C9.26859 45.8431 14.0245 47.5236 19.125 47.5236H33.75V25.956L28.5905 31.1155C28.3751 31.3309 28.1182 31.5003 27.8354 31.6134C27.5525 31.7266 27.2497 31.7811 26.9452 31.7738C26.6406 31.7664 26.3408 31.6973 26.0638 31.5706C25.7867 31.4439 25.5383 31.2623 25.3336 31.0367C24.518 30.141 24.5967 28.7446 25.4531 27.8881L34.4095 18.9331C34.8314 18.5115 35.4035 18.2747 36 18.2747C36.5965 18.2747 37.1686 18.5115 37.5905 18.9331L46.5469 27.8853C47.43 28.7699 47.4806 30.2197 46.6017 31.107C46.3932 31.3176 46.1451 31.485 45.8718 31.5994C45.5984 31.7139 45.3051 31.7732 45.0088 31.774C44.7124 31.7748 44.4188 31.717 44.1449 31.604C43.8709 31.491 43.622 31.325 43.4123 31.1155L38.25 25.956V47.5236H55.6875C60.0947 47.5236 64.1124 46.2861 67.0008 44.0403C70.2717 41.495 72 37.8528 72 33.5174C72 29.3071 70.1353 25.6972 66.6084 23.0844Z",
+                          fill: "#6E3282"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: "clip0_247_596", children: /* @__PURE__ */ jsx5(
+                        "rect",
+                        {
+                          width: "72",
+                          height: "47.1064",
+                          fill: "white",
+                          transform: "translate(0 0.446777)"
+                        }
+                      ) }) })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx5("p", { className: "files-drop-text", children: "Dra och sl\xE4pp filer h\xE4r eller klicka f\xF6r att v\xE4lja" }),
+                /* @__PURE__ */ jsx5("p", { className: "files-drop-info" }),
+                /* @__PURE__ */ jsxs5("p", { className: "files-drop-info", children: [
+                  "Max ",
+                  allowedNumberOfFiles,
+                  " filer, ",
+                  formatFileSize(maxFileSize),
+                  " per fil,",
+                  " ",
+                  formatFileSize(allowedTotalFileSize),
+                  " totalt"
+                ] }),
+                allowedFileTypes.length > 0 && !allowedFileTypes.includes("*") && /* @__PURE__ */ jsxs5("p", { className: "files-allowed-types", children: [
+                  /* @__PURE__ */ jsx5("strong", { children: "Till\xE5tna filtyper:" }),
+                  " ",
+                  allowedFileTypes.map((type) => type.startsWith(".") ? type : `.${type}`).join(", ")
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple,
+                  accept: allowedFileTypes.join(","),
+                  onChange: handleFileInput,
+                  className: "files-input-hidden",
+                  name: `question-name-${question.id}`,
+                  disabled: (_a = question.questionExtraAttribute) == null ? void 0 : _a.disabled,
+                  required: question.isQuestionMandatory,
+                  "aria-required": question.isQuestionMandatory,
+                  "aria-describedby": `${question.aboutText ? aboutId : ""} ${question.hasValidationError ? errorId : ""}`.trim(),
+                  "aria-invalid": question.hasValidationError,
+                  "aria-errormessage": question.hasValidationError ? errorId : void 0
+                }
+              )
+            ]
+          }
+        ),
+        selectedFiles.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "files-list", children: [
+          /* @__PURE__ */ jsxs5("h4", { children: [
+            "Filer (",
+            selectedFiles.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx5("ul", { className: "files-items", children: selectedFiles.map((selectedFile) => /* @__PURE__ */ jsxs5("li", { className: "file-item", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "file-info", children: [
+              /* @__PURE__ */ jsx5("div", { className: "file-name", children: selectedFile.file.name }),
+              /* @__PURE__ */ jsx5("div", { className: "file-details", children: /* @__PURE__ */ jsx5("span", { className: "file-size", children: formatFileSize(selectedFile.file.size) }) })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "file-actions", children: /* @__PURE__ */ jsx5(
+              "button",
+              {
+                className: "action-btn remove",
+                onClick: () => removeFile(selectedFile.id),
+                type: "button",
+                title: "Ta bort fil",
+                children: "Radera"
+              }
+            ) })
+          ] }, selectedFile.id)) })
+        ] })
+      ]
+    }
+  ) });
 };
 var FilesUploadStandard_default = FilesUpload;
 
@@ -829,7 +910,7 @@ function groupQuestionsByStepCategoryGroup(questions, steps, validationErrorsLis
 var GroupQuestionsByStepCategoryGroup_default = groupQuestionsByStepCategoryGroup;
 
 // src/NewRenderFormComponentStandard/RenderQuestion/RenderQuestion.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var RenderQuestion = ({
   question,
   isTouched,
@@ -837,7 +918,7 @@ var RenderQuestion = ({
   showPreview = false,
   hideValidationMessage
 }) => {
-  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
     question.questionType === "Radio" && /* @__PURE__ */ jsx6(
       RadioMultipleStandard_default,
       {
@@ -881,7 +962,7 @@ var RenderQuestion_default = RenderQuestion;
 
 // src/NewRenderFormComponentStandard/RenderQuestionGroup/RenderQuestionGroup.tsx
 import React2 from "react";
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var RenderQuestionGroup = ({
   questionArray,
   wrapper,
@@ -899,7 +980,7 @@ var RenderQuestionGroup = ({
       }
     });
   }, [questionArray]);
-  const questions = /* @__PURE__ */ jsx7(Fragment6, { children: questionArray.map((question, index) => {
+  const questions = /* @__PURE__ */ jsx7(Fragment7, { children: questionArray.map((question, index) => {
     return /* @__PURE__ */ jsx7(React2.Fragment, { children: /* @__PURE__ */ jsx7(
       RenderQuestion_default,
       {
@@ -1549,9 +1630,9 @@ var HeaderStandard_default = Header;
 
 // src/NewTextComponentStandard/InfoOnlyStandard/InfoOnlyStandard.tsx
 import { useEffect as useEffect3 } from "react";
-import DOMPurify3 from "dompurify";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var cleanText = (text) => DOMPurify3.sanitize(text, { ADD_ATTR: ["target", "class"] });
+import DOMPurify4 from "dompurify";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var cleanText = (text) => DOMPurify4.sanitize(text, { ADD_ATTR: ["target", "class"] });
 var InfoOnly = ({
   questionObject,
   isTouched,
@@ -1570,7 +1651,7 @@ var InfoOnly = ({
     const e = { target: { value: questionObject2.questionLabel + avoidBugInRedux } };
     isTouched(e, questionObject2);
   };
-  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
     showConfigure && visible && /* @__PURE__ */ jsx12("div", { className: "pts-infoOnly-container", children: /* @__PURE__ */ jsx12("div", { className: "InfoOnlyText", tabIndex, children: questionObject.questionLabel && /* @__PURE__ */ jsx12(
       "p",
       {
@@ -1584,7 +1665,7 @@ var InfoOnly = ({
 };
 var InfoOnlyStandard_default = InfoOnly;
 var PreviewInfoOnly = ({ questionObject }) => {
-  return /* @__PURE__ */ jsx12(Fragment7, { children: questionObject.answer && /* @__PURE__ */ jsx12("div", { className: "pts-infoOnly-preview", children: /* @__PURE__ */ jsx12("div", { className: "InfoOnlyText", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx12(Fragment8, { children: questionObject.answer && /* @__PURE__ */ jsx12("div", { className: "pts-infoOnly-preview", children: /* @__PURE__ */ jsx12("div", { className: "InfoOnlyText", children: /* @__PURE__ */ jsx12(
     "p",
     {
       dangerouslySetInnerHTML: {
@@ -1618,13 +1699,13 @@ var Modal = ({ showModal: isOpen, activatedLanguage = "" }) => {
 var ModalStandard_default = Modal;
 
 // src/NewTextComponentStandard/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.tsx
-import DOMPurify4 from "dompurify";
+import DOMPurify5 from "dompurify";
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
   const HeadlineTag = headlineType;
   return /* @__PURE__ */ jsxs14("section", { className: "pts-textHeadlineAndBody-container", children: [
     data.headline && /* @__PURE__ */ jsx14(HeadlineTag, { children: data.headline }),
-    data.body && /* @__PURE__ */ jsx14("div", { dangerouslySetInnerHTML: { __html: DOMPurify4.sanitize(data.body) } }),
+    data.body && /* @__PURE__ */ jsx14("div", { dangerouslySetInnerHTML: { __html: DOMPurify5.sanitize(data.body) } }),
     data.linksForMoreInfo && data.linksForMoreInfo.length > 0 && /* @__PURE__ */ jsx14("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ jsx14("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ jsxs14("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", "aria-label": link.ariaLabel, children: [
       /* @__PURE__ */ jsx14("span", { className: "MoreInfoIcon", children: /* @__PURE__ */ jsx14(
         "svg",
@@ -1705,12 +1786,12 @@ var PrincipleOfPublicity = ({ activatedLanguage = "" }) => {
 var PrincipleOfPublicityStandard_default = PrincipleOfPublicity;
 
 // src/NewTextComponentStandard/ServiceHeadlineAndBodyStandard/ServiceHeadlineAndBodyStandard.tsx
-import DOMPurify5 from "dompurify";
+import DOMPurify6 from "dompurify";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var ServiceHeadlineAndBody = ({ data, activeStep = 1 }) => {
   return /* @__PURE__ */ jsxs15("div", { className: "pts-serviceHeadlineAndBody-container", children: [
     data.mainHeadline && /* @__PURE__ */ jsx16("h1", { id: "pts-main-service-headline", children: data.mainHeadline }),
-    activeStep === 1 && data.ingressBody && /* @__PURE__ */ jsx16("div", { dangerouslySetInnerHTML: { __html: DOMPurify5.sanitize(data.ingressBody) } }),
+    activeStep === 1 && data.ingressBody && /* @__PURE__ */ jsx16("div", { dangerouslySetInnerHTML: { __html: DOMPurify6.sanitize(data.ingressBody) } }),
     activeStep === 1 && data.linksForMoreInfo && data.linksForMoreInfo.length > 0 && /* @__PURE__ */ jsx16("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((moreInfo, index) => /* @__PURE__ */ jsx16("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ jsxs15("a", { href: moreInfo.url, target: "_blank", rel: "noopener noreferrer", children: [
       /* @__PURE__ */ jsx16(
         "svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A modern React component library using TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",