optimized-react-component-library-xyz123 2.12.4 → 2.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.12.4",
+  "version": "2.12.7",
   "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,6 +20,14 @@
     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;
@@ -372,16 +380,14 @@
     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;
@@ -464,7 +470,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);
   }
 
@@ -517,7 +523,8 @@
     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);
   }
 

package/src/css/mobileView.css

@@ -34,12 +34,13 @@
   .pts-navigation-header-nav-container {
     align-items: center;
     justify-content: center;
-    height: 48px;
+    height: 4.8rem;
+    gap: 0.6rem;
   }
 
-  .pts-navigation-header-nav-container button {
+  /* todo .pts-navigation-header-nav-container button {
     width: 100%;
-  }
+  }*/
 
   .pts-navigation-close-button {
     align-items: center;
@@ -116,6 +117,11 @@
     padding-top: 0;
   }
 
+  .pts-footer-linkList .pts-secondary-button {
+    margin-left: unset;
+    border-color: var(--background);
+  }
+
   .pts-footer-linkList a span {
     padding: 0;
   }
@@ -261,7 +267,7 @@
     margin-right: 1.6rem;
     margin-top: 1.6rem;
   }
- /*****Questions*******/
+  /*****Questions*******/
   .pts-textArea-container textarea {
     width: 100%;
     box-sizing: border-box;

package/src/css/styles.css

@@ -64,7 +64,6 @@
   border: 0;
 }
 
-
 select:focus-visible,
 button:focus-visible,
 a:focus-visible,
@@ -115,13 +114,38 @@ 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(--background);
+  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: 15px 20px;
+  padding: 1.5rem 2rem;
   background: #eaf1f9;
   border-bottom: 4px solid var(--action);
   z-index: 9999;
@@ -132,13 +156,13 @@ input:focus-visible:-webkit-autofill {
   display: flex;
   flex-direction: column;
   justify-self: center;
-  max-width: 860px;
+  max-width: 8.6rem;
   margin: 1.6rem 0;
 }
 
 .pts-cookieBanner p {
   line-height: 2.4rem;
-  margin: 0 0 15px 0;
+  margin: 0 0 1.5rem 0;
 }
 .pts-cookieBanner-Links {
   margin-bottom: 1.6rem;
@@ -157,7 +181,7 @@ input:focus-visible:-webkit-autofill {
   min-width: 140px;
   text-align: center;
   font-size: 1.4rem;
-  padding: 8px 15px;
+  padding: 0.8rem 1.5rem;
   background-color: var(--action);
   border: 2px solid var(--action);
   color: white;
@@ -197,7 +221,7 @@ input:focus-visible:-webkit-autofill {
 .pts-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 70px;
+  padding: 0px 7rem;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -224,17 +248,6 @@ input:focus-visible:-webkit-autofill {
   align-items: flex-end;
 }
 
-.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.3rem;
@@ -256,7 +269,7 @@ input:focus-visible:-webkit-autofill {
 .pts-navigation-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 70px;
+  padding: 0px 0.7rem;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -325,15 +338,6 @@ input:focus-visible:-webkit-autofill {
 }
 
 .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;
 }
 
@@ -387,7 +391,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-link-expand-button {
-  all:unset;
+  all: unset;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -399,7 +403,7 @@ input:focus-visible:-webkit-autofill {
   padding-left: 3.6rem;
   display: flex;
   align-items: flex-end;
-  gap: 18px;
+  gap: 1.8rem;
 }
 
 .pts-sub-navigation-list {
@@ -429,7 +433,6 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-close-button {
-  border: none;
   color: var(--action);
   background-color: var(--main);
   display: flex;
@@ -550,7 +553,7 @@ input:focus-visible:-webkit-autofill {
 
 /* ---------- OptionTextBody ---------- */
 
-.pts-optionTextBody-container{
+.pts-optionTextBody-container {
   margin-top: 1.6rem;
 }
 
@@ -672,13 +675,12 @@ 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;
@@ -752,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 ---------- */
@@ -1089,6 +1091,22 @@ input:focus-visible:-webkit-autofill {
 
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
+.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);
+}
+
+.secondary_icon {
+  padding-right: 0.6rem;
+}
+
 .cleanPadding {
   padding: 0;
 }
@@ -1111,12 +1129,12 @@ input:focus-visible:-webkit-autofill {
   border: 0;
 }
 
-
 .hide-asterix .pts-root-mandatoryAsterisk {
   display: none;
 }
 
-[hidden],.hidden {
+[hidden],
+.hidden {
   display: none;
 }