@npm_leadtech/legal-lib-components 5.48.9 → 5.50.0

package/dist/src/components/atoms/RemoveButton/RemoveButton.styled.js

@@ -7,7 +7,7 @@ export const RemoveButtonStyled = styled.section `
       display: inline-block;
       color: var(--error-main);
 
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: all 0.3s ease;
 
       label {
@@ -16,7 +16,7 @@ export const RemoveButtonStyled = styled.section `
         align-items: center;
         position: relative;
         border: 1px solid var(--error-main);
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         cursor: pointer;
         padding: 0.75rem 1rem;
       }
@@ -32,7 +32,7 @@ export const RemoveButtonStyled = styled.section `
     left: -9999px;
 
     &:checked + label {
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
     }
 
     & + label {

package/dist/src/components/atoms/RemoveButton/RemoveButton.styled.ts

@@ -8,7 +8,7 @@ export const RemoveButtonStyled = styled.section`
       display: inline-block;
       color: var(--error-main);
 
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: all 0.3s ease;
 
       label {
@@ -17,7 +17,7 @@ export const RemoveButtonStyled = styled.section`
         align-items: center;
         position: relative;
         border: 1px solid var(--error-main);
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         cursor: pointer;
         padding: 0.75rem 1rem;
       }
@@ -33,7 +33,7 @@ export const RemoveButtonStyled = styled.section`
     left: -9999px;
 
     &:checked + label {
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
     }
 
     & + label {

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.styled.js

@@ -6,9 +6,9 @@ export const ReviewKeyFactsResultRatafiaStyled = styled.section `
       display: flex;
       justify-content: start;
       align-items: center;
-      gap: 1rem;
+      gap: var(--global-gap);
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: var(--others-white);
 
       &__question {
@@ -34,7 +34,7 @@ export const ReviewKeyFactsResultRatafiaStyled = styled.section `
           flex: 1 0 0;
 
           border: none;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           background: var(--neutral-neutral-6);
 
           cursor: pointer;

package/dist/src/components/atoms/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.styled.ts

@@ -7,9 +7,9 @@ export const ReviewKeyFactsResultRatafiaStyled = styled.section`
       display: flex;
       justify-content: start;
       align-items: center;
-      gap: 1rem;
+      gap: var(--global-gap);
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: var(--others-white);
 
       &__question {
@@ -35,7 +35,7 @@ export const ReviewKeyFactsResultRatafiaStyled = styled.section`
           flex: 1 0 0;
 
           border: none;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           background: var(--neutral-neutral-6);
 
           cursor: pointer;

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.js

@@ -74,7 +74,7 @@ export const SearchSelectStyled = styled.div `
       flex-direction: column-reverse;
       margin-bottom: 1rem;
       position: relative;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: box-shadow 0.3s ease;
       box-shadow: 0 0 0 1px var(--neutral-neutral-3);
       background-color: var(--neutral-neutral-5);
@@ -101,7 +101,7 @@ export const SearchSelectStyled = styled.div `
       }
 
       .css-26l3qy-menu {
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         box-shadow: var(--box-shadow-container);
         font-size: 0.875rem;
       }

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.ts

@@ -75,7 +75,7 @@ export const SearchSelectStyled = styled.div`
       flex-direction: column-reverse;
       margin-bottom: 1rem;
       position: relative;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: box-shadow 0.3s ease;
       box-shadow: 0 0 0 1px var(--neutral-neutral-3);
       background-color: var(--neutral-neutral-5);
@@ -102,7 +102,7 @@ export const SearchSelectStyled = styled.div`
       }
 
       .css-26l3qy-menu {
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         box-shadow: var(--box-shadow-container);
         font-size: 0.875rem;
       }

package/dist/src/components/atoms/ShowMoreBox/ShowMoreBox.styled.js

@@ -4,7 +4,7 @@ export const ShowMoreBoxStyled = styled.div `
   padding: 1rem;
   flex-direction: column;
   gap: var(--global-gap);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   background: var(--neutral-neutral-5);
 
   &.show-more-box {

package/dist/src/components/atoms/ShowMoreBox/ShowMoreBox.styled.ts

@@ -5,7 +5,7 @@ export const ShowMoreBoxStyled = styled.div`
   padding: 1rem;
   flex-direction: column;
   gap: var(--global-gap);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   background: var(--neutral-neutral-5);
 
   &.show-more-box {

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.js

@@ -7,7 +7,7 @@ export const StepRatafiaCardStyled = styled.div `
   gap: 0.5rem;
   align-self: stretch;
 
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: var(--neutral-neutral-6);
 
   .step-ratafia-card {

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.ts

@@ -8,7 +8,7 @@ export const StepRatafiaCardStyled = styled.div`
   gap: 0.5rem;
   align-self: stretch;
 
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: var(--neutral-neutral-6);
 
   .step-ratafia-card {

package/dist/src/components/atoms/Tag/Tag.styled.js

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 export const TagStyled = styled.div `
   align-items: center;
   background: var(--secondary-main-light-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   display: flex;
-  gap: 4px;
+  gap: 0.25rem;
   justify-content: center;
-  padding: 4px;
+  padding: 0.25rem;
   width: fit-content;
 
   .tag {

package/dist/src/components/atoms/Tag/Tag.styled.ts

@@ -3,11 +3,11 @@ import styled from 'styled-components'
 export const TagStyled = styled.div`
   align-items: center;
   background: var(--secondary-main-light-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   display: flex;
-  gap: 4px;
+  gap: 0.25rem;
   justify-content: center;
-  padding: 4px;
+  padding: 0.25rem;
   width: fit-content;
 
   .tag {

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.styled.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 export const TagRatafiaItemStyled = styled.div `
   background: var(--primary-main-light-6);
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   display: flex;
   width: max-content;
   justify-content: center;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.25rem
   padding: 0.25rem 0.5rem;
 
   &.tag-esignature-item {

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.styled.ts

@@ -2,12 +2,12 @@ import styled from 'styled-components'
 
 export const TagRatafiaItemStyled = styled.div`
   background: var(--primary-main-light-6);
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   display: flex;
   width: max-content;
   justify-content: center;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.25rem
   padding: 0.25rem 0.5rem;
 
   &.tag-esignature-item {

package/dist/src/components/atoms/TextArea/TextArea.styled.js

@@ -50,7 +50,7 @@ export const TextAreaStyled = styled.div `
     textarea {
       color: var(--neutral-neutral-2);
       background-color: var(--neutral-neutral-6);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       padding: 0.75rem 0 0.75rem 0.75rem;
       font-size: 0.875rem;
       height: 10rem;

package/dist/src/components/atoms/TextArea/TextArea.styled.ts

@@ -51,7 +51,7 @@ export const TextAreaStyled = styled.div`
     textarea {
       color: var(--neutral-neutral-2);
       background-color: var(--neutral-neutral-6);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       padding: 0.75rem 0 0.75rem 0.75rem;
       font-size: 0.875rem;
       height: 10rem;

package/dist/src/components/atoms/Toggle/Toggle.styled.js

@@ -37,8 +37,8 @@ export const ToggleStyled = styled.div `
       content: '';
       height: 26px;
       width: 26px;
-      left: 4px;
-      bottom: 4px;
+      left: 0.25rem;
+      bottom: 0.25rem;
       background-color: var(--others-white);
       transition: 0.4s;
       border-radius: 50%;

package/dist/src/components/atoms/Toggle/Toggle.styled.ts

@@ -38,8 +38,8 @@ export const ToggleStyled = styled.div`
       content: '';
       height: 26px;
       width: 26px;
-      left: 4px;
-      bottom: 4px;
+      left: 0.25rem;
+      bottom: 0.25rem;
       background-color: var(--others-white);
       transition: 0.4s;
       border-radius: 50%;

package/dist/src/components/atoms/Tooltip/Tooltip.scss

@@ -3,7 +3,7 @@
 
 .tippy-box {
   background-color: var(--others-white);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   font-size: 16px;
   line-height: 1.4;
   white-space: normal;

package/dist/src/components/atoms/TopBar/TopBar.styled.js

@@ -46,7 +46,7 @@ export const TopBarStyled = styled.div `
         }
 
         img {
-          margin-right: 8px;
+          margin-right: 0.5rem;
           display: inherit;
         }
       }

package/dist/src/components/atoms/TopBar/TopBar.styled.ts

@@ -47,7 +47,7 @@ export const TopBarStyled = styled.div`
         }
 
         img {
-          margin-right: 8px;
+          margin-right: 0.5rem;
           display: inherit;
         }
       }

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.styled.js

@@ -2,18 +2,18 @@ import styled from 'styled-components';
 export const TopBarMobileStyled = styled.div `
   background-color: var(--neutral-neutral-5);
   display: flex;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
   justify-content: space-between;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-container);
   font-size: 14px;
   line-height: 18px;
   letter-spacing: -0.3px;
   position: fixed;
-  top: 8px;
-  left: 8px;
-  right: 8px;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
 
   &.top-bar-mobile {
     &.fade-In {
@@ -42,7 +42,7 @@ export const TopBarMobileStyled = styled.div `
       }
 
       img {
-        margin-right: 8px;
+        margin-right: 0.5rem;
       }
     }
   }

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.styled.ts

@@ -3,18 +3,18 @@ import styled from 'styled-components'
 export const TopBarMobileStyled = styled.div`
   background-color: var(--neutral-neutral-5);
   display: flex;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
   justify-content: space-between;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-container);
   font-size: 14px;
   line-height: 18px;
   letter-spacing: -0.3px;
   position: fixed;
-  top: 8px;
-  left: 8px;
-  right: 8px;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
 
   &.top-bar-mobile {
     &.fade-In {
@@ -43,7 +43,7 @@ export const TopBarMobileStyled = styled.div`
       }
 
       img {
-        margin-right: 8px;
+        margin-right: 0.5rem;
       }
     }
   }

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardList.styled.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 export const ActionButtonHeaderRatafiaCardListStyled = styled.div `
   display: flex;
   align-items: center;
-  gap: 1rem;
-  border-radius: 4px 4px 0 0;
+  gap: var(--global-gap);
+  border-radius: var(--s-border-radius) var(--s-border-radius) 0 0;
 `;

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardList.styled.ts

@@ -3,6 +3,6 @@ import styled from 'styled-components'
 export const ActionButtonHeaderRatafiaCardListStyled = styled.div`
   display: flex;
   align-items: center;
-  gap: 1rem;
-  border-radius: 4px 4px 0 0;
+  gap: var(--global-gap);
+  border-radius: var(--s-border-radius) var(--s-border-radius) 0 0;
 `

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAs.styled.js

@@ -2,13 +2,13 @@ import styled from 'styled-components';
 export const AlsoKnownAsStyled = styled.div `
   display: flex;
   align-items: center;
-  gap: calc(1rem / 2);
+  gap: 0.5rem;
   flex-wrap: wrap;
 
   .title {
     display: flex;
     align-items: center;
-    gap: calc(1rem / 4);
+    gap: 0.25rem;
     flex-wrap: nowrap;
 
     svg {

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAs.styled.ts

@@ -3,13 +3,13 @@ import styled from 'styled-components'
 export const AlsoKnownAsStyled = styled.div`
   display: flex;
   align-items: center;
-  gap: calc(1rem / 2);
+  gap: 0.5rem;
   flex-wrap: wrap;
 
   .title {
     display: flex;
     align-items: center;
-    gap: calc(1rem / 4);
+    gap: 0.25rem;
     flex-wrap: nowrap;
 
     svg {

package/dist/src/components/molecules/Article/Article.styled.js

@@ -4,7 +4,7 @@ export const ArticleStyled = styled.div `
   display: flex;
   flex-flow: row wrap;
   flex: 1 1 0;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-small);
   max-width: $md;
   margin: 1rem 0;

package/dist/src/components/molecules/Article/Article.styled.ts

@@ -5,7 +5,7 @@ export const ArticleStyled = styled.div`
   display: flex;
   flex-flow: row wrap;
   flex: 1 1 0;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-small);
   max-width: $md;
   margin: 1rem 0;

package/dist/src/components/molecules/BaseBoxList/BaseBoxList.styled.js

@@ -3,7 +3,7 @@ export const BaseBoxListStyled = styled.div `
   display: block;
   .base-box {
     &:first-child:not(:last-child) {
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--s-border-radius) var(--s-border-radius) 0 0;
     }
 
     &:not(:last-child):not(:first-child) {
@@ -13,7 +13,7 @@ export const BaseBoxListStyled = styled.div `
 
     &:last-child:not(:first-child) {
       border-top: none;
-      border-radius: 0 0 4px 4px;
+      border-radius: 0 0 var(--s-border-radius) var(--s-border-radius);
     }
   }
 

package/dist/src/components/molecules/BaseBoxList/BaseBoxList.styled.ts

@@ -4,7 +4,7 @@ export const BaseBoxListStyled = styled.div`
   display: block;
   .base-box {
     &:first-child:not(:last-child) {
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--s-border-radius) var(--s-border-radius) 0 0;
     }
 
     &:not(:last-child):not(:first-child) {
@@ -14,7 +14,7 @@ export const BaseBoxListStyled = styled.div`
 
     &:last-child:not(:first-child) {
       border-top: none;
-      border-radius: 0 0 4px 4px;
+      border-radius: 0 0 var(--s-border-radius) var(--s-border-radius);
     }
   }
 

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.styled.js

@@ -6,7 +6,7 @@ export const BenefitRatafiaCardListStyled = styled.div `
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   @media ${device.laptop} {
     flex-direction: row;

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.styled.ts

@@ -7,7 +7,7 @@ export const BenefitRatafiaCardListStyled = styled.div`
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   @media ${device.laptop} {
     flex-direction: row;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.styled.js

@@ -36,8 +36,8 @@ export const BottomOverlayStyled = styled.div `
 
     &__nav {
       background: var(--others-white);
-      border-top-left-radius: var(--global-border-radius);
-      border-top-right-radius: var(--global-border-radius);
+      border-top-left-radius: var(--s-border-radius);
+      border-top-right-radius: var(--s-border-radius);
       bottom: 0;
       position: absolute;
       transform: translateY(100%);
@@ -60,7 +60,7 @@ export const BottomOverlayStyled = styled.div `
         &:after {
           content: '';
           background: var(--neutral-neutral-3);
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
           display: block;
           height: 0.25rem;
           margin: 0 auto;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.styled.ts

@@ -37,8 +37,8 @@ export const BottomOverlayStyled = styled.div`
 
     &__nav {
       background: var(--others-white);
-      border-top-left-radius: var(--global-border-radius);
-      border-top-right-radius: var(--global-border-radius);
+      border-top-left-radius: var(--s-border-radius);
+      border-top-right-radius: var(--s-border-radius);
       bottom: 0;
       position: absolute;
       transform: translateY(100%);
@@ -61,7 +61,7 @@ export const BottomOverlayStyled = styled.div`
         &:after {
           content: '';
           background: var(--neutral-neutral-3);
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
           display: block;
           height: 0.25rem;
           margin: 0 auto;

package/dist/src/components/molecules/BoxForm/BoxForm.styled.js

@@ -2,7 +2,7 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const BoxFormStyled = styled.div `
   background: var(--others-white);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-container);
   padding-left: 1.5rem;
   padding-right: 1.5rem;

package/dist/src/components/molecules/BoxForm/BoxForm.styled.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 export const BoxFormStyled = styled.div`
   background: var(--others-white);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-container);
   padding-left: 1.5rem;
   padding-right: 1.5rem;

package/dist/src/components/molecules/ContactCardList/ContactCardList.styled.js

@@ -4,7 +4,7 @@ export const ContactCardListStyled = styled.div `
   display: flex;
   justify-content: center;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   @media ${device.laptop} {
     flex-direction: row;

package/dist/src/components/molecules/ContactCardList/ContactCardList.styled.ts

@@ -5,7 +5,7 @@ export const ContactCardListStyled = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   @media ${device.laptop} {
     flex-direction: row;

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBanner.styled.js

@@ -30,7 +30,7 @@ export const ContinueEditingBannerStyled = styled.div `
     &__wrapper {
       align-items: center;
       background: var(--neutral-main);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       display: flex;
       flex-direction: column;
       letter-spacing: -0.3px;

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBanner.styled.ts

@@ -31,7 +31,7 @@ export const ContinueEditingBannerStyled = styled.div`
     &__wrapper {
       align-items: center;
       background: var(--neutral-main);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       display: flex;
       flex-direction: column;
       letter-spacing: -0.3px;

package/dist/src/components/molecules/CountDownMessage/CountDownMessage.styled.js

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 export const CountDownMessageStyled = styled.div `
   &.count-down-message {
     text-align: center;
-    padding: 0 0 16px 0;
+    padding: 0 0 1rem 0;
 
     @media ${device['landscape-tablets']} {
-      padding: 8px 0 24px 0;
+      padding: 0.5rem 0 1.5rem 0;
       text-align: left;
     }
 
@@ -28,7 +28,7 @@ export const CountDownMessageStyled = styled.div `
       z-index: 1;
       left: 0;
       right: 0;
-      padding: 8px;
+      padding: 0.5rem;
     }
 
     .message-information {