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

package/mobile/src/components/Footer/Contacts.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ContactInfo } from './FooterContent';
+import { Text } from '../../ui-kit/Text/Text';
+import type { ContactGroup, ContactInfo } from './FooterContent';
 
 export interface ContactsProps {
   className?: string;
-  items?: ContactInfo[];
+  items?: ContactGroup[];
   hasButton?: boolean;
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
   <div className={className}>
-    {items?.length ? items.map(renderContact) : null}
+    {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
         version="primary"
@@ -24,16 +25,23 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
   </div>
 ));
 
-const renderContact = (item: ContactInfo, index: number) => {
-  const { type, text, description } = item;
-
-  return (
-    <div className="mb-4" key={String(index)}>
-      <div>{renderText(type, text)}</div>
-      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
+const renderContactsGroup = (item: ContactGroup, i: number) => (
+  <div className="mb-6" key={String(i)}>
+    <div className="mb-4">
+      <Text size="text-l" font="font-medium">
+        {item?.title}
+      </Text>
     </div>
-  );
-};
+    <div>{item.items?.map(renderContact)}</div>
+  </div>
+);
+
+const renderContact = (item: ContactInfo, index: number) => (
+  <div className="mb-4" key={String(index)}>
+    <div>{renderText(item.type, item.text)}</div>
+    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+  </div>
+);
 
 const renderText = (type: ContactInfo['type'], text = '') => {
   switch (type) {

package/mobile/src/components/Footer/Footer.tsx

@@ -6,7 +6,6 @@ import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
-import { style } from '../../utils/style';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import type { FooterContent } from './FooterContent';
@@ -21,11 +20,11 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+  const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={style('px-4 py-6', className)} {...rest}>
+    <BlockWrapper tag="footer" className={className} defaultPadding="px-4 py-6" {...rest}>
       <div className="mb-4 pb-5 border-b border-main-divider">
         {sitemap.topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>

package/mobile/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Тип контакта
@@ -21,6 +21,15 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
+/**
+ * @title Группа контактов
+ */
+export type ContactGroup = {
+  /** @title Имя */
+  title?: string;
+  items?: ContactInfo[];
+};
+
 /**
  * @title Пункт подменю
  */

package/mobile/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,12 @@
 import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactInfo, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
-  contacts?: ContactInfo[];
+  contacts?: ContactGroup[];
   socialMedia?: LinkCommonProps[];
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-default ${className}`} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

package/mobile/src/components/Header/Header.tsx

@@ -7,8 +7,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HeaderTop } from './HeaderTop';
 import type { HeaderContent } from './HeaderContent';
+import { HeaderTop } from './HeaderTop';
 
 export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
 
@@ -31,7 +31,7 @@ export const Header = JSX<HeaderMobileProps>(
     );
 
     return (
-      <BlockWrapper tag="header" version={version} {...rest}>
+      <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
         <div className="container px-4 py-1 box-border">
           <HeaderTop
             bgColor={bgColor}

package/mobile/src/components/Headline/Headline.tsx

@@ -1,35 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { style } from '../../utils/style';
-import { headlineVersionStyles } from './headlineVersionStyles';
 import type { TextSize } from '../../ui-kit/Text/TextProps';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineVersionStyles } from './headlineVersionStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
     className,
+    version = '',
+    headlineVersion = 'XL',
     title,
     description,
-    headlineVersion = 'XL',
     align = 'text-center',
     as,
     isPadding = true,
     isTheme = false,
-    version = '',
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-default' : '';
     const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style(paddingStyle, className)}
+        className={className}
+        defaultPadding={isPadding ? 'p-default' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -2,7 +2,6 @@ import type { HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,9 +9,8 @@ import type { TextAlign } from '../../ui-kit/Text/TextProps';
 export type HeadlineContent = UniBlockContent &
   HeadlineProps &
   ImageContent & {
-    align?: TextAlign;
     /** @hidden */
     as?: HeadingTagType;
-  /** @title Внутренний отступ блока */
-  isPadding?: boolean;
+    /** @title Внутренний отступ блока */
+    isPadding?: boolean;
   };

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -13,32 +13,32 @@ export const headlineVersionStyles: Record<
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
-    descriptionStyle: 'mt-headline-xxl',
+    descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-l',
+    descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-l',
+    descriptionStyle: 'mt-s',
   },
   M: {
-    title: { headingType: 'h3', as: 'h3' },
+    title: { headingType: 'h3', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-m',
+    descriptionStyle: 'mt-text',
   },
   S: {
-    title: { headingType: 'h4', as: 'h4' },
+    title: { headingType: 'h4', as: 'h2' },
     descriptionSize: 'text-xl-light',
-    descriptionStyle: 'mt-headline-s',
+    descriptionStyle: 'mt-xs',
   },
   XS: {
-    title: { headingType: 'h5', as: 'h5' },
+    title: { headingType: 'h5', as: 'h2' },
     descriptionSize: 'text-l-light',
-    descriptionStyle: 'mt-headline-s',
+    descriptionStyle: 'mt-xs',
   },
 };
 

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -18,13 +18,8 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     ...rest
   }) => (
     <BlockWrapper
-      className={style(
-        'relative',
-        'grid grid-cols-12',
-        isPadding ? 'p-default' : '',
-        gapStyles[gap],
-        className,
-      )}
+      className={style('relative', 'grid grid-cols-12', gapStyles[gap], className)}
+      defaultPadding={isPadding ? 'p-default' : ''}
       version={version}
       isTheme={isTheme}
       {...rest}

package/mobile/src/components/ImgBlock/ImgBlock.tsx

@@ -10,7 +10,7 @@ export const ImgBlock = JSX<ImgBlockProps>((props) => {
   const { className, image, ...rest } = props;
 
   return (
-    <BlockWrapper className={className} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
       <Img image={image} />
     </BlockWrapper>
   );

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { style } from '../../utils/style';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
@@ -22,7 +23,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={`box-border py-12 overflow-hidden relative w-100 ${className}`}
+        className={style('box-border overflow-hidden relative px-0', className)}
+        defaultPadding="p-default"
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -38,23 +38,23 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
     investmentColumns,
     ...rest
   } = props;
-  const colums = investmentColumns ? [...investmentColumns] : [];
+  const columns = investmentColumns ? [...investmentColumns] : [];
   if (investmentZeroColumn) {
-    colums.unshift(investmentZeroColumn);
+    columns.unshift(investmentZeroColumn);
   }
 
   return (
-    <BlockWrapper className={`px-9 py-12 ${className}`} {...rest}>
+    <BlockWrapper className={className} {...rest}>
       <div className="container text-m-light">
-        {colums?.length ? (
+        {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">
-              {joinList(<div className="w-px h-4 bg-gray" />)(colums.map(renderInvestmentColumn))}
+              {joinList(<div className="w-px h-4 bg-gray" />)(columns.map(renderInvestmentColumn))}
               <div className="absolute right-[30px] w-px h-4 bg-gray" />
             </div>
             <div className="border-t border-gray -mt-2 ml-9 mr-8" />
             <div className="flex justify-between text-primary-text mt-3 -mx-10">
-              {colums.map(renderInvestmentColumnTitle)}
+              {columns.map(renderInvestmentColumnTitle)}
             </div>
           </div>
         ) : null}

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
@@ -19,14 +18,13 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline
         isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
-        as="h2"
       />
       {documents?.length ? (
         <div className="mt-5 flex flex-col gap-6" role="list">

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,33 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { MobileAppTileContent } from './MobileAppTileContent';
-
-import { Logo } from '../../ui-kit/Logo/Logo';
+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 { 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 = 'Мобильное приложение', description, href = '#' }) => {
+  ({
+    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 (
-      <div
-        className={style(
-          'col-span-12 rounded-md cursor-pointer p-4 bg-secondary-light font-sans',
-          className,
-        )}
+      <BlockWrapper
+        className={style('min-h-80', className)}
+        defaultPadding="p-0"
+        version={version}
+        {...rest}
       >
-        {href ? (
-          <div className="flex">
-            <div className="flex justify-center align-middle rounded-md bg-primary-main w-12 h-12">
-              <Logo className="w-8" bgColor="transparent" showTitle />
-            </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
-              <div className="text-s font-medium mb-[3px]">{title}</div>
-              <div className="text-s text-secondary-text">{description}</div>
-            </a>
+        <BaseTile
+          className="h-full"
+          padding={padding}
+          defaultPadding="p-default"
+          title={
+            title ? (
+              <Heading
+                headingType={headingType}
+                title={title}
+                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
+              />
+            ) : null
+          }
+          backImage={image?.src ? <Img image={image} /> : null}
+          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 3 })}
+        >
+          {renderDescription(description)}
+          <div className="flex flex-1 gap-s items-center">
+            {qr?.src ? (
+              <div className={style('flex justify-center bg-white rounded-md', containerStyle)}>
+                <Img className="w-fit" image={qr} />
+              </div>
+            ) : null}
+            {renderList(items)}
           </div>
-        ) : null}
-      </div>
+        </BaseTile>
+      </BlockWrapper>
     );
   },
 );

package/mobile/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/mobile/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/mobile/src/components/MortgageFiltration/MortgageFiltration.example.json

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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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>
+);