@npm_leadtech/legal-lib-components 5.4.1 → 5.6.0

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;

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;
+      }
+    }
+  }
+`

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

package/dist/src/components/sections/AboutUsSection/AboutUsSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AboutUsContent } from '../../organisms/AboutUsContent';
-// import './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled';
 const AboutUsSection = ({ title, subTitle, contentAboutUs }) => {
-    return (_jsx("div", { className: 'about-us-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'about-us-section__title', children: _jsx("span", { className: 'about-us-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'about-us-section__sub-title', children: subTitle }), _jsx(AboutUsContent, { image: contentAboutUs.image, button: contentAboutUs?.button, children: contentAboutUs.children })] }) }));
+    return (_jsx(AboutUsSectionStyled, { className: 'about-us-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'about-us-section__title', children: _jsx("span", { className: 'about-us-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'about-us-section__sub-title', children: subTitle }), _jsx(AboutUsContent, { image: contentAboutUs.image, button: contentAboutUs?.button, children: contentAboutUs.children })] }) }));
 };
 export default AboutUsSection;

package/dist/src/components/sections/AboutUsSection/AboutUsSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const AboutUsSectionStyled: 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/sections/AboutUsSection/AboutUsSection.styled.js

@@ -0,0 +1,53 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AboutUsSectionStyled = styled.div `
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__title {
+      text-align: center;
+      margin-bottom: 1rem;
+      &__text {
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        line-height: 1.2;
+        font-weight: 700;
+        font-family: var(--font-sans);
+        color: var(--neutral-neutral-2);
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--neutral-neutral-3);
+      }
+    }
+
+    &__sub-title {
+      margin-bottom: 1.5rem;
+      text-align: center;
+      font-size: 2rem;
+      line-height: 1.2;
+      letter-spacing: -0.4px;
+      font-weight: 400;
+      font-family: var(--font-serif);
+      color: var(--neutral-neutral-1);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.laptop} {
+        font-size: 3rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AboutUsSectionStyled = styled.div`
+  padding-top: 1.125rem;
+  background: var(--primary-main-light-6);
+  margin-bottom: 3rem;
+
+  @media ${device.laptop} {
+    margin-bottom: 5rem;
+  }
+
+  .about-us-section {
+    &__title {
+      text-align: center;
+      margin-bottom: 1rem;
+      &__text {
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        line-height: 1.2;
+        font-weight: 700;
+        font-family: var(--font-sans);
+        color: var(--neutral-neutral-2);
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--neutral-neutral-3);
+      }
+    }
+
+    &__sub-title {
+      margin-bottom: 1.5rem;
+      text-align: center;
+      font-size: 2rem;
+      line-height: 1.2;
+      letter-spacing: -0.4px;
+      font-weight: 400;
+      font-family: var(--font-serif);
+      color: var(--neutral-neutral-1);
+
+      @media ${device['landscape-tablets']} {
+        font-size: 2.3rem;
+        max-width: $sm;
+        margin: 0 auto 2rem auto;
+      }
+
+      @media ${device.desktop} {
+        max-width: 792px;
+      }
+
+      @media ${device.laptop} {
+        font-size: 3rem;
+      }
+    }
+  }
+`

package/dist/src/components/sections/AboutUsSection/AboutUsSection.tsx

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 
 import { AboutUsContent } from '../../organisms/AboutUsContent'
 import { type AboutUsSectionProps } from './AboutUsSectionProps.types'
-// import './AboutUsSection.scss'
+import { AboutUsSectionStyled } from './AboutUsSection.styled'
 
 const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAboutUs }) => {
   return (
-    <div className='about-us-section'>
+    <AboutUsSectionStyled className='about-us-section'>
       <div className='wrapper wrapper--responsive'>
         <div className='about-us-section__title'>
           <span className='about-us-section__title__text'>{title}</span>
@@ -18,7 +18,7 @@ const AboutUsSection: FC<AboutUsSectionProps> = ({ title, subTitle, contentAbout
           {contentAboutUs.children}
         </AboutUsContent>
       </div>
-    </div>
+    </AboutUsSectionStyled>
   )
 }
 

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsSeeInContent, ContactContent } from '../../organisms';
-// import './AsSeeInSection.scss'
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled';
 const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
+    return (_jsxs(AsSeeInSectionStyled, { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
 };
 export default AsSeeInSection;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.styled.d.ts

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