@npm_leadtech/legal-lib-components 5.2.22 → 5.2.31

package/dist/src/components/atoms/DisclaimerRatafia/DisclaimerRatafia.styled.ts

@@ -0,0 +1,150 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DisclaimerRatafiaStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  .disclaimer-ratafia {
+    &__text-desktop {
+      display: none;
+      @media ${device['portrait-tablets']} {
+        display: block;
+      }
+    }
+
+    &__text-mobile {
+      width: 100%;
+      @media ${device['portrait-tablets']} {
+        display: none;
+      }
+    }
+
+    &__text {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      padding: 0.5rem;
+      gap: 0.25rem;
+
+      border-radius: 4px;
+      background: var(--neutral-neutral-6);
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+      }
+
+      &__icon {
+        width: 14px;
+        margin-right: 5px;
+      }
+      &__arrow {
+        position: absolute;
+        top: 10px;
+        right: 6px;
+        fill: var(--neutral-neutral-2);
+        svg {
+          display: block;
+          width: 16px;
+          height: 16px;
+        }
+      }
+      &__text {
+        display: flex;
+        width: 100%;
+        position: relative;
+        color: var(--neutral-neutral-2);
+        border: none;
+        padding: 8px;
+        border-radius: 4px;
+        @media ${device['portrait-tablets']} {
+          margin-bottom: 0;
+          padding: 0;
+        }
+      }
+    }
+    &__copyright,
+    &__legal-advice {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+
+      &__text {
+        color: var(--neutral-neutral-2);
+        a {
+          color: var(--neutral-neutral-2);
+        }
+      }
+    }
+
+    &__legal-advice {
+      margin-bottom: 16px;
+    }
+
+    &__disclaimer-fixed {
+      border-radius: 5px 5px 0 0;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 1rem 1.5rem 1.5rem 1.5rem;
+      background: var(--others-white);
+      border-top: 1px solid var(--neutral-neutral-5);
+      &:after {
+        content: '';
+        position: absolute;
+        top: 8px;
+        left: calc(50% - 17px);
+        border: 2px solid var(--neutral-neutral-3);
+        border-radius: 6px;
+        width: 34px;
+      }
+
+      &__title {
+        padding-top: 2rem;
+        font-size: 1.15rem;
+        font-weight: 700;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--neutral-neutral-4);
+        color: var(--neutral-neutral-1);
+      }
+      &__subTitle {
+        padding-top: 1.5rem;
+        font-size: 0.9rem;
+        color: var(--neutral-neutral-2);
+        padding-bottom: 1.5rem;
+      }
+      &__text {
+        padding-bottom: 1.5rem;
+        p {
+          font-size: 12px;
+          color: var(--neutral-neutral-2);
+        }
+        a {
+          color: var(--neutral-neutral-2);
+        }
+      }
+      &__cta {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    &__disclaimer-background {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--neutral-neutral-2);
+      opacity: 30%;
+    }
+  }
+`

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

@@ -4,7 +4,7 @@ import React from 'react'
 import { Button } from '../Button'
 import { ChevronRight } from '../../../../images/componentsSvg/ChevronRight'
 import { type DisclaimerRatafiaProps } from './DisclaimerRatafiaProps'
-// import './DisclaimerRatafia.scss'
+import { DisclaimerRatafiaStyled } from './DisclaimerRatafia.styled'
 
 export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
   icon,
@@ -29,7 +29,7 @@ export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
   const existLegalAdviceText = Boolean(legalAdviceText)
 
   return (
-    <div className='disclaimer-ratafia'>
+    <DisclaimerRatafiaStyled className='disclaimer-ratafia'>
       <div className='disclaimer-ratafia__text-desktop'>
         <div className='disclaimer-ratafia__text'>
           <div className='disclaimer-ratafia__text__icon'>{icon}</div>
@@ -82,7 +82,7 @@ export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
           </>
         )}
       </div>
-    </div>
+    </DisclaimerRatafiaStyled>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './Divider.scss'
+import { DividerStyled } from './Divider.styled';
 const Divider = ({ containerClass, lineClass, text, image }) => {
     if (text?.length === 0 || image?.length === 0)
         return null;
-    return (_jsxs("div", { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
+    return (_jsxs(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
 };
 export default Divider;

package/dist/src/components/atoms/Divider/Divider.styled.d.ts

@@ -0,0 +1 @@
+export declare const DividerStyled: 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/atoms/Divider/Divider.styled.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const DividerStyled = styled.div `
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  .divider {
+    &__line {
+      width: 45%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
+    &__word,
+    &__image {
+      width: fit-content;
+      text-align: center;
+      margin: 0 0.75rem;
+    }
+  }
+`;

package/dist/src/components/atoms/Divider/Divider.styled.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const DividerStyled = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  .divider {
+    &__line {
+      width: 45%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
+    &__word,
+    &__image {
+      width: fit-content;
+      text-align: center;
+      margin: 0 0.75rem;
+    }
+  }
+`

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

@@ -3,18 +3,18 @@
 import React, { type FC } from 'react'
 
 import { type DividerProps } from './DividerProps.types'
-// import './Divider.scss'
+import { DividerStyled } from './Divider.styled'
 
 const Divider: FC<DividerProps> = ({ containerClass, lineClass, text, image }) => {
   if (text?.length === 0 || image?.length === 0) return null
 
   return (
-    <div className={`divider ${containerClass ?? ''}`}>
+    <DividerStyled className={`divider ${containerClass ?? ''}`}>
       <div className={`divider__line ${lineClass ?? ''}`}></div>
       {text !== undefined && <p className='divider__word'>{text}</p>}
       {image !== undefined && <img className='divider__image' src={image} alt='' role='img'></img>}
       <div className={`divider__line ${lineClass ?? ''}`}></div>
-    </div>
+    </DividerStyled>
   )
 }
 

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
-// import './DocumentStatus.scss'
 const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
-        return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
+        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
     if (type === 'new') {
-        return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
+        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
     }
-    return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
+    return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
 };
 export default DocumentStatus;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.d.ts

@@ -0,0 +1 @@
+export declare const DocumentStatusStyled: 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/atoms/DocumentStatus/DocumentStatus.styled.js

@@ -0,0 +1,65 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DocumentStatusStyled = styled.div `
+  font-family: var(--font-sans);
+  border-radius: var(--global-border-radius);
+  border: 1px solid;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  align-self: center;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+  width: 7.36rem;
+  @include laptop {
+    align-self: flex-start;
+  }
+
+  @media ${device['landscape-tablets']} {
+    position: inherit;
+  }
+
+  &.document-status {
+    span {
+      font-weight: bold;
+    }
+
+    .icon {
+      margin-right: 0.25rem;
+    }
+
+    &.--is-completed {
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
+      }
+    }
+
+    &.--in-progress {
+      background-color: var(--neutral-neutral-5);
+      border-color: var(--neutral-neutral-3);
+      color: var(--neutral-neutral-1);
+
+      svg {
+        g > g {
+          fill: var(--neutral-neutral-1);
+        }
+      }
+    }
+
+    &.--is-new {
+      background-color: var(--primary-main-light-1);
+      border-color: var(--primary-main);
+      color: var(--secondary-main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts

@@ -0,0 +1,66 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DocumentStatusStyled = styled.div`
+  font-family: var(--font-sans);
+  border-radius: var(--global-border-radius);
+  border: 1px solid;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  align-self: center;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+  width: 7.36rem;
+  @include laptop {
+    align-self: flex-start;
+  }
+
+  @media ${device['landscape-tablets']} {
+    position: inherit;
+  }
+
+  &.document-status {
+    span {
+      font-weight: bold;
+    }
+
+    .icon {
+      margin-right: 0.25rem;
+    }
+
+    &.--is-completed {
+      background-color: var(--primary-main-light-5);
+      border-color: var(--primary-main-light-3);
+      color: var(--primary-main);
+
+      svg {
+        path {
+          fill: var(--primary-main);
+        }
+      }
+    }
+
+    &.--in-progress {
+      background-color: var(--neutral-neutral-5);
+      border-color: var(--neutral-neutral-3);
+      color: var(--neutral-neutral-1);
+
+      svg {
+        g > g {
+          fill: var(--neutral-neutral-1);
+        }
+      }
+    }
+
+    &.--is-new {
+      background-color: var(--primary-main-light-1);
+      border-color: var(--primary-main);
+      color: var(--secondary-main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
+      }
+    }
+  }
+`

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

@@ -1,10 +1,10 @@
 import React, { type FC } from 'react'
 
 import { type DocumentStatusProps } from './DocumentStatusProps.types'
+import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
-// import './DocumentStatus.scss'
 
 const DocumentStatus: FC<DocumentStatusProps> = ({
   type,
@@ -14,23 +14,23 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
-      <div data-testid='document-status' className={'document-status --is-completed'}>
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-completed'}>
         <Done24px className='icon' /> <span className={'sans-serif --small'}>{statusCompletedText}</span>
-      </div>
+      </DocumentStatusStyled>
     )
   }
   if (type === 'new') {
     return (
-      <div data-testid='document-status' className={'document-status --is-new'}>
+      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-new'}>
         <NewRelease24p className='icon' /> <span className={'sans-serif --small'}>{statusNewText}</span>
-      </div>
+      </DocumentStatusStyled>
     )
   }
   return (
-    <div data-testid='document-status' className={'document-status --in-progress'}>
+    <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
       <Time24px className='icon' />
       <span className={'sans-serif --small'}>{statusInProgressText}</span>
-    </div>
+    </DocumentStatusStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './DocumentTag.scss'
+import { DocumentTagStyled } from './DocumentTag.styled';
 export const DocumentTag = ({ text = '' }) => {
     if (text === '')
         return null;
-    return _jsx("p", { className: 'document-tag', children: text });
+    return _jsx(DocumentTagStyled, { className: 'document-tag', children: text });
 };

package/dist/src/components/atoms/DocumentTag/DocumentTag.styled.d.ts

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

package/dist/src/components/atoms/DocumentTag/DocumentTag.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+export const DocumentTagStyled = styled.p `
+  background: var(--others-white);
+  border: 1px solid var(--neutral-neutral-4);
+  border-radius: var(--global-border-radius);
+  color: var(--neutral-neutral-2);
+  font-size: 0.875rem;
+  letter-spacing: -0.3px;
+  line-height: 1.15rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+`;

package/dist/src/components/atoms/DocumentTag/DocumentTag.styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const DocumentTagStyled = styled.p`
+  background: var(--others-white);
+  border: 1px solid var(--neutral-neutral-4);
+  border-radius: var(--global-border-radius);
+  color: var(--neutral-neutral-2);
+  font-size: 0.875rem;
+  letter-spacing: -0.3px;
+  line-height: 1.15rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+`

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

@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { type DocumentTagProps } from './DocumentTagProps'
-// import './DocumentTag.scss'
+import { DocumentTagStyled } from './DocumentTag.styled'
 
 export const DocumentTag: React.FC<DocumentTagProps> = ({ text = '' }) => {
   if (text === '') return null
-  return <p className='document-tag'>{text}</p>
+  return <DocumentTagStyled className='document-tag'>{text}</DocumentTagStyled>
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './ExpertCard.scss'
+import { ExpertCardStyled } from './ExpertCard.styled';
 const ExpertCard = ({ title, url, description, image }) => {
-    return (_jsx("div", { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
+    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
 };
 export default ExpertCard;

package/dist/src/components/atoms/ExpertCard/ExpertCard.styled.d.ts

@@ -0,0 +1 @@
+export declare const ExpertCardStyled: 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/atoms/ExpertCard/ExpertCard.styled.js

@@ -0,0 +1,66 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ExpertCardStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-top: 5rem;
+  }
+
+  .expert-card {
+    &__box {
+      background-color: white;
+      border-radius: 0.3rem;
+      box-shadow: var(--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;
+
+      @media ${device['landscape-tablets']} {
+        margin-left: 2rem;
+      }
+    }
+
+    &__image {
+      position: absolute;
+      transform: translateY(-115%);
+
+      img {
+        border-radius: 100%;
+      }
+    }
+
+    &__title {
+      font-family: var(--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: var(--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.styled.ts

@@ -0,0 +1,67 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ExpertCardStyled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-top: 5rem;
+  }
+
+  .expert-card {
+    &__box {
+      background-color: white;
+      border-radius: 0.3rem;
+      box-shadow: var(--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;
+
+      @media ${device['landscape-tablets']} {
+        margin-left: 2rem;
+      }
+    }
+
+    &__image {
+      position: absolute;
+      transform: translateY(-115%);
+
+      img {
+        border-radius: 100%;
+      }
+    }
+
+    &__title {
+      font-family: var(--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: var(--font-sans);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 22px;
+      letter-spacing: -0.3px;
+      text-align: center;
+      width: 75%;
+    }
+  }
+`