optimized-react-component-library-xyz123 2.5.3 → 2.5.5

package/package.json

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

@@ -8,8 +8,6 @@
   --dark-orientation-active: #f4bf56;
   --dark-background-second: #200827;
   --dark-background-third: #747474;
-  --dark-alertintext: #adc7e5;
-  --dark-alertintext-text: #dc7d0a;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -69,6 +67,7 @@
     color: var(--dark-text);
   }
 
+
   /*--Navigation header / menu ----*/
 
   .pts-navigation-header-container {
@@ -76,74 +75,81 @@
   }
 
   .pts-navigation-header-logo-container,
-  .pts-navigation-header-headline-container {
-    border-color: var(--dark-background-third) !important;
+  .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 {
+ .pts-navigation-header-nav-container button svg path,
+ .pts-navigation-header-nav-container button svg line{
     color: var(--dark-text);
     fill: var(--dark-text);
     stroke: var(--dark-text);
   }
 
-  .pts-navigation-header-container svg path {
-    fill: var(--dark-text);
-  }
+.pts-navigation-header-container svg path {
+  fill: var(--dark-text);
+}
 
-  .pts-navigation-header-nav-container,
-  .pts-navigation-header-button-label {
-    background: var(--dark-background-second);
-    color: var(--dark-text);
-  }
+  
+.pts-navigation-header-nav-container,
+.pts-navigation-header-button-label {
+  background: var(--dark-background-second);
+  color: var(--dark-text);
+}
 
-  .pts-expand-icon svg rect {
-    fill: var(--dark-action);
-  }
+.pts-expand-icon svg rect{
+  fill: var(--dark-action);
+}
 
-  .pts-contract-icon svg rect {
-    fill: var(--dark-orientation-active);
-  }
 
-  .pts-navigation-close-text {
-    color: var(--dark-text);
-  }
+.pts-contract-icon svg rect{
+  fill: var(--dark-orientation-active);
+}
 
-  .pts-navigation-close-button {
-    background: var(--dark-main);
-    color: var(--dark-text);
-  }
 
-  .pts-navigation-close-button svg path {
-    stroke: var(--dark-text);
-  }
+.pts-navigation-close-text{
+  color: var(--dark-text);
+}
 
-  .pts-navigation-link-expand-button {
-    background-color: var(--dark-main);
-  }
+.pts-navigation-close-button{
+  background: var(--dark-main);
+  color: var(--dark-text);
+}
 
-  .pts-navigation-link-expand-button svg path {
-    stroke: var(--dark-main) !important;
-  }
+.pts-navigation-close-button svg path{
+  stroke: var(--dark-text);
+}
 
-  .pts-navigation-with-close-button,
-  .pts-navigation-menu-container,
-  .pts-navigation-button,
-  .pts-navigation-close-container,
-  .pts-sub-navigation-item,
-  .pts-sub-navigation-item a,
-  .pts-navigation-button > a {
-    background: var(--dark-main);
-    color: var(--dark-text);
-    border-color: var(--dark-background-third);
-  }
+.pts-navigation-link-expand-button{
+background-color: var(--dark-main);
+}
 
-  .pts-navigation-button a {
-    color: var(--dark-text);
-  }
+.pts-navigation-link-expand-button svg path{
+  stroke: var(--dark-main)!important;
+}
+
+.pts-navigation-with-close-button,
+.pts-navigation-menu-container,
+.pts-navigation-button,
+.pts-navigation-close-container,
+.pts-sub-navigation-item,
+.pts-sub-navigation-item a,
+.pts-navigation-button > a {
+  background: var(--dark-main);
+  color: var(--dark-text);
+  border-color: var(--dark-background-third);
+}
+
+.pts-navigation-button  a {
+
+  color: var(--dark-text);
+
+}
 
-  .pts-sub-navigation-container {
+.pts-sub-navigation-container {
     border-left: var(--dark-action) 5px solid;
-  }
+}
+
+
 
   /*-------MAIN CONTENT-------*/
   section,
@@ -165,6 +171,7 @@
   .MoreInfoIcon svg {
     background-color: var(--dark-action);
   }
+ 
 
   .pts-serviceHeadlineAndBody-container a svg path,
   .MoreInfoIcon svg path {
@@ -310,6 +317,20 @@
     background-color: var(--dark-action);
   }
 
+  /* ---------- RADIO MULTIPLE WHITH INFO ---------- */
+
+  .pts-radioMultipleWithInfo-container input[type='radio']:checked::before {
+    background-color: var(--dark-main);
+  }
+  
+  .pts-radio-collapse-button-container{
+    background-color: var(--dark-action);
+  }
+
+  .pts-radio-collapse-body.open {
+    border-color:var(--dark-action);
+  }
+
   /* ---------- MULTIPLE CHECKBOXES ---------- */
 
   .pts-multipleCheckboxes-container input[type='checkbox'] {
@@ -416,11 +437,11 @@
     stroke: #000000;
   }
 
-  /*---------- LINK STANDARD ------------*/
-  .pts-standard-link-icon svg {
+    /*---------- LINK STANDARD ------------*/
+ .pts-standard-link-icon svg {
     background-color: var(--dark-action);
   }
-  .pts-standard-link svg path {
+   .pts-standard-link svg path{
     fill: var(--dark-main);
     color: #000000;
   }
@@ -430,20 +451,20 @@
   }
 
   /*----------------- COLLAPSE -----------------*/
-  .pts-collapse-content {
-    color: var(--dark-text);
+   .pts-collapse-content{
+    color:var(--dark-text);
   }
 
   .pts-collapse-button {
     background-color: var(--dark-action);
-    color: var(--dark-main);
+    color:var(--dark-main);
   }
 
-  .pts-open-close-icon svg path {
+  .pts-open-close-icon svg path{
     fill: var(--dark-main);
   }
 
-  .pts-collapse-body.open {
+ .pts-collapse-body.open{
     border-color: var(--dark-info);
     background: var(--dark-main);
   }
@@ -496,26 +517,6 @@
     background-color: rgba(255, 255, 255, 0.5);
   }
 
-  /* ---------- ALERT IN TEXT ---------- */
-
-  .pts-alertInText-left {
-    border: 1px solid var(--dark-alertintext);
-    background-color: var(--dark-alertintext);
-  }
-  .pts-alertInText-left svg circle {
-    fill: var(--dark-background);
-  }
-  .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);
-  }
-
   /*-------------Autofill-----------*/
   input:autofill,
   input:autofill:hover,
@@ -533,4 +534,6 @@
   input:-moz-autofill {
     box-shadow: 0 0 0 1000px transparent inset !important;
   }
+
+
 }

package/src/css/mobileView.css

@@ -261,12 +261,20 @@
     margin-right: 1.6rem;
     margin-top: 1.6rem;
   }
-
+ /*****Questions*******/
   .pts-textArea-container textarea {
     width: 100%;
     box-sizing: border-box;
   }
 
+  .pts-radio-collapse-button-container {
+    align-items: start;
+    gap: 6px;
+    grid-template-columns: 5% 84% 5%;
+    padding-top: 1.6rem;
+    padding-bottom: 1rem;
+  }
+
   .inputContainer {
     margin-bottom: 1.6rem;
   }

package/src/css/questions.css

@@ -124,8 +124,8 @@ div.pts-root-question:last-child {
 }
 
 /* ---------- RADIO MULTIPLE ---------- */
-
-.pts-radioMultiple-container input[type='radio'] {
+.pts-radioMultiple-container input[type='radio'], 
+.pts-radioMultipleWithInfo-container input[type='radio'] {
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -138,7 +138,8 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-radioMultiple-container input[type='radio']:checked::before {
+.pts-radioMultiple-container input[type='radio']:checked::before,
+.pts-radioMultipleWithInfo-container input[type='radio']:checked::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -150,12 +151,79 @@ div.pts-root-question:last-child {
   background-color: var(--action);
 }
 
-.pts-radioMultiple-container label {
+.pts-radioMultiple-container label,
+.pts-radioMultipleWithInfo-container label{
   position: relative;
   flex: 1;
   cursor: pointer;
 }
 
+
+/****RADIO MULTIPLE WITH INFO*/
+.pts-radioMultipleWithInfo-container label{
+  padding-top: 2px;
+}
+
+.pts-radio-collapse {
+  position: relative;
+  width: 100%;
+  max-width: 62.4rem;
+  margin-bottom: 0.8rem;
+}
+
+.pts-radio-collapse-button-container {
+  background-color: var(--background);
+  color: var(--text);
+  cursor: pointer;
+  padding: 1.2rem 1.6rem;
+  border-radius: 8px;
+  outline: none;
+  display: grid;
+  text-align: left;
+  grid-template-columns: 5% 90% 5%;
+  align-items: center;
+}
+
+.pts-radio-collapse-button-container.open {
+  border-radius: 8px 8px 0 0;
+}
+
+.pts-radio-collapse-button-container input{
+  background-color: var(--main);
+}
+
+.pts-radio-collapse-button {
+  all:unset;
+  display: grid;
+  grid-template-columns:  95% 5%;
+  background-color: transparent;
+}
+
+
+.pts-radio-collapse-button svg path{
+  fill: var(--text);
+}
+
+.pts-radio-collapse-body {
+  position: relative;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
+}
+
+.pts-radio-collapse-body.open {
+  grid-template-rows: 1fr;
+  border: 2px solid var(--background);
+  border-top: none;
+  border-radius:0 0 8px 8px;
+  padding: 1.6rem;
+}
+
+.pts-radio-collapse-content {
+  overflow: hidden;
+ 
+}
+
 /* ---------- SINGLE CHECKBOX ---------- */
 
 .pts-singleCheckbox-row {

package/src/css/styles.css

@@ -1052,7 +1052,7 @@ input:focus-visible:-webkit-autofill {
 }
 .pts-alertInText-right {
   display: flex;
-  padding: 0 1.6rem;
+  padding: 1.6rem;
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
@@ -1086,6 +1086,7 @@ input:focus-visible:-webkit-autofill {
   border: 0;
 }
 
+
 .hide-asterix .pts-root-mandatoryAsterisk {
   display: none;
 }