@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/mobile/src/components/ApplicationForm/renderWedTextarea.tsx

@@ -0,0 +1,32 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { Text } from '../../ui-kit/Text/Text';
+import { WedFormState } from './WedFormState';
+import { style } from '../../utils/style';
+
+const activeTextareaStyles =
+  'hover:border-primary-hover active:focus:border-primary-text focus:border-primary-text';
+export const renderWedTextarea = (field: FormFieldRegisterer<WedFormState>) => {
+  const textField = field('text');
+
+  return (
+    <label>
+      <div className="mb-xs">
+        <Text size="text-m" font="font-light">
+          Обращение
+        </Text>
+      </div>
+      <textarea
+        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+        className={style(
+          'block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray',
+          activeTextareaStyles,
+        )}
+        value={textField.value}
+        onInput={
+          ((e: { target?: { value?: string } }) =>
+            textField.onChange && textField.onChange(e.target?.value || '')) as any
+        }
+      />
+    </label>
+  );
+};

package/mobile/src/components/Bonus/Bonus.tsx

@@ -6,11 +6,12 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
+import { AlignStyles } from '../../model/AlignStyles';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
-  ({ className = '', title, description, bonusItems = [], ...rest }) => (
+  ({ className = '', title, description, bonusItems = [], align = AlignStyles, ...rest }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
@@ -19,13 +20,14 @@ export const Bonus = JSX<BonusProps>(
           title={title}
           description={description}
           headlineVersion="M"
+          align={align}
         />
         <div className="flex flex-wrap w-full">
           {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
+                  className="mb-3xl last:mb-0 sm:space-y-xs flex flex-col grow w-full p-4xl sm:p-m @xl:w-[49%] border border-gray"
                 >
                   <div className="grow">
                     <Headline
@@ -61,7 +63,9 @@ const renderBonusCount = (_: BonusCountDef) => (
     {_.bonusCount ? (
       // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
       <div className="shrink-0 -mb-10">
-        <span className="font-mohave text-title-extra gradient-color-text">{_.bonusCount}</span>
+        <span className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
+          {_.bonusCount}
+        </span>
       </div>
     ) : null}
     {_.bonusName ? (

package/mobile/src/components/Bonus/BonusContent.ts

@@ -3,6 +3,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Изображение
@@ -44,4 +45,5 @@ export type BonusContent = UniBlockContent &
   HeadlineCommonProps & {
     /** @title Список плиток */
     bonusItems?: BonusItem[];
+    align?: TextAlign;
   };

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -18,12 +18,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <Headline
-        className="mb-4xl sm:mb-3xl"
-        title={title}
-        description={subtitle}
-        headlineVersion="M"
-      />
+      <Headline title={title} description={subtitle} headlineVersion="M" />
       {bonusBenefits?.length
         ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
         : null}

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -1,7 +1,7 @@
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { AlignStyles } from '../../model/AlignStyles';
 import { BonusBenefit } from './BonusBenefitsBlockContent';
 import { bonusBenefitStyles } from './bonusBenefitStyles';
 
@@ -15,13 +15,13 @@ export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i
     )}
   >
     {title ? (
-      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+      <Text size="text-h6" font="font-normal" align={AlignStyles}>
         {title}
       </Text>
     ) : null}
     {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
     {description ? (
-      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+      <Text size="text-h6" font="font-normal" align={AlignStyles}>
         {description}
       </Text>
     ) : null}

package/mobile/src/components/Calculator/BonusCalculatorForm.tsx

@@ -25,8 +25,8 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма покупок в категории путешествия, ₽',
             min: minSumTravel,

package/mobile/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -36,8 +36,8 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,

package/mobile/src/components/Calculator/CreditCalculatorForm.tsx

@@ -47,8 +47,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     });
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -44,8 +44,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,

package/mobile/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -48,8 +48,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
     );
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -55,7 +55,7 @@ export const CardTransfer = JSX<CardTransferProps>(
         {title ? (
           <Heading
             className="pb-lg xl:pb-4xl self-start xl:self-center"
-            headingType="h2"
+            headingType="h3"
             title={title}
           />
         ) : null}

package/mobile/src/components/Carousel/Carousel.example.json

@@ -3,6 +3,7 @@
   "arrowsPadded": true,
   "isCycle": false,
   "isPadding": true,
+  "isGap": true,
   "isAlignCenter": false,
   "cardSize": "normal"
 }

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

@@ -90,6 +90,7 @@ Carousel.childrenTypes = [
   'CarouselRichTextCard',
   'CarouselInvestmentCard',
   'CarouselEventCard',
+  'ProductBlock',
 ];
 
 Carousel.childSchema = () => ({

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -10,12 +10,12 @@ import { titleSize } from './titleSize';
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
 const layerBaseStyle = 'z-10 border border-solid w-full h-full';
-const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
+const layerStyle = style(layerBaseStyle, 'absolute hidden @xl:block border-transparent');
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className, title, description, button, ...rest }) => (
     <BlockWrapper
-      className={style('sm:pl-6xl sm:pb-4xl', className)}
+      className={style('sm:pl-6xl sm:pb-4xl @container-normal', className)}
       defaultPadding="p-0"
       {...rest}
     >
@@ -24,7 +24,10 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
         <div
-          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+          className={style(
+            layerBaseStyle,
+            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light',
+          )}
         >
           <Headline
             title={title}

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
@@ -17,37 +18,60 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 };
 
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
-  ({ className = '', title, description, image, price, button, colors, ...rest }) => (
+  ({
+    className = '',
+    title,
+    description,
+    image,
+    price,
+    button,
+    colors = [],
+    align = 'text-left',
+    padding,
+    ...rest
+  }) => (
     <BlockWrapper
       className={style('flex flex-col justify-left', className)}
       defaultPadding="p-2xl"
       {...rest}
     >
-      {image?.src ? <Img className="flex justify-center mb-xl" image={image} /> : null}
-      <Headline
-        title={title}
-        description={description}
-        headlineVersion="XS"
-        isEmbedded={true}
-        align="text-left"
-        className="mb-m"
-      />
-      {colors?.length ? (
-        <div className="flex text-secondary-text mb-m">
-          <div className="mr-xs">
-            <Text size="text-s" align="text-left" font="font-light">
-              Цвета:
-            </Text>
+      <BaseTile
+        className="h-full"
+        padding={padding}
+        title={
+          title ? (
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          ) : null
+        }
+        rightImage={
+          image?.src ? (
+            <Img className="flex justify-center align-center mb-xl" image={image} />
+          ) : null
+        }
+        buttons={renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+      >
+        {colors?.length ? (
+          <div className="flex text-secondary-text mb-m">
+            <div className="mr-xs">
+              <Text size="text-s" align="text-left" font="font-light">
+                Цвета:
+              </Text>
+            </div>
+            {colors.map(renderColorOption)}
           </div>
-          {colors.map(renderColorOption)}
-        </div>
-      ) : null}
-      {price ? (
-        <Text size="text-h3" align="text-left">
-          {price}&nbsp;₽
-        </Text>
-      ) : null}
-      {renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+        ) : null}
+        {price ? (
+          <Text size="text-h3" align="text-left">
+            {price}&nbsp;₽
+          </Text>
+        ) : null}
+      </BaseTile>
     </BlockWrapper>
   ),
 );

package/mobile/src/components/CarouselLinks/CarouselLinkButton.tsx

@@ -3,12 +3,12 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
+import { Text } from '../../ui-kit/Text/Text';
 
-const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
-  text-l font-light bg-white text-primary-text flex
-  justify-between items-center group-hover/link:text-primary-main z-10`;
+const LINK_CLASS_NAME = `absolute border
+  bg-white flex justify-between group-hover/link:text-primary-main`;
 
-const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
+const LINK_BORDER_CLASS_NAME = 'hidden xl:block absolute w-full h-full border border-white';
 
 export type CarouselLinkButtonProps = LinkProps & {
   className?: string;
@@ -22,31 +22,33 @@ export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
     return text ? (
       <div
         className={style(
-          'flex max-w-sm relative group/link cursor-pointer w-64 h-16 sm:w-[47%] sm:h-20 sm:mr-m',
+          'flex relative group/link pl-s pb-s min-w-[16rem] xl:min-w-[20rem]',
           className,
         )}
       >
-        <a
-          className={style(
-            LINK_CLASS_NAME,
-            'rounded-md sm:rounded-none w-full h-12 sm:ml-s sm:w-full sm:h-auto',
-          )}
-          role="link"
-          {...adjustedProps}
-        >
-          <div className="p-0.5">{text}</div>
-          <div className="w-6 h-6 hidden sm:block">
+        <div className="relative min-h-16 w-full">
+          <a
+            className={style(
+              LINK_CLASS_NAME,
+              'sm:rounded-md rounded-none w-full px-xl py-lg whitespace-nowrap',
+            )}
+            role="link"
+            {...adjustedProps}
+          >
+            <Text size="text-l" font="font-light" color="text-primary-text">
+              {text}
+            </Text>
             <Img
-              className="w-4 h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
+              className="group-hover/link:brightness-100 hidden xl:block ml-2xs"
               image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
-              imageClassName="group-hover/link:text-primary-main"
+              imageClassName="group-hover/link:text-primary-main hidden xl:block"
               width="24"
               height="24"
             />
-          </div>
-        </a>
-        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mx-1.5 mt-1.5'} />
-        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mt-3 mr-3'} />
+          </a>
+          <div className={style(LINK_BORDER_CLASS_NAME, '-bottom-1.5 -left-1.5')} />
+          <div className={style(LINK_BORDER_CLASS_NAME, '-bottom-3 -left-3')} />
+        </div>
       </div>
     ) : null;
   },

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,51 +13,53 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({ className, additionalDescription, description, links, title, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col sm:flex-row w-full overflow-hidden', className)}
-      {...rest}
-    >
-      <div className="mr-xl flex-auto">
-        <Headline
-          isEmbedded={true}
-          title={title}
-          description={description}
-          as="h1"
-          align="text-left"
-        />
-        {additionalDescription ? (
+    <BlockWrapper className={style('overflow-hidden', className)} {...rest}>
+      <div className="flex flex-col @6xl:flex-row gap-m">
+        <div>
           <Headline
-            className="pt-m"
-            description={additionalDescription}
-            align="text-left"
             isEmbedded={true}
+            title={title}
+            description={description}
+            as="h1"
+            align="text-left"
           />
-        ) : null}
+          {additionalDescription ? (
+            <Headline
+              className="pt-m"
+              description={additionalDescription}
+              align="text-left"
+              isEmbedded={true}
+            />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, '@6xl:min-w-[672px] p-0 justify-self-end') : null}
       </div>
-      {links?.length ? renderLinks(links) : null}
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[]) => {
+const renderLinks = (links: LinkProps[], className = '') => {
   const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
+      className={className}
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
+      padding="p-0"
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
+          className={style(
+            'flex flex-wrap gap-2xs self-start xl:justify-center @5xl:grid @5xl:grid-cols-2',
+          )}
         >
           {links
             .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
             .map((link, index) => (
-              <CarouselLinkButton key={String(index)} className="sm:m-2xs" {...link} />
+              <CarouselLinkButton key={String(index)} {...link} />
             ))}
         </div>
       ))}

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -13,14 +13,14 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import { alignTextStyle } from './alignTextStyle';
+import { AlignStyles } from '../../model/AlignStyles';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
     additionalDescription,
-    align = alignTextStyle,
+    align = AlignStyles,
     button = {},
     className = '',
     description,

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -15,7 +15,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
           title={title}
           headlineVersion="XS"
           image={icon}
-          imageOptions={{ directionRight: false, imageAlign: 'center' }}
+          imageOptions={{ directionRight: true, imageAlign: 'center' }}
           benefits={list?.map((_) => ({
             type: 'default',
             label: _.title,

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -19,6 +19,7 @@
         "text": "Текст"
       }
     ],
-    "version": "primary"
+    "version": "primary",
+    "listItemSize": "S"
   }
 }

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ColumnHeader } from './ComparisonTableContent';
-import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, firstCellStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRowContainer } from './TableRowContainer';
@@ -13,7 +13,7 @@ interface ComparisonTableColumnHeadersProps {
 export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
   ({ colHeaders, activeIndex }) => (
     <TableRowContainer>
-      <div className={FIRST_CELL_CLASSES} role="columnheader" />
+      <div className={firstCellStyle} role="columnheader" />
       <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
         {colHeaders.map((header, i) => (
           <HeaderCell key={String(i)} {...header} />

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

@@ -9,7 +9,7 @@ export interface TableCarouselContainerProps {
 
 const carouselContainerClassesMap: Record<TableVersion, string> = {
   comparison: 'flex gap-m duration-1000',
-  tariff: 'flex flex-grow duration-1000',
+  tariff: 'flex gap-5xl flex-grow duration-1000',
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { DIVIDER_CLASSES } from './constants';
+import { dividerStyle } from './constants';
+import { style } from '../../utils/style';
 
 export interface TableCellProps {
   cell: CellData[];
@@ -10,17 +11,15 @@ export interface TableCellProps {
   isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
-  const cellWrapperClasses = `box-border flex flex-col`;
+const cellWrapperStyle = `box-border flex flex-col`;
 
-  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
-
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => (
+  <div className={cellWrapperStyle} role="cell">
+    <div className={style('h-full', dividerStyle)}>
+      {cell.map(renderCellInner(isFillGradient, rowHeader))}
     </div>
-  );
-});
+  </div>
+));
 
 const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
@@ -32,11 +31,14 @@ const renderCellInner =
         </div>
         <div className="basis-1/2">
           {label ? (
-            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+            <div className={style('text-right', isFillGradient ? 'text-white' : '')}>{label}</div>
           ) : null}
           {description ? (
             <div
-              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+              className={style(
+                'text-right',
+                isFillGradient ? 'text-white/80' : 'text-secondary-text',
+              )}
             >
               {description}
             </div>

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

@@ -3,9 +3,10 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { CellData, ColumnHeader } from './ComparisonTableContent';
-import { GRADIENT } from './constants';
+import { gradientStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
+import { style } from '../../utils/style';
 
 export interface TableColumnData {
   rowHeader?: string;
@@ -24,11 +25,14 @@ export interface TableColumnProps extends UniBlockProps {
 export const TableColumn = JSX<TableColumnProps>(
   ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
-    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const gradientColumnStyle = isFillGradient ? gradientStyle : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div className={`border border-gray rounded-md p-m mb-m ${gradientClassName}`} role="row">
+      <div
+        className={style('border border-gray rounded-md p-m mb-m', gradientColumnStyle)}
+        role="row"
+      >
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (