@npm_leadtech/legal-lib-components 5.9.4 → 5.9.5

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AboutUsContentStyled } from './AboutUsContent.styled';
 import { Button } from '../../atoms';
+// import './AboutUsContent.scss'
 const AboutUsContent = ({ children, image, button }) => {
-    return (_jsxs(AboutUsContentStyled, { children: [_jsx("div", { className: 'about-us-content__image', children: image }), _jsxs("div", { className: 'about-us-content__body', children: [children, button != null && (_jsx("div", { className: 'about-us-content__body__button', children: _jsx(Button, { ...button }) }))] })] }));
+    return (_jsxs("div", { className: 'about-us-content', children: [_jsx("div", { className: 'about-us-content__image', children: image }), _jsxs("div", { className: 'about-us-content__body', children: [children, button != null && (_jsx("div", { className: 'about-us-content__body__button', children: _jsx(Button, { ...button }) }))] })] }));
 };
 export default AboutUsContent;

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

@@ -1,21 +1,21 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const AboutUsContentStyled = styled.div`
+.about-us-content {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
 
-  @media ${device['landscape-tablets']} {
+  @include landscape-tablets {
     flex-flow: row nowrap;
   }
 
-  .about-us-content__body {
+  &__body {
     margin-top: 1rem;
     margin-bottom: 2rem;
     font-family: var(--font-sans);
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       flex-basis: 50%;
       margin-top: 0;
       margin-bottom: 3rem;
@@ -32,24 +32,22 @@ export const AboutUsContentStyled = styled.div`
       font-family: var(--font-sans);
       .e-button {
         display: block;
-
-        @media ${device['landscape-tablets']} {
+        @include landscape-tablets {
           display: inline-block;
         }
       }
     }
   }
-
-  .about-us-content__image {
+  &__image {
     margin-bottom: 1rem;
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       margin-bottom: 0;
       margin-right: 1rem;
       flex-basis: 50%;
     }
 
-    @media ${device.laptop} {
+    @include laptop {
       margin-bottom: -3rem;
     }
 
@@ -57,4 +55,4 @@ export const AboutUsContentStyled = styled.div`
       width: 100%;
     }
   }
-`
+}

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

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type AboutUsContentProps } from './AboutUsContentProps.types'
-import { AboutUsContentStyled } from './AboutUsContent.styled'
 import { Button } from '../../atoms'
+// import './AboutUsContent.scss'
 
 const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) => {
   return (
-    <AboutUsContentStyled>
+    <div className='about-us-content'>
       <div className={'about-us-content__image'}>{image}</div>
       <div className={'about-us-content__body'}>
         {children}
@@ -16,7 +16,7 @@ const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) =>
           </div>
         )}
       </div>
-    </AboutUsContentStyled>
+    </div>
   )
 }
 

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

@@ -3,13 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { AccordionItem } from '../../molecules';
 import { AccordionProvider } from './Accordion.context';
-import { AccordionStyled } from './Accordion.styled';
+// import './Accordion.scss'
 export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }) => {
     const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
     const handleItemClick = (index) => {
         setActiveIndex((prevIndex) => (prevIndex === index ? -1 : index));
     };
-    return (_jsx(AccordionProvider, { elements: data.length, children: _jsx(AccordionStyled, { children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
+    return (_jsx(AccordionProvider, { elements: data.length, children: _jsx("div", { className: 'accordion', children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
                     handleItemClick(index);
                 }, title: item.title, children: item.children }, index))) }) }));
 };

package/dist/src/components/organisms/Accordion/Accordion.scss

@@ -0,0 +1,4 @@
+.accordion {
+  width: 100%;
+  padding-bottom: 2rem;
+}

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

@@ -3,7 +3,8 @@ import React, { useState } from 'react'
 import { AccordionItem } from '../../molecules'
 import { type AccordionProps } from './AccordionProps.types'
 import { AccordionProvider } from './Accordion.context'
-import { AccordionStyled } from './Accordion.styled'
+
+// import './Accordion.scss'
 
 export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): React.JSX.Element => {
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
@@ -14,7 +15,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
 
   return (
     <AccordionProvider elements={data.length}>
-      <AccordionStyled>
+      <div className='accordion'>
         {data.map((item, index) => (
           <AccordionItem
             accordionRightContent={item?.accordionRightContent}
@@ -30,7 +31,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
             {item.children}
           </AccordionItem>
         ))}
-      </AccordionStyled>
+      </div>
     </AccordionProvider>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
-import { ArticlesListStyled } from './ArticlesList.styled';
+// import './ArticlesList.scss'
 const ArticlesList = ({ articles = [] }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx(ArticlesListStyled, { children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
+    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

package/dist/src/components/organisms/ArticlesList/ArticlesList.scss

@@ -0,0 +1,12 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.articles_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @include laptop {
+    flex-direction: row;
+  }
+}

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

@@ -3,17 +3,17 @@ import React, { type FC } from 'react'
 
 import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
-import { ArticlesListStyled } from './ArticlesList.styled'
+// import './ArticlesList.scss'
 
 const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
   if (articles?.length === 0) return null
 
   return (
-    <ArticlesListStyled>
+    <div className='articles_wrapper'>
       {articles.map((article: ArticleProps) => (
         <Article key={`article_${article?.id}`} {...article} />
       ))}
-    </ArticlesListStyled>
+    </div>
   )
 }
 

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

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsSeenInContentStyled } from './AsSeeInContent.styled';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { RichTextInner } from '../../atoms';
 import { TrustworthyWebsites } from '../../molecules/TrustworthyWebsites';
+// import './AsSeeInContent.scss'
 const AsSeeInContent = ({ children, trustWorthyImages }) => {
     if (trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs(AsSeenInContentStyled, { children: [_jsx(RichTextInner, { customClass: 'as-see-in-content__text', children: children }), _jsx(TrustworthyWebsites, { images: trustWorthyImages.images })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextInner, { customClass: 'as-see-in-content__text', children: children }), _jsx(TrustworthyWebsites, { images: trustWorthyImages.images })] }));
 };
 export default AsSeeInContent;

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.scss

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.as-see-in-content {
+  display: flex;
+
+  &__text {
+    justify-content: center;
+    text-align: center;
+
+    #articles,
+    #legal-documents {
+      color: var(--primary-main-light-1);
+      font-weight: 400;
+    }
+
+    a {
+      color: var(--primary-main-light-1);
+      font-weight: 400 !important;
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
 import React, { type FC } from 'react'
 
 import { type AsSeeInContentProps } from './AsSeeInContentProps.types'
-import { AsSeenInContentStyled } from './AsSeeInContent.styled'
 import { RichTextInner } from '../../atoms'
 import { TrustworthyWebsites } from '../../molecules/TrustworthyWebsites'
+// import './AsSeeInContent.scss'
 
 const AsSeeInContent: FC<AsSeeInContentProps> = ({ children, trustWorthyImages }) => {
   if (trustWorthyImages.images.length === 0) {
@@ -11,10 +11,10 @@ const AsSeeInContent: FC<AsSeeInContentProps> = ({ children, trustWorthyImages }
   }
 
   return (
-    <AsSeenInContentStyled>
+    <>
       <RichTextInner customClass='as-see-in-content__text'>{children}</RichTextInner>
       <TrustworthyWebsites images={trustWorthyImages.images} />
-    </AsSeenInContentStyled>
+    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Tag } from '../../atoms';
-import { CardFunctionalityStyled } from './CardFunctionality.styled';
+// import './CardFunctionality.scss'
 export const CardFunctionality = ({ icon, title, text, tags, cta }) => {
-    return (_jsxs(CardFunctionalityStyled, { children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
+    return (_jsxs("article", { className: 'card-functionality', children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
 };

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

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
 
-export const CardFunctionalityStyled = styled.article`
+.card-functionality {
   border-radius: var(--global-border-radius);
   box-shadow: var(--box-shadow-medium);
   display: flex;
@@ -58,4 +58,4 @@ export const CardFunctionalityStyled = styled.article`
     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 { CardFunctionalityStyled } from './CardFunctionality.styled'
+// import './CardFunctionality.scss'
 
 export const CardFunctionality: React.FC<CardFunctionalityProps> = ({ icon, title, text, tags, cta }) => {
   return (
-    <CardFunctionalityStyled>
+    <article className='card-functionality'>
       <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' />
-    </CardFunctionalityStyled>
+    </article>
   )
 }

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 { ContactJumbotronStyled } from './ContactJumbotron.styled';
+// import './ContactJumbotron.scss'
 export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, children, isJonSnow = false }) => {
-    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 })] }));
+    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 })] }));
 };

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

@@ -1,7 +1,8 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+@import '../../../globalStyles/functions.scss';
 
-export const ContactJumbotronStyled = styled.article`
+.contact__text {
   .contact__text__title {
     color: var(--primary-main-dark-1);
     margin-bottom: space(8);
@@ -24,7 +25,7 @@ export const ContactJumbotronStyled = styled.article`
 
   .logo-text {
     margin-top: 3.25rem;
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       margin-top: 4rem;
     }
   }
@@ -37,8 +38,8 @@ export const ContactJumbotronStyled = styled.article`
     display: inline-block;
     margin-top: space(4);
     width: 100%;
-    @media ${device['portrait-tablets']} {
+    @include 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 { ContactJumbotronStyled } from './ContactJumbotron.styled'
+// import './ContactJumbotron.scss'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
   phoneBoxDesktopProps,
@@ -13,7 +13,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
   isJonSnow = false
 }) => {
   return (
-    <ContactJumbotronStyled>
+    <div className='contact__text'>
       {!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} />
-    </ContactJumbotronStyled>
+    </div>
   )
 }

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 { CookiePolicyBarStyled } from './CookiePolicyBar.styled';
+// import './CookiePolicyBar.scss'
 export const CookiePolicyBar = ({ clickFunc, text }) => {
-    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 })] }));
+    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 }) })] }));
 };

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

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.fixed-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  z-index: 3;
+  width: 100%;
+}
+.cookie-policy-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 0 1.5rem 1rem;
+  background-color: black;
+  color: var(--others-white);
+
+  @include portrait-tablets {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+    justify-content: center;
+  }
+}
+
+.cookie-policy-bar__text {
+  margin: 1rem 0 0.5rem;
+  max-width: 48rem;
+
+  @include portrait-tablets {
+    margin-bottom: 1rem;
+    margin-right: 1.5rem;
+  }
+
+  @include 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,20 +2,22 @@ import React, { type FC } from 'react'
 
 import { Button, RichTextStrapi } from '../../atoms'
 import { type CookiePolicyBarProps } from './CookiePolicyBarProps'
-import { CookiePolicyBarStyled } from './CookiePolicyBar.styled'
+// import './CookiePolicyBar.scss'
 
 export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text }) => {
   return (
-    <CookiePolicyBarStyled>
+    <div className='cookie-policy-bar'>
       <RichTextStrapi html={text} className='cookie-policy-bar__text sans-serif --extra-small' />
-      <Button
-        dataQa=''
-        givenClass='accept-cookies-button'
-        noLink
-        color='primary3'
-        label={'Accept Cookies'}
-        onClick={clickFunc}
-      />
-    </CookiePolicyBarStyled>
+      <div className='cookie-policy-bar__button-container'>
+        <Button
+          dataQa=''
+          givenClass='accept-cookies-button'
+          noLink
+          color='primary3'
+          label={'Accept Cookies'}
+          onClick={clickFunc}
+        />
+      </div>
+    </div>
   )
 }

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

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

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

@@ -1,19 +1,18 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const ErrorContentRatafiaStyled = styled.div`
+.error-content-ratafia {
   width: 100%;
   color: var(--neutral-neutral-2);
-
-  .error-content-ratafia__title {
+  &__title {
     font-size: 1rem;
     padding-bottom: 1rem;
   }
-
-  .error-content-ratafia__message {
+  &__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 { ErrorContentRatafiaStyled } from './ErrorContentRatafia.styled'
+// import './ErrorContentRatafia.scss'
 
 export const ErrorContentRatafia: FC<ErrorContentRatafiaProps> = ({ title, errorMessage }) => {
   return (
-    <ErrorContentRatafiaStyled>
+    <div className='error-content-ratafia'>
       <h2 className='error-content-ratafia__title'>{title}</h2>
       <div className='error-content-ratafia__message'>{errorMessage}</div>
-    </ErrorContentRatafiaStyled>
+    </div>
   )
 }

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(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))) })] }));
+    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))) })] }));
 };

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

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
 
-export const FaqGroupStyled = styled.div`
+.faqGroup {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -19,4 +19,4 @@ export const FaqGroupStyled = styled.div`
     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 (
-    <FaqGroupStyled id={slug}>
+    <div className='faqGroup' 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>
-    </FaqGroupStyled>
+    </div>
   )
 }

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 { FeaturesRatafiaContentStyled } from './FeaturesRatafiaContent.styled';
+// import './FeaturesRatafiaContent.scss'
 const FeaturesRatafiaContent = ({ title, description, notReleasedText = 'Coming Soon', features }) => {
-    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 })] }) }));
+    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 })] }) }));
 };
 export default FeaturesRatafiaContent;

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

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