@npm_leadtech/legal-lib-components 7.81.0 → 7.82.52

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

@@ -79,13 +79,6 @@ export const BoxFormStyled = styled.div`
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
-    flex-wrap: wrap;
-    gap: 1rem;
-
-    .e-button {
-      flex: 1;
-      text-wrap: nowrap;
-    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -99,7 +92,8 @@ export const BoxFormStyled = styled.div`
   }
 
   .box--form__footer__text {
-    margin-right: 1rem;
+    margin-right: 5px;
+    width: 60%;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;

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

@@ -3,11 +3,12 @@ import styled from 'styled-components';
 export const ExpertCardListStyled = styled.div `
   display: flex;
   flex-flow: column;
-  gap: 2rem;
+  gap: 0 2rem;
   justify-content: center;
-  margin: 2rem 0 0 0;
+  margin: 2rem 0 3rem 0;
 
   @media ${device['landscape-tablets']} {
     flex-flow: row wrap;
+    gap: 5rem 2rem;
   }
 `;

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

@@ -4,11 +4,12 @@ import styled from 'styled-components'
 export const ExpertCardListStyled = styled.div`
   display: flex;
   flex-flow: column;
-  gap: 2rem;
+  gap: 0 2rem;
   justify-content: center;
-  margin: 2rem 0 0 0;
+  margin: 2rem 0 3rem 0;
 
   @media ${device['landscape-tablets']} {
     flex-flow: row wrap;
+    gap: 5rem 2rem;
   }
 `

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

@@ -89,10 +89,6 @@ export const FreeDocModalContentStyled = styled.div `
     @media ${device['landscape-tablets']} {
       display: none;
     }
-
-    @media (max-width: 395px) {
-      left: 285px;
-    }
   }
 
   .left-container {

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

@@ -90,10 +90,6 @@ export const FreeDocModalContentStyled = styled.div`
     @media ${device['landscape-tablets']} {
       display: none;
     }
-
-    @media (max-width: 395px) {
-      left: 285px;
-    }
   }
 
   .left-container {

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuItemsDeprecated } from '../../atoms';
+import { MenuItems } from '../../atoms';
 import { MenuItemsSectionStyled } from './MenuItemsSection.styled';
 const MenuItemsSection = ({ icon, title, list }) => {
     const filteredList = title !== undefined && list !== undefined ? list.filter((item) => item.content) : null;
     if (filteredList === null || filteredList?.length === 0 || filteredList[0].content === undefined)
         return null;
-    return (_jsxs(MenuItemsSectionStyled, { className: 'menu-items-section', children: [_jsxs("div", { className: 'menu-items-section__title-wrapper', children: [icon ?? null, _jsx("div", { className: 'menu-items-section__title-wrapper__title', children: title })] }), list && _jsx(MenuItemsDeprecated, { list: list, spacing: true })] }));
+    return (_jsxs(MenuItemsSectionStyled, { className: 'menu-items-section', children: [_jsxs("div", { className: 'menu-items-section__title-wrapper', children: [icon ?? null, _jsx("div", { className: 'menu-items-section__title-wrapper__title', children: title })] }), list && _jsx(MenuItems, { list: list, spacing: true })] }));
 };
 export default MenuItemsSection;

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { MenuItemsDeprecated } from '../../atoms'
+import { MenuItems } from '../../atoms'
 import { type MenuItemsSectionProps } from './MenuItemsSectionProps.types'
 import { MenuItemsSectionStyled } from './MenuItemsSection.styled'
 
@@ -14,7 +14,7 @@ const MenuItemsSection: FC<MenuItemsSectionProps> = ({ icon, title, list }) => {
         {icon ?? null}
         <div className='menu-items-section__title-wrapper__title'>{title}</div>
       </div>
-      {list && <MenuItemsDeprecated list={list} spacing />}
+      {list && <MenuItems list={list} spacing />}
     </MenuItemsSectionStyled>
   )
 }

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSectionProps.types.d.ts

@@ -1,4 +1,4 @@
-import { type MenuListItem } from 'src/components/atoms/MenuItemsDeprecated/MenuItemsDeprecatedProps.types';
+import { type MenuListItem } from 'src/components/atoms/MenuItems/MenuItemProps.types';
 export interface MenuItemsSectionProps {
     icon?: React.ReactNode;
     title?: string;

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSectionProps.types.ts

@@ -1,4 +1,4 @@
-import { type MenuListItem } from 'src/components/atoms/MenuItemsDeprecated/MenuItemsDeprecatedProps.types'
+import { type MenuListItem } from 'src/components/atoms/MenuItems/MenuItemProps.types'
 
 export interface MenuItemsSectionProps {
   icon?: React.ReactNode

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

@@ -20,12 +20,6 @@ export const MidBannerRatafiaContentStyled = styled.div `
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
-
-        .richt-text-strapi {
-          display: flex;
-          flex-direction: column;
-          gap: var(--global-gap);
-        }
       }
     }
     &__cta {

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

@@ -21,12 +21,6 @@ export const MidBannerRatafiaContentStyled = styled.div`
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
-
-        .richt-text-strapi {
-          display: flex;
-          flex-direction: column;
-          gap: var(--global-gap);
-        }
       }
     }
     &__cta {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled';
-const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, isAbout = false, midBanner1Img, midBanner2Img, midBanner3Img, iconLabel1, iconLabel2, iconLabel3 }) => {
-    return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && !isAbout && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: iconLabel1 })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner2Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: iconLabel2 })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: iconLabel3 })] })] })), isAbout && (_jsxs("div", { className: 'about-page', children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag', children: "Signed" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "AI Reviewed" })] })] }))] }));
+const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
+    return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), !isEsignatureImage && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: midBanner1Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "Summarized" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner2Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Key facts" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: midBanner3Img, alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Clauses" })] })] }))] }));
 };
 export default MidBannerRatafiaSample;

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

@@ -66,15 +66,4 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       top: 75px;
     }
   }
-
-  .about-page {
-    &__ai-tag {
-      background: var(--primary-main-light-5);
-    }
-
-    &__signed-tag {
-      background: var(--primary-main-dark-1);
-      color: var(--others-white);
-    }
-  }
 `;

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

@@ -67,15 +67,4 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       top: 75px;
     }
   }
-
-  .about-page {
-    &__ai-tag {
-      background: var(--primary-main-light-5);
-    }
-
-    &__signed-tag {
-      background: var(--primary-main-dark-1);
-      color: var(--others-white);
-    }
-  }
 `

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

@@ -6,51 +6,31 @@ import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
 const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
   image,
   isEsignatureImage = false,
-  isAbout = false,
   midBanner1Img,
   midBanner2Img,
-  midBanner3Img,
-  iconLabel1,
-  iconLabel2,
-  iconLabel3
+  midBanner3Img
 }) => {
   return (
     <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>
-      {!isEsignatureImage && !isAbout && (
+      {!isEsignatureImage && (
         <>
           <div className='mid-banner-ratafia-sample__sumarized-tag'>
             <img className='mid-banner-ratafia-sample__sumarized-tag__icon' src={midBanner1Img} alt='' role='img' />
             <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
-              {iconLabel1}
+              Summarized
             </p>
           </div>
           <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts'>
             <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner2Img} alt='' role='img' />
-            <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>{iconLabel2}</p>
+            <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Key facts</p>
           </div>
           <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses'>
             <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
-            <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>{iconLabel3}</p>
+            <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Clauses</p>
           </div>
         </>
       )}
-      {isAbout && (
-        <div className='about-page'>
-          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag'>
-            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner1Img} alt='' role='img' />
-            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag'>
-              Signed
-            </p>
-          </div>
-          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag'>
-            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
-            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
-              AI Reviewed
-            </p>
-          </div>
-        </div>
-      )}
     </MidBannerRatafiaSampleStyled>
   )
 }

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.d.ts

@@ -1,11 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
     image: React.ReactNode;
     isEsignatureImage?: boolean;
-    isAbout?: boolean;
     midBanner1Img: string;
     midBanner2Img: string;
     midBanner3Img: string;
-    iconLabel1: string;
-    iconLabel2: string;
-    iconLabel3: string;
 }

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.ts

@@ -1,11 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
   image: React.ReactNode
   isEsignatureImage?: boolean
-  isAbout?: boolean
   midBanner1Img: string
   midBanner2Img: string
   midBanner3Img: string
-  iconLabel1: string
-  iconLabel2: string
-  iconLabel3: string
 }

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useEffect } from 'react';
-import { MenuItemsDeprecated } from '../../atoms';
+import { MenuItems } from '../../atoms';
 import { NavBarDropDownStyled } from './NavBarDropDown.styled';
 import { useIntersectionObserver } from '../../../hooks';
 let scrollPosition = 0;
 let touchStartPosY;
 let isDisabledScroll = false;
-export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveContent, setEnableScrollbarOnClose, setIsOpen, isTestAB21644 = false }) => {
+export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveContent, setEnableScrollbarOnClose, setIsOpen }) => {
     const [ref, isIntersectingWithElement] = useIntersectionObserver({
         options: { threshold: 0.15 }
     });
@@ -63,5 +63,5 @@ export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveC
     useEffect(() => {
         setEnableScrollbarOnClose(() => enableScrollbarOnClose);
     }, []);
-    return (_jsx(_Fragment, { children: isOpen ? (_jsxs(NavBarDropDownStyled, { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItemsDeprecated, { isTestAB21644: isTestAB21644, list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
+    return (_jsx(_Fragment, { children: isOpen ? (_jsxs(NavBarDropDownStyled, { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItems, { list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
 };

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

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC, useEffect } from 'react'
-import { MenuItemsDeprecated } from '../../atoms'
+import { MenuItems } from '../../atoms'
 import { type NavBarDropDownProps } from './NavBarDropDownProps.types'
 import { NavBarDropDownStyled } from './NavBarDropDown.styled'
 import { useIntersectionObserver } from '../../../hooks'
@@ -16,10 +16,9 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   hasBullets = true,
   initialActiveContent,
   setEnableScrollbarOnClose,
-  setIsOpen,
-  isTestAB21644 = false
+  setIsOpen
 }): React.ReactElement | null => {
-  const [ref, isIntersectingWithElement] = useIntersectionObserver<HTMLDivElement>({
+  const [ref, isIntersectingWithElement] = useIntersectionObserver({
     options: { threshold: 0.15 }
   })
 
@@ -88,12 +87,7 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
       {isOpen ? (
         <NavBarDropDownStyled className='navbar-drop-down__container'>
           <div className='navbar-drop-down__container__menu_items'>
-            <MenuItemsDeprecated
-              isTestAB21644={isTestAB21644}
-              list={list}
-              hasBullets={hasBullets}
-              initialActiveContent={initialActiveContent}
-            />
+            <MenuItems list={list} hasBullets={hasBullets} initialActiveContent={initialActiveContent} />
           </div>
           <div ref={ref} className='navbar-drop-down__container__shadow' onClick={closeMenu}></div>
         </NavBarDropDownStyled>

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDownProps.types.d.ts

@@ -10,6 +10,5 @@ export interface NavBarDropDownProps {
     setEnableScrollbarOnClose: React.Dispatch<React.SetStateAction<(() => void) | undefined>>;
     setIsOpen: (open: boolean) => void;
     list: List[];
-    isTestAB21644?: boolean;
 }
 export {};

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDownProps.types.ts

@@ -10,5 +10,4 @@ export interface NavBarDropDownProps {
   setEnableScrollbarOnClose: React.Dispatch<React.SetStateAction<(() => void) | undefined>>
   setIsOpen: (open: boolean) => void
   list: List[]
-  isTestAB21644?: boolean
 }

package/dist/src/components/molecules/{SubscriptionCard/RatafiaSubscriptionCard → RatafiaSubscriptionCard}/RatafiaSubscriptionCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types';
-declare const RatafiaSubscriptionCard: React.FC<RatafiaSubscriptionCardProps>;
+declare const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps>;
 export default RatafiaSubscriptionCard;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
+import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled';
+import { stringSlugify } from '../../../utils/stringSlugify';
+const RatafiaSubscriptionCard = ({ cardStyle = 'primary', iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, dataQa, handleClick }) => {
+    if (!title)
+        return null;
+    const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
+    const renderFeatures = (features, className) => features.map((feature) => (_jsxs("div", { className: `ratafia-card__feature ${className ?? ''}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title)));
+    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: `${dataQa ?? 'ratafia-card-button'}`, givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, noLink: true, onClick: handleClick }) }))] }));
+};
+export default RatafiaSubscriptionCard;

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

@@ -0,0 +1 @@
+export declare const RatafiaSubscriptionCardStyled: 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/molecules/{SubscriptionCard/SubscriptionCard.styled.js → RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const SubscriptionCardStyled = styled.div `
+export const RatafiaSubscriptionCardStyled = styled.div `
   display: flex;
   flex-flow: column nowrap;
   flex: 1;
@@ -26,7 +26,7 @@ export const SubscriptionCardStyled = styled.div `
       background-color: var(--primary-main-light-1);
     }
 
-    .subscription-card__feature {
+    .ratafia-card__feature {
       &.ratafia-feature {
         background-color: var(--primary-main-light-6);
       }
@@ -40,18 +40,44 @@ export const SubscriptionCardStyled = styled.div `
       background-color: var(--secondary-main-dark-2);
     }
 
-    .subscription-card__feature {
+    .ratafia-card__feature {
       &.ratafia-feature {
         background-color: var(--secondary-main-light-3);
       }
     }
 
-    .subscription-card__button {
+    .ratafia-card__button {
       color: var(--others-black);
     }
   }
 
-  .subscription-card {
+  .ratafia-card {
+    &__header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem var(--global-gap);
+
+      @media ${device.mobile} {
+        flex-direction: column;
+        align-items: start;
+      }
+    }
+
+    &__title {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
+      font-weight: bold;
+    }
+
+    &__price-text {
+      font-size: 0.875rem;
+    }
+
     &__body {
       display: flex;
       flex-flow: column;
@@ -67,18 +93,10 @@ export const SubscriptionCardStyled = styled.div `
       font-size: 0.875rem;
       text-align: left;
       padding: 0.25rem 0;
-      border-radius: 4px;
-
-      &.has-padding {
-        padding-left: 0.5rem;
-      }
 
       .icon-svg-with-theme-color {
         flex-basis: 1rem;
         margin-top: 0.2rem;
-        display: inline-block;
-        object-fit: contain;
-        flex-shrink: 0;
       }
 
       &.ratafia-feature {

package/dist/src/components/molecules/{SubscriptionCard/SubscriptionCard.styled.ts → RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const SubscriptionCardStyled = styled.div`
+export const RatafiaSubscriptionCardStyled = styled.div`
   display: flex;
   flex-flow: column nowrap;
   flex: 1;
@@ -27,7 +27,7 @@ export const SubscriptionCardStyled = styled.div`
       background-color: var(--primary-main-light-1);
     }
 
-    .subscription-card__feature {
+    .ratafia-card__feature {
       &.ratafia-feature {
         background-color: var(--primary-main-light-6);
       }
@@ -41,18 +41,44 @@ export const SubscriptionCardStyled = styled.div`
       background-color: var(--secondary-main-dark-2);
     }
 
-    .subscription-card__feature {
+    .ratafia-card__feature {
       &.ratafia-feature {
         background-color: var(--secondary-main-light-3);
       }
     }
 
-    .subscription-card__button {
+    .ratafia-card__button {
       color: var(--others-black);
     }
   }
 
-  .subscription-card {
+  .ratafia-card {
+    &__header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem var(--global-gap);
+
+      @media ${device.mobile} {
+        flex-direction: column;
+        align-items: start;
+      }
+    }
+
+    &__title {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
+      font-weight: bold;
+    }
+
+    &__price-text {
+      font-size: 0.875rem;
+    }
+
     &__body {
       display: flex;
       flex-flow: column;
@@ -68,18 +94,10 @@ export const SubscriptionCardStyled = styled.div`
       font-size: 0.875rem;
       text-align: left;
       padding: 0.25rem 0;
-      border-radius: 4px;
-
-      &.has-padding {
-        padding-left: 0.5rem;
-      }
 
       .icon-svg-with-theme-color {
         flex-basis: 1rem;
         margin-top: 0.2rem;
-        display: inline-block;
-        object-fit: contain;
-        flex-shrink: 0;
       }
 
       &.ratafia-feature {

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

@@ -0,0 +1,61 @@
+import React, { FC, ReactNode } from 'react'
+
+import { BenefitProps, RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types'
+import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms'
+import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
+import { stringSlugify } from '../../../utils/stringSlugify'
+
+const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
+  cardStyle = 'primary',
+  iconTitle,
+  title,
+  priceText,
+  mainFeatures,
+  AIFeatures,
+  buttonText,
+  dataQa,
+  handleClick
+}) => {
+  if (!title) return null
+  const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
+  const renderFeatures = (features: BenefitProps[], className?: string): ReactNode =>
+    features.map((feature) => (
+      <div key={feature.title} className={`ratafia-card__feature ${className ?? ''}`}>
+        {feature.image?.url && <IconSvgURLWithThemeColor url={feature.image.url} height='16' width='16' />}
+        <RichTextStrapi html={feature.title} />
+      </div>
+    ))
+
+  return (
+    <RatafiaSubscriptionCardStyled className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
+      <div className='ratafia-card__header'>
+        {title && (
+          <div className='ratafia-card__title'>
+            {iconTitle?.url && <IconSvgURLWithThemeColor url={iconTitle.url} height='26' width='26' />}
+            <RichTextStrapi html={title} />
+          </div>
+        )}
+        {priceText && <div className='ratafia-card__price-text'>{priceText}</div>}
+      </div>
+      <hr />
+      <div className='ratafia-card__body'>
+        {mainFeatures && renderFeatures(mainFeatures as unknown as BenefitProps[], 'main-feature')}
+        {AIFeatures && renderFeatures(AIFeatures as unknown as BenefitProps[], 'ratafia-feature')}
+      </div>
+      {buttonText && (
+        <div className='ratafia-card__footer'>
+          <Button
+            dataQa={`${dataQa ?? 'ratafia-card-button'}`}
+            givenClass='ratafia-card__button'
+            color={buttonStyle}
+            label={buttonText}
+            noLink
+            onClick={handleClick}
+          />
+        </div>
+      )}
+    </RatafiaSubscriptionCardStyled>
+  )
+}
+
+export default RatafiaSubscriptionCard

package/dist/src/components/molecules/{SubscriptionCard/RatafiaSubscriptionCard → RatafiaSubscriptionCard}/RatafiaSubscriptionCardProps.types.d.ts

@@ -4,7 +4,8 @@ export interface RatafiaSubscriptionCardProps {
     iconTitle?: IconTitleProps;
     title?: string;
     priceText?: string;
-    features?: FeatureProps[];
+    mainFeatures?: BenefitProps[];
+    AIFeatures?: BenefitProps[];
     buttonText?: string;
     dataQa?: string;
     handleClick?: () => void;
@@ -13,10 +14,9 @@ interface IconTitleProps {
     name?: string;
     url: string;
 }
-export interface FeatureProps {
+export interface BenefitProps {
     title?: string;
     description: string;
-    isHighlighted: boolean;
     image?: {
         name: string;
         url: string;