@npm_leadtech/legal-lib-components 5.11.3 → 5.11.6

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

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 { FeaturesRatafiaContentStyled } from './FeaturesRatafiaContent.styled'
+// import './FeaturesRatafiaContent.scss'
 
 const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
   title,
@@ -11,7 +11,7 @@ const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
   features
 }) => {
   return (
-    <FeaturesRatafiaContentStyled>
+    <div className='features-ratafia-content'>
       <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>
-    </FeaturesRatafiaContentStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { RichTextInner, RichTextStrapi } from '../../atoms';
-import { GuideslinesContentStyled } from './GuidelinesContent.styled';
+// import './GuidelinesContent.scss'
 const GuidelinesContent = ({ title, image, detail, children }) => {
-    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))) }))] }));
+    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))) }))] }));
 };
 export default GuidelinesContent;

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

@@ -1,20 +1,20 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const GuideslinesContentStyled = styled.div`
-  .guidelines-section-main {
+.guidelines-section {
+  &-main {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     padding: 1.5rem;
 
-    @media ${device.laptop} {
+    @include laptop {
       flex-direction: row;
       padding: 0;
     }
   }
 
-  .guidelines-section__texts {
+  &__texts {
     flex-basis: 50%;
     display: flex;
     flex-direction: column;
@@ -26,7 +26,7 @@ export const GuideslinesContentStyled = styled.div`
     font-weight: 400;
     letter-spacing: -0.3px;
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       margin-left: 3rem;
       margin-bottom: 0;
     }
@@ -41,7 +41,7 @@ export const GuideslinesContentStyled = styled.div`
       line-height: 42px;
       letter-spacing: -0.3px;
 
-      @media ${device['landscape-tablets']} {
+      @include landscape-tablets {
         text-align: left;
       }
     }
@@ -58,14 +58,14 @@ export const GuideslinesContentStyled = styled.div`
     }
   }
 
-  .guidelines-section__image {
+  &__image {
     flex-basis: 50%;
     margin-bottom: 2rem;
 
     &.big-devices {
       display: none;
 
-      @media ${device['landscape-tablets']} {
+      @include landscape-tablets {
         display: flex;
       }
     }
@@ -73,7 +73,7 @@ export const GuideslinesContentStyled = styled.div`
     &.is-mobile {
       display: none;
 
-      @media ${device['landscape-tablets']} {
+      @include landscape-tablets {
         display: none;
       }
 
@@ -83,13 +83,13 @@ export const GuideslinesContentStyled = styled.div`
     }
   }
 
-  .guidelines-section-detail {
+  &-detail {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     margin: 2rem 0 1rem 0;
 
-    @media ${device.laptop} {
+    @include laptop {
       flex-direction: row;
     }
 
@@ -97,7 +97,7 @@ export const GuideslinesContentStyled = styled.div`
       display: flex;
       flex: 1;
       flex-direction: column;
-      background: var(--others-white);
+      background: get-color(others, white);
       border-radius: 0.5rem;
       padding: 1.5rem;
 
@@ -107,13 +107,13 @@ export const GuideslinesContentStyled = styled.div`
       }
 
       &__title {
-        font-family: var(--font-serif);
+        font-family: $font-serif;
         font-style: normal;
         font-weight: 400;
         font-size: 24px;
         line-height: 32px;
         letter-spacing: -0.3px;
-        color: var(--neutral-neutral-1);
+        color: get-color(neutral, neutral-1);
         margin: 1.5rem 0 1rem 0;
       }
 
@@ -136,4 +136,4 @@ export const GuideslinesContentStyled = styled.div`
       }
     }
   }
-`
+}

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

@@ -3,11 +3,11 @@ import React, { type FC } from 'react'
 
 import { RichTextInner, RichTextStrapi } from '../../atoms'
 import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
-import { GuideslinesContentStyled } from './GuidelinesContent.styled'
+// import './GuidelinesContent.scss'
 
 const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, children }) => {
   return (
-    <GuideslinesContentStyled>
+    <>
       <div className='guidelines-section-main wrapper'>
         <div className='guidelines-section__image big-devices'>{image}</div>
         <div className='guidelines-section__texts'>
@@ -27,7 +27,7 @@ const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, c
           ))}
         </div>
       )}
-    </GuideslinesContentStyled>
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JumbotronRatafiaStyled } from './JumbotronRatafiaContent.styled';
 import { TagsRatafiaList } from '../../molecules';
+// import './JumbotronRatafiaContent.scss'
 const JumbotronRatafiaContent = ({ title, body, tags }) => {
-    return (_jsxs(JumbotronRatafiaStyled, { children: [_jsx("div", { className: 'jumbotron-ratafia-content__title', children: title }), _jsx("span", { className: 'sans-serif --medium jumbotron-ratafia-content__description', itemProp: 'text', children: body }), _jsx(TagsRatafiaList, { tags: tags })] }));
+    return (_jsxs("div", { className: 'jumbotron-ratafia-content', children: [_jsx("div", { className: 'jumbotron-ratafia-content__title', children: title }), _jsx("span", { className: 'sans-serif --medium jumbotron-ratafia-content__description', itemProp: 'text', children: body }), _jsx(TagsRatafiaList, { tags: tags })] }));
 };
 export default JumbotronRatafiaContent;

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

@@ -1,12 +1,13 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const JumbotronRatafiaStyled = styled.div`
+.jumbotron-ratafia-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 1rem;
 
-  .jumbotron-ratafia-content__title {
+  &__title {
     &__text {
       line-height: 2.25rem;
       font-size: 2rem;
@@ -17,11 +18,11 @@ export const JumbotronRatafiaStyled = styled.div`
         padding: 0 0.6rem;
         border-radius: 4px;
         color: var(--primary-main-dark-2);
-        background: var(--secondary-main-light-2);
+        background: get-color(secondary, main-light-2);
       }
     }
   }
-  .jumbotron-ratafia-content__description {
+  &__description {
     color: var(--others-white);
   }
-`
+}

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

@@ -1,18 +1,18 @@
 import React, { type FC } from 'react'
 
 import { type JumbotronRatafiaContentProps } from './JumbotronRatafiaContentProps.types'
-import { JumbotronRatafiaStyled } from './JumbotronRatafiaContent.styled'
 import { TagsRatafiaList } from '../../molecules'
+// import './JumbotronRatafiaContent.scss'
 
 const JumbotronRatafiaContent: FC<JumbotronRatafiaContentProps> = ({ title, body, tags }) => {
   return (
-    <JumbotronRatafiaStyled>
+    <div className='jumbotron-ratafia-content'>
       <div className='jumbotron-ratafia-content__title'>{title}</div>
       <span className='sans-serif --medium jumbotron-ratafia-content__description' itemProp='text'>
         {body}
       </span>
       <TagsRatafiaList tags={tags} />
-    </JumbotronRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyFactsLoadingContentRatafiaStyled } from './KeyFactsLoadingContentRatafia.styled';
+// import './KeyFactsLoadingContentRatafia.scss'
 export const KeyFactsLoadingContentRatafia = ({ documentName, icon, text }) => {
-    return (_jsxs(KeyFactsLoadingContentRatafiaStyled, { children: [_jsx("h2", { className: 'sans-serif --bold-weight key-facts-loading-content__document-name', children: documentName }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper', children: [_jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-1', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-2' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-2', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-4' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-5' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-3', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-7' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-4' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-4', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-8' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-2' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' })] })] }), _jsxs("div", { className: 'key-facts-loading-content__message', children: [_jsx("div", { className: 'key-facts-loading-content__message__icon', children: icon }), _jsx("span", { className: 'sans-serif --medium key-facts-loading-content__message__text', children: text })] })] }));
+    return (_jsxs("div", { className: 'key-facts-loading-content', children: [_jsx("h2", { className: 'sans-serif --bold-weight key-facts-loading-content__document-name', children: documentName }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper', children: [_jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-1', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-2' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-2', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-4' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-5' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-3', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-7' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-4' })] }), _jsxs("div", { className: 'key-facts-loading-content__animation-wrapper__animation animation-4', children: [_jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-8' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-2' }), _jsx("div", { className: 'key-facts-loading-content__animation-wrapper__animation__loader item-6' })] })] }), _jsxs("div", { className: 'key-facts-loading-content__message', children: [_jsx("div", { className: 'key-facts-loading-content__message__icon', children: icon }), _jsx("span", { className: 'sans-serif --medium key-facts-loading-content__message__text', children: text })] })] }));
 };
 export default KeyFactsLoadingContentRatafia;

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

@@ -1,22 +1,23 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const KeyFactsLoadingContentRatafiaStyled = styled.div`
+.key-facts-loading-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
+
   gap: 1rem;
 
-  .key-facts-loading-content__document-name {
+  &__document-name {
     color: var(--neutral-neutral-2);
     font-size: 1rem;
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       font-size: 1.125rem;
     }
   }
 
-  .key-facts-loading-content__animation-wrapper {
+  &__animation-wrapper {
     height: calc(0.54 * 100vh);
 
     align-self: stretch;
@@ -30,7 +31,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
     border-bottom: 4px solid var(--neutral-neutral-6);
     background: var(--neutral-neutral-6);
 
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       height: 490px;
     }
 
@@ -104,7 +105,7 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
     }
   }
 
-  .key-facts-loading-content__message {
+  &__message {
     display: flex;
     justify-content: start;
     align-items: flex-start;
@@ -123,23 +124,23 @@ export const KeyFactsLoadingContentRatafiaStyled = styled.div`
       color: var(--neutral-neutral-1);
     }
   }
+}
 
-  @keyframes fadeInOut {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.2;
-    }
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
   }
+}
 
-  @keyframes appear {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
   }
-`
+}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { type KeyFactsLoadingContentRatafiaProps } from './KeyFactsLoadingContentRatafiaProps.types'
-import { KeyFactsLoadingContentRatafiaStyled } from './KeyFactsLoadingContentRatafia.styled'
+// import './KeyFactsLoadingContentRatafia.scss'
 
 export const KeyFactsLoadingContentRatafia: React.FC<KeyFactsLoadingContentRatafiaProps> = ({
   documentName,
@@ -9,7 +9,7 @@ export const KeyFactsLoadingContentRatafia: React.FC<KeyFactsLoadingContentRataf
   text
 }) => {
   return (
-    <KeyFactsLoadingContentRatafiaStyled>
+    <div className='key-facts-loading-content'>
       <h2 className='sans-serif --bold-weight key-facts-loading-content__document-name'>{documentName}</h2>
       <div className='key-facts-loading-content__animation-wrapper'>
         <div className='key-facts-loading-content__animation-wrapper__animation animation-1'>
@@ -39,7 +39,7 @@ export const KeyFactsLoadingContentRatafia: React.FC<KeyFactsLoadingContentRataf
         <div className='key-facts-loading-content__message__icon'>{icon}</div>
         <span className='sans-serif --medium key-facts-loading-content__message__text'>{text}</span>
       </div>
-    </KeyFactsLoadingContentRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyFactCardListRatafia } from '../../molecules';
-import { KeyFactsResultContentRatafiaStyled } from './KeyFactsResultContentRatafia.styled';
 import { ReviewKeyFactsResultRatafia } from '../../atoms';
+// import './KeyFactsResultContentRatafia.scss'
 export const KeyFactsResultContentRatafia = ({ result, review }) => {
-    return (_jsxs(KeyFactsResultContentRatafiaStyled, { children: [_jsx("h2", { className: 'sans-serif --bold-weight key-facts-result-content__document-name', children: result?.documentName }), _jsxs("div", { className: 'key-facts-result-content__content', children: [result !== null && _jsx(KeyFactCardListRatafia, { keyFacts: result.keyFacts }), _jsx(ReviewKeyFactsResultRatafia, { ...review })] })] }));
+    return (_jsxs("div", { className: 'key-facts-result-content', children: [_jsx("h2", { className: 'sans-serif --bold-weight key-facts-result-content__document-name', children: result?.documentName }), _jsxs("div", { className: 'key-facts-result-content__content', children: [result !== null && _jsx(KeyFactCardListRatafia, { keyFacts: result.keyFacts }), _jsx(ReviewKeyFactsResultRatafia, { ...review })] })] }));
 };
 export default KeyFactsResultContentRatafia;

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

@@ -0,0 +1,23 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.key-facts-result-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  &__document-name {
+    color: var(--neutral-neutral-2);
+    font-size: 1rem;
+    @include portrait-tablets {
+      font-size: 1.125rem;
+    }
+  }
+  &__content {
+    overflow: hidden;
+  }
+}

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

@@ -2,18 +2,18 @@ import React from 'react'
 
 import { KeyFactCardListRatafia } from '../../molecules'
 import { type KeyFactsResultContentRatafiaProps } from './KeyFactsResultContentRatafiaProps.types'
-import { KeyFactsResultContentRatafiaStyled } from './KeyFactsResultContentRatafia.styled'
 import { ReviewKeyFactsResultRatafia } from '../../atoms'
+// import './KeyFactsResultContentRatafia.scss'
 
 export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
   return (
-    <KeyFactsResultContentRatafiaStyled>
+    <div className='key-facts-result-content'>
       <h2 className='sans-serif --bold-weight key-facts-result-content__document-name'>{result?.documentName}</h2>
       <div className='key-facts-result-content__content'>
         {result !== null && <KeyFactCardListRatafia keyFacts={result.keyFacts} />}
         <ReviewKeyFactsResultRatafia {...review} />
       </div>
-    </KeyFactsResultContentRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { useLanguageOptions, useLanguageSelected, useLanguagesSelector } from '../LanguageSelector';
 import { Button } from '../../atoms';
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore';
-import { LanguageSelectorMobileStyled } from './LanguageSelectorMobile.styled';
+// import './LanguageSelectorMobile.scss'
 export const LanguageSelectorMobile = ({ languages = [
     {
         code: 'US',
@@ -16,7 +16,7 @@ export const LanguageSelectorMobile = ({ languages = [
     const [isOpen, setIsOpen] = React.useState(false);
     if (languages.length <= 1)
         return null;
-    return (_jsxs(LanguageSelectorMobileStyled, { isOpen: isOpen, children: [_jsxs(Button, { color: 'transparent', noLink: true, givenClass: 'selected-option', label: '', dataQa: 'language-selector-mobile', fluid: true, onClick: () => {
+    return (_jsxs("div", { className: `language-selector-mobile ${isOpen ? 'open' : ''}`, children: [_jsxs(Button, { color: 'transparent', noLink: true, givenClass: 'selected-option', label: '', dataQa: 'language-selector-mobile', fluid: true, onClick: () => {
                     setIsOpen(!isOpen);
                 }, children: [_jsxs("div", { className: 'language', children: [languageSelected.flag, " ", languageSelected.name] }), _jsx(ChevronExpandMore, { fill: '#DBE1E5' })] }), _jsx("div", { className: 'options', children: languageOptions.map((language) => (_jsx(Button, { color: 'transparent', isExternal: true, givenClass: 'option', label: '', dataQa: `language-selector-mobile-option-${language.code}`, link: language.url, fluid: true, children: _jsxs("div", { className: 'language', children: [language.flag, " ", language.name] }) }, language.code))) })] }));
 };

package/dist/src/components/organisms/LanguageSelectorMobile/{LanguageSelectorMobile.styled.js → LanguageSelectorMobile.scss}

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
-export const LanguageSelectorMobileStyled = styled.div `
+@import '../../../globalStyles/variables.scss';
+
+.language-selector-mobile {
   position: relative;
 
   .selected-option {
@@ -47,8 +48,7 @@ export const LanguageSelectorMobileStyled = styled.div `
     }
   }
 
-  ${({ isOpen }) => isOpen &&
-    `
+  &.open {
     .selected-option {
       .chevron-expand-more {
         transition: all 0.4s ease;
@@ -61,5 +61,5 @@ export const LanguageSelectorMobileStyled = styled.div `
       visibility: visible;
       transition: all 0.4s ease;
     }
-    `}
-`;
+  }
+}

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

@@ -8,7 +8,7 @@ import {
 } from '../LanguageSelector'
 import { Button } from '../../atoms'
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore'
-import { LanguageSelectorMobileStyled } from './LanguageSelectorMobile.styled'
+// import './LanguageSelectorMobile.scss'
 
 export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
   languages = [
@@ -27,7 +27,7 @@ export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
   if (languages.length <= 1) return null
 
   return (
-    <LanguageSelectorMobileStyled isOpen={isOpen}>
+    <div className={`language-selector-mobile ${isOpen ? 'open' : ''}`}>
       <Button
         color='transparent'
         noLink
@@ -62,6 +62,6 @@ export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
           </Button>
         ))}
       </div>
-    </LanguageSelectorMobileStyled>
+    </div>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HeaderRatafia } from '../../molecules';
-import { LayoutRatafiaStyled } from './LayoutRatafia.styled';
+// import './LayoutRatafia.scss'
 export const LayoutRatafia = ({ header, content, cta, footerDesktop, footerMobile }) => {
-    return (_jsx(LayoutRatafiaStyled, { children: _jsxs("div", { className: 'layout-ratafia__wrapper', children: [_jsx("div", { className: 'layout-ratafia__wrapper__header', children: _jsx(HeaderRatafia, { ...header }) }), _jsxs("div", { className: 'layout-ratafia__wrapper__content', children: [content, _jsx("div", { className: 'layout-ratafia__wrapper__cta', children: cta })] }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-desktop', children: footerDesktop }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-mobile', children: footerMobile })] }) }));
+    return (_jsx("div", { className: 'layout-ratafia', children: _jsxs("div", { className: 'layout-ratafia__wrapper', children: [_jsx("div", { className: 'layout-ratafia__wrapper__header', children: _jsx(HeaderRatafia, { ...header }) }), _jsxs("div", { className: 'layout-ratafia__wrapper__content', children: [content, _jsx("div", { className: 'layout-ratafia__wrapper__cta', children: cta })] }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-desktop', children: footerDesktop }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-mobile', children: footerMobile })] }) }));
 };
 export default LayoutRatafia;