@npm_leadtech/legal-lib-components 5.21.2 → 5.22.0

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/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, 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 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 default HeaderRatafia;

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

@@ -8,16 +8,13 @@ export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
   icon,
   title,
   actionButtons,
-  isHiddenActionButtons = false,
-  headerTitleRef
+  isHiddenActionButtons = false
 }) => {
   return (
     <HeaderRatafiaStyled className='header-ratafia'>
       <div className='header-ratafia__title'>
         <div className='header-ratafia__title__icon'>{icon}</div>
-        <h1 ref={headerTitleRef} className='sans-serif --bold-weight header-ratafia__title__text'>
-          {title}
-        </h1>
+        <h1 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,9 +1,7 @@
 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,10 +1,8 @@
 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("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 })] }));
+    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 })] }));
 };
 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'>
-        <h3 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h3>
+        <h2 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h2>
         <div className='sans-serif --super-medium mid-banner-ratafia-content__header__description'>{paragraph}</div>
       </div>
       <Button

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/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: 350px;
+    max-width: 340px;
   }
   @media ${device.laptop} {
     max-width: 560px;
@@ -36,7 +36,6 @@ 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: 350px;
+    max-width: 340px;
   }
   @media ${device.laptop} {
     max-width: 560px;
@@ -37,7 +37,6 @@ 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,24 +7,21 @@ 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;
-      margin-bottom: 1rem;
+  .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 {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
+    &__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,24 +8,21 @@ 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;
-      margin-bottom: 1rem;
+  .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 {
-        align-self: stretch;
-        color: var(--neutral-neutral-1);
-      }
+    &__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", { 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 })] })] }));
+    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 })] })] }));
 };
 export default KeyFactsResultContentRatafia;

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

@@ -8,9 +8,7 @@ import { ReviewKeyFactsResultRatafia } from '../../atoms'
 export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
   return (
     <KeyFactsResultContentRatafiaStyled>
-      <h2 ref={result?.documentNameRef} className='sans-serif --bold-weight key-facts-result-content__document-name'>
-        {result?.documentName}
-      </h2>
+      <h2 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,5 +1,4 @@
 import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms';
-import React from 'react';
 export interface KeyFactsResultContentRatafiaProps {
     result: KeyFactsResultProps | null;
     review: ReviewKeyFactsResultRatafiaProps;
@@ -7,5 +6,4 @@ export interface KeyFactsResultContentRatafiaProps {
 export interface KeyFactsResultProps {
     documentName: string;
     keyFacts: KeyFactRatafiaCardProps[];
-    documentNameRef?: React.RefObject<HTMLHeadingElement>;
 }

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

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

package/dist/src/components/sections/FaqSection/FaqSection.styled.js

@@ -8,7 +8,7 @@ export const FaqSectionStyled = styled.section `
   max-width: 700px;
   width: 100%;
 
-  &.faq-ratafia-section {
+  .faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -25,8 +25,5 @@ export const FaqSectionStyled = styled.section `
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
-    .faqs {
-      max-width: 56.75rem;
-    }
   }
 `;

package/dist/src/components/sections/FaqSection/FaqSection.styled.ts

@@ -9,7 +9,7 @@ export const FaqSectionStyled = styled.section`
   max-width: 700px;
   width: 100%;
 
-  &.faq-ratafia-section {
+  .faq-ratafia-section {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,8 +26,5 @@ export const FaqSectionStyled = styled.section`
     @media ${device['desktop-xl']} {
       padding: 3rem 28rem 5rem 28rem;
     }
-    .faqs {
-      max-width: 56.75rem;
-    }
   }
 `

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.js

@@ -39,6 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
+        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.ts

@@ -40,6 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
+        //TODO: Check again with the real container;
         min-width: 50%;
 
         @media ${device.desktop} {

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled';
+// import './TryItRatafiaSection.scss'
 const TryItRatafiaSection = ({ icon, paragraph, children }) => {
-    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h3", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx(TryItRatafiaSectionStyled, { className: 'try-it-ratafia-section', children: _jsxs("div", { className: 'try-it-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'try-it-ratafia-section__wrapper__content', children: [icon !== null && _jsx("div", { className: 'try-it-ratafia-section__wrapper__content__icon', children: icon }), _jsx("h2", { className: 'sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title', children: paragraph })] }), _jsx("span", { className: 'try-it-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default TryItRatafiaSection;

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.tsx

@@ -2,6 +2,7 @@ import React, { type FC } from 'react'
 
 import { type TryItRatafiaSectionProps } from './TryItRatafiaSectionProps.types'
 import { TryItRatafiaSectionStyled } from './TryItRatafiaSection.styled'
+// import './TryItRatafiaSection.scss'
 
 const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, children }) => {
   return (
@@ -9,9 +10,9 @@ const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, ch
       <div className='try-it-ratafia-section__wrapper background-ratafia-animation'>
         <div className='try-it-ratafia-section__wrapper__content'>
           {icon !== null && <div className={'try-it-ratafia-section__wrapper__content__icon'}>{icon}</div>}
-          <h3 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
+          <h2 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
             {paragraph}
-          </h3>
+          </h2>
         </div>
         <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.21.2",
+  "version": "5.22.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",