@npm_leadtech/legal-lib-components 5.49.0 → 5.50.0

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

@@ -6,7 +6,7 @@ export const DisclaimerRatafiaStyled = styled.div `
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .disclaimer-ratafia {
     &__text-desktop {
@@ -31,7 +31,7 @@ export const DisclaimerRatafiaStyled = styled.div `
       padding: 0.5rem;
       gap: 0.25rem;
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
 
       @media ${device['portrait-tablets']} {
@@ -59,8 +59,8 @@ export const DisclaimerRatafiaStyled = styled.div `
         position: relative;
         color: var(--neutral-neutral-2);
         border: none;
-        padding: 8px;
-        border-radius: 4px;
+        padding: 0.5rem;
+        border-radius: var(--s-border-radius);
         @media ${device['portrait-tablets']} {
           margin-bottom: 0;
           padding: 0;
@@ -84,7 +84,7 @@ export const DisclaimerRatafiaStyled = styled.div `
     }
 
     &__legal-advice {
-      margin-bottom: 16px;
+      margin-bottom: 1rem;
     }
 
     &__disclaimer-fixed {
@@ -99,7 +99,7 @@ export const DisclaimerRatafiaStyled = styled.div `
       &:after {
         content: '';
         position: absolute;
-        top: 8px;
+        top: 0.5rem;
         left: calc(50% - 17px);
         border: 2px solid var(--neutral-neutral-3);
         border-radius: 6px;

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

@@ -7,7 +7,7 @@ export const DisclaimerRatafiaStyled = styled.div`
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .disclaimer-ratafia {
     &__text-desktop {
@@ -32,7 +32,7 @@ export const DisclaimerRatafiaStyled = styled.div`
       padding: 0.5rem;
       gap: 0.25rem;
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
 
       @media ${device['portrait-tablets']} {
@@ -60,8 +60,8 @@ export const DisclaimerRatafiaStyled = styled.div`
         position: relative;
         color: var(--neutral-neutral-2);
         border: none;
-        padding: 8px;
-        border-radius: 4px;
+        padding: 0.5rem;
+        border-radius: var(--s-border-radius);
         @media ${device['portrait-tablets']} {
           margin-bottom: 0;
           padding: 0;
@@ -85,7 +85,7 @@ export const DisclaimerRatafiaStyled = styled.div`
     }
 
     &__legal-advice {
-      margin-bottom: 16px;
+      margin-bottom: 1rem;
     }
 
     &__disclaimer-fixed {
@@ -100,7 +100,7 @@ export const DisclaimerRatafiaStyled = styled.div`
       &:after {
         content: '';
         position: absolute;
-        top: 8px;
+        top: 0.5rem;
         left: calc(50% - 17px);
         border: 2px solid var(--neutral-neutral-3);
         border-radius: 6px;

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

@@ -2,7 +2,7 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DocumentStatusStyled = styled.div `
   font-family: var(--font-sans);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid;
   display: flex;
   flex-flow: row wrap;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 export const DocumentStatusStyled = styled.div`
   font-family: var(--font-sans);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid;
   display: flex;
   flex-flow: row wrap;

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

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 export const DocumentTagStyled = styled.p `
   background: var(--others-white);
   border: 1px solid var(--neutral-neutral-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-2);
   font-size: 0.875rem;
   letter-spacing: -0.3px;
   line-height: 1.15rem;
-  padding: 4px 8px;
+  padding: 0.25rem 0.5rem;
   white-space: nowrap;
 `;

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

@@ -3,11 +3,11 @@ import styled from 'styled-components'
 export const DocumentTagStyled = styled.p`
   background: var(--others-white);
   border: 1px solid var(--neutral-neutral-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-2);
   font-size: 0.875rem;
   letter-spacing: -0.3px;
   line-height: 1.15rem;
-  padding: 4px 8px;
+  padding: 0.25rem 0.5rem;
   white-space: nowrap;
 `

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

@@ -46,7 +46,7 @@ export const ExpertCardStyled = styled.div `
       font-family: var(--font-sans);
       font-size: 18px;
       font-weight: 700;
-      line-height: 24px;
+      line-height: 1.5rem;
       letter-spacing: -0.3px;
       text-align: center;
       width: 75%;

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

@@ -47,7 +47,7 @@ export const ExpertCardStyled = styled.div`
       font-family: var(--font-sans);
       font-size: 18px;
       font-weight: 700;
-      line-height: 24px;
+      line-height: 1.5rem;
       letter-spacing: -0.3px;
       text-align: center;
       width: 75%;

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

@@ -8,10 +8,10 @@ export const FeatureRatafiaCardStyled = styled.div `
     align-items: flex-start;
     align-self: stretch;
 
-    gap: 1rem;
+    gap: var(--global-gap);
     padding: 1.5rem;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--neutral-neutral-6);
 
     &__header {
@@ -26,7 +26,7 @@ export const FeatureRatafiaCardStyled = styled.div `
         padding: 0.5rem 1rem;
         gap: 0.5rem;
 
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         background: var(--primary-main-dark-1);
 
         &__icon {
@@ -64,7 +64,7 @@ export const FeatureRatafiaCardStyled = styled.div `
           padding: 0.25rem;
           gap: 0.25rem;
 
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           background: var(--neutral-neutral-4);
 
           color: var(--primary-main-dark-1);

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

@@ -9,10 +9,10 @@ export const FeatureRatafiaCardStyled = styled.div`
     align-items: flex-start;
     align-self: stretch;
 
-    gap: 1rem;
+    gap: var(--global-gap);
     padding: 1.5rem;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--neutral-neutral-6);
 
     &__header {
@@ -27,7 +27,7 @@ export const FeatureRatafiaCardStyled = styled.div`
         padding: 0.5rem 1rem;
         gap: 0.5rem;
 
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         background: var(--primary-main-dark-1);
 
         &__icon {
@@ -65,7 +65,7 @@ export const FeatureRatafiaCardStyled = styled.div`
           padding: 0.25rem;
           gap: 0.25rem;
 
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           background: var(--neutral-neutral-4);
 
           color: var(--primary-main-dark-1);

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

@@ -81,7 +81,7 @@ export const FixedFooterStyled = styled.div `
     justify-content: center;
     margin: 0 auto;
     padding: 1rem 1rem 2.75rem;
-    grid-row-gap: 32px;
+    grid-row-gap: 2rem;
   }
   @media (min-width: 960px) {
     footer .footer__wrapper {
@@ -108,7 +108,7 @@ export const FixedFooterStyled = styled.div `
     justify-content: space-between;
     margin: auto;
     padding: 1rem 1rem 2.75rem;
-    grid-row-gap: 32px;
+    grid-row-gap: 2rem;
   }
   @media (min-width: 960px) {
     footer .sem-footer__wrapper {
@@ -120,7 +120,7 @@ export const FixedFooterStyled = styled.div `
     display: flex;
     flex-flow: row wrap;
     align-items: center;
-    gap: 1rem;
+    gap: var(--global-gap);
   }
   footer .sem-footer__legal-links li {
     margin-bottom: 0;
@@ -332,7 +332,7 @@ export const FixedFooterStyled = styled.div `
     width: 10px;
     height: 13px;
     transform: rotate(90deg);
-    margin-right: 8px;
+    margin-right: 0.5rem;
   }
   footer .expand-icon:before,
   footer .expand-icon:after {
@@ -911,7 +911,7 @@ export const FixedFooterStyled = styled.div `
   .footer-mobile-contact-box {
     flex-flow: column;
     width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
   @media (min-width: 720px) {
     .footer-contact-box,

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

@@ -82,7 +82,7 @@ export const FixedFooterStyled = styled.div`
     justify-content: center;
     margin: 0 auto;
     padding: 1rem 1rem 2.75rem;
-    grid-row-gap: 32px;
+    grid-row-gap: 2rem;
   }
   @media (min-width: 960px) {
     footer .footer__wrapper {
@@ -109,7 +109,7 @@ export const FixedFooterStyled = styled.div`
     justify-content: space-between;
     margin: auto;
     padding: 1rem 1rem 2.75rem;
-    grid-row-gap: 32px;
+    grid-row-gap: 2rem;
   }
   @media (min-width: 960px) {
     footer .sem-footer__wrapper {
@@ -121,7 +121,7 @@ export const FixedFooterStyled = styled.div`
     display: flex;
     flex-flow: row wrap;
     align-items: center;
-    gap: 1rem;
+    gap: var(--global-gap);
   }
   footer .sem-footer__legal-links li {
     margin-bottom: 0;
@@ -333,7 +333,7 @@ export const FixedFooterStyled = styled.div`
     width: 10px;
     height: 13px;
     transform: rotate(90deg);
-    margin-right: 8px;
+    margin-right: 0.5rem;
   }
   footer .expand-icon:before,
   footer .expand-icon:after {
@@ -912,7 +912,7 @@ export const FixedFooterStyled = styled.div`
   .footer-mobile-contact-box {
     flex-flow: column;
     width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
   @media (min-width: 720px) {
     .footer-contact-box,

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

@@ -42,7 +42,7 @@ export const FormFaqStyled = styled.li `
       display: none;
       background: var(--neutral-neutral-1);
       position: absolute;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       top: 0;
       transform: translateY(-100%);
       color: var(--others-white);

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

@@ -43,7 +43,7 @@ export const FormFaqStyled = styled.li`
       display: none;
       background: var(--neutral-neutral-1);
       position: absolute;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       top: 0;
       transform: translateY(-100%);
       color: var(--others-white);

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

@@ -11,13 +11,13 @@ export const IconTextInfoSectionStyled = styled.div `
       width: 1px;
 
       @media ${device.laptop} {
-        margin: 0 32px;
+        margin: 0 2rem;
       }
       @media ${device['portrait-tablets']} {
         display: flex;
       }
       @media ${device.mobile} {
-        margin: 19.2px 32px;
+        margin: 19.2px 2rem;
       }
     }
   }

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

@@ -12,13 +12,13 @@ export const IconTextInfoSectionStyled = styled.div`
       width: 1px;
 
       @media ${device.laptop} {
-        margin: 0 32px;
+        margin: 0 2rem;
       }
       @media ${device['portrait-tablets']} {
         display: flex;
       }
       @media ${device.mobile} {
-        margin: 19.2px 32px;
+        margin: 19.2px 2rem;
       }
     }
   }

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export const InfoBoxStyled = styled.div `
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid;
   padding: 1rem;
   display: flex;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const InfoBoxStyled = styled.div`
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid;
   padding: 1rem;
   display: flex;

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

@@ -14,7 +14,7 @@ export const KeyFactRatafiaCardStyled = styled.div `
       flex-direction: column;
 
       margin-bottom: 1rem;
-      gap: 1rem;
+      gap: var(--global-gap);
 
       &__title {
         color: var(--neutral-neutral-1);

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

@@ -15,7 +15,7 @@ export const KeyFactRatafiaCardStyled = styled.div`
       flex-direction: column;
 
       margin-bottom: 1rem;
-      gap: 1rem;
+      gap: var(--global-gap);
 
       &__title {
         color: var(--neutral-neutral-1);

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

@@ -15,7 +15,7 @@ export const MenuItemsStyled = styled.ul `
 
     &__item {
       transition: background-color 0.3s ease;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       padding: 0.25rem 0.5rem;
 
       svg {

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

@@ -16,7 +16,7 @@ export const MenuItemsStyled = styled.ul`
 
     &__item {
       transition: background-color 0.3s ease;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       padding: 0.25rem 0.5rem;
 
       svg {

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

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 export const MessageInformationStyled = styled.div `
   display: flex;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: var(--secondary-main-light-4);
-  padding: 8px;
+  padding: 0.5rem;
 
   &.message-information {
     @media ${device.laptop} {
@@ -20,7 +20,7 @@ export const MessageInformationStyled = styled.div `
     &__icon {
       width: 24px;
       fill: var(--secondary-main-dark-1);
-      margin-right: 8px;
+      margin-right: 0.5rem;
 
       &.hide {
         display: none;

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

@@ -4,9 +4,9 @@ import styled from 'styled-components'
 export const MessageInformationStyled = styled.div`
   display: flex;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: var(--secondary-main-light-4);
-  padding: 8px;
+  padding: 0.5rem;
 
   &.message-information {
     @media ${device.laptop} {
@@ -21,7 +21,7 @@ export const MessageInformationStyled = styled.div`
     &__icon {
       width: 24px;
       fill: var(--secondary-main-dark-1);
-      margin-right: 8px;
+      margin-right: 0.5rem;
 
       &.hide {
         display: none;

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

@@ -3,9 +3,9 @@ export const MoreDocsItemStyled = styled.a `
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px;
+  padding: 0.5rem;
   gap: 10px;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-decoration: none;
 
   &:hover {
@@ -23,7 +23,7 @@ export const MoreDocsItemStyled = styled.a `
     .texts {
       display: flex;
       flex-direction: column;
-      gap: calc(1rem / 2);
+      gap: 0.5rem;
       text-align: left;
       padding-left: 1rem;
 

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

@@ -4,9 +4,9 @@ export const MoreDocsItemStyled = styled.a`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px;
+  padding: 0.5rem;
   gap: 10px;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-decoration: none;
 
   &:hover {
@@ -24,7 +24,7 @@ export const MoreDocsItemStyled = styled.a`
     .texts {
       display: flex;
       flex-direction: column;
-      gap: calc(1rem / 2);
+      gap: 0.5rem;
       text-align: left;
       padding-left: 1rem;
 

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

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const NavMenuItemStyled = styled.div `
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   position: relative;
   width: fit-content;
 
@@ -41,7 +41,7 @@ export const NavMenuItemStyled = styled.div `
     }
 
     &__list {
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       padding: 0.5rem;
       margin-top: 0.5rem;
       display: flex;

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

@@ -2,7 +2,7 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const NavMenuItemStyled = styled.div`
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   position: relative;
   width: fit-content;
 
@@ -42,7 +42,7 @@ export const NavMenuItemStyled = styled.div`
     }
 
     &__list {
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       padding: 0.5rem;
       margin-top: 0.5rem;
       display: flex;

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

@@ -4,12 +4,12 @@ export const PopularDocsItemStyled = styled.a `
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 24px 16px 24px 24px;
-  gap: calc(1rem * 2);
+  padding: 1.5rem 1rem 1.5rem 1.5rem;
+  gap: 2rem;
   height: 6rem;
   background: var(--others-white);
   box-shadow: var(--box-shadow-container);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-decoration: none;
 
   &:hover {

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

@@ -5,12 +5,12 @@ export const PopularDocsItemStyled = styled.a`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 24px 16px 24px 24px;
-  gap: calc(1rem * 2);
+  padding: 1.5rem 1rem 1.5rem 1.5rem;
+  gap: 2rem;
   height: 6rem;
   background: var(--others-white);
   box-shadow: var(--box-shadow-container);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-decoration: none;
 
   &:hover {

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

@@ -5,7 +5,7 @@
   .e-radio__inner {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--global-gap);
     .radio-item-container {
       .e-radio-label {
         .e-radio-label__label {
@@ -73,11 +73,11 @@
       }
     }
     :first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--s-border-radius) 0 0 var(--s-border-radius);
       border-left-width: 1px;
     }
     :last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 var(--s-border-radius) var(--s-border-radius) 0;
       border-right-width: 1px;
     }
     :not(:first-child) {
@@ -98,11 +98,12 @@
         align-items: center;
         background: var(--others-white);
         border: 1px solid var(--neutral-neutral-4);
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         cursor: pointer;
         display: flex;
-        gap: 16px;
+        gap: var(--global-gap);
         padding: 8px 15px;
+        height: 100%;
 
         &:hover {
           background: var(--neutral-neutral-5);
@@ -159,7 +160,7 @@
         input[type='radio']:after {
           background-color: var(--others-white);
           border: 1px solid var(--neutral-neutral-1);
-          border-radius: 16px;
+          border-radius: var(--l-border-radius);
           content: '';
           cursor: pointer;
           display: inline-block;
@@ -201,9 +202,10 @@
 
       .e-radio-label {
         padding: 1rem;
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         border: 1px solid var(--neutral-neutral-4, #dbe1e5);
         background: var(--neutral-White, #fff);
+        height: 100%;
 
         cursor: pointer;
         .e-radio-label__label {

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

@@ -1,6 +1,6 @@
 .ratafia-landing-icon {
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-1);
   background: var(--secondary-main-light-3);
 }