@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { useState } from 'react';
+import { DesktopSearchBar } from '../DesktopSearchBar';
+import { IconSvgURLWithThemeColor } from '../../atoms/IconSvgURLWithThemeColor';
+import { MobileSearchBar } from '../MobileSearchBar';
+import { SearchBarStyled } from './SearchBar.styled';
+import search from '../../../../images/svg/search_24px.svg';
+export const SearchBar = (props) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const closeModal = () => setIsModalOpen(false);
+    return (_jsx(SearchBarStyled, { children: _jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), style: {
+                        cursor: 'pointer',
+                        width: '20px',
+                        height: '20px'
+                    }, className: 'search-icon-container', children: _jsx(IconSvgURLWithThemeColor, { url: search, height: '20', width: '20' }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal }), _jsx(MobileSearchBar, { ...props })] }) }));
+};

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

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

@@ -0,0 +1,11 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const SearchBarStyled = styled.div `
+  .search-icon-container {
+    display: none;
+
+    @media ${device.tablets} {
+      display: block;
+    }
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const SearchBarStyled = styled.div`
+  .search-icon-container {
+    display: none;
+
+    @media ${device.tablets} {
+      display: block;
+    }
+  }
+`

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

@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useState } from 'react'
+import { DesktopSearchBar } from '../DesktopSearchBar'
+import { IconSvgURLWithThemeColor } from '../../atoms/IconSvgURLWithThemeColor'
+import { MobileSearchBar } from '../MobileSearchBar'
+import { type SearchBarProps } from './SearchBarProps.types'
+import { SearchBarStyled } from './SearchBar.styled'
+import search from '../../../../images/svg/search_24px.svg'
+
+export const SearchBar: React.FC<SearchBarProps> = (props) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const closeModal = () => setIsModalOpen(false)
+
+  return (
+    <SearchBarStyled>
+      <div style={{ position: 'relative', display: 'flex' }}>
+        <a
+          onClick={() => setIsModalOpen(true)}
+          style={{
+            cursor: 'pointer',
+            width: '20px',
+            height: '20px'
+          }}
+          className='search-icon-container'
+        >
+          <IconSvgURLWithThemeColor url={search} height='20' width='20' />
+        </a>
+        <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
+        <MobileSearchBar {...props} />
+      </div>
+    </SearchBarStyled>
+  )
+}

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.d.ts

@@ -0,0 +1,37 @@
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface Routes {
+    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
+    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
+    LEGAL_DOCUMENTS: string;
+    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
+    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
+    LOGIN: string;
+    MY_DOCUMENTS: string;
+    REGISTER: string;
+    RATAFIA_LOGIN: string;
+    SIGN_EDITOR: string;
+}
+export interface SearchBarProps {
+    products: Products[];
+    searchBarTexts: StrapiSearchBar;
+    routes: Routes;
+    handleResultClick: (product: string, link: string) => void;
+}

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.js

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

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface Routes {
+  CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
+  CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
+  LEGAL_DOCUMENTS: string
+  LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
+  LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
+  LOGIN: string
+  MY_DOCUMENTS: string
+  REGISTER: string
+  RATAFIA_LOGIN: string
+  SIGN_EDITOR: string
+}
+
+export interface SearchBarProps {
+  products: Products[]
+  searchBarTexts: StrapiSearchBar
+  routes: Routes
+  handleResultClick: (product: string, link: string) => void
+}

package/dist/src/components/molecules/SearchBar/index.d.ts

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

package/dist/src/components/molecules/SearchBar/index.js

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

package/dist/src/components/molecules/SearchBar/index.ts

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

package/dist/src/components/molecules/SocialLinks/SocialLinks.d.ts

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SocialList } from './SocialLinks.styled';
+import { useIntersectionObserver } from '../../../hooks';
+export const SocialLinks = ({ links }) => {
+    return (_jsx(SocialList, { children: links.map((social) => {
+            const [ref, isIntersecting] = useIntersectionObserver({});
+            return (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { ref: ref, src: isIntersecting ? social.iconSrc : '', alt: social.alt, width: '20', height: '20' }) }) }, social.url));
+        }) }));
+};

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

@@ -0,0 +1 @@
+export declare const SocialList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const SocialList = styled.ul `
+  display: flex;
+  gap: 1rem;
+`;

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const SocialList = styled.ul`
+  display: flex;
+  gap: 1rem;
+`

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { SocialLinksProps } from './SocialLinksProps.types'
+import { SocialList } from './SocialLinks.styled'
+import { useIntersectionObserver } from '../../../hooks'
+
+export const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
+  return (
+    <SocialList>
+      {links.map((social) => {
+        const [ref, isIntersecting] = useIntersectionObserver<HTMLImageElement>({})
+        return (
+          <li key={social.url}>
+            <a href={social.url} rel='noopener noreferrer' target='_blank'>
+              <img ref={ref} src={isIntersecting ? social.iconSrc : ''} alt={social.alt} width='20' height='20' />
+            </a>
+          </li>
+        )
+      })}
+    </SocialList>
+  )
+}

package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.d.ts

@@ -0,0 +1,8 @@
+export interface SocialLink {
+    url: string;
+    iconSrc: string;
+    alt: string;
+}
+export interface SocialLinksProps {
+    links: SocialLink[];
+}

package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.js

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

package/dist/src/components/molecules/SocialLinks/SocialLinksProps.types.ts

@@ -0,0 +1,9 @@
+export interface SocialLink {
+  url: string
+  iconSrc: string
+  alt: string
+}
+
+export interface SocialLinksProps {
+  links: SocialLink[]
+}

package/dist/src/components/molecules/SocialLinks/index.d.ts

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

package/dist/src/components/molecules/SocialLinks/index.js

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

package/dist/src/components/molecules/SocialLinks/index.ts

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

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBar.d.ts

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StickyPlanBarStyled, StickyPlanContent, StickySelectButton } from './StickyPlanBar.styled';
+export const StickyPlanBar = ({ activePlan, showStickyBar, onPlanSelect }) => {
+    return (_jsxs(StickyPlanBarStyled, { className: `sticky-plan-bar ${showStickyBar ? 'visible' : ''}`, children: [_jsxs(StickyPlanContent, { className: 'sticky-plan-info', children: [_jsx("span", { className: 'sticky-plan-name', children: activePlan.subscription_type?.name }), _jsxs("div", { className: 'sticky-plan-pricing', children: [_jsx("span", { className: 'sticky-plan-price', children: activePlan.pricing }), _jsx("span", { className: 'sticky-plan-priceLabel', children: activePlan.pricingLabel })] })] }), _jsx(StickySelectButton, { className: 'sticky-select-button', onClick: () => (onPlanSelect ? onPlanSelect(activePlan?.subscription_type?.sku ?? '') : undefined), children: "Select" })] }));
+};

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

@@ -0,0 +1,3 @@
+export declare const StickyPlanBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StickyPlanContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StickySelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

@@ -0,0 +1,69 @@
+import { size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const StickyPlanBarStyled = styled.div `
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  padding: 1rem;
+  gap: 1rem;
+
+  background-color: #ffffff;
+  border-radius: 1rem 1rem 0 0;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+
+  &.visible {
+    transform: translateY(0);
+  }
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`;
+export const StickyPlanContent = styled.div `
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .sticky-plan-name {
+    padding: 0.25rem 0.5rem;
+    background-color: var(--primary-main-light-5);
+    color: var(--primary-main-dark-1);
+    font-size: 12px;
+    font-weight: 700;
+    border-radius: 8px;
+  }
+
+  .sticky-plan-pricing {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sticky-plan-price {
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .sticky-plan-priceLabel {
+    font-size: 12px;
+  }
+`;
+export const StickySelectButton = styled.button `
+  background-color: var(--primary-main-light-1);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.68rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+`;

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

@@ -0,0 +1,72 @@
+import { size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const StickyPlanBarStyled = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  padding: 1rem;
+  gap: 1rem;
+
+  background-color: #ffffff;
+  border-radius: 1rem 1rem 0 0;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+
+  &.visible {
+    transform: translateY(0);
+  }
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`
+
+export const StickyPlanContent = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .sticky-plan-name {
+    padding: 0.25rem 0.5rem;
+    background-color: var(--primary-main-light-5);
+    color: var(--primary-main-dark-1);
+    font-size: 12px;
+    font-weight: 700;
+    border-radius: 8px;
+  }
+
+  .sticky-plan-pricing {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sticky-plan-price {
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .sticky-plan-priceLabel {
+    font-size: 12px;
+  }
+`
+
+export const StickySelectButton = styled.button`
+  background-color: var(--primary-main-light-1);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.68rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+`

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

@@ -0,0 +1,23 @@
+import { StickyPlanBarStyled, StickyPlanContent, StickySelectButton } from './StickyPlanBar.styled'
+import React from 'react'
+import { StickyPlanBarProps } from './StickyPlanBarProps'
+
+export const StickyPlanBar: React.FC<StickyPlanBarProps> = ({ activePlan, showStickyBar, onPlanSelect }) => {
+  return (
+    <StickyPlanBarStyled className={`sticky-plan-bar ${showStickyBar ? 'visible' : ''}`}>
+      <StickyPlanContent className='sticky-plan-info'>
+        <span className='sticky-plan-name'>{activePlan.subscription_type?.name}</span>
+        <div className='sticky-plan-pricing'>
+          <span className='sticky-plan-price'>{activePlan.pricing}</span>
+          <span className='sticky-plan-priceLabel'>{activePlan.pricingLabel}</span>
+        </div>
+      </StickyPlanContent>
+      <StickySelectButton
+        className='sticky-select-button'
+        onClick={() => (onPlanSelect ? onPlanSelect(activePlan?.subscription_type?.sku ?? '') : undefined)}
+      >
+        Select
+      </StickySelectButton>
+    </StickyPlanBarStyled>
+  )
+}

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.d.ts

@@ -0,0 +1,6 @@
+import { SubscriptionPlan } from '../../../components/atoms';
+export interface StickyPlanBarProps {
+    activePlan: SubscriptionPlan;
+    showStickyBar: boolean;
+    onPlanSelect?: (sku: string) => void;
+}

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.js

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

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.ts

@@ -0,0 +1,7 @@
+import { SubscriptionPlan } from '../../../components/atoms'
+
+export interface StickyPlanBarProps {
+  activePlan: SubscriptionPlan
+  showStickyBar: boolean
+  onPlanSelect?: (sku: string) => void
+}

package/dist/src/components/molecules/StickyPlanBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar';
+export * from './StickyPlanBarProps';

package/dist/src/components/molecules/StickyPlanBar/index.js

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar';
+export * from './StickyPlanBarProps';

package/dist/src/components/molecules/StickyPlanBar/index.ts

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar'
+export * from './StickyPlanBarProps'

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);
+  }
+`;