@npm_leadtech/legal-lib-components 5.3.10 → 5.3.12

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 { 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>
   )
 }

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 } 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 })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
+    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 })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
 };
 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;

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

@@ -0,0 +1,97 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AsSeeInSectionStyled = styled.section `
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      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;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__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;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,98 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const AsSeeInSectionStyled = styled.section`
+  flex-shrink: 0;
+  background-color: get-color(secondary, main-light-5);
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+    background: get-color(others, white);
+    transform: translateY(-5rem);
+    padding: 1.5rem 0;
+
+    @media ${device.laptop} {
+      transform: translateY(-50%);
+    }
+
+    &__title {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      font-size: 32px;
+      font-family: var(--font-serif);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      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;
+
+    &__title {
+      text-align: center;
+      font-size: 32px;
+      font-family: $font-serif;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      margin: 1rem 0;
+    }
+
+    &__text {
+      text-align: center;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0 0 2rem 0;
+    }
+
+    &-blocks {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: 1rem;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+
+      &__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;
+
+        &__image {
+          width: 2rem;
+        }
+
+        &__title {
+          margin-top: 1rem;
+          line-height: 1rem;
+        }
+
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { AsSeeInContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
-// import './AsSeeInSection.scss'
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
 
 const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   title,
@@ -16,7 +16,7 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   }
 
   return (
-    <section className='as-seen-in-section-box'>
+    <AsSeeInSectionStyled className='as-seen-in-section-box'>
       <div className='as-seen-in-section wrapper'>
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
@@ -38,7 +38,7 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
           )}
         </div>
       )}
-    </section>
+    </AsSeeInSectionStyled>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './AsideMenuSection.scss'
+import { AsideMenuSectionStyled } from './AsideMenuSection.styled';
 export const AsideMenuSection = ({ items, title = '', onClickHandler }) => {
-    return (_jsxs("aside", { className: 'asideMenu', children: [title.length > 0 && _jsx("div", { className: 'title sans-serif --big', children: title }), _jsx("ul", { className: 'list', children: items.map((item, index) => (_jsx("li", { className: `navItem ${index === 0 ? 'inView' : ''}`, id: `list-item-${item.slug}`, onClick: onClickHandler, onKeyUp: () => onClickHandler, role: 'menuitem', children: onClickHandler !== undefined ? _jsx("span", { children: item.text }) : _jsx("a", { href: `#${item.slug}`, children: item.text }) }, item.id))) })] }));
+    return (_jsxs(AsideMenuSectionStyled, { className: 'asideMenu', children: [title.length > 0 && _jsx("div", { className: 'title sans-serif --big', children: title }), _jsx("ul", { className: 'list', children: items.map((item, index) => (_jsx("li", { className: `navItem ${index === 0 ? 'inView' : ''}`, id: `list-item-${item.slug}`, onClick: onClickHandler, onKeyUp: () => onClickHandler, role: 'menuitem', children: onClickHandler !== undefined ? _jsx("span", { children: item.text }) : _jsx("a", { href: `#${item.slug}`, children: item.text }) }, item.id))) })] }));
 };