@npm_leadtech/legal-lib-components 5.7.1 → 5.7.3

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

@@ -32,15 +32,28 @@ export const CardPaneStyled = styled.div `
       }
       &:nth-child(2) {
         text-align: right;
+        padding-right: 0;
         @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
           text-align: left;
         }
       }
       &:nth-child(3) {
         margin-top: 30px;
+        padding-right: 0;
       }
-      &:last-child {
+
+      &:nth-child(4) {
+        margin-top: 45px;
+        text-align: right;
         padding-right: 0;
+        @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+          text-align: left;
+          margin-top: 16px;
+        }
+        .pane--title {
+          font-size: 0.75rem;
+          padding: 0;
+        }
       }
       span {
         display: block;
@@ -51,6 +64,8 @@ export const CardPaneStyled = styled.div `
       }
     }
     &--title {
+      border: none;
+      background: none;
       color: var(--neutral-neutral-2);
       font-size: 0.875rem;
       line-height: 1.29;
@@ -63,6 +78,9 @@ export const CardPaneStyled = styled.div `
       @media ${device.laptop} {
         font-size: 0.875rem;
       }
+      &.pane--title--button {
+        cursor: pointer;
+      }
     }
     &--description {
       color: var(--neutral-main);

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

@@ -33,15 +33,28 @@ export const CardPaneStyled = styled.div`
       }
       &:nth-child(2) {
         text-align: right;
+        padding-right: 0;
         @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
           text-align: left;
         }
       }
       &:nth-child(3) {
         margin-top: 30px;
+        padding-right: 0;
       }
-      &:last-child {
+
+      &:nth-child(4) {
+        margin-top: 45px;
+        text-align: right;
         padding-right: 0;
+        @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+          text-align: left;
+          margin-top: 16px;
+        }
+        .pane--title {
+          font-size: 0.75rem;
+          padding: 0;
+        }
       }
       span {
         display: block;
@@ -52,6 +65,8 @@ export const CardPaneStyled = styled.div`
       }
     }
     &--title {
+      border: none;
+      background: none;
       color: var(--neutral-neutral-2);
       font-size: 0.875rem;
       line-height: 1.29;
@@ -64,6 +79,9 @@ export const CardPaneStyled = styled.div`
       @media ${device.laptop} {
         font-size: 0.875rem;
       }
+      &.pane--title--button {
+        cursor: pointer;
+      }
     }
     &--description {
       color: var(--neutral-main);

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -8,8 +9,8 @@ const CardPaneInfo = ({ description, subdescription, id, title }) => {
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
-    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+    return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };
 export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -4,7 +4,18 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
+  const paneTitle = (
+    <>
+      {handleClick ? (
+        <button onClick={handleClick} className='pane--title pane--title--button'>
+          {title}
+        </button>
+      ) : (
+        <div className='pane--title'>{title}</div>
+      )}
+    </>
+  )
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -14,7 +25,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        <div className='pane--title'>{title}</div>
+        {paneTitle}
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -26,7 +37,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      <div className='pane--title'>{title}</div>
+      {paneTitle}
       <div className='pane--description'>
         {description}
         {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,4 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
+    handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,4 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
+  handleClick?: () => void
 }

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactCardStyled } from './ContactCard.styled';
 const ContactCard = ({ id, title, image, body = '', url, isClickableOnDesktop = true, dataQa }) => {
-    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));
+    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));
 };
 export default ContactCard;

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

@@ -1,38 +1,40 @@
 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 {
-    &__icon {
-      &__image {
-        width: 2rem;
-      }
-      &__image-desktop {
-        display: none;
-        @media ${device.laptop} {
-          display: block;
-        }
-      }
-      &__image-mobile {
-        @media ${device.laptop} {
-          display: none;
-        }
-      }
+    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;
     }
     &__title {
       margin-top: 1rem;
-      line-height: 1rem;
+      font-size: 1rem;
+      line-height: 1.375rem;
     }
     &__text {
-      font-size: 14px;
+      font-size: 0.75rem;
+    }
+  }
+  .contact-card-desktop {
+    display: none;
+    @media ${device.desktop} {
+      display: flex;
+    }
+  }
+  .contact-card-mobile {
+    @media ${device.desktop} {
+      display: none;
     }
   }
 `;

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

@@ -2,38 +2,40 @@ 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 {
-    &__icon {
-      &__image {
-        width: 2rem;
-      }
-      &__image-desktop {
-        display: none;
-        @media ${device.laptop} {
-          display: block;
-        }
-      }
-      &__image-mobile {
-        @media ${device.laptop} {
-          display: none;
-        }
-      }
+    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;
     }
     &__title {
       margin-top: 1rem;
-      line-height: 1rem;
+      font-size: 1rem;
+      line-height: 1.375rem;
     }
     &__text {
-      font-size: 14px;
+      font-size: 0.75rem;
+    }
+  }
+  .contact-card-desktop {
+    display: none;
+    @media ${device.desktop} {
+      display: flex;
+    }
+  }
+  .contact-card-mobile {
+    @media ${device.desktop} {
+      display: none;
     }
   }
 `

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

@@ -13,24 +13,30 @@ const ContactCard: FC<ContactCardProps> = ({
   isClickableOnDesktop = true,
   dataQa
 }) => {
-  return (
-    <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 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>
+  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}
+          </a>
+        </div>
+      )}
     </ContactCardStyled>
   )
 }

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

@@ -2,18 +2,14 @@ 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, statusAIReviewedText }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText }) => {
     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,19 +61,5 @@ 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,19 +62,5 @@ 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,15 +4,13 @@ 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,
-  statusAIReviewedText
+  statusInProgressText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
@@ -28,13 +26,6 @@ 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,5 +3,4 @@ export interface DocumentStatusProps {
     statusCompletedText: string;
     statusNewText: string;
     statusInProgressText: string;
-    statusAIReviewedText: string;
 }

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

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

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

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

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

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

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

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

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

@@ -64,7 +64,7 @@
   }
 
   &.primary {
-    background-color: get-color(neutral, neutral-6);
+    background-color: var(--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 './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;