@npm_leadtech/legal-lib-components 5.4.1 → 5.6.0

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

@@ -1,15 +1,15 @@
 import React from 'react'
 
 import { type LegalSectionProps } from './LegalSectionProps'
+import { LegalSectionStyled } from './LegalSection.styled'
 import { RichTextStrapi } from '../../atoms'
-// import './LegalSection.scss'
 
 export const LegalSection: React.FC<LegalSectionProps> = ({ text }) => {
   return (
-    <section className={'wrapper'}>
+    <LegalSectionStyled className={'wrapper'}>
       <div className='legal'>
         <RichTextStrapi {...text} />
       </div>
-    </section>
+    </LegalSectionStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules';
-// import './MidBannerRatafiaSection.scss'
+import { MidBannerRatafiaSectionStyled } from './MidBannerRatafiaSection.styled';
 const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image }) => {
-    return (_jsx("section", { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: 'mid-banner-ratafia-section__wrapper', children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: 'mid-banner-ratafia-section__wrapper__sample', children: _jsx(MidBannerRatafiaSample, { image: image }) })] }) }));
+    return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: 'mid-banner-ratafia-section__wrapper', children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: 'mid-banner-ratafia-section__wrapper__sample', children: _jsx(MidBannerRatafiaSample, { image: image }) })] }) }));
 };
 export default MidBannerRatafiaSection;

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

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

@@ -0,0 +1,46 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MidBannerRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.desktop} {
+    padding: 3rem 2rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 7.5rem;
+  }
+
+  .mid-banner-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex: 1 0 0;
+
+      padding: 2rem;
+      gap: 3rem;
+
+      max-width: 1200px;
+
+      border-radius: 16px;
+      background: var(--neutral-neutral-6);
+
+      @media ${device.desktop} {
+        padding: 3rem 5rem 0.5rem 4rem;
+        gap: 5rem;
+      }
+
+      &__sample {
+        display: none;
+
+        @media ${device.desktop} {
+          display: block;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,47 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const MidBannerRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.desktop} {
+    padding: 3rem 2rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 3rem 7.5rem;
+  }
+
+  .mid-banner-ratafia-section {
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex: 1 0 0;
+
+      padding: 2rem;
+      gap: 3rem;
+
+      max-width: 1200px;
+
+      border-radius: 16px;
+      background: var(--neutral-neutral-6);
+
+      @media ${device.desktop} {
+        padding: 3rem 5rem 0.5rem 4rem;
+        gap: 5rem;
+      }
+
+      &__sample {
+        display: none;
+
+        @media ${device.desktop} {
+          display: block;
+        }
+      }
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules'
 import { type MidBannerRatafiaSectionProps } from './MidBannerRatafiaSectionProps.types'
-// import './MidBannerRatafiaSection.scss'
+import { MidBannerRatafiaSectionStyled } from './MidBannerRatafiaSection.styled'
 
 const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
   title,
@@ -13,7 +13,7 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
   image
 }) => {
   return (
-    <section className='mid-banner-ratafia-section'>
+    <MidBannerRatafiaSectionStyled className='mid-banner-ratafia-section'>
       <div className='mid-banner-ratafia-section__wrapper'>
         <MidBannerRatafiaContent
           title={title}
@@ -26,7 +26,7 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
           <MidBannerRatafiaSample image={image} />
         </div>
       </div>
-    </section>
+    </MidBannerRatafiaSectionStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PeopleSayAboutUsSectionStyled } from './PeopleSayAboutUsSection.styled';
 import { TrustPilot } from '../../atoms';
-// import './PeopleSayAboutUsSection.scss'
 const PeopleSayAboutUsSection = ({ title, testimonialsSectionContent, contentTrustPilot }) => {
-    return (_jsxs("section", { className: 'people-say', children: [Boolean(title) && _jsx("h2", { className: 'people-say__title', children: title }), testimonialsSectionContent, contentTrustPilot && _jsx(TrustPilot, { children: contentTrustPilot.children })] }));
+    return (_jsxs(PeopleSayAboutUsSectionStyled, { className: 'people-say', children: [Boolean(title) && _jsx("h2", { className: 'people-say__title', children: title }), testimonialsSectionContent, contentTrustPilot && _jsx(TrustPilot, { children: contentTrustPilot.children })] }));
 };
 export default PeopleSayAboutUsSection;

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

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

@@ -0,0 +1,43 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PeopleSayAboutUsSectionStyled = styled.section `
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 0;
+  }
+
+  @media ${device.desktop} {
+    max-width: ${size.lg};
+  }
+
+  .people-say {
+    &__title {
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      text-align: center;
+    }
+  }
+
+  .richt-text-strapi {
+    text-align: left;
+    margin-top: 2rem;
+
+    > p,
+    > blockquote {
+      margin-top: 1.5rem;
+    }
+
+    blockquote {
+      padding: 1rem;
+      background: var(--neutral-neutral-6);
+      border-radius: 4px;
+    }
+  }
+`;

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

@@ -0,0 +1,44 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PeopleSayAboutUsSectionStyled = styled.section`
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 0;
+  }
+
+  @media ${device.desktop} {
+    max-width: ${size.lg};
+  }
+
+  .people-say {
+    &__title {
+      font-family: var(--font-serif);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+      text-align: center;
+    }
+  }
+
+  .richt-text-strapi {
+    text-align: left;
+    margin-top: 2rem;
+
+    > p,
+    > blockquote {
+      margin-top: 1.5rem;
+    }
+
+    blockquote {
+      padding: 1rem;
+      background: var(--neutral-neutral-6);
+      border-radius: 4px;
+    }
+  }
+`

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

@@ -3,8 +3,8 @@
 import React, { type FC } from 'react'
 
 import { type PeopleSayAboutUsSectionProps } from './PeopleSayAboutUsSectionProps.types'
+import { PeopleSayAboutUsSectionStyled } from './PeopleSayAboutUsSection.styled'
 import { TrustPilot } from '../../atoms'
-// import './PeopleSayAboutUsSection.scss'
 
 const PeopleSayAboutUsSection: FC<PeopleSayAboutUsSectionProps> = ({
   title,
@@ -12,11 +12,11 @@ const PeopleSayAboutUsSection: FC<PeopleSayAboutUsSectionProps> = ({
   contentTrustPilot
 }) => {
   return (
-    <section className='people-say'>
+    <PeopleSayAboutUsSectionStyled className='people-say'>
       {Boolean(title) && <h2 className='people-say__title'>{title}</h2>}
       {testimonialsSectionContent}
       {contentTrustPilot && <TrustPilot>{contentTrustPilot.children}</TrustPilot>}
-    </section>
+    </PeopleSayAboutUsSectionStyled>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StepsRatafiaContent } from '../../organisms';
+import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled';
 import { Video } from '../../atoms';
-// import './StepsRatafiaSection.scss'
 const StepsRatafiaSection = ({ title, steps, videoUrl }) => {
-    return (_jsx("section", { className: 'steps-ratafia-section', children: _jsxs("div", { className: 'steps-ratafia-section__wrapper', children: [_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, autoPlay: true, loop: true }) }), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps }) })] }) }));
+    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: 'steps-ratafia-section__wrapper', children: [_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, autoPlay: true, loop: true }) }), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps }) })] }) }));
 };
 export default StepsRatafiaSection;

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

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

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const StepsRatafiaSectionStyled = styled.section `
+  z-index: 999;
+  width: 100%;
+
+  @media ${device.desktop} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .steps-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      gap: 3rem;
+      padding: 2rem 1.5rem 3rem 1.5rem;
+
+      max-width: 1200px;
+
+      @media ${device.desktop} {
+        padding: 3rem 0 3rem 0;
+      }
+      @media ${device['desktop-xl']} {
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &__video {
+        display: flex;
+        justify-content: center;
+
+        max-width: 1024px;
+        @media ${device['desktop-xl']} {
+          max-width: 720px;
+        }
+        video {
+          border-radius: 8px;
+          box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
+          width: 100%;
+        }
+      }
+      &__content {
+        flex: 1;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const StepsRatafiaSectionStyled = styled.section`
+  z-index: 999;
+  width: 100%;
+
+  @media ${device.desktop} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .steps-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+
+      gap: 3rem;
+      padding: 2rem 1.5rem 3rem 1.5rem;
+
+      max-width: 1200px;
+
+      @media ${device.desktop} {
+        padding: 3rem 0 3rem 0;
+      }
+      @media ${device['desktop-xl']} {
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &__video {
+        display: flex;
+        justify-content: center;
+
+        max-width: 1024px;
+        @media ${device['desktop-xl']} {
+          max-width: 720px;
+        }
+        video {
+          border-radius: 8px;
+          box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
+          width: 100%;
+        }
+      }
+      &__content {
+        flex: 1;
+      }
+    }
+  }
+`

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

@@ -2,13 +2,12 @@ import React, { type FC } from 'react'
 
 import { StepsRatafiaContent } from '../../organisms'
 import { type StepsRatafiaSectionProps } from './StepsRatafiaSectionProps.types'
+import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled'
 import { Video } from '../../atoms'
 
-// import './StepsRatafiaSection.scss'
-
 const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, videoUrl }) => {
   return (
-    <section className='steps-ratafia-section'>
+    <StepsRatafiaSectionStyled className='steps-ratafia-section'>
       <div className='steps-ratafia-section__wrapper'>
         <div className='steps-ratafia-section__wrapper__video'>
           <Video videoSrcURL={videoUrl} autoPlay loop />
@@ -17,7 +16,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, video
           <StepsRatafiaContent title={title} steps={steps} />
         </div>
       </div>
-    </section>
+    </StepsRatafiaSectionStyled>
   )
 }
 

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled';
 // import './TryItRatafiaSection.scss'
 const TryItRatafiaSection = ({ icon, paragraph, children }) => {
-    return (_jsx("section", { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default TryItRatafiaSection;

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

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

@@ -0,0 +1,70 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TryItRatafiaSectionStyled = 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 7.5rem;
+  }
+
+  .try-it-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+
+      padding: 1.5rem;
+      gap: 1.5rem;
+
+      border-radius: 16px;
+
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem;
+        gap: 2.5rem;
+        flex-direction: row;
+      }
+      @media ${device.laptop} {
+        padding: 2.5rem 2.5rem 2.5rem 4rem;
+        gap: 5rem;
+      }
+
+      &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex: 1 0 0;
+        align-self: stretch;
+
+        gap: 1rem;
+
+        @media ${device['landscape-tablets']} {
+          padding: 3rem 0;
+        }
+
+        &__icon {
+          width: 48px;
+          height: 48px;
+        }
+        &__title {
+          align-self: stretch;
+          color: var(--others-white);
+        }
+      }
+
+      &__children {
+        max-width: 460px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,71 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const TryItRatafiaSectionStyled = 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 7.5rem;
+  }
+
+  .try-it-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+
+      padding: 1.5rem;
+      gap: 1.5rem;
+
+      border-radius: 16px;
+
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        padding: 2rem;
+        gap: 2.5rem;
+        flex-direction: row;
+      }
+      @media ${device.laptop} {
+        padding: 2.5rem 2.5rem 2.5rem 4rem;
+        gap: 5rem;
+      }
+
+      &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex: 1 0 0;
+        align-self: stretch;
+
+        gap: 1rem;
+
+        @media ${device['landscape-tablets']} {
+          padding: 3rem 0;
+        }
+
+        &__icon {
+          width: 48px;
+          height: 48px;
+        }
+        &__title {
+          align-self: stretch;
+          color: var(--others-white);
+        }
+      }
+
+      &__children {
+        max-width: 460px;
+      }
+    }
+  }
+`

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

@@ -1,11 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type TryItRatafiaSectionProps } from './TryItRatafiaSectionProps.types'
+import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled'
 // import './TryItRatafiaSection.scss'
 
 const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, children }) => {
   return (
-    <section className='try-it-ratafia-section'>
+    <TryItRatafiaSectionStyled className='try-it-ratafia-section'>
       <div className='try-it-ratafia-section__wrapper background-ratafia-animation'>
         <div className='try-it-ratafia-section__wrapper__content'>
           {icon !== null && <div className={'try-it-ratafia-section__wrapper__content__icon'}>{icon}</div>}
@@ -15,7 +16,7 @@ const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, ch
         </div>
         <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </section>
+    </TryItRatafiaSectionStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent';
-// import './TryOurFreeLegalBlogsSection.scss'
+import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled';
 const TryOurFreeLegalBlogsSection = ({ contentTryOurFreeLegalBlogs }) => {
-    return (_jsx("section", { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, children: contentTryOurFreeLegalBlogs.children }) }));
+    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, children: contentTryOurFreeLegalBlogs.children }) }));
 };
 export default TryOurFreeLegalBlogsSection;

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

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

@@ -0,0 +1,10 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TryOurFreeLegalBlogsSectionStyled = styled.section `
+  display: flex;
+  flex-direction: column;
+
+  @media ${device['landscape-tablets']} {
+    flex-flow: row nowrap;
+  }
+`;

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

@@ -0,0 +1,11 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const TryOurFreeLegalBlogsSectionStyled = styled.section`
+  display: flex;
+  flex-direction: column;
+
+  @media ${device['landscape-tablets']} {
+    flex-flow: row nowrap;
+  }
+`