@redneckz/wildless-cms-uni-blocks 0.3.95 → 0.3.96

package/mobile/src/ui-kit/Logo/Logo.tsx

@@ -30,7 +30,7 @@ export const Logo = JSX<Partial<LogoProps>>(
       >
         <Img image={{ icon: 'Logo' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
         {hideTitle ? null : (
-          <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
+          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>
         )}

package/mobile/src/ui-kit/Radio/Radio.tsx

@@ -12,7 +12,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         checked={checked}
         onChange={onChange}
       />
-      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
+      {text ? <span className="font-sans ml-3 cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -12,10 +12,8 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
     const { term, setTerm } = context.useSearch();
 
     const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
-    const SearchBarInputClassName = isMobile
-      ? ' placeholder-transparent font-normal'
-      : 'font-light h-full';
+    const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
+    const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
     const inputPlaceholder = isMobile ? 'some search' : undefined;
 
     return (
@@ -63,7 +61,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
               console.log('click');
             }}
           >
-            <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
+            <div className="text-s px-9 py-2.5">Найти</div>
           </Button>
         )}
       </form>

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -14,7 +14,7 @@ export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
 });
 
 const tabDescriptionStyle = (isActive = false) =>
-  `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+  `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
 
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
@@ -32,7 +32,7 @@ const renderTab =
       >
         {tab?.icon ? renderIcon(tab, isActive) : null}
         <div>
-          {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
+          {tab?.title ? <h3 className="m-0 text-l font-medium">{tab?.title}</h3> : null}
           {tab?.description ? (
             <span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
           ) : null}

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -15,7 +15,7 @@ export interface TopItemProps extends TopItemContent {
   dataItemName?: string;
 }
 
-const TEXT_CLASSES = 'font-sans font-light text-sm';
+const TEXT_CLASSES = 'font-sans text-s-light';
 const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
 
 export const TopItem = JSX<TopItemProps>(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.95",
+  "version": "0.3.96",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.mobile.tsx

@@ -11,7 +11,7 @@ export const Accordion = JSX<AccordionProps>(
     return (
       <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-        {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
+        {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (

package/src/components/Accordion/Accordion.tsx

@@ -27,12 +27,12 @@ export const Accordion = JSX<AccordionProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`p-[50px] font-sans bg-white text-primary-text ${className}`}
+        className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
         {...rest}
       >
         {title ? (
           <Heading
-            headingType="h4"
+            headingType="h3"
             className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
             title={title}
           />

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -23,7 +23,7 @@ export const AccordionItem = JSX<AccordionItemProps>(
           onClick={handleToggle}
         >
           <span
-            className={`text-m-title-xs pr-2.5 font-medium flex ${
+            className={`text-m-title-xs font-medium pr-2.5 flex ${
               hasContent ? 'group-hover:text-primary-main' : ''
             }`}
           >
@@ -32,7 +32,7 @@ export const AccordionItem = JSX<AccordionItemProps>(
             ) : null}
             {label}
           </span>
-          {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+          {hasContent ? <Img className="w-6" image={icon} width="24" height="24" asSVG /> : null}
         </button>
         {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
       </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -17,12 +17,12 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
   return (
     <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
       <button
-        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
-            ${hasContent ? 'group cursor-pointer' : ''}
+        className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full
+            font-sans text-h6 ${hasContent ? 'group cursor-pointer' : ''}
           `}
         onClick={handleToggle}
       >
-        <span className={`text-xl-light pr-2.5 font-medium`}>{label}</span>
+        <span className={`text-xl font-medium pr-2.5`}>{label}</span>
         {hasContent ? (
           <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
         ) : null}

package/src/components/Accordion/AccordionItemInner.tsx

@@ -5,7 +5,7 @@ import type { AccordionItemProps } from './AccordionItem';
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
   return (
     <div className="grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden">
-      {renderBlocksList({ context, blocks, className: '!p-0 mb-5' })}
+      {renderBlocksList({ context, blocks, className: '!p-0 mb-3.5' })}
     </div>
   );
 });

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -8,7 +8,12 @@
         "benefitType": "description"
       },
       "icon": {
-        "icon": "ClockIcon"
+        "icon": "ClockIcon",
+        "format": "webp",
+        "size": {
+          "width": 70,
+          "height": 70
+        }
       }
     },
     {
@@ -18,7 +23,12 @@
         "benefitType": "description"
       },
       "icon": {
-        "icon": "SignDocsIcon"
+        "icon": "SignDocsIcon",
+        "format": "webp",
+        "size": {
+          "width": 70,
+          "height": 70
+        }
       }
     }
   ]

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,6 +1,7 @@
 import { context } from '../../react/setup-fixture';
 
 import { BenefitsBlock } from './BenefitsBlock';
+import type { Picture } from '../../model/Picture';
 
 const itemsList = [
   'Комиссия за выдачу',
@@ -9,8 +10,18 @@ const itemsList = [
   'частичное погашение кредита',
 ];
 
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 70,
+    height: 70,
+  },
+};
+
 export default {
-  description: (
+  'desc-img': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
         context={context}
@@ -23,7 +34,7 @@ export default {
               name: 'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
               benefitType: 'text',
             },
-            icon: { icon: 'ClockIcon' },
+            icon: image,
           },
           {
             label: 'Оформление по паспорту',
@@ -31,7 +42,7 @@ export default {
               name: 'Обеспечение не требуется. Кредит можно получить на любые цели',
               benefitType: 'text',
             },
-            icon: { icon: 'SignDocsIcon' },
+            icon: image,
           },
           {
             label: 'Без залога и поручительства',
@@ -39,7 +50,7 @@ export default {
               name: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
               benefitType: 'text',
             },
-            icon: { icon: 'ComfortableCompIcon' },
+            icon: image,
           },
           {
             label: 'Деньги за 3 дня',
@@ -47,12 +58,56 @@ export default {
               name: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
               benefitType: 'text',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: image,
           },
         ]}
       />
     </div>
   ),
+  'desc-icon': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            description: {
+              name: 'Комиссия за выдачу ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'MoneyIcon' },
+          },
+          {
+            label: 'Оформление',
+            description: {
+              name: 'Обеспечение ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'PersonalCardIcon' },
+          },
+          {
+            label: 'Без залога ',
+            description: {
+              name: 'Единовременное перечисление ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'CalendarTickIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              name: 'Рассмотрение  ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'GlobalIcon' },
+          },
+        ]}
+      />
+    </div>
+  ),
+
   list: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -3,25 +3,20 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItem, BenefitsBlockContent } from './BenefitsBlockContent';
+import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
 import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', headingType = 'h2', title, benefitList, ...rest }) => {
+  ({ className = '', title, benefitList, ...rest }) => {
     return (
       <BlockWrapper
         className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
         {...rest}
       >
         {title ? (
-          <Heading
-            headingType={headingType}
-            as="h2"
-            className="max-w-[47rem] text-center"
-            title={title}
-          />
+          <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
         ) : null}
         {benefitList?.length ? renderBenefits(benefitList) : null}
       </BlockWrapper>
@@ -29,29 +24,29 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
   },
 );
 
-const renderBenefits = (benefits: BenefitItem[]) => {
+const renderBenefits = (benefits: BenefitItemProps[]) => {
   return (
-    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-9">
+    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
       {benefits.map(renderStep)}
     </div>
   );
 };
 
-const renderStep = (benefit: BenefitItem, i: number) => {
+const renderStep = (benefit: BenefitItemProps, i: number) => {
   const description = benefit?.description || undefined;
 
   return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-[46px]">
-      {benefit?.icon ? (
+    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+      {benefit?.icon?.icon ? (
         <Img
-          className="h-[70px] w-[70px] min-w-[70px] min-h-[70px] mr-5"
+          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider"
           image={benefit.icon}
-          width="70"
-          height="70"
+          asSVG
         />
       ) : null}
-      <div>
-        {benefit?.label ? <h3 className="font-medium text-xl-light m-0">{benefit.label}</h3> : null}
+      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+      <div className="ml-5">
+        {benefit?.label ? <h3 className="text-h6 m-0">{benefit.label}</h3> : null}
         {renderDescription(description)}
       </div>
     </div>

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TitleProp } from '../../model/HeadlineType';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -37,7 +37,7 @@ export type DescriptionType = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitItem {
+export interface BenefitItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
@@ -48,10 +48,10 @@ export interface BenefitItem {
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = HeadingCommonProps & {
+export type BenefitsBlockContent = TitleProp & {
   /**
    * @title Список преимуществ
    * @maxItems 6
    */
-  benefitList?: BenefitItem[];
+  benefitList?: BenefitItemProps[];
 };

package/src/components/Bonus/Bonus.tsx

@@ -1,21 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { BonusContent } from './BonusContent';
+import { Headline } from '../Headline/Headline';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>((props) => {
-  const { className = '', title, description, bonusItems, ...rest } = props;
+  const { context, className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper
+      className={`font-sans bg-white p-[50px] pb-9 ${className}`}
+      context={context}
+      {...rest}
+    >
       <div className="container">
-        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
-        {description ? (
-          <div className="text-xl-light text-center mt-[10px]">{description}</div>
-        ) : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems
             ? bonusItems.map((_, i) => {

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,24 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { getElementsColsValue } from './getElementsColsValue';
+import { Headline } from '../Headline/Headline';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, ...rest }) => {
+  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => {
     return (
       <BlockWrapper
         className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
+        context={context}
         {...rest}
       >
-        {title ? <Heading headingType="h3" className="mb-[10px]" title={title} /> : null}
-        {subtitle ? <span className="text-md font-normal">{subtitle}</span> : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={subtitle}
+          headlineVersion="M"
+          align="center"
+        />
         {bonusBenefits?.length ? (
-          <div className={`grid gap-1 ${getElementsColsValue(className)}`}>
+          <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
             {bonusBenefits.map(renderBonusBenefit)}
           </div>
         ) : null}

package/src/components/Calculator/Calculator.fixture.tsx

@@ -75,7 +75,7 @@ export default {
             nav: {
               title: 'Ипотека с господдержкой',
               description: 'Ставка от 6%, срок до 30 лет',
-              icon: { icon: 'WalletAdd2Icon' },
+              icon: { icon: 'StateMortgageIcon' },
             },
             calculatorBlock: MORTGAGE_CALCULATOR_BLOCK,
           },

package/src/components/Calculator/Calculator.tsx

@@ -76,7 +76,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-l text-white' : `text-m-md`;
+  const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (
@@ -85,7 +85,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex
+      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img
@@ -96,7 +96,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
         asSVG
       />
       <div className="border-0">
-        <div className={`font-medium ${btnTitleClassName}`}>{tab?.title}</div>
+        <div className={`${btnTitleClassName}`}>{tab?.title}</div>
         <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
       </div>
     </button>

package/src/components/Catalog/Catalog.tsx

@@ -2,11 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { CatalogCard } from './CatalogCard';
 import type { CatalogCardType, CatalogContent } from './CatalogContent';
+import { Headline } from '../Headline/Headline';
 
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
@@ -24,10 +23,16 @@ export const Catalog = JSX<CatalogProps>(
         className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
-        {description ? <Description className="mb-6" description={description} /> : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         <div
-          className="flex duration-1000 gap-3.5"
+          className="flex duration-1000 gap-3.5 mt-8"
           style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
           role="list"
         >

package/src/components/Catalog/CatalogCard.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -28,11 +28,9 @@ export const CatalogCard = JSX<CatalogCardProps>(
         {title ? (
           <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
         ) : null}
-        {description ? (
-          <div className="text-m-md text-left mb-4 font-light">{description}</div>
-        ) : null}
+        {description ? <div className="text-m-light text-left mb-4">{description}</div> : null}
         {colors?.length ? (
-          <div className="flex mb-4 text-m-md text-secondary-text font-light">
+          <div className="flex mb-4 text-m-light text-secondary-text">
             <div className="mr-1.5">Доступные цвета: </div>
             {colors.map(renderColorOption)}
           </div>

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -64,7 +64,7 @@ const renderShowMoreToggleButton = ({
           onClick={onClick}
           className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
         >
-          <div className="font-sans font-medium text-xs py-[11px]">
+          <div className="font-sans text-xs-light font-medium py-[11px]">
             {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
           </div>
         </button>

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -15,7 +15,7 @@ export interface HeaderCellProps {
 
 const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
 const subtitleStyle = (isFillGradient = false): string =>
-  `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+  `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (

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="font-medium text-xs py-[11px]">{link.text}</div>
+          <div className="text-xs-light font-medium py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -26,7 +26,7 @@ const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
     (
-      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+      <div key={String(i)} className="flex justify-between text-s py-3.5">
         <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
           {rowHeader}
         </div>

package/src/components/ComparisonTable/TableCell.tsx

@@ -29,9 +29,9 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 });
 
 const labelStyle = (isFillGradient = false): string =>
-  `text-xl-light font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+  `text-xl m-0 ${isFillGradient ? 'text-white' : ''}`;
 const descriptionStyle = (isFillGradient = false): string =>
-  `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+  `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
 
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">

package/src/components/ComparisonTable/TableColumn.tsx

@@ -51,7 +51,7 @@ const renderButton = ({ header, buttonVersion }) => (
     href={header.link.href}
     target={header.link.target}
     version={buttonVersion}
-    className="font-medium text-m-sm mt-4 py-[11px]"
+    className="text-s font-medium mt-4 py-[11px]"
   >
     {header.link.text}
   </Button>
@@ -62,7 +62,7 @@ const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
     <a
       role="link"
       onClick={onToggleColumn}
-      className={`font-medium text-m-sm cursor-pointer ${
+      className={`text-s font-medium cursor-pointer ${
         isFillGradient ? 'text-white/80' : 'text-primary-main'
       }`}
     >

package/src/components/ComparisonTable/TableRow.tsx

@@ -15,7 +15,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+  `text-s py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
     isLastRow ? 'border-b-0' : 'border-solid'
   }`;