@npm_leadtech/legal-lib-components 7.5.2 → 7.5.5

package/dist/css/styles.css

@@ -2154,6 +2154,23 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
+.e-text--has-prefix {
+  width: 100%;
+}
+@media (min-width: 575px) {
+  .e-text--has-prefix {
+    width: 50%;
+  }
+}
+.e-text--has-prefix .has-currency-prefix {
+  padding-left: 2rem;
+}
+.e-text--has-prefix .has-currency-suffix {
+  padding-right: 2rem;
+}
+.e-text--has-prefix .has-percent-suffix {
+  padding-left: 0.75rem;
+}
 .e-text .input-icon {
   position: absolute;
   transform: translate(-15%, -65%);
@@ -2168,6 +2185,27 @@ h2.react-datepicker__current-month {
   background: none;
   border: none;
 }
+.e-text .input-icon-currency-suffix {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  background: none;
+  border: none;
+}
+.e-text .input-icon-currency-prefix {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  background: none;
+  border: none;
+}
+.e-text .input-icon-percent-suffix {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  background: none;
+  border: none;
+}
 .e-text .formgroup--input__button {
   align-self: flex-start;
   font-size: 0.75rem;

package/dist/images/svg/currencyDE.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 17.5C10.8611 17.5 9.40278 17.0347 8.125 16.1042C6.84722 15.1736 5.94444 13.9722 5.41667 12.5H3.33333C3.09722 12.5 2.89931 12.4201 2.73958 12.2604C2.57986 12.1007 2.5 11.9028 2.5 11.6667C2.5 11.4306 2.57986 11.2326 2.73958 11.0729C2.89931 10.9132 3.09722 10.8333 3.33333 10.8333H5.04167C5.01389 10.6806 5 10.5417 5 10.4167V9.58333C5 9.45833 5.01389 9.31944 5.04167 9.16667H3.33333C3.09722 9.16667 2.89931 9.08681 2.73958 8.92708C2.57986 8.76736 2.5 8.56944 2.5 8.33333C2.5 8.09722 2.57986 7.89931 2.73958 7.73958C2.89931 7.57986 3.09722 7.5 3.33333 7.5H5.41667C5.94444 6.02778 6.84722 4.82639 8.125 3.89583C9.40278 2.96528 10.8611 2.5 12.5 2.5C13.2917 2.5 14.0347 2.61458 14.7292 2.84375C15.4236 3.07292 16.0764 3.38889 16.6875 3.79167C16.9236 3.94444 17.0451 4.15972 17.0521 4.4375C17.059 4.71528 16.9653 4.95139 16.7708 5.14583C16.5764 5.34028 16.3333 5.45486 16.0417 5.48958C15.75 5.52431 15.4792 5.46528 15.2292 5.3125C14.8264 5.07639 14.3924 4.89583 13.9271 4.77083C13.4618 4.64583 12.9861 4.58333 12.5 4.58333C11.4583 4.58333 10.5104 4.85069 9.65625 5.38542C8.80208 5.92014 8.15278 6.625 7.70833 7.5H11.6667C11.9028 7.5 12.1007 7.57986 12.2604 7.73958C12.4201 7.89931 12.5 8.09722 12.5 8.33333C12.5 8.56944 12.4201 8.76736 12.2604 8.92708C12.1007 9.08681 11.9028 9.16667 11.6667 9.16667H7.16667C7.13889 9.31944 7.11806 9.45833 7.10417 9.58333C7.09028 9.70833 7.08333 9.84722 7.08333 10C7.08333 10.1528 7.09028 10.2917 7.10417 10.4167C7.11806 10.5417 7.13889 10.6806 7.16667 10.8333H11.6667C11.9028 10.8333 12.1007 10.9132 12.2604 11.0729C12.4201 11.2326 12.5 11.4306 12.5 11.6667C12.5 11.9028 12.4201 12.1007 12.2604 12.2604C12.1007 12.4201 11.9028 12.5 11.6667 12.5H7.70833C8.15278 13.375 8.80208 14.0799 9.65625 14.6146C10.5104 15.1493 11.4583 15.4167 12.5 15.4167C12.9861 15.4167 13.4618 15.3576 13.9271 15.2396C14.3924 15.1215 14.8264 14.9444 15.2292 14.7083C15.4792 14.5556 15.75 14.4931 16.0417 14.5208C16.3333 14.5486 16.5764 14.6597 16.7708 14.8542C16.9653 15.0486 17.059 15.2847 17.0521 15.5625C17.0451 15.8403 16.9236 16.0556 16.6875 16.2083C16.0764 16.6111 15.4236 16.9271 14.7292 17.1562C14.0347 17.3854 13.2917 17.5 12.5 17.5Z" fill="#6D7275"/>
+</svg>

package/dist/images/svg/currencyUS.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.94505 17.3333C4.6827 17.3333 4.4628 17.2446 4.28533 17.0671C4.10786 16.8896 4.01912 16.6697 4.01912 16.4074V15.3426C3.32468 15.1882 2.71511 14.9182 2.19042 14.5324C1.66573 14.1466 1.24135 13.6064 0.917271 12.912C0.809246 12.6959 0.805388 12.4683 0.905697 12.2291C1.00601 11.9899 1.18733 11.8163 1.44968 11.7083C1.66573 11.6157 1.88949 11.6196 2.12097 11.7199C2.35246 11.8202 2.52993 11.9861 2.65338 12.2176C2.91573 12.6805 3.24752 13.0316 3.64875 13.2708C4.04999 13.51 4.54381 13.6296 5.13023 13.6296C5.76295 13.6296 6.29922 13.4868 6.73903 13.2013C7.17884 12.9159 7.39875 12.4722 7.39875 11.8703C7.39875 11.3302 7.229 10.902 6.88949 10.5856C6.54999 10.2692 5.76295 9.91045 4.52838 9.50922C3.20122 9.09255 2.29073 8.59487 1.7969 8.01616C1.30307 7.43746 1.05616 6.73144 1.05616 5.89811C1.05616 4.89502 1.38023 4.1157 2.02838 3.56014C2.67653 3.00459 3.34011 2.68823 4.01912 2.61107V1.59255C4.01912 1.33021 4.10786 1.1103 4.28533 0.93283C4.4628 0.755361 4.6827 0.666626 4.94505 0.666626C5.20739 0.666626 5.4273 0.755361 5.60477 0.93283C5.78224 1.1103 5.87097 1.33021 5.87097 1.59255V2.61107C6.45739 2.70366 6.96665 2.89271 7.39875 3.1782C7.83085 3.46369 8.18579 3.81477 8.46357 4.23144C8.60246 4.43206 8.62946 4.65582 8.54459 4.90274C8.45971 5.14965 8.2861 5.32712 8.02375 5.43514C7.8077 5.52774 7.58394 5.5316 7.35246 5.44672C7.12098 5.36184 6.90493 5.21138 6.70431 4.99533C6.50369 4.77928 6.26835 4.61339 5.99829 4.49764C5.72823 4.3819 5.39258 4.32403 4.99134 4.32403C4.31233 4.32403 3.79536 4.4745 3.44042 4.77542C3.08548 5.07635 2.90801 5.45058 2.90801 5.89811C2.90801 6.40737 3.13949 6.8086 3.60246 7.10181C4.06542 7.39502 4.86789 7.70366 6.00986 8.02774C7.07468 8.33638 7.88101 8.82635 8.42885 9.49765C8.97668 10.1689 9.2506 10.9444 9.2506 11.824C9.2506 12.9197 8.92653 13.753 8.27838 14.324C7.63023 14.895 6.82776 15.25 5.87097 15.3888V16.4074C5.87097 16.6697 5.78224 16.8896 5.60477 17.0671C5.4273 17.2446 5.20739 17.3333 4.94505 17.3333Z" fill="#6D7275"/>
+</svg>

package/dist/images/svg/percent.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25004 9.16671C5.44448 9.16671 4.75699 8.88198 4.18754 8.31254C3.6181 7.7431 3.33337 7.0556 3.33337 6.25004C3.33337 5.44448 3.6181 4.75699 4.18754 4.18754C4.75699 3.6181 5.44448 3.33337 6.25004 3.33337C7.0556 3.33337 7.7431 3.6181 8.31254 4.18754C8.88198 4.75699 9.16671 5.44448 9.16671 6.25004C9.16671 7.0556 8.88198 7.7431 8.31254 8.31254C7.7431 8.88198 7.0556 9.16671 6.25004 9.16671ZM6.25004 7.50004C6.59726 7.50004 6.8924 7.37851 7.13546 7.13546C7.37851 6.8924 7.50004 6.59726 7.50004 6.25004C7.50004 5.90282 7.37851 5.60768 7.13546 5.36462C6.8924 5.12157 6.59726 5.00004 6.25004 5.00004C5.90282 5.00004 5.60768 5.12157 5.36462 5.36462C5.12157 5.60768 5.00004 5.90282 5.00004 6.25004C5.00004 6.59726 5.12157 6.8924 5.36462 7.13546C5.60768 7.37851 5.90282 7.50004 6.25004 7.50004ZM13.75 16.6667C12.9445 16.6667 12.257 16.382 11.6875 15.8125C11.1181 15.2431 10.8334 14.5556 10.8334 13.75C10.8334 12.9445 11.1181 12.257 11.6875 11.6875C12.257 11.1181 12.9445 10.8334 13.75 10.8334C14.5556 10.8334 15.2431 11.1181 15.8125 11.6875C16.382 12.257 16.6667 12.9445 16.6667 13.75C16.6667 14.5556 16.382 15.2431 15.8125 15.8125C15.2431 16.382 14.5556 16.6667 13.75 16.6667ZM13.75 15C14.0973 15 14.3924 14.8785 14.6355 14.6355C14.8785 14.3924 15 14.0973 15 13.75C15 13.4028 14.8785 13.1077 14.6355 12.8646C14.3924 12.6216 14.0973 12.5 13.75 12.5C13.4028 12.5 13.1077 12.6216 12.8646 12.8646C12.6216 13.1077 12.5 13.4028 12.5 13.75C12.5 14.0973 12.6216 14.3924 12.8646 14.6355C13.1077 14.8785 13.4028 15 13.75 15ZM3.91671 16.0834C3.76393 15.9306 3.68754 15.7362 3.68754 15.5C3.68754 15.2639 3.76393 15.0695 3.91671 14.9167L14.9167 3.91671C15.0695 3.76393 15.2639 3.68754 15.5 3.68754C15.7362 3.68754 15.9306 3.76393 16.0834 3.91671C16.2362 4.06949 16.3125 4.26393 16.3125 4.50004C16.3125 4.73615 16.2362 4.9306 16.0834 5.08337L5.08337 16.0834C4.9306 16.2362 4.73615 16.3125 4.50004 16.3125C4.26393 16.3125 4.06949 16.2362 3.91671 16.0834Z" fill="#6D7275"/>
+</svg>

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type BenefitCardProps } from './BenefitCardProps.types';
+export declare const BenefitCard: React.FC<BenefitCardProps>;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BenefitCardStyled } from './BenefitCardStyled.styled';
+export const BenefitCard = ({ description, hasShadow = true, hasBigFontSize = true, title, image }) => {
+    return (_jsxs(BenefitCardStyled, { className: `benefit-card ${hasShadow && 'has-shadow'}`, children: [image !== null && _jsx("div", { className: `benefit-card__icon ${hasShadow && 'has-shadow'}`, children: image }), _jsxs("div", { className: 'benefit-card__content', children: [_jsx("div", { className: `sans-serif ${hasBigFontSize && '--big'} --bold-weight benefit-card__content__title`, children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
+};

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { type BenefitCardProps } from './BenefitCardProps.types'
+import { BenefitCardStyled } from './BenefitCardStyled.styled'
+
+export const BenefitCard: React.FC<BenefitCardProps> = ({
+  description,
+  hasShadow = true,
+  hasBigFontSize = true,
+  title,
+  image
+}) => {
+  return (
+    <BenefitCardStyled className={`benefit-card ${hasShadow && 'has-shadow'}`}>
+      {image !== null && <div className={`benefit-card__icon ${hasShadow && 'has-shadow'}`}>{image}</div>}
+      <div className='benefit-card__content'>
+        <div className={`sans-serif ${hasBigFontSize && '--big'} --bold-weight benefit-card__content__title`}>
+          {title}
+        </div>
+        <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
+      </div>
+    </BenefitCardStyled>
+  )
+}

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

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

package/dist/src/components/atoms/BenefitCard/BenefitCardProps.types.ts

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

package/dist/src/components/atoms/BenefitCard/BenefitCardStyled.styled.d.ts

@@ -0,0 +1 @@
+export declare const BenefitCardStyled: 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/{BenefitRatafiaCard/BenefitRatafiaCard.styled.js → BenefitCard/BenefitCardStyled.styled.js}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,21 @@
 /* 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
@@ -9,22 +26,7 @@ export interface ButtonProps {
   noLinkNoFunc?: boolean
   onClick?: (functionParameters?: any) => void
   functionParameters?: any
-  color?:
-    | 'primary'
-    | 'primary2'
-    | 'primary3'
-    | 'primary4'
-    | 'secondary'
-    | 'secondary2'
-    | 'secondary3'
-    | 'secondary4'
-    | 'secondaryIcon'
-    | 'secondaryIconBold'
-    | 'secondaryIconDark'
-    | 'tertiary'
-    | 'tertiary2'
-    | 'styleless'
-    | 'transparent'
+  color?: Colors
   error?: boolean
   disabled?: boolean
   fluid?: boolean

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CardBoxProps } from './CardBoxProps.types';
+export declare const CardBox: React.FC<CardBoxProps>;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBoxStyled } from './CardBox.styled';
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor';
+import { RichTextStrapi } from '../RichTextStrapi';
+export const CardBox = ({ icon, text, borderRadius = '16px', gap = '1rem', padding = '16px 24px', height = '24', width = '24' }) => {
+    return (_jsxs(CardBoxStyled, { style: { gap, padding, borderRadius }, children: [_jsx(IconSvgURLWithThemeColor, { url: icon, height: height, width: width }), _jsx(RichTextStrapi, { html: text })] }));
+};

package/dist/src/components/atoms/CardBox/CardBox.styled.d.ts

@@ -0,0 +1 @@
+export declare const CardBoxStyled: 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/CardBox/CardBox.styled.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const CardBoxStyled = styled.div `
+  display: flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  background-color: var(--others-white);
+  align-items: center;
+  flex: 1;
+  max-width: 592px;
+  a {
+    color: var(--primary-main);
+  }
+
+  i {
+    display: inline-block;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+`;

package/dist/src/components/atoms/CardBox/CardBox.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const CardBoxStyled = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  background-color: var(--others-white);
+  align-items: center;
+  flex: 1;
+  max-width: 592px;
+  a {
+    color: var(--primary-main);
+  }
+
+  i {
+    display: inline-block;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+`

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { type CardBoxProps } from './CardBoxProps.types'
+import { CardBoxStyled } from './CardBox.styled'
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor'
+import { RichTextStrapi } from '../RichTextStrapi'
+
+export const CardBox: React.FC<CardBoxProps> = ({
+  icon,
+  text,
+  borderRadius = '16px',
+  gap = '1rem',
+  padding = '16px 24px',
+  height = '24',
+  width = '24'
+}) => {
+  return (
+    <CardBoxStyled style={{ gap, padding, borderRadius }}>
+      <IconSvgURLWithThemeColor url={icon} height={height} width={width} />
+      <RichTextStrapi html={text} />
+    </CardBoxStyled>
+  )
+}

package/dist/src/components/atoms/CardBox/CardBoxProps.types.d.ts

@@ -0,0 +1,10 @@
+export interface CardBoxProps {
+    text: string;
+    icon: string;
+    id?: string;
+    borderRadius?: string;
+    padding?: string;
+    gap?: string;
+    height?: string;
+    width?: string;
+}

package/dist/src/components/atoms/CardBox/CardBoxProps.types.ts

@@ -0,0 +1,10 @@
+export interface CardBoxProps {
+  text: string
+  icon: string
+  id?: string
+  borderRadius?: string
+  padding?: string
+  gap?: string
+  height?: string
+  width?: string
+}

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

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

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

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

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

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

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ dataQA, description, subdescription, id, title, handleClick }) => {
-    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, "data-qa": dataQA, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ dataQA, description, subdescription, id, title, handleClick }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
   const paneTitle = (
     <>
       {handleClick ? (
-        <button onClick={handleClick} data-qa={dataQA} className='pane--title pane--title--button'>
+        <button onClick={handleClick} className='pane--title pane--title--button'>
           {title}
         </button>
       ) : (

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,6 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
-    dataQA?: string;
     handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,6 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
-  dataQA?: string
   handleClick?: () => void
 }

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

@@ -1,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitRatafiaCard';
+export * from './BenefitCard';
 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,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitRatafiaCard';
+export * from './BenefitCard';
 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,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard'
 export * from './AddButton'
 export * from './BaseBox'
-export * from './BenefitRatafiaCard'
+export * from './BenefitCard'
 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 { BenefitRatafiaCard } from '../../atoms';
+import { BenefitCard } 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(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitCard, { ...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 { BenefitRatafiaCard } from '../../atoms'
+import { BenefitCard } 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) => (
-        <BenefitRatafiaCard key={benefit.id} {...benefit} />
+        <BenefitCard key={benefit.id} {...benefit} />
       ))}
     </BenefitRatafiaCardListStyled>
   )

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

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

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

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

package/dist/src/components/molecules/SubscriptionCard/CardBody.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type FeatureProps } from './RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types';
+export declare const CardBody: React.FC<{
+    hasPaddingMainFeature?: boolean;
+    features?: FeatureProps[];
+}>;

package/dist/src/components/molecules/SubscriptionCard/CardBody.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
+const FeaturesList = ({ features, className }) => (_jsx(_Fragment, { children: features.map((feature) => (_jsxs("div", { className: `subscription-card__feature ${feature.isHighlighted ? 'ratafia-feature' : 'main-feature'} ${className}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title))) }));
+export const CardBody = ({ hasPaddingMainFeature = false, features }) => {
+    return (_jsx("div", { className: 'subscription-card__body', children: features && _jsx(FeaturesList, { features: features, className: `${hasPaddingMainFeature && 'has-padding'}` }) }));
+};

package/dist/src/components/molecules/SubscriptionCard/CardBody.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms'
+import { type FeatureProps } from './RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types'
+
+const FeaturesList: React.FC<{ features: FeatureProps[]; className: string }> = ({ features, className }) => (
+  <>
+    {features.map((feature) => (
+      <div
+        key={feature.title}
+        className={`subscription-card__feature ${feature.isHighlighted ? 'ratafia-feature' : 'main-feature'} ${className}`}
+      >
+        {feature.image?.url && <IconSvgURLWithThemeColor url={feature.image.url} height='16' width='16' />}
+        <RichTextStrapi html={feature.title} />
+      </div>
+    ))}
+  </>
+)
+
+export const CardBody: React.FC<{
+  hasPaddingMainFeature?: boolean
+  features?: FeatureProps[]
+}> = ({ hasPaddingMainFeature = false, features }) => {
+  return (
+    <div className='subscription-card__body'>
+      {features && <FeaturesList features={features} className={`${hasPaddingMainFeature && 'has-padding'}`} />}
+    </div>
+  )
+}

package/dist/src/components/molecules/SubscriptionCard/CardFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type Colors } from 'src/components/atoms/Button/ButtonProps.types';
+export declare const CardFooter: React.FC<{
+    buttonText?: string;
+    dataQa?: string;
+    onClick?: () => void;
+    buttonStyle: Colors;
+}>;

package/dist/src/components/molecules/SubscriptionCard/CardFooter.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+export const CardFooter = ({ buttonStyle, buttonText, dataQa, onClick }) => buttonText ? (_jsx("div", { className: 'subscription-card__footer', children: _jsx(Button, { dataQa: dataQa ?? 'subscription-card-button', givenClass: 'subscription-card__button', color: buttonStyle, label: buttonText, noLink: true, onClick: onClick }) })) : null;