@npm_leadtech/legal-lib-components 5.49.0 → 5.50.0

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.js

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const CardFunctionalityStyled = styled.article `
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-medium);
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@ export const CardFunctionalityStyled = styled.article `
     .content {
       display: flex;
       flex-direction: column;
-      gap: calc(1rem / 2);
+      gap: 0.5rem;
 
       .header {
         display: flex;
@@ -30,7 +30,7 @@ export const CardFunctionalityStyled = styled.article `
 
         .icon {
           padding: 2px;
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
           background: var(--primary-main-light-5);
         }
 
@@ -53,7 +53,7 @@ export const CardFunctionalityStyled = styled.article `
 
     .tags {
       display: flex;
-      gap: calc(1rem * 2);
+      gap: 2rem;
       flex-wrap: wrap;
     }
   }

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.ts

@@ -2,7 +2,7 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const CardFunctionalityStyled = styled.article`
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   box-shadow: var(--box-shadow-medium);
   display: flex;
   flex-direction: column;
@@ -21,7 +21,7 @@ export const CardFunctionalityStyled = styled.article`
     .content {
       display: flex;
       flex-direction: column;
-      gap: calc(1rem / 2);
+      gap: 0.5rem;
 
       .header {
         display: flex;
@@ -31,7 +31,7 @@ export const CardFunctionalityStyled = styled.article`
 
         .icon {
           padding: 2px;
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
           background: var(--primary-main-light-5);
         }
 
@@ -54,7 +54,7 @@ export const CardFunctionalityStyled = styled.article`
 
     .tags {
       display: flex;
-      gap: calc(1rem * 2);
+      gap: 2rem;
       flex-wrap: wrap;
     }
   }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const ContactJumbotronStyled = styled.article `
   .contact__text__title {
     color: var(--primary-main-dark-1);
-    margin-bottom: space(8);
+    margin-bottom: 2rem;
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 2rem;
@@ -34,7 +34,7 @@ export const ContactJumbotronStyled = styled.article `
 
   .faq-button {
     display: inline-block;
-    margin-top: space(4);
+    margin-top: 1rem;
     width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.ts

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const ContactJumbotronStyled = styled.article`
   .contact__text__title {
     color: var(--primary-main-dark-1);
-    margin-bottom: space(8);
+    margin-bottom: 2rem;
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 2rem;
@@ -35,7 +35,7 @@ export const ContactJumbotronStyled = styled.article`
 
   .faq-button {
     display: inline-block;
-    margin-top: space(4);
+    margin-top: 1rem;
     width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;

package/dist/src/components/organisms/FaqGroup/FaqGroup.styled.js

@@ -3,7 +3,7 @@ export const FaqGroupStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
+  gap: 2rem;
 
   &#faq-esignature-ratafia {
     margin: auto;

package/dist/src/components/organisms/FaqGroup/FaqGroup.styled.ts

@@ -4,7 +4,7 @@ export const FaqGroupStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
+  gap: 2rem;
 
   &#faq-esignature-ratafia {
     margin: auto;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.js

@@ -14,7 +14,7 @@ export const FeaturesRatafiaContentStyled = styled.div `
       justify-content: center;
       align-items: center;
       align-self: stretch;
-      gap: 1rem;
+      gap: var(--global-gap);
       margin-bottom: 1rem;
 
       &__text {

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.ts

@@ -15,7 +15,7 @@ export const FeaturesRatafiaContentStyled = styled.div`
       justify-content: center;
       align-items: center;
       align-self: stretch;
-      gap: 1rem;
+      gap: var(--global-gap);
       margin-bottom: 1rem;
 
       &__text {

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.js

@@ -97,12 +97,12 @@ export const GuideslinesContentStyled = styled.div `
       flex: 1;
       flex-direction: column;
       background: var(--others-white);
-      border-radius: 0.5rem;
+      border-radius: var(--m-border-radius);
       padding: 1.5rem;
 
       &__image {
         width: 100%;
-        border-radius: 0.5rem;
+        border-radius: var(--m-border-radius);
       }
 
       &__title {

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.ts

@@ -98,12 +98,12 @@ export const GuideslinesContentStyled = styled.div`
       flex: 1;
       flex-direction: column;
       background: var(--others-white);
-      border-radius: 0.5rem;
+      border-radius: var(--m-border-radius);
       padding: 1.5rem;
 
       &__image {
         width: 100%;
-        border-radius: 0.5rem;
+        border-radius: var(--m-border-radius);
       }
 
       &__title {

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.styled.js

@@ -3,7 +3,7 @@ export const JumbotronRatafiaStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .jumbotron-ratafia-content__title {
     &__text {
@@ -14,7 +14,7 @@ export const JumbotronRatafiaStyled = styled.div `
 
       &__icon {
         padding: 0 0.6rem;
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         color: var(--primary-main-dark-2);
         background: var(--secondary-main-light-2);
       }
@@ -40,7 +40,7 @@ export const JumbotronRatafiaStyled = styled.div `
 
         &__icon {
           padding: 0 0.6rem;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           color: var(--primary-main-dark-2);
           background: var(--secondary-main-light-2);
         }

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.styled.ts

@@ -4,7 +4,7 @@ export const JumbotronRatafiaStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .jumbotron-ratafia-content__title {
     &__text {
@@ -15,7 +15,7 @@ export const JumbotronRatafiaStyled = styled.div`
 
       &__icon {
         padding: 0 0.6rem;
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         color: var(--primary-main-dark-2);
         background: var(--secondary-main-light-2);
       }
@@ -41,7 +41,7 @@ export const JumbotronRatafiaStyled = styled.div`
 
         &__icon {
           padding: 0 0.6rem;
-          border-radius: 4px;
+          border-radius: var(--s-border-radius);
           color: var(--primary-main-dark-2);
           background: var(--secondary-main-light-2);
         }

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.styled.js

@@ -5,7 +5,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .key-facts-loading-content__document-name {
     color: var(--neutral-neutral-2);
@@ -22,7 +22,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
 
     overflow: hidden;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     border-top: 4px solid var(--neutral-neutral-6);
     border-bottom: 4px solid var(--neutral-neutral-6);
     background: var(--neutral-neutral-6);
@@ -45,7 +45,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
       border-bottom: 1px solid var(--neutral-neutral-4);
       &__loader {
         background: var(--neutral-neutral-4);
-        border-radius: 16px;
+        border-radius: var(--l-border-radius);
       }
       .item-1 {
         height: 10px;
@@ -111,7 +111,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div `
     padding: 1rem;
     gap: 0.5rem;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--secondary-main-light-4);
 
     &__icon img {

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.styled.ts

@@ -6,7 +6,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .key-facts-loading-content__document-name {
     color: var(--neutral-neutral-2);
@@ -23,7 +23,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
 
     overflow: hidden;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     border-top: 4px solid var(--neutral-neutral-6);
     border-bottom: 4px solid var(--neutral-neutral-6);
     background: var(--neutral-neutral-6);
@@ -46,7 +46,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
       border-bottom: 1px solid var(--neutral-neutral-4);
       &__loader {
         background: var(--neutral-neutral-4);
-        border-radius: 16px;
+        border-radius: var(--l-border-radius);
       }
       .item-1 {
         height: 10px;
@@ -112,7 +112,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
     padding: 1rem;
     gap: 0.5rem;
 
-    border-radius: 4px;
+    border-radius: var(--s-border-radius);
     background: var(--secondary-main-light-4);
 
     &__icon img {

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.styled.js

@@ -6,7 +6,7 @@ export const KeyFactsResultContentRatafiaStyled = styled.div `
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .key-facts-result-content__document-name {
     color: var(--neutral-neutral-2);

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.styled.ts

@@ -7,7 +7,7 @@ export const KeyFactsResultContentRatafiaStyled = styled.div`
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
-  gap: 1rem;
+  gap: var(--global-gap);
 
   .key-facts-result-content__document-name {
     color: var(--neutral-neutral-2);

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.js

@@ -18,7 +18,7 @@ export const LayoutRatafiaStyled = styled.div `
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
     height: calc(100vh - 8.375rem);
-    border-radius: 16px 16px 0 0;
+    border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
 
@@ -74,7 +74,7 @@ export const LayoutRatafiaStyled = styled.div `
       bottom: 0;
       left: 0;
       right: 0;
-      gap: 1rem;
+      gap: var(--global-gap);
       padding: 1.5rem;
       width: 100vw;
       background: var(--others-white);

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.ts

@@ -19,7 +19,7 @@ export const LayoutRatafiaStyled = styled.div`
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
     height: calc(100vh - 8.375rem);
-    border-radius: 16px 16px 0 0;
+    border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
 
@@ -75,7 +75,7 @@ export const LayoutRatafiaStyled = styled.div`
       bottom: 0;
       left: 0;
       right: 0;
-      gap: 1rem;
+      gap: var(--global-gap);
       padding: 1.5rem;
       width: 100vw;
       background: var(--others-white);

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.js

@@ -4,7 +4,7 @@ export const LimitReachedContentRatafiaStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   align-self: stretch;
   @media ${device['portrait-tablets']} {
     gap: 2rem;
@@ -26,7 +26,7 @@ export const LimitReachedContentRatafiaStyled = styled.div `
         align-items: center;
       }
 
-      border-radius: 0.25rem;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
       &__icon {
         width: 0.875rem;

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.ts

@@ -5,7 +5,7 @@ export const LimitReachedContentRatafiaStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--global-gap);
   align-self: stretch;
   @media ${device['portrait-tablets']} {
     gap: 2rem;
@@ -27,7 +27,7 @@ export const LimitReachedContentRatafiaStyled = styled.div`
         align-items: center;
       }
 
-      border-radius: 0.25rem;
+      border-radius: var(--s-border-radius);
       background: var(--neutral-neutral-6);
       &__icon {
         width: 0.875rem;

package/dist/src/components/pages/FaqsPage/FaqsPage.styled.js

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 export const FaqsPageStyled = styled.div `
   .titles {
     display: flex;
-    padding: 40px 24px;
+    padding: 40px 1.5rem;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     background: var(--primary-main-light-6);
 
     @media ${device['landscape-tablets']} {
-      padding: 40px 32px 80px 32px;
+      padding: 40px 2rem 80px 2rem;
     }
 
     .title {
@@ -20,8 +20,8 @@ export const FaqsPageStyled = styled.div `
       line-height: 18px;
       letter-spacing: -0.3px;
       border-bottom: get-color(neutral, neutral-2) 1px solid;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
     }
 
     .subtitle {
@@ -42,7 +42,7 @@ export const FaqsPageStyled = styled.div `
   .main-content {
     display: flex;
     flex-direction: row;
-    padding: 32px 24px;
+    padding: 2rem 1.5rem;
     gap: var(--global-gap);
     background: var(--primary-main-light-6);
     justify-content: center;
@@ -53,7 +53,7 @@ export const FaqsPageStyled = styled.div `
     }
 
     @media ${device['landscape-tablets']} {
-      padding: 32px;
+      padding: 2rem;
       gap: 106px;
     }
   }

package/dist/src/components/pages/FaqsPage/FaqsPage.styled.ts

@@ -4,14 +4,14 @@ import styled from 'styled-components'
 export const FaqsPageStyled = styled.div`
   .titles {
     display: flex;
-    padding: 40px 24px;
+    padding: 40px 1.5rem;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
     background: var(--primary-main-light-6);
 
     @media ${device['landscape-tablets']} {
-      padding: 40px 32px 80px 32px;
+      padding: 40px 2rem 80px 2rem;
     }
 
     .title {
@@ -21,8 +21,8 @@ export const FaqsPageStyled = styled.div`
       line-height: 18px;
       letter-spacing: -0.3px;
       border-bottom: get-color(neutral, neutral-2) 1px solid;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
     }
 
     .subtitle {
@@ -43,7 +43,7 @@ export const FaqsPageStyled = styled.div`
   .main-content {
     display: flex;
     flex-direction: row;
-    padding: 32px 24px;
+    padding: 2rem 1.5rem;
     gap: var(--global-gap);
     background: var(--primary-main-light-6);
     justify-content: center;
@@ -54,7 +54,7 @@ export const FaqsPageStyled = styled.div`
     }
 
     @media ${device['landscape-tablets']} {
-      padding: 32px;
+      padding: 2rem;
       gap: 106px;
     }
   }

package/dist/src/components/pages/RatafiaPricingPage/RatafiaPricingPage.styled.js

@@ -18,7 +18,7 @@ export const RatafiaPricingPageStyled = styled.div `
     &__cards {
       display: flex;
       flex-direction: row;
-      gap: 1rem;
+      gap: var(--global-gap);
 
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/pages/RatafiaPricingPage/RatafiaPricingPage.styled.ts

@@ -19,7 +19,7 @@ export const RatafiaPricingPageStyled = styled.div`
     &__cards {
       display: flex;
       flex-direction: row;
-      gap: 1rem;
+      gap: var(--global-gap);
 
       @media ${device.mobile} {
         flex-direction: column;

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.styled.js

@@ -21,7 +21,7 @@ export const AsideMenuSectionStyled = styled.aside `
       font-size: 14px;
       line-height: 18px;
       letter-spacing: -0.3px;
-      padding: 16px 0;
+      padding: 1rem 0;
       border-top: var(--neutral-neutral-4) 1px solid;
       border-bottom: var(--neutral-neutral-4) 1px solid;
 

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.styled.ts

@@ -22,7 +22,7 @@ export const AsideMenuSectionStyled = styled.aside`
       font-size: 14px;
       line-height: 18px;
       letter-spacing: -0.3px;
-      padding: 16px 0;
+      padding: 1rem 0;
       border-top: var(--neutral-neutral-4) 1px solid;
       border-bottom: var(--neutral-neutral-4) 1px solid;
 

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.styled.js

@@ -26,7 +26,7 @@ export const BenefitsRatafiaSectionStyled = styled.section `
       align-self: stretch;
       padding: 1.5rem;
       gap: 2rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
 
       @media ${device['landscape-tablets']} {
@@ -42,7 +42,7 @@ export const BenefitsRatafiaSectionStyled = styled.section `
         justify-content: center;
         align-items: flex-start;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
 
         &__text {
           color: var(--others-white);

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.styled.ts

@@ -27,7 +27,7 @@ export const BenefitsRatafiaSectionStyled = styled.section`
       align-self: stretch;
       padding: 1.5rem;
       gap: 2rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
 
       @media ${device['landscape-tablets']} {
@@ -43,7 +43,7 @@ export const BenefitsRatafiaSectionStyled = styled.section`
         justify-content: center;
         align-items: flex-start;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
 
         &__text {
           color: var(--others-white);

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.js

@@ -24,7 +24,7 @@ export const LayoutRatafiaSectionStyled = styled.section `
       align-self: stretch;
       padding: 1.5rem;
       gap: 2.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
 
       @media ${device['landscape-tablets']} {
@@ -48,7 +48,7 @@ export const LayoutRatafiaSectionStyled = styled.section `
         &__paragraph {
           display: flex;
           flex-direction: column;
-          gap: 1rem;
+          gap: var(--global-gap);
           color: var(--others-white);
 
           p:not(:last-child) {

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.ts

@@ -25,7 +25,7 @@ export const LayoutRatafiaSectionStyled = styled.section`
       align-self: stretch;
       padding: 1.5rem;
       gap: 2.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
 
       @media ${device['landscape-tablets']} {
@@ -49,7 +49,7 @@ export const LayoutRatafiaSectionStyled = styled.section`
         &__paragraph {
           display: flex;
           flex-direction: column;
-          gap: 1rem;
+          gap: var(--global-gap);
           color: var(--others-white);
 
           p:not(:last-child) {

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.js

@@ -47,7 +47,7 @@ export const LearnMoreSectionStyled = styled.section `
     width: 100%;
     margin: 0 1rem;
     background-color: var(--others-white);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     box-shadow: var(--box-shadow-medium);
     padding: 2rem;
     transform: translateY(2rem);
@@ -76,7 +76,7 @@ export const LearnMoreSectionStyled = styled.section `
       a {
         font-weight: bold;
         transition: all 0.3s ease;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         display: inline-block;
         padding: 0.5rem;
         position: relative;

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.ts

@@ -48,7 +48,7 @@ export const LearnMoreSectionStyled = styled.section`
     width: 100%;
     margin: 0 1rem;
     background-color: var(--others-white);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     box-shadow: var(--box-shadow-medium);
     padding: 2rem;
     transform: translateY(2rem);
@@ -77,7 +77,7 @@ export const LearnMoreSectionStyled = styled.section`
       a {
         font-weight: bold;
         transition: all 0.3s ease;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         display: inline-block;
         padding: 0.5rem;
         position: relative;