@npm_leadtech/legal-lib-components 7.45.0 → 7.45.1

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;

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { Button } from '../../atoms'
+import { type Colors } from 'src/components/atoms/Button/ButtonProps.types'
+
+export const CardFooter: React.FC<{
+  buttonText?: string
+  dataQa?: string
+  onClick?: () => void
+  buttonStyle: Colors
+}> = ({ buttonStyle, buttonText, dataQa, onClick }) =>
+  buttonText ? (
+    <div className='subscription-card__footer'>
+      <Button
+        dataQa={dataQa ?? 'subscription-card-button'}
+        givenClass='subscription-card__button'
+        color={buttonStyle}
+        label={buttonText}
+        noLink
+        onClick={onClick}
+      />
+    </div>
+  ) : null

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingCardHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const PlanBoxPricingCardHeader: React.FC<{
+    title: string;
+    description?: string;
+    className?: string;
+}>;

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingCardHeader.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlanBoxPricingCardHeaderStyled } from './PlanBoxPricingCardHeader.styled';
+export const PlanBoxPricingCardHeader = ({ className, description, title }) => (_jsxs(PlanBoxPricingCardHeaderStyled, { children: [_jsx("h3", { className: `title-plan-box ${className}`, children: title }), _jsx("div", { className: 'description-plan-box', children: description })] }));

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingCardHeader.styled.d.ts

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+export const PlanBoxPricingCardHeaderStyled = styled.div `
+  .title-plan-box {
+    display: inline-block;
+    margin-bottom: 1.5rem;
+    padding: 8px 16px;
+    border-radius: 8px;
+    background: var(--neutral-neutral-4);
+    color: var(--Neutral-800, var(--neutral-neutral-1));
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    &.secondary {
+      background: var(--secondary-main-light-2, #f5dab0);
+    }
+  }
+  .description-plan-box {
+    display: block;
+    margin-bottom: 1rem;
+    color: var(--Neutral-800, var(--neutral-neutral-1));
+    font-size: var(--properties-inter-medium-font-size, 16px);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--properties-inter-medium-line-height, 22px); /* 137.5% */
+    letter-spacing: var(--properties-inter-medium-letter-spacing, -0.3px);
+  }
+`;

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingCardHeader.styled.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+export const PlanBoxPricingCardHeaderStyled = styled.div`
+  .title-plan-box {
+    display: inline-block;
+    margin-bottom: 1.5rem;
+    padding: 8px 16px;
+    border-radius: 8px;
+    background: var(--neutral-neutral-4);
+    color: var(--Neutral-800, var(--neutral-neutral-1));
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    &.secondary {
+      background: var(--secondary-main-light-2, #f5dab0);
+    }
+  }
+  .description-plan-box {
+    display: block;
+    margin-bottom: 1rem;
+    color: var(--Neutral-800, var(--neutral-neutral-1));
+    font-size: var(--properties-inter-medium-font-size, 16px);
+    font-style: normal;
+    font-weight: 700;
+    line-height: var(--properties-inter-medium-line-height, 22px); /* 137.5% */
+    letter-spacing: var(--properties-inter-medium-letter-spacing, -0.3px);
+  }
+`

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingCardHeader.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { PlanBoxPricingCardHeaderStyled } from './PlanBoxPricingCardHeader.styled'
+
+export const PlanBoxPricingCardHeader: React.FC<{ title: string; description?: string; className?: string }> = ({
+  className,
+  description,
+  title
+}) => (
+  <PlanBoxPricingCardHeaderStyled>
+    <h3 className={`title-plan-box ${className}`}>{title}</h3>
+    <div className='description-plan-box'>{description}</div>
+  </PlanBoxPricingCardHeaderStyled>
+)

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBody } from '../CardBody';
+import { CardFooter } from '../CardFooter';
+import { PlanBoxPricingCardHeader } from './PlanBoxPricingCardHeader';
+import { PlanBoxPricingTextStyled } from './PlanBoxPricingText.styled';
+import { SubscriptionCardStyled } from '../SubscriptionCard.styled';
+import { stringSlugify } from '../../../../utils/stringSlugify';
+const PlanBoxPricingSubscriptionCard = ({ buttonText, cardStyle = 'primary', description, dataQa, handleClick, features, title, priceText }) => {
+    if (!title)
+        return null;
+    const finalCardClass = cardStyle ? stringSlugify(cardStyle) : 'primary';
+    const finalButtonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
+    return (_jsxs("div", { children: [_jsxs(SubscriptionCardStyled, { className: `subscription-card ${finalCardClass}`, children: [_jsx(PlanBoxPricingCardHeader, { title: title, description: description, className: finalCardClass }), _jsx("hr", {}), _jsx(CardBody, { features: features, hasPaddingMainFeature: true }), _jsx(CardFooter, { buttonText: buttonText, dataQa: dataQa, onClick: handleClick, buttonStyle: finalButtonStyle })] }), priceText && _jsx(PlanBoxPricingTextStyled, { children: priceText })] }));
+};
+export default PlanBoxPricingSubscriptionCard;

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

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { CardBody } from '../CardBody'
+import { CardFooter } from '../CardFooter'
+import { PlanBoxPricingCardHeader } from './PlanBoxPricingCardHeader'
+import { PlanBoxPricingSubscriptionCardProps } from './PlanBoxPricingSubscriptionCardProps.types'
+import { PlanBoxPricingTextStyled } from './PlanBoxPricingText.styled'
+import { SubscriptionCardStyled } from '../SubscriptionCard.styled'
+import { stringSlugify } from '../../../../utils/stringSlugify'
+
+const PlanBoxPricingSubscriptionCard: React.FC<PlanBoxPricingSubscriptionCardProps> = ({
+  buttonText,
+  cardStyle = 'primary',
+  description,
+  dataQa,
+  handleClick,
+  features,
+  title,
+  priceText
+}) => {
+  if (!title) return null
+
+  const finalCardClass = cardStyle ? stringSlugify(cardStyle) : 'primary'
+  const finalButtonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
+  return (
+    <div>
+      <SubscriptionCardStyled className={`subscription-card ${finalCardClass}`}>
+        <PlanBoxPricingCardHeader title={title} description={description} className={finalCardClass} />
+        <hr />
+        <CardBody features={features} hasPaddingMainFeature />
+        <CardFooter buttonText={buttonText} dataQa={dataQa} onClick={handleClick} buttonStyle={finalButtonStyle} />
+      </SubscriptionCardStyled>
+      {priceText && <PlanBoxPricingTextStyled>{priceText}</PlanBoxPricingTextStyled>}
+    </div>
+  )
+}
+
+export default PlanBoxPricingSubscriptionCard

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingSubscriptionCardProps.types.d.ts

@@ -0,0 +1,20 @@
+import { type FeatureProps } from '../RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types';
+export interface PlanBoxPricingSubscriptionCardProps {
+    subscriptionTypeName?: string;
+    id: string;
+    description: string;
+    cardStyle?: CardStyleType;
+    iconTitle?: IconTitleProps;
+    title?: string;
+    priceText?: string;
+    features?: FeatureProps[];
+    buttonText?: string;
+    dataQa?: string;
+    handleClick?: () => void;
+}
+interface IconTitleProps {
+    name?: string;
+    url: string;
+}
+export type CardStyleType = 'Primary' | 'Secondary';
+export {};

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingSubscriptionCardProps.types.js

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

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingSubscriptionCardProps.types.ts

@@ -0,0 +1,22 @@
+import { type FeatureProps } from '../RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types'
+
+export interface PlanBoxPricingSubscriptionCardProps {
+  subscriptionTypeName?: string
+  id: string
+  description: string
+  cardStyle?: CardStyleType
+  iconTitle?: IconTitleProps
+  title?: string
+  priceText?: string
+  features?: FeatureProps[]
+  buttonText?: string
+  dataQa?: string
+  handleClick?: () => void
+}
+
+interface IconTitleProps {
+  name?: string
+  url: string
+}
+
+export type CardStyleType = 'Primary' | 'Secondary'

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingText.styled.d.ts

@@ -0,0 +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;

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingText.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const PlanBoxPricingTextStyled = styled.div `
+  padding: 0.5rem 1.5rem;
+  color: var(--Neutral-600, var(--neutral-neutral-2));
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: -0.3px;
+`;

package/dist/src/components/molecules/SubscriptionCard/PlanBoxPricingSubscriptionCard/PlanBoxPricingText.styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const PlanBoxPricingTextStyled = styled.div`
+  padding: 0.5rem 1.5rem;
+  color: var(--Neutral-600, var(--neutral-neutral-2));
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: -0.3px;
+`

package/dist/src/components/molecules/SubscriptionCard/RatafiaSubscriptionCard/RatafiaCardHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const RatafiaCardHeader: React.FC<{
+    title: string;
+    iconTitle?: {
+        url: string;
+    };
+    priceText?: string;
+}>;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSvgURLWithThemeColor, RichTextStrapi } from '../../../atoms';
+import { RatafiaCardHeaderStyled } from './RatafiaCardHeader.styled';
+export const RatafiaCardHeader = ({ title, iconTitle, priceText }) => (_jsxs(RatafiaCardHeaderStyled, { children: [title && (_jsxs("div", { className: 'subscription-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'subscription-card__price-text', children: priceText })] }));

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

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

@@ -0,0 +1,29 @@
+import { device } from '../../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaCardHeaderStyled = styled.div `
+  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;
+  }
+
+  .subscription-card {
+    &__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;
+    }
+  }
+`;

package/dist/src/components/molecules/SubscriptionCard/RatafiaSubscriptionCard/RatafiaCardHeader.styled.ts

@@ -0,0 +1,30 @@
+import { device } from '../../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaCardHeaderStyled = styled.div`
+  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;
+  }
+
+  .subscription-card {
+    &__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;
+    }
+  }
+`

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

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { IconSvgURLWithThemeColor, RichTextStrapi } from '../../../atoms'
+import { RatafiaCardHeaderStyled } from './RatafiaCardHeader.styled'
+
+export const RatafiaCardHeader: React.FC<{ title: string; iconTitle?: { url: string }; priceText?: string }> = ({
+  title,
+  iconTitle,
+  priceText
+}) => (
+  <RatafiaCardHeaderStyled>
+    {title && (
+      <div className='subscription-card__title'>
+        {iconTitle?.url && <IconSvgURLWithThemeColor url={iconTitle.url} height='26' width='26' />}
+        <RichTextStrapi html={title} />
+      </div>
+    )}
+    {priceText && <div className='subscription-card__price-text'>{priceText}</div>}
+  </RatafiaCardHeaderStyled>
+)

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBody } from '../CardBody';
+import { CardFooter } from '../CardFooter';
+import { RatafiaCardHeader } from './RatafiaCardHeader';
+import { SubscriptionCardStyled } from '../SubscriptionCard.styled';
+import { stringSlugify } from '../../../../utils/stringSlugify';
+const RatafiaSubscriptionCard = ({ buttonText, cardStyle = 'primary', features, dataQa, handleClick, iconTitle, priceText, title }) => {
+    if (!title)
+        return null;
+    const finalCardClass = cardStyle ? stringSlugify(cardStyle) : 'primary';
+    const finalButtonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
+    return (_jsxs(SubscriptionCardStyled, { className: `subscription-card ${finalCardClass}`, children: [_jsx(RatafiaCardHeader, { title: title, iconTitle: iconTitle, priceText: priceText }), _jsx("hr", {}), _jsx(CardBody, { features: features }), _jsx(CardFooter, { buttonText: buttonText, dataQa: dataQa, onClick: handleClick, buttonStyle: finalButtonStyle })] }));
+};
+export default RatafiaSubscriptionCard;

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { CardBody } from '../CardBody'
+import { CardFooter } from '../CardFooter'
+import { RatafiaCardHeader } from './RatafiaCardHeader'
+import { RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types'
+import { SubscriptionCardStyled } from '../SubscriptionCard.styled'
+import { stringSlugify } from '../../../../utils/stringSlugify'
+
+const RatafiaSubscriptionCard: React.FC<RatafiaSubscriptionCardProps> = ({
+  buttonText,
+  cardStyle = 'primary',
+  features,
+  dataQa,
+  handleClick,
+  iconTitle,
+  priceText,
+  title
+}) => {
+  if (!title) return null
+
+  const finalCardClass = cardStyle ? stringSlugify(cardStyle) : 'primary'
+  const finalButtonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
+  return (
+    <SubscriptionCardStyled className={`subscription-card ${finalCardClass}`}>
+      <RatafiaCardHeader title={title} iconTitle={iconTitle} priceText={priceText} />
+      <hr />
+      <CardBody features={features} />
+      <CardFooter buttonText={buttonText} dataQa={dataQa} onClick={handleClick} buttonStyle={finalButtonStyle} />
+    </SubscriptionCardStyled>
+  )
+}
+
+export default RatafiaSubscriptionCard

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

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

package/dist/src/components/molecules/SubscriptionCard/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.js

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const RatafiaSubscriptionCardStyled = styled.div `
+export const SubscriptionCardStyled = styled.div `
   display: flex;
   flex-flow: column nowrap;
   flex: 1;
@@ -26,7 +26,7 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       background-color: var(--primary-main-light-1);
     }
 
-    .ratafia-card__feature {
+    .subscription-card__feature {
       &.ratafia-feature {
         background-color: var(--primary-main-light-6);
       }
@@ -40,44 +40,18 @@ export const RatafiaSubscriptionCardStyled = styled.div `
       background-color: var(--secondary-main-dark-2);
     }
 
-    .ratafia-card__feature {
+    .subscription-card__feature {
       &.ratafia-feature {
         background-color: var(--secondary-main-light-3);
       }
     }
 
-    .ratafia-card__button {
+    .subscription-card__button {
       color: var(--others-black);
     }
   }
 
-  .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;
-    }
-
+  .subscription-card {
     &__body {
       display: flex;
       flex-flow: column;
@@ -93,10 +67,18 @@ export const RatafiaSubscriptionCardStyled = 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 {