@npm_leadtech/legal-lib-components 5.18.3 → 5.18.4

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>
+  )
+}

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

@@ -0,0 +1,15 @@
+import type { DisclaimerRatafiaProps } from '../../atoms';
+import { type HeaderRatafiaProps } from '../../molecules';
+import { LimitReachedContentRatafiaProps } from '../../organisms';
+export interface LimitReachedRatafiaPageProps {
+    header: HeaderRatafiaProps;
+    limitReachedContent: LimitReachedContentRatafiaProps;
+    disclaimer: DisclaimerRatafiaProps;
+    goToDashboardCta: cta;
+}
+interface cta {
+    label: string;
+    link?: string;
+    dataQa: string;
+}
+export {};

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

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

package/dist/src/components/pages/LimitReachedRatafiaPage/LimitReachedRatafiaPageProps.types.ts

@@ -0,0 +1,16 @@
+import type { DisclaimerRatafiaProps } from '../../atoms'
+import { type HeaderRatafiaProps } from '../../molecules'
+import { LimitReachedContentRatafiaProps } from '../../organisms'
+
+export interface LimitReachedRatafiaPageProps {
+  header: HeaderRatafiaProps
+  limitReachedContent: LimitReachedContentRatafiaProps
+  disclaimer: DisclaimerRatafiaProps
+  goToDashboardCta: cta
+}
+
+interface cta {
+  label: string
+  link?: string
+  dataQa: string
+}

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

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

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

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

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

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

package/dist/src/components/pages/LoginRatafiaPage/LoginRatafiaPage.styled.js

@@ -1,15 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const LoginRatafiaPageStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  &__ctas {
+  .login-ratafia-page__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
+      @media ${device['portrait-tablets']} {
+        width: 12.5rem;
+      }
       margin-bottom: 1rem;
     }
-
     &__signIn {
       &__button {
         background: none;

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

@@ -1,16 +1,25 @@
+import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const LoginRatafiaPageStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1.5rem;
   background-color: var(--neutral-neutral-6);
 
-  &__ctas {
+  .login-ratafia-page__ctas {
     text-align: center;
     &__button {
       display: block;
       width: 100%;
+      @media ${device['portrait-tablets']} {
+        width: 12.5rem;
+      }
       margin-bottom: 1rem;
     }
-
     &__signIn {
       &__button {
         background: none;

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

@@ -4,6 +4,7 @@ export * from './ErrorRatafiaPage';
 export * from './FaqsPage';
 export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';
+export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';

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

@@ -4,6 +4,7 @@ export * from './ErrorRatafiaPage';
 export * from './FaqsPage';
 export * from './KeyFactsResultRatafiaPage';
 export * from './LegalPage';
+export * from './LimitReachedRatafiaPage';
 export * from './RatafiaLandingPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';

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

@@ -4,6 +4,7 @@ export * from './ErrorRatafiaPage'
 export * from './FaqsPage'
 export * from './KeyFactsResultRatafiaPage'
 export * from './LegalPage'
+export * from './LimitReachedRatafiaPage'
 export * from './RatafiaLandingPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'

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,5 +25,8 @@ 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,5 +26,8 @@ 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,7 +39,6 @@ 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,7 +40,6 @@ 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/LayoutRatafiaSection/LayoutRatafiaSection.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types';
+declare const LayoutRatafiaSection: FC<LayoutRatafiaSectionProps>;
+export default LayoutRatafiaSection;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled';
+import { TagsRatafiaList } from '../../molecules';
+import { useIsMobileOrTable } from '../../../hooks';
+const LayoutRatafiaSection = ({ title, children, tags = [], ctaLabel, ctaLink = '#', handleOnClick, ctaDataQa = 'ai-section-cta', image }) => {
+    const { isMobile } = useIsMobileOrTable();
+    if (children == undefined)
+        return null;
+    return (_jsx(LayoutRatafiaSectionStyled, { className: 'layout-ratafia-section', children: _jsxs("div", { className: 'layout-ratafia-section__wrapper background-ratafia-animation', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info', children: [_jsxs("div", { className: 'layout-ratafia-section__wrapper__info__paragraph', children: [title && (_jsx("h2", { className: 'layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight', children: title })), _jsx("div", { className: 'layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium', children: children })] }), tags?.length > 0 && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__tags', children: _jsx(TagsRatafiaList, { tags: tags }) })), ctaLabel && (_jsx("div", { className: 'layout-ratafia-section__wrapper__info__button', children: _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, onClick: handleOnClick, color: 'primary', label: ctaLabel, fluid: isMobile }) }))] }), image !== null && _jsx("div", { className: 'layout-ratafia-section__wrapper__image', children: image })] }) }));
+};
+export default LayoutRatafiaSection;

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.d.ts

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

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

@@ -0,0 +1,75 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LayoutRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2.5rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 4rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+
+          p:not(:last-child) {
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+          width: 100%;
+        }
+      }
+
+      &__image {
+        display: flex;
+        flex: 300px 0 0;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,76 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LayoutRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @media ${device.laptop} {
+    padding: 3rem 2rem;
+  }
+
+  @media ${device['desktop-xl']} {
+    padding: 3rem 0;
+  }
+
+  .layout-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      padding: 1.5rem;
+      gap: 2.5rem;
+      border-radius: 16px;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        padding: 2.5rem;
+      }
+
+      @media ${device.laptop} {
+        gap: 4rem;
+        padding: 4rem;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: 2rem;
+
+        &__paragraph {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          color: var(--others-white);
+
+          p:not(:last-child) {
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        &__tags {
+          flex: 1;
+        }
+
+        &__button {
+          display: flex;
+          width: 100%;
+        }
+      }
+
+      &__image {
+        display: flex;
+        flex: 300px 0 0;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,61 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms'
+import { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types'
+import { LayoutRatafiaSectionStyled } from './LayoutRatafiaSection.styled'
+import { TagsRatafiaList } from '../../molecules'
+import { useIsMobileOrTable } from '../../../hooks'
+
+const LayoutRatafiaSection: FC<LayoutRatafiaSectionProps> = ({
+  title,
+  children,
+  tags = [],
+  ctaLabel,
+  ctaLink = '#',
+  handleOnClick,
+  ctaDataQa = 'ai-section-cta',
+  image
+}) => {
+  const { isMobile } = useIsMobileOrTable()
+  if (children == undefined) return null
+
+  return (
+    <LayoutRatafiaSectionStyled className='layout-ratafia-section'>
+      <div className='layout-ratafia-section__wrapper background-ratafia-animation'>
+        <div className='layout-ratafia-section__wrapper__info'>
+          <div className='layout-ratafia-section__wrapper__info__paragraph'>
+            {title && (
+              <h2 className='layout-ratafia-section__wrapper__info__paragraph__title sans-serif --super-large --bold-weight'>
+                {title}
+              </h2>
+            )}
+            <div className='layout-ratafia-section__wrapper__info__paragraph__content sans-serif --super-medium'>
+              {children}
+            </div>
+          </div>
+          {tags?.length > 0 && (
+            <div className='layout-ratafia-section__wrapper__info__tags'>
+              <TagsRatafiaList tags={tags} />
+            </div>
+          )}
+          {ctaLabel && (
+            <div className='layout-ratafia-section__wrapper__info__button'>
+              <Button
+                givenClass='mid-banner-ratafia-content__cta'
+                dataQa={ctaDataQa}
+                link={ctaLink}
+                onClick={handleOnClick}
+                color='primary'
+                label={ctaLabel}
+                fluid={isMobile}
+              />
+            </div>
+          )}
+        </div>
+        {image !== null && <div className='layout-ratafia-section__wrapper__image'>{image}</div>}
+      </div>
+    </LayoutRatafiaSectionStyled>
+  )
+}
+
+export default LayoutRatafiaSection

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { TagRatafiaItemProps } from 'src/components/atoms';
+export interface LayoutRatafiaSectionProps {
+    title?: string;
+    children: React.ReactNode;
+    tags?: TagRatafiaItemProps[];
+    ctaLabel?: string;
+    ctaLink?: string;
+    handleOnClick?: MouseEventHandler;
+    ctaDataQa?: string;
+    image?: React.ReactNode;
+}

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.js

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

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSectionProps.types.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react'
+import { TagRatafiaItemProps } from 'src/components/atoms'
+
+export interface LayoutRatafiaSectionProps {
+  title?: string
+  children: React.ReactNode
+  tags?: TagRatafiaItemProps[]
+  ctaLabel?: string
+  ctaLink?: string
+  handleOnClick?: MouseEventHandler
+  ctaDataQa?: string
+  image?: React.ReactNode
+}

package/dist/src/components/sections/LayoutRatafiaSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection';
+export { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types';

package/dist/src/components/sections/LayoutRatafiaSection/index.js

@@ -0,0 +1 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection';

package/dist/src/components/sections/LayoutRatafiaSection/index.ts

@@ -0,0 +1,2 @@
+export { default as LayoutRatafiaSection } from './LayoutRatafiaSection'
+export { type LayoutRatafiaSectionProps } from './LayoutRatafiaSectionProps.types'

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

@@ -1,7 +1,6 @@
 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("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 })] }) }));
+    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 })] }) }));
 };
 export default TryItRatafiaSection;

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

@@ -2,7 +2,6 @@ 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 (
@@ -10,9 +9,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>}
-          <h2 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
+          <h3 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
             {paragraph}
-          </h2>
+          </h3>
         </div>
         <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
       </div>