@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.87

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -27,7 +27,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
             context={context}
             foldButtonLabel={label}
             containerClasses="grid grid-cols-12 gap-1 border-box"
-            render={(children, isActive) => <Wrapper isActive={isActive}>{children}</Wrapper>}
+            render={(children) => <Wrapper>{children}</Wrapper>}
           />
         ) : null}
       </div>
@@ -35,6 +35,6 @@ export const OtherProductsItem = JSX<BlockItemProps>(
   },
 );
 
-const Wrapper = JSX<{ isActive: boolean }>(({ children }) => {
+const Wrapper = JSX(({ children }) => {
   return <div className="box-border">{children}</div>;
 });

package/src/components/PictureText/PictureTextContent.ts

@@ -1,9 +1,9 @@
 import { BlockVersion } from '../../model/BlockVersion';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { TitleProp } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Picture } from '../../model/Picture';
 
-export type TitleWithImageContent = HeadingContent & ImageContent;
+export type TitleWithImageContent = TitleProp & ImageContent;
 
 export interface PictureTextBenefit {
   /** @title Иконка */

package/src/components/Placeholder/Placeholder.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -25,23 +23,14 @@ export const Placeholder = JSX<PlaceholderProps>(
         )} ${getTileMinHeight(className)} `}
         {...rest}
       >
-        <BaseTile
+        <Headline
           context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={getTileHeadingType(className)}
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-        >
-          {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
-          ) : null}
-          <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
-        </BaseTile>
+          className="!p-0 max-w-[600px]"
+          title={title}
+          description={description}
+          headlineVersion={getTileHeadingType(className)}
+        />
+        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/src/components/Placeholder/PlaceholderContent.ts

@@ -1,7 +1,6 @@
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @hidden
  */
-export type PlaceholderContent = HeadingContent & DescriptionContent;
+export type PlaceholderContent = HeadlineCommonProps;

package/src/components/ProductBlock/ProductBlock.example.json

@@ -1,7 +1,7 @@
 {
   "title": "Продукт",
   "description": "Описание",
-  "headingType": "h2",
+  "headlineVersion": "XL",
   "backwardButton": {
     "text": "Кнопка возврата",
     "icon": { "icon": "ArrowLeftIcon" }

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -70,7 +70,7 @@ const backwardButton: BackwardButtonProps = {
 
 export const PRODUCT_BLOCK: ProductBlockContent = {
   title: 'Оплата проходит в 180 странах мира',
-  headingType: 'h2',
+  headlineVersion: 'L',
   items,
   buttons: buttons,
 };
@@ -82,7 +82,7 @@ export default {
         className="col-span-12"
         context={context}
         backwardButton={backwardButton}
-        headingType="h1"
+        headlineVersion="XL"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
@@ -97,7 +97,7 @@ export default {
         className="col-span-12"
         context={context}
         title="Потребительский кредит наличными"
-        headingType="h2"
+        headlineVersion="L"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
         benefitsVersion="white"
@@ -135,7 +135,7 @@ export default {
         className="col-span-12"
         context={context}
         backwardButton={backwardButton}
-        headingType="h1"
+        headlineVersion="XL"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
@@ -151,7 +151,7 @@ export default {
         className="col-span-12"
         context={context}
         title="Потребительский кредит наличными"
-        headingType="h2"
+        headlineVersion="L"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
         benefitsVersion="white"

package/src/components/ProductBlock/ProductBlock.tsx

@@ -36,7 +36,10 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   return (
     <BlockWrapper
       context={context}
-      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border
+      ${backwardButton?.text ? 'min-h-[542px] max-h-[542]' : 'min-h-[454px] max-h-[454px]'} ${
+        productBlockStyleMap[version]
+      } ${className}`}
       {...otherProps}
     >
       {backwardButton?.text
@@ -61,7 +64,12 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
           )}
         </div>
       ) : null}
-      <ProductBlockInner context={context} version={version} {...otherProps} />
+      <ProductBlockInner
+        context={context}
+        version={version}
+        {...otherProps}
+        className={backwardButton?.text ? 'pb-[88px]' : ''}
+      />
     </BlockWrapper>
   );
 });

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,12 +1,11 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { Picture } from '../../model/Picture';
-import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { Picture } from '../../model/Picture';
+import type { HeadlineProps } from '../../model/HeadlineType';
 
 export interface ProductBlockBenefit {
   icon?: Picture;
@@ -22,9 +21,7 @@ export type BenefitItemProps = {
   benefitsVersion?: IconVersion;
 };
 
-export type ProductBlockInnerContent = HeadingContent &
-  HeadingTypeContent &
-  DescriptionContent &
+export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent &
   ImageContent & {

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -1,8 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { Headline } from '../Headline/Headline';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -17,7 +16,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     className = '',
     context,
     title,
-    headingType = 'h2',
+    headlineVersion = 'L',
     description,
     benefits,
     benefitsVersion = 'normal',
@@ -32,17 +31,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
       <div className={`w-full ${className}`}>
         <div>
           {label ? renderLabel(label, version) : null}
+          <Headline
+            context={context}
+            className="!p-0 max-w-[600px]"
+            title={title}
+            description={description}
+            bgColorHeadline={version}
+            headlineVersion={headlineVersion}
+          />
           <BaseTile
             context={context}
-            title={
-              title ? (
-                <Heading
-                  headingType={headingType}
-                  title={title}
-                  className="whitespace-pre-wrap max-w-[600px]"
-                />
-              ) : null
-            }
             buttons={
               buttons?.length ? (
                 <ButtonSection
@@ -53,9 +51,6 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? (
-              <Description className="mt-3 text-m-md" description={description} />
-            ) : null}
             {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
@@ -64,12 +59,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               </div>
             ) : null}
             {items?.length ? (
-              <List
-                className="mt-3 text-m-md"
-                items={items}
-                version={version}
-                isDotted={isDotted}
-              />
+              <List className="mt-3 text-m" items={items} version={version} isDotted={isDotted} />
             ) : null}
           </BaseTile>
         </div>
@@ -92,7 +82,7 @@ const labelStyleMap: Record<BlockVersion, string> = {
 
 const renderLabel = (label: string, version: BlockVersion) => (
   <div
-    className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
+    className={`px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
   >
     {label}
   </div>

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,13 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
+import { Headline } from '../Headline/Headline';
 
 export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
@@ -16,7 +15,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     className = '',
     context,
     title,
-    headingType = 'h2',
+    headlineVersion = 'L',
     description,
     benefits,
     benefitsVersion = 'normal',
@@ -27,22 +26,19 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     isDotted = true,
     textBlockClassName = '',
   }) => {
-    const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-
     return (
-      <div className={`flex grow justify-between items-stretch ${className}`}>
+      <div className={`flex grow justify-between items-stretch h-full ${className}`}>
         <div className={`flex flex-col ${textBlockClassName}`}>
-          <BaseTile
+          <Headline
             context={context}
-            title={getTitle(title, headingType)}
-            buttons={getButtons(context, buttons)}
-          >
-            {description ? (
-              <Description
-                className={`mt-4 max-w-[600px] text-md font-light ${textColor}`}
-                description={description}
-              />
-            ) : null}
+            title={title}
+            description={description}
+            className={`!p-0 max-w-[600px]`}
+            bgColorHeadline={version}
+            headlineVersion={headlineVersion}
+            align="left"
+          />
+          <BaseTile context={context} buttons={getButtons(context, buttons)}>
             {benefits?.filter((_) => _.label)?.length ? (
               <div className="flex gap-6 mt-6">
                 {benefits.map((benefit, i) =>
@@ -52,7 +48,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-title-2xs font-light"
+                className="mt-5 text-h6 font-light"
                 items={items}
                 itemClassName="mb-[7px]"
                 version={version}
@@ -67,18 +63,8 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-const getTitle = (title, headingType) => {
-  return title ? (
-    <Heading
-      headingType={headingType}
-      title={title}
-      className="whitespace-pre-wrap max-w-[600px]"
-    />
-  ) : null;
-};
-
 const getButtons = (context, buttons) => {
   return buttons?.length ? (
-    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-4" />
+    <ButtonSection context={context} buttons={buttons} className="flex gap-4" />
   ) : null;
 };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -25,7 +25,7 @@ export function renderBackwardButton(
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>
-      {text ? <span className="text-m-md font-light">{text}</span> : null}
+      {text ? <span className="text-m">{text}</span> : null}
     </div>
   );
 }

package/src/components/ProductBlock/renderBenefit.mobile.tsx

@@ -25,13 +25,9 @@ export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps
           asSVG
         />
       ) : null}
-      <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
-        {benefit.label}
-      </div>
+      <div className={`text-l m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
       {benefit.description && (
-        <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
-          {benefit.description}
-        </div>
+        <div className={`text-s ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
       )}
     </div>
   );

package/src/components/ProductBlock/renderBenefit.tsx

@@ -29,11 +29,9 @@ export function renderBenefit(
         />
       ) : null}
       <div className="flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]">
-        <div className={`text-xl-light m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
+        <div className={`text-h6 m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
         {benefit.description ? (
-          <div className={`font-light text-m-md ${benefitDescStyleMap[version]}`}>
-            {benefit.description}
-          </div>
+          <div className={`text-m ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
         ) : null}
       </div>
     </div>

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -69,7 +69,7 @@ export default {
             productBlock: {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons,
               image: percentImage,
@@ -82,7 +82,7 @@ export default {
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons,
               image: worker,
@@ -95,7 +95,7 @@ export default {
             },
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons,
               image: creditCard,
@@ -108,7 +108,7 @@ export default {
             },
             productBlock: {
               title: 'Карты Unionpay',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons,
               image: creditCard,
@@ -133,7 +133,7 @@ export default {
             productBlock: {
               title: 'Кредит по одному документу',
               description: 'Кредит наличными без залога и поручительства, только по паспорту',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons: buttonsSecondary,
               image: percentImage,
@@ -146,7 +146,7 @@ export default {
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons: buttonsSecondary,
               image: worker,
@@ -159,7 +159,7 @@ export default {
             },
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons: buttonsSecondary,
               image: creditCard,
@@ -172,7 +172,7 @@ export default {
             },
             productBlock: {
               title: 'Карты Unionpay',
-              headingType: 'h2',
+              headlineVersion: 'L',
               items,
               buttons: buttonsSecondary,
               image: creditCard,

package/src/components/ProductGallery/ProductGallery.tsx

@@ -95,8 +95,8 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
     : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
-    ? 'text-primary-text text-title-2xs'
-    : `text-base ${productBlockStyleMap[version].title}`;
+    ? 'text-primary-text text-h6'
+    : `text-l ${productBlockStyleMap[version].title}`;
   const btnDescClassName = isActiveBtn
     ? 'text-secondary-text text-m-title-xs mt-2.5'
     : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 const productGalleryStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
@@ -11,12 +11,12 @@ const productGalleryStyleMap: Record<BlockVersion, string> = {
 };
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  headingType?: HeadingType;
+  headlineVersion?: HeadlineProps;
   block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, headingType, context, className = '' }) => {
+  ({ block, context, className = '' }) => {
     const version = block?.version ?? 'primary';
 
     return (
@@ -25,7 +25,7 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
         role="listitem"
       >
         <div className="flex grow">
-          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
+          <ProductBlockInner context={context} {...block} />
         </div>
       </section>
     );

package/src/components/ProductTile/ProductTile.example.json

@@ -1,6 +1,6 @@
 {
   "title": "Продуктовая плитка",
-  "headingType": "h3",
+  "headlineVersion": "S",
   "description": "Описание",
   "image": {
     "format": "webp",

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -85,7 +85,7 @@ const buttons3: ButtonProps[] = [
 
 export const PRODUCT_TILE: ProductTileContent = {
   title: 'Акция! “Кредит На все, что хочется!”',
-  headingType: 'h3',
+  headlineVersion: 'S',
   description: 'Потребительский кредит на любые цели, без залога и поручительства',
   benefits,
   buttons: buttons,
@@ -93,7 +93,7 @@ export const PRODUCT_TILE: ProductTileContent = {
 };
 export const PRODUCT_PENSION_TILE: ProductTileContent = {
   title: 'Кредит пенсионный',
-  headingType: 'h3',
+  headlineVersion: 'S',
   description: 'Для людей в возрасте до 75 лет',
   benefits,
   buttons: buttons2,
@@ -111,7 +111,6 @@ export default {
         context={context}
         className="col-span-6"
         title="Акция! “Пенсионный кредит”"
-        headingType="h3"
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
         benefits={benefits}
         buttons={buttons2}
@@ -125,7 +124,6 @@ export default {
         context={context}
         className="col-span-8"
         title="Кредит под залог недвижимости"
-        headingType="h3"
         description={'Без переоформления залогой недвижимости на банк'}
         benefits={benefits}
         buttons={buttons2}
@@ -139,7 +137,6 @@ export default {
         context={context}
         className="col-span-4"
         title="Кредит пенсионный"
-        headingType="h3"
         description={'Для людей в возрасте до 75 лет'}
         benefits={benefits}
         buttons={buttons2}
@@ -152,7 +149,6 @@ export default {
         context={context}
         className="col-span-6"
         title="Ипотечное страхование"
-        headingType="h3"
         description={'Финансовая защита заемщиков в случае непредвиденных обстоятельств'}
         additionalDescription={
           'Страховая сумма и страховой взнос зависит от остатка задолженности по ипотеке'

package/src/components/ProductTile/ProductTile.tsx

@@ -3,12 +3,11 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
+import { Headline } from '../Headline/Headline';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -22,7 +21,7 @@ export const ProductTile = JSX<ProductTileProps>(
     context,
     className = '',
     title,
-    headingType = 'h3',
+    headlineVersion = 'S',
     description,
     additionalDescription,
     benefits,
@@ -40,17 +39,15 @@ export const ProductTile = JSX<ProductTileProps>(
         {...rest}
       >
         <div className="z-[1]">
-          {title ? (
-            <Heading
-              headingType={headingType}
-              as="h3"
-              title={title}
-              className={`whitespace-pre-wrap text-h4`}
-            />
-          ) : null}
-          {description ? (
-            <Description className="mt-2 text-md font-light" description={description} />
-          ) : null}
+          <Headline
+            context={context}
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion={headlineVersion}
+            bgColorHeadline={version}
+            align="left"
+          />
           {renderBenefits(benefits || [], version)}
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -73,7 +70,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-4">
       {benefits.length ? (
-        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+        <div className="mr-6 gap-2.5 text-h6">{benefits.map(renderBenefitLabel)}</div>
       ) : null}
       {benefits.length ? (
         <div className="pt-1 text-m">

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,7 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export interface TextBenefit {
@@ -14,9 +13,7 @@ export interface TextBenefit {
 /**
  * @title Продуктовая плитка
  */
-export type ProductTileContent = HeadingContent &
-  HeadingTypeContent &
-  DescriptionContent &
+export type ProductTileContent = HeadlineProps &
   ButtonContent &
   ImageContent & {
     version?: BlockVersion;