optimized-react-component-library-xyz123 2.7.1 → 2.8.2

package/package.json

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

@@ -310,6 +310,20 @@
     background-color: var(--dark-action);
   }
 
+  /* ---------- RADIO MULTIPLE WHITH INFO 2 ---------- */
+
+  .pts-radioMultipleWithInfo2-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'] {
@@ -492,7 +506,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-modal-overlay, .pts-navigation-overlay {
     background-color: rgba(255, 255, 255, 0.5);
   }
 

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-radioMultipleWithInfo2-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-radioMultipleWithInfo2-container input[type='radio']:checked::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -150,12 +151,86 @@ div.pts-root-question:last-child {
   background-color: var(--action);
 }
 
-.pts-radioMultiple-container label {
+.pts-radioMultiple-container label,
+.pts-radioMultipleWithInfo2-container label {
   position: relative;
   flex: 1;
   cursor: pointer;
 }
 
+/****RADIO MULTIPLE WITH INFO*/
+
+.pts-radioWithInfo-sub-headline {
+  margin-block-start: 3.6rem;
+  margin-block-end: 1.6rem;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.pts-radioMultipleWithInfo2-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.6rem 1.6rem;
+  padding-bottom: 1.5rem;
+  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;
+  padding-bottom: 1px;
+}
+
+.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

@@ -384,6 +384,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-link-expand-button {
+  all:unset;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -727,10 +728,14 @@ input:focus-visible:-webkit-autofill {
   padding: 0;
 }
 .pts-linkList-container li {
-  padding: 6px;
+  padding-bottom: 16px;
   list-style: none;
 }
 
+.pts-linkList-container li:last-child{
+  padding-bottom:0 ;
+}
+
 /* ---------- GRANSKA-Sidan ---------- */
 .pts-editPreviewLink-container {
   display: flex;
@@ -1086,11 +1091,12 @@ input:focus-visible:-webkit-autofill {
   border: 0;
 }
 
+
 .hide-asterix .pts-root-mandatoryAsterisk {
   display: none;
 }
 
-[hidden] {
+[hidden],.hidden {
   display: none;
 }