@redneckz/wildless-cms-uni-blocks 0.12.5 → 0.12.7

package/src/components/Calculator/Calculator.tsx

@@ -74,8 +74,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
   const btnDescClassName = isActive
-    ? 'text-l-light text-white'
-    : `text-m-light text-secondary-text`;
+    ? 'text-l font-light text-white'
+    : `text-m font-light text-secondary-text`;
   const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
   const activeIconStyle = isActive ? 'white' : 'normal';

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -15,7 +15,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
     <div className={style('mb-7', className)}>
       {title ? (
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}
         </Text>
       ) : null}

package/src/components/Calculator/Rate.tsx

@@ -23,7 +23,7 @@ export const Rate = JSX<RateProps>(
     fractionDigits = 2,
   }) => (
     <div>
-      <Text size="text-l-light" color="text-secondary-text">
+      <Text size="text-l" font="font-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">

package/src/components/Calculator/UnknownRate.tsx

@@ -9,14 +9,14 @@ export interface UnknownRateProps {
 
 export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
   <div>
-    <Text size="text-l-light" color="text-secondary-text">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
     <div className="mt-1 pt-1 pl-5 pb-1.5">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
     <div className="w-[250px] mt-3.5">
-      <Paragraph size="text-xl-light" color="text-primary-text">
+      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>
     </div>

package/src/components/Calculator/renderFootnote.tsx

@@ -2,7 +2,7 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (
-    <Paragraph size="text-s-light" color="text-secondary-text">
+    <Paragraph size="text-s" font="font-light" color="text-secondary-text">
       {text}
     </Paragraph>
   ) : null;

package/src/components/Calculator/renderProposal.tsx

@@ -1,10 +1,15 @@
 import { Button } from '../../ui-kit/Button/Button';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../../ui-kit/Text/Text';
 
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
-      <div className="text-l-light">Ежемесячный платёж</div>
+      <div>
+        <Text size="text-l" font="font-light">
+          Ежемесячный платёж
+        </Text>
+      </div>
       <div className="text-h3 mb-3">{toLocalNumberFormat(2)(Math.round(monthlyPayment))} ₽</div>
       <Button className="mt-12 w-full" text="Отправить заявку" version="primary" href="#" />
     </div>

package/src/components/Carousel/Carousel.fixture.mobile.tsx

@@ -4,89 +4,227 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
+import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
+import {
+  PRODUCT_CARD,
+  PRODUCT_CARD_SMALL,
+} from '../CarouselProductCard/CarouselProductCard.fixture';
+import { Picture } from '../../model/Picture';
+
+const catalogImage: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 117,
+    height: 117,
+  },
+  title: 'pay-ring',
+};
 
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
-const carouselBlock = {
-  type: 'Carousel',
-  blocks: new Array(6)
-    .fill({
-      type: 'CarouselTariffsCard',
-      content: TARIFFS_CARD,
-    })
-    .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Carousel className="col-span-12" block={carouselBlock} options={options} />
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
-  'arrowsPadded with cyclic': (
+  catalog: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        block={carouselBlock}
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselCatalogCard',
+            content: { ...CATALOG_CARD, image: catalogImage },
+            style: ['col-span-12'],
+          }),
+        }}
         options={options}
-        arrowsPadded={false}
+      />
+    </div>
+  ),
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isBlur={true}
         isCyclic={true}
+        isAlignCenter={true}
+        showArrows={false}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD_HIT,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+          ],
+        }}
+        options={options}
       />
     </div>
   ),
-
-  'no-blur with cyclic': (
+  product: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         isBlur={false}
         isCyclic={true}
-        block={carouselBlock}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'one visible cards with dots': (
+  'mini-product': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={1}
+        isBlur={true}
+        isPadding={false}
+        showArrows={false}
         showDots={true}
-        block={carouselBlock}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD_SMALL,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'only one cards align center': (
+  program: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(1)
-            .fill({
-              type: 'CarouselTariffsCard',
-              content: TARIFFS_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+          blocks: new Array(3).fill({
+            type: 'CarouselProgramsCard',
+            content: BUSINESS_CARD,
+            style: ['col-span-4'],
+          }),
         }}
         options={options}
-        isAlignCenter={true}
       />
     </div>
   ),
-
-  tariffs: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={0}
-        isBlur={true}
-        isCyclic={false}
-        isAlignCenter={true}
-        block={carouselBlock}
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  recommendationsSecondary: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'bank history': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselBankHistoryCard',
+            content: BANK_HISTORY_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>

package/src/components/Carousel/Carousel.fixture.tsx

@@ -97,6 +97,7 @@ export default {
         isBlur={true}
         isCyclic={false}
         isAlignCenter={true}
+        isGap={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6)
@@ -131,7 +132,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={4}
+        visibleItemCount={3}
         isBlur={true}
         block={{
           type: 'Carousel',
@@ -148,6 +149,10 @@ export default {
               type: 'CarouselProductCard',
               content: PRODUCT_CARD_SMALL,
             },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
           ],
         }}
         options={options}

package/src/components/Carousel/Carousel.tsx

@@ -5,12 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
-import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
+import { renderControlButtons } from './renderControlButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -21,19 +20,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
     itemCount,
-    visibleItemCount,
+    visibleItemCount = 0,
     isBlur = true,
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
     isAlignCenter = false,
+    showArrows = true,
+    isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
+    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
     const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
     const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
 
@@ -51,7 +52,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
             snapAlign="snap-start"
-            gap={ITEMS_GAP}
+            gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
             {renderChildren({
@@ -65,17 +66,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
                 : renderBlock,
             })}
           </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            isBlur={isBlur}
-            arrowsPadded={arrowsPadded}
-            onScrollLeft={decreaseActiveIndex}
-            onScrollRight={increaseActiveIndex}
-            hasEdgeBlocks={isBankHistoryCarousel}
-            activeIndex={activeIndex}
-            itemCount={count}
-          />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
+          {renderControlButtons({
+            showArrows,
+            showDots,
+            scrollButtonsProps: {
+              scroll,
+              arrowsPadded,
+              isBlur,
+              onScrollLeft: decreaseActiveIndex,
+              onScrollRight: increaseActiveIndex,
+              hasEdgeBlocks: isBankHistoryCarousel,
+              activeIndex,
+              itemCount: count,
+            },
+            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
+          })}
         </div>
       </BlockWrapper>
     );
@@ -100,16 +105,3 @@ const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default'
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';
-
-const renderDots = (
-  containerRef: { current: HTMLDivElement | null },
-  dotsActiveIndex: number,
-  itemCount: number | undefined,
-) => (
-  <SwipeListControlDots
-    containerRef={containerRef}
-    activeIndex={dotsActiveIndex}
-    dotCount={itemCount}
-    listType={'horizontal-list'}
-  />
-);

package/src/components/Carousel/CarouselContent.ts

@@ -19,4 +19,8 @@ export type CarouselContent = UniBlockContent & {
   isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
+  /** @title отображение кнопок-стрелок*/
+  showArrows?: boolean;
+  /** @title отсупы между карточками*/
+  isGap?: boolean;
 };

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -4,7 +4,7 @@ import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowBu
 import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
-interface CarouselScrollButtonsProps {
+export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
   arrowsPadded: boolean;
   isBlur: boolean;

package/src/components/Carousel/itemsGap.ts

@@ -1 +1 @@
-export const ITEMS_GAP = 4;
+export const ITEMS_GAP = 16;

package/src/components/Carousel/renderControlButtons.tsx

@@ -0,0 +1,24 @@
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
+import {
+  SwipeListControlDots,
+  SwipeListControlDotsProps,
+} from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+
+interface renderControlButtonsProps {
+  showArrows: boolean;
+  showDots: boolean;
+  scrollButtonsProps: CarouselScrollButtonsProps;
+  dotsProps: SwipeListControlDotsProps;
+}
+
+export const renderControlButtons = ({
+  showArrows,
+  showDots,
+  scrollButtonsProps,
+  dotsProps,
+}: renderControlButtonsProps) => {
+  return [
+    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
+  ];
+};

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.mobile.tsx

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
+  title: '1796г.',
+  description:
+    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselBankHistoryCard className="col-span-12" {...BANK_HISTORY_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
 import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -9,6 +10,13 @@ export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
+const options: BlockRendererOptions = {
+  key: 'card-0',
+};
+
+const commonProps = { ...BANK_HISTORY_CARD, options };
+
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
+  active: <CarouselBankHistoryCard activeIndex={0} {...commonProps} />,
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.mobile.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {}
+
+export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
+  ({ title, description, className }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-default">
+      <Headline
+        headlineVersion="S"
+        title={title}
+        description={description}
+        align="text-left"
+        className="text-primary-text"
+        isPadding={false}
+      />
+    </BlockWrapper>
+  ),
+);

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,13 +39,13 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         'border border-solid border-gray group-data-secondary:border-white/50',
         className,
       )}
-      defaultPadding="p-0"
+      padding="p-0"
       {...rest}
     >
       <BaseTile
         className="h-full"
-        padding={padding}
         defaultPadding="p-m"
+        padding={padding}
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
         }

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       className={style('flex w-full overflow-hidden justify-between', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { style } from '../../utils/style';
+import { Text } from '../../ui-kit/Text/Text';
 import { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { FIRST_CELL_CLASSES } from './constants';
@@ -61,11 +62,11 @@ const renderShowMoreToggleButton = ({
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
       >
-        <div className="font-sans text-xs-light font-medium py-3">
+        <Text size="text-xs" font="font-medium">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-        </div>
+        </Text>
       </button>
     </div>
   </div>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -38,7 +38,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs-light font-medium py-[11px]">{link.text}</div>
+          <div className="text-xs font-light font-medium py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -34,7 +35,11 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (
-        <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
+        <div className="mb-7 max-w-[613px] text-center">
+          <Text size="text-xl" font="font-light">
+            {subtitle}
+          </Text>
+        </div>
       ) : null}
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>