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

package/mobile/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/mobile/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/mobile/src/components/LinkDocs/LinkDocs.ui.json

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

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/PictureText/PictureText.ui.json

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

package/mobile/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>

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -20,7 +20,7 @@ export const Placeholder = JSX<PlaceholderProps>(
         align="text-left"
         isPadding={false}
       />
-      <figure className="m-0 mt-m min-w-[80%]">{renderShimmer()}</figure>
+      <figure className="m-0 mt-xl min-w-[80%]">{renderShimmer()}</figure>
     </BlockWrapper>
   ),
 );
@@ -34,7 +34,7 @@ const renderShimmerItem = (width: number, index: number) => (
   <div
     key={String(index)}
     style={{ width: `${width || 100}%` }}
-    className="h-4 mt-2 bg-secondary-light"
+    className="h-4 mt-xs bg-secondary-light"
   />
 );
 

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

@@ -11,8 +11,8 @@ export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 export const ProductBlock = JSX<ProductBlockProps>(
   ({ className, padding, backwardButton, ...rest }) => (
     <BlockWrapper
-      className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
-      defaultPadding="p-default"
+      className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
+      defaultPadding="p-6xl"
       padding={padding}
       {...rest}
     >

package/mobile/src/components/ProductBlock/ProductBlock.ui.json

@@ -8,6 +8,16 @@
         "ui:field": "icon"
       }
     },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    },
     "__html": {
       "ui:widget": "html"
     }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -20,7 +20,7 @@ export const ProductTile = JSX<ProductTileProps>(
     <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         headlineVersion={headlineVersion}
         isTabularBenefits={isTabularBenefits}

package/mobile/src/components/ProductTile/ProductTile.ui.json

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

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -34,7 +34,7 @@ export const PromoTile = JSX<PromoTileProps>(
         }
         buttons={renderButtonsSection(buttons)}
       >
-        {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
+        {date ? <div className="text-s mb-xs">{formatDate(date)}</div> : null}
         <div className="text-l">{description}</div>
       </BaseTile>
     </BlockWrapper>

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -125,11 +125,11 @@ const renderPrimaryFoldButton = ({
     <button
       className={style(
         'border-none bg-transparent px-0 flex justify-between items-center w-full group/button',
-        labelIcon?.icon ? 'py-2' : 'py-5',
+        labelIcon?.icon ? 'py-xs' : 'py-lg',
       )}
       onClick={onToggle}
     >
-      <div className="flex items-center group-hover/button:text-primary-main gap-3">
+      <div className="flex items-center group-hover/button:text-primary-main gap-s">
         {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
           <Text size="text-h6" font="font-normal">

package/mobile/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -9,7 +9,7 @@ export const RenderRadioButtons = JSX(() => {
   return (
     <div>
       <Radio
-        className="mb-2"
+        className="mb-xs"
         name="contractType"
         text="Простое хранение"
         value="option1"

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -43,13 +43,13 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     return (
       <BlockWrapper className={className} defaultPadding="" {...rest}>
-        <div className="px-8 py-12">
+        <div className="p-4xl">
           {title ? (
             <Heading
               title={title}
               headingType="h3"
               as="h2"
-              className="text-primary-text mb-2.5 text-center"
+              className="text-primary-text mb-s text-center"
             />
           ) : null}
           <SafeDepositRentalForm

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
 
-        <span className="text-s font-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s font-light text-white opacity-80 mt-xs inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -8,11 +8,11 @@ import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step } from './StepsBlockContent';
+import { StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 import { style } from '../../utils/style';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { StepsBlockContent } from './StepsBlockContent';
 import { UniBlockProps } from '../../model/JSXBlock';
 
 type StepIconVersion = Record<'icon' | 'image', string>;
@@ -24,7 +24,7 @@ const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   normal: '',
-  small: 'min-h-12',
+  small: 'min-h-6xl',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
@@ -43,8 +43,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={style('box-border flex flex-col gap-2', className)}
-      defaultPadding="p-default"
+      className={style('box-border flex flex-col gap-xs', className)}
+      defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
@@ -125,7 +125,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={style(
         iconAreaSize,
         containerStyle,
-        'z-10 mr-3 flex justify-center content-center',
+        'z-10 mr-s flex justify-center content-center',
       )}
     >
       <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -48,20 +48,20 @@ const renderDefaultStep =
       <div
         key={String(i)}
         className={style(
-          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden',
+          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden space-y-3xl',
           getContainerWidth(arr.length),
         )}
       >
-        <div className={style(button?.text ? 'mb-8' : '', 'text-center')}>
+        <div className="text-center space-y-xs">
           {label ? (
-            <div className="mb-2">
+            <div>
               <Text size="text-h6">{label}</Text>
             </div>
           ) : null}
-          <div className="flex flex-col items-center">
+          <div className="flex flex-col items-center gap-3xs">
             {description ? <div className={styleMap.description}>{description}</div> : null}
             <List
-              className={style(description ? `${styleMap.description} mt-0.5` : 'text-h6')}
+              className={styleMap.description}
               items={items}
               listItemSize="M"
               isDotted={isDotted}
@@ -70,7 +70,7 @@ const renderDefaultStep =
         </div>
         {button?.text && !isMainButton ? (
           <Button
-            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            className="box-border py-s h-12 w-full max-w-[240px] mt-auto"
             version={version as ButtonVersion}
             {...button}
           >
@@ -81,4 +81,4 @@ const renderDefaultStep =
     );
   };
 
-const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[200px]');

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -4,7 +4,7 @@ import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
 const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
 const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -20,7 +20,7 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
   <div>
-    {label ? <div className="mb-2">{label}</div> : null}
+    {label ? <div className="mb-xs">{label}</div> : null}
     {description ? <div className="text-s text-secondary-text">{description}</div> : null}
   </div>
 );

package/mobile/src/components/TariffsTable/TableTileHeader.tsx

@@ -4,7 +4,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
 export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
-  <div className="mb-2">
+  <div className="mb-xs">
     {title ? (
       <Text size="text-l" font="font-light">
         {title}

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -27,7 +27,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <section
-        className={`p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+        className={`p-6xl space-3xl bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
       >
         <Headline
           title={title}
@@ -35,7 +35,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
           headlineVersion="M"
           align="text-left"
           isPadding={false}
-          className="mb-8"
         />
         {orientation === 'vertical' ? (
           <TariffsTableVertical tiles={tiles} {...rest} />

package/mobile/src/components/TariffsTable/TariffsTableRenderCell.tsx

@@ -49,7 +49,7 @@ export const renderCellInner =
     return (
       <div
         key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
+        className={cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`}
       >
         {i > 0 ? <div className="h-5" /> : null}
         {renderCell({

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -35,10 +35,10 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         tableInner={tableInner}
         {...rest}
       >
-        <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
+        <div className={`text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" />
+              <Img className="mr-m max-w-6" image={header.icon} width="24" height="24" />
             ) : null}
             {header?.title ? <div className="text-m font-light">{header?.title}</div> : null}
           </div>

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -14,7 +14,7 @@ export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...r
     <TableTileHeader title={tile?.header?.title} />
     {tile?.data?.length
       ? tile.data.map((cell, i) => (
-          <div key={String(i)} className="mb-2">
+          <div key={String(i)} className="mb-xs">
             {renderCell(cell, rest)}
           </div>
         ))

package/mobile/src/components/Tile/Tile.tsx

@@ -11,7 +11,7 @@ export const Tile = JSX<TileProps>(
     <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}

package/mobile/src/components/Tile/Tile.ui.json

@@ -1,5 +1,15 @@
 {
   "content": {
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    },
     "__html": {
       "ui:widget": "html"
     }

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -39,7 +39,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
           align && alignStyle[align],
           className,
         )}
-        defaultPadding={isPadding ? 'p-default' : ''}
+        defaultPadding={isPadding ? 'p-6xl' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/mobile/src/content-page-repository/transformDocument.ts

@@ -5,6 +5,7 @@ import { Attachment } from '../model/Attachment';
 import type { TransformationOptions } from './TransformationOptions';
 
 const copyFile = util.promisify(fs.copyFile);
+const stat = util.promisify(fs.stat);
 
 export async function transformDocument(
   attachment: Attachment,
@@ -19,6 +20,7 @@ export async function transformDocument(
   const input = path.join(path.dirname(pagePath), attachment.src);
   const docRelativePath = path.relative(contentDir, input);
   const output = path.join(publicDir, docRelativePath);
+  const inputFileSize = (await stat(input)).size;
 
   try {
     await copyFile(input, output);
@@ -33,5 +35,6 @@ export async function transformDocument(
   return {
     ...attachment,
     src,
+    fileSize: inputFileSize,
   };
 }

package/mobile/src/content-page-repository/transformImg.ts

@@ -77,7 +77,7 @@ const computeTransformationChain = ({
   pipe(
     resizeImg(isPictureSizeEmpty(size) ? containerSize : size),
     alignImg({ containerSize, alignment }),
-    (_) => (format ? _.toFormat(format, { ...options, nearLossless: true }) : _),
+    (_) => (format ? _.toFormat(format, { ...options, lossless: true }) : _),
   );
 
 const pipe = (...operations: Array<(chain: Sharp) => Promise<Sharp> | Sharp>) =>

package/mobile/src/model/Attachment.ts

@@ -1,4 +1,6 @@
 export interface Attachment {
   /** @title */
   src?: string;
+  /** @title размер файла */
+  fileSize?: number;
 }

package/mobile/src/model/ContentPageDef.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from './BlockVersion';
-
 /**
  * @title Цветовая палитра
  * @enumNames ["", "Частным клиентам", "Бизнес клиентам", "Экосистема Своё"]
@@ -9,10 +7,9 @@ export type ColorPalette = '' | 'pc' | 'bc' | 'eo';
 export interface BaseBlockDef extends Slot {
   type?: string;
   content?: Record<string, any>;
-  version?: BlockVersion;
   hidden?: boolean;
   anchor?: string;
-  labels?: string[];
+  labels?: string[]; // TODO: Remove and refactor group tabs
 }
 
 export interface BlockDef extends BaseBlockDef {

package/mobile/src/model/JSXBlock.ts

@@ -8,9 +8,9 @@ import type { VNode } from './VNode';
 
 /**
  * @title Внутренний отступ
- * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Нулевой"]
+ * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Оч. маленький", "Нулевой"]
  */
-export type UniBlockPadding = '' | 'p-lg' | 'p-m' | 'p-s' | 'p-xs' | 'p-0';
+export type UniBlockPadding = '' | 'p-3xl' | 'p-xl' | 'p-m' | 'p-xs' | 'p-0';
 
 export interface UniBlockContent {
   version?: BlockVersion;