@npm_leadtech/legal-lib-components 5.2.9 → 5.2.11

package/dist/src/components/atoms/ExpertCard/ExpertCard.scss

@@ -0,0 +1,65 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.expert-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @include landscape-tablets {
+    margin-top: 5rem;
+  }
+
+  &__box {
+    background-color: white;
+    border-radius: 0.3rem;
+    box-shadow: $box-shadow-container;
+    padding: 7rem 2rem 0 2rem;
+    min-height: 13rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 17.625rem;
+    margin-left: 0;
+
+    @include landscape-tablets {
+      margin-left: 2rem;
+    }
+  }
+
+  &__image {
+    position: absolute;
+    transform: translateY(-115%);
+
+    img {
+      border-radius: 100%;
+    }
+  }
+
+  &__title {
+    font-family: $font-sans;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    width: 75%;
+    text-decoration: none;
+  }
+
+  &__description {
+    font-family: $font-sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    width: 75%;
+  }
+}

package/dist/src/components/atoms/ExpertCard/ExpertCard.tsx

@@ -1,11 +1,11 @@
 import React, { type FC } from 'react'
 
 import { type ExpertCardProps } from './ExpertCardProps.types'
-import { ExpertCardStyled } from './ExpertCard.styled'
+// import './ExpertCard.scss'
 
 const ExpertCard: FC<ExpertCardProps> = ({ title, url, description, image }) => {
   return (
-    <ExpertCardStyled className='expert-card'>
+    <div className='expert-card'>
       <div className='expert-card__box'>
         <div className='expert-card__image'>{image}</div>
         {url != null && (
@@ -17,7 +17,7 @@ const ExpertCard: FC<ExpertCardProps> = ({ title, url, description, image }) =>
 
         <p className='expert-card__description'>{description}</p>
       </div>
-    </ExpertCardStyled>
+    </div>
   )
 }
 

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FeatureRatafiaCardStyled } from './FeatureRatafiaCard.styled';
+// import './FeatureRatafiaCard.scss'
 export const FeatureRatafiaCard = ({ title, icon, description, isReleased = true, notReleasedText }) => {
-    return (_jsx(FeatureRatafiaCardStyled, { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
+    return (_jsx("div", { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
 };
 export default FeatureRatafiaCard;

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCard.scss

@@ -0,0 +1,79 @@
+@import '../../../globalStyles/variables.scss';
+
+.feature-ratafia-card__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  gap: 1rem;
+  padding: 1.5rem;
+
+  border-radius: 4px;
+  background: get-color(neutral, neutral-6);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    &__title {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 1rem;
+      gap: 0.5rem;
+
+      border-radius: 4px;
+      background: get-color(primary, main-dark-1);
+
+      &__icon {
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+      &__text {
+        color: get-color(others, white);
+      }
+    }
+  }
+
+  &__description {
+    color: get-color(neutral, neutral-1);
+  }
+}
+
+.feature-ratafia-card-not-released {
+  .feature-ratafia-card__wrapper {
+    &__header {
+      &__title {
+        opacity: 0.5;
+        background: get-color(others, white);
+
+        &__text {
+          color: get-color(primary, main-dark-1);
+        }
+      }
+      &__not-released {
+        display: flex;
+        align-items: center;
+
+        padding: 0.25rem;
+        gap: 0.25rem;
+
+        border-radius: 4px;
+        background: get-color(neutral, neutral-4);
+
+        color: get-color(primary, main-dark-1);
+      }
+    }
+    &__description {
+      opacity: 0.5;
+    }
+  }
+}
+
+.feature-ratafia-card {
+  width: 100%;
+}

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { type FeatureRatafiaCardProps } from './FeatureRatafiaCardProps.types'
-import { FeatureRatafiaCardStyled } from './FeatureRatafiaCard.styled'
+// import './FeatureRatafiaCard.scss'
 
 export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
   title,
@@ -11,7 +11,7 @@ export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
   notReleasedText
 }) => {
   return (
-    <FeatureRatafiaCardStyled className='feature-ratafia-card'>
+    <div className='feature-ratafia-card'>
       <div className={isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released'}>
         <div className='feature-ratafia-card__wrapper'>
           <div className='feature-ratafia-card__wrapper__header'>
@@ -30,7 +30,7 @@ export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
           <p className='sans-serif --medium feature-ratafia-card__wrapper__description'>{description}</p>
         </div>
       </div>
-    </FeatureRatafiaCardStyled>
+    </div>
   )
 }
 

package/dist/src/components/atoms/FormFaq/FormFaq.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormFaqStyled } from './FormFaq.styled';
+// import './FormFaq.scss'
 const FormFaq = ({ title, answer }) => {
-    return (_jsx(FormFaqStyled, { className: 'form-faq', children: _jsxs("div", { className: 'form-faq__container', children: [_jsx("p", { className: 'form-faq__title sans-serif --small', children: title }), _jsx("div", { className: 'form-faq__answer sans-serif --extra-small', children: answer })] }) }));
+    return (_jsx("li", { className: 'form-faq', children: _jsxs("div", { className: 'form-faq__container', children: [_jsx("p", { className: 'form-faq__title sans-serif --small', children: title }), _jsx("div", { className: 'form-faq__answer sans-serif --extra-small', children: answer })] }) }));
 };
 export default FormFaq;

package/dist/src/components/atoms/FormFaq/FormFaq.scss

@@ -0,0 +1,72 @@
+@import '../../../globalStyles/variables.scss';
+
+.form-faq {
+  display: flex;
+  position: relative;
+  cursor: default;
+
+  &::before {
+    content: '\2022';
+    color: get-color(secondary, main-dark-2);
+    margin-right: 0.25rem;
+    margin-top: 0.2rem;
+  }
+
+  &__container {
+    padding-top: 0.25rem;
+    @media (hover: hover) {
+      &:hover > .form-faq__answer {
+        display: flex;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .form-faq__answer {
+        display: block;
+      }
+    }
+  }
+
+  &__title {
+    display: inline-block;
+    color: get-color(neutral, neutral-1);
+    padding: 0.25rem;
+    transition: background-color 0.3s ease;
+    &:hover {
+      background-color: get-color(secondary, main-light-4);
+    }
+  }
+
+  &__answer {
+    display: none;
+    background: get-color(neutral, neutral-1);
+    position: absolute;
+    border-radius: $global-border-radius;
+    top: 0;
+    transform: translateY(-100%);
+    color: get-color(others, white);
+    padding: 0.75rem;
+    width: 100%;
+    max-width: 600px;
+    white-space: pre-wrap;
+    &:hover {
+      display: flex;
+    }
+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      left: 2rem;
+    }
+
+    &:before {
+      position: absolute;
+      content: '';
+      width: 0;
+      height: 0;
+      border-left: 1rem solid transparent;
+      border-right: 1rem solid transparent;
+      bottom: -0.35rem;
+      border-top: 1rem solid get-color(neutral, neutral-1);
+    }
+  }
+}

package/dist/src/components/atoms/FormFaq/FormFaq.tsx

@@ -1,16 +1,16 @@
 import React, { type FC } from 'react'
 
 import { type FormFaqProps } from './FormFaqProps.types'
-import { FormFaqStyled } from './FormFaq.styled'
+// import './FormFaq.scss'
 
 const FormFaq: FC<FormFaqProps> = ({ title, answer }) => {
   return (
-    <FormFaqStyled className={'form-faq'}>
+    <li className={'form-faq'}>
       <div className={'form-faq__container'}>
         <p className={'form-faq__title sans-serif --small'}>{title}</p>
         <div className={'form-faq__answer sans-serif --extra-small'}>{answer}</div>
       </div>
-    </FormFaqStyled>
+    </li>
   )
 }
 

package/dist/src/components/atoms/GoogleButton/GoogleButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GoogleButtonStyled } from './GoogleButton.styled';
 import logoGoogle from '../../../../images/svg/logo-google.svg';
+// import './GoogleButton.scss'
 const GoogleButton = ({ onClick, label = 'Log In with Google' }) => {
-    return (_jsxs(GoogleButtonStyled, { type: 'button', className: 'google-button', onClick: onClick, children: [_jsx("img", { className: 'google-logo', src: logoGoogle, alt: '' }), _jsx("span", { children: label })] }));
+    return (_jsxs("button", { type: 'button', className: 'google-button', onClick: onClick, children: [_jsx("img", { className: 'google-logo', src: logoGoogle, alt: '' }), _jsx("span", { children: label })] }));
 };
 export default GoogleButton;

package/dist/src/components/atoms/GoogleButton/{GoogleButton.styled.ts → GoogleButton.scss}

@@ -1,13 +1,13 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables';
 
-export const GoogleButtonStyled = styled.button`
+.google-button {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--neutral-neutral-3);
+  border: 1px solid get-color(neutral, neutral-3);
   padding: 0.5rem 0;
-  background-color: var(--others-white);
+  background-color: get-color(others, white);
   border-radius: 2px;
   font-family: Roboto, sans-serif;
   color: rgba(0, 0, 0, 0.54);
@@ -19,4 +19,4 @@ export const GoogleButtonStyled = styled.button`
   .google-logo {
     margin-right: 1rem;
   }
-`
+}

package/dist/src/components/atoms/GoogleButton/GoogleButton.tsx

@@ -2,15 +2,15 @@
 import React, { type FC } from 'react'
 
 import { type GoogleButtonProps } from './GoogleButtonProps.types'
-import { GoogleButtonStyled } from './GoogleButton.styled'
 import logoGoogle from '../../../../images/svg/logo-google.svg'
+// import './GoogleButton.scss'
 
 const GoogleButton: FC<GoogleButtonProps> = ({ onClick, label = 'Log In with Google' }) => {
   return (
-    <GoogleButtonStyled type='button' className='google-button' onClick={onClick}>
+    <button type='button' className='google-button' onClick={onClick}>
       <img className='google-logo' src={logoGoogle} alt=''></img>
       <span>{label}</span>
-    </GoogleButtonStyled>
+    </button>
   )
 }
 

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColor.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IconSvgURLWithThemeColorStyled } from './IconSvgURLWithThemeColor.styled';
+// import './IconSvgURLWithThemeColor.scss'
 export const IconSvgURLWithThemeColor = ({ color = '', url, width = '30', height = '30' }) => {
     let backgroundColor;
     if (color.length > 0) {
         backgroundColor = color;
     }
-    return (_jsx(IconSvgURLWithThemeColorStyled, { className: 'icon-svg-with-theme-color', style: {
+    return (_jsx("i", { className: 'icon-svg-with-theme-color', style: {
             width: `${width}px`,
             height: `${height}px`,
             mask: `url(${url}) no-repeat center / contain`,

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColor.scss

@@ -0,0 +1,6 @@
+@import '../../../globalStyles/variables.scss';
+
+.icon-svg-with-theme-color {
+  display: block;
+  background-color: get-color(primary);
+}

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColor.tsx

@@ -2,7 +2,8 @@
 import React, { type FC } from 'react'
 
 import { type IconSvgURLWithThemeColorProps } from './IconSvgURLWithThemeColorProps.types'
-import { IconSvgURLWithThemeColorStyled } from './IconSvgURLWithThemeColor.styled'
+
+// import './IconSvgURLWithThemeColor.scss'
 
 export const IconSvgURLWithThemeColor: FC<IconSvgURLWithThemeColorProps> = ({
   color = '',
@@ -15,7 +16,7 @@ export const IconSvgURLWithThemeColor: FC<IconSvgURLWithThemeColorProps> = ({
     backgroundColor = color
   }
   return (
-    <IconSvgURLWithThemeColorStyled
+    <i
       className='icon-svg-with-theme-color'
       style={{
         width: `${width}px`,

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React from 'react';
-import { IconTextInfoSectionStyled } from './IconTextInfoSection.styled';
+// import './IconTextInfoSection.scss'
 export const IconTextInfoSection = ({ items, classnames = '' }) => {
-    return (_jsx(IconTextInfoSectionStyled, { className: `icon-text-info-section bottom-side ${classnames}`, children: items.map(({ text, src }, index) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: 'box', children: [_jsx("div", { className: 'item-image', children: _jsx("img", { className: 'image', src: src, alt: 'create' }) }), _jsx("div", { className: 'item-text', children: _jsx("p", { className: 'no-margin', children: text }) })] }), items.length - 1 !== index && _jsx("div", { className: 'icon-text-info-section__separator' })] }, `${src}-${index}`))) }));
+    return (_jsx("div", { className: `icon-text-info-section bottom-side ${classnames}`, children: items.map(({ text, src }, index) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: 'box', children: [_jsx("div", { className: 'item-image', children: _jsx("img", { className: 'image', src: src, alt: 'create' }) }), _jsx("div", { className: 'item-text', children: _jsx("p", { className: 'no-margin', children: text }) })] }), items.length - 1 !== index && _jsx("div", { className: 'icon-text-info-section__separator' })] }, `${src}-${index}`))) }));
 };

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.scss

@@ -0,0 +1,80 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.icon-text-info-section {
+  &__separator {
+    background-color: get-color(neutral, neutral-3);
+    border-bottom: 1px get-color(neutral, neutral-3) solid;
+    display: none;
+    height: 70px;
+    padding-bottom: 40px;
+    width: 1px;
+
+    @include laptop {
+      margin: 0 32px;
+    }
+
+    @include portrait-tablets {
+      display: flex;
+    }
+
+    @include mobile {
+      margin: 19.2px 32px;
+    }
+  }
+}
+
+.icon-text-info-section.bottom-side {
+  display: flex;
+  flex-direction: column;
+  background-color: get-color(neutral, neutral-4);
+  justify-content: center;
+  padding: 1rem 3rem;
+
+  @include portrait-tablets {
+    padding: 0;
+    flex-direction: row;
+  }
+
+  @include portrait-tablets {
+    padding: 1rem 1rem;
+  }
+
+  .box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+
+    @include mobile {
+      margin: 0.4rem;
+    }
+
+    @include portrait-tablets {
+      margin: 0 1rem;
+    }
+  }
+
+  .item-image {
+    width: 2.5rem;
+    margin-right: 1rem;
+
+    @include mobile {
+      width: 1.5rem;
+    }
+
+    .image {
+      width: 40px;
+      height: 40px;
+
+      @include mobile {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .item-text {
+    font-size: 16px;
+  }
+}

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.tsx

@@ -2,11 +2,12 @@
 import React from 'react'
 
 import { type IconTextInfoSectionProps } from './IconTextInfoSection.types'
-import { IconTextInfoSectionStyled } from './IconTextInfoSection.styled'
+
+// import './IconTextInfoSection.scss'
 
 export const IconTextInfoSection: React.FC<IconTextInfoSectionProps> = ({ items, classnames = '' }) => {
   return (
-    <IconTextInfoSectionStyled className={`icon-text-info-section bottom-side ${classnames}`}>
+    <div className={`icon-text-info-section bottom-side ${classnames}`}>
       {items.map(({ text, src }, index) => (
         <React.Fragment key={`${src}-${index}`}>
           <div className='box'>
@@ -20,6 +21,6 @@ export const IconTextInfoSection: React.FC<IconTextInfoSectionProps> = ({ items,
           {items.length - 1 !== index && <div className='icon-text-info-section__separator'></div>}
         </React.Fragment>
       ))}
-    </IconTextInfoSectionStyled>
+    </div>
   )
 }

package/dist/src/components/atoms/InfoBox/InfoBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InfoBoxStyled } from './InfoBox.styled';
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined';
+// import './InfoBox.scss'
 const InfoBox = ({ children, type, noIcon }) => {
-    return (_jsxs(InfoBoxStyled, { className: `info-box ${type}`, children: [!noIcon && (_jsx("div", { className: 'info-box__img', children: _jsx(InfoError24pxOutlined, { fill: 'blue' }) })), _jsx("div", { className: 'info-box__text-container', children: children })] }));
+    return (_jsxs("div", { className: `info-box ${type}`, children: [!noIcon && (_jsx("div", { className: 'info-box__img', children: _jsx(InfoError24pxOutlined, { fill: 'blue' }) })), _jsx("div", { className: 'info-box__text-container', children: children })] }));
 };
 export default InfoBox;

package/dist/src/components/atoms/InfoBox/InfoBox.scss

@@ -0,0 +1,40 @@
+@import '../../../globalStyles/variables.scss';
+
+.info-box {
+  border-radius: $global-border-radius;
+  border: 1px solid;
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+
+  &.error {
+    border-color: get-color(error, main);
+    color: get-color(error, main);
+    background-color: get-color(error, error-3);
+    use {
+      fill: get-color(error, main);
+    }
+  }
+
+  &.warning {
+    border-color: get-color(secondary, main-dark-1);
+    color: get-color(secondary, main-dark-2);
+    background-color: get-color(secondary, main-light-4);
+    use {
+      fill: get-color(secondary, main-dark-1);
+    }
+  }
+
+  .info-box__img {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .info-box__text-container {
+    margin-left: 0.5rem;
+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 1.5rem;
+    }
+  }
+}

package/dist/src/components/atoms/InfoBox/InfoBox.tsx

@@ -3,19 +3,19 @@
 import React, { type FC } from 'react'
 
 import { type InfoBoxProps } from './InfoBoxProps.types'
-import { InfoBoxStyled } from './InfoBox.styled'
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined'
+// import './InfoBox.scss'
 
 const InfoBox: FC<InfoBoxProps> = ({ children, type, noIcon }) => {
   return (
-    <InfoBoxStyled className={`info-box ${type}`}>
+    <div className={`info-box ${type}`}>
       {!noIcon && (
         <div className='info-box__img'>
           <InfoError24pxOutlined fill='blue' />
         </div>
       )}
       <div className='info-box__text-container'>{children}</div>
-    </InfoBoxStyled>
+    </div>
   )
 }
 

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { JumbotronStaticStyled } from './JumbotronStatic.styled';
+// import './JumbotronStatic.scss'
 export const JumbotronStatic = ({ title }) => {
-    return (_jsx(JumbotronStaticStyled, { className: 'jumbotron--static', children: _jsx("h1", { className: 'serif --super-hero', children: title }) }));
+    return (_jsx("section", { className: 'jumbotron--static', children: _jsx("h1", { className: 'serif --super-hero', children: title }) }));
 };

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.scss

@@ -0,0 +1,8 @@
+@import '../../../globalStyles/variables.scss';
+
+.jumbotron--static {
+  text-align: center;
+  margin: 0 auto;
+  background-color: get-color(primary, main-light-6);
+  padding: 2.5rem 1rem 4rem;
+}

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.tsx

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type JumbotronStaticProps } from './JumbotronStaticProps.types'
-import { JumbotronStaticStyled } from './JumbotronStatic.styled'
+// import './JumbotronStatic.scss'
 
 export const JumbotronStatic: FC<JumbotronStaticProps> = ({ title }) => {
   return (
-    <JumbotronStaticStyled className={'jumbotron--static'}>
+    <section className={'jumbotron--static'}>
       <h1 className='serif --super-hero'>{title}</h1>
-    </JumbotronStaticStyled>
+    </section>
   )
 }

package/dist/src/components/atoms/KeyFactRatafiaCard/KeyFactRatafiaCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyFactRatafiaCardStyled } from './KeyFactRatafiaCard.styled';
+// import './KeyFactRatafiaCard.scss'
 export const KeyFactRatafiaCard = ({ title, content }) => {
-    return (_jsxs(KeyFactRatafiaCardStyled, { className: 'key-fact-item', children: [_jsxs("div", { className: 'key-fact-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight key-fact-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium key-fact-item__wrapper__content', children: content })] }), _jsx("span", { className: 'key-fact-item__divider' })] }));
+    return (_jsxs("div", { className: 'key-fact-item', children: [_jsxs("div", { className: 'key-fact-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight key-fact-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium key-fact-item__wrapper__content', children: content })] }), _jsx("span", { className: 'key-fact-item__divider' })] }));
 };
 export default KeyFactRatafiaCard;