optimized-react-component-library-xyz123 2.12.9 → 2.13.1

package/package.json

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

@@ -20,14 +20,6 @@
     color: var(--dark-text);
   }
 
-  .pts-secondary-button {
-    border-color: var(--dark-background-second);
-  }
-
-  .pts-secondary-button:hover {
-    border-color: var(--dark-text);
-  }
-
   /*----------COOKIE BANNER-------*/
   .pts-cookieBanner {
     background-color: var(--dark-main) !important;
@@ -73,15 +65,6 @@
     fill: var(--dark-text);
   }
 
-  .pts-header-content {
-    background-color: var(--dark-background);
-  }
-
-  .pts-header-logo-container,
-  .pts-header-navigation-container {
-    background: var(--dark-background-second);
-  }
-
   .pts-languageButton {
     color: var(--dark-text);
   }
@@ -96,7 +79,6 @@
   .pts-navigation-header-headline-container {
     border-color: var(--dark-background-third) !important;
   }
-
   .pts-navigation-header-nav-container button svg path,
   .pts-navigation-header-nav-container button svg line {
     color: var(--dark-text);
@@ -390,14 +372,16 @@
     color: var(--dark-info);
   }
 
+  
   /* ---------- DROPDOWN  ---------- */
   .pts-dropdown-container select {
     border-color: var(--dark-info);
     background-color: var(--dark-main);
     color: var(--dark-text);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23ffffff'/%3E%3C/svg%3E");
+     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23ffffff'/%3E%3C/svg%3E");
   }
 
+
   /* ---------- ADD FILE QUESTION ---------- */
   .filePickText {
     color: var(--dark-text) !important;
@@ -480,7 +464,7 @@
   }
 
   .pts-open-close-icon svg path,
-  .pts-collapse-open-close-icon svg path {
+  .pts-collapse-open-close-icon svg path{
     fill: var(--dark-main);
   }
 
@@ -533,8 +517,7 @@
     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");
   }
 
-  .pts-modal-overlay,
-  .pts-navigation-overlay {
+  .pts-modal-overlay, .pts-navigation-overlay {
     background-color: rgba(255, 255, 255, 0.5);
   }
 
@@ -545,17 +528,20 @@
     background-color: var(--dark-alertintext);
   }
   .pts-alertInText-left svg circle {
-    fill: var(--dark-background);
+    fill: var(--dark-main);
   }
+
   .pts-alertInText-left svg rect {
     fill: var(--dark-alertintext);
   }
+
   .pts-alertInText-left svg .pts-alertInText-icon-dot-over-i {
     fill: var(--dark-alertintext);
   }
+
   .pts-alertInText-right {
     border: 1px solid var(--dark-alertintext);
-    color: var(--dark-alertintext-text);
+    color: var(--dark-text);
   }
 
   /*-------------Autofill-----------*/

package/src/css/e-tjanst-root.css

@@ -58,8 +58,7 @@ h2:focus:focus-visible,
 }
 
 h1,
-h2,
-h3 {
+h2 {
   margin: 0;
   margin-bottom: 3.6rem;
 }
@@ -75,6 +74,7 @@ h2 {
 
 h3 {
   font-size: 1.6rem;
+  margin-bottom: 1.6rem;
 }
 
 h4 {

package/src/css/mobileView.css

@@ -25,10 +25,6 @@
     align-items: center;
   }
 
-  .pts-site-headline {
-    margin-bottom: unset;
-  }
-
   .pts-site-headline,
   .pts-navigation-header-headline-container p {
     font-size: 1.6rem;
@@ -38,65 +34,11 @@
   .pts-navigation-header-nav-container {
     align-items: center;
     justify-content: center;
-    height: 4.8rem;
-    gap: 0.6rem;
-    margin-bottom: unset;
-  }
-
-  .pts-navigation-header-nav-container {
-    width: calc(100% - 3.2rem);
-    padding: 0 1.6rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    height: 4.8rem;
-  }
-
-  .pts-navigation-header-nav-container .pts-secondary-button {
-    width: 120px;
-  }
-
-  /*--- 3 knappar ---*/
-  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(1) {
-    justify-self: start;
-  }
-
-  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(2) {
-    justify-self: center;
-  }
-
-  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(3) {
-    justify-self: end;
-  }
-
-  /*--- 2 knappar: mitten och höger ---*/
-  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
-      :has(.pts-secondary-button:nth-child(3))
-    ) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
-      :has(.pts-secondary-button:nth-child(3))
-    )
-    .pts-secondary-button:nth-child(1) {
-    grid-column: 2;
-    justify-self: center;
-  }
-
-  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
-      :has(.pts-secondary-button:nth-child(3))
-    )
-    .pts-secondary-button:nth-child(2) {
-    grid-column: 3;
-    justify-self: end;
+    height: 48px;
   }
 
-  /*--- 1 knapp: höger ---*/
-  .pts-navigation-header-nav-container:not(:has(.pts-secondary-button:nth-child(2)))
-    .pts-secondary-button {
-    grid-column: 2;
-    justify-self: center;
+  .pts-navigation-header-nav-container button {
+    width: 100%;
   }
 
   .pts-navigation-close-button {
@@ -174,11 +116,6 @@
     padding-top: 0;
   }
 
-  .pts-footer-linkList .pts-secondary-button {
-    margin-left: unset;
-    border-color: var(--background);
-  }
-
   .pts-footer-linkList a span {
     padding: 0;
   }
@@ -253,13 +190,10 @@
   .pts-header-navigation-container {
     align-items: center;
     justify-content: center;
-    margin-top: 0.4rem;
-    margin-bottom: unset;
   }
 
   .pts-languageButton {
     margin: 0.4rem 0;
-    margin-left: -10px;
   }
 
   .languageIcon {
@@ -327,7 +261,7 @@
     margin-right: 1.6rem;
     margin-top: 1.6rem;
   }
-  /*****Questions*******/
+ /*****Questions*******/
   .pts-textArea-container textarea {
     width: 100%;
     box-sizing: border-box;

package/src/css/questions.css

@@ -154,6 +154,10 @@ div.pts-root-question:last-child {
   background-color: var(--action);
 }
 
+.pts-radioMultipleWithInfo2-container input[type='radio'] {
+  margin: auto;
+}
+
 .pts-radioMultiple-container label,
 .pts-radioMultipleWithInfo2-container label {
   position: relative;
@@ -163,15 +167,25 @@ div.pts-root-question:last-child {
 
 /****RADIO MULTIPLE WITH INFO*/
 
+.pts-radioMultipleWithInfo2-container legend {
+  margin-bottom: 16px;
+  font-weight: 600;
+  margin-top: 10px;
+}
+
+.pts-radioMultipleWithInfo2-container p {
+  margin-bottom: 0px;
+  margin-top: 16px;
+}
+
 .pts-radioWithInfo-sub-headline {
-  margin-block-start: 3.6rem;
   margin-block-end: 1.6rem;
-  font-size: 18px;
+  font-size: 1.6rem;
   font-weight: 700;
 }
 
 .pts-radioMultipleWithInfo2-container label {
-  padding-top: 2px;
+  padding-top: 0.2rem;
 }
 
 .pts-radio-collapse {
@@ -192,11 +206,11 @@ div.pts-root-question:last-child {
   display: grid;
   text-align: left;
   grid-template-columns: 5% 90% 5%;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .pts-radio-collapse-button-container.open {
-  border-radius: 8px 8px 0 0;
+  border-radius: 0.8rem 0.8rem 0 0;
 }
 
 .pts-radio-collapse-button-container input {
@@ -308,6 +322,15 @@ div.pts-root-question:last-child {
   margin-top: 0.2rem;
 }
 
+/*-------- INFO ONLY-------- */
+.pts-root-question:has(.pts-textbody-createspace) {
+  max-width: 100%;
+}
+
+.pts-root-question.pts-InfoOnly-container {
+  max-width: auto;
+}
+
 /*-------- CHECKBOX GROUP-------- */
 
 .pts-checkboxGroup-options {

package/src/css/styles.css

@@ -64,6 +64,7 @@
   border: 0;
 }
 
+
 select:focus-visible,
 button:focus-visible,
 a:focus-visible,
@@ -114,38 +115,13 @@ input:focus-visible:-webkit-autofill {
   box-shadow: 0 0 0 0px #000 !important;
 }
 
-.pts-secondary-button {
-  display: inline-flex;
-  align-items: center;
-  background: none;
-  margin: 0;
-  font: inherit;
-  text-align: inherit;
-  line-height: normal;
-  cursor: pointer;
-  outline: none;
-  white-space: nowrap;
-  color: var(--action);
-  padding: 0.8rem 2rem;
-  border: 2px solid var(--main);
-  border-radius: 0.8rem;
-}
-
-.pts-secondary-button:hover {
-  border-color: var(--action);
-}
-
-.secondary_icon {
-  padding-right: 0.6rem;
-}
-
 /* ---------- COOKIE BANNER ---------- */
 
 .pts-cookieBanner {
   position: relative;
   top: 0;
   left: 0;
-  padding: 1.5rem 2rem;
+  padding: 15px 20px;
   background: #eaf1f9;
   border-bottom: 4px solid var(--action);
   z-index: 9999;
@@ -162,7 +138,7 @@ input:focus-visible:-webkit-autofill {
 
 .pts-cookieBanner p {
   line-height: 2.4rem;
-  margin: 0 0 1.5rem 0;
+  margin: 0 0 15px 0;
 }
 .pts-cookieBanner-Links {
   margin-bottom: 1.6rem;
@@ -181,7 +157,7 @@ input:focus-visible:-webkit-autofill {
   min-width: 140px;
   text-align: center;
   font-size: 1.4rem;
-  padding: 0.8rem 1.5rem;
+  padding: 8px 15px;
   background-color: var(--action);
   border: 2px solid var(--action);
   color: white;
@@ -221,7 +197,7 @@ input:focus-visible:-webkit-autofill {
 .pts-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 7rem;
+  padding: 0px 70px;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -230,12 +206,10 @@ input:focus-visible:-webkit-autofill {
 .pts-header-content {
   width: 100%;
   display: flex;
-  background-color: var(--background);
 }
 
 .pts-header-logo-container {
   height: 4rem;
-  background: var(--main);
 }
 
 .pts-header-logo svg {
@@ -248,13 +222,22 @@ input:focus-visible:-webkit-autofill {
   justify-content: flex-end;
   width: 100%;
   align-items: flex-end;
-  margin-bottom: -1.6rem;
-  background: var(--main);
+}
+
+.pts-languageButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: transparent;
+  color: var(--action);
+  cursor: pointer;
+  font-size: 1.6rem;
 }
 
 .languageIcon {
   position: relative;
-  margin-top: 0.4rem;
+  margin-top: 0.3rem;
   padding-right: 0.6rem;
   top: 0.01rem;
 }
@@ -264,12 +247,16 @@ input:focus-visible:-webkit-autofill {
   height: 1.6rem;
 }
 
+.pts-languageButton-text:hover {
+  text-decoration: underline 0.2rem;
+}
+
 /**Header with navigation**/
 
 .pts-navigation-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 0.7rem;
+  padding: 0px 70px;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -311,10 +298,6 @@ input:focus-visible:-webkit-autofill {
   bottom: -1px;
 }
 
-.pts-site-headline {
-  margin-bottom: -1.6rem;
-}
-
 .pts-navigation-header-nav-container .pts-open-icon {
   position: relative;
   top: 4px;
@@ -339,10 +322,18 @@ input:focus-visible:-webkit-autofill {
   width: 100%;
   align-items: flex-end;
   height: 5rem;
-  margin-bottom: -1.6rem;
 }
 
 .pts-navigation-header-nav-container button {
+  background: none;
+  line-height: 2.4rem;
+  text-decoration-skip-ink: none;
+  border: none;
+  color: var(--action);
+  font-size: 1.6rem;
+  padding: 0;
+  cursor: pointer;
+  width: 13rem;
   z-index: 900;
 }
 
@@ -396,7 +387,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-link-expand-button {
-  all: unset;
+  all:unset;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -408,7 +399,7 @@ input:focus-visible:-webkit-autofill {
   padding-left: 3.6rem;
   display: flex;
   align-items: flex-end;
-  gap: 1.8rem;
+  gap: 18px;
 }
 
 .pts-sub-navigation-list {
@@ -438,6 +429,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-close-button {
+  border: none;
   color: var(--action);
   background-color: var(--main);
   display: flex;
@@ -535,6 +527,7 @@ input:focus-visible:-webkit-autofill {
   flex-shrink: 0;
   margin-right: 1.6rem;
 }
+
 .pts-textbody-alerttext {
   margin-top: 0;
 }
@@ -542,6 +535,7 @@ input:focus-visible:-webkit-autofill {
   margin-bottom: 3.6rem;
 }
 
+
 /* ---------- TEXT HEADLINE AND BODY ---------- */
 
 .pts-textHeadlineAndBody-container .notFirstInList {
@@ -558,7 +552,7 @@ input:focus-visible:-webkit-autofill {
 
 /* ---------- OptionTextBody ---------- */
 
-.pts-optionTextBody-container {
+.pts-optionTextBody-container{
   margin-top: 1.6rem;
 }
 
@@ -680,12 +674,13 @@ input:focus-visible:-webkit-autofill {
   border-radius: 8px 8px 0 0;
 }
 
-.pts-collapse-open-close-icon svg {
+.pts-collapse-open-close-icon svg{
   width: 2.4rem;
   height: 2.4rem;
   position: relative;
   top: 3px;
 }
+  
 
 .pts-collapse-button .pts-open-close-icon svg {
   width: 2.4rem;
@@ -759,8 +754,8 @@ input:focus-visible:-webkit-autofill {
   list-style: none;
 }
 
-.pts-linkList-container li:last-child {
-  padding-bottom: 0;
+.pts-linkList-container li:last-child{
+  padding-bottom:0 ;
 }
 
 /* ---------- GRANSKA-Sidan ---------- */
@@ -1011,18 +1006,6 @@ input:focus-visible:-webkit-autofill {
   box-sizing: border-box;
 }
 
-.pts-footer-linkList .pts-secondary-button {
-  position: relative;
-  color: var(--background);
-  border-color: var(--background-second);
-  margin-left: 1.6rem;
-  top: -0.5rem;
-}
-
-.pts-footer-linkList .pts-secondary-button:hover {
-  border-color: var(--background);
-}
-
 /* ---------- MODAL ---------- */
 
 .pts-modal-overlay {
@@ -1075,28 +1058,37 @@ input:focus-visible:-webkit-autofill {
     transform: rotate(360deg);
   }
 }
+
 /* ---------- ALERT IN TEXT ---------- */
+
 .pts-alertInText-container {
   display: flex;
   width: 100%;
   justify-content: flex-start;
 }
+
 .pts-alertInText-left {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 10px;
+  gap: 10rem;
   align-self: stretch;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
   border: 1px solid var(--alertintext);
   background-color: var(--alertintext);
-  padding: 8px;
-  padding-top: 16px;
+  padding: 0.8rem;
+  padding-top: 1.2rem;
+}
+
+.pts-alertInText-left svg {
+  height: 1.6rem;
+  width: 1.8rem;
 }
+
 .pts-alertInText-right {
   display: flex;
-  padding: 0 1.6rem;
+  padding: 1.6rem 1.6rem 0 1.6rem;
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
@@ -1108,10 +1100,6 @@ input:focus-visible:-webkit-autofill {
 
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
-.secondary_icon {
-  padding-right: 0.6rem;
-}
-
 .cleanPadding {
   padding: 0;
 }
@@ -1134,12 +1122,12 @@ input:focus-visible:-webkit-autofill {
   border: 0;
 }
 
+
 .hide-asterix .pts-root-mandatoryAsterisk {
   display: none;
 }
 
-[hidden],
-.hidden {
+[hidden],.hidden {
   display: none;
 }