optimized-react-component-library-xyz123 0.1.49 → 0.1.51

package/dist/index.css

@@ -1,7 +1,6 @@
 /* src/NewInputComponentStandard/RadioMultipleStandard/RadioMultipleStandard.css */
 /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
 /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
-/* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
 /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
 .files-upload {
   width: 100%;

package/dist/index.d.mts

@@ -89,6 +89,9 @@ interface IQuestionExtraAttribute {
     showTextAreaCounter?: boolean;
     hideValidationMessage?: boolean;
     hideTextCounter?: boolean;
+    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    spellCheck?: boolean;
+    autoCapitalize?: string;
 }
 interface IStepQuestionData {
     step: number;

package/dist/index.d.ts

@@ -89,6 +89,9 @@ interface IQuestionExtraAttribute {
     showTextAreaCounter?: boolean;
     hideValidationMessage?: boolean;
     hideTextCounter?: boolean;
+    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    spellCheck?: boolean;
+    autoCapitalize?: string;
 }
 interface IStepQuestionData {
     step: number;

package/dist/index.js

@@ -78,9 +78,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
     !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "fieldset",
       {
-        role: "radiogroup",
-        "aria-labelledby": `label-${groupId}`,
         "aria-invalid": question.hasValidationError,
+        "aria-describedby": question.hasValidationError ? errorId : void 0,
         "aria-errormessage": question.hasValidationError ? errorId : void 0,
         "aria-required": question.isQuestionMandatory || void 0,
         children: [
@@ -98,7 +97,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
                 id: `${groupId}-option-${index}`,
                 value: option.value,
                 checked: question.answer === option.value,
-                onChange: handleInputChange
+                onChange: handleInputChange,
+                required: question.isQuestionMandatory
               },
               index
             ),
@@ -106,8 +106,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
             " "
           ] }, index)),
           question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
           ] })
         ]
       }
@@ -165,8 +165,8 @@ var MultipleCheckboxes = ({
     isTouched(e, question);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { role: "group", "aria-labelledby": `label-${questionId}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { id: `label-${questionId}`, children: [
+    !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${questionId}`, children: [
         question.questionLabel,
         " ",
         question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
@@ -178,17 +178,16 @@ var MultipleCheckboxes = ({
           "input",
           {
             type: "checkbox",
-            name: `${question.id}-option-${index}`,
+            name: `${question.id}-option`,
             id: `${question.id}-option-${index}`,
             value: option.label,
             checked: checkedValues.includes(option.label),
             onChange: (e) => handleInputChange(e, option.label),
             className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
-          },
-          index
+          }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
-      ] }) })) })
+      ] }) }, index)) })
     ] }) }),
     " ",
     showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevieMultipleCheckboxes, { activatedLanguage, question })
@@ -316,7 +315,7 @@ var TextFieldStandard = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const questionId = `question-${question.id}`;
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -349,23 +348,26 @@ var TextFieldStandard = ({
             {
               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,
               name: `question-name-${question.id}`,
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
               onChange: (e) => isTouched(e, question),
               value: question.answer,
-              maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
+              maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
               id: inputId,
-              disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
+              disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
               "aria-invalid": question.hasValidationError,
-              "aria-errormessage": question.hasValidationError ? errorId : void 0
+              "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
             }
           ),
           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", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
           ] })
         ]
       }
@@ -1731,10 +1733,10 @@ var RenderQuestionGroup = ({
         "fieldset",
         {
           className: "pts-root-question-group-fieldset",
-          "aria-required": questionArray[0].isQuestionMandatory,
-          "aria-invalid": questionArray[0].hasValidationError,
-          "aria-errormessage": questionArray[0].questionId + "-error",
-          "aria-describedby": questionArray[0].questionId + "-error",
+          "aria-required": questionArray[0].isQuestionMandatory || void 0,
+          "aria-invalid": questionArray[0].hasValidationError || void 0,
+          "aria-errormessage": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
+          "aria-describedby": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
           children: [
             legend && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("legend", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: legend }),
@@ -1743,10 +1745,10 @@ var RenderQuestionGroup = ({
                 questionArray[0].validationDefaultMessesege
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pts-root-error", id: questionArray[0].questionId + "-error", children: questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: questionArray[0].validationDefaultMessesege })
-            ] }) }),
+            questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pts-root-error", id: questionArray[0].id + "-error", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "errorText", children: questionArray[0].validationDefaultMessesege })
+            ] }),
             questions
           ]
         }

package/dist/index.mjs

@@ -13,9 +13,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
     !showPreview && question.visible && /* @__PURE__ */ jsx("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ jsxs(
       "fieldset",
       {
-        role: "radiogroup",
-        "aria-labelledby": `label-${groupId}`,
         "aria-invalid": question.hasValidationError,
+        "aria-describedby": question.hasValidationError ? errorId : void 0,
         "aria-errormessage": question.hasValidationError ? errorId : void 0,
         "aria-required": question.isQuestionMandatory || void 0,
         children: [
@@ -33,7 +32,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
                 id: `${groupId}-option-${index}`,
                 value: option.value,
                 checked: question.answer === option.value,
-                onChange: handleInputChange
+                onChange: handleInputChange,
+                required: question.isQuestionMandatory
               },
               index
             ),
@@ -41,8 +41,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
             " "
           ] }, index)),
           question.hasValidationError && /* @__PURE__ */ jsxs("div", { className: "pts-root-error", id: errorId, children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-            /* @__PURE__ */ jsx("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
+            /* @__PURE__ */ jsx("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+            /* @__PURE__ */ jsx("span", { className: "errorText", children: question.validationDefaultMessesege })
           ] })
         ]
       }
@@ -100,8 +100,8 @@ var MultipleCheckboxes = ({
     isTouched(e, question);
   };
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    !showPreview && question.visible && /* @__PURE__ */ jsx2("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ jsxs2("section", { role: "group", "aria-labelledby": `label-${questionId}`, children: [
-      /* @__PURE__ */ jsxs2("h3", { id: `label-${questionId}`, children: [
+    !showPreview && question.visible && /* @__PURE__ */ jsx2("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ jsxs2("fieldset", { children: [
+      /* @__PURE__ */ jsxs2("legend", { id: `label-${questionId}`, children: [
         question.questionLabel,
         " ",
         question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
@@ -113,17 +113,16 @@ var MultipleCheckboxes = ({
           "input",
           {
             type: "checkbox",
-            name: `${question.id}-option-${index}`,
+            name: `${question.id}-option`,
             id: `${question.id}-option-${index}`,
             value: option.label,
             checked: checkedValues.includes(option.label),
             onChange: (e) => handleInputChange(e, option.label),
             className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
-          },
-          index
+          }
         ),
         /* @__PURE__ */ jsx2("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
-      ] }) })) })
+      ] }) }, index)) })
     ] }) }),
     " ",
     showPreview && /* @__PURE__ */ jsx2(PrevieMultipleCheckboxes, { activatedLanguage, question })
@@ -251,7 +250,7 @@ var TextFieldStandard = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const questionId = `question-${question.id}`;
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -284,23 +283,26 @@ var TextFieldStandard = ({
             {
               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,
               name: `question-name-${question.id}`,
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
               onChange: (e) => isTouched(e, question),
               value: question.answer,
-              maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
+              maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
               id: inputId,
-              disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
+              disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
               "aria-invalid": question.hasValidationError,
-              "aria-errormessage": question.hasValidationError ? errorId : void 0
+              "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
             }
           ),
           question.hasValidationError && /* @__PURE__ */ jsxs4("div", { className: "pts-root-error", id: errorId, children: [
-            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-            /* @__PURE__ */ jsx4("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
+            /* @__PURE__ */ jsx4("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+            /* @__PURE__ */ jsx4("span", { className: "errorText", children: question.validationDefaultMessesege })
           ] })
         ]
       }
@@ -1666,10 +1668,10 @@ var RenderQuestionGroup = ({
         "fieldset",
         {
           className: "pts-root-question-group-fieldset",
-          "aria-required": questionArray[0].isQuestionMandatory,
-          "aria-invalid": questionArray[0].hasValidationError,
-          "aria-errormessage": questionArray[0].questionId + "-error",
-          "aria-describedby": questionArray[0].questionId + "-error",
+          "aria-required": questionArray[0].isQuestionMandatory || void 0,
+          "aria-invalid": questionArray[0].hasValidationError || void 0,
+          "aria-errormessage": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
+          "aria-describedby": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
           children: [
             legend && /* @__PURE__ */ jsxs12("legend", { children: [
               /* @__PURE__ */ jsx13("span", { children: legend }),
@@ -1678,10 +1680,10 @@ var RenderQuestionGroup = ({
                 questionArray[0].validationDefaultMessesege
               ] })
             ] }),
-            /* @__PURE__ */ jsx13("div", { className: "pts-root-error", id: questionArray[0].questionId + "-error", children: questionArray[0].hasValidationError && /* @__PURE__ */ jsxs12(Fragment13, { children: [
-              /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-              /* @__PURE__ */ jsx13("span", { "aria-label": "Felmeddelande.", className: "errorText", children: questionArray[0].validationDefaultMessesege })
-            ] }) }),
+            questionArray[0].hasValidationError && /* @__PURE__ */ jsxs12("div", { className: "pts-root-error", id: questionArray[0].id + "-error", children: [
+              /* @__PURE__ */ jsx13("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
+              /* @__PURE__ */ jsx13("span", { className: "errorText", children: questionArray[0].validationDefaultMessesege })
+            ] }),
             questions
           ]
         }

package/package.json

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

package/src/css/darkMode.css

@@ -1,56 +1,96 @@
+:root{
+    --dark-background:#414141;
+    --dark-text:#ffffff;
+    --dark-action: #B07CBF;
+    --dark-error: #D75055;
+    --dark-main:#141414;
+    --dark-info: #808080;
+    --dark-yellow:#F4BF56;
+    --dark-purple:#200827;
+}
+
 @media (prefers-color-scheme: dark) {
     /* ---------- GENERAL ---------- */
 
     body {
-        background-color: #414141;
-        color: #ffffff;
+        background-color: var(--dark-background);
+        color: var(--dark-text);
+    }
+
+
+   /*----------COOKIE BANNER-------*/
+   .pts-cookieBanner {
+        background-color: var(--dark-main) !important;
+        border-bottom: 2px solid  var(--dark-action) !important;
     }
 
+    .pts-cookieBanner a{
+        color: var(--dark-action) !important;
+    }
+
+    .pts-cookieBanner button {
+        background-color: var(--dark-action) !important;
+        border-color: var(--dark-action)!important;
+        color: var(--dark-main)!important;
+    }
+
+    .pts-cookieBanner-Links svg rect{
+        fill:var(--dark-action);
+    }
+    .pts-cookieBanner-Links svg path{
+        fill:var(--dark-main);
+    }
+
+
+/*-----------HEADER--------------*/
+
     .pts-header-container{
-        background-color: #200827;
+        background-color: var(--dark-purple);
     }
 
     .pts-header-container svg path{
-        fill: #ffffff;
+        fill: var(--dark-text);
     }
 
     .pts-languageButton{
-        color:#ffffff;
-        cursor: pointer;
+        color:var(--dark-text);
     }
-
+    /*-------MAIN CONTENT-------*/
     section,
     .pts-form-step-header {
-        background-color: #141414;
+        background-color: var(--dark-main);
     }
 
     #main-content a {
-        color: #b07cbf;
+        color: var(--dark-action);
     }
 
+
+ /*-----------QUESTIONS--------------*/  
+
     .pts-root-about {
-        color: #808080;
+        color: var(--dark-info);
     }
 
     .pts-root-question input[type='text']:focus,
     .pts-root-question input[type='email']:focus,
     .pts-root-question input[type='tel']:focus {
-        border: 0.2rem solid #b07cbf;
+        border: 0.2rem solid  var(--dark-action);
     }
 
     .errorDot {
-        background-color: #d75055;
+        background-color:  var(--dark-error);
     }
 
     .errorText,
     .pts-root-mandatoryAsterisk {
-        color: #d75055;
+        color:  var(--dark-error);
     }
 
     .pts-root-question-input-error-border,
     .pts-root-question-input-error-border,
     .pts-root-question-input-error-border {
-        border: 0.15rem solid #d75055 !important;
+        border: 0.15rem solid var(--dark-error) !important;
     }
 
     button:focus-visible,
@@ -73,58 +113,58 @@
     .pts-root-question input[type='text'],
     .pts-root-question input[type='email'],
     .pts-root-question input[type='tel'] {
-        border: 1px solid #808080;
-        background: #000000;
-        color: #ffffff;
+        border: 1px solid var(--dark-info);
+        background-color: var(--dark-main);
+        color: var(--dark-text);
     }
 
     /* ---------- SERVICE HEADLINE AND BODY ---------- */
 
     .pts-moreinfo-list a {
-        color: #b07cbf;
+        color: var(--dark-action);
     }
 
     .pts-moreinfo-list svg {
-        background-color: #b07cbf;
+        background-color: var(--dark-action);
     }
 
     .pts-moreinfo-list svg path {
-        fill: #141414;
+        fill: var(--dark-main);
     }
 
     /* ---------- STEPPER ---------- */
 
     .pts-stepperDot {
-        background-color: #ffffff;
-        color: #141414;
+        background-color: var(--dark-text);
+        color: var(--dark-main);
     }
 
     .pts-stepperDotActive {
-        background-color: #f4bf56;
+        background-color: var(--dark-yellow);
     }
 
     .pts-stepper-step:not(:last-child)::after {
-        background-color: #ffffff;
+        background-color: var(--dark-text);
     }
 
     .pts-stepperDotDone,
     .pts-stepperDotDone svg path {
-        background-color: #b07cbf;
-        stroke: #141414;
+        background-color: var(--dark-action);
+        stroke: var(--dark-main);
     }
 
     /* ---------- STEPPER BUTTON ---------- */
 
     .pts-forwardButton {
-        background-color: #ffffff;
-        border-color: #ffffff;
-        color: #6e3282;
+        background-color: var(--dark-action);
+        border-color: var(--dark-action);
+        color: var(--dark-main);
     }
 
     .pts-backButton {
-        background-color: #ffffff;
-        border-color: #ffffff;
-        color: #6e3282;
+        background-color: var(--dark-action);
+        border-color: var(--dark-action);
+        color: var(--dark-main);
     }
 
     .pts-backButton:focus,
@@ -133,74 +173,75 @@
     .pts-forwardButton:hover,
     .btn-upload:focus,
     .btn-upload:hover {
-        background-color: #141414;
-        border-color: #141414;
-        color: #b07cbf;
+        background-color: var(--dark-main);
+        border-color: var(--dark-action);
+        color: var(--dark-action);
     }
-
     /* ---------- RADIO MULTIPLE ---------- */
 
     .pts-radioMultiple-container input[type='radio'] {
-        border-color: #808080;
+        border-color: var(--dark-info);
     }
 
     .pts-radioMultiple-container input[type='radio']:checked::before {
-        background-color: #b07cbf;
+        background-color: var(--dark-action);
     }
 
     /* ---------- MULTIPLE CHECKBOXES ---------- */
 
     .pts-multipleCheckboxes-container input[type='checkbox'] {
-        background-color: #141414;
-        border-color: #808080;
+        background-color: var(--dark-main);
+        border-color: var(--dark-info);
     }
 
     .pts-multipleCheckboxes-container input[type='checkbox']:checked {
-        background-color: #b07cbf;
+        background-color: var(--dark-action);
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
     }
 
     /* ---------- TEXTAREA ---------- */
 
     .pts-textArea-container textarea {
-        border-color: #808080;
+        border-color: var(--dark-info);
     }
 
     .pts-textArea-container textarea:focus {
-        border-color: #b07cbf;
+        border-color: var(--dark-action);
     }
 
     .textfield-about{
-        color: #808080; 
+        color: var(--dark-info);
      }
+  
     /* ---------- EDIT PREVIEW LINK ---------- */
 
     .pts-editPreviewLink-container button {
-        color: #b07cbf;
+        color: var(--dark-action);
     }
 
     .pts-editPreviewLink-container svg path {
-        stroke: #b07cbf;
+        stroke: var(--dark-action);
     }
 
     /* ---------- GRANSKA ---------- */
 
     .no-answer-preview-page {
-        color: #808080;
+        color: var(--dark-info);
     }
 
+
     /* ---------- ERROR SUMMARY ---------- */
 
     .pts-errorSummary-container {
-        border: 0.1rem solid #d75055;
-        border-left: 4rem solid #d75055;
+        border: 0.1rem solid var(--dark-error);
+        border-left: 4rem solid var(--dark-error);
     }
 
     .pts-errorSummary-container .errorDot {
-        color: #d75055;
+        color: var(--dark-error);
     }
 
     .errorSummary-text {
-        color: #d75055 !important;
+        color: var(--dark-error) !important;
     }
 }

package/src/css/styles.css

@@ -217,6 +217,95 @@ textarea:focus-visible,
   height: 4.8rem;
 }
 
+/* ---------- SCOOKIE BANNER ---------- */
+
+.pts-cookieBanner {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding: 15px 20px;
+  background: #eaf1f9;
+  border-bottom: 4px solid #6e3282;
+  z-index: 9999;
+  width: 100vw;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+.pts-cookieBanner .content {
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  max-width: 860px;
+  margin: 1.6rem 0;
+}
+
+.pts-cookieBanner h3 {
+  font-family: Arial, sans-serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 21px;
+  margin: 0 0 10px 0;
+  text-align: left;
+}
+
+.pts-cookieBanner p {
+  font-family: Arial, sans-serif;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 24px;
+  margin: 0 0 15px 0;
+  text-align: left;
+}
+.pts-cookieBanner-Links{
+  margin-bottom: 1.6rem;
+}
+
+.pts-cookieBanner-Buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 0.8rem 2rem;
+}
+
+.pts-cookieBanner button {
+  border-radius: 8px;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end; /* Always justify buttons to the end/right */
+}
+
+.pts-cookieBanner a {
+  padding-left: 10px;
+  font-family: Arial, sans-serif;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 24px;
+  color: #6e3282;
+  text-decoration: none;
+  position: relative;
+  top: -0.7rem;
+}
+
+.pts-cookieBanner a:hover {
+  text-decoration: underline;
+}
+
+/* Button styles */
+.pts-cookieBanner button {
+  min-width: 140px;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  font-size: 1.4rem;
+  padding: 8px 15px;
+  border-radius: 4px;
+  background-color: #6e3282;
+  border-color: #6e3282;
+  color: white;
+  cursor: pointer;
+}
+
 /* ---------- SERVICE HEADLINE AND BODY ---------- */
 
 .pts-serviceHeadlineAndBody-container li {
@@ -435,6 +524,7 @@ textarea:focus-visible,
   background: transparent;
   border: transparent;
   color: #6e3282;
+  cursor: pointer;
 }
 
 /* ---------- FOOTER ---------- */