@npm_leadtech/legal-lib-components 7.0.4 → 7.0.6

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled';
+export const BenefitRatafiaCard = ({ title, image, description }) => {
+    return (_jsxs(BenefitRatafiaCardStyled, { className: 'benefit-ratafia-card', children: [image !== null && _jsx("div", { className: 'benefit-ratafia-card__icon', children: image }), _jsxs("div", { className: 'benefit-ratafia-card__content', children: [_jsx("h3", { className: 'sans-serif --big --bold-weight benefit-ratafia-card__content__title', children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
+};
+export default BenefitRatafiaCard;

package/dist/src/components/{molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingText.styled.d.ts → atoms/BenefitRatafiaCard/BenefitRatafiaCard.styled.d.ts}

@@ -1 +1 @@
-export declare const PlanBoxPricingTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BenefitRatafiaCardStyled: 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/atoms/{BenefitCard/BenefitCardStyled.styled.js → BenefitRatafiaCard/BenefitRatafiaCard.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const BenefitCardStyled = styled.div `
+export const BenefitRatafiaCardStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -12,10 +12,7 @@ export const BenefitCardStyled = styled.div `
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -24,7 +21,7 @@ export const BenefitCardStyled = styled.div `
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -33,10 +30,7 @@ export const BenefitCardStyled = styled.div `
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-      }
+      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
       img {
         min-width: 32px;

package/dist/src/components/atoms/{BenefitCard/BenefitCardStyled.styled.ts → BenefitRatafiaCard/BenefitRatafiaCard.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const BenefitCardStyled = styled.div`
+export const BenefitRatafiaCardStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,10 +13,7 @@ export const BenefitCardStyled = styled.div`
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -25,7 +22,7 @@ export const BenefitCardStyled = styled.div`
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -34,10 +31,7 @@ export const BenefitCardStyled = styled.div`
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-      }
+      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
       img {
         min-width: 32px;

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCard.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type BenefitRatafiaCardProps } from './BenefitRatafiaCardProps.types'
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled'
+
+export const BenefitRatafiaCard: React.FC<BenefitRatafiaCardProps> = ({ title, image, description }) => {
+  return (
+    <BenefitRatafiaCardStyled className='benefit-ratafia-card'>
+      {image !== null && <div className='benefit-ratafia-card__icon'>{image}</div>}
+      <div className='benefit-ratafia-card__content'>
+        <h3 className='sans-serif --big --bold-weight benefit-ratafia-card__content__title'>{title}</h3>
+        <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
+      </div>
+    </BenefitRatafiaCardStyled>
+  )
+}
+
+export default BenefitRatafiaCard

package/dist/src/components/atoms/{BenefitCard/BenefitCardProps.types.d.ts → BenefitRatafiaCard/BenefitRatafiaCardProps.types.d.ts}

@@ -1,8 +1,6 @@
-export interface BenefitCardProps {
+export interface BenefitRatafiaCardProps {
     id: string;
     title: string;
     image?: React.ReactNode;
     description: string;
-    hasShadow?: boolean;
-    hasBigFontSize?: boolean;
 }

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCardProps.types.ts

@@ -0,0 +1,6 @@
+export interface BenefitRatafiaCardProps {
+  id: string
+  title: string
+  image?: React.ReactNode
+  description: string
+}

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

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

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

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

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

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

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -1,4 +1,3 @@
-export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
 export interface ButtonProps {
     label: string;
     dataQa: string;
@@ -9,7 +8,7 @@ export interface ButtonProps {
     noLinkNoFunc?: boolean;
     onClick?: (functionParameters?: any) => void;
     functionParameters?: any;
-    color?: Colors;
+    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
     error?: boolean;
     disabled?: boolean;
     fluid?: boolean;

package/dist/src/components/atoms/Button/ButtonProps.types.js

@@ -1,2 +1 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -1,21 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
-export type Colors =
-  | 'primary'
-  | 'primary2'
-  | 'primary3'
-  | 'primary4'
-  | 'secondary'
-  | 'secondary2'
-  | 'secondary3'
-  | 'secondary4'
-  | 'secondaryIcon'
-  | 'secondaryIconBold'
-  | 'secondaryIconDark'
-  | 'tertiary'
-  | 'tertiary2'
-  | 'styleless'
-  | 'transparent'
 export interface ButtonProps {
   label: string
   dataQa: string
@@ -26,7 +9,22 @@ export interface ButtonProps {
   noLinkNoFunc?: boolean
   onClick?: (functionParameters?: any) => void
   functionParameters?: any
-  color?: Colors
+  color?:
+    | 'primary'
+    | 'primary2'
+    | 'primary3'
+    | 'primary4'
+    | 'secondary'
+    | 'secondary2'
+    | 'secondary3'
+    | 'secondary4'
+    | 'secondaryIcon'
+    | 'secondaryIconBold'
+    | 'secondaryIconDark'
+    | 'tertiary'
+    | 'tertiary2'
+    | 'styleless'
+    | 'transparent'
   error?: boolean
   disabled?: boolean
   fluid?: boolean

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitCard';
+export * from './BenefitRatafiaCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
-export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitCard';
+export * from './BenefitRatafiaCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
-export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard'
 export * from './AddButton'
 export * from './BaseBox'
-export * from './BenefitCard'
+export * from './BenefitRatafiaCard'
 export * from './BillCard'
 export * from './BottomOverlayMenu'
 export * from './BreadcrumItem'
 export * from './Button'
 export * from './ButtonIcon'
-export * from './CardBox'
 export * from './CardPane'
 export * from './Checkbox'
 export * from './ContactCard'

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BenefitCard } from '../../atoms';
+import { BenefitRatafiaCard } from '../../atoms';
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
 const BenefitRatafiaCardList = ({ benefits = [] }) => {
     if (benefits.length === 0)
         return null;
-    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitCard, { ...benefit }, benefit.id))) }));
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
 };
 export default BenefitRatafiaCardList;

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { BenefitCard } from '../../atoms'
+import { BenefitRatafiaCard } from '../../atoms'
 import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
 
@@ -10,7 +10,7 @@ const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = []
   return (
     <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
       {benefits.map((benefit) => (
-        <BenefitCard key={benefit.id} {...benefit} />
+        <BenefitRatafiaCard key={benefit.id} {...benefit} />
       ))}
     </BenefitRatafiaCardListStyled>
   )

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.d.ts

@@ -1,4 +1,4 @@
-import { type BenefitCardProps } from '../../atoms';
+import { type BenefitRatafiaCardProps } from '../../atoms';
 export interface BenefitRatafiaCardListProps {
-    benefits: BenefitCardProps[];
+    benefits: BenefitRatafiaCardProps[];
 }

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.ts

@@ -1,5 +1,5 @@
-import { type BenefitCardProps } from '../../atoms'
+import { type BenefitRatafiaCardProps } from '../../atoms'
 
 export interface BenefitRatafiaCardListProps {
-  benefits: BenefitCardProps[]
+  benefits: BenefitRatafiaCardProps[]
 }

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, 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" })] })] }))] }));
+const MidBannerRatafiaSample = ({ image, isEsignatureImage = false, isAbout = false, midBanner1Img, midBanner2Img, midBanner3Img }) => {
+    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: "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" })] })] })), 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" })] })] }))] }));
 };
 export default MidBannerRatafiaSample;

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

@@ -66,4 +66,15 @@ 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,4 +67,15 @@ 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,6 +6,7 @@ import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
 const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
   image,
   isEsignatureImage = false,
+  isAbout = false,
   midBanner1Img,
   midBanner2Img,
   midBanner3Img
@@ -13,7 +14,7 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
   return (
     <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>
-      {!isEsignatureImage && (
+      {!isEsignatureImage && !isAbout && (
         <>
           <div className='mid-banner-ratafia-sample__sumarized-tag'>
             <img className='mid-banner-ratafia-sample__sumarized-tag__icon' src={midBanner1Img} alt='' role='img' />
@@ -31,6 +32,22 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
           </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,6 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
     image: React.ReactNode;
     isEsignatureImage?: boolean;
+    isAbout?: boolean;
     midBanner1Img: string;
     midBanner2Img: string;
     midBanner3Img: string;

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

@@ -1,6 +1,7 @@
 export interface MidBannerRatafiaSampleProps {
   image: React.ReactNode
   isEsignatureImage?: boolean
+  isAbout?: boolean
   midBanner1Img: string
   midBanner2Img: string
   midBanner3Img: string

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,11 +1,11 @@
 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;
   gap: 0.5rem;
-  min-width: 379px;
+  min-width: 350px;
   padding: 1rem;
   border-radius: var(--s-border-radius);
 
@@ -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,12 +1,12 @@
 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;
   gap: 0.5rem;
-  min-width: 379px;
+  min-width: 350px;
   padding: 1rem;
   border-radius: var(--s-border-radius);
 
@@ -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 {