@npm_leadtech/legal-lib-components 5.6.0 → 5.7.1

package/dist/images/componentsSvg/RatafiaIcon24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface RatafiaIcon24pxProps {
+    className: string;
+}
+export declare const RatafiaIcon24px: FC<RatafiaIcon24pxProps>;
+export {};

package/dist/images/componentsSvg/RatafiaIcon24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatafiaIcon24px = ({ className }) => (_jsx("svg", { width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("g", { id: 'Icon/Symbol/AI_24px', children: _jsx("path", { id: 'path', fillRule: 'evenodd', clipRule: 'evenodd', d: 'M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z', fill: '#078080' }) }) }));

package/dist/images/componentsSvg/RatafiaIcon24px.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+interface RatafiaIcon24pxProps {
+  className: string
+}
+
+export const RatafiaIcon24px: FC<RatafiaIcon24pxProps> = ({ className }: RatafiaIcon24pxProps) => (
+  <svg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <g id='Icon/Symbol/AI_24px'>
+      <path
+        id='path'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z'
+        fill='#078080'
+      />
+    </g>
+  </svg>
+)

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

@@ -1,7 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactCardStyled } from './ContactCard.styled';
 const ContactCard = ({ id, title, image, body = '', url, isClickableOnDesktop = true, dataQa }) => {
-    const contactCardContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: 'contact-card__image', children: image }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }));
-    return (_jsx(ContactCardStyled, { children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card contact-card-desktop', "data-qa": dataQa, children: contactCardContent }), _jsx("a", { className: 'contact-card contact-card-mobile', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })] })) }, id));
+    return (_jsxs(ContactCardStyled, { className: 'contact-card', children: [_jsx("div", { className: 'contact-card__icon', children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card__icon__image', "data-qa": dataQa, href: url, target: '_self', children: image })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card__icon__image contact-card__icon__image-desktop', children: image }), _jsx("a", { className: 'contact-card__icon__image contact-card__icon__image-mobile', "data-qa": dataQa, href: url, children: image })] })) }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }, id));
 };
 export default ContactCard;

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

@@ -1,40 +1,38 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const ContactCardStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  border-radius: 0.25rem;
+  min-width: 200px;
+  padding: 1rem;
+
   .contact-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: white;
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-    border-radius: 0.25rem;
-    min-width: 12.5rem;
-    height: 7.875rem;
-    flex-shrink: 0;
-    padding: 1rem;
-    text-decoration: none;
-    color: var(--neutral-neutral-1);
-    &__image {
-      width: 2rem;
+    &__icon {
+      &__image {
+        width: 2rem;
+      }
+      &__image-desktop {
+        display: none;
+        @media ${device.laptop} {
+          display: block;
+        }
+      }
+      &__image-mobile {
+        @media ${device.laptop} {
+          display: none;
+        }
+      }
     }
     &__title {
       margin-top: 1rem;
-      font-size: 1rem;
-      line-height: 1.375rem;
+      line-height: 1rem;
     }
     &__text {
-      font-size: 0.75rem;
-    }
-  }
-  .contact-card-desktop {
-    display: none;
-    @media ${device.desktop} {
-      display: flex;
-    }
-  }
-  .contact-card-mobile {
-    @media ${device.desktop} {
-      display: none;
+      font-size: 14px;
     }
   }
 `;

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

@@ -2,40 +2,38 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const ContactCardStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  border-radius: 0.25rem;
+  min-width: 200px;
+  padding: 1rem;
+
   .contact-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: white;
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-    border-radius: 0.25rem;
-    min-width: 12.5rem;
-    height: 7.875rem;
-    flex-shrink: 0;
-    padding: 1rem;
-    text-decoration: none;
-    color: var(--neutral-neutral-1);
-    &__image {
-      width: 2rem;
+    &__icon {
+      &__image {
+        width: 2rem;
+      }
+      &__image-desktop {
+        display: none;
+        @media ${device.laptop} {
+          display: block;
+        }
+      }
+      &__image-mobile {
+        @media ${device.laptop} {
+          display: none;
+        }
+      }
     }
     &__title {
       margin-top: 1rem;
-      font-size: 1rem;
-      line-height: 1.375rem;
+      line-height: 1rem;
     }
     &__text {
-      font-size: 0.75rem;
-    }
-  }
-  .contact-card-desktop {
-    display: none;
-    @media ${device.desktop} {
-      display: flex;
-    }
-  }
-  .contact-card-mobile {
-    @media ${device.desktop} {
-      display: none;
+      font-size: 14px;
     }
   }
 `

package/dist/src/components/atoms/ContactCard/ContactCard.tsx

@@ -13,30 +13,24 @@ const ContactCard: FC<ContactCardProps> = ({
   isClickableOnDesktop = true,
   dataQa
 }) => {
-  const contactCardContent = (
-    <>
-      <div className='contact-card__image'>{image}</div>
-      <div className='contact-card__title'>{title}</div>
-      <p className='contact-card__text'>{body}</p>
-    </>
-  )
-
   return (
-    <ContactCardStyled key={id}>
-      {isClickableOnDesktop ? (
-        <a className='contact-card' data-qa={dataQa} href={url} target='_self'>
-          {contactCardContent}
-        </a>
-      ) : (
-        <div>
-          <div className='contact-card contact-card-desktop' data-qa={dataQa}>
-            {contactCardContent}
-          </div>
-          <a className='contact-card contact-card-mobile' data-qa={dataQa} href={url} target='_self'>
-            {contactCardContent}
+    <ContactCardStyled className='contact-card' key={id}>
+      <div className='contact-card__icon'>
+        {isClickableOnDesktop ? (
+          <a className='contact-card__icon__image' data-qa={dataQa} href={url} target='_self'>
+            {image}
           </a>
-        </div>
-      )}
+        ) : (
+          <div>
+            <div className='contact-card__icon__image contact-card__icon__image-desktop'>{image}</div>
+            <a className='contact-card__icon__image contact-card__icon__image-mobile' data-qa={dataQa} href={url}>
+              {image}
+            </a>
+          </div>
+        )}
+      </div>
+      <div className='contact-card__title'>{title}</div>
+      <p className='contact-card__text'>{body}</p>
     </ContactCardStyled>
   )
 }

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

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
+import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
-const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
     if (type === 'new') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
     }
+    if (type === 'ai_reviewed') {
+        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-ai-reviewed', children: [_jsx(RatafiaIcon24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusAIReviewedText })] }));
+    }
     return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
 };
 export default DocumentStatus;

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

@@ -61,5 +61,19 @@ export const DocumentStatusStyled = styled.div `
         margin-right: 1.4rem;
       }
     }
+
+    &.--is-ai-reviewed {
+      padding: 0.25rem;
+      gap: 0.25rem;
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
+      }
+    }
   }
 `;

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

@@ -62,5 +62,19 @@ export const DocumentStatusStyled = styled.div`
         margin-right: 1.4rem;
       }
     }
+
+    &.--is-ai-reviewed {
+      padding: 0.25rem;
+      gap: 0.25rem;
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
+      }
+    }
   }
 `

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.tsx

@@ -4,13 +4,15 @@ import { type DocumentStatusProps } from './DocumentStatusProps.types'
 import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
+import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
 const DocumentStatus: FC<DocumentStatusProps> = ({
   type,
   statusCompletedText,
   statusNewText,
-  statusInProgressText
+  statusInProgressText,
+  statusAIReviewedText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
@@ -26,6 +28,13 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
       </DocumentStatusStyled>
     )
   }
+  if (type === 'ai_reviewed') {
+    return (
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-ai-reviewed'}>
+        <RatafiaIcon24px className='icon' /> <span className={'sans-serif --small'}>{statusAIReviewedText}</span>
+      </DocumentStatusStyled>
+    )
+  }
   return (
     <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
       <Time24px className='icon' />

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts

@@ -3,4 +3,5 @@ export interface DocumentStatusProps {
     statusCompletedText: string;
     statusNewText: string;
     statusInProgressText: string;
+    statusAIReviewedText: string;
 }

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -3,4 +3,5 @@ export interface DocumentStatusProps {
   statusCompletedText: string
   statusNewText: string
   statusInProgressText: string
+  statusAIReviewedText: string
 }

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

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 export const RichTextStrapiStyled = styled.div `
-  ul li,
-  ol li {
-    margin-bottom: 1rem;
+  &.richt-text-strapi {
+    & ul li,
+    ol li {
+      margin-bottom: 1rem;
+    }
   }
 `;

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

@@ -1,8 +1,10 @@
 import styled from 'styled-components'
 
 export const RichTextStrapiStyled = styled.div`
-  ul li,
-  ol li {
-    margin-bottom: 1rem;
+  &.richt-text-strapi {
+    & ul li,
+    ol li {
+      margin-bottom: 1rem;
+    }
   }
 `

package/dist/src/components/molecules/ExpertCardList/ExpertCardList.scss

@@ -3,12 +3,11 @@
 
 .expert-card-list {
   display: flex;
-  flex-flow: column;
-  gap: 0 2rem;
+  flex-direction: column;
   justify-content: center;
   margin: 2rem 0 3rem 0;
 
   @include landscape-tablets {
-    flex-flow: row wrap;
+    flex-direction: row;
   }
 }

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.scss

@@ -64,7 +64,7 @@
   }
 
   &.primary {
-    background-color: var(--neutral-neutral-6);
+    background-color: get-color(neutral, neutral-6);
 
     .icon-svg-with-theme-color {
       background-color: get-color(primary, main-light-1);

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 { ErrorRatafiaPageStyled } from './ErrorRatafiaPage.styled';
+// import './ErrorRatafiaPage.scss'
 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(ErrorRatafiaPageStyled, { className: 'error-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx("div", { 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.ts → ErrorRatafiaPage.scss}

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

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

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

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 { FaqsPageStyled } from './FaqsPage.styled';
+// import './FaqsPage.scss'
 export const FaqsPage = ({ title, subtitle, asideMenuSectionProps, 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 })] })] }));
+    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 })] })] }));
 };

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

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

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

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

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 { KeyFactsResultRatafiaPageStyled } from './KeyFactsResultRatafiaPage.styled';
+// import './KeyFactsResultRatafiaPage.scss'
 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(KeyFactsResultRatafiaPageStyled, { className: 'key-facts-result-page', children: _jsx(LayoutRatafia, { header: header, content: isLoading ? loadingContent : loadedContent, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx("div", { 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.js → KeyFactsResultRatafiaPage.scss}

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

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

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

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

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

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 { LoginRatafiaPageStyled } from './LoginRatafiaPage.styled';
+// import './LoginPageRatafia.scss'
 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(LoginRatafiaPageStyled, { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    return (_jsx("div", { className: 'login-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctas, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };

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

@@ -5,7 +5,7 @@ import { Button } from '../../atoms'
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { type LoginRatafiaPageProps } from './LoginRatafiaPageProps'
 
-import { LoginRatafiaPageStyled } from './LoginRatafiaPage.styled'
+// import './LoginPageRatafia.scss'
 
 export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
   header,
@@ -60,7 +60,7 @@ export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
   )
 
   return (
-    <LoginRatafiaPageStyled className='login-ratafia-page'>
+    <div className='login-ratafia-page'>
       <LayoutRatafia
         header={header}
         content={content}
@@ -68,6 +68,6 @@ export const LoginRatafiaPage: React.FC<LoginRatafiaPageProps> = ({
         footerDesktop={footerDesktop}
         footerMobile={footerMobile}
       />
-    </LoginRatafiaPageStyled>
+    </div>
   )
 }