@npm_leadtech/legal-lib-components 5.4.1 → 5.6.0

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

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 import { BoxForm } from '../../molecules'
 import { ContactJumbotron } from '../../organisms'
 import { type ContactSectionProps } from './ContactSectionProps'
-// import './ContactSection.scss'
+import { ContactSectionStyled } from './ContactSection.styled'
 
 export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps, contactForm }) => {
   return (
-    <section className='contact-container'>
+    <ContactSectionStyled className='contact-container'>
       <div className='wrapper wrapper--responsive wrapper--contact'>
         <div className='contact__main'>
           <div className='contact-left-container'>
@@ -20,6 +20,6 @@ export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps,
           </div>
         </div>
       </div>
-    </section>
+    </ContactSectionStyled>
   )
 }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardList } from '../../molecules';
-// import './ExpertsSection.scss'
+import { ExpertsSectionStyled } from './ExpertsSection.styled';
 const ExpertsSection = ({ title, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs("div", { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
 };
 export default ExpertsSection;

package/dist/src/components/sections/ExpertsSection/ExpertsSection.scss

@@ -15,7 +15,6 @@
     line-height: 42px;
     letter-spacing: -0.3px;
     text-align: center;
-    margin: 0 auto 5rem;
     width: 90%;
     transform: translateY(50px);
 

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

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

@@ -0,0 +1,27 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ExpertsSectionStyled = styled.div `
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
+
+  .experts-section {
+    &__title {
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      text-align: center;
+      margin: 0 auto 5rem;
+      width: 90%;
+      transform: translateY(50px);
+
+      @media ${device['landscape-tablets']} {
+        width: 100%;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ExpertsSectionStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--neutral-neutral-6);
+  margin-bottom: 4rem;
+
+  .experts-section {
+    &__title {
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      text-align: center;
+      margin: 0 auto 5rem;
+      width: 90%;
+      transform: translateY(50px);
+
+      @media ${device['landscape-tablets']} {
+        width: 100%;
+      }
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { ExpertCardList } from '../../molecules'
 import { type ExpertsSectionProps } from './ExpertsSectionProps.types'
-// import './ExpertsSection.scss'
+import { ExpertsSectionStyled } from './ExpertsSection.styled'
 
 const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
@@ -10,10 +10,10 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList
   }
 
   return (
-    <div className='experts-section'>
+    <ExpertsSectionStyled className='experts-section'>
       <h2 className='experts-section__title'>{title}</h2>
       <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
-    </div>
+    </ExpertsSectionStyled>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { FaqGroup } from '../../organisms';
-// import './FaqSection.scss'
+import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx("section", { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
 };

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

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

@@ -0,0 +1,29 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FaqSectionStyled = styled.section `
+  display: flex;
+  padding-bottom: 40px;
+  flex-direction: column;
+  gap: 40px;
+  max-width: 700px;
+  width: 100%;
+
+  .faq-ratafia-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1.5rem 5rem 1.5rem;
+    max-width: none;
+    background: var(--neutral-neutral-6);
+
+    @media ${device.laptop} {
+      padding: 3rem 2rem 5rem 2rem;
+    }
+    @media ${device.desktop} {
+      padding: 3rem 13.75rem 5rem 13.75rem;
+    }
+    @media ${device['desktop-xl']} {
+      padding: 3rem 28rem 5rem 28rem;
+    }
+  }
+`;

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

@@ -0,0 +1,30 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FaqSectionStyled = styled.section`
+  display: flex;
+  padding-bottom: 40px;
+  flex-direction: column;
+  gap: 40px;
+  max-width: 700px;
+  width: 100%;
+
+  .faq-ratafia-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1.5rem 5rem 1.5rem;
+    max-width: none;
+    background: var(--neutral-neutral-6);
+
+    @media ${device.laptop} {
+      padding: 3rem 2rem 5rem 2rem;
+    }
+    @media ${device.desktop} {
+      padding: 3rem 13.75rem 5rem 13.75rem;
+    }
+    @media ${device['desktop-xl']} {
+      padding: 3rem 28rem 5rem 28rem;
+    }
+  }
+`

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

@@ -3,16 +3,16 @@ import classNames from 'classnames'
 
 import { FaqGroup } from '../../organisms'
 import { type FaqSectionProps } from './FaqSectionProps'
-// import './FaqSection.scss'
+import { FaqSectionStyled } from './FaqSection.styled'
 
 export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
   const classnames = classNames(`faqSection ${givenClass ?? ''}`)
 
   return (
-    <section className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
+    <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
       {groups.map((group) => (
         <FaqGroup key={group.id} {...group} />
       ))}
-    </section>
+    </FaqSectionStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeaturesRatafiaContent } from '../../organisms';
-// import './FeaturesRatafiaSection.scss'
+import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled';
 const FeaturesRatafiaSection = ({ content, children }) => {
-    return (_jsx("section", { className: 'features-ratafia-section', children: _jsxs("div", { className: 'features-ratafia-section__wrapper', children: [_jsx("div", { className: 'features-ratafia-section__wrapper__content', children: _jsx(FeaturesRatafiaContent, { title: content.title, description: content.description, notReleasedText: content.notReleasedText, features: content.features }) }), _jsx("span", { className: 'features-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx(FeaturesRatafiaSectionStyled, { className: 'features-ratafia-section', children: _jsxs("div", { className: 'features-ratafia-section__wrapper', children: [_jsx("div", { className: 'features-ratafia-section__wrapper__content', children: _jsx(FeaturesRatafiaContent, { title: content.title, description: content.description, notReleasedText: content.notReleasedText, features: content.features }) }), _jsx("span", { className: 'features-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default FeaturesRatafiaSection;

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

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

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FeaturesRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+    gap: 1.5rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+    gap: 5rem;
+  }
+
+  .features-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      width: 100%;
+      max-width: 1200px;
+
+      @media ${device.laptop} {
+        gap: 1.5rem;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+      &__content {
+        width: 100%;
+      }
+
+      &__children {
+        display: none;
+        //TODO: Check again with the real container;
+        min-width: 50%;
+
+        @media ${device.desktop} {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,57 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FeaturesRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+    gap: 1.5rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+    gap: 5rem;
+  }
+
+  .features-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      width: 100%;
+      max-width: 1200px;
+
+      @media ${device.laptop} {
+        gap: 1.5rem;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+      &__content {
+        width: 100%;
+      }
+
+      &__children {
+        display: none;
+        //TODO: Check again with the real container;
+        min-width: 50%;
+
+        @media ${device.desktop} {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+`

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { FeaturesRatafiaContent } from '../../organisms'
 import { type FeaturesRatafiaSectionProps } from './FeaturesRatafiaSectionProps.types'
-// import './FeaturesRatafiaSection.scss'
+import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled'
 
 const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <section className='features-ratafia-section'>
+    <FeaturesRatafiaSectionStyled className='features-ratafia-section'>
       <div className='features-ratafia-section__wrapper'>
         <div className='features-ratafia-section__wrapper__content'>
           <FeaturesRatafiaContent
@@ -18,7 +18,7 @@ const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, chil
         </div>
         <span className='features-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </section>
+    </FeaturesRatafiaSectionStyled>
   )
 }
 

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardFunctionality } from '../../organisms';
+import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled';
 // import './FunctionalityCardsSection.scss'
 export const FunctionalityCardsSection = ({ cards = [] }) => {
     if (cards.length === 0)
         return null;
-    return (_jsx("section", { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
+    return (_jsx(FunctionalityCardsSectionStyled, { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
 };

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

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

@@ -0,0 +1,14 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FunctionalityCardsSectionStyled = styled.section `
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  margin-bottom: 2rem;
+  width: 100%;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    width: 50%;
+  }
+`;

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

@@ -0,0 +1,15 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FunctionalityCardsSectionStyled = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  margin-bottom: 2rem;
+  width: 100%;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    width: 50%;
+  }
+`

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

@@ -2,16 +2,17 @@ import React from 'react'
 
 import { CardFunctionality } from '../../organisms'
 import { type FunctionalityCardsSectionProps } from './FunctionalityCardsSectionProps'
+import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled'
 // import './FunctionalityCardsSection.scss'
 
 export const FunctionalityCardsSection: React.FC<FunctionalityCardsSectionProps> = ({ cards = [] }) => {
   if (cards.length === 0) return null
 
   return (
-    <section className='functionality-cards'>
+    <FunctionalityCardsSectionStyled className='functionality-cards'>
       {cards.map((card) => (
         <CardFunctionality key={card.id} {...card} />
       ))}
-    </section>
+    </FunctionalityCardsSectionStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
-// import './GuidelinesSection.scss'
+import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx("section", { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

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

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const GuidelinesSectionStyled = styled.section `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--neutral-neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+`;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const GuidelinesSectionStyled = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--neutral-neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+`

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { GuidelinesContent } from '../../organisms/GuidelinesContent'
 import { type GuidelinesSectionProps } from './GuidelinesSectionProps.types'
-// import './GuidelinesSection.scss'
+import { GuidelinesSectionStyled } from './GuidelinesSection.styled'
 
 const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) => {
   return (
-    <section className='guidelines-section'>
+    <GuidelinesSectionStyled className='guidelines-section'>
       <GuidelinesContent
         title={contentGuidelines.title}
         image={contentGuidelines.image}
@@ -14,7 +14,7 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
       >
         {contentGuidelines.children}
       </GuidelinesContent>
-    </section>
+    </GuidelinesSectionStyled>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled';
 import { ListStepsGetForm } from '../../organisms';
 import imageFile from '../../../../images/png/graphics-grey-02.png';
-// import './HowGetYourFormsSection.scss'
 const HowGetYourFormsSection = ({ title = '', steps = [], hasBackgroundImage = true }) => {
     if (steps.length === 0)
         return null;
-    return (_jsxs("section", { className: 'how-it-works-wrapper', style: hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}, children: [_jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
+    return (_jsxs(HowGetYourFormsSectionStyled, { className: 'how-it-works-wrapper', style: hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}, children: [_jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
 };
 export default HowGetYourFormsSection;

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

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

@@ -0,0 +1,24 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const HowGetYourFormsSectionStyled = styled.section `
+  background-color: var(--neutral-neutral-6);
+  @media ${device.laptop} {
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 21rem;
+  }
+
+  @media only screen and (max-width: ${size.md}) {
+    background-image: none !important;
+  }
+
+  .works-title {
+    width: auto;
+    font-family: var(--font-serif);
+    text-align: center;
+    padding-top: 4rem;
+    @media only screen and (max-width: ${size.md}) {
+      padding-top: 2.5rem;
+    }
+  }
+`;

package/dist/src/components/sections/HowGetYourFormsSection/{HowGetYourFormsSection.scss → HowGetYourFormsSection.styled.ts}

@@ -1,16 +1,15 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.how-it-works-wrapper {
+export const HowGetYourFormsSectionStyled = styled.section`
   background-color: var(--neutral-neutral-6);
-
-  @include laptop {
+  @media ${device.laptop} {
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 21rem;
   }
 
-  @media only screen and (max-width: #{$md}) {
+  @media only screen and (max-width: ${size.md}) {
     background-image: none !important;
   }
 
@@ -19,8 +18,8 @@
     font-family: var(--font-serif);
     text-align: center;
     padding-top: 4rem;
-    @media only screen and (max-width: #{$md}) {
+    @media only screen and (max-width: ${size.md}) {
       padding-top: 2.5rem;
     }
   }
-}
+`

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

@@ -2,9 +2,9 @@
 import React from 'react'
 
 import { type HowGetYourFormsSectionProps } from './HowGetYourFormsSectionProps.types'
+import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled'
 import { ListStepsGetForm } from '../../organisms'
 import imageFile from '../../../../images/png/graphics-grey-02.png'
-// import './HowGetYourFormsSection.scss'
 
 const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({
   title = '',
@@ -13,13 +13,13 @@ const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({
 }) => {
   if (steps.length === 0) return null
   return (
-    <section
+    <HowGetYourFormsSectionStyled
       className='how-it-works-wrapper'
       style={hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}}
     >
       <p className='works-title serif --super-large'>{title}</p>
       <ListStepsGetForm steps={steps} />
-    </section>
+    </HowGetYourFormsSectionStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent';
-// import './JumbotronRatafiaSection.scss'
+import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled';
 const JumbotronRatafiaSection = ({ content, children }) => {
-    return (_jsx("section", { className: 'jumbotron-ratafia-section background-ratafia-animation', id: 'ratafia-jumbotron', children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(JumbotronRatafiaContent, { title: content.title, tags: content.tags, body: content.body }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx(JumbotronRatafiaSectionStyled, { className: 'jumbotron-ratafia-section background-ratafia-animation', id: 'ratafia-jumbotron', children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(JumbotronRatafiaContent, { title: content.title, tags: content.tags, body: content.body }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default JumbotronRatafiaSection;

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

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