@npm_leadtech/legal-lib-components 5.5.0 → 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/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/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;

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

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

@@ -0,0 +1,52 @@
+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;
+      }
+    }
+  }
+`

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

@@ -1,11 +1,11 @@
 import React from 'react'
 
 import { type AsideMenuSectionProps } from './AsideMenuSectionProps'
-// import './AsideMenuSection.scss'
+import { AsideMenuSectionStyled } from './AsideMenuSection.styled'
 
 export const AsideMenuSection: React.FC<AsideMenuSectionProps> = ({ items, title = '', onClickHandler }) => {
   return (
-    <aside className='asideMenu'>
+    <AsideMenuSectionStyled className='asideMenu'>
       {title.length > 0 && <div className='title sans-serif --big'>{title}</div>}
       <ul className='list'>
         {items.map((item, index) => (
@@ -21,6 +21,6 @@ export const AsideMenuSection: React.FC<AsideMenuSectionProps> = ({ items, title
           </li>
         ))}
       </ul>
-    </aside>
+    </AsideMenuSectionStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BenefitRatafiaCardList } from '../../molecules';
-// import './BenefitsRatafiaSection.scss'
+import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled';
 const BenefitsRatafiaSection = ({ title, description, benefits }) => {
-    return (_jsx("section", { className: 'benefit-ratafia-section', children: _jsxs("div", { className: 'benefit-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
+    return (_jsx(BenefitsRatafiaSectionStyled, { className: 'benefit-ratafia-section', children: _jsxs("div", { className: 'benefit-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'benefit-ratafia-section__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text', children: title }), _jsx("p", { className: 'sans-serif --super-medium benefit-ratafia-section__wrapper__title__description', children: description })] }), _jsx(BenefitRatafiaCardList, { benefits: benefits })] }) }));
 };
 export default BenefitsRatafiaSection;

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

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

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BenefitsRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .benefit-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem;
+      }
+      @media ${device.laptop} {
+        padding: 3rem;
+      }
+
+      &__title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 1rem;
+
+        &__text {
+          color: var(--others-white);
+        }
+        &__description {
+          color: var(--others-white);
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BenefitsRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .benefit-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem;
+      }
+      @media ${device.laptop} {
+        padding: 3rem;
+      }
+
+      &__title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 1rem;
+
+        &__text {
+          color: var(--others-white);
+        }
+        &__description {
+          color: var(--others-white);
+        }
+      }
+    }
+  }
+`

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { BenefitRatafiaCardList } from '../../molecules'
 import { type BenefitsRatafiaSectionProps } from './BenefitsRatafiaSectionProps.types'
-// import './BenefitsRatafiaSection.scss'
+import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled'
 
 const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({ title, description, benefits }) => {
   return (
-    <section className='benefit-ratafia-section'>
+    <BenefitsRatafiaSectionStyled className='benefit-ratafia-section'>
       <div className='benefit-ratafia-section__wrapper background-ratafia-animation'>
         <div className='benefit-ratafia-section__wrapper__title'>
           <h2 className='sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text'>
@@ -18,7 +18,7 @@ const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({ title, descri
         </div>
         <BenefitRatafiaCardList benefits={benefits} />
       </div>
-    </section>
+    </BenefitsRatafiaSectionStyled>
   )
 }
 

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArticlesList } from '../../organisms';
+import { BlogSectionStyled } from './BlogSection.styled';
 import { Button } from '../../atoms';
 // import './BlogSection.scss'
 const BlogSection = ({ blogTitle, blogCta, articles }) => {
     if (articles.articles?.length === 0)
         return null;
-    return (_jsxs("div", { className: 'blog', children: [_jsx("h2", { className: 'serif --super-large blog__title', children: blogTitle }), _jsx(ArticlesList, { articles: articles.articles }), _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
+    return (_jsxs(BlogSectionStyled, { className: 'blog', children: [_jsx("h2", { className: 'serif --super-large blog__title', children: blogTitle }), _jsx(ArticlesList, { articles: articles.articles }), _jsx(Button, { dataQa: '', color: 'secondary', label: blogCta, givenClass: 'cta-button', link: '/articles' })] }));
 };
 export default BlogSection;

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

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

@@ -0,0 +1,32 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BlogSectionStyled = styled.div `
+  text-align: center;
+  margin: 0 auto 3rem;
+  padding: 0 1rem;
+  max-width: ${size.md};
+
+  @media ${device.laptop} {
+    padding: 0;
+  }
+  @media ${device.desktop} {
+    max-width: ${size.lg};
+  }
+
+  .blog__title {
+    color: var(--primary-main-dark-1);
+
+    @media ${device.laptop} {
+      margin-bottom: 3rem;
+    }
+  }
+
+  .cta-button {
+    width: 100%;
+    margin-top: 3rem;
+    display: inline-block;
+    @media ${device['landscape-tablets']} {
+      width: auto;
+    }
+  }
+`;