@npm_leadtech/legal-lib-components 5.7.8 → 5.8.0

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

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

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

@@ -1,9 +1,10 @@
 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("div", { className: 'step-ratafia-card-list', children: steps.map((step) => (_jsx(StepRatafiaCard, { ...step }, step.id))) }));
+    return (_jsx(StepRatafiaCardListStyled, { className: 'step-ratafia-card-list', children: steps.map((step) => (_jsx(StepRatafiaCard, { ...step }, step.id))) }));
 };
 export default StepRatafiaCardList;

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.styled.d.ts

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

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

@@ -0,0 +1,19 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const StepRatafiaCardListStyled = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  @media ${device.desktop} {
+    flex-direction: row;
+  }
+
+  @media ${device['desktop-xl']} {
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;

package/dist/src/components/molecules/StepRatafiaCardList/StepRatafiaCardList.styled.ts

@@ -0,0 +1,20 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const StepRatafiaCardListStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  @media ${device.desktop} {
+    flex-direction: row;
+  }
+
+  @media ${device['desktop-xl']} {
+    flex-direction: column;
+    gap: 1rem;
+  }
+`

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

@@ -2,17 +2,18 @@ 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 (
-    <div className='step-ratafia-card-list'>
+    <StepRatafiaCardListStyled className='step-ratafia-card-list'>
       {steps.map((step) => (
         <StepRatafiaCard key={step.id} {...step} />
       ))}
-    </div>
+    </StepRatafiaCardListStyled>
   )
 }
 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 './TagsRatafiaList.scss'
+import { TagsRatafiaListStyled } from './TagsRatafiaList.styled';
 const TagsRatafiaList = ({ tags = [] }) => {
     if (tags.length === 0)
         return null;
-    return (_jsx("div", { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag }, tag.id))) }));
+    return (_jsx(TagsRatafiaListStyled, { className: 'tag-ratafia-list', children: tags.map((tag) => (_jsx(TagRatafiaItem, { ...tag }, tag.id))) }));
 };
 export default TagsRatafiaList;

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.styled.d.ts

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

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const TagsRatafiaListStyled = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+`;

package/dist/src/components/molecules/TagsRatafiaList/TagsRatafiaList.styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const TagsRatafiaListStyled = styled.div`
+  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 './TagsRatafiaList.scss'
+import { TagsRatafiaListStyled } from './TagsRatafiaList.styled'
 
 const TagsRatafiaList: FC<TagsRatafiaListProps> = ({ tags = [] }) => {
   if (tags.length === 0) return null
 
   return (
-    <div className='tag-ratafia-list'>
+    <TagsRatafiaListStyled className='tag-ratafia-list'>
       {tags.map((tag) => (
         <TagRatafiaItem key={tag.id} {...tag} />
       ))}
-    </div>
+    </TagsRatafiaListStyled>
   )
 }
 export default TagsRatafiaList

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

@@ -8,7 +8,6 @@ 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,7 +9,6 @@ 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 './TrustworthyWebsites.scss'
+import { TrustworthyWebsitesStyled } from './TrustworthyWebsites.styled';
 const TrustworthyWebsites = ({ images }) => {
-    return (_jsx("div", { className: 'trustworthy-websites', children: images.map((item) => (_jsx("div", { className: 'trustworthy-websites__image', children: item.src }, item.id))) }));
+    return (_jsx(TrustworthyWebsitesStyled, { 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.styled.d.ts

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

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const TrustworthyWebsitesStyled = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  .trustworthy-websites {
+    &__image {
+      margin: 1.5rem;
+      max-width: 7rem;
+    }
+  }
+`;

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsites.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+export const TrustworthyWebsitesStyled = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  .trustworthy-websites {
+    &__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 './TrustworthyWebsites.scss'
+import { TrustworthyWebsitesStyled } from './TrustworthyWebsites.styled'
 
 const TrustworthyWebsites: FC<TrustworthyWebsitesProps> = ({ images }) => {
   return (
-    <div className='trustworthy-websites'>
+    <TrustworthyWebsitesStyled className='trustworthy-websites'>
       {images.map((item) => (
         <div className='trustworthy-websites__image' key={item.id}>
           {item.src}
         </div>
       ))}
-    </div>
+    </TrustworthyWebsitesStyled>
   )
 }
 

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

@@ -1,7 +1,8 @@
 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("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))) }));
+    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))) }));
 };
 export default TypeModulesList;

package/dist/src/components/molecules/TypeModulesList/TypeModulesList.styled.d.ts

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

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

@@ -0,0 +1,107 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const TypeModulesListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 400px;
+
+  @media ${device.laptop} {
+    max-width: none;
+  }
+
+  .module-item {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background-color: var(--neutral-neutral-6);
+    padding: 24px;
+    box-shadow: 0px 2px 6px 0px #02374a3f;
+
+    @media ${device.laptop} {
+      flex-direction: row;
+    }
+  }
+
+  .module-title {
+    font-family: var(--font-sans);
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+
+    @media ${device.laptop} {
+      margin-top: 0;
+    }
+  }
+
+  .module-description {
+    font-family: var(--font-sans);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    margin-bottom: 1rem;
+  }
+
+  .module-image {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    @media ${device.laptop} {
+      justify-content: flex-start;
+      width: 25%;
+      margin-right: 20px;
+    }
+  }
+
+  .module-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    @media ${device.laptop} {
+      width: 65%;
+    }
+  }
+
+  .module-buttons {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+
+    @media ${device.laptop} {
+      width: max-content;
+      gap: 0;
+    }
+
+    .e-button {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      margin-top: 0;
+      padding-top: 0.6rem;
+      padding-bottom: 0.6rem;
+      background: var(--others-white);
+
+      @media ${device.laptop} {
+        margin: 0 0.5rem;
+      }
+
+      &.download-icon {
+        &::before {
+          content: '';
+          width: 1rem;
+          height: 1rem;
+          background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjg2MjUgOC40NzA1NEMxMy4xMjIyIDguMjEwODUgMTMuMTIyMiA3Ljc4OTggMTIuODYyNSA3LjUzMDEyQzEyLjYwMjkgNy4yNzA1OSAxMi4xODIyIDcuMjcwNCAxMS45MjI1IDcuNTI5NjlMOC42NjYwMiAxMC43ODAzVjMuMzMzNjZDOC42NjYwMiAyLjk2NTQ3IDguMzY3NTQgMi42NjY5OSA3Ljk5OTM1IDIuNjY2OTlDNy42MzExNiAyLjY2Njk5IDcuMzMyNjggMi45NjU0NyA3LjMzMjY4IDMuMzMzNjZWMTAuNzgwM0w0LjA4NTggNy41Mjc2M0MzLjgyNDU3IDcuMjY1OTMgMy40MDA2IDcuMjY1NzQgMy4xMzkxNCA3LjUyNzJDMi44Nzc4NCA3Ljc4ODUgMi44Nzc4NCA4LjIxMjE1IDMuMTM5MTQgOC40NzM0NUw3LjI5MjI0IDEyLjYyNjZDNy42ODI3NyAxMy4wMTcxIDguMzE1OTMgMTMuMDE3MSA4LjcwNjQ2IDEyLjYyNjZMMTIuODYyNSA4LjQ3MDU0WiIgZmlsbD0iIzNENDA0MiIvPgo8L3N2Zz4K);
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+`;

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

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

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

@@ -3,11 +3,12 @@ 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 (
-    <div className='type-modules-list'>
+    <TypeModulesListStyled className='type-modules-list'>
       {typeModules.map((module) => (
         <div className='module-item' key={module.id}>
           <div className='module-image'>{module.image}</div>
@@ -39,7 +40,7 @@ const TypeModulesList: FC<TypeModulesListProps> = ({ typeModules }) => {
           </div>
         </div>
       ))}
-    </div>
+    </TypeModulesListStyled>
   )
 }
 

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 './UploadRatafiaZone.scss'
+import { UploadRatafiaZoneStyled } from './UploadRatafiaZone.styled';
 const UploadRatafiaZone = ({ content, handleDragOver, handleDragOut, handleDrop, documentUploadFileDialog, ctaDataQa }) => {
-    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 })] }) }));
+    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 })] }) }));
 };
 export default UploadRatafiaZone;

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZone.styled.d.ts

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

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

@@ -0,0 +1,64 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const UploadRatafiaZoneStyled = styled.div `
+  padding: 1rem;
+
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media ${device['landscape-tablets']} {
+    max-width: 340px;
+  }
+  @media ${device.laptop} {
+    max-width: 560px;
+  }
+
+  &:hover .upload-ratafia-zone__content__title {
+    color: var(--neutral-main);
+  }
+
+  .upload-ratafia-zone {
+    &__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;
+        }
+      }
+    }
+  }
+`;