@npm_leadtech/legal-lib-components 5.7.1 → 5.7.3

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.scss

@@ -4,6 +4,7 @@
 .as-seen-in-section-box {
   flex-shrink: 0;
   background-color: get-color(secondary, main-light-5);
+  padding: 0 1.5rem;
 
   @include laptop {
     margin-top: 12rem;

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,36 @@
+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);
+  padding: 0 1.5rem;
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 6px 0 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;
+    }
+  }
+`;

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

@@ -0,0 +1,37 @@
+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);
+  padding: 0 1.5rem;
+
+  @media ${device.laptop} {
+    margin-top: 12rem;
+  }
+
+  .as-seen-in-section {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 6px 0 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;
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { AsSeeInContent, ContactContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
-// import './AsSeeInSection.scss'
+import { AsSeeInSectionStyled } from './AsSeeInSection.styled'
 
 const AsSeeInSection: FC<AsSeeInSectionProps> = ({
   title,
@@ -16,13 +16,13 @@ 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>
       </div>
       <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
-    </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))) })] }));
 };

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

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+export const AsideMenuSectionStyled = styled.aside `
+  &.asideMenu {
+    .title {
+      color: var(--neutral-neutral-1);
+      font-weight: bold;
+      padding-bottom: 1rem;
+      border-bottom: var(--neutral-neutral-4) 1px solid;
+      margin-bottom: 1.5rem;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      top: 17%;
+    }
+
+    .navItem {
+      color: var(--neutral-neutral-1);
+      font-size: 14px;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+      padding: 16px 0;
+      border-top: var(--neutral-neutral-4) 1px solid;
+      border-bottom: var(--neutral-neutral-4) 1px solid;
+
+      span {
+        cursor: pointer;
+      }
+
+      &.inView {
+        span,
+        a {
+          color: var(--primary-main);
+          font-weight: 700;
+        }
+      }
+
+      &:first-child {
+        padding-top: 0;
+        border: none;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+        border: none;
+      }
+    }
+  }
+`;