@redneckz/wildless-cms-uni-blocks 0.12.9 → 0.12.11

package/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -15,20 +15,20 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
     const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
 
     return (
-      <BlockWrapper className={className} {...rest}>
-        <div className="flex flex-row flex-grow-0 justify-between mb-8">
+      <BlockWrapper className={style('space-y-3xl', className)} {...rest}>
+        <div className="flex flex-row flex-grow-0 justify-between space-y-lg">
           <Heading
             headingType="h4"
             title={'Курс обмена валют в ' + officeName}
-            className="whitespace-pre-wrap text-h4 mb-5"
+            className="whitespace-pre-wrap text-h4"
           />
-          <div className="pl-11">
+          <div className="pl-6xl">
             <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
         </div>
-        <div className="flex flex-row pt-4 text-left">
+        <div className="flex flex-row pt-m text-left">
           {fourRates.length > 0 ? (
             <table className={style('h-fit w-fit', className)}>
               <thead>

package/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -29,7 +29,7 @@ export const renderCurrencyRow = ({
           {title ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
           ) : null}
-          <span className="ml-2">{title}</span>
+          <span className="ml-xs">{title}</span>
         </div>
       </td>
       {renderCurrency(buyPrice, buyDifference)}
@@ -44,7 +44,7 @@ const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(
 
 const renderCurrency = (price?: number, difference?: number) => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div
         className={style(
@@ -60,7 +60,7 @@ const renderCurrency = (price?: number, difference?: number) => {
 
 const renderOffice = (price?: number, officeName = '') => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div className="font-normal text-sm text-green">{officeName}</div>
     </td>

package/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -2,7 +2,7 @@ import { Text } from '../../ui-kit/Text/Text';
 
 export const renderTableHeader = (title: string) => {
   return (
-    <th className="pl-11">
+    <th className="pl-5xl">
       <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,7 +4,7 @@ import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
+const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-5xl`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -33,17 +33,17 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const currency = exchangeCurrencyItem?.currency?.currency;
 
   return (
-    <tr key={currency} className="pb-1 text-h6">
-      <td className="pt-4">
+    <tr key={currency} className="pb-2xs text-h6">
+      <td className="pt-m">
         <div className="flex items-center">
           {currency ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
           ) : null}
-          <span className="ml-2">{currency}</span>
+          <span className="ml-xs">{currency}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
+      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
+      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -7,11 +7,11 @@ interface CurrentLocationProps {
 }
 
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
-  <div className={`flex ${className}`}>
+  <div className={`flex gap-s ${className}`}>
     <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
-    <div className="ml-3">
-      {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-      <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>
+    <div className="space-y-2xs">
+      {address ? <p className="text-primary-main text-l">{address}</p> : null}
+      <p className="text-secondary-text text-m">Курс указан для заданного офиса</p>
     </div>
   </div>
 ));

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -31,7 +31,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
           className="h-full"
           title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex gap-xxl">
+          <div className="flex gap-6xl">
             <div>
               {currencyRates ? (
                 <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />

package/src/components/Footer/Contacts.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { Text } from '../../ui-kit/Text/Text';
 import type { ContactGroup, ContactInfo } from './FooterContent';
+import { style } from '../../utils/style';
 
 export interface ContactsProps {
   className?: string;
@@ -10,7 +11,7 @@ export interface ContactsProps {
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
-  <div className={className}>
+  <div className={style('space-y-xl', className)}>
     {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
@@ -26,20 +27,20 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
 ));
 
 const renderContactsGroup = (item: ContactGroup, i: number) => (
-  <div className="mb-6" key={String(i)}>
-    <div className="mb-4">
+  <div className="space-y-m" key={String(i)}>
+    <div className="">
       <Text size="text-l" font="font-medium">
         {item?.title}
       </Text>
     </div>
-    <div>{item.items?.map(renderContact)}</div>
+    <div className="space-y-m">{item.items?.map(renderContact)}</div>
   </div>
 );
 
 const renderContact = (item: ContactInfo, index: number) => (
-  <div className="mb-4" key={String(index)}>
+  <div className="space-y-2xs" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
+    <div className="text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 

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

@@ -38,7 +38,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <SocialMedia className="mb-4" media={socialMedia} />
       {mobileApps?.map(renderButton)}
       <HorizontalNavigation
-        className="pt-4 pb-7 border-y border-main-divider"
+        className="pt-m pb-2xl border-y border-main-divider"
         title={horizontalNavigationTitle}
         links={relatedEnterprises}
       />

package/src/components/Footer/Footer.tsx

@@ -27,21 +27,21 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
 
   return (
     <BlockWrapper tag="footer" className={className} {...rest}>
-      <div className="flex items-stretch gap-[54px] pb-8 xl:gap-8">
+      <div className="flex items-stretch gap-6xl xl:gap-3xl pb-3xl ">
         <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
         <SearchBar className="grow" />
       </div>
-      <div className="flex items-stretch gap-[54px] xl:gap-8">
-        <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>
+      <div className="flex items-stretch gap-6xl xl:gap-3xl">
+        <div
+          className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden space-y-xl`}
+        >
           <Contacts items={contacts} hasButton />
           <SocialMedia media={socialMedia}>Соцсети</SocialMedia>
-          <SocialMedia className="mt-6" media={mobileApps}>
-            Мобильное приложение
-          </SocialMedia>
+          <SocialMedia media={mobileApps}>Мобильное приложение</SocialMedia>
         </div>
         <Sitemap className="flex-grow" topItems={sitemap?.topItems} />
       </div>
-      <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
+      <HorizontalNavigation className="mt-24" links={relatedEnterprises} />
       <TextInformation links={documents} />
     </BlockWrapper>
   );

package/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={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

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

@@ -27,7 +27,7 @@ export const Header = JSX<HeaderMobileProps>(
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-1 box-border">
+        <div className="container px-4 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}

package/src/components/Header/Header.tsx

@@ -49,8 +49,8 @@ export const Header = JSX<HeaderProps>(
       <BlockWrapper
         tag="header"
         className={style(
-          'pt-6 px-20',
-          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5',
+          'pt-3xl px-20',
+          showSubMenu && activeTopItem?.items?.length ? 'pb-m' : 'pb-lg',
           className,
         )}
         defaultPadding=""
@@ -59,7 +59,7 @@ export const Header = JSX<HeaderProps>(
       >
         <div className="container">
           <div className="flex items-center">
-            <Logo className="mr-8" bgColor={bgColor} logo={logo} />
+            <Logo className="mr-3xl" bgColor={bgColor} logo={logo} />
             {topItems?.map((_, i) => (
               <TopItem key={String(i)} active={_ === activeTopItem} {..._} />
             ))}
@@ -72,7 +72,7 @@ export const Header = JSX<HeaderProps>(
           </div>
           <div
             className={style(
-              'mt-6 h-px bg-main-divider',
+              'mt-xl h-px bg-main-divider',
               version === 'transparent' ? 'opacity-30' : '',
             )}
           />

package/src/components/Header/HeaderBurger.tsx

@@ -48,7 +48,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-s mb-4 hover:text-primary-main">
       {icon ? <Img className="text-primary-main pr-1" image={icon} width="24" height="24" /> : null}
-      <span className="font-medium pl-0.5">{text}</span>
+      <span className="font-medium pl-3xs">{text}</span>
     </a>
   );
 };

package/src/components/Header/HeaderSubMenu.tsx

@@ -46,12 +46,12 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
     );
 
     return (
-      <nav className="relative mt-3 flex items-center justify-between">
-        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-3 mt-2">
+      <nav className="relative mt-s flex items-center justify-between">
+        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-s mt-xs">
           {subItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
-              className={style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              className={style('ml-3xl first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
               active={_ === activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}

package/src/components/Headline/Headline.tsx

@@ -29,7 +29,7 @@ export const Headline = JSX<HeadlineProps>(
     return (
       <BlockWrapper
         className={className}
-        defaultPadding={isPadding ? 'p-default' : ''}
+        defaultPadding={isPadding ? 'p-6xl' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/src/components/Headline/headlineVersionStyles.ts

@@ -15,25 +15,25 @@ export const headlineVersionStyles: Record<
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
     descriptionWeight: 'font-normal',
-    descriptionStyle: 'mt-m',
+    descriptionStyle: 'mt-xl',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-text',
+    descriptionStyle: 'mt-s',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },

package/src/components/HorizontalLayout/HorizontalLayout.tsx

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

package/src/components/HorizontalLayout/gapStyles.ts

@@ -1,11 +1,11 @@
 import type { GapVersion } from './HorizontalLayoutContent';
 
 export const gapStyles: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
+  XXL: 'gap-6xl',
+  XL: 'gap-5xl',
+  L: 'gap-3xl',
+  M: 'gap-m',
+  S: 'gap-xs',
+  XS: 'gap-2xs',
   '': '',
 };

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -23,13 +23,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border overflow-hidden relative px-0', className)}
-        defaultPadding="p-default"
+        className={style('box-border overflow-hidden relative px-0 space-y-2xl', className)}
+        defaultPadding="p-6xl"
         {...rest}
       >
-        {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
         {insuranceTabs?.length > 1 ? (
-          <div className="p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md">
+          <div className="p-xs bg-secondary-light w-fit mx-auto rounded-md">
             {insuranceTabs.map((item, i) =>
               renderNavButton({
                 title: item?.title,

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -74,8 +74,8 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-12">
-      <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-6xl">
+      <div className={`w-full flex flex-nowrap gap-3.5 pb-6xl ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderNavButton({
             slide,

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -48,12 +48,12 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
       <div className="container text-m font-light">
         {columns?.length ? (
           <div>
-            <div className="flex items-end relative pl-9 pr-5 text-white">
+            <div className="flex items-end relative pl-3xl pr-lg text-white">
               {joinList(<div className="w-px h-4 bg-gray" />)(columns.map(renderInvestmentColumn))}
-              <div className="absolute right-[30px] w-px h-4 bg-gray" />
+              <div className="absolute right-3xl 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">
+            <div className="border-t border-gray -mt-xs mx-3xl" />
+            <div className="flex justify-between text-primary-text mt-s -mx-5xl">
               {columns.map(renderInvestmentColumnTitle)}
             </div>
           </div>
@@ -83,7 +83,7 @@ const renderInvestmentColumn = (
       {column.cells?.length ? (
         <div
           className={`w-full ${
-            isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-[290px]' : ''
+            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[290px]' : ''
           }`}
         >
           {column.cells.reverse().map(renderInvestmentCell)}
@@ -100,8 +100,8 @@ const getColumnClasses = (
 ): string =>
   [
     cells.length ? 'flex-1' : 'flex-0',
-    cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
-    cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-[22px]',
+    cells.length && !isSecondColumn && !isLastColumn ? 'pl-s' : '',
+    cells.length && !isLastColumn ? 'pr-s pb-3xl' : 'pb-xl',
   ].join(' ');
 
 const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
@@ -111,9 +111,9 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
   return cell.text ? (
     <div
       key={`cell_${i}`}
-      className={`flex-1 flex items-center justify-center relative py-2 ${
+      className={`flex-1 flex items-center justify-center relative py-xs ${
         investmentCellSizeMap[cellSize]
-      } ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-3' : 'px-11'}`}
+      } ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-s' : 'px-5xl'}`}
     >
       <div className="text-center">{cell.text}</div>
     </div>
@@ -123,18 +123,9 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
 const renderInvestmentColumnTitle = (
   column: InvestmentColumn | InvestmentZeroColumn,
   i: number,
-  arr: Array<InvestmentColumn>,
 ) => {
-  const isFirstColumn = i === 0;
-  const isLastColumn = i === arr.length - 1;
-
   return (
-    <div
-      key={`title_${i}`}
-      className={`flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${
-        isLastColumn ? 'mr-3.5' : ' '
-      }`}
-    >
+    <div key={`title_${i}`} className={`flex-1 max-w-[180px] text-center px-xs last:pr-3xl`}>
       {column.title}
     </div>
   );

package/src/components/LinkDocs/LinkDocs.tsx

@@ -5,6 +5,7 @@ import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { adjustHref } from '../../utils/adjustHref';
+import { formatBytes } from '../../utils/formatBytes';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { LinkDocItem } from './LinkDocItem';
@@ -32,7 +33,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     const router = useRouter();
 
     return (
-      <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
         <Headline
           className="!p-0"
           title={title}
@@ -65,6 +66,11 @@ const renderLinkDocItem =
         ? adjustHref(router)(docBlockDef?.attachment?.src)
         : docBlockDef?.href;
 
+    const fileSize =
+      docBlockDef?.docType === 'Attachment'
+        ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
+        : docBlockDef?.fileSize;
+
     return (
       <div
         key={String(i)}
@@ -74,6 +80,7 @@ const renderLinkDocItem =
         <LinkDocItem
           {...docBlockDef}
           href={href}
+          fileSize={fileSize}
           icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
         />
       </div>

package/src/components/LinkDocs/LinkDocs.ui.json

@@ -8,6 +8,9 @@
         "attachment": {
           "src": {
             "ui:widget": "FileWidget"
+          },
+          "fileSize": {
+            "ui:widget": "hidden"
           }
         }
       }

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -25,8 +25,6 @@ export interface AttachmentDoc {
   text?: string;
   /** @title */
   attachment?: Attachment;
-  /** @title размер файла */
-  fileSize?: string;
   /** @default "" */
   target?: Target;
 }

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

@@ -65,6 +65,9 @@ export default {
             version: 'secondary',
           },
           button2,
+          button2,
+          button1,
+          button2,
         ]}
       />
     </div>

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -28,7 +28,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     version = 'primary',
     ...rest
   }) => {
-    const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
+    const containerStyle = version === 'secondary' ? 'p-m min-w-[120px]' : 'min-w-[92px]';
 
     return (
       <BlockWrapper
@@ -40,7 +40,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
         <BaseTile
           className="h-full"
           padding={padding}
-          defaultPadding="p-default"
+          defaultPadding="p-6xl"
           title={
             title ? (
               <Heading
@@ -50,17 +50,17 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               />
             ) : null
           }
-          backImage={image?.src ? <Img image={image} /> : null}
-          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 3 })}
+          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
         >
           {renderDescription(description)}
-          <div className="flex flex-1 gap-s items-center">
+          <div className="flex flex-1 flex-wrap gap-m 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)}
+            {image?.src ? <Img image={image} /> : null}
           </div>
         </BaseTile>
       </BlockWrapper>

package/src/components/MobileAppTile/renderDescription.tsx

@@ -2,7 +2,7 @@ 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">
+    <div className="mb-5 pt-3xs sm:mb-0 sm:pt-0">
       <Text size="text-xl" font-weight="light">
         {description}
       </Text>

package/src/components/MobileAppTile/renderList.tsx

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

package/src/components/OfficeMap/OfficeMap.tsx

@@ -63,7 +63,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
         </div>
         <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
-      <div className="flex justify-between pt-8">
+      <div className="flex justify-between pt-3xl">
         <div className="flex-grow h-full w-full overflow-hidden">
           {point ? <YandexMap points={[point]} className="h-full" /> : null}
         </div>

package/src/components/PictureText/PictureText.tsx

@@ -21,7 +21,7 @@ export const PictureText = JSX<PictureTextProps>(
     <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
-        defaultPadding="p-default"
+        defaultPadding="p-6xl"
         padding={padding}
         headlineVersion={headlineVersion}
         align={align}

package/src/components/PictureText/PictureText.ui.json

@@ -15,6 +15,9 @@
           "ui:widget": "hidden"
         }
       }
+    },
+    "__html": {
+      "ui:widget": "html"
     }
   }
 }

package/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -3,7 +3,7 @@ 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">
+    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl">
       {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null}
       {Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null}
     </div>