@npm_leadtech/legal-lib-components 5.22.12 → 5.24.0

package/README.md

@@ -35,3 +35,19 @@ Para ejecutar: `yarn chromatic`
 - Tenemos que importar el componente en package.json para luego poderlo importar en el otro proyecto ejemplode AddButton --> "./AddButton": "./dist/src/components/atoms/AddButton/index.js",
 - Los archivos de scss están importados en globalStyles/styles.scss para tener una importación de todo hasta que lo pasemos a styled-components, no se debe importar en css en los archivos de js
 - Para la importación en www o app utilizaremos la ruta completa import { FaqsPage } from '@npm_leadtech/legal-lib-components/FaqsPage'
+
+## Sonar localmente
+
+Para ejecutar sonar localmente será necesiario:
+
+- Tener instalado y configurado el servidor de sonar del repo de devops
+  - desde devops ejecutar el comando `make sonar-build`
+- Crear carpeta y fichero `scripts/sonar.sh`
+- Agregar este contenido al fichero:
+
+```
+#!/bin/bash
+npx sonarqube-scanner -Dsonar.host.url=http://sonar.legal-contracts.com:9000 -Dsonar.token=TOKEN GENERADO EN SONAR
+```
+
+- Ejecutar en consola `yarn sonar`

package/dist/images/componentsSvg/PhoneIcon24px.tsx

@@ -5,14 +5,12 @@ interface PhoneIcon24pxProps {
   className?: string
   width?: string
   height?: string
-  fill?: string
 }
 
 export const PhoneIcon24px: FC<PhoneIcon24pxProps> = ({
   className = '',
   width = '24',
-  height = '24',
-  fill = '#000'
+  height = '24'
 }): React.ReactElement => (
   <svg
     className={className}
@@ -37,7 +35,7 @@ export const PhoneIcon24px: FC<PhoneIcon24pxProps> = ({
               <mask id='7tvbvoimzb' fill='#fff'>
                 <use xlinkHref='#phone-icon-24p' />
               </mask>
-              <g className='icon-web-24-p' fill={fill} mask='url(#7tvbvoimzb)'>
+              <g className='icon-web-24-p' fill='#000' mask='url(#7tvbvoimzb)'>
                 <path d='M0 0H24V24H0z' />
               </g>
             </g>

package/dist/src/components/atoms/index.d.ts

@@ -19,7 +19,6 @@ export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
 export * from './FeatureRatafiaCard';
-export * from './FixedFooter';
 export * from './FormFaq';
 export * from './GoogleButton';
 export * from './IconImage';
@@ -37,7 +36,6 @@ export * from './MoreDocsItem';
 export * from './NavMenuItem';
 export * from './PaypalButton';
 export * from './PopularDocsItem';
-export * from './PreFooter';
 export * from './ProgressBar';
 export * from './Radio';
 export * from './RemoveButton';

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

@@ -19,7 +19,6 @@ export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
 export * from './FeatureRatafiaCard';
-export * from './FixedFooter';
 export * from './FormFaq';
 export * from './GoogleButton';
 export * from './IconImage';
@@ -37,7 +36,6 @@ export * from './MoreDocsItem';
 export * from './NavMenuItem';
 export * from './PaypalButton';
 export * from './PopularDocsItem';
-export * from './PreFooter';
 export * from './ProgressBar';
 export * from './Radio';
 export * from './RemoveButton';

package/dist/src/components/atoms/index.ts

@@ -19,7 +19,6 @@ export * from './DocumentStatus'
 export * from './DocumentTag'
 export * from './ExpertCard'
 export * from './FeatureRatafiaCard'
-export * from './FixedFooter'
 export * from './FormFaq'
 export * from './GoogleButton'
 export * from './IconImage'
@@ -37,7 +36,6 @@ export * from './MoreDocsItem'
 export * from './NavMenuItem'
 export * from './PaypalButton'
 export * from './PopularDocsItem'
-export * from './PreFooter'
 export * from './ProgressBar'
 export * from './Radio'
 export * from './RemoveButton'

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionButtonHeaderRatafiaCardList } from '../ActionButtonHeaderRatafiaCardList';
 import { HeaderRatafiaStyled } from './HeaderRatafia.styled';
-export const HeaderRatafia = ({ icon, title, actionButtons, isHiddenActionButtons = false }) => {
-    return (_jsxs(HeaderRatafiaStyled, { className: 'header-ratafia', children: [_jsxs("div", { className: 'header-ratafia__title', children: [_jsx("div", { className: 'header-ratafia__title__icon', children: icon }), _jsx("h1", { className: 'sans-serif --bold-weight header-ratafia__title__text', children: title })] }), actionButtons !== undefined && !isHiddenActionButtons && (_jsx(ActionButtonHeaderRatafiaCardList, { actionButtons: actionButtons }))] }));
+export const HeaderRatafia = ({ icon, title, actionButtons, isHiddenActionButtons = false, headerTitleRef }) => {
+    return (_jsxs(HeaderRatafiaStyled, { className: 'header-ratafia', children: [_jsxs("div", { className: 'header-ratafia__title', children: [_jsx("div", { className: 'header-ratafia__title__icon', children: icon }), _jsx("h1", { ref: headerTitleRef, className: 'sans-serif --bold-weight header-ratafia__title__text', children: title })] }), actionButtons !== undefined && !isHiddenActionButtons && (_jsx(ActionButtonHeaderRatafiaCardList, { actionButtons: actionButtons }))] }));
 };
 export default HeaderRatafia;

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

@@ -8,13 +8,16 @@ export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
   icon,
   title,
   actionButtons,
-  isHiddenActionButtons = false
+  isHiddenActionButtons = false,
+  headerTitleRef
 }) => {
   return (
     <HeaderRatafiaStyled className='header-ratafia'>
       <div className='header-ratafia__title'>
         <div className='header-ratafia__title__icon'>{icon}</div>
-        <h1 className='sans-serif --bold-weight header-ratafia__title__text'>{title}</h1>
+        <h1 ref={headerTitleRef} className='sans-serif --bold-weight header-ratafia__title__text'>
+          {title}
+        </h1>
       </div>
       {actionButtons !== undefined && !isHiddenActionButtons && (
         <ActionButtonHeaderRatafiaCardList actionButtons={actionButtons} />

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafiaProps.types.d.ts

@@ -1,7 +1,9 @@
 import type { ActionButtonHeaderRatafiaCardProps } from '../../atoms';
+import React from 'react';
 export interface HeaderRatafiaProps {
     icon?: React.ReactNode;
     title: string;
     actionButtons?: ActionButtonHeaderRatafiaCardProps[];
+    headerTitleRef?: React.RefObject<HTMLHeadingElement>;
     isHiddenActionButtons: boolean;
 }

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafiaProps.types.ts

@@ -1,8 +1,10 @@
 import type { ActionButtonHeaderRatafiaCardProps } from '../../atoms'
+import React from 'react'
 
 export interface HeaderRatafiaProps {
   icon?: React.ReactNode
   title: string
   actionButtons?: ActionButtonHeaderRatafiaCardProps[]
+  headerTitleRef?: React.RefObject<HTMLHeadingElement>
   isHiddenActionButtons: boolean
 }

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

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
 import { MidBannerRatafiaContentStyled } from './MidBannerRatafiaContent.styled';
 const MidBannerRatafiaContent = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa }) => {
-    return (_jsxs(MidBannerRatafiaContentStyled, { className: 'mid-banner-ratafia-content', children: [_jsxs("div", { className: 'mid-banner-ratafia-content__header', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title', children: title }), _jsx("div", { className: 'sans-serif --super-medium mid-banner-ratafia-content__header__description', children: paragraph })] }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, color: 'primary', label: ctaLabel })] }));
+    return (_jsxs(MidBannerRatafiaContentStyled, { className: 'mid-banner-ratafia-content', children: [_jsxs("div", { className: 'mid-banner-ratafia-content__header', children: [_jsx("h3", { className: 'sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title', children: title }), _jsx("div", { className: 'sans-serif --super-medium mid-banner-ratafia-content__header__description', children: paragraph })] }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, color: 'primary', label: ctaLabel })] }));
 };
 export default MidBannerRatafiaContent;

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

@@ -14,7 +14,7 @@ const MidBannerRatafiaContent: FC<MidBannerRatafiaContentProps> = ({
   return (
     <MidBannerRatafiaContentStyled className='mid-banner-ratafia-content'>
       <div className='mid-banner-ratafia-content__header'>
-        <h2 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h2>
+        <h3 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h3>
         <div className='sans-serif --super-medium mid-banner-ratafia-content__header__description'>{paragraph}</div>
       </div>
       <Button

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

@@ -8,7 +8,7 @@ export const UploadRatafiaZoneStyled = styled.div `
   box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
-    max-width: 340px;
+    max-width: 350px;
   }
   @media ${device.laptop} {
     max-width: 560px;
@@ -36,6 +36,7 @@ export const UploadRatafiaZoneStyled = styled.div `
 
       &__title {
         margin-bottom: 2.5rem;
+        transition: color 0.5s;
       }
       &__cta {
         display: flex;

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

@@ -9,7 +9,7 @@ export const UploadRatafiaZoneStyled = styled.div`
   box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
-    max-width: 340px;
+    max-width: 350px;
   }
   @media ${device.laptop} {
     max-width: 560px;
@@ -37,6 +37,7 @@ export const UploadRatafiaZoneStyled = styled.div`
 
       &__title {
         margin-bottom: 2.5rem;
+        transition: color 0.5s;
       }
       &__cta {
         display: flex;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.js

@@ -7,21 +7,24 @@ export const FeaturesRatafiaContentStyled = styled.div `
   flex: 1 0 0;
   gap: 1.5rem;
 
-  .features-ratafia-content__wrapper__title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    align-self: stretch;
-    gap: 1rem;
-
-    &__text {
-      align-self: stretch;
-      color: var(--neutral-neutral-1);
-    }
-    &__description {
+  .features-ratafia-content__wrapper {
+    &__title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       align-self: stretch;
-      color: var(--neutral-neutral-1);
+      gap: 1rem;
+      margin-bottom: 1rem;
+
+      &__text {
+        align-self: stretch;
+        color: var(--neutral-neutral-1);
+      }
+      &__description {
+        align-self: stretch;
+        color: var(--neutral-neutral-1);
+      }
     }
   }
 `;

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.styled.ts

@@ -8,21 +8,24 @@ export const FeaturesRatafiaContentStyled = styled.div`
   flex: 1 0 0;
   gap: 1.5rem;
 
-  .features-ratafia-content__wrapper__title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    align-self: stretch;
-    gap: 1rem;
-
-    &__text {
-      align-self: stretch;
-      color: var(--neutral-neutral-1);
-    }
-    &__description {
+  .features-ratafia-content__wrapper {
+    &__title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       align-self: stretch;
-      color: var(--neutral-neutral-1);
+      gap: 1rem;
+      margin-bottom: 1rem;
+
+      &__text {
+        align-self: stretch;
+        color: var(--neutral-neutral-1);
+      }
+      &__description {
+        align-self: stretch;
+        color: var(--neutral-neutral-1);
+      }
     }
   }
 `

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

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

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

@@ -8,7 +8,9 @@ import { ReviewKeyFactsResultRatafia } from '../../atoms'
 export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
   return (
     <KeyFactsResultContentRatafiaStyled>
-      <h2 className='sans-serif --bold-weight key-facts-result-content__document-name'>{result?.documentName}</h2>
+      <h2 ref={result?.documentNameRef} className='sans-serif --bold-weight key-facts-result-content__document-name'>
+        {result?.documentName}
+      </h2>
       <div className='key-facts-result-content__content'>
         {result !== null && <KeyFactCardListRatafia keyFacts={result.keyFacts} />}
         <ReviewKeyFactsResultRatafia {...review} />

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafiaProps.types.d.ts

@@ -1,4 +1,5 @@
 import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms';
+import React from 'react';
 export interface KeyFactsResultContentRatafiaProps {
     result: KeyFactsResultProps | null;
     review: ReviewKeyFactsResultRatafiaProps;
@@ -6,4 +7,5 @@ export interface KeyFactsResultContentRatafiaProps {
 export interface KeyFactsResultProps {
     documentName: string;
     keyFacts: KeyFactRatafiaCardProps[];
+    documentNameRef?: React.RefObject<HTMLHeadingElement>;
 }

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafiaProps.types.ts

@@ -1,4 +1,5 @@
 import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms'
+import React from 'react'
 
 export interface KeyFactsResultContentRatafiaProps {
   result: KeyFactsResultProps | null
@@ -8,4 +9,5 @@ export interface KeyFactsResultContentRatafiaProps {
 export interface KeyFactsResultProps {
   documentName: string
   keyFacts: KeyFactRatafiaCardProps[]
+  documentNameRef?: React.RefObject<HTMLHeadingElement>
 }

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { LimitReachedContentRatafiaProps } from '../LimitReachedContentRatafia';
+export declare const LimitReachedContentRatafia: FC<LimitReachedContentRatafiaProps>;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LimitReachedContentRatafiaStyled } from './LimitReachedContentRatafia.styled';
+export const LimitReachedContentRatafia = ({ title, message, icon }) => {
+    return (_jsxs(LimitReachedContentRatafiaStyled, { className: 'limit-reached-content-ratafia', children: [_jsx("h2", { className: 'limit-reached-content-ratafia__title sans-serif --bold-weight', children: title }), _jsxs("div", { className: 'limit-reached-content-ratafia__message', children: [_jsx("div", { className: 'limit-reached-content-ratafia__message__icon', children: icon }), _jsx("div", { className: 'limit-reached-content-ratafia__message__text sans-serif --small', children: message })] })] }));
+};

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.d.ts

@@ -0,0 +1 @@
+export declare const LimitReachedContentRatafiaStyled: 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/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.js

@@ -0,0 +1,41 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LimitReachedContentRatafiaStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: stretch;
+  @media ${device['portrait-tablets']} {
+    gap: 2rem;
+  }
+  .limit-reached-content-ratafia {
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-size: 1rem;
+      @media ${device['portrait-tablets']} {
+        font-size: 1.125rem;
+      }
+    }
+    &__message {
+      display: flex;
+      padding: 0.5rem;
+      align-items: flex-start;
+      gap: 0.5rem;
+      @media ${device['portrait-tablets']} {
+        align-items: center;
+      }
+
+      border-radius: 0.25rem;
+      background: var(--neutral-neutral-6);
+      &__icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        flex-shrink: 0;
+      }
+      &__text {
+        color: var(--neutral-neutral-2);
+      }
+    }
+  }
+`;

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafia.styled.ts

@@ -0,0 +1,42 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LimitReachedContentRatafiaStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: stretch;
+  @media ${device['portrait-tablets']} {
+    gap: 2rem;
+  }
+  .limit-reached-content-ratafia {
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-size: 1rem;
+      @media ${device['portrait-tablets']} {
+        font-size: 1.125rem;
+      }
+    }
+    &__message {
+      display: flex;
+      padding: 0.5rem;
+      align-items: flex-start;
+      gap: 0.5rem;
+      @media ${device['portrait-tablets']} {
+        align-items: center;
+      }
+
+      border-radius: 0.25rem;
+      background: var(--neutral-neutral-6);
+      &__icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        flex-shrink: 0;
+      }
+      &__text {
+        color: var(--neutral-neutral-2);
+      }
+    }
+  }
+`

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

@@ -0,0 +1,16 @@
+import React, { type FC } from 'react'
+
+import { LimitReachedContentRatafiaProps } from '../LimitReachedContentRatafia'
+import { LimitReachedContentRatafiaStyled } from './LimitReachedContentRatafia.styled'
+
+export const LimitReachedContentRatafia: FC<LimitReachedContentRatafiaProps> = ({ title, message, icon }) => {
+  return (
+    <LimitReachedContentRatafiaStyled className='limit-reached-content-ratafia'>
+      <h2 className='limit-reached-content-ratafia__title sans-serif --bold-weight'>{title}</h2>
+      <div className='limit-reached-content-ratafia__message'>
+        <div className='limit-reached-content-ratafia__message__icon'>{icon}</div>
+        <div className='limit-reached-content-ratafia__message__text sans-serif --small'>{message}</div>
+      </div>
+    </LimitReachedContentRatafiaStyled>
+  )
+}

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafiaProps.types.d.ts

@@ -0,0 +1,5 @@
+export interface LimitReachedContentRatafiaProps {
+    title: string;
+    message?: React.ReactNode;
+    icon?: React.ReactNode;
+}

package/dist/src/components/organisms/LimitReachedContentRatafia/LimitReachedContentRatafiaProps.types.ts

@@ -0,0 +1,5 @@
+export interface LimitReachedContentRatafiaProps {
+  title: string
+  message?: React.ReactNode
+  icon?: React.ReactNode
+}

package/dist/src/components/organisms/LimitReachedContentRatafia/index.d.ts

@@ -0,0 +1,2 @@
+export { LimitReachedContentRatafia } from './LimitReachedContentRatafia';
+export { type LimitReachedContentRatafiaProps } from './LimitReachedContentRatafiaProps.types';

package/dist/src/components/organisms/LimitReachedContentRatafia/index.js

@@ -0,0 +1 @@
+export { LimitReachedContentRatafia } from './LimitReachedContentRatafia';

package/dist/src/components/organisms/LimitReachedContentRatafia/index.ts

@@ -0,0 +1,2 @@
+export { LimitReachedContentRatafia } from './LimitReachedContentRatafia'
+export { type LimitReachedContentRatafiaProps } from './LimitReachedContentRatafiaProps.types'

package/dist/src/components/organisms/index.d.ts

@@ -16,6 +16,7 @@ export * from './KeyFactsResultContentRatafia';
 export * from './LanguageSelector';
 export * from './LanguageSelectorMobile';
 export * from './LayoutRatafia';
+export * from './LimitReachedContentRatafia';
 export * from './ListStepsGetForm';
 export * from './LoginRatafiaContent';
 export * from './MobileBottomBar';

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

@@ -16,6 +16,7 @@ export * from './KeyFactsResultContentRatafia';
 export * from './LanguageSelector';
 export * from './LanguageSelectorMobile';
 export * from './LayoutRatafia';
+export * from './LimitReachedContentRatafia';
 export * from './ListStepsGetForm';
 export * from './LoginRatafiaContent';
 export * from './MobileBottomBar';

package/dist/src/components/organisms/index.ts

@@ -16,6 +16,7 @@ export * from './KeyFactsResultContentRatafia'
 export * from './LanguageSelector'
 export * from './LanguageSelectorMobile'
 export * from './LayoutRatafia'
+export * from './LimitReachedContentRatafia'
 export * from './ListStepsGetForm'
 export * from './LoginRatafiaContent'
 export * from './MobileBottomBar'

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LimitReachedRatafiaPageProps } from './LimitReachedRatafiaPageProps.types';
+export declare const LimitReachedRatafiaPage: React.FC<LimitReachedRatafiaPageProps>;

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
+import { LayoutRatafia } from '../../organisms/LayoutRatafia';
+import { LimitReachedContentRatafia } from '../../organisms';
+import { LimitReachedRatafiaPageStyled } from './LimitReachedRatafiaPage.styled';
+export const LimitReachedRatafiaPage = ({ header, limitReachedContent, disclaimer, goToDashboardCta }) => {
+    const ctaButton = (_jsx(Button, { givenClass: 'limit-reached-ratafia-page__cta', dataQa: goToDashboardCta.dataQa, color: 'primary', label: goToDashboardCta.label, link: goToDashboardCta.link }));
+    const content = _jsx(LimitReachedContentRatafia, { ...limitReachedContent });
+    const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
+    const footerMobile = (_jsxs(_Fragment, { children: [footerDesktop, ctaButton] }));
+    return (_jsx(LimitReachedRatafiaPageStyled, { className: 'limit-reached-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, cta: ctaButton, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+};

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.styled.d.ts

@@ -0,0 +1 @@
+export declare const LimitReachedRatafiaPageStyled: 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/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.styled.js

@@ -0,0 +1,22 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LimitReachedRatafiaPageStyled = styled.div `
+  background-color: var(--neutral-neutral-6);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
+  .limit-reached-ratafia-page {
+    &__cta {
+      align-self: start;
+      display: block;
+      width: 100%;
+      margin-top: 0.5rem;
+      @media ${device['portrait-tablets']} {
+        display: inline-block;
+      }
+    }
+  }
+`;

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.styled.ts

@@ -0,0 +1,23 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LimitReachedRatafiaPageStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
+  .limit-reached-ratafia-page {
+    &__cta {
+      align-self: start;
+      display: block;
+      width: 100%;
+      margin-top: 0.5rem;
+      @media ${device['portrait-tablets']} {
+        display: inline-block;
+      }
+    }
+  }
+`

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPage.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { Button } from '../../atoms'
+import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
+import { LayoutRatafia } from '../../organisms/LayoutRatafia'
+import { LimitReachedContentRatafia } from '../../organisms'
+import { LimitReachedRatafiaPageProps } from './LimitReachedRatafiaPageProps.types'
+import { LimitReachedRatafiaPageStyled } from './LimitReachedRatafiaPage.styled'
+
+export const LimitReachedRatafiaPage: React.FC<LimitReachedRatafiaPageProps> = ({
+  header,
+  limitReachedContent,
+  disclaimer,
+  goToDashboardCta
+}) => {
+  const ctaButton = (
+    <Button
+      givenClass='limit-reached-ratafia-page__cta'
+      dataQa={goToDashboardCta.dataQa}
+      color='primary'
+      label={goToDashboardCta.label}
+      link={goToDashboardCta.link}
+    />
+  )
+
+  const content = <LimitReachedContentRatafia {...limitReachedContent} />
+
+  const footerDesktop = (
+    <DisclaimerRatafia
+      icon={disclaimer.icon}
+      text={disclaimer.text}
+      copyrightText={disclaimer.copyrightText}
+      ctaTextShowDisclaimer={disclaimer.ctaTextShowDisclaimer}
+      ctaTextCloseDisclaimer={disclaimer.ctaTextCloseDisclaimer}
+    />
+  )
+
+  const footerMobile = (
+    <>
+      {footerDesktop}
+      {ctaButton}
+    </>
+  )
+
+  return (
+    <LimitReachedRatafiaPageStyled className='limit-reached-ratafia-page'>
+      <LayoutRatafia
+        header={header}
+        content={content}
+        cta={ctaButton}
+        footerDesktop={footerDesktop}
+        footerMobile={footerMobile}
+      />
+    </LimitReachedRatafiaPageStyled>
+  )
+}