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

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

@@ -2,9 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { PlaceholderContent } from './PlaceholderContent';
 
@@ -13,27 +10,19 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, title, description = 'Блок в разработке...', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style(
-          'p-9 box-border',
-          className,
-          getTileRightPadding(className),
-          getTileMinHeight(className),
-        )}
-        {...rest}
-      >
-        <Headline
-          className="!p-0 max-w-[600px]"
-          title={title}
-          description={description}
-          headlineVersion={getTileHeadingType(className)}
-        />
-        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
-      </BlockWrapper>
-    );
-  },
+  ({ className, title, description = 'Блок в разработке...', ...rest }) => (
+    <BlockWrapper className={style('box-border', className)} {...rest}>
+      <Headline
+        className="max-w-[600px]"
+        title={title}
+        description={description}
+        headlineVersion="L"
+        align="text-left"
+        isPadding={false}
+      />
+      <figure className="m-0 mt-m min-w-[80%]">{renderShimmer()}</figure>
+    </BlockWrapper>
+  ),
 );
 
 const renderShimmer = (size = 3) =>

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

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
-import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
   <BlockWrapper
-    className={style('overflow-hidden p-default flex flex-col gap-10 box-border', className)}
+    className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
+    defaultPadding="p-default"
     {...rest}
   >
     {backwardButton?.text
@@ -19,6 +20,6 @@ export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton,
           !rest.version || rest.version === 'primary' ? 'primary' : 'white',
         )
       : null}
-    <ProductBlockInner className="grow" {...rest} />
+    <BaseProductTile className="grow h-full" {...rest} />
   </BlockWrapper>
 ));

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,37 +1,12 @@
-import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
-import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
-
-export type ProductBlockInnerContent = HeadlineProps &
-  RichTextProps &
-  ListContent &
-  ButtonContent &
-  ImageContent &
-  BulletsProps & {
-    /**
-     * @title Список преимуществ
-     * @minItems 2
-     * @maxItems 4
-     */
-    benefits?: BenefitItemProps[];
-    benefitsVersion?: IconVersion;
-    /** @title Лейбл (моб.) */
-    label?: string;
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
+import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
-  ProductBlockInnerContent & {
+  BaseProductTileContent & {
     /** @title Кнопка возврата */
     backwardButton?: BackwardButtonProps;
   };

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,34 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import { style } from '../../utils/style';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className = '', slides = [], ...rest }) => {
-    const galleryBlocks = slides.map((s) => s.productBlock);
-
-    return (
-      <BlockWrapper
-        className={`box-border py-6 overflow-hidden relative w-100 mb-6 ${className}`}
-        {...rest}
-      >
-        <SwipeListControl gap={0} padding={0}>
-          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
-        </SwipeListControl>
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderProductBlock = (block: ProductBlockInnerContent, i: number) => (
-  <ProductBlockInner
-    key={String(i)}
-    className="z-10 px-5 group-data-secondary:text-white"
-    {...block}
-  />
-);
+export const ProductGallery = JSX<ProductGalleryProps>(({ className, slides = [], ...rest }) => (
+  <BlockWrapper
+    className={style('overflow-hidden relative', className)}
+    defaultPadding="p-m"
+    {...rest}
+  >
+    <SwipeListControl gap={0} padding={0}>
+      {slides
+        .map((s) => s.productBlock)
+        .map((_, i) => (
+          <div key={String(i)} className="box-border h-full" role="listitem">
+            <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
+          </div>
+        ))}
+    </SwipeListControl>
+  </BlockWrapper>
+));

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,5 +1,5 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /** @title Кнопка под слайдом */
 export interface ProductGalleryNav {
@@ -16,7 +16,7 @@ export interface ProductSlide {
   /** @title Превью содержимого слайда на навигации */
   nav?: ProductGalleryNav;
   /** @title Содержимое слайда */
-  productBlock: ProductBlockInnerContent;
+  productBlock: BaseProductTileContent;
 }
 
 /**

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

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { Benefit, ProductTileContent } from './ProductTileContent';
 import { renderAdditionalDescription } from './renderAdditionalDescription';
@@ -28,8 +27,7 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => (
     <BlockWrapper
       className={style(
-        'overflow-hidden p-9 box-border relative min-h-[364px] flex flex-col justify-between',
-        getTileRightPadding(className),
+        'overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between',
         className,
       )}
       {...rest}

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

@@ -1,12 +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 { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { PromoTileContent } from './PromoTileContent';
 
@@ -14,41 +11,31 @@ export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
 export const PromoTile = JSX<PromoTileProps>(
   ({
-    className = '',
+    className,
     title = 'Акции и спецпредложения',
-    date,
     description,
-    as,
+    headlineVersion = 'S',
+    date,
     buttons = [],
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'p-9 box-border',
-        className,
-        getTileRightPadding(className),
-        getTileMinHeight(className),
-      )}
-      {...rest}
-    >
+    <BlockWrapper className={style('box-border', className)} {...rest}>
       <BaseTile
+        className="h-full"
         title={
           title ? (
             <Headline
-              className="!p-0 max-w-[600px]"
               title={title}
-              headlineVersion={getTileHeadingType(className)}
+              headlineVersion={headlineVersion}
               align="text-left"
-              as={as || 'h2'}
+              isPadding={false}
             />
           ) : null
         }
         buttons={renderButtonsSection(buttons)}
       >
-        <div className="mt-1.5">
-          {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
-          <div className="text-l">{description}</div>
-        </div>
+        {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
+        <div className="text-l">{description}</div>
       </BaseTile>
     </BlockWrapper>
   ),

package/mobile/src/components/PromoTile/PromoTileContent.ts

@@ -1,13 +1,12 @@
-import type { DescriptionProps } from '../../model/HeadlineType';
+import type { DescriptionProps, HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Акции
  */
 export type PromoTileContent = UniBlockContent &
-  HeadingCommonProps &
+  HeadlineProps &
   DescriptionProps &
   ButtonContent & {
     /** @title Дата публикации */

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -29,11 +29,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper
-      className={style('box-border text-left p-9', className)}
-      version={version}
-      {...rest}
-    >
+    <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
       <div className="w-full flex justify-between">
         {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
         {renderIconBlock(icon)}

package/mobile/src/components/RichTextBlock/RichTextBlock.tsx

@@ -10,7 +10,7 @@ export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
   const { __html, richVersion, ...rest } = props;
 
   return (
-    <BlockWrapper {...rest}>
+    <BlockWrapper defaultPadding="p-0" {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   );

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

@@ -9,13 +9,13 @@ import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconProps } from '../../ui-kit/Icon/IconProps';
-import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
 import { labelSize } from './labelSize';
+import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
@@ -27,6 +27,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     className = '',
     label = 'Развернуть',
     labelIcon,
+    labelIconBgVersion,
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
@@ -35,6 +36,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     return (
       <BlockWrapper
         className={style('w-full', rollupItemStyles, className)}
+        defaultPadding="p-0"
         tag="div"
         version="transparent"
         {...rest}
@@ -51,7 +53,14 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle })
+            renderFoldButton({
+              version,
+              label,
+              labelIcon,
+              labelIconBgVersion,
+              isUnfolded,
+              onToggle,
+            })
           }
         />
       </BlockWrapper>
@@ -67,6 +76,7 @@ interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
   labelIcon?: IconProps;
+  labelIconBgVersion?: IconBgVersion;
   isPadding?: boolean;
 }
 
@@ -74,6 +84,7 @@ const renderFoldButton = ({
   version,
   label: defaultLabel,
   labelIcon,
+  labelIconBgVersion,
   isUnfolded,
   onToggle,
 }: FoldButtonProps) => {
@@ -83,6 +94,7 @@ const renderFoldButton = ({
     renderPrimaryFoldButton({
       label,
       labelIcon,
+      labelIconBgVersion,
       icon: getIconName(isUnfolded),
       onToggle,
     })
@@ -97,33 +109,29 @@ const renderFoldButton = ({
 
 interface PrimaryFoldButtonProps {
   label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
   icon?: IconName;
   onToggle?: () => void;
-  labelIcon?: Picture;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }: PrimaryFoldButtonProps) => {
-  const iconWidth = String(labelIcon?.size?.width || 24);
-  const iconHeight = String(labelIcon?.size?.height || 24);
-  const iconName = labelIcon?.icon;
-
+const renderPrimaryFoldButton = ({
+  label,
+  labelIconBgVersion,
+  icon,
+  onToggle,
+  labelIcon,
+}: PrimaryFoldButtonProps) => {
   return (
     <button
       className={style(
-        'border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button',
-        iconName ? 'py-2' : 'py-5',
+        'border-none bg-transparent px-0 flex justify-between items-center w-full group/button',
+        labelIcon?.icon ? 'py-2' : 'py-5',
       )}
       onClick={onToggle}
     >
       <div className="flex items-center group-hover/button:text-primary-main">
-        {iconName ? (
-          <RoundedIcon
-            name={iconName}
-            width={iconWidth}
-            height={iconHeight}
-            iconVersion={labelIcon?.iconVersion}
-          />
-        ) : null}
+        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
           <Text size={labelSize} font="font-normal">
             {label}

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

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "labelIcon": {
+      "ui:field": "icon"
+    }
+  }
+}

package/mobile/src/components/RollupItem/RollupItemContent.ts

@@ -1,6 +1,7 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { IconProps } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -11,5 +12,6 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
-    labelIcon?: IconProps; // TODO: только для мобильной версии
+    labelIcon?: Picture; // TODO: только для мобильной версии
+    labelIconBgVersion?: IconBgVersion;
   };

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

@@ -0,0 +1,7 @@
+import type { Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+
+export const renderRoundedIcon = (icon?: Picture, iconBgVersion?: IconBgVersion) => (
+  <RoundedIcon {...icon} iconBgVersion={iconBgVersion} />
+);

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useSafeBoxes } from './useSafeBoxes';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -9,6 +8,7 @@ import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
 import { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import { Region, useGetRegions } from './useGetRegions';
+import { useSafeBoxes } from './useSafeBoxes';
 import { getBranch, getCoordinates } from './utils';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
@@ -41,7 +41,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
     const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
 
     return (
-      <BlockWrapper className={className} {...rest}>
+      <BlockWrapper className={className} defaultPadding="" {...rest}>
         <div className="px-8 py-12">
           {title ? (
             <Heading

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

@@ -37,7 +37,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`box-border px-4 py-6 flex flex-col ${className}`}
+      className={`box-border flex flex-col ${className}`}
+      defaultPadding="px-4 py-6"
       version={version}
       {...rest}
     >

package/mobile/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -8,15 +8,13 @@ import type { SwipeListControlBlockContent } from './SwipeListControlBlockConten
 interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
 
 export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
-  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, version, ...rest }) => {
-    return (
-      <BlockWrapper version={version} {...rest}>
-        <SwipeListControl listType={listType} showDots={showDots} version={version}>
-          {renderChildren({ ...rest, options })}
-        </SwipeListControl>
-      </BlockWrapper>
-    );
-  });
+  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, version, ...rest }) => (
+    <BlockWrapper version={version} defaultPadding="p-0" {...rest}>
+      <SwipeListControl listType={listType} showDots={showDots} version={version}>
+        {renderChildren({ ...rest, options })}
+      </SwipeListControl>
+    </BlockWrapper>
+  ));
 
 SwipeListControlBlock.childrenTypes = {
   exclude: ['SwipeListControlBlock'],

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

@@ -44,6 +44,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
       className={`relative box-border flex gap-x-1 w-full ${
         isSticky ? 'sticky top-1 z-20' : ''
       } ${className}`}
+      defaultPadding="p-0"
       role="tablist"
       {...rest}
     >

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

@@ -18,23 +18,19 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
     buttonClassName: 'w-12 h-12',
   });
 
-const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
-  const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
-
-  return (
-    <div>
-      {label ? <div className={labelClassName}>{label}</div> : null}
-      {description ? <div className="text-s text-secondary-text">{description}</div> : null}
-    </div>
-  );
-};
+const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
+  <div>
+    {label ? <div className="mb-2">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+  </div>
+);
 
 const renderImgCellData = ({ image }: ImageContent) =>
-  image?.src ? <Img image={{ ...image, className: 'm-0' }} /> : null;
+  image?.src ? <Img image={image} className="m-0" imageClassName="m-0" /> : null;
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-m"
+    className="flex flex-col justify-between items-start text-m pl-2 text-base"
     isDotted={isDotted ?? true}
     {...rest}
   />

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

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
 export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
-  <div className="flex gap-2.5 mb-2">
-    {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+  <div className="mb-2">
+    {title ? <Text size="text-l-light">{title}</Text> : null}
     {icon ? <Img className="ml-auto min-w-6" image={icon} width="24" height="24" /> : null}
   </div>
 ));

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { Headline } from '../Headline/Headline';
 import type {
   CellDef,
   TariffsTableColumn,
@@ -24,16 +24,20 @@ export const TariffsTable = JSX<TariffsTableProps>(
   }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-5';
+    const headingMargin = description ? 'mb-2' : 'mb-8';
 
     return (
       <section
-        className={`px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+        className={`p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
       >
-        {title ? (
-          <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
-        ) : null}
-        {description ? <div className="mb-5 text-center text-m">{description}</div> : null}
+        <Headline
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="text-left"
+          isPadding={false}
+          className="mb-8"
+        />
         {orientation === 'vertical' ? (
           <TariffsTableVertical tiles={tiles} {...rest} />
         ) : (

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

@@ -5,7 +5,7 @@ import { TariffsTableTileCell } from './TariffsTableTileCell';
 
 export const TariffsTableHorizontal = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
   tiles?.length ? (
-    <SwipeListControl {...rest}>
+    <SwipeListControl {...rest} padding={undefined}>
       {tiles.map((tile, i) => (
         <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
       ))}