optimized-react-component-library-xyz123 0.2.6 → 0.3.2

package/package.json

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

package/src/css/darkMode.css

@@ -56,6 +56,10 @@
         background-color: var(--dark-background-second);
     }
 
+    .pts-header-container svg{
+        color: var(--dark-text);
+    }
+
     .pts-header-container svg path{
         fill: var(--dark-text);
     }
@@ -63,6 +67,7 @@
     .pts-languageButton{
         color:var(--dark-text);
     }
+
     /*-------MAIN CONTENT-------*/
     section,
     .pts-form-step-header {
@@ -73,6 +78,55 @@
         color: var(--dark-action);
     }
 
+     /* ---------- SERVICE HEADLINE AND BODY ---------- */
+
+    .pts-serviceHeadlineAndBody-container a {
+        color: var(--dark-action);
+    }
+
+    .pts-serviceHeadlineAndBody-container a svg,
+    .MoreInfoIcon svg {
+        background-color: var(--dark-action);
+    }
+
+    .pts-serviceHeadlineAndBody-container a svg path,
+    .MoreInfoIcon svg path {
+        fill: var(--dark-main);
+    }
+   
+
+    .pts-moreinfo-list a {
+        color: var(--dark-action);
+    }
+
+    .pts-moreinfo-list svg {
+        background-color: var(--dark-action);
+    }
+
+    .pts-moreinfo-list svg path {
+        fill: var(--dark-main);
+    }
+
+    /* ---------- STEPPER ---------- */
+
+    .pts-stepperDot {
+        background-color: var(--dark-text);
+        color: var(--dark-main);
+    }
+
+    .pts-stepperDotActive {
+        background-color: var(--dark-orientation-active);
+    }
+
+    .pts-stepper-step:not(:last-child)::after {
+        background-color: var(--dark-text);
+    }
+
+    .pts-stepperDotDone,
+    .pts-stepperDotDone svg path {
+        background-color: var(--dark-action);
+        stroke: var(--dark-main);
+    }
 
  /*-----------QUESTIONS--------------*/  
 
@@ -127,56 +181,7 @@
         color: var(--dark-text);
     }
 
-    /* ---------- SERVICE HEADLINE AND BODY ---------- */
-
-    .pts-serviceHeadlineAndBody-container a {
-        color: var(--dark-action);
-    }
-
-    .pts-serviceHeadlineAndBody-container a svg,
-    .MoreInfoIcon svg {
-        background-color: var(--dark-action);
-    }
-
-    .pts-serviceHeadlineAndBody-container a svg path,
-    .MoreInfoIcon svg path {
-        fill: var(--dark-main);
-    }
    
-
-    .pts-moreinfo-list a {
-        color: var(--dark-action);
-    }
-
-    .pts-moreinfo-list svg {
-        background-color: var(--dark-action);
-    }
-
-    .pts-moreinfo-list svg path {
-        fill: var(--dark-main);
-    }
-
-    /* ---------- STEPPER ---------- */
-
-    .pts-stepperDot {
-        background-color: var(--dark-text);
-        color: var(--dark-main);
-    }
-
-    .pts-stepperDotActive {
-        background-color: var(--dark-orientation-active);
-    }
-
-    .pts-stepper-step:not(:last-child)::after {
-        background-color: var(--dark-text);
-    }
-
-    .pts-stepperDotDone,
-    .pts-stepperDotDone svg path {
-        background-color: var(--dark-action);
-        stroke: var(--dark-main);
-    }
-
     /* ---------- STEPPER BUTTON ---------- */
 
     .pts-forwardButton {
@@ -201,6 +206,7 @@
         border-color: var(--dark-action);
         color: var(--dark-action);
     }
+
     /* ---------- RADIO MULTIPLE ---------- */
 
     .pts-radioMultiple-container input[type='radio'] {
@@ -222,6 +228,7 @@
         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;
     }
+
   /* ---------- CHECKBOX GROUP ---------- */
 
     .pts-checkboxGroup-container input[type='checkbox'] {
@@ -233,6 +240,7 @@
         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 {
@@ -297,9 +305,6 @@
         color: var(--dark-action);
     }
 
-
-     
-  
     /* ---------- EDIT PREVIEW LINK ---------- */
 
     .pts-editPreviewLink-container button {
@@ -326,9 +331,21 @@
 
     .pts-errorSummary-container .errorDot {
         color: var(--dark-error);
+        background-color: var(--dark-main);
     }
 
     .errorSummary-text {
         color: var(--dark-error) !important;
     }
+
+    /*-------------MODAL-----------*/
+    .pts-modal-content{
+        background-color: var(--dark-main);
+        color: var(--dark-text);
+    }
+
+    .pts-spinner-border {
+         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
+
+    }
 }

package/src/css/questions.css

@@ -1,4 +1,3 @@
-
 fieldset {
   border: none;
   padding: 0;
@@ -11,9 +10,9 @@ fieldset {
   max-width: 624px;
 }
 
-div.pts-root-question:last-child{
-  padding-bottom: 0 ;
-  margin-bottom: 0 ;
+div.pts-root-question:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
 .pts-root-categoryDescription,
@@ -21,7 +20,7 @@ div.pts-root-question:last-child{
   margin-bottom: 3.6rem;
 }
 
-.pts-root-question{
+.pts-root-question {
   margin-bottom: 3.6rem;
 }
 
@@ -33,8 +32,8 @@ div.pts-root-question:last-child{
   cursor: pointer;
 }
 
-.pts-radio-option, 
-.pts-root-question legend  {
+.pts-radio-option,
+.pts-root-question legend {
   margin-bottom: 0.8rem;
 }
 
@@ -46,8 +45,6 @@ div.pts-root-question:last-child{
   line-height: 20px;
 }
 
-
-
 .pts-root-about {
   font-size: 1.4rem;
   color: var(--info);
@@ -95,7 +92,7 @@ div.pts-root-question:last-child{
   border: 0.2rem solid var(--error) !important;
 }
 
-.error-container{
+.error-container {
   padding: 3.6rem 0 0 0;
   margin: 0;
 }
@@ -145,6 +142,43 @@ div.pts-root-question:last-child{
   cursor: pointer;
 }
 
+/* ---------- SINGLE CHECKBOX ---------- */
+
+.pts-singleCheckbox-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 0.8rem;
+}
+
+.pts-singleCheckbox-container input[type='checkbox'] {
+  -webkit-appearance: none;
+
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.8rem;
+  flex-shrink: 0;
+
+  background-color: var(--main);
+  border: 0.15rem solid var(--info);
+  border-radius: 0.2rem;
+
+  cursor: pointer;
+}
+
+.pts-singleCheckbox-container input[type='checkbox']:checked {
+  background-color: var(--action);
+  border: none;
+  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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
+}
+
+.pts-singleCheckbox-container label {
+  cursor: pointer;
+  margin: 0;
+  padding-top: 0.1rem;
+  margin-top: 0.2rem;
+}
+
 
 /*-------- CHECKBOX GROUP-------- */
 
@@ -224,7 +258,7 @@ div.pts-root-question:last-child{
 
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
-.pts-textField-container{
+.pts-textField-container {
   margin-top: 8px;
 }
 
@@ -241,11 +275,11 @@ div.pts-root-question:last-child{
 }
 
 .pts-textField-container label {
-    margin-bottom: 0.8rem;
+  margin-bottom: 0.8rem;
 }
 
 .pts-question-hasAbout label {
-    margin-bottom: 0.3rem;
+  margin-bottom: 0.3rem;
 }
 
 /* ---------- TEXTAREA ---------- */
@@ -278,11 +312,6 @@ div.pts-root-question:last-child{
   width: 100%;
 }
 
-
-
-
-
-
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
@@ -951,7 +980,7 @@ div.pts-root-question:last-child{
 
 .addFilesMandatory {
   margin-bottom: 16px;
-     margin-top: 0px;
+  margin-top: 0px;
 }
 
 .addFilesMandatory.error {