optimized-react-component-library-xyz123 0.1.159 → 0.1.161

package/package.json

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

package/src/css/mobileView.css

@@ -166,9 +166,6 @@
     margin-top: 1.6rem;
   }
 
-  .pts-root-question{
-    width: auto;
-  }
   .pts-textArea-container textarea {
     width: 100%;
     box-sizing: border-box;

package/src/css/questions.css

@@ -1,4 +1,3 @@
-
 fieldset {
   border: none;
   padding: 0;
@@ -8,12 +7,12 @@ fieldset {
 .pts-root-question {
   display: flex;
   flex-direction: column;
-  width: 624px;
+  max-width: 624px;
 }
 
-div.pts-root-question:last-child{
-  padding-bottom: 0 ;
-  margin-bottom: 0 ;
+div.pts-root-question:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
 .pts-root-categoryDescription,
@@ -21,7 +20,7 @@ div.pts-root-question:last-child{
   margin-bottom: 3.6rem;
 }
 
-.pts-root-question{
+.pts-root-question {
   margin-bottom: 3.6rem;
 }
 
@@ -33,8 +32,8 @@ div.pts-root-question:last-child{
   cursor: pointer;
 }
 
-.pts-radio-option, 
-.pts-root-question legend  {
+.pts-radio-option,
+.pts-root-question legend {
   margin-bottom: 0.8rem;
 }
 
@@ -46,8 +45,6 @@ div.pts-root-question:last-child{
   line-height: 20px;
 }
 
-
-
 .pts-root-about {
   font-size: 1.4rem;
   color: var(--info);
@@ -95,7 +92,7 @@ div.pts-root-question:last-child{
   border: 0.2rem solid var(--error) !important;
 }
 
-.error-container{
+.error-container {
   padding: 3.6rem 0 0 0;
   margin: 0;
 }
@@ -115,7 +112,7 @@ div.pts-root-question:last-child{
 /* ---------- RADIO MULTIPLE ---------- */
 
 .pts-radioMultiple-container input[type='radio'] {
-  /*appearance: none;*/
+  appearance: none;
   width: 1.8rem;
   height: 1.8rem;
   border: 1.5px solid var(--info);
@@ -145,42 +142,65 @@ div.pts-root-question:last-child{
   cursor: pointer;
 }
 
-/* ---------- MULTIPLE CHECKBOXES ---------- */
+/* ---------- SINGLE CHECKBOX ---------- */
 
-.pts-checkboxGroup-options{
-  display: flex;
-}
+/* ---------- SINGLE CHECKBOX ---------- */
+
+.pts-singleCheckbox-container input[type='checkbox'] {
+  -webkit-appearance: none;
 
-.pts-multipleCheckboxes-container input[type='checkbox'],
-.pts-checkboxGroup-container input[type='checkbox']{
-  appearance: none;
   width: 1.8rem;
   height: 1.8rem;
   margin-right: 0.8rem;
   flex-shrink: 0;
+
   background-color: var(--main);
   border: 0.15rem solid var(--info);
   border-radius: 0.2rem;
+
   cursor: pointer;
 }
 
-.pts-multipleCheckboxes-container input[type='checkbox']:checked,
-.pts-checkboxGroup-container input[type='checkbox']:checked {
+.pts-singleCheckbox-container input[type='checkbox']:checked {
   background-color: var(--action);
   border: none;
   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-checkboxGroup-container label{
+.pts-singleCheckbox-container label {
   cursor: pointer;
   margin: 0;
   padding-top: 0.1rem;
+  margin-top: 0.2rem;
+}
+
+/* ---------- MULTIPLE CHECKBOXES ---------- */
+
+.pts-multipleCheckboxes-container input[type='checkbox'] {
+  -webkit-appearance: none;
+
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.8rem;
+  flex-shrink: 0;
+
+  background-color: var(--main);
+  border: 0.15rem solid var(--info);
+  border-radius: 0.2rem;
+
+  cursor: pointer;
 }
 
-.pts-checkboxGroup-container label{
-    padding-top: 0.3rem;
-    line-height: 20px;
+.pts-multipleCheckboxes-container input[type='checkbox']:checked {
+  background-color: var(--action);
+  border: none;
+  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 {
+  cursor: pointer;
+  margin: 0;
+  padding-top: 0.1rem;
 }
 
 .pts-multipleCheckboxes-container ul {
@@ -196,16 +216,14 @@ div.pts-root-question:last-child{
   cursor: pointer;
 }
 
-.pts-multipleCheckboxes-container li label,
-.pts-checkboxGroup-container {
+.pts-multipleCheckboxes-container li label {
   flex: 1;
   margin-top: 0.2rem;
 }
 
-
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
-.pts-textField-container{
+.pts-textField-container {
   margin-top: 8px;
 }
 
@@ -222,11 +240,11 @@ div.pts-root-question:last-child{
 }
 
 .pts-textField-container label {
-    margin-bottom: 0.8rem;
+  margin-bottom: 0.8rem;
 }
 
 .pts-question-hasAbout label {
-    margin-bottom: 0.3rem;
+  margin-bottom: 0.3rem;
 }
 
 /* ---------- TEXTAREA ---------- */
@@ -259,11 +277,6 @@ div.pts-root-question:last-child{
   width: 100%;
 }
 
-
-
-
-
-
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
@@ -932,7 +945,7 @@ div.pts-root-question:last-child{
 
 .addFilesMandatory {
   margin-bottom: 16px;
-     margin-top: 0px;
+  margin-top: 0px;
 }
 
 .addFilesMandatory.error {