@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.12.3

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,8 +1,8 @@
 import '../../setup-fixture';
 
-import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { MobileAppTile } from './MobileAppTile';
+import type { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'icon-phone.png',
@@ -95,7 +95,7 @@ export default {
   ),
   'without-image-and-list': (
     <div className="container grid grid-cols-12">
-      <MobileAppTile className="col-span-4" qr={qr} buttons={[button1, button2]} />
+      <MobileAppTile className="col-span-8" qr={qr} buttons={[button1, button2]} />
     </div>
   ),
 };

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,87 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 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 { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { style } from '../../utils/style';
 import type { MobileAppTileContent } from './MobileAppTileContent';
+import { renderDescription } from './renderDescription';
+import { renderList } from './renderList';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
-    className = '',
-    title = 'Мобильное приложение',
-    qr,
-    buttons,
-    version = 'primary',
-    items,
-    image,
-    headingType = 'h4',
+    className,
+    padding,
     alignTitle = 'left',
+    buttons = [],
     description,
+    headingType = 'h4',
+    image,
+    items,
+    qr,
+    title = 'Мобильное приложение',
+    version = 'primary',
     ...rest
   }) => {
     const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
 
     return (
       <BlockWrapper
-        className={`flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(
-          className,
-        )} ${className}`}
+        className={style('min-h-80', className)}
+        defaultPadding="p-0"
         version={version}
         {...rest}
       >
         <BaseTile
-          className="z-10"
+          className="h-full"
+          padding={padding}
+          defaultPadding="p-default"
           title={
             title ? (
               <Heading
                 headingType={headingType}
-                as="h3"
                 title={title}
-                className={`whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}`}
+                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
               />
             ) : null
           }
-          buttons={renderButtonsSection(buttons, {
-            className: 'mt-8',
-            buttonClassName: 'min-w-[168px]',
-          })}
+          backImage={image?.src ? <Img image={image} /> : null}
+          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 3 })}
         >
           {renderDescription(description)}
-          <div className="flex flex-1 items-center mb-3">
+          <div className="flex flex-1 gap-s items-center">
             {qr?.src ? (
-              <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
+              <div className={style('flex justify-center bg-white rounded-md', containerStyle)}>
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
             {renderList(items)}
           </div>
         </BaseTile>
-        {image?.src ? (
-          <div className="absolute right-0 bottom-0">
-            <Img image={image} />
-          </div>
-        ) : null}
       </BlockWrapper>
     );
   },
 );
-
-const renderList = (items?: string[]) => {
-  return items?.length ? (
-    <List items={items} listItemSize="S" />
-  ) : (
-    <span className="text-m-light text-secondary-text">
-      Наведите камеру телефона на QR-код и скачайте приложение
-    </span>
-  );
-};
-
-const renderDescription = (description?: string) =>
-  description ? <p className="text-xl-light mb-5 pt-0.5">{description}</p> : null;

package/src/components/MobileAppTile/renderDescription.tsx

@@ -0,0 +1,10 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderDescription = (description?: string) =>
+  description ? (
+    <div className="mb-5 pt-0.5 sm:mb-0 sm:pt-0">
+      <Text size="text-xl" font-weight="light">
+        {description}
+      </Text>
+    </div>
+  ) : null;

package/src/components/MobileAppTile/renderList.tsx

@@ -0,0 +1,11 @@
+import { List } from '../../ui-kit/List/List';
+
+export const renderList = (items?: string[]) => {
+  return items?.length ? (
+    <List items={items} className="text-l-light mb-2 last:mb-0" />
+  ) : (
+    <span className="text-m-light text-secondary-text">
+      Наведите камеру телефона на QR-код и скачайте приложение
+    </span>
+  );
+};

package/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -50,7 +50,7 @@
       "version": "secondary"
     },
     "notFound": {
-      "title": "Нет подходящей ипотечной программы",
+      "title": "Нет подходящей программы",
       "description": "Попробуйте очистить фильтры"
     }
   }

package/src/components/MortgageFiltration/MortgageFiltration.fixture.tsx

@@ -108,7 +108,7 @@ export default {
         topItemsCount={2}
         resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
         notFound={{
-          title: 'Нет подходящей ипотечной программы',
+          title: 'Нет подходящей программы',
           description: 'Попробуйте очистить фильтры',
         }}
         block={{

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -16,7 +16,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
-      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+      <BlockWrapper
+        className={style(className)}
+        defaultPadding="p-0"
+        version="transparent"
+        {...rest}
+      >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
@@ -12,7 +13,7 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={`p-8 flex flex-col ${className}`} {...rest}>
+    <BlockWrapper className={style('flex flex-col', className)} {...rest}>
       {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
       {servicesList?.length ? (
         <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -8,7 +8,7 @@ interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
 
 export const ParagraphBlock = JSX<ParagraphBlockProps>(
   ({ text, size, align, font, children, ...rest }) => (
-    <BlockWrapper {...rest}>
+    <BlockWrapper defaultPadding="p-0" {...rest}>
       <Paragraph size={size} align={align} font={font}>
         {text || children}
       </Paragraph>

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

@@ -0,0 +1,122 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PictureText } from './PictureText';
+import type { PictureTextContent } from './PictureTextContent';
+
+const imageInsurance: Picture = {
+  src: 'insurance.png',
+  format: 'webp',
+  alt: 'Страховые риски и продукты',
+  size: {
+    width: 335,
+  },
+  sources: [
+    {
+      src: 'insurance.png',
+      format: 'png',
+    },
+  ],
+};
+
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
+export const PICTURE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Страхование от потери работы»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Кредит по одному документу',
+      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+      icon: { icon: 'DocumentTextIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Кредит на общих условиях',
+      description: 'До 5 млн ₽ на общих условиях получения кредита',
+      icon: { icon: 'DocumentTextIcon', iconVersion: 'white' },
+    },
+  ],
+};
+
+export const INSURANCE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Защита вас и ваших близких»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Телесное повреждение',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Госпитализация застрахованного',
+      description: 'Описание',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Смерть застрахованного',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+  ],
+  image: imageInsurance,
+  sum: 500000,
+};
+
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} version="secondary" />
+    </div>
+  ),
+  'insurance sum': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} />
+    </div>
+  ),
+  'insurance monthPay': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
+    </div>
+  ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
+};

package/src/components/PictureText/PictureText.tsx

@@ -1,60 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
-import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
-import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
-import { renderBenefit } from './renderBenefit';
+import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
 export const PictureText = JSX<PictureTextProps>(
-  ({
-    className = '',
-    title,
-    description,
-    image,
-    benefits,
-    sum,
-    monthLimit,
-    directionRight = false,
-    version = 'primary',
-    ...rest
-  }) => (
-    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
-      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-      <div className={'flex justify-center gap-[122px] mt-[30px]'}>
-        {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-        <div className="w-[558px] m-auto">
-          {benefits?.length ? (
-            <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
-          ) : null}
-          {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
-        </div>
-      </div>
+  ({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        headlineVersion={headlineVersion}
+        align={align}
+        isInsetTitle={false}
+        {...rest}
+        imageOptions={{ directionRight: false, imageAlign: 'center', ...rest.imageOptions }}
+      >
+        {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
-      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number(monthLimit) > 0
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-
-  return (
-    <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
-      <span className="text-secondary-text text-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
-    </div>
-  );
-}

package/src/components/PictureText/PictureTextContent.ts

@@ -1,17 +1,11 @@
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Картинка с текстом
  */
 export type PictureTextContent = UniBlockContent &
-  BenefitsProps &
-  HeadlineCommonProps &
-  ImageContent & {
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
+  BaseProductTileContent & {
     /** @title Ежемесячный лимит */
     monthLimit?: number;
     /** @title Страховая сумма */

package/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -0,0 +1,21 @@
+import { Text } from '../../ui-kit/Text/Text';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+
+export const renderInsuranceSumMonth = (sum?: number, monthLimit?: number) =>
+  sum || monthLimit ? (
+    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m">
+      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null}
+      {Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null}
+    </div>
+  ) : null;
+
+const renderValueBlock = (title: string, value = 0) => (
+  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre">
+    <Text font="font-light" size="text-l">
+      {title}
+    </Text>
+    <Text size="text-h6" color="text-primary-text">
+      {toLocalNumberFormat(2)(value)} ₽
+    </Text>
+  </div>
+);

package/src/components/Placeholder/Placeholder.tsx

@@ -2,9 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { PlaceholderContent } from './PlaceholderContent';
 
@@ -13,27 +10,19 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, title, description = 'Блок в разработке...', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style(
-          'p-9 box-border',
-          className,
-          getTileRightPadding(className),
-          getTileMinHeight(className),
-        )}
-        {...rest}
-      >
-        <Headline
-          className="!p-0 max-w-[600px]"
-          title={title}
-          description={description}
-          headlineVersion={getTileHeadingType(className)}
-        />
-        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
-      </BlockWrapper>
-    );
-  },
+  ({ className, title, description = 'Блок в разработке...', ...rest }) => (
+    <BlockWrapper className={style('box-border', className)} {...rest}>
+      <Headline
+        className="max-w-[600px]"
+        title={title}
+        description={description}
+        headlineVersion="L"
+        align="text-left"
+        isPadding={false}
+      />
+      <figure className="m-0 mt-m min-w-[80%]">{renderShimmer()}</figure>
+    </BlockWrapper>
+  ),
 );
 
 const renderShimmer = (size = 3) =>

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

@@ -1,7 +1,7 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
 
@@ -26,18 +26,21 @@ const image: Picture = {
   ],
 };
 
-const benefits: BenefitItemProps[] = [
+const benefits: ComplexBenefitContent[] = [
   {
+    type: 'default',
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
     icon: { icon: 'EmptyWalletIcon' },
   },
   {
+    type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
     icon: { icon: 'PercentageSquareIcon' },
   },
   {
+    type: 'default',
     label: 'До 5 лет',
     description: 'Срок кредитования',
     icon: { icon: 'CalendarIcon' },

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

@@ -1,7 +1,7 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
 import type { ProductBlockContent } from './ProductBlockContent';
@@ -16,18 +16,21 @@ const image: Picture = {
   },
 };
 
-const benefits: BenefitItemProps[] = [
+const benefits: ComplexBenefitContent[] = [
   {
+    type: 'default',
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
     icon: { icon: 'CalendarTickIcon' },
   },
   {
+    type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
     icon: { icon: 'PercentageSquareIcon' },
   },
   {
+    type: 'default',
     label: 'До 5 лет',
     description: 'Срок кредитования',
     icon: { icon: 'CalendarIcon' },
@@ -110,7 +113,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         {...PRODUCT_BLOCK_WITH_BACK_BUTTON}
-        directionRight={false}
+        imageOptions={{ directionRight: false }}
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlock.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
-import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
   <BlockWrapper
-    className={style('overflow-hidden p-default flex flex-col gap-10 box-border', className)}
+    className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
+    defaultPadding="p-default"
     {...rest}
   >
     {backwardButton?.text
@@ -19,6 +20,6 @@ export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton,
           !rest.version || rest.version === 'primary' ? 'primary' : 'white',
         )
       : null}
-    <ProductBlockInner className="grow" {...rest} />
+    <BaseProductTile className="grow h-full" {...rest} />
   </BlockWrapper>
 ));

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,37 +1,12 @@
-import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
-import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
-
-export type ProductBlockInnerContent = HeadlineProps &
-  RichTextProps &
-  ListContent &
-  ButtonContent &
-  ImageContent &
-  BulletsProps & {
-    /**
-     * @title Список преимуществ
-     * @minItems 2
-     * @maxItems 4
-     */
-    benefits?: BenefitItemProps[];
-    benefitsVersion?: IconVersion;
-    /** @title Лейбл (моб.) */
-    label?: string;
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
+import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
-  ProductBlockInnerContent & {
+  BaseProductTileContent & {
     /** @title Кнопка возврата */
     backwardButton?: BackwardButtonProps;
   };