@npm_leadtech/legal-lib-components 5.9.3 → 5.9.4

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+export const CardFunctionalityStyled = styled.article `
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--global-gap);
+  padding: 1em;
+
+  .content-tags {
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-gap);
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: calc(1rem / 2);
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-direction: row;
+
+        .icon {
+          padding: 2px;
+          border-radius: var(--global-border-radius);
+          background: var(--primary-main-light-5);
+        }
+
+        .title {
+          color: var(--neutral-neutral-1);
+          font-weight: 700;
+        }
+      }
+
+      .text {
+        overflow: hidden;
+        color: var(--neutral-neutral-1);
+        font-size: 14px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .tags {
+      display: flex;
+      gap: calc(1rem * 2);
+      flex-wrap: wrap;
+    }
+  }
+
+  .cta-card {
+    align-self: flex-start;
+    margin-top: 0;
+  }
+`;

package/dist/src/components/organisms/CardFunctionality/{CardFunctionality.scss → CardFunctionality.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.card-functionality {
+export const CardFunctionalityStyled = styled.article`
   border-radius: var(--global-border-radius);
   box-shadow: var(--box-shadow-medium);
   display: flex;
@@ -58,4 +58,4 @@
     align-self: flex-start;
     margin-top: 0;
   }
-}
+`

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 import { Button, Tag } from '../../atoms'
 import { type CardFunctionalityProps } from './CardFunctionalityProps'
-// import './CardFunctionality.scss'
+import { CardFunctionalityStyled } from './CardFunctionality.styled'
 
 export const CardFunctionality: React.FC<CardFunctionalityProps> = ({ icon, title, text, tags, cta }) => {
   return (
-    <article className='card-functionality'>
+    <CardFunctionalityStyled>
       <div className='content-tags'>
         <div className='content'>
           <div className='header'>
@@ -24,6 +24,6 @@ export const CardFunctionality: React.FC<CardFunctionalityProps> = ({ icon, titl
         </div>
       </div>
       <Button {...cta} givenClass='cta-card' />
-    </article>
+    </CardFunctionalityStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
-// import './ContactJumbotron.scss'
+import { ContactJumbotronStyled } from './ContactJumbotron.styled';
 export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, children, isJonSnow = false }) => {
-    return (_jsxs("div", { className: 'contact__text', children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: 'Visit FAQ Page', link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
+    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: 'Visit FAQ Page', link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.d.ts

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

@@ -0,0 +1,43 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ContactJumbotronStyled = styled.article `
+  .contact__text__title {
+    color: var(--primary-main-dark-1);
+    margin-bottom: space(8);
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 2rem;
+  }
+
+  .contact__text__subtitle {
+    color: var(--neutral-neutral-1);
+    font-size: 1rem;
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .contact__text .logo-text {
+    color: var(--neutral-neutral-2);
+  }
+
+  .logo-text {
+    margin-top: 3.25rem;
+    @media ${device['portrait-tablets']} {
+      margin-top: 4rem;
+    }
+  }
+
+  .logo-text img {
+    min-width: 52px;
+  }
+
+  .faq-button {
+    display: inline-block;
+    margin-top: space(4);
+    width: 100%;
+    @media ${device['portrait-tablets']} {
+      width: 10rem;
+    }
+  }
+`;

package/dist/src/components/organisms/ContactJumbotron/{ContactJumbotron.scss → ContactJumbotron.styled.ts}

@@ -1,8 +1,7 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-@import '../../../globalStyles/functions.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.contact__text {
+export const ContactJumbotronStyled = styled.article`
   .contact__text__title {
     color: var(--primary-main-dark-1);
     margin-bottom: space(8);
@@ -25,7 +24,7 @@
 
   .logo-text {
     margin-top: 3.25rem;
-    @include portrait-tablets {
+    @media ${device['portrait-tablets']} {
       margin-top: 4rem;
     }
   }
@@ -38,8 +37,8 @@
     display: inline-block;
     margin-top: space(4);
     width: 100%;
-    @include portrait-tablets {
+    @media ${device['portrait-tablets']} {
       width: 10rem;
     }
   }
-}
+`

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
-// import './ContactJumbotron.scss'
+import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
   phoneBoxDesktopProps,
@@ -13,7 +13,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
   isJonSnow = false
 }) => {
   return (
-    <div className='contact__text'>
+    <ContactJumbotronStyled>
       {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
@@ -27,6 +27,6 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
         />
       )}
       <EmailContactBox {...emailContactBoxProps} />
-    </div>
+    </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, RichTextStrapi } from '../../atoms';
-// import './CookiePolicyBar.scss'
+import { CookiePolicyBarStyled } from './CookiePolicyBar.styled';
 export const CookiePolicyBar = ({ clickFunc, text }) => {
-    return (_jsxs("div", { className: 'cookie-policy-bar', children: [_jsx(RichTextStrapi, { html: text, className: 'cookie-policy-bar__text sans-serif --extra-small' }), _jsx("div", { className: 'cookie-policy-bar__button-container', children: _jsx(Button, { dataQa: '', givenClass: 'accept-cookies-button', noLink: true, color: 'primary3', label: 'Accept Cookies', onClick: clickFunc }) })] }));
+    return (_jsxs(CookiePolicyBarStyled, { children: [_jsx(RichTextStrapi, { html: text, className: 'cookie-policy-bar__text sans-serif --extra-small' }), _jsx(Button, { dataQa: '', givenClass: 'accept-cookies-button', noLink: true, color: 'primary3', label: 'Accept Cookies', onClick: clickFunc })] }));
 };

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.styled.d.ts

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

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CookiePolicyBarStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 0 1.5rem 1rem;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+    justify-content: center;
+  }
+
+  .fixed-container {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    bottom: 0;
+    z-index: 3;
+    width: 100%;
+  }
+
+  .cookie-policy-bar__text {
+    margin: 1rem 0 0.5rem;
+    max-width: 48rem;
+
+    @media ${device['portrait-tablets']} {
+      margin-bottom: 1rem;
+      margin-right: 1.5rem;
+    }
+
+    @media ${device.laptop} {
+      margin-right: 2.5rem;
+    }
+
+    a {
+      text-decoration: underline;
+      color: var(--others-white);
+    }
+
+    &.m-richText p {
+      margin-bottom: 0;
+    }
+  }
+
+  .accept-cookies-button {
+    white-space: nowrap;
+  }
+`;

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.styled.ts

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CookiePolicyBarStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 0 1.5rem 1rem;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+    justify-content: center;
+  }
+
+  .fixed-container {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    bottom: 0;
+    z-index: 3;
+    width: 100%;
+  }
+
+  .cookie-policy-bar__text {
+    margin: 1rem 0 0.5rem;
+    max-width: 48rem;
+
+    @media ${device['portrait-tablets']} {
+      margin-bottom: 1rem;
+      margin-right: 1.5rem;
+    }
+
+    @media ${device.laptop} {
+      margin-right: 2.5rem;
+    }
+
+    a {
+      text-decoration: underline;
+      color: var(--others-white);
+    }
+
+    &.m-richText p {
+      margin-bottom: 0;
+    }
+  }
+
+  .accept-cookies-button {
+    white-space: nowrap;
+  }
+`

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.tsx

@@ -2,22 +2,20 @@ import React, { type FC } from 'react'
 
 import { Button, RichTextStrapi } from '../../atoms'
 import { type CookiePolicyBarProps } from './CookiePolicyBarProps'
-// import './CookiePolicyBar.scss'
+import { CookiePolicyBarStyled } from './CookiePolicyBar.styled'
 
 export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text }) => {
   return (
-    <div className='cookie-policy-bar'>
+    <CookiePolicyBarStyled>
       <RichTextStrapi html={text} className='cookie-policy-bar__text sans-serif --extra-small' />
-      <div className='cookie-policy-bar__button-container'>
-        <Button
-          dataQa=''
-          givenClass='accept-cookies-button'
-          noLink
-          color='primary3'
-          label={'Accept Cookies'}
-          onClick={clickFunc}
-        />
-      </div>
-    </div>
+      <Button
+        dataQa=''
+        givenClass='accept-cookies-button'
+        noLink
+        color='primary3'
+        label={'Accept Cookies'}
+        onClick={clickFunc}
+      />
+    </CookiePolicyBarStyled>
   )
 }

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafia.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './ErrorContentRatafia.scss'
+import { ErrorContentRatafiaStyled } from './ErrorContentRatafia.styled';
 export const ErrorContentRatafia = ({ title, errorMessage }) => {
-    return (_jsxs("div", { className: 'error-content-ratafia', children: [_jsx("h2", { className: 'error-content-ratafia__title', children: title }), _jsx("div", { className: 'error-content-ratafia__message', children: errorMessage })] }));
+    return (_jsxs(ErrorContentRatafiaStyled, { children: [_jsx("h2", { className: 'error-content-ratafia__title', children: title }), _jsx("div", { className: 'error-content-ratafia__message', children: errorMessage })] }));
 };

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafia.styled.d.ts

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const ErrorContentRatafiaStyled = styled.div `
+  width: 100%;
+  color: var(--neutral-neutral-2);
+
+  .error-content-ratafia__title {
+    font-size: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .error-content-ratafia__message {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+  }
+`;

package/dist/src/components/organisms/ErrorContentRatafia/{ErrorContentRatafia.scss → ErrorContentRatafia.styled.ts}

@@ -1,18 +1,19 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import styled from 'styled-components'
 
-.error-content-ratafia {
+export const ErrorContentRatafiaStyled = styled.div`
   width: 100%;
   color: var(--neutral-neutral-2);
-  &__title {
+
+  .error-content-ratafia__title {
     font-size: 1rem;
     padding-bottom: 1rem;
   }
-  &__message {
+
+  .error-content-ratafia__message {
     font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     letter-spacing: -0.3px;
   }
-}
+`

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafia.tsx

@@ -1,13 +1,13 @@
 import React, { type FC } from 'react'
 
 import { type ErrorContentRatafiaProps } from './ErrorContentRatafiaProps.types'
-// import './ErrorContentRatafia.scss'
+import { ErrorContentRatafiaStyled } from './ErrorContentRatafia.styled'
 
 export const ErrorContentRatafia: FC<ErrorContentRatafiaProps> = ({ title, errorMessage }) => {
   return (
-    <div className='error-content-ratafia'>
+    <ErrorContentRatafiaStyled>
       <h2 className='error-content-ratafia__title'>{title}</h2>
       <div className='error-content-ratafia__message'>{errorMessage}</div>
-    </div>
+    </ErrorContentRatafiaStyled>
   )
 }

package/dist/src/components/organisms/FaqGroup/FaqGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaqGroupStyled } from './FaqGroup.styled';
 import { FaqItem } from '../../molecules';
-// import './FaqGroup.scss'
 export const FaqGroup = ({ title, slug, faqs = [], hasAllClosed = false, children }) => {
-    return (_jsxs("div", { className: 'faqGroup', id: slug, children: [_jsx("h2", { className: 'title', id: `${slug}-faqs`, children: title }), children, _jsx("div", { className: 'faqs', children: faqs.map((faq, index) => (_jsx(FaqItem, { ...faq, index: hasAllClosed ? index + 1 : index }, faq.id))) })] }));
+    return (_jsxs(FaqGroupStyled, { id: slug, children: [_jsx("h2", { className: 'title', id: `${slug}-faqs`, children: title }), children, _jsx("div", { className: 'faqs', children: faqs.map((faq, index) => (_jsx(FaqItem, { ...faq, index: hasAllClosed ? index + 1 : index }, faq.id))) })] }));
 };

package/dist/src/components/organisms/FaqGroup/FaqGroup.styled.d.ts

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const FaqGroupStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+
+  .title {
+    color: var(--neutral-neutral-1);
+    font-size: 28px;
+    line-height: 32px;
+    letter-spacing: -0.3px;
+  }
+
+  .faqs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-gap);
+    width: 100%;
+  }
+`;

package/dist/src/components/organisms/FaqGroup/{FaqGroup.scss → FaqGroup.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.faqGroup {
+export const FaqGroupStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -19,4 +19,4 @@
     gap: var(--global-gap);
     width: 100%;
   }
-}
+`

package/dist/src/components/organisms/FaqGroup/FaqGroup.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { type FaqGroupProps } from './FaqGroupProps'
+import { FaqGroupStyled } from './FaqGroup.styled'
 import { FaqItem } from '../../molecules'
-// import './FaqGroup.scss'
 
 export const FaqGroup: React.FC<FaqGroupProps> = ({ title, slug, faqs = [], hasAllClosed = false, children }) => {
   return (
-    <div className='faqGroup' id={slug}>
+    <FaqGroupStyled id={slug}>
       <h2 className='title' id={`${slug}-faqs`}>
         {title}
       </h2>
@@ -16,6 +16,6 @@ export const FaqGroup: React.FC<FaqGroupProps> = ({ title, slug, faqs = [], hasA
           <FaqItem key={faq.id} {...faq} index={hasAllClosed ? index + 1 : index} />
         ))}
       </div>
-    </div>
+    </FaqGroupStyled>
   )
 }

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeatureRatafiaCardList } from '../../molecules';
-// import './FeaturesRatafiaContent.scss'
+import { FeaturesRatafiaContentStyled } from './FeaturesRatafiaContent.styled';
 const FeaturesRatafiaContent = ({ title, description, notReleasedText = 'Coming Soon', features }) => {
-    return (_jsx("div", { className: 'features-ratafia-content', children: _jsxs("div", { className: 'features-ratafia-content__wrapper', children: [_jsxs("div", { className: 'features-ratafia-content__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight features-ratafia-content__wrapper__title__text', children: title }), _jsx("div", { className: 'sans-serif --super-medium features-ratafia-content__wrapper__title__description', children: description })] }), _jsx(FeatureRatafiaCardList, { features: features, notReleasedText: notReleasedText })] }) }));
+    return (_jsx(FeaturesRatafiaContentStyled, { children: _jsxs("div", { className: 'features-ratafia-content__wrapper', children: [_jsxs("div", { className: 'features-ratafia-content__wrapper__title', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight features-ratafia-content__wrapper__title__text', children: title }), _jsx("div", { className: 'sans-serif --super-medium features-ratafia-content__wrapper__title__description', children: description })] }), _jsx(FeatureRatafiaCardList, { features: features, notReleasedText: notReleasedText })] }) }));
 };
 export default FeaturesRatafiaContent;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.d.ts

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const FeaturesRatafiaContentStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  gap: 1.5rem;
+
+  .features-ratafia-content__wrapper__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: 1rem;
+
+    &__text {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
+    }
+    &__description {
+      align-self: stretch;
+      color: var(--neutral-neutral-1);
+    }
+  }
+`;

package/dist/src/components/organisms/FeaturesRatafiaContent/{FeaturesRatafiaContent.scss → FeaturesRatafiaContent.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.features-ratafia-content__wrapper {
+export const FeaturesRatafiaContentStyled = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -8,7 +8,7 @@
   flex: 1 0 0;
   gap: 1.5rem;
 
-  &__title {
+  .features-ratafia-content__wrapper__title {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -25,4 +25,4 @@
       color: var(--neutral-neutral-1);
     }
   }
-}
+`

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.tsx

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { FeatureRatafiaCardList } from '../../molecules'
 import { type FeaturesRatafiaContentProps } from './FeaturesRatafiaContentProps.types'
-// import './FeaturesRatafiaContent.scss'
+import { FeaturesRatafiaContentStyled } from './FeaturesRatafiaContent.styled'
 
 const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
   title,
@@ -11,7 +11,7 @@ const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
   features
 }) => {
   return (
-    <div className='features-ratafia-content'>
+    <FeaturesRatafiaContentStyled>
       <div className='features-ratafia-content__wrapper'>
         <div className='features-ratafia-content__wrapper__title'>
           <h2 className='sans-serif --super-large --bold-weight features-ratafia-content__wrapper__title__text'>
@@ -23,7 +23,7 @@ const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
         </div>
         <FeatureRatafiaCardList features={features} notReleasedText={notReleasedText} />
       </div>
-    </div>
+    </FeaturesRatafiaContentStyled>
   )
 }
 

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RichTextInner, RichTextStrapi } from '../../atoms';
-// import './GuidelinesContent.scss'
+import { GuideslinesContentStyled } from './GuidelinesContent.styled';
 const GuidelinesContent = ({ title, image, detail, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'guidelines-section-main wrapper', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) }))] }));
+    return (_jsxs(GuideslinesContentStyled, { children: [_jsxs("div", { className: 'guidelines-section-main wrapper', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) }))] }));
 };
 export default GuidelinesContent;

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.d.ts

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