@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

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

@@ -20,11 +20,11 @@ const investmentCellColorMap: Record<InvestmentCellColor, string> = {
 };
 
 const investmentCellSizeMap: Record<InvestmentCellSize, string> = {
-  XS: 'h-[40px]',
-  S: 'h-[68px]',
-  M: 'h-[102px]',
-  L: 'h-[136px]',
-  XL: 'h-[204px]',
+  XS: 'h-10',
+  S: 'h-16',
+  M: 'h-24',
+  L: 'h-32',
+  XL: 'h-52',
 };
 
 export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProps {}
@@ -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,14 +33,14 @@ 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}
           description={description}
           align={align}
           headlineVersion="M"
           as="h2"
+          isPadding={false}
         />
         {documents?.length ? (
           <div
@@ -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)}
@@ -72,8 +78,10 @@ const renderLinkDocItem =
         role="listitem"
       >
         <LinkDocItem
-          {...docBlockDef}
+          text={docBlockDef?.text}
+          target={docBlockDef?.target}
           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-32' : 'min-w-24';
 
     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
@@ -53,7 +53,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
         >
           {renderDescription(description)}
-          <div className="flex flex-1 flex-wrap 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} />

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

@@ -51,23 +51,23 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
 
   return (
-    <div className={`flex flex-col font-sans bg-white w-full ${className}`}>
-      <div className="flex flex-col px-12 pt-12">
+    <div className={`flex flex-col font-sans w-full ${className}`}>
+      <div className="flex flex-col gap-m p-6xl pb-3xl">
         <div className="flex justify-between">
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l font-light pt-4">
+        <div className="flex text-l font-light">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>
-        <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
+        <div className="flex">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
-      <div className="flex justify-between pt-8">
+      <div className="flex justify-between">
         <div className="flex-grow h-full w-full overflow-hidden">
           {point ? <YandexMap points={[point]} className="h-full" /> : null}
         </div>
-        <div className="w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col">
+        <div className="w-[434px] min-w-[434px] p-6xl pt-0 flex flex-col">
           {workScheduleWeek.map(renderDay)}
         </div>
       </div>

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -14,19 +14,19 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={style('flex flex-col', className)} {...rest}>
-      {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
+    <BlockWrapper className={style('flex flex-col gap-lg', className)} {...rest}>
+      {title ? <Heading headingType="h5" title={title} /> : null}
       {servicesList?.length ? (
-        <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>
+        <ul className="list-none space-y-lg">{servicesList.map(renderListItems)}</ul>
       ) : null}
     </BlockWrapper>
   ),
 );
 
 const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
-  <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
+  <li key={`list_item_${String(i)}`} className="flex gap-s list-none ">
     {itemList.icon ? (
-      <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
+      <Img className="min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
     {itemList.label ? (
       <Text size="text-l" font="font-light">

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/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/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/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/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -29,43 +29,42 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
+    <BlockWrapper
+      className={style('box-border text-left space-y-s', className)}
+      version={version}
+      {...rest}
+    >
+      <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
+        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
       </div>
-      <div className="w-full">
+      <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
         {renderBlock('Адрес', address, 'GeolocationIcon')}
         {renderBlock('Телефон', telephone, 'PhoneIcon')}
         {renderBlock('E-mail', email, 'MailIcon')}
-        {button?.text
-          ? renderButtonsSection([button], {
-              className: 'mb-6',
-            })
-          : null}
+        {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
   ),
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+  <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider pb-5 my-5">
+  <div className="border-b border-main-divider pb-5">
     <RichText __html={__html} />
   </div>
 );
 
 const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex mb-4">
-    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col first:pb-1">
+  <div className="flex gap-m">
+    <Icon iconVersion="black" name={iconName} width="24" height="24" />
+    <div className="flex flex-col">
       <Text size="text-m" font="font-light">
         {blockName}
       </Text>

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

@@ -45,10 +45,13 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           unfoldedByDefault={isExpanded}
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={style('gap-5 [&>*]:p-0', foldableSectionStyles)}
+              className={style('gap-5', foldableSectionStyles)}
               isUnfolded={isUnfolded}
             >
-              {renderChildren(rest)}
+              {renderChildren({
+                ...rest,
+                extraProps: { className: 'w-full', padding: 'p-0' },
+              })}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>
@@ -125,11 +128,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 → RadioButtons.tsx}

@@ -1,15 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
+import { style } from '../../utils/style';
 
-export const RenderRadioButtons = JSX(() => {
+interface RadioButtonsProps {
+  className: string;
+}
+
+export const RadioButtons = JSX(({ className }: RadioButtonsProps) => {
   const [selectedOption, setSelectedOption] = useState('option2');
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
-    <div>
+    <div className={style('order-4', className)}>
       <Radio
-        className="mb-2"
+        className="mb-xs"
         name="contractType"
         text="Простое хранение"
         value="option1"

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

@@ -21,8 +21,8 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex justify-between gap-4 mb-6">
-      <div className="max-w-[396px] w-1/2">
+    <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}
           fieldValue="code"
@@ -32,7 +32,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
           label="Регион"
         />
       </div>
-      <div className="max-w-[396px] w-1/2">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={branches}
           fieldValue="branchCode"

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
 
 const ITEMS = ['От 1 дня', 'До 365 дней'];
 const MIN = 1;
@@ -11,8 +12,10 @@ interface RentalPeriodProps {
 }
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
-  <div className="mb-6">
-    <span className="block text-m font-light mb-1">Срок аренды</span>
+  <div className="order-1">
+    <Text size="text-m" font="font-light">
+      Срок аренды
+    </Text>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));

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

@@ -21,8 +21,8 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex justify-between mb-6">
-        <div className="mr-4 w-full">
+      <div className="flex flex-col sm:flex-row gap-4 order-1">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}
             fieldLabel="volume"
@@ -32,7 +32,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
             placeholder="Выберите размер"
           />
         </div>
-        <div className="w-full">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={safeBoxCases}
             fieldLabel="safeBoxCasesSize"

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/SafeDepositRentalFields.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { RegionsAndBranches } from './RegionsAndBranches';
-import { RenderRadioButtons } from './RenderRadioButtons';
+import { RadioButtons } from './RadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
 import { Text } from '../../ui-kit/Text/Text';
@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="flex-1 mr-9">
+      <div className="contents sm:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -51,12 +51,14 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           selectedBoxSize={selectedBoxSize}
           onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
         />
-        <Text size="text-l" font="font-light" color="text-secondary-text">
-          Тип договора
-        </Text>
-        <div className="flex justify-between items-center mt-5">
-          <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onClick} />
+        <div className="order-4">
+          <Text size="text-l" font="font-light" color="text-secondary-text">
+            Тип договора
+          </Text>
+        </div>
+        <div className="contents sm:flex justify-between items-center">
+          <RadioButtons className="mb-4 sm:mb-0" />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>
       </div>
     );

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

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex justify-between align-top mb-6">
+    <div className="flex flex-col sm:flex-row gap-x-9 align-top mb-6">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

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

@@ -9,29 +9,32 @@ export interface SafeDepositRentalTotalProps {
 
 export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
   const price = calculatePrice(days, tariffs);
+  const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="flex flex-col justify-between">
-      <div className="flex">
-        {renderTotal('Аренда за', days, 'mr-11')}
+    <div className="contents sm:flex flex-col justify-between order-2">
+      <div className="flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none">
+        {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <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">
-          На рисунки изображена пачка<br></br> листов формата А4
+      <span className="sm:hidden order-3 mb-2 text-s-light text-secondary-text">
+        {imageDescription}
+      </span>
+      <div className="flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-[246px]" />
+        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+          {imageDescription}
         </span>
       </div>
     </div>
   );
 });
 
-const renderTotal = (label: string, total: string | number, className = '') => {
+const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className={className}>
-      <div className="text-m font-light text-secondary-text mb-1">{label}</div>
-      <span className="text-h3 text-primary-text">{total}</span>
+    <div className="flex justify-between items-center gap-y-1 sm:flex-col sm:items-start">
+      <div className="text-l font-light text-secondary-text">{label}</div>
+      <span className="text-l sm:text-h3 text-primary-text">{total}</span>
     </div>
   );
 };