@npm_leadtech/legal-lib-components 5.23.0 → 5.25.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/src/components/molecules/FreeDocModalContent/FreeDocModalContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
 import { FreeDocModalContentStyled } from './FreeDocModalContent.styled';
-const FreeDocModalContent = ({ bodyTitle, bodyText, closeModal, clickGoToFormInApp, isActiveDocument }) => {
+const FreeDocModalContent = ({ buttonLabel, bodyTitle, bodyText, closeModal, clickGoToFormInApp, isActiveDocument }) => {
     const onGoToApp = () => {
         if (clickGoToFormInApp !== undefined)
             clickGoToFormInApp(null, '', true);
@@ -12,7 +12,7 @@ const FreeDocModalContent = ({ bodyTitle, bodyText, closeModal, clickGoToFormInA
     const buttonProps = {
         color: 'primary',
         size: 'S',
-        label: 'Make Document',
+        label: buttonLabel,
         dataQa: 'free-modal-doc-button',
         ...(isActiveDocument ? { noLink: true } : { link: '#' }),
         onClick: isActiveDocument ? onGoToApp : onNavigateToTop

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

@@ -7,6 +7,7 @@ import { type FreeDocModalContentProps } from './FreeDocModalContent.types'
 import { FreeDocModalContentStyled } from './FreeDocModalContent.styled'
 
 const FreeDocModalContent: FC<FreeDocModalContentProps> = ({
+  buttonLabel,
   bodyTitle,
   bodyText,
   closeModal,
@@ -24,7 +25,7 @@ const FreeDocModalContent: FC<FreeDocModalContentProps> = ({
   const buttonProps: ButtonProps = {
     color: 'primary',
     size: 'S',
-    label: 'Make Document',
+    label: buttonLabel,
     dataQa: 'free-modal-doc-button',
     ...(isActiveDocument ? { noLink: true } : { link: '#' }),
     onClick: isActiveDocument ? onGoToApp : onNavigateToTop

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.types.d.ts

@@ -1,4 +1,5 @@
 export interface FreeDocModalContentProps {
+    buttonLabel: string;
     bodyTitle: string;
     bodyText: string;
     closeModal: () => void;

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.types.ts

@@ -1,4 +1,5 @@
 export interface FreeDocModalContentProps {
+  buttonLabel: string
   bodyTitle: string
   bodyText: string
   closeModal: () => void

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Button, Message } from '../../atoms';
 import { PricingCardStyled } from './PricingCard.styled';
-const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false, planName, price, currency, underPricingText, featuresList = [], children, disclaimer, message, cardButton }) => {
+const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false, planName, price, currency, underPricingText, featuresList = [], children, disclaimer, message, cardButton, seeLessLabel, seeMoreLabel }) => {
     const [cardState, setCardState] = useState({ expanded: false });
     if (planName === undefined ||
         (onChangeRadio != null && subscriptionId === undefined) ||
@@ -22,7 +22,7 @@ const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false,
             return { ...prevState };
         });
     };
-    const renderMoreMobileButton = (_jsx(Button, { dataQa: '', givenClass: 'see-more-button', color: 'tertiary', label: cardState.expanded ? 'See less' : 'See more', noLink: true, onClick: toggleCardContent }));
+    const renderMoreMobileButton = (_jsx(Button, { dataQa: '', givenClass: 'see-more-button', color: 'tertiary', label: cardState.expanded ? (seeLessLabel ?? 'See less') : (seeMoreLabel ?? 'See more'), noLink: true, onClick: toggleCardContent }));
     const renderHeaderContent = (_jsx("div", { className: 'pricing-card__header', children: _jsx("h5", { className: 'sans-serif --big pricing-card__header__text', children: _jsx("strong", { children: planName }) }) }));
     const renderBodyContent = (_jsxs("div", { className: 'pricing-card__body', children: [Boolean(price) && (_jsxs("div", { className: 'sans-serif pricing-card__body__price', children: [_jsx("strong", { children: price }), _jsx("span", { children: currency }), Boolean(underPricingText) && _jsx("div", { className: 'pricing-card__body__text', children: underPricingText })] })), Boolean(featuresList.length) && (_jsxs("div", { className: `pricing-card__body__features-list ${expandedContentClass}`, children: [_jsx("hr", {}), _jsx("ul", { children: featuresList.map((feature) => (_jsx("li", { className: 'pricing-card__body__features-list__item', children: feature }, 'feature-item-' + feature))) })] })), children, featuresList != null && renderMoreMobileButton, cardButton, message != null && _jsx(Message, { ...message })] }));
     return (_jsxs(PricingCardStyled, { style: style, className: `pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`, children: [_jsx("div", { className: 'pricing-card__wrapper', children: isSelectableCard ? (_jsxs("label", { className: 'pricing-card__radio-label', "data-qa": planName, children: [_jsx("input", { className: 'radio-input', type: 'radio', value: subscriptionId, onChange: onChangeRadio, name: 'pricing', checked: isChecked }), _jsx("span", { className: 'radio-checkbox' }), renderHeaderContent, renderBodyContent] })) : (_jsxs(_Fragment, { children: [renderHeaderContent, renderBodyContent] })) }), Boolean(disclaimer) && (_jsx("div", { className: 'pricing-card__disclaimer', children: _jsx("small", { children: disclaimer }) }))] }));

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

@@ -17,7 +17,9 @@ const PricingCard: FC<PricingCardProps> = ({
   children,
   disclaimer,
   message,
-  cardButton
+  cardButton,
+  seeLessLabel,
+  seeMoreLabel
 }) => {
   const [cardState, setCardState] = useState({ expanded: false })
   if (
@@ -48,7 +50,7 @@ const PricingCard: FC<PricingCardProps> = ({
       dataQa=''
       givenClass='see-more-button'
       color='tertiary'
-      label={cardState.expanded ? 'See less' : 'See more'}
+      label={cardState.expanded ? (seeLessLabel ?? 'See less') : (seeMoreLabel ?? 'See more')}
       noLink
       onClick={toggleCardContent}
     />

package/dist/src/components/molecules/PricingCard/PricingCardProps.types.d.ts

@@ -13,4 +13,6 @@ export interface PricingCardProps {
     disclaimer?: string;
     message?: MessageProps;
     cardButton?: any;
+    seeLessLabel?: string;
+    seeMoreLabel?: string;
 }

package/dist/src/components/molecules/PricingCard/PricingCardProps.types.ts

@@ -15,4 +15,6 @@ export interface PricingCardProps {
   disclaimer?: string
   message?: MessageProps
   cardButton?: any
+  seeLessLabel?: string
+  seeMoreLabel?: string
 }

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

@@ -9,6 +9,12 @@ export const RatafiaSubscriptionCardStyled = styled.div `
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
+  hr {
+    border: none;
+    border-top: 1px solid var(--neutral-neutral-4);
+    width: 100%;
+  }
+
   &.primary {
     background-color: var(--neutral-neutral-6);
 
@@ -35,6 +41,10 @@ export const RatafiaSubscriptionCardStyled = styled.div `
         background-color: var(--secondary-main-light-3);
       }
     }
+
+    .ratafia-card__button {
+      color: var(--others-black);
+    }
   }
 
   .ratafia-card {
@@ -44,20 +54,24 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       align-items: center;
       justify-content: space-between;
       gap: 0.5rem 1rem;
+
+      @media ${device.mobile} {
+        flex-direction: column;
+        align-items: start;
+      }
     }
 
     &__title {
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
-      gap: 0.8rem;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
       font-weight: bold;
     }
 
-    hr {
-      border: none;
-      border-top: 1px solid var(--neutral-neutral-4);
-      width: 100%;
+    &__price-text {
+      font-size: 0.875rem;
     }
 
     &__body {
@@ -72,6 +86,7 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       justify-content: flex-start;
       gap: 0.5rem;
       color: var(--neutral-neutral-1);
+      font-size: 0.875rem;
       text-align: left;
       padding: 0.25rem 0;
 

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

@@ -10,6 +10,12 @@ export const RatafiaSubscriptionCardStyled = styled.div`
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
+  hr {
+    border: none;
+    border-top: 1px solid var(--neutral-neutral-4);
+    width: 100%;
+  }
+
   &.primary {
     background-color: var(--neutral-neutral-6);
 
@@ -36,6 +42,10 @@ export const RatafiaSubscriptionCardStyled = styled.div`
         background-color: var(--secondary-main-light-3);
       }
     }
+
+    .ratafia-card__button {
+      color: var(--others-black);
+    }
   }
 
   .ratafia-card {
@@ -45,20 +55,24 @@ export const RatafiaSubscriptionCardStyled = styled.div`
       align-items: center;
       justify-content: space-between;
       gap: 0.5rem 1rem;
+
+      @media ${device.mobile} {
+        flex-direction: column;
+        align-items: start;
+      }
     }
 
     &__title {
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
-      gap: 0.8rem;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
       font-weight: bold;
     }
 
-    hr {
-      border: none;
-      border-top: 1px solid var(--neutral-neutral-4);
-      width: 100%;
+    &__price-text {
+      font-size: 0.875rem;
     }
 
     &__body {
@@ -73,6 +87,7 @@ export const RatafiaSubscriptionCardStyled = styled.div`
       justify-content: flex-start;
       gap: 0.5rem;
       color: var(--neutral-neutral-1);
+      font-size: 0.875rem;
       text-align: left;
       padding: 0.25rem 0;
 

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

@@ -15,12 +15,9 @@ export const LayoutRatafiaStyled = styled.div `
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-
     padding: 1.5rem 1.5rem 0 1.5rem;
-
     width: 100%;
-    height: calc(100vh - 5.125rem);
-
+    height: calc(100vh - 8.375rem);
     border-radius: 16px 16px 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
@@ -28,9 +25,9 @@ export const LayoutRatafiaStyled = styled.div `
     @media ${device['portrait-tablets']} {
       padding: 2.5rem 2.5rem 1.5rem 2.5rem;
     }
+
     @media ${device['portrait-tablets']} {
       width: 800px;
-      height: 890px;
     }
 
     &__header {
@@ -45,26 +42,31 @@ export const LayoutRatafiaStyled = styled.div `
       align-items: flex-start;
       flex: 1 0 0;
       align-self: stretch;
-
       gap: 1.5rem;
       margin-bottom: 1rem;
+
       @media ${device['portrait-tablets']} {
         margin-bottom: 2.5rem;
       }
     }
+
     &__cta {
       display: none;
+
       @media ${device['portrait-tablets']} {
         display: block;
       }
     }
+
     &__footer-desktop {
       width: 100%;
       display: none;
+
       @media ${device['portrait-tablets']} {
         display: block;
       }
     }
+
     &__footer-mobile {
       display: flex;
       flex-direction: column;
@@ -72,20 +74,14 @@ export const LayoutRatafiaStyled = styled.div `
       bottom: 0;
       left: 0;
       right: 0;
-
       gap: 1rem;
       padding: 1.5rem;
-
       width: 100vw;
       background: var(--others-white);
+
       @media ${device['portrait-tablets']} {
         display: none;
       }
     }
-    .e-button.--primary-1 {
-      height: auto;
-      padding: 0.6875rem 1rem;
-      line-height: 22px;
-    }
   }
 `;

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

@@ -16,12 +16,9 @@ export const LayoutRatafiaStyled = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-
     padding: 1.5rem 1.5rem 0 1.5rem;
-
     width: 100%;
-    height: calc(100vh - 5.125rem);
-
+    height: calc(100vh - 8.375rem);
     border-radius: 16px 16px 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
@@ -29,9 +26,9 @@ export const LayoutRatafiaStyled = styled.div`
     @media ${device['portrait-tablets']} {
       padding: 2.5rem 2.5rem 1.5rem 2.5rem;
     }
+
     @media ${device['portrait-tablets']} {
       width: 800px;
-      height: 890px;
     }
 
     &__header {
@@ -46,26 +43,31 @@ export const LayoutRatafiaStyled = styled.div`
       align-items: flex-start;
       flex: 1 0 0;
       align-self: stretch;
-
       gap: 1.5rem;
       margin-bottom: 1rem;
+
       @media ${device['portrait-tablets']} {
         margin-bottom: 2.5rem;
       }
     }
+
     &__cta {
       display: none;
+
       @media ${device['portrait-tablets']} {
         display: block;
       }
     }
+
     &__footer-desktop {
       width: 100%;
       display: none;
+
       @media ${device['portrait-tablets']} {
         display: block;
       }
     }
+
     &__footer-mobile {
       display: flex;
       flex-direction: column;
@@ -73,20 +75,14 @@ export const LayoutRatafiaStyled = styled.div`
       bottom: 0;
       left: 0;
       right: 0;
-
       gap: 1rem;
       padding: 1.5rem;
-
       width: 100vw;
       background: var(--others-white);
+
       @media ${device['portrait-tablets']} {
         display: none;
       }
     }
-    .e-button.--primary-1 {
-      height: auto;
-      padding: 0.6875rem 1rem;
-      line-height: 22px;
-    }
   }
 `

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.js

@@ -0,0 +1 @@
+export {};

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;
+      }
+    }
+  }
+`