@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.tsx

@@ -0,0 +1,133 @@
+import { FeatureItem, PlanCard } from '../../atoms'
+import {
+  FeaturesGrid,
+  FeaturesSection,
+  PlanSelector,
+  PlanWrapper,
+  PlansWrapper,
+  PricingContainerStyled,
+  SelectorButton
+} from './PricingPlansPage.styled'
+import { PricingPageHeader } from '../../organisms'
+import { PricingPlansPageProps } from './PricingPlansPageProps'
+import React from 'react'
+import { StickyPlanBar } from '../../molecules/StickyPlanBar'
+import { throttle } from '../../../utils/throttle'
+
+export const PricingPlansPage: React.FC<PricingPlansPageProps> = ({
+  subscriptionPlans,
+  features,
+  onPlanSelect,
+  headerDivider,
+  siteName = 'Legalfinity',
+  phoneNumber,
+  isRedirectingToPayment
+}) => {
+  const [activePlanIndex, setActivePlanIndex] = React.useState(0)
+  const plansWrapperRef = React.useRef<HTMLDivElement | null>(null)
+  const lastScrollYRef = React.useRef(0)
+  const [showStickyBar, setShowStickyBar] = React.useState(false)
+
+  const activePlan = subscriptionPlans[activePlanIndex]
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (!plansWrapperRef.current) return
+
+      const currentScrollY = window.scrollY
+      const isMobile = window.innerWidth < 720
+
+      if (!isMobile) {
+        if (showStickyBar) {
+          setShowStickyBar(false)
+        }
+        return
+      }
+
+      const isScrollingUp = currentScrollY < lastScrollYRef.current - 10 ? 'up' : null
+
+      const scrollDirection = currentScrollY > lastScrollYRef.current + 10 ? 'down' : isScrollingUp
+      if (!scrollDirection) return
+
+      const targetRect = plansWrapperRef.current.getBoundingClientRect()
+      const isPastWrapper = targetRect.bottom < 400
+
+      if (scrollDirection === 'down' && isPastWrapper) {
+        if (!showStickyBar) {
+          setShowStickyBar(true)
+        }
+      } else if (scrollDirection === 'up' || !isPastWrapper) {
+        if (showStickyBar && !isPastWrapper) {
+          setShowStickyBar(false)
+        }
+      }
+
+      lastScrollYRef.current = currentScrollY
+    }
+
+    const handleResize = () => {
+      if (window.innerWidth >= 720) {
+        setShowStickyBar(false)
+      }
+    }
+
+    const throttledHandleScroll = throttle(handleScroll, 100)
+
+    window.addEventListener('scroll', throttledHandleScroll)
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [showStickyBar])
+
+  return (
+    <>
+      <PricingPageHeader siteName={siteName} phoneNumber={phoneNumber} />
+      {headerDivider}
+      {subscriptionPlans?.length > 0 && (
+        <PricingContainerStyled>
+          <PlanSelector>
+            {subscriptionPlans.map((plan, index) => (
+              <SelectorButton
+                key={`selector-${plan?.pricingLabel}`}
+                isActive={index === activePlanIndex}
+                onClick={() => setActivePlanIndex(index)}
+                dataQa={`selector-${plan.subscription_type?.name.replaceAll(' ', '')}`}
+              >
+                {plan?.subscription_type?.name}
+              </SelectorButton>
+            ))}
+          </PlanSelector>
+          <PlansWrapper ref={plansWrapperRef}>
+            {subscriptionPlans.map((plan, index) => (
+              <PlanWrapper
+                key={plan.pricingLabel}
+                isHighlighted={plan.highlightPlan}
+                isActive={index === activePlanIndex}
+                className={`pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`}
+              >
+                <PlanCard
+                  isRedirectingToPayment={isRedirectingToPayment}
+                  onSelect={onPlanSelect ?? (() => {})}
+                  plan={plan}
+                />
+              </PlanWrapper>
+            ))}
+          </PlansWrapper>
+          {features && features.length > 0 && (
+            <FeaturesSection>
+              <FeaturesGrid>
+                {features.map((feature) => (
+                  <FeatureItem feature={feature} key={feature.description} />
+                ))}
+              </FeaturesGrid>
+            </FeaturesSection>
+          )}
+          <StickyPlanBar activePlan={activePlan} showStickyBar={showStickyBar} onPlanSelect={onPlanSelect} />
+        </PricingContainerStyled>
+      )}
+    </>
+  )
+}

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.d.ts

@@ -0,0 +1,10 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms';
+export interface PricingPlansPageProps {
+    subscriptionPlans: SubscriptionPlan[];
+    features?: FeatureItemProp[];
+    onPlanSelect?: (sku: string) => void;
+    headerDivider?: React.ReactNode;
+    siteName?: string;
+    phoneNumber?: string;
+    isRedirectingToPayment?: boolean;
+}

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.js

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

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.ts

@@ -0,0 +1,11 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms'
+
+export interface PricingPlansPageProps {
+  subscriptionPlans: SubscriptionPlan[]
+  features?: FeatureItemProp[]
+  onPlanSelect?: (sku: string) => void
+  headerDivider?: React.ReactNode
+  siteName?: string
+  phoneNumber?: string
+  isRedirectingToPayment?: boolean
+}

package/dist/src/components/pages/PricingPlansPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage';
+export * from './PricingPlansPageProps';

package/dist/src/components/pages/PricingPlansPage/index.js

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage';
+export * from './PricingPlansPageProps';

package/dist/src/components/pages/PricingPlansPage/index.ts

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage'
+export * from './PricingPlansPageProps'

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

@@ -11,3 +11,5 @@ export * from './RatafiaPricingPage';
 export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingPage';
+export * from './PricingPlansPage';

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

@@ -11,3 +11,5 @@ export * from './RatafiaPricingPage';
 export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
+export * from './PricingPage';
+export * from './PricingPlansPage';

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

@@ -11,3 +11,5 @@ export * from './RatafiaPricingPage'
 export * from './RatafiaResultPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'
+export * from './PricingPage'
+export * from './PricingPlansPage'

package/dist/src/components/sections/AppHeader/AppHeader.d.ts

@@ -0,0 +1,4 @@
+import { AppHeaderProps } from './AppHeaderProps';
+import React from 'react';
+import './AppHeader.scss';
+export declare const AppHeader: React.FC<AppHeaderProps>;

package/dist/src/components/sections/AppHeader/AppHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
+import { DesktopMenu, MobileMenu } from '../../organisms';
+import { Logo } from '../../atoms';
+import './AppHeader.scss';
+export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
+    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
+};

package/dist/src/components/sections/AppHeader/AppHeader.scss

@@ -0,0 +1,35 @@
+.navigation-pane__user-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .login-button {
+    margin-right: 1rem;
+  }
+  .navigation-pane__user-name {
+    margin-right: 1rem;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 6rem;
+  }
+
+  .longer-text {
+    width: 11rem;
+    margin-right: 1.5rem;
+    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+    color: var(--button-hover);
+  }
+
+  .go-to-dashboard-button,
+  .go-to-free-account-button {
+    background-color: transparent;
+
+    &:hover {
+      background-color: #e4f8f3;
+    }
+  }
+  .navigation-pane__button {
+    width: 100%;
+  }
+}

package/dist/src/components/sections/AppHeader/AppHeader.styled.d.ts

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

package/dist/src/components/sections/AppHeader/AppHeader.styled.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+export const AppHeaderStyled = styled.header `
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`;
+export const AppHeaderWrapper = styled.span `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`;

package/dist/src/components/sections/AppHeader/AppHeader.styled.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const AppHeaderStyled = styled.header`
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`
+export const AppHeaderWrapper = styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`

package/dist/src/components/sections/AppHeader/AppHeader.tsx

@@ -0,0 +1,58 @@
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled'
+import { DesktopMenu, MobileMenu } from '../../organisms'
+import { AppHeaderProps } from './AppHeaderProps'
+import { Logo } from '../../atoms'
+import React from 'react'
+import './AppHeader.scss'
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+  siteName = 'LawDistrict',
+  homeUrl = '/',
+  sitePhone,
+  scheduleText,
+  headerFullWidth,
+  menuList,
+  toggleMenuHelpOpen,
+  toggleMenuPersonalOpen,
+  isHelpActive,
+  isPersonalActive,
+  userActions,
+  helpTriggerImage,
+  userTriggerImage,
+  handleClickLogo,
+  headerClassnames,
+  closeText = 'Close',
+  showTopBar
+}) => {
+  return (
+    <AppHeaderStyled className={headerClassnames}>
+      <AppHeaderWrapper
+        itemScope
+        itemType='https://schema.org/Brand'
+        className={`${headerFullWidth ? '--no-grid' : 'wrapper'}`}
+      >
+        <a className='header__logo' onClick={(event) => handleClickLogo(event, homeUrl)} href={homeUrl}>
+          <Logo siteName={siteName} width='188' height='32' />
+        </a>
+
+        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
+
+        <MobileMenu
+          closeText={closeText}
+          helpTriggerImage={helpTriggerImage}
+          isHelpActive={isHelpActive}
+          isPersonalActive={isPersonalActive}
+          toggleMenuHelpOpen={toggleMenuHelpOpen}
+          toggleMenuPersonalOpen={toggleMenuPersonalOpen}
+          userTriggerImage={userTriggerImage}
+          homeUrl={homeUrl}
+          menuList={menuList}
+          scheduleText={scheduleText}
+          sitePhone={sitePhone}
+          userActions={userActions}
+          showTopBar={showTopBar}
+        />
+      </AppHeaderWrapper>
+    </AppHeaderStyled>
+  )
+}

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -0,0 +1,26 @@
+export interface MenuListItem {
+    title: string;
+    url: string;
+}
+export interface AppHeaderProps {
+    siteName: string;
+    homeUrl: string;
+    sitePhone: string;
+    scheduleText: string;
+    headerFullWidth: boolean;
+    menuList?: {
+        title: string;
+        items: MenuListItem[];
+    };
+    toggleMenuHelpOpen: () => void;
+    toggleMenuPersonalOpen: () => void;
+    isHelpActive: boolean;
+    isPersonalActive: boolean;
+    userActions: React.ReactNode;
+    helpTriggerImage: string;
+    userTriggerImage: string;
+    handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void;
+    headerClassnames: string;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/sections/AppHeader/AppHeaderProps.js

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

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -0,0 +1,27 @@
+export interface MenuListItem {
+  title: string
+  url: string
+}
+
+export interface AppHeaderProps {
+  siteName: string
+  homeUrl: string
+  sitePhone: string
+  scheduleText: string
+  headerFullWidth: boolean
+  menuList?: {
+    title: string
+    items: MenuListItem[]
+  }
+  toggleMenuHelpOpen: () => void
+  toggleMenuPersonalOpen: () => void
+  isHelpActive: boolean
+  isPersonalActive: boolean
+  userActions: React.ReactNode
+  helpTriggerImage: string
+  userTriggerImage: string
+  handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void
+  headerClassnames: string
+  closeText: string
+  showTopBar?: boolean
+}

package/dist/src/components/sections/AppHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './AppHeader'
+export * from './AppHeaderProps'

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.d.ts

@@ -1,8 +1,8 @@
-import { type BenefitRatafiaCardProps } from '../../atoms';
+import { type BenefitCardProps } from '../../atoms';
 import React from 'react';
 export interface BenefitsRatafiaSectionProps {
     title: string;
     description: string;
     descriptionRichtext: React.ReactNode;
-    benefits: BenefitRatafiaCardProps[];
+    benefits: BenefitCardProps[];
 }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.ts

@@ -1,9 +1,9 @@
-import { type BenefitRatafiaCardProps } from '../../atoms'
+import { type BenefitCardProps } from '../../atoms'
 import React from 'react'
 
 export interface BenefitsRatafiaSectionProps {
   title: string
   description: string
   descriptionRichtext: React.ReactNode
-  benefits: BenefitRatafiaCardProps[]
+  benefits: BenefitCardProps[]
 }

package/dist/src/components/sections/CardBoxSection/CardBoxSection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type CardBoxSectionProps } from './CardBoxSectionProps';
+export declare const CardBoxMinimalSection: React.FC<CardBoxSectionProps>;
+export declare const CardBoxFeaturedSection: React.FC<CardBoxSectionProps>;

package/dist/src/components/sections/CardBoxSection/CardBoxSection.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled';
+import { CardBox } from '../../atoms';
+export const CardBoxMinimalSection = ({ cards }) => {
+    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => _jsx(CardBox, { text: text, icon: icon }, id)) }));
+};
+export const CardBoxFeaturedSection = ({ cards }) => {
+    return (_jsx(CardBoxFeaturedSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon, padding: '16px', gap: '0.5rem', borderRadius: '8px' }, id))) }));
+};

package/dist/src/components/sections/CardBoxSection/CardBoxSection.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const CardBoxMinimalSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBoxFeaturedSectionStyled: 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/sections/CardBoxSection/CardBoxSection.styled.js

@@ -0,0 +1,33 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardBoxMinimalSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;
+export const CardBoxFeaturedSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;

package/dist/src/components/sections/CardBoxSection/CardBoxSection.styled.ts

@@ -0,0 +1,35 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardBoxMinimalSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`
+
+export const CardBoxFeaturedSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`

package/dist/src/components/sections/CardBoxSection/CardBoxSection.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled'
+import { CardBox } from '../../atoms'
+import { type CardBoxSectionProps } from './CardBoxSectionProps'
+
+export const CardBoxMinimalSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxMinimalSectionStyled>
+      {cards?.map(({ text, icon, id }) => <CardBox key={id} text={text} icon={icon} />)}
+    </CardBoxMinimalSectionStyled>
+  )
+}
+
+export const CardBoxFeaturedSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxFeaturedSectionStyled>
+      {cards?.map(({ text, icon, id }) => (
+        <CardBox key={id} text={text} icon={icon} padding='16px' gap='0.5rem' borderRadius='8px' />
+      ))}
+    </CardBoxFeaturedSectionStyled>
+  )
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.d.ts

@@ -0,0 +1,4 @@
+import { CardBoxProps } from 'src/components/atoms';
+export interface CardBoxSectionProps {
+    cards: CardBoxProps[];
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.js

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

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.ts

@@ -0,0 +1,5 @@
+import { CardBoxProps } from 'src/components/atoms'
+
+export interface CardBoxSectionProps {
+  cards: CardBoxProps[]
+}

package/dist/src/components/sections/CardBoxSection/index.d.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';
+export { type CardBoxSectionProps } from './CardBoxSectionProps';

package/dist/src/components/sections/CardBoxSection/index.js

@@ -0,0 +1 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';

package/dist/src/components/sections/CardBoxSection/index.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection'
+export { type CardBoxSectionProps } from './CardBoxSectionProps'

package/dist/src/components/sections/CardStorySection/CardStorySection.styled.js

@@ -7,9 +7,10 @@ export const CardStorySectionStyled = styled.div `
   .card-story-section {
     &__title {
       font-weight: 700;
-      font-size: 1.8rem;
+      font-size: 1.75rem;
       color: var(--neutral-neutral-1);
       font-family: var(--font-sans);
+      letter-spacing: -0.3px;
       padding-bottom: 1.5rem;
     }
     &__text {

package/dist/src/components/sections/CardStorySection/CardStorySection.styled.ts

@@ -8,9 +8,10 @@ export const CardStorySectionStyled = styled.div`
   .card-story-section {
     &__title {
       font-weight: 700;
-      font-size: 1.8rem;
+      font-size: 1.75rem;
       color: var(--neutral-neutral-1);
       font-family: var(--font-sans);
+      letter-spacing: -0.3px;
       padding-bottom: 1.5rem;
     }
     &__text {