@npm_leadtech/legal-lib-components 5.7.7 → 5.7.8

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.tsx

@@ -2,7 +2,6 @@ import React, { FC, ReactNode } from 'react'
 
 import { BenefitProps, RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types'
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms'
-import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 
 const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
@@ -26,7 +25,7 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
     ))
 
   return (
-    <RatafiaSubscriptionCardStyled className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
+    <div className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
       <div className='ratafia-card__header'>
         {title && (
           <div className='ratafia-card__title'>
@@ -52,7 +51,7 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
           />
         </div>
       )}
-    </RatafiaSubscriptionCardStyled>
+    </div>
   )
 }
 

package/dist/src/components/molecules/Snackbar/Snackbar.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Button } from '../../atoms';
-import { SnackbarStyled } from './Snackbar.styled';
+// import './Snackbar.scss'
 const Snackbar = ({ type, title, text, button, dismissTimeout = 1000, autoDismissTimeout, autoDismiss, onDismiss, onAutoDismiss }) => {
     const [snackbarOpen, changeSnackbarOpen] = useState();
     useEffect(() => {
@@ -38,6 +38,6 @@ const Snackbar = ({ type, title, text, button, dismissTimeout = 1000, autoDismis
         active: snackbarOpen,
         hidden: !(snackbarOpen ?? false)
     });
-    return (_jsxs(SnackbarStyled, { className: classes, "aria-hidden": 'true', children: [_jsx("span", { className: 'snackbar-close-icon', onClick: closeSnackbar, tabIndex: 0, children: "\u00D7" }), _jsxs("div", { className: 'snackbar-content', children: [_jsxs("div", { className: 'snackbar-content__text-container', children: [_jsx("p", { className: 'snackbar-title', children: title ?? '' }), _jsx("p", { className: 'snackbar-text', children: text ?? '' })] }), button?.color !== null && Boolean(button?.label) && (_jsx("div", { className: 'snackbar-content__button', children: _jsx(Button, { label: button?.label ?? '', onClick: button?.onClick, color: button?.color ?? 'primary', noLink: true, functionParameters: '', dataQa: 'back' }) }))] })] }));
+    return (_jsxs("div", { className: classes, "aria-hidden": 'true', children: [_jsx("span", { className: 'snackbar-close-icon', onClick: closeSnackbar, tabIndex: 0, children: "\u00D7" }), _jsxs("div", { className: 'snackbar-content', children: [_jsxs("div", { className: 'snackbar-content__text-container', children: [_jsx("p", { className: 'snackbar-title', children: title ?? '' }), _jsx("p", { className: 'snackbar-text', children: text ?? '' })] }), button?.color !== null && Boolean(button?.label) && (_jsx("div", { className: 'snackbar-content__button', children: _jsx(Button, { label: button?.label ?? '', onClick: button?.onClick, color: button?.color ?? 'primary', noLink: true, functionParameters: '', dataQa: 'back' }) }))] })] }));
 };
 export default Snackbar;

package/dist/src/components/molecules/Snackbar/Snackbar.scss

@@ -0,0 +1,135 @@
+@import '../../../globalStyles/functions';
+
+.snackbar {
+  color: var(--neutral-main);
+  line-height: 1.5;
+  margin-bottom: 1em;
+  padding: 0.5em 0 0.5em 0;
+  margin-right: 2%;
+  margin-left: 2%;
+  width: 96%;
+  transition: transform 1s;
+  z-index: 10000;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+
+  @include portrait-tablets {
+    margin: 0;
+    width: 18rem;
+  }
+  @include landscape-tablets {
+    width: 27rem;
+  }
+  @include laptop {
+    width: 36rem;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    float: left;
+    margin: space(5) space(3) 0 space(3);
+    @include portrait-tablets {
+      margin: space(3) space(3) 0 space(3);
+    }
+  }
+
+  &-close-icon {
+    cursor: pointer;
+    float: right;
+    font-size: 1.25rem;
+    line-height: 3;
+    margin-left: 1em;
+    margin-right: 1em;
+    opacity: 0.8;
+    @include portrait-tablets {
+      line-height: 2;
+    }
+  }
+
+  &--welcome {
+    background-color: var(--neutral-main);
+    color: var(--others-white);
+    border: 1px solid var(--neutral-neutral-2);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNUREOEMzIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+        no-repeat;
+    }
+  }
+
+  &--success {
+    background-color: var(--snackbar-success-bg);
+    color: var(--snackbar-success-color);
+    border: 1px solid var(--snackbar-success-border);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNOC44IDE1LjlMNC42IDExLjcgMy4yIDEzLjEgOC44IDE4LjcgMjAuOCA2LjcgMTkuNCA1LjN6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8bWFzayBpZD0icHJlZml4X19iIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcHJlZml4X19hIi8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDxnIGZpbGw9IiMwMjM3NEEiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)
+        no-repeat;
+    }
+  }
+
+  &--error {
+    background-color: var(--error-main);
+    color: var(--others-white);
+    border: 1px solid get-color(error, error-2);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bS0xLTloMnY2aC0ydi02em0wLTRoMnYyaC0yVjd6IiAvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6IiAvPgogICAgICAgIDxtYXNrIGlkPSJwcmVmaXhfX2IiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2EiIC8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDx1c2UgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcHJlZml4X19hIiAvPgogICAgICAgIDxnIGZpbGw9IiNGRkYiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiIC8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
+        no-repeat;
+    }
+  }
+
+  &--reminder {
+    background-color: var(--snackbar-reminder-bg);
+    color: var(--neutral-main);
+    border: 1px solid var(--snackbar-reminder-border);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjOTM2QzJGIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+        no-repeat;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    &__text-container {
+      display: flex;
+      flex-direction: column;
+      margin-right: 1rem;
+      min-width: 1%;
+    }
+
+    &__button button {
+      margin-top: 0.5rem;
+      height: auto !important;
+
+      label {
+        white-space: nowrap;
+      }
+    }
+
+    @include landscape-tablets {
+      flex-direction: row;
+      margin-top: inherit;
+    }
+  }
+
+  &-title {
+    font-weight: bold;
+  }
+
+  .e-button.remove-yellow {
+    border-color: transparent;
+
+    &:hover {
+      background-color: var(--others-white);
+    }
+  }
+}

package/dist/src/components/molecules/Snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames'
 
 import { Button } from '../../atoms'
 import { type SnackbarProps } from './SnackbarProps.types'
-import { SnackbarStyled } from './Snackbar.styled'
+// import './Snackbar.scss'
 
 const Snackbar: FC<SnackbarProps> = ({
   type,
@@ -53,7 +53,7 @@ const Snackbar: FC<SnackbarProps> = ({
   })
 
   return (
-    <SnackbarStyled className={classes} aria-hidden='true'>
+    <div className={classes} aria-hidden='true'>
       <span className='snackbar-close-icon' onClick={closeSnackbar} tabIndex={0}>
         &times;
       </span>
@@ -75,7 +75,7 @@ const Snackbar: FC<SnackbarProps> = ({
           </div>
         )}
       </div>
-    </SnackbarStyled>
+    </div>
   )
 }
 

package/dist/src/components/molecules/StepGetForm/StepGetForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StepGetFormStyled } from './StepGetForm.styled';
+// import './StepGetForm.scss'
 const StepGetForm = ({ description, title = '', image }) => {
-    return (_jsxs(StepGetFormStyled, { className: 'homeStepsItem', children: [image != null && _jsx("div", { className: 'step__image', children: image }), _jsxs("div", { className: 'step__information', children: [_jsx("p", { className: 'step__information__title sans-serif --big', children: title }), _jsx("small", { className: 'sans-serif --small', children: description })] })] }));
+    return (_jsxs("div", { className: 'homeStepsItem', children: [image != null && _jsx("div", { className: 'step__image', children: image }), _jsxs("div", { className: 'step__information', children: [_jsx("p", { className: 'step__information__title sans-serif --big', children: title }), _jsx("small", { className: 'sans-serif --small', children: description })] })] }));
 };
 export default StepGetForm;

package/dist/src/components/molecules/StepGetForm/{StepGetForm.styled.ts → StepGetForm.scss}

@@ -1,7 +1,7 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const StepGetFormStyled = styled.div`
+.homeStepsItem {
   border-radius: var(--global-border-radius);
   display: flex;
   max-width: 100%;
@@ -21,17 +21,17 @@ export const StepGetFormStyled = styled.div`
     margin-right: 0;
   }
 
-  @media ${device['portrait-tablets']} {
+  @include portrait-tablets {
     padding: 1.5rem;
   }
-  @media ${device['landscape-tablets']} {
+  @include landscape-tablets {
     max-width: calc(100% / 3 - 0.5rem);
     min-width: calc(100% / 3 - 0.5rem);
     padding: 1.5rem;
     height: 342px;
     flex-flow: column nowrap;
   }
-  @media ${device.laptop} {
+  @include laptop {
     margin-right: 0;
     max-width: calc(100% / 3 - 1rem);
     min-width: calc(100% / 3 - 1rem);
@@ -42,7 +42,7 @@ export const StepGetFormStyled = styled.div`
     max-width: 50%;
     align-self: center;
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       max-width: 100%;
       text-align: center;
       margin-top: 0;
@@ -62,21 +62,21 @@ export const StepGetFormStyled = styled.div`
     align-self: center;
     padding-bottom: 0;
     margin: 0 auto;
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       padding-bottom: 2.5rem;
     }
-    @media ${device.laptop} {
+    @include laptop {
       margin-top: 2rem;
     }
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       width: 100%;
     }
   }
 
   .gatsby-image-wrapper {
     width: 88px;
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       height: 88px;
     }
 
@@ -88,7 +88,7 @@ export const StepGetFormStyled = styled.div`
   p {
     margin-bottom: 0.5rem;
     font-weight: bold;
-    @media ${device['portrait-tablets']} {
+    @include portrait-tablets {
       margin-bottom: 1.5rem;
     }
   }
@@ -102,4 +102,4 @@ export const StepGetFormStyled = styled.div`
       width: 100%;
     }
   }
-`
+}

package/dist/src/components/molecules/StepGetForm/StepGetForm.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 
 import { type StepGetFormProps } from './StepGetFormProps.types'
-import { StepGetFormStyled } from './StepGetForm.styled'
+// import './StepGetForm.scss'
 
 const StepGetForm: React.FC<StepGetFormProps> = ({ description, title = '', image }) => {
   return (
-    <StepGetFormStyled className='homeStepsItem'>
+    <div className='homeStepsItem'>
       {image != null && <div className={'step__image'}>{image}</div>}
       <div className={'step__information'}>
         <p className={'step__information__title sans-serif --big'}>{title}</p>
         <small className={'sans-serif --small'}>{description}</small>
       </div>
-    </StepGetFormStyled>
+    </div>
   )
 }
 

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StepRatafiaCard } from '../../atoms';
-import { StepRatafiaCardListStyled } from './StepRatafiaCardList.styled';
 // import './StepRatafiaCardList.scss'
 const StepRatafiaCardList = ({ steps = [] }) => {
     if (steps.length === 0)
         return null;
-    return (_jsx(StepRatafiaCardListStyled, { className: 'step-ratafia-card-list', children: steps.map((step) => (_jsx(StepRatafiaCard, { ...step }, step.id))) }));
+    return (_jsx("div", { className: 'step-ratafia-card-list', children: steps.map((step) => (_jsx(StepRatafiaCard, { ...step }, step.id))) }));
 };
 export default StepRatafiaCardList;

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.tsx

@@ -2,18 +2,17 @@ import React, { type FC } from 'react'
 
 import { StepRatafiaCard } from '../../atoms'
 import { type StepRatafiaCardListProps } from './StepRatafiaCardListProps.types'
-import { StepRatafiaCardListStyled } from './StepRatafiaCardList.styled'
 // import './StepRatafiaCardList.scss'
 
 const StepRatafiaCardList: FC<StepRatafiaCardListProps> = ({ steps = [] }) => {
   if (steps.length === 0) return null
 
   return (
-    <StepRatafiaCardListStyled className='step-ratafia-card-list'>
+    <div className='step-ratafia-card-list'>
       {steps.map((step) => (
         <StepRatafiaCard key={step.id} {...step} />
       ))}
-    </StepRatafiaCardListStyled>
+    </div>
   )
 }
 export default StepRatafiaCardList

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TagRatafiaItem } from '../../atoms';
-import { TagsRatafiaListStyled } from './TagsRatafiaList.styled';
+// import './TagsRatafiaList.scss'
 const TagsRatafiaList = ({ tags = [] }) => {
     if (tags.length === 0)
         return null;
-    return (_jsx(TagsRatafiaListStyled, { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag }, tag.id))) }));
+    return (_jsx("div", { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag }, tag.id))) }));
 };
 export default TagsRatafiaList;

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.scss

@@ -0,0 +1,5 @@
+.tag-ratafia-list {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.tsx

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { TagRatafiaItem } from '../../atoms'
 import { type TagsRatafiaListProps } from './TagsRatafiaListProps.types'
-import { TagsRatafiaListStyled } from './TagsRatafiaList.styled'
+// import './TagsRatafiaList.scss'
 
 const TagsRatafiaList: FC<TagsRatafiaListProps> = ({ tags = [] }) => {
   if (tags.length === 0) return null
 
   return (
-    <TagsRatafiaListStyled className='tag-ratafia-list'>
+    <div className='tag-ratafia-list'>
       {tags.map((tag) => (
         <TagRatafiaItem key={tag.id} {...tag} />
       ))}
-    </TagsRatafiaListStyled>
+    </div>
   )
 }
 export default TagsRatafiaList

package/dist/src/components/molecules/TextInput/TextInput.js

@@ -8,6 +8,7 @@ import { Input } from './Input';
 import { TextInputLabel } from './TextInputLabel';
 import { TextInputMessage } from './TextInputMessage';
 import { TextInputTooltip } from './TextInputTooltip';
+// import './TextInput.scss'
 const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,

package/dist/src/components/molecules/TextInput/TextInput.tsx

@@ -9,6 +9,7 @@ import { TextInputLabel } from './TextInputLabel'
 import { TextInputMessage } from './TextInputMessage'
 import { type TextInputProps } from './TextInputProps.types'
 import { TextInputTooltip } from './TextInputTooltip'
+// import './TextInput.scss'
 
 const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   (

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrustworthyWebsitesStyled } from './TrustworthyWebsites.styled';
+// import './TrustworthyWebsites.scss'
 const TrustworthyWebsites = ({ images }) => {
-    return (_jsx(TrustworthyWebsitesStyled, { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: item.src }, item.id))) }));
+    return (_jsx("div", { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: item.src }, item.id))) }));
 };
 export default TrustworthyWebsites;

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.scss

@@ -0,0 +1,14 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.trustworthy-websites {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  &__image {
+    margin: 1.5rem;
+    max-width: 7rem;
+  }
+}

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.tsx

@@ -1,17 +1,17 @@
 import React, { type FC } from 'react'
 
 import { type TrustworthyWebsitesProps } from './TrustworthyWebsitesProps.types'
-import { TrustworthyWebsitesStyled } from './TrustworthyWebsites.styled'
+// import './TrustworthyWebsites.scss'
 
 const TrustworthyWebsites: FC<TrustworthyWebsitesProps> = ({ images }) => {
   return (
-    <TrustworthyWebsitesStyled className='trustworthy-websites'>
+    <div className='trustworthy-websites'>
       {images.map((item) => (
         <div className='trustworthy-websites__image' key={item.id}>
           {item.src}
         </div>
       ))}
-    </TrustworthyWebsitesStyled>
+    </div>
   )
 }
 

package/dist/src/components/molecules/TypeModulesList/TypeModulesList.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, RichTextStrapi } from '../../atoms';
-import { TypeModulesListStyled } from './TypeModulesList.styled';
 // import './TypeModulesList.scss'
 const TypeModulesList = ({ typeModules }) => {
-    return (_jsx(TypeModulesListStyled, { className: 'type-modules-list', children: typeModules.map((module) => (_jsxs("div", { className: 'module-item', children: [_jsx("div", { className: 'module-image', children: module.image }), _jsxs("div", { className: 'module-content', children: [_jsx("h2", { className: 'module-title', children: module.title }), _jsx("div", { className: 'module-description', children: _jsx(RichTextStrapi, { ...module.description }) }), _jsxs("div", { className: 'module-buttons', children: [_jsx(Button, { dataQa: '', color: 'secondary3', givenClass: 'download-icon', label: module.buttonPdfCta, link: module.buttonPdfUrl ?? undefined, isExternal: true, target: '_blank' }), _jsx(Button, { dataQa: '', color: 'secondary3', givenClass: 'download-icon', label: module.buttonWordCta, link: module.buttonWordUrl ?? undefined, isExternal: true, target: '_blank' })] })] })] }, module.id))) }));
+    return (_jsx("div", { className: 'type-modules-list', children: typeModules.map((module) => (_jsxs("div", { className: 'module-item', children: [_jsx("div", { className: 'module-image', children: module.image }), _jsxs("div", { className: 'module-content', children: [_jsx("h2", { className: 'module-title', children: module.title }), _jsx("div", { className: 'module-description', children: _jsx(RichTextStrapi, { ...module.description }) }), _jsxs("div", { className: 'module-buttons', children: [_jsx(Button, { dataQa: '', color: 'secondary3', givenClass: 'download-icon', label: module.buttonPdfCta, link: module.buttonPdfUrl ?? undefined, isExternal: true, target: '_blank' }), _jsx(Button, { dataQa: '', color: 'secondary3', givenClass: 'download-icon', label: module.buttonWordCta, link: module.buttonWordUrl ?? undefined, isExternal: true, target: '_blank' })] })] })] }, module.id))) }));
 };
 export default TypeModulesList;

package/dist/src/components/molecules/TypeModulesList/{TypeModulesList.styled.ts → TypeModulesList.scss}

@@ -1,13 +1,13 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const TypeModulesListStyled = styled.div`
+.type-modules-list {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   max-width: 400px;
 
-  @media ${device.laptop} {
+  @include laptop {
     max-width: none;
   }
 
@@ -19,7 +19,7 @@ export const TypeModulesListStyled = styled.div`
     padding: 24px;
     box-shadow: 0px 2px 6px 0px #02374a3f;
 
-    @media ${device.laptop} {
+    @include laptop {
       flex-direction: row;
     }
   }
@@ -34,7 +34,7 @@ export const TypeModulesListStyled = styled.div`
     margin-bottom: 1rem;
     margin-top: 1rem;
 
-    @media ${device.laptop} {
+    @include laptop {
       margin-top: 0;
     }
   }
@@ -54,7 +54,7 @@ export const TypeModulesListStyled = styled.div`
     justify-content: center;
     width: 100%;
 
-    @media ${device.laptop} {
+    @include laptop {
       justify-content: flex-start;
       width: 25%;
       margin-right: 20px;
@@ -66,7 +66,7 @@ export const TypeModulesListStyled = styled.div`
     flex-direction: column;
     width: 100%;
 
-    @media ${device.laptop} {
+    @include laptop {
       width: 65%;
     }
   }
@@ -76,7 +76,7 @@ export const TypeModulesListStyled = styled.div`
     gap: 0.5rem;
     width: 100%;
 
-    @media ${device.laptop} {
+    @include laptop {
       width: max-content;
       gap: 0;
     }
@@ -90,7 +90,7 @@ export const TypeModulesListStyled = styled.div`
       padding-bottom: 0.6rem;
       background: var(--others-white);
 
-      @media ${device.laptop} {
+      @include laptop {
         margin: 0 0.5rem;
       }
 
@@ -105,4 +105,4 @@ export const TypeModulesListStyled = styled.div`
       }
     }
   }
-`
+}

package/dist/src/components/molecules/TypeModulesList/TypeModulesList.tsx

@@ -3,12 +3,11 @@ import React, { type FC } from 'react'
 
 import { Button, RichTextStrapi } from '../../atoms'
 import { type TypeModulesListProps } from './TypeModulesListProps.types'
-import { TypeModulesListStyled } from './TypeModulesList.styled'
 // import './TypeModulesList.scss'
 
 const TypeModulesList: FC<TypeModulesListProps> = ({ typeModules }) => {
   return (
-    <TypeModulesListStyled className='type-modules-list'>
+    <div className='type-modules-list'>
       {typeModules.map((module) => (
         <div className='module-item' key={module.id}>
           <div className='module-image'>{module.image}</div>
@@ -40,7 +39,7 @@ const TypeModulesList: FC<TypeModulesListProps> = ({ typeModules }) => {
           </div>
         </div>
       ))}
-    </TypeModulesListStyled>
+    </div>
   )
 }
 

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZone.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-import { UploadRatafiaZoneStyled } from './UploadRatafiaZone.styled';
+// import './UploadRatafiaZone.scss'
 const UploadRatafiaZone = ({ content, handleDragOver, handleDragOut, handleDrop, documentUploadFileDialog, ctaDataQa }) => {
-    return (_jsx(UploadRatafiaZoneStyled, { className: 'upload-ratafia-zone', onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragOut, children: _jsxs("div", { className: 'upload-ratafia-zone__content', children: [_jsx("p", { className: 'sans-serif --medium upload-ratafia-zone__content__title', children: content.title }), _jsx(Button, { givenClass: 'upload-ratafia-zone__content__cta', dataQa: ctaDataQa, noLink: true, onClick: documentUploadFileDialog, color: 'primary', label: content.ctaLabel, children: content.ctaIcon != null && (_jsx("div", { className: 'upload-ratafia-zone__content__cta__icon', children: content.ctaIcon })) }), _jsx("p", { className: 'sans-serif --extra-small upload-ratafia-zone__content__description', children: content.description }), _jsx("span", { className: 'sans-serif --extra-small upload-ratafia-zone__content__service-terms', itemProp: 'text', children: content.serviceTerms })] }) }));
+    return (_jsx("div", { className: 'upload-ratafia-zone', onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragOut, children: _jsxs("div", { className: 'upload-ratafia-zone__content', children: [_jsx("p", { className: 'sans-serif --medium upload-ratafia-zone__content__title', children: content.title }), _jsx(Button, { givenClass: 'upload-ratafia-zone__content__cta', dataQa: ctaDataQa, noLink: true, onClick: documentUploadFileDialog, color: 'primary', label: content.ctaLabel, children: content.ctaIcon != null && (_jsx("div", { className: 'upload-ratafia-zone__content__cta__icon', children: content.ctaIcon })) }), _jsx("p", { className: 'sans-serif --extra-small upload-ratafia-zone__content__description', children: content.description }), _jsx("span", { className: 'sans-serif --extra-small upload-ratafia-zone__content__service-terms', itemProp: 'text', children: content.serviceTerms })] }) }));
 };
 export default UploadRatafiaZone;

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZone.scss

@@ -0,0 +1,63 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.upload-ratafia-zone {
+  padding: 1rem;
+
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @include landscape-tablets {
+    max-width: 340px;
+  }
+  @include laptop {
+    max-width: 560px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    padding: 3.5rem 2rem 1rem 2rem;
+
+    border-radius: 16px;
+    background: var(--neutral-neutral-6);
+    color: var(--neutral-neutral-3);
+
+    &__title {
+      margin-bottom: 2.5rem;
+    }
+    &__cta {
+      display: flex;
+      padding: 0.75rem 1rem;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+
+      &__icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    &__description {
+      margin-top: 3.5rem;
+      margin-bottom: 1rem;
+    }
+    &__service-terms {
+      a {
+        color: var(--neutral-neutral-3);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &:hover .upload-ratafia-zone__content__title {
+    color: var(--neutral-main);
+  }
+}