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

package/mobile/src/components/BusinessBlock/BusinessCard.tsx

@@ -28,7 +28,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>

package/mobile/src/components/ButtonsBlock/ButtonsBlock.example.json

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": [
+      {
+        "href": "#",
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary",
+        "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+        "iconRight": { "format": "webp", "size": { "width": 24, "height": 24 } }
+      }
+    ]
+  }
+}

package/mobile/src/components/{ButtonBlock/ButtonBlock.tsx → ButtonsBlock/ButtonsBlock.tsx}

@@ -3,12 +3,12 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import type { ButtonBlockContent } from './ButtonBlockContent';
+import type { ButtonsBlockContent } from './ButtonsBlockContent';
 
-interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
+interface ButtonsBlockProps extends ButtonsBlockContent, UniBlockProps {}
 
-export const ButtonBlock = JSX<ButtonBlockProps>(({ button, className, ...rest }) => (
-  <BlockWrapper className={style('!bg-transparent', className)} {...rest}>
-    {renderButtonsSection([button])}
+export const ButtonsBlock = JSX<ButtonsBlockProps>(({ buttons, className, ...rest }) => (
+  <BlockWrapper className={style('!bg-transparent', className)} defaultPadding="p-0" {...rest}>
+    {renderButtonsSection(buttons)}
   </BlockWrapper>
 ));

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

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/ButtonsBlock/ButtonsBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок кнопок
+ */
+export interface ButtonsBlockContent {
+  /** @title Кнопки */
+  buttons?: ButtonWithIconProps[];
+}

package/mobile/src/components/Calculator/Calculator.tsx

@@ -42,7 +42,8 @@ export const Calculator = JSX<CalculatorProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border overflow-hidden relative w-100', className)}
+        className={style('box-border overflow-hidden relative', className)}
+        defaultPadding="p-0"
         {...rest}
       >
         <div className="bg-white">

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -42,9 +42,19 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={style('p-default flex flex-col items-center', className)} {...rest}>
-        {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
-        <form className="w-[468px]" method="POST" action={FORM_URL}>
+      <BlockWrapper
+        className={style('flex flex-col items-center', className)}
+        defaultPadding="p-default"
+        {...rest}
+      >
+        {title ? (
+          <Heading
+            className="pb-5 xl:pb-9 self-start xl:self-center"
+            headingType="h2"
+            title={title}
+          />
+        ) : null}
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput
             name={AMOUNT_KEY}
             valid={!isDisabled}
@@ -55,7 +65,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-6', buttonStyle)}
+              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/mobile/src/components/Carousel/Carousel.tsx

@@ -45,14 +45,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
 
     return (
-      <BlockWrapper
-        className={style(
-          getPaddingStyle(isPadding),
-          'group-data-secondary:bg-primary-main group-data-secondary:text-white',
-          className,
-        )}
-        {...rest}
-      >
+      <BlockWrapper className={className} defaultPadding={getPaddingStyle(isPadding)} {...rest}>
         <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -16,7 +16,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
     const isActive = orderNumber === activeIndex;
 
     return (
-      <BlockWrapper className="flex h-[485px]">
+      <BlockWrapper className="flex h-[485px]" defaultPadding="p-0">
         {isActive ? (
           <div className="relative flex items-center w-full">
             <Headline

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -1,23 +1,24 @@
+import type { CarouselCardContent } from './CarouselCardContent';
+import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { SizeVersion } from '../../model/SizeVersion';
+import { getCardWidth } from './getCardWidth';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Headline } from '../Headline/Headline';
-import type { CarouselCardContent } from './CarouselCardContent';
+import { style } from '../../utils/style';
+import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
-
-const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
-  normal: 'min-w-[970px]',
-  small: 'min-w-[355px]',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
-      className={`flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+      className={style(
+        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
+        getCardWidth(className, carouselVersion),
+        className,
+      )}
     >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
@@ -28,11 +29,14 @@ export const CarouselCard = JSX<CarouselCardProps>(
             className="!p-0"
             title={title}
             description={description}
-            headlineVersion="L"
+            headlineVersion={titleSize}
             align="text-left"
             version={version}
           />
-          {renderButtonsSection([button], { className: 'mt-14' })}
+          {renderButtonsSection([button], {
+            className: 'mt-14 sm:justify-center',
+            isVertical: true,
+          })}
         </div>
       </div>
     </section>

package/mobile/src/components/CarouselCard/getCardWidth.tsx

@@ -0,0 +1,16 @@
+import type { SizeVersion } from '../../model/SizeVersion';
+import { getColSpan } from '../../utils/getColSpan';
+
+const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
+  normal: 'min-w-[970px]',
+  small: 'min-w-[355px]',
+};
+
+export function getCardWidth(className = '', carouselVersion = 'normal') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'w-[375px]';
+  } else {
+    return CARD_WIDTH_MAP[carouselVersion] as string;
+  }
+}

package/mobile/src/components/CarouselCard/titleSize.tsx

@@ -0,0 +1 @@
+export const titleSize = 'XS';

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -7,6 +7,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
 export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
@@ -19,7 +20,10 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
-      className={`border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`}
+      className={style(
+        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        className,
+      )}
       {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/mobile/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -13,7 +13,7 @@ export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlo
 export const CarouselEventCard = JSX<CarouselEventCardProps>(
   ({ className = '', icon, title, description, href, target, ...rest }) => {
     return (
-      <BlockWrapper className={style('w-[365px]', className)} {...rest}>
+      <BlockWrapper className={style('w-[365px]', className)} defaultPadding="p-0" {...rest}>
         <LinkWrapper className="flex flex-col" href={href} target={target}>
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
   CardsListItem,
@@ -23,9 +23,10 @@ const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   ({
+    className,
+    padding,
     additionalDescription,
     cardsList = [],
-    className = '',
     columnsMode = 1,
     description,
     image,
@@ -34,17 +35,21 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   }) => (
     <BlockWrapper
       className={style(
-        'box-border text-left p-9 w-[697px]',
+        'box-border text-left w-[697px]',
         'border border-solid border-gray group-data-secondary:border-white/50',
         className,
       )}
+      defaultPadding="p-0"
       {...rest}
     >
       <BaseTile
+        className="h-full"
+        padding={padding}
+        defaultPadding="p-m"
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
         }
-        backImage={image?.src ? <Img className="m-0" image={image} /> : null}
+        backImage={image?.src ? <Img image={image} /> : null}
       >
         <div className="flex justify-between mb-4">
           {description ? (

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { style } from '../../utils/style';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
@@ -12,33 +13,31 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 10;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`flex w-full p-10 overflow-hidden justify-between ${className}`}
-        {...rest}
-      >
-        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+  ({ className, additionalDescription, description, links, title, ...rest }) => (
+    <BlockWrapper
+      className={style('flex w-full overflow-hidden justify-between', className)}
+      {...rest}
+    >
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+        <Headline
+          isPadding={false}
+          title={title}
+          description={description}
+          as="h1"
+          align="text-left"
+        />
+        {additionalDescription ? (
           <Headline
-            isPadding={false}
-            title={title}
-            description={description}
-            as="h1"
+            className="pt-s"
+            description={additionalDescription}
             align="text-left"
+            isPadding={false}
           />
-          {additionalDescription ? (
-            <Headline
-              className="pt-6"
-              isPadding={false}
-              description={additionalDescription}
-              align="text-left"
-            />
-          ) : null}
-        </div>
-        {links?.length ? renderLinks(links) : null}
-      </BlockWrapper>
-    );
-  },
+        ) : null}
+      </div>
+      {links?.length ? renderLinks(links) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderLinks = (links: LinkProps[]) => {
@@ -47,6 +46,7 @@ const renderLinks = (links: LinkProps[]) => {
   return (
     <Carousel
       className="min-w-[832px] w-[832px]"
+      version=""
       isBlur={false}
       isCyclic={true}
       itemCount={itemCount}

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,17 +1,18 @@
-import { JSX } from '@redneckz/uni-jsx';
+import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { Picture } from '../../model/Picture';
 import { Text } from '../../ui-kit/Text/Text';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -41,10 +42,11 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           align,
           className,
         )}
+        defaultPadding="p-0"
         version={version}
         {...rest}
       >
-        <LinkWrapper className="p-6" href={href} target={target}>
+        <LinkWrapper className="p-s" href={href} target={target}>
           {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
@@ -52,7 +54,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+          className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
           isVertical: isFullWidth,
         })}
       </BlockWrapper>
@@ -63,9 +65,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} />
-    ) : null}
+    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
   </div>
 );
 

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -13,7 +13,11 @@ export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, U
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], href, target, ...rest }) => {
     return (
-      <BlockWrapper className={style('border border-gray', className)} {...rest}>
+      <BlockWrapper
+        className={style('border border-gray', className)}
+        defaultPadding="p-0"
+        {...rest}
+      >
         <LinkWrapper className="flex" href={href} target={target}>
           <div className="w-[200px] min-w-[200px] self-center">
             {icon?.icon ? <Img image={icon} /> : null}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -29,10 +29,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative box-border p-default group-data-gray:bg-main-divider/50',
+          'relative box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
+        defaultPadding="p-default"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -9,7 +9,7 @@ export interface CarouselRichTextCardProps extends CarouselRichTextCardContent,
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('p-9 border border-gray h-full min-w-96', className)} {...rest}>
+    <BlockWrapper className={style('border border-gray h-full min-w-96', className)} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -28,11 +28,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={style(
-          'relative border border-gray flex flex-col',
-          getPaddingStyle(isHighlighting),
-          className,
-        )}
+        className={style('relative border border-gray flex flex-col', className)}
+        defaultPadding={getPaddingStyle(isHighlighting)}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
@@ -16,8 +17,13 @@ interface RenderContactsColumnProps {
 }
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
-  ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`flex p-default ${className}`} version={version} {...rest}>
+  ({ className, contacts, info, version = 'secondary', ...rest }) => (
+    <BlockWrapper
+      className={style('flex', className)}
+      defaultPadding="p-default"
+      version={version}
+      {...rest}
+    >
       {info?.length ? renderBlocks(info) : null}
       {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>
@@ -49,7 +55,7 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
               </Paragraph>
             </div>
           ) : null}
-          {button ? <Button className="mt-6" {...button} /> : null}
+          {button?.href ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/mobile/src/components/DepositFiltration/DepositFiltration.example.json

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

package/mobile/src/components/DepositFiltration/DepositFiltration.tsx

@@ -53,7 +53,12 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
     );
 
     return (
-      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+      <BlockWrapper
+        className={style(className)}
+        defaultPadding="p-0"
+        version="transparent"
+        {...rest}
+      >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -26,11 +26,8 @@ const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button, ...rest }) => (
     <BlockWrapper
-      className={style(
-        'flex flex-col justify-center items-center',
-        getErrorBlockStyle(button?.text as string),
-        className,
-      )}
+      className={style('flex flex-col justify-center items-center', className)}
+      defaultPadding={getErrorBlockStyle(button?.text as string)}
       version="transparent"
       {...rest}
     >

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -11,15 +11,12 @@ import { renderTableHeader } from './renderTableHeader';
 export interface ExchangeRateOfficeProps extends ExchangeRateOfficeContent, UniBlockProps {}
 
 export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
-  ({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+  ({ className, currencies = [], actuality = '', officeName = '', ...rest }) => {
     const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
 
     return (
-      <BlockWrapper
-        className={style('font-sans text-primary-text py-10 bg-white', className)}
-        {...rest}
-      >
-        <div className="flex flex-row flex-grow-0 justify-between mx-10 mb-8">
+      <BlockWrapper className={className} {...rest}>
+        <div className="flex flex-row flex-grow-0 justify-between mb-8">
           <Heading
             headingType="h4"
             title={'Курс обмена валют в ' + officeName}
@@ -31,7 +28,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             </Text>
           </div>
         </div>
-        <div className="flex flex-row ml-8 mr-14 pt-4 text-left">
+        <div className="flex flex-row pt-4 text-left">
           {fourRates.length > 0 ? (
             <table className={style('h-fit w-fit', className)}>
               <thead>

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -72,7 +72,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
             ),
         })}
         {button?.text ? (
-          <Button className="py-4 mr-1" version={button?.version} {...button}>
+          <Button className="py-4" version={button?.version} {...button}>
             {button.text}
           </Button>
         ) : null}

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { BaseTile } from '../BaseTile/BaseTile';
+import { style } from '../../utils/style';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
@@ -25,16 +26,15 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     currencyRatesSell.push({ currency: { currency: Currency.RUB } });
 
     return (
-      <BlockWrapper className={`p-9 box-border min-h-80 ${className}`} {...rest}>
+      <BlockWrapper className={style('box-border min-h-80', className)} {...rest}>
         <BaseTile
-          title={
-            <Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4 mb-5" />
-          }
+          className="h-full"
+          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex">
-            <div className="mr-14 pt-4">
+          <div className="flex gap-xxl">
+            <div>
               {currencyRates ? (
-                <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
+                <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation address={exchangeRates?.address} />
             </div>