optimized-react-component-library-xyz123 0.28.7 → 0.29.1

package/dist/index.js

@@ -80,32 +80,25 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/input-components/InfoTextStandard/InfoTextStandard.tsx
-var import_dompurify = __toESM(require("dompurify"));
+// src/components/layout/ValidationMessage/ValidationMessage.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var InfoTextStandard = ({ infoText, selectedValue, questionId, activatedLanguage }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      id: `textinfo-${questionId}-${selectedValue}`,
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      children: infoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: questionId, className: "pts-root-question pts-infoTextdStandard-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "sr-only", children: activatedLanguage === "en" ? `Information about selected alternative - ${selectedValue}` : `Information om valt alternativ - ${selectedValue}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            id: questionId,
-            dangerouslySetInnerHTML: {
-              __html: import_dompurify.default.sanitize(infoText != null ? infoText : "")
-            }
-          }
-        )
-      ] })
-    }
-  );
+var ValidationSummary = ({
+  validationMessesege,
+  validationId,
+  activatedLanguage = "sv",
+  showValidationMessage = false,
+  extraCssClass = ""
+}) => {
+  return showValidationMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `pts-root-error ${extraCssClass}`, id: validationId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "pts-validation-error-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "16", rx: "8", fill: "#8E0039" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7.45996 10.4268L6.96094 5.34082V2.98926H9.03906V5.34082L8.54688 10.4268H7.45996ZM7.04297 13.0107V11.0898H8.96387V13.0107H7.04297Z", fill: "white" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: activatedLanguage === "sv" ? "Valideringsfel" : "Validation error" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "errorText", children: validationMessesege })
+  ] });
 };
-var InfoTextStandard_default = InfoTextStandard;
+var ValidationMessage_default = ValidationSummary;
 
 // src/components/input-components/RadioMultipleStandard/RadioMultipleStandard.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -115,7 +108,7 @@ var InputRadio = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const questionId = `question-${question.id}`;
   const groupId = `radio-group-${question.id}`;
   const errorId = `error-${question.id}`;
@@ -123,64 +116,51 @@ var InputRadio = ({
     const e = { target: { value: event.target.value } };
     handleQuestionInputChange(e, question);
   };
-  const languageObj = question.languageSupport[0];
-  var optionsInfoText = [];
-  if ("optionsInfoText" in languageObj) {
-    optionsInfoText = languageObj.optionsInfoText;
-  }
-  console.log(optionsInfoText);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "fieldset",
-        {
-          "aria-required": question.isQuestionMandatory,
-          "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
-          "aria-errormessage": question.hasValidationError ? errorId : void 0,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${groupId}`, children: [
-              question.questionLabel,
-              " ",
-              question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
-            ] }),
-            (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-radio-option", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "input",
-                {
-                  type: "radio",
-                  name: `name-${question.id}`,
-                  id: `${groupId}-option-${index}`,
-                  value: option.value,
-                  checked: question.answer === option.value,
-                  onChange: handleInputChange
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label }),
-              " "
-            ] }, index)),
-            question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
-            ] })
-          ]
-        }
-      ),
-      optionsInfoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        InfoTextStandard_default,
-        {
-          infoText: (_c = (_b = optionsInfoText.find((op) => op.selectedValue === question.answer)) == null ? void 0 : _b.infoText) != null ? _c : "",
-          selectedValue: (_d = question.answer) != null ? _d : "",
-          questionId,
-          activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
-        }
-      )
-    ] }),
-    showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PreviewRadio, { question })
+    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "fieldset",
+      {
+        "aria-required": question.isQuestionMandatory,
+        "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
+        "aria-errormessage": question.hasValidationError ? errorId : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${groupId}`, children: [
+            question.questionLabel,
+            " ",
+            question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" })
+          ] }),
+          (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-radio-option", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: `name-${question.id}`,
+                id: `${groupId}-option-${index}`,
+                value: option.value,
+                checked: question.answer === option.value,
+                onChange: handleInputChange
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label }),
+            " "
+          ] }, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ValidationMessage_default,
+            {
+              showValidationMessage: (_b = question.hasValidationError) != null ? _b : false,
+              validationId: errorId,
+              validationMessesege: (_c = question.validationDefaultMessesege) != null ? _c : "",
+              activatedLanguage
+            }
+          )
+        ]
+      }
+    ) }),
+    showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PreviewRadio, { question, activatedLanguage })
   ] });
 };
 var RadioMultipleStandard_default = InputRadio;
-var PreviewRadio = ({ question }) => {
+var PreviewRadio = ({ question, activatedLanguage }) => {
   var _a, _b;
   const previewId = `preview-${question.id}`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
@@ -190,7 +170,7 @@ var PreviewRadio = ({ question }) => {
       {
         className: "pts-radioMultiple-preview pts-root-answer no-answer-preview-page",
         id: `answer-${previewId}`,
-        children: "Inget svar"
+        children: activatedLanguage === "en" ? "No answer" : "Inget svar"
       }
     )
   ] });
@@ -212,17 +192,17 @@ var MultipleCheckboxes = ({
     var _a2;
     const initialValues = ((_a2 = question.options) == null ? void 0 : _a2.filter((option) => {
       var _a3;
-      return (_a3 = question.answer) == null ? void 0 : _a3.includes(option.label);
-    }).map((option) => option.label)) || [];
+      return (_a3 = question.answer) == null ? void 0 : _a3.includes(option.id);
+    }).map((option) => option.id)) || [];
     console.log("Initial values:", initialValues);
     setCheckedValues(initialValues);
   }, [question.answer, question.options]);
-  const handleInputChange = (event, optionValue) => {
+  const handleInputChange = (event, optionId) => {
     let updatedValues = [...checkedValues];
-    if (updatedValues.includes(optionValue)) {
-      updatedValues = updatedValues.filter((val) => val !== optionValue);
+    if (updatedValues.includes(optionId)) {
+      updatedValues = updatedValues.filter((val) => val !== optionId);
     } else {
-      updatedValues.push(optionValue);
+      updatedValues.push(optionId);
     }
     setCheckedValues(updatedValues);
     const e = { target: { value: updatedValues.toString() } };
@@ -244,9 +224,9 @@ var MultipleCheckboxes = ({
             type: "checkbox",
             name: `${question.id}-option`,
             id: `${question.id}-option-${index}`,
-            value: option.label,
-            checked: checkedValues.includes(option.label),
-            onChange: (e) => handleInputChange(e, option.label),
+            value: option.id,
+            checked: checkedValues.includes(option.id),
+            onChange: (e) => handleInputChange(e, option.id),
             className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
           }
         ),
@@ -268,7 +248,7 @@ var PrevieMultipleCheckboxes = ({
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
     question.answer ? question.options && question.options.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: question.options[0].label }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "pts-preview-answer-list", children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
       var _a2;
-      return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
+      return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.id);
     }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: option.label }, index)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }),
     " "
   ] });
@@ -283,7 +263,7 @@ var CheckboxGroup = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a;
+  var _a, _b, _c;
   const questionId = `question-${question.id}`;
   const errorId = `error-${question.id}`;
   const groupId = `checkbox-group-${question.id}`;
@@ -292,8 +272,8 @@ var CheckboxGroup = ({
     var _a2;
     const initialValues = ((_a2 = question.options) == null ? void 0 : _a2.filter((option) => {
       var _a3;
-      return (_a3 = question.answer) == null ? void 0 : _a3.includes(option.label);
-    }).map((option) => option.label)) || [];
+      return (_a3 = question.answer) == null ? void 0 : _a3.includes(option.id);
+    }).map((option) => option.id)) || [];
     setCheckedValues(initialValues);
   }, [question.answer, question.options]);
   const handleInputChange = (event, optionValue) => {
@@ -327,19 +307,23 @@ var CheckboxGroup = ({
                 type: "checkbox",
                 name: `name-${question.id}`,
                 id: `${groupId}-option-${index}`,
-                value: option.label,
-                checked: checkedValues.includes(option.label),
-                onChange: (e) => handleInputChange(e, option.label),
+                value: option.id,
+                checked: checkedValues.includes(option.id),
+                onChange: (e) => handleInputChange(e, option.id),
                 className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label })
           ] }, index)),
-          question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ValidationMessage_default,
+            {
+              showValidationMessage: (_b = question.hasValidationError) != null ? _b : false,
+              validationId: errorId,
+              validationMessesege: (_c = question.validationDefaultMessesege) != null ? _c : "",
+              activatedLanguage
+            }
+          )
         ]
       }
     ) }),
@@ -357,14 +341,14 @@ var PreviewCheckboxGroup = ({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
     question.answer ? question.options && question.options.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: question.options[0].label }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "pts-preview-answer-list", children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
       var _a2;
-      return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
+      return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.id);
     }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: option.label }, index)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }),
     " "
   ] });
 };
 
 // src/components/input-components/TextAreaStandard/TextAreaStandard.tsx
-var import_dompurify2 = __toESM(require("dompurify"));
+var import_dompurify = __toESM(require("dompurify"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputTextarea = ({
   question,
@@ -372,12 +356,17 @@ var InputTextarea = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const questionId = `question-${question.id}`;
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
   const defaultMaxLength = 1e3;
+  const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
+  const maxLength = (_d = (_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) != null ? _d : defaultMaxLength;
+  const isTooLong = answerLength > maxLength;
+  const counterText = activatedLanguage === "en" ? `${answerLength} of ${maxLength} characters` : `${answerLength} av ${maxLength} tecken`;
+  const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r max vara ${maxLength} tecken`;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
     !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
@@ -396,7 +385,7 @@ var InputTextarea = ({
               id: aboutId,
               className: "pts-about",
               dangerouslySetInnerHTML: {
-                __html: import_dompurify2.default.sanitize(question.aboutText)
+                __html: import_dompurify.default.sanitize(question.aboutText)
               }
             }
           ),
@@ -409,29 +398,30 @@ var InputTextarea = ({
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-invalid": question.hasValidationError,
-              maxLength: ((_a = question.questionExtraAttribute) == null ? void 0 : _a.answerMaxLength) || defaultMaxLength,
               "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
               id: inputId
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-textarea-counter-error-container", children: [
-            question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
-            ] }),
-            !((_b = question.questionExtraAttribute) == null ? void 0 : _b.hideTextCounter) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              "div",
+            !isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ValidationMessage_default,
               {
-                className: `pts-character-counter ${question.answer && (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
-                children: [
-                  question.answer ? question.answer.length : 0,
-                  " av",
-                  " ",
-                  ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
-                  " tecken"
-                ]
+                showValidationMessage: true,
+                validationId: errorId,
+                validationMessesege: (_e = question.validationDefaultMessesege) != null ? _e : "",
+                activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
               }
-            )
+            ),
+            isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ValidationMessage_default,
+              {
+                showValidationMessage: true,
+                validationId: errorId,
+                validationMessesege: maxLengthErrorText,
+                activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
+              }
+            ),
+            !((_f = question.questionExtraAttribute) == null ? void 0 : _f.hideTextCounter) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "aria-live": "polite", className: `pts-character-counter`, children: counterText })
           ] })
         ]
       }
@@ -460,7 +450,7 @@ var PreviewTextarea = ({
 };
 
 // src/components/input-components/TextFieldStandard/TextFieldStandard.tsx
-var import_dompurify3 = __toESM(require("dompurify"));
+var import_dompurify2 = __toESM(require("dompurify"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var TextFieldStandard = ({
   question,
@@ -468,18 +458,21 @@ var TextFieldStandard = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const questionId = `question-${question.id}`;
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
-  const defaultMaxLength = 1e3;
+  const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
+  const maxLength = 100;
+  const isTooLong = answerLength > maxLength;
+  const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r max vara ${maxLength} tecken`;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         id: questionId,
-        className: `pts-root-question pts-textField-container${((_a = question.questionExtraAttribute) == null ? void 0 : _a.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
+        className: `pts-root-question pts-textField-container${((_c = question.questionExtraAttribute) == null ? void 0 : _c.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, children: [
             question.questionLabel,
@@ -492,37 +485,49 @@ var TextFieldStandard = ({
               id: aboutId,
               className: "pts-about",
               dangerouslySetInnerHTML: {
-                __html: import_dompurify3.default.sanitize(question.aboutText)
+                __html: import_dompurify2.default.sanitize(question.aboutText)
               }
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
-              type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
-              autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
-              inputMode: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.inputMode) != null ? _g : void 0,
+              type: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.inputType) != null ? _e : "text",
+              autoComplete: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.autoComplete) != null ? _g : void 0,
+              inputMode: (_i = (_h = question.questionExtraAttribute) == null ? void 0 : _h.inputMode) != null ? _i : void 0,
               name: `question-name-${question.id}`,
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
               onChange: (e) => handleQuestionInputChange(e, question),
               value: question.answer,
-              maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
               id: inputId,
-              disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
+              disabled: (_j = question.questionExtraAttribute) == null ? void 0 : _j.disabled,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-describedby": [question.aboutText ? aboutId : null].filter(Boolean).join(" ") || void 0,
               "aria-invalid": question.hasValidationError,
               "aria-errormessage": question.hasValidationError ? errorId : void 0,
-              spellCheck: (_k = (_j = question.questionExtraAttribute) == null ? void 0 : _j.spellCheck) != null ? _k : void 0,
-              autoCapitalize: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.autoCapitalize) != null ? _m : void 0
+              spellCheck: (_l = (_k = question.questionExtraAttribute) == null ? void 0 : _k.spellCheck) != null ? _l : void 0,
+              autoCapitalize: (_n = (_m = question.questionExtraAttribute) == null ? void 0 : _m.autoCapitalize) != null ? _n : void 0
             }
           ),
-          question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
-          ] })
+          !isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ValidationMessage_default,
+            {
+              showValidationMessage: true,
+              validationId: errorId,
+              validationMessesege: (_o = question.validationDefaultMessesege) != null ? _o : "",
+              activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
+            }
+          ),
+          isTooLong && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ValidationMessage_default,
+            {
+              showValidationMessage: true,
+              validationId: errorId,
+              validationMessesege: maxLengthErrorText,
+              activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
+            }
+          )
         ]
       }
     ),
@@ -747,14 +752,12 @@ var SelectedFiles = ({
     let newFiles = questionObject.files.filter((f) => f !== file);
     const newCountOfFiles = newFiles.length;
     setNumberOfFiles(newCountOfFiles);
-    const e = { target: { value: `${newCountOfFiles} files`, files: newFiles } };
+    let e = { target: { value: `${newCountOfFiles} files`, files: newFiles } };
+    const targetValue = e.target.value === "0 files" ? "" : e.target.value;
+    e = { ...e, target: { ...e.target, value: targetValue } };
     isTouched(e, questionObject);
     removeFile(newCountOfFiles);
   };
-  (0, import_react6.useEffect)(() => {
-    var _a;
-    numberOfFiles > 0 && ((_a = theDiv.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "end" }));
-  }, [numberOfFiles]);
   const useWindowWidth = () => {
     const [windowWidth2, setWindowWidth] = (0, import_react6.useState)(window.innerWidth);
     (0, import_react6.useEffect)(() => {
@@ -827,7 +830,7 @@ var SelectedFiles = ({
         }
       ) })
     ] }) }),
-    questionObject.files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "fileListUnorderedList", "aria-label": "Uppladdade filer", children: questionObject.files.map((file, index) => {
+    questionObject.files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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;
@@ -901,6 +904,7 @@ var AddFiles = ({
   allowedTotalFileSize = 20971520
   // 20MB = (1024 * 1024) * 20
 }) => {
+  var _a, _b;
   if (allowedFileTypes.length < 1) {
     allowedFileTypes = [
       "pdf",
@@ -944,7 +948,7 @@ var AddFiles = ({
   }, []);
   const onDrop = (0, import_react7.useCallback)(
     (acceptedFiles) => {
-      var _a, _b, _c;
+      var _a2, _b2, _c;
       const validationErrors = [];
       const validFiles = [];
       const currentTotalFileSize = (questionObject.files || []).reduce(
@@ -952,7 +956,7 @@ var AddFiles = ({
         0
       );
       setTotalFileSize(currentTotalFileSize);
-      if ((((_a = questionObject.files) == null ? void 0 : _a.length) || 0) >= allowedNumberOfFiles) {
+      if ((((_a2 = questionObject.files) == null ? void 0 : _a2.length) || 0) >= allowedNumberOfFiles) {
         acceptedFiles.forEach((file) => {
           validationErrors.push({
             FileName: file.name,
@@ -965,7 +969,7 @@ var AddFiles = ({
       }
       let accumulatedNewSize = 0;
       for (const file of acceptedFiles) {
-        const fileExtension = ((_b = file.name.split(".").pop()) == null ? void 0 : _b.toLowerCase()) || "";
+        const fileExtension = ((_b2 = file.name.split(".").pop()) == null ? void 0 : _b2.toLowerCase()) || "";
         if (!allowedFileTypes.includes(fileExtension)) {
           validationErrors.push({
             FileName: file.name,
@@ -1037,7 +1041,7 @@ var AddFiles = ({
       const currentFiles = questionObject.files ? questionObject.files : [];
       const e = {
         target: {
-          value: `${currentFiles.length + newFiles.length} files`,
+          value: currentFiles.length + newFiles.length > 0 ? `${currentFiles.length + newFiles.length} files` : "",
           files: [...currentFiles, ...newFiles]
         }
       };
@@ -1060,68 +1064,80 @@ var AddFiles = ({
     setErrorMessageAddingFile([]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    !showPreview && visible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "root-question addFile-question-container", id: `question-${questionObject.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", children: [
-      questionObject.aboutText && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        "p",
-        {
-          id: aboutId,
-          className: (0, import_clsx3.default)(
-            "addFilesMandatory",
-            questionObject.hasValidationError ? " error" : ""
+    !showPreview && visible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: "root-question addFile-question-container",
+        id: `question-${questionObject.id}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", children: [
+          questionObject.aboutText && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "p",
+            {
+              id: aboutId,
+              className: (0, import_clsx3.default)(
+                "addFilesMandatory",
+                questionObject.hasValidationError ? " error" : ""
+              ),
+              children: [
+                questionObject.aboutText,
+                questionObject.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "pts-root-mandatoryAsterisk", "aria-label": "Obligatorisk fr\xE5ga", children: [
+                  " ",
+                  "*"
+                ] })
+              ]
+            }
           ),
-          children: [
-            questionObject.aboutText,
-            questionObject.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "pts-root-mandatoryAsterisk", "aria-label": "Obligatorisk fr\xE5ga", children: [
-              " ",
-              "*"
-            ] })
-          ]
-        }
-      ),
-      questionObject.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pts-root-error error addfileserror", id: errorId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "errorText", children: questionObject.validationDefaultMessesege })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        ExploreFilesStandard_default,
-        {
-          FilesSelected: onDrop,
-          numberOfFiles,
-          allowedNumberOfFiles,
-          activatedLanguage,
-          inputId,
-          labelId,
-          aboutId,
-          errorId,
-          questionObject,
-          errorMessageAddingFile,
-          removeUploadErrors: handleRemoveErrors
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        DropFilesStandard_default,
-        {
-          FilesSelected: onDrop,
-          DropFilesText: dropFilesText,
-          language: activatedLanguage
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        SelectedFilesStandard_default,
-        {
-          questionObject,
-          isTouched: handleQuestionInputChange,
-          removeFile: removeFileFromNumberOfFiles,
-          removeError,
-          errorMessageAddingFile,
-          activatedLanguage,
-          numberOfFiles,
-          setNumberOfFiles,
-          removeUploadErrors: handleRemoveErrors
-        }
-      )
-    ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            ValidationMessage_default,
+            {
+              showValidationMessage: (_a = questionObject.hasValidationError) != null ? _a : false,
+              validationId: errorId,
+              validationMessesege: (_b = questionObject.validationDefaultMessesege) != null ? _b : "",
+              activatedLanguage,
+              extraCssClass: "error addfileserror"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            ExploreFilesStandard_default,
+            {
+              FilesSelected: onDrop,
+              numberOfFiles,
+              allowedNumberOfFiles,
+              activatedLanguage,
+              inputId,
+              labelId,
+              aboutId,
+              errorId,
+              questionObject,
+              errorMessageAddingFile,
+              removeUploadErrors: handleRemoveErrors
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            DropFilesStandard_default,
+            {
+              FilesSelected: onDrop,
+              DropFilesText: dropFilesText,
+              language: activatedLanguage
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            SelectedFilesStandard_default,
+            {
+              questionObject,
+              isTouched: handleQuestionInputChange,
+              removeFile: removeFileFromNumberOfFiles,
+              removeError,
+              errorMessageAddingFile,
+              activatedLanguage,
+              numberOfFiles,
+              setNumberOfFiles,
+              removeUploadErrors: handleRemoveErrors
+            }
+          )
+        ] })
+      }
+    ),
     showPreview && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreviewAddFiles, { activatedLanguage, questionObject })
   ] });
 };
@@ -1148,7 +1164,7 @@ var SingleCheckbox = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const questionId = `question-${question.id}`;
   const inputId = `checkbox-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -1201,12 +1217,15 @@ var SingleCheckbox = ({
         }
       ),
       " ",
-      question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
-      ] }),
-      " "
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ValidationMessage_default,
+        {
+          showValidationMessage: (_c = question.hasValidationError) != null ? _c : false,
+          validationId: errorId,
+          validationMessesege: (_d = question.validationDefaultMessesege) != null ? _d : "",
+          activatedLanguage
+        }
+      )
     ] }),
     " ",
     showPreview && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PreviewSingleCheckbox, { activatedLanguage, question })
@@ -1235,7 +1254,7 @@ var PreviewSingleCheckbox = ({
 // src/helpers/hasQuestionValidationError/hasQuestionValidationError.tsx
 var import_date_fns = require("date-fns");
 var hasQuestionValidationError = (question, questions) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   let error = false;
   if (question.isQuestionMandatory) {
     if (question.isTouched === false) {
@@ -1248,19 +1267,28 @@ var hasQuestionValidationError = (question, questions) => {
       error = true;
     }
   }
-  if (((_b = question.validationType) == null ? void 0 : _b.find((e) => e === "email")) && (question.isQuestionMandatory || question.answer !== "")) {
+  const maxLength = (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.answerMaxLength) != null ? _c : 1e3;
+  if (((_d = question.validationType) == null ? void 0 : _d.includes("maxLength")) && question.answer.length > maxLength) {
+    error = true;
+  }
+  if (question.questionType === "TextField") {
+    if (question.answer.length > 100) {
+      error = true;
+    }
+  }
+  if (((_e = question.validationType) == null ? void 0 : _e.find((e) => e === "email")) && (question.isQuestionMandatory || question.answer !== "")) {
     const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
     if (!emailRegex.test(question.answer)) {
       error = true;
     }
   }
-  if (((_c = question.validationType) == null ? void 0 : _c.find((e) => e === "fourNumbers")) && (question.isQuestionMandatory || question.answer !== "")) {
+  if (((_f = question.validationType) == null ? void 0 : _f.find((e) => e === "fourNumbers")) && (question.isQuestionMandatory || question.answer !== "")) {
     const fourNumbersRegex = /^\d{4}$/.test(question.answer);
     if (!fourNumbersRegex) {
       error = true;
     }
   }
-  if (((_d = question.validationType) == null ? void 0 : _d.find((e) => e === "isDateFormatValid")) && question.answer !== "") {
+  if (((_g = question.validationType) == null ? void 0 : _g.find((e) => e === "isDateFormatValid")) && question.answer !== "") {
     const regex = /^\d{4}-\d{2}-\d{2}$/;
     if (!regex.test(question.answer)) {
       error = true;
@@ -1274,16 +1302,18 @@ var hasQuestionValidationError = (question, questions) => {
       error = true;
     }
   }
-  const groupCheckError = (_e = question.validationType) == null ? void 0 : _e.find((e) => e.startsWith("groupCheck-"));
+  const groupCheckError = (_h = question.validationType) == null ? void 0 : _h.find((e) => e.startsWith("groupCheck-"));
   if (groupCheckError) {
     const ids = groupCheckError.replace("groupCheck-", "").split("-");
-    const relatedAnswers = ids.map((id) => {
-      var _a2;
-      return (_a2 = questions.find((q) => {
-        var _a3;
-        return ((_a3 = q.id) == null ? void 0 : _a3.toString()) === id;
-      })) == null ? void 0 : _a2.answer;
-    });
+    const relatedAnswers = ids.map(
+      (id) => {
+        var _a2;
+        return (_a2 = questions.find((q) => {
+          var _a3;
+          return ((_a3 = q.id) == null ? void 0 : _a3.toString()) === id;
+        })) == null ? void 0 : _a2.answer;
+      }
+    );
     const currentAnswer = question.answer;
     const allAnswers = [...relatedAnswers, currentAnswer];
     if (allAnswers.every((ans) => ans === "")) {
@@ -1304,7 +1334,7 @@ function createApiDataObject(data, specialMappedQuestions, translatedAnswers) {
     let translatedAnswer = question.answer;
     if (question.answer && typeof question.answer === "string" && Array.isArray(question.options) && question.mappingId && specialMappedQuestions.has(question.mappingId)) {
       const answerNormalized = normalize(question.answer);
-      const matchingIds = question.options.filter((option) => answerNormalized.includes(normalize(option.label))).map((option) => `^${option.id}^`);
+      const matchingIds = question.options.filter((option) => answerNormalized.includes(normalize(option.id))).map((option) => `^${option.id}^`);
       if (matchingIds.length > 0) {
         translatedAnswer = matchingIds.join(",");
       }
@@ -2024,11 +2054,12 @@ var QuestionGroup = ({
   showPreview = false,
   markQuestionAsDisplayed
 }) => {
-  var _a;
+  var _a, _b, _c;
   if (!questions || questions.length === 0) {
     return null;
   }
   const firstQuestion = questions[0];
+  const errorId = firstQuestion.id + "-error";
   const groupMandatory = (_a = firstQuestion.validationType) == null ? void 0 : _a.find((e) => e.startsWith("groupCheck-"));
   (0, import_react12.useEffect)(() => {
     questions.forEach((question) => {
@@ -2069,10 +2100,15 @@ var QuestionGroup = ({
                 firstQuestion.validationDefaultMessesege
               ] })
             ] }),
-            firstQuestion.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pts-root-error", id: firstQuestion.id + "-error", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "errorText", children: firstQuestion.validationDefaultMessesege })
-            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ValidationMessage_default,
+              {
+                showValidationMessage: (_b = firstQuestion.hasValidationError) != null ? _b : false,
+                validationId: errorId,
+                validationMessesege: (_c = firstQuestion.validationDefaultMessesege) != null ? _c : "",
+                activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
+              }
+            ),
             groupQuestions
           ]
         }
@@ -2095,7 +2131,8 @@ var CookieBanner = ({
   onCookieStateChange,
   onClose,
   acceptCookies,
-  rejectCookies
+  rejectCookies,
+  activatedLanguage = "sv"
 }) => {
   if (!visible) return null;
   const handleCookieChoice = (accepted) => {
@@ -2122,8 +2159,13 @@ var CookieBanner = ({
       id: "cookie-banner",
       tabIndex: -1,
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { id: "cookie-banner-title", children: "Kakor (cookies)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: "cookie-banner-description", children: "PTS skulle vilja anv\xE4nda en statistikkaka i syfte att l\xF6pande f\xF6rb\xE4ttra webbplatsen. Samtycker du till det? Du kan n\xE4r som helst \xE4ndra ditt val. F\xF6r att \xE5terkalla ditt samtycke klickar du p\xE5 \u201DKakor\u201D i avsnittet l\xE4ngst ned p\xE5 webbplatsen." }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h3", { id: "cookie-banner-title", children: [
+          " ",
+          activatedLanguage === "en" ? "Cookies" : "Kakor (cookies)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: "cookie-banner-description", children: activatedLanguage === "en" ? `PTS would like to use a web analytics cookie in order to continuously improve pts.se. Do you consent? You can change your choice at any time. To withdraw your consent, click on \u201CCookies\u201D at the bottom of the website.` : `PTS skulle vilja anv\xE4nda en statistikkaka i syfte att l\xF6pande f\xF6rb\xE4ttra webbplatsen.
+          Samtycker du till det? Du kan n\xE4r som helst \xE4ndra ditt val. F\xF6r att \xE5terkalla ditt
+          samtycke klickar du p\xE5 \u201DKakor\u201D i avsnittet l\xE4ngst ned p\xE5 webbplatsen.` }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pts-cookieBanner-Links", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "svg",
@@ -2152,13 +2194,13 @@ var CookieBanner = ({
               href: "https://pts.se/om-oss/om-pts.se/kakor-pa-webbplatsen/kakor-pa-pts-e-tjanster/",
               target: "_blank",
               rel: "noopener noreferrer",
-              children: "Kakor (cookies) p\xE5 pts.se (\xF6ppnas i nytt f\xF6nster)"
+              children: activatedLanguage === "en" ? "Cookies on pts.se (opens in new tab)" : "Kakor (cookies) p\xE5 pts.se (\xF6ppnas i ny flik)"
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pts-cookieBanner-Buttons", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: () => handleCookieChoice(true), children: "Ja, jag samtycker" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: () => handleCookieChoice(false), children: "Nej, jag samtycker inte" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: () => handleCookieChoice(true), children: activatedLanguage === "en" ? "Yes, I consent" : "Ja, jag samtycker" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: () => handleCookieChoice(false), children: activatedLanguage === "en" ? "No, I do not consent" : "Nej, jag samtycker inte" })
         ] })
       ] })
     }
@@ -2264,7 +2306,7 @@ var LanguageIcon = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", {
     fill: "#6E3282"
   }
 ) });
-var Logo_sv = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "168.8", height: "46.67", viewBox: "0 0 168.8 46.67", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var Logo_sv = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "168.8", height: "40", viewBox: "0 0 168.8 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "path",
     {
@@ -2410,7 +2452,7 @@ var Logo_sv = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { widt
   ),
   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M82.2223 18.3335V37.2224", stroke: "currentColor", strokeWidth: "0.8", strokeMiterlimit: "10" })
 ] });
-var Logo_en = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "189.0", height: "46.67", viewBox: "0 0 189 46.67", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+var Logo_en = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "189.0", height: "40", viewBox: "0 0 189 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "path",
     {
@@ -2706,9 +2748,9 @@ var ModalStandard_default = Modal;
 
 // src/components/layout/SkipLinkStandard/SkipLinkStandard.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var SkipLink = () => {
+var SkipLink = ({ activatedLanguage = "sv" }) => {
   function scrollToMainContent() {
-    const container = document.getElementById(`main-content`);
+    const container = document.getElementById(`pts-main-service-headline`);
     if (container) {
       container.scrollIntoView({ behavior: "smooth", block: "center" });
       container.focus();
@@ -2722,7 +2764,7 @@ var SkipLink = () => {
         e.preventDefault();
         scrollToMainContent();
       },
-      children: "Till huvudinneh\xE5ll"
+      children: activatedLanguage === "en" ? "Skip to main content" : "Till huvudinneh\xE5ll"
     }
   ) });
 };
@@ -2730,7 +2772,7 @@ var SkipLinkStandard_default = SkipLink;
 
 // src/components/text-blocks/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.tsx
 var import_react13 = require("react");
-var import_dompurify4 = __toESM(require("dompurify"));
+var import_dompurify3 = __toESM(require("dompurify"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -2739,7 +2781,7 @@ var TextHeadlineAndBody = ({ data, headlineType = "h2" }) => {
       className: "pts-textHeadlineAndBody-container",
       children: [
         data.headline && (0, import_react13.createElement)(headlineType, { id: "textHeadlineAndBody-headline" }, data.headline),
-        data.body && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify4.default.sanitize(data.body) } }),
+        data.body && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify3.default.sanitize(data.body) } }),
         data.linksForMoreInfo && data.linksForMoreInfo.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "a",
           {
@@ -2860,11 +2902,11 @@ var PrincipleOfPublicity = ({ activatedLanguage = "" }) => {
 var PrincipleOfPublicityStandard_default = PrincipleOfPublicity;
 
 // src/components/text-blocks/TextBody/TextBody.tsx
-var import_dompurify5 = __toESM(require("dompurify"));
+var import_dompurify4 = __toESM(require("dompurify"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var TextBody = ({ data }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pts-textBody-container", children: [
-    data.body && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(data.body) } }),
+    data.body && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify4.default.sanitize(data.body) } }),
     data.linksForMoreInfo && data.linksForMoreInfo.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "a",
       {
@@ -2954,16 +2996,18 @@ var EditPreviewLinkStandard_default = EditPreviewLink;
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var StartApplicationButton = ({
   onClick,
-  label = "Starta e-tj\xE4nsten",
-  className = ""
+  label,
+  className = "",
+  activatedLanguage = "sv"
 }) => {
+  const defaultLabel = activatedLanguage === "en" ? "Start e-service" : "Starta e-tj\xE4nsten";
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "button",
     {
       type: "button",
       className: `pts-forwardButton pts-start-applicationButton ${className}`,
       onClick,
-      children: label
+      children: label || defaultLabel
     }
   );
 };
@@ -3122,10 +3166,10 @@ var ValidationErrorSummaryList_default = ValidationErrorSummaryList;
 
 // src/components/validation-and-status/FormStatusMessagesScreenReader/FormStatusMessagesScreenReader.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var FormStatusMessagesScreenReader = ({ formStatus }) => {
+var FormStatusMessagesScreenReader = ({ formStatus, activatedLanguage = "sv" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { "aria-live": "assertive", children: formStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pts-root-mandatoryAsterisk", children: "N\xE5got gick fel, f\xF6rs\xF6k igen senare eller kontakta oss!" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-live": "polite", className: "visually-hidden", children: formStatus === "loading" ? "Ditt \xE4rende registreras. Uppdatera eller st\xE4ng inte sidan." : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { "aria-live": "assertive", children: formStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pts-root-mandatoryAsterisk", children: activatedLanguage === "en" ? "Something went wrong, please try again later or contact us!" : "N\xE5got gick fel, f\xF6rs\xF6k igen senare eller kontakta oss!" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-live": "polite", className: "visually-hidden", children: formStatus === "loading" ? activatedLanguage === "en" ? "Your case is being registered. Please do not refresh or close the page." : "Ditt \xE4rende registreras. Uppdatera eller st\xE4ng inte sidan." : "" })
   ] });
 };
 var FormStatusMessagesScreenReader_default = FormStatusMessagesScreenReader;