optimized-react-component-library-xyz123 0.19.13 → 0.19.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.19.13",
+  "version": "0.19.14",
   "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

@@ -7,7 +7,6 @@
     --dark-info: #808080;
     --dark-orientation-active:#F4BF56;
     --dark-background-second:#200827;
-    --dark-background-third:#747474;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -242,17 +241,6 @@
         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;
     }
 
-    /* ---------- SINGLE CHECKBOX ---------- */
- .pts-singleCheckbox-container input[type='checkbox'] {
-        background-color: var(--dark-main);
-        border-color: var(--dark-info);
-    }
-    .pts-singleCheckbox-container input[type='checkbox']:checked {
-        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 {
@@ -323,6 +311,10 @@
         color: var(--dark-action);
     }
 
+    .pts-editPreviewLink-container svg path {
+        stroke: var(--dark-action);
+    }
+
     /* ---------- GRANSKA ---------- */
 
     .no-answer-preview-page {
@@ -345,13 +337,6 @@
     .errorSummary-text {
         color: var(--dark-error) !important;
     }
-    
-    /*--------------------FOOTER-----------------*/
-
-    .pts-footer-slogan-text-container{
-    background-color: var(--dark-background-third);
-    }
-
 
     /*-------------MODAL-----------*/
     .pts-modal-content{
@@ -363,23 +348,4 @@
          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");
 
     }
-
-
-   /*-------------Autofill-----------*/
-    input:autofill,
-    input:autofill:hover,
-    input:autofill:focus,
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus {
-        -webkit-box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
-        box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
-        -webkit-text-fill-color: var(--dark-text) !important; /* behåller textfärgen */
-        background-color: var(--dark-main) !important;
-    }
-
-    /* Firefox */
-    input:-moz-autofill {
-        box-shadow: 0 0 0 1000px transparent inset !important;
-    }
 }

package/src/css/mobileView.css

@@ -44,11 +44,6 @@
     margin: 0;
     padding: 0;
 }
-
-   .pts-footer-slogan-text {
-        font-size: 16px;
-        text-align: center;
-    }
 }
 
 /********************************************/
@@ -93,10 +88,6 @@
     padding: 0;
   }
 
-  .pts-header-content{
-    display:block;
-  }
-
   .pts-header-logo-container {
     padding: 13px 0;
     border-bottom: 2px solid #ddd;
@@ -104,11 +95,6 @@
     text-align: center;
   }
 
-  .pts-header-navigation-container{
-    align-items: center;
-    justify-content: center;
-  }
-
   .pts-languageButton {
     margin: 0.4rem 0;
   }
@@ -210,32 +196,12 @@
     margin-left: 12px;
   }
 
-  /*---------PREVIEW PAGE----------------*/
-
-    .pts-preview-header {
-        display: block;
-        justify-content: unset;
-        align-items: unset;
-        width: 100%;
-    }
-
-    .pts-preview-header h2 {
-        margin-bottom: 0.8rem;
-    }
-
   .pts-editPreviewLink-container {
-    display: block;
-    justify-content: unset;
-    align-items: unset;
-    margin: 0 0 2.6rem 0;
-  }
-
-  .pts-edit-step-text{
-    padding-left: 0;
+    width: 50%;
   }
 
   .pts-editPreviewLink-container a {
-    font-size: 1.6rem;
+    font-size: 1.3rem;
     display: block;
   }
 
@@ -259,11 +225,6 @@
     padding-bottom: 4px;
   }
 
-  .pts-footer-slogan-text{
-    line-height: 2rem;
-  }
-
-
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -336,37 +297,14 @@
   }
 }
 
-
-/********************************************/
-/***************WIDTH: 750 ******************/
-/********************************************/
-@media (max-width: 750px) {
-    body .pts-stepper-step:not(:last-child)::after {
-        left: calc(50% + 3rem);
-        width: calc(33.33vw - 13rem);
-        right: auto;
-    }
-}
-
-/********************************************/
-/***************WIDTH: 550 ******************/
-/********************************************/
-@media (max-width: 550px) {
-    body .pts-stepper-step:not(:last-child)::after {
-        left: calc(50% + 3rem);
-        width: calc(33.33vw - 11rem);
-        right: auto;
-    }
-}
-
 /********************************************/
 /***************WIDTH: 480 ******************/
 /********************************************/
 @media (max-width: 480px) {
   .pts-stepper-step:not(:last-child)::after {
-     left: calc(50% + 3rem);
-        width: calc(33.33vw - 10rem);
-        right: auto;
+    left: calc(50% + 2rem) !important;
+    width: calc(33.33vw - 7.7rem) !important;
+    right: auto !important;
   }
 
   .files-upload {

package/src/css/questions.css

@@ -32,14 +32,6 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-root-question-group-fieldset legend {
-  margin-bottom: 0px;
-}
-
-.pts-root-group-fieldset-legend-container {
-  margin-bottom: 1.6rem;
-}
-
 .pts-radio-option,
 .pts-root-question legend {
   margin-bottom: 0.8rem;
@@ -150,6 +142,56 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
+/* ---------- DROPDOWN ---------- */
+
+/* För inspiration */
+
+.pts-dropdown-container {
+  margin-bottom: 1.5rem;
+}
+
+.pts-dropdown-container label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.pts-dropdown-container select {
+  display: block;
+  width: 100%;
+  padding-right: 2.4em;
+  padding-left: 0.6em;
+
+  border: #747474 1px solid;
+  box-shadow: none;
+  margin: 0;
+  height: 42px;
+
+  word-wrap: normal;
+
+  text-transform: none;
+
+  cursor: pointer;
+
+  border-radius: 6px;
+
+  font-family: Arial;
+  font-size: 16px;
+
+  background-image: url(https://dsa.pts.se/images/arrow.svg);
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 1em;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
 /* ---------- SINGLE CHECKBOX ---------- */
 
 .pts-singleCheckbox-row {
@@ -172,7 +214,6 @@ div.pts-root-question:last-child {
   border-radius: 0.2rem;
 
   cursor: pointer;
-  margin-left: 0px;
 }
 
 .pts-singleCheckbox-container input[type='checkbox']:checked {
@@ -188,14 +229,13 @@ div.pts-root-question:last-child {
   margin-top: 0.2rem;
 }
 
-
 /*-------- CHECKBOX GROUP-------- */
 
-.pts-checkboxGroup-options{
+.pts-checkboxGroup-options {
   display: flex;
 }
 
-.pts-checkboxGroup-container input[type='checkbox']{
+.pts-checkboxGroup-container input[type='checkbox'] {
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -205,7 +245,6 @@ div.pts-root-question:last-child {
   border: 0.15rem solid var(--info);
   border-radius: 0.2rem;
   cursor: pointer;
-  margin-left: 0px;
 }
 
 .pts-checkboxGroup-container input[type='checkbox']:checked {
@@ -214,7 +253,7 @@ div.pts-root-question:last-child {
   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-checkboxGroup-container label{
+.pts-checkboxGroup-container label {
   padding-top: 0.3rem;
   line-height: 20px;
   cursor: pointer;
@@ -223,7 +262,7 @@ div.pts-root-question:last-child {
 
 /* ---------- MULTIPLE CHECKBOXES ---------- */
 
-.pts-multipleCheckboxes-container input[type='checkbox']{
+.pts-multipleCheckboxes-container input[type='checkbox'] {
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -241,7 +280,7 @@ div.pts-root-question:last-child {
   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-multipleCheckboxes-container label{
+.pts-multipleCheckboxes-container label {
   cursor: pointer;
   margin: 0;
   padding-top: 0.1rem;
@@ -260,16 +299,15 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-multipleCheckboxes-container li label{
+.pts-multipleCheckboxes-container li label {
   flex: 1;
   margin-top: 0.2rem;
 }
 
-
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
 .pts-textField-container {
-  margin-bottom: 16px;
+  margin-top: 8px;
 }
 
 .pts-about {
@@ -322,10 +360,6 @@ div.pts-root-question:last-child {
   width: 100%;
 }
 
- .pts-root-question-group-fieldset  .pts-root-error{
-    margin-bottom: 1.6rem;
- } 
-
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
@@ -1080,24 +1114,3 @@ div.pts-root-question:last-child {
   background: var(--red-green-red, rgb(211, 165, 0));
 }
 /* ---------- END FILE UPLOAD ---------- */
-
-
-
-
-
-
-input:autofill,
-input:autofill:hover,
-input:autofill:focus,
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 1000px var(--main) inset !important;
-    box-shadow: 0 0 0 1000px var(--main) inset !important;
-    -webkit-text-fill-color: inherit !important; /* behåller textfärgen */
-    background-color: var(--main) !important;
-}
-input:-moz-autofill {
-    box-shadow: 0 0 0 1000px transparent inset !important;
-}
-

package/src/css/styles.css

@@ -11,7 +11,6 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
-  --background-third: #414141;
 }
 
 body,
@@ -100,7 +99,6 @@ h4 {
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
-  width: 100%;
 }
 
 section {
@@ -140,10 +138,6 @@ p[aria-live='assertive']:empty {
     padding: 0;
 }
 
-.pts-root-categoryDescription {
-   margin-top: 0px;
-}
-
 .pts-first-category-section {
   padding-top: 0;
   border-top-left-radius: 0;
@@ -293,27 +287,6 @@ textarea:focus-visible,
   background-color: var(--main);
 }
 
-.pts-header-content{
-    width: 100%;
-    display: flex;
-}
-
-.pts-header-logo-container{
-    height:4rem;
-}
-
-.pts-header-logo svg{
-    height: 4rem;
-}
-
-.pts-header-navigation-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    width: 100%;
-    align-items: flex-end;
-}
-
 .pts-languageButton {
   position: relative;
   display: inline-flex;
@@ -322,16 +295,15 @@ textarea:focus-visible,
   border: transparent;
   color: var(--action);
   cursor: pointer;
-  font-size: 1.6rem;
 }
 
 .pts-languageButton::after {
     content: "";
     position: absolute;
-    left: 7px;
-    right: 4px;
-    bottom: 3px;
-    height: 0.15rem;
+    left: 0.7rem;
+    right: -0.3rem;
+    bottom: 0;
+    height: 0.2rem;
     background-color: currentColor;
     opacity: 0;
 }
@@ -341,25 +313,21 @@ textarea:focus-visible,
 }
 
 .languageIcon{
-  position: relative;
   margin-top: 0.3rem;
   padding-right: 0.6rem;
-  top: 0.01rem;
 }
 
 .pts-languageButton svg {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
+.languageIcon{
+  padding-left: 0.6rem;
+}
 
 /* ---------- TextBODY ---------- */
 
-.pts-textBody-container p{
-    margin-bottom: 1.6rem;
-
-}
-
 .MoreInfoIcon{
   margin-top: 2px;
 }
@@ -517,6 +485,12 @@ textarea:focus-visible,
   gap: 0.2rem;
 }
 
+.pts-editPreviewLink-container svg {
+  height: 1.6rem;
+  width: 1.6rem;
+  flex-shrink: 0;
+}
+
 .pts-question-preview,
 .addFilesPreviewContainer {
   display: flex;
@@ -553,6 +527,10 @@ textarea:focus-visible,
   margin-bottom: 36px;
 }
 
+.pts-edit-step-button{
+  text-decoration: none;
+}
+
 .pts-edit-step-text{
   padding-left: 5px;
 }
@@ -672,35 +650,17 @@ textarea:focus-visible,
 /* ---------- FOOTER ---------- */
 
 .pts-footer-container {
+  display: flex;
+  min-height: 14rem;
   align-items: center;
   width: 100%;
   background-color: var(--background-second);
 }
 
-.pts-footer-slogan-text-container{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-third);
-      height: 50px;
-      padding: 0px;
-}
-
-.pts-footer-slogan-text{
-  color: var(--main);
-  line-height: 2.4rem;
-  font-size: 2rem;
-  text-box-trim: trim-both;
-  margin: 0;
-  
-}
-
  .pts-footer-content{
     display: flex;
     align-items: center;
     width: 100%;
-    min-height: 14rem;
-    padding: 0.1rem 0;
 }
 
 .pts-footer-logo {
@@ -802,7 +762,8 @@ textarea:focus-visible,
     transform: rotate(360deg);
   }
 }
-/*-----------ALWAYS IN THE END OF STYLES----------------*/
+
+
 
 .cleanPadding {
   padding: 0;
@@ -811,17 +772,4 @@ textarea:focus-visible,
 .unsetMargin-Padding {
   margin: 0;
   padding: 0;
-}
-
-.visually-hidden {
-    position: absolute !important;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
 }