@npm_leadtech/legal-lib-components 5.3.1 → 5.3.10

package/dist/css/styles.css

@@ -5303,7 +5303,7 @@ h2.react-datepicker__current-month {
 .as-seen-in-section-box .as-seen-in-section {
   display: flex;
   flex-direction: column;
-  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
   background: var(--others-white);
   transform: translateY(-5rem);
   padding: 1.5rem 0;
@@ -5324,6 +5324,61 @@ h2.react-datepicker__current-month {
   letter-spacing: -0.3px;
   margin: 1rem 0;
 }
+.contact-us-section {
+  display: flex;
+  flex-direction: column;
+  transform: translateY(-5rem);
+  color: var(--neutral-neutral-1);
+  margin-top: 1rem;
+}
+.contact-us-section__title {
+  text-align: center;
+  font-size: 32px;
+  font-family: "Lora", serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 42px;
+  letter-spacing: -0.3px;
+  margin: 1rem 0;
+}
+.contact-us-section__text {
+  text-align: center;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 0 2rem 0;
+}
+.contact-us-section-blocks {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+@media (min-width: 960px) {
+  .contact-us-section-blocks {
+    flex-direction: row;
+    gap: 2.5rem;
+  }
+}
+.contact-us-section-blocks__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+  border-radius: 0.25rem;
+  min-width: 200px;
+  padding: 1rem;
+}
+.contact-us-section-blocks__item__image {
+  width: 2rem;
+}
+.contact-us-section-blocks__item__title {
+  margin-top: 1rem;
+  line-height: 1rem;
+}
+.contact-us-section-blocks__item__text {
+  font-size: 14px;
+}
 .benefit-ratafia-section {
   display: flex;
   justify-content: center;
@@ -6243,127 +6298,3 @@ h2.react-datepicker__current-month {
     width: auto;
   }
 }
-.error-ratafia-page {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  gap: 1.5rem;
-  background-color: var(--neutral-neutral-6);
-}
-.error-ratafia-page__ctas {
-  text-align: center;
-}
-.error-ratafia-page__ctas__button {
-  display: block;
-  width: 100%;
-}
-.error-ratafia-page__ctas__button:first-child {
-  margin-bottom: 1rem;
-}
-@media (min-width: 575px) {
-  .error-ratafia-page__ctas__button {
-    display: inline-grid;
-    width: inherit;
-  }
-  .error-ratafia-page__ctas__button:first-child {
-    margin-right: 1rem;
-  }
-}
-.faq-page .titles {
-  display: flex;
-  padding: 40px 24px;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  background: var(--primary-main-light-6);
-}
-@media (min-width: 720px) {
-  .faq-page .titles {
-    padding: 40px 32px 80px 32px;
-  }
-}
-.faq-page .titles .title {
-  color: var(--neutral-neutral-2);
-  font-family: var(--font-sans);
-  font-size: 14px;
-  line-height: 18px;
-  letter-spacing: -0.3px;
-  border-bottom: var(--neutral-neutral-2) 1px solid;
-  padding-bottom: 8px;
-  margin-bottom: 8px;
-}
-.faq-page .titles .subtitle {
-  color: var(--neutral-main);
-  font-family: var(--font-serif);
-  font-size: 36px;
-  line-height: 48px;
-  font-weight: 400;
-  letter-spacing: -0.3px;
-}
-@media (min-width: 720px) {
-  .faq-page .titles .subtitle {
-    font-size: 48px;
-    line-height: 58px;
-  }
-}
-.faq-page .main-content {
-  display: flex;
-  flex-direction: row;
-  padding: 32px 24px;
-  gap: var(--global-gap);
-  background: var(--primary-main-light-6);
-  justify-content: center;
-}
-@media (max-width: 575px) {
-  .faq-page .main-content {
-    flex-direction: column;
-    gap: 3rem;
-  }
-}
-@media (min-width: 720px) {
-  .faq-page .main-content {
-    padding: 32px;
-    gap: 106px;
-  }
-}
-.key-facts-result-page {
-  background-color: var(--neutral-neutral-6);
-}
-.key-facts-result-page__content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  gap: 1.5rem;
-}
-.key-facts-result-page__content__cta {
-  align-self: start;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 575px) {
-  .key-facts-result-page__content__cta {
-    display: inline-block;
-  }
-}
-.login-ratafia-page {
-  background-color: var(--neutral-neutral-6);
-}
-.login-ratafia-page__ctas {
-  text-align: center;
-}
-.login-ratafia-page__ctas__button {
-  display: block;
-  width: 100%;
-  margin-bottom: 1rem;
-}
-.login-ratafia-page__ctas__signIn__button {
-  background: none;
-  border: none;
-  color: var(--primary-main);
-  text-decoration: underline;
-  cursor: pointer;
-}

package/dist/src/components/atoms/index.d.ts

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

package/dist/src/components/atoms/index.js

@@ -9,7 +9,6 @@ export * from './Button';
 export * from './ButtonIcon';
 export * from './CardPane';
 export * from './Checkbox';
-export * from './ContactCard';
 export * from './DatePickerCustom';
 export * from './DialogMenuIcon';
 export * from './Disclaimer';

package/dist/src/components/atoms/index.ts

@@ -9,7 +9,6 @@ export * from './Button'
 export * from './ButtonIcon'
 export * from './CardPane'
 export * from './Checkbox'
-export * from './ContactCard'
 export * from './DatePickerCustom'
 export * from './DialogMenuIcon'
 export * from './Disclaimer'

package/dist/src/components/molecules/index.d.ts

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

package/dist/src/components/molecules/index.js

@@ -9,7 +9,6 @@ export * from './BottomOverlay';
 export * from './BoxForm';
 export * from './Breadcrumb';
 export * from './ContactBox';
-export * from './ContactCardList';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './EmailContactBox';

package/dist/src/components/molecules/index.ts

@@ -9,7 +9,6 @@ export * from './BottomOverlay'
 export * from './BoxForm'
 export * from './Breadcrumb'
 export * from './ContactBox'
-export * from './ContactCardList'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './EmailContactBox'

package/dist/src/components/organisms/index.d.ts

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.js

@@ -3,7 +3,6 @@ export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
 export * from './CardFunctionality';
-export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.ts

@@ -3,7 +3,6 @@ export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'
 export * from './CardFunctionality'
-export * from './ContactContent'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
 export * from './ErrorContentRatafia'

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPage.js

@@ -3,11 +3,11 @@ import { Button } from '../../atoms';
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
 import { ErrorContentRatafia } from '../../organisms';
 import { LayoutRatafia } from '../../organisms/LayoutRatafia';
-// import './ErrorRatafiaPage.scss'
+import { ErrorRatafiaPageStyled } from './ErrorRatafiaPage.styled';
 export const ErrorRatafiaPage = ({ header, errorContent, disclaimer, goToDashboardCta, tryAgainCta }) => {
     const ctas = (_jsxs("div", { className: 'error-ratafia-page__ctas', children: [_jsx(Button, { givenClass: 'error-ratafia-page__ctas__button', dataQa: tryAgainCta.dataQa, color: 'primary', label: tryAgainCta.label, onClick: tryAgainCta.handleOnClick, link: tryAgainCta.link }), _jsx(Button, { givenClass: 'error-ratafia-page__ctas__button', dataQa: goToDashboardCta.dataQa, color: 'secondary', label: goToDashboardCta.label, onClick: goToDashboardCta.handleOnClick, link: goToDashboardCta.link })] }));
     const content = _jsx(ErrorContentRatafia, { title: errorContent.title, errorMessage: errorContent.errorMessage });
     const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
     const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctas] }));
-    return (_jsx("div", { className: 'error-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx(ErrorRatafiaPageStyled, { className: 'error-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPage.styled.d.ts

@@ -0,0 +1 @@
+export declare const ErrorRatafiaPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+export const ErrorRatafiaPageStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
+  background-color: var(--neutral-neutral-6);
+
+  &__ctas {
+    text-align: center;
+    &__button {
+      display: block;
+      width: 100%;
+      &:first-child {
+        margin-bottom: 1rem;
+      }
+
+      @include portrait-tablets {
+        display: inline-grid;
+        width: inherit;
+
+        &:first-child {
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
+`;

package/dist/src/components/pages/ErrorRatafiaPage/{ErrorRatafiaPage.scss → ErrorRatafiaPage.styled.ts}

@@ -1,7 +1,6 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import styled from 'styled-components'
 
-.error-ratafia-page {
+export const ErrorRatafiaPageStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -29,4 +28,4 @@
       }
     }
   }
-}
+`

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPage.tsx

@@ -5,7 +5,8 @@ import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { ErrorContentRatafia } from '../../organisms'
 import { type ErrorRatafiaPageProps } from './ErrorRatafiaPageProps.types'
 import { LayoutRatafia } from '../../organisms/LayoutRatafia'
-// import './ErrorRatafiaPage.scss'
+
+import { ErrorRatafiaPageStyled } from './ErrorRatafiaPage.styled'
 
 export const ErrorRatafiaPage: React.FC<ErrorRatafiaPageProps> = ({
   header,
@@ -55,7 +56,7 @@ export const ErrorRatafiaPage: React.FC<ErrorRatafiaPageProps> = ({
   )
 
   return (
-    <div className='error-ratafia-page'>
+    <ErrorRatafiaPageStyled className='error-ratafia-page'>
       <LayoutRatafia
         header={header}
         content={content}
@@ -63,6 +64,6 @@ export const ErrorRatafiaPage: React.FC<ErrorRatafiaPageProps> = ({
         footerDesktop={footerDesktop}
         footerMobile={footerMobile}
       />
-    </div>
+    </ErrorRatafiaPageStyled>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsideMenuSection, FaqSection } from '../../sections';
-// import './FaqsPage.scss'
+import { FaqsPageStyled } from './FaqsPage.styled';
 export const FaqsPage = ({ title, subtitle, asideMenuSectionProps, faqSectionProps }) => {
-    return (_jsxs("div", { className: 'faq-page', children: [_jsxs("div", { className: 'titles', children: [_jsx("h1", { className: 'title', children: title }), _jsx("h2", { className: 'subtitle', children: subtitle })] }), _jsxs("div", { className: 'main-content', children: [_jsx(AsideMenuSection, { ...asideMenuSectionProps }), _jsx(FaqSection, { ...faqSectionProps })] })] }));
+    return (_jsxs(FaqsPageStyled, { className: 'faq-page', children: [_jsxs("div", { className: 'titles', children: [_jsx("h1", { className: 'title', children: title }), _jsx("h2", { className: 'subtitle', children: subtitle })] }), _jsxs("div", { className: 'main-content', children: [_jsx(AsideMenuSection, { ...asideMenuSectionProps }), _jsx(FaqSection, { ...faqSectionProps })] })] }));
 };

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

@@ -0,0 +1 @@
+export declare const FaqsPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+export const FaqsPageStyled = styled.div `
+  .titles {
+    display: flex;
+    padding: 40px 24px;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    background: var(--primary-main-light-6);
+
+    @include landscape-tablets {
+      padding: 40px 32px 80px 32px;
+    }
+
+    .title {
+      color: var(--neutral-neutral-2);
+      font-family: var(--font-sans);
+      font-size: 14px;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+      border-bottom: get-color(neutral, neutral-2) 1px solid;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      color: var(--neutral-main);
+      font-family: var(--font-serif);
+      font-size: 36px;
+      line-height: 48px;
+      font-weight: 400;
+      letter-spacing: -0.3px;
+
+      @include landscape-tablets {
+        font-size: 48px;
+        line-height: 58px;
+      }
+    }
+  }
+
+  .main-content {
+    display: flex;
+    flex-direction: row;
+    padding: 32px 24px;
+    gap: var(--global-gap);
+    background: var(--primary-main-light-6);
+    justify-content: center;
+
+    @include mobile {
+      flex-direction: column;
+      gap: calc(1rem * 3);
+    }
+
+    @include landscape-tablets {
+      padding: 32px;
+      gap: 106px;
+    }
+  }
+`;

package/dist/src/components/pages/FaqsPage/{FaqsPage.scss → FaqsPage.styled.ts}

@@ -1,7 +1,6 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import styled from 'styled-components'
 
-.faq-page {
+export const FaqsPageStyled = styled.div`
   .titles {
     display: flex;
     padding: 40px 24px;
@@ -58,4 +57,4 @@
       gap: 106px;
     }
   }
-}
+`

package/dist/src/components/pages/FaqsPage/FaqsPage.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 import { AsideMenuSection, FaqSection } from '../../sections'
 import { type FaqsPageProps } from './FaqsPageProps'
-// import './FaqsPage.scss'
+
+import { FaqsPageStyled } from './FaqsPage.styled'
 
 export const FaqsPage: React.FC<FaqsPageProps> = ({ title, subtitle, asideMenuSectionProps, faqSectionProps }) => {
   return (
-    <div className='faq-page'>
+    <FaqsPageStyled className='faq-page'>
       <div className='titles'>
         <h1 className='title'>{title}</h1>
         <h2 className='subtitle'>{subtitle}</h2>
@@ -15,6 +16,6 @@ export const FaqsPage: React.FC<FaqsPageProps> = ({ title, subtitle, asideMenuSe
         <AsideMenuSection {...asideMenuSectionProps} />
         <FaqSection {...faqSectionProps} />
       </div>
-    </div>
+    </FaqsPageStyled>
   )
 }

package/dist/src/components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPage.js

@@ -3,13 +3,13 @@ import { KeyFactsLoadingContentRatafia, KeyFactsResultContentRatafia } from '../
 import { Button } from '../../atoms';
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
 import { LayoutRatafia } from '../../organisms/LayoutRatafia';
-// import './KeyFactsResultRatafiaPage.scss'
+import { KeyFactsResultRatafiaPageStyled } from './KeyFactsResultRatafiaPage.styled';
 export const KeyFactsResultRatafiaPage = ({ header, resultContent, reviewContent, disclaimer, cta, loadingIcon, loadingText, isLoading }) => {
     const loadingContent = (_jsx("div", { className: 'key-facts-result-page__content', children: _jsx(KeyFactsLoadingContentRatafia, { documentName: resultContent.documentName, icon: loadingIcon, text: loadingText }) }));
     const loadedContent = (_jsx("div", { className: 'key-facts-result-page__content', children: _jsx(KeyFactsResultContentRatafia, { result: resultContent, review: reviewContent }) }));
     const ctaButton = isLoading ? null : (_jsx(Button, { givenClass: 'key-facts-result-page__content__cta', dataQa: cta.dataQa, color: 'primary', label: cta.label, onClick: cta.handleOnClick, noLink: true }));
     const footerDesktop = (_jsx("div", { className: 'key-facts-result-page__footer-desktop', children: _jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }) }));
     const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctaButton] }));
-    return (_jsx("div", { className: 'key-facts-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx(KeyFactsResultRatafiaPageStyled, { className: 'key-facts-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };
 export default KeyFactsResultRatafiaPage;

package/dist/src/components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPage.styled.d.ts

@@ -0,0 +1 @@
+export declare const KeyFactsResultRatafiaPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/pages/KeyFactsResultRatafiaPage/{KeyFactsResultRatafiaPage.scss → KeyFactsResultRatafiaPage.styled.js}

@@ -1,8 +1,7 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-
-.key-facts-result-page {
+import styled from 'styled-components';
+export const KeyFactsResultRatafiaPageStyled = styled.div `
   background-color: var(--neutral-neutral-6);
+
   &__content {
     display: flex;
     flex-direction: column;
@@ -20,4 +19,4 @@
       }
     }
   }
-}
+`;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const KeyFactsResultRatafiaPageStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    gap: 1.5rem;
+
+    &__cta {
+      align-self: start;
+      display: block;
+      width: 100%;
+      @include portrait-tablets {
+        display: inline-block;
+      }
+    }
+  }
+`

package/dist/src/components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPage.tsx

@@ -5,7 +5,8 @@ import { Button } from '../../atoms'
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { type KeyFactsResultRatafiaPageProps } from './KeyFactsResultRatafiaPageProps.types'
 import { LayoutRatafia } from '../../organisms/LayoutRatafia'
-// import './KeyFactsResultRatafiaPage.scss'
+
+import { KeyFactsResultRatafiaPageStyled } from './KeyFactsResultRatafiaPage.styled'
 
 export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps> = ({
   header,
@@ -59,7 +60,7 @@ export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps>
   )
 
   return (
-    <div className='key-facts-result-page'>
+    <KeyFactsResultRatafiaPageStyled className='key-facts-result-page'>
       <LayoutRatafia
         header={header}
         content={isLoading ? loadingContent : loadedContent}
@@ -67,7 +68,7 @@ export const KeyFactsResultRatafiaPage: React.FC<KeyFactsResultRatafiaPageProps>
         footerDesktop={footerDesktop}
         footerMobile={footerMobile}
       />
-    </div>
+    </KeyFactsResultRatafiaPageStyled>
   )
 }
 

package/dist/src/components/pages/LoginRatafiaPage/LoginRatafiaPage.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { LayoutRatafia, LoginRatafiaContent } from '../../organisms';
 import { Button } from '../../atoms';
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
-// import './LoginPageRatafia.scss'
+import { LoginRatafiaPageStyled } from './LoginRatafiaPage.styled';
 export const LoginRatafiaPage = ({ header, loginContent, ctaAnalizeDocument, ctaSignIn, disclaimer }) => {
     const ctas = (_jsxs("div", { className: 'login-ratafia-page__ctas', children: [_jsx(Button, { givenClass: 'login-ratafia-page__ctas__button', color: 'primary', dataQa: ctaAnalizeDocument.dataQa, label: ctaAnalizeDocument.label, onClick: ctaAnalizeDocument.onClick, noLink: true, disabled: ctaAnalizeDocument.disabled }), _jsxs("span", { className: 'login-ratafia-page__ctas__signIn', children: [ctaSignIn.text, _jsx("button", { className: 'login-ratafia-page__ctas__signIn__button', "data-qa": ctaSignIn.link.dataQa, onClick: ctaSignIn.link.onClick, children: ctaSignIn.link.text })] })] }));
     const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, legalAdviceText: disclaimer.legalAdviceText, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
     const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctas] }));
     const content = (_jsx(LoginRatafiaContent, { title: loginContent.title, email: loginContent.email, policy: loginContent.policy }));
-    return (_jsx("div", { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx(LoginRatafiaPageStyled, { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };

package/dist/src/components/pages/LoginRatafiaPage/LoginRatafiaPage.styled.d.ts

@@ -0,0 +1 @@
+export declare const LoginRatafiaPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/pages/LoginRatafiaPage/{LoginPageRatafia.scss → LoginRatafiaPage.styled.js}

@@ -1,8 +1,7 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-
-.login-ratafia-page {
+import styled from 'styled-components';
+export const LoginRatafiaPageStyled = styled.div `
   background-color: var(--neutral-neutral-6);
+
   &__ctas {
     text-align: center;
     &__button {
@@ -10,6 +9,7 @@
       width: 100%;
       margin-bottom: 1rem;
     }
+
     &__signIn {
       &__button {
         background: none;
@@ -20,4 +20,4 @@
       }
     }
   }
-}
+`;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const LoginRatafiaPageStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+
+  &__ctas {
+    text-align: center;
+    &__button {
+      display: block;
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+
+    &__signIn {
+      &__button {
+        background: none;
+        border: none;
+        color: var(--primary-main);
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+`