optimized-react-component-library-xyz123 2.2.16 → 2.2.18

package/package.json

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

package/src/css/questions.css

@@ -157,6 +157,68 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
+
+/****RADIO MULTIPLE WITH INFO*/
+.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

@@ -10,12 +10,12 @@
   --error: #8e0039;
   --main: #ffffff;
   --info: #545454;
-  --alertintext: #234b96;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
   --background-third: #414141;
 }
 
+
 #main-content {
   padding-top: 3.6rem;
   padding-bottom: 6.4rem;
@@ -248,12 +248,9 @@ input:focus-visible:-webkit-autofill {
 }
 
 /* ---------- TextBODY ---------- */
-.pts-textBody-container {
-  margin: 0;
-}
+
 .pts-textBody-container p {
   margin-bottom: 1.6rem;
-  margin-top: 0;
 }
 
 .MoreInfoIcon {
@@ -289,9 +286,6 @@ input:focus-visible:-webkit-autofill {
   flex-shrink: 0;
   margin-right: 1.6rem;
 }
-.pts-alerttext-in-textbody {
-  margin-top: 3.6rem;
-}
 
 /* ---------- TEXT HEADLINE AND BODY ---------- */
 
@@ -700,37 +694,6 @@ 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;
-  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;
-}
-.pts-alertInText-right {
-  display: flex;
-  padding: 1.6rem;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border: 1px solid var(--alertintext);
-  color: var(--text);
-}
-
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
 .cleanPadding {
@@ -754,3 +717,7 @@ input:focus-visible:-webkit-autofill {
   white-space: nowrap;
   border: 0;
 }
+
+
+
+