@npm_leadtech/legal-lib-components 7.5.8 → 7.6.0

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/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;

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;