@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.6

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -45,7 +45,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
+      'border-none bg-primary-main hover:bg-primary-hover focus:bg-primary-main active:bg-primary-active px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (

package/mobile/src/ui-kit/Input/Input.tsx

@@ -10,7 +10,7 @@ export const Input = JSX<InputProps>(
 
     return (
       <input
-        className={`border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${className}`}
+        className={`border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text text-primary-text outline-none ${className}`}
         id={id}
         name={name || id}
         type={type}

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { clamp } from '../../utils/clamp';
 import type { InputRangeProps } from './InputRangeProps';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -16,27 +17,19 @@ export const InputRange = JSX<InputRangeProps>(
     disabled = false,
     onChange,
   }) => {
-    const handleChange = (_: string) => {
+    const getSanitizedValue = (_: string) => Number(_.replace(/\D/g, ''));
+
+    const handleChange = (e) => {
       if (!onChange) {
         return;
       }
-      const sanitizedValue = Number(_.replace(/\D/g, ''));
-      onChange(sanitizedValue);
+
+      onChange(clamp(getSanitizedValue(e.target.value as string), min, max));
     };
+
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
-    const handleBlur = () => {
-      if (!onChange) {
-        return;
-      }
-      if (value < min) {
-        onChange(min);
-      }
-      if (value > max) {
-        onChange(max);
-      }
-    };
 
     return (
       <div className={className}>
@@ -44,11 +37,11 @@ export const InputRange = JSX<InputRangeProps>(
           {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
             value={addSpacesBetweenNumbers(value)}
             disabled={disabled}
-            onChange={(e) => handleChange(e.target.value as string)}
-            onBlur={handleBlur}
+            onChange={handleChange}
+            onBlur={handleChange}
           />
           <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
             <input
@@ -59,19 +52,25 @@ export const InputRange = JSX<InputRangeProps>(
               step={step}
               value={value}
               disabled={disabled}
-              onChange={(e) => handleChange(e.target.value as string)}
+              onChange={handleChange}
               style={inputStyle}
             />
           </div>
         </label>
-        <div className="flex justify-between my-2">
-          {items.map((item, i) => (
-            <span key={String(i)} className="text-s-light text-secondary-text">
-              {item}
-            </span>
-          ))}
-        </div>
+        {renderRangeCaption(items)}
       </div>
     );
   },
 );
+
+function renderRangeCaption(items) {
+  return (
+    <div className="flex justify-between my-2">
+      {items.map((item, i) => (
+        <span key={String(i)} className="text-s-light text-secondary-text">
+          {item}
+        </span>
+      ))}
+    </div>
+  );
+}

package/mobile/src/ui-kit/Radio/Radio.tsx

@@ -5,7 +5,8 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main
+        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
         type="radio"
         value={value}
         name={name}

package/mobile/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -16,7 +16,7 @@ interface RadioButtonGroupProps extends UniBlockProps {
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
   ({ items, checkedItem, onChangeCheckedItem }) => {
     return (
-      <div>
+      <div className="flex flex-col gap-3">
         {items?.map(({ id, text }) => (
           <Checkbox
             key={id}

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -11,7 +11,7 @@ export interface SearchBarInnerProps {
 export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile = false }) => {
   const { term, setTerm } = useSearch();
 
-  const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+  const LoupeIconClassName = isMobile ? 'w-5 h-5' : 'w-6 h-6';
   const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
   const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
   const inputPlaceholder = isMobile ? 'some search' : undefined;
@@ -55,7 +55,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
         <Button
           version="primary"
           text="Найти"
-          className="invisible peer-focus:visible absolute top-1 right-1"
+          className="invisible peer-focus:visible absolute top-[3px] right-1"
           onClick={(ev) => {
             ev?.preventDefault();
             console.log('click');

package/mobile/src/ui-kit/SelectCustom/SelectCustom.tsx

@@ -0,0 +1,84 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon';
+import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface OptionProps {
+  key: string;
+  text: string;
+}
+
+export interface SelectCustomProps {
+  className?: string;
+  label?: string;
+  value?: OptionProps;
+  onChange: (value: OptionProps) => void;
+  options: OptionProps[];
+  isBorder?: boolean;
+}
+
+export const SelectCustom = JSX<SelectCustomProps>(
+  ({ className = '', isBorder = true, label, options = [], value, onChange }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+
+    const choiceOption = (option: OptionProps) => {
+      setSelectedItem(option);
+      setIsOpen(false);
+      onChange(option);
+    };
+
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+
+    useEffect(() => {
+      setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+
+    return (
+      <div className={`${isOpen ? 'z-10' : ''} ${className}`}>
+        {label ? <span className="mb-2">{label}</span> : null}
+        <div className={`relative w-fit`}>
+          <div
+            className={`text-m-light flex justify-between min-h-[56px] mb-0.5 p-4 pr-8 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {selectedItem.text}
+            <Icon name="ArrowUpIcon" className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`} />
+          </div>
+          {options.length > 0 ? (
+            <div className={`h-0 ${isOpen ? '' : 'overflow-hidden'}`}>
+              <div className={`bg-white text-l rounded-md`}>
+                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+const renderOption =
+  (choiceOption, isOpen: boolean, isSelected) => (option: OptionProps, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        onClick={() => {
+          choiceOption(option);
+        }}
+        className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11"
+      >
+        <span>{option.text}</span>
+        <Icon
+          name="DoneSimpleIcon"
+          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
+            ' ',
+          )}
+        />
+      </div>
+    );
+  };
+
+function getBorderStyle(isBorder) {
+  return isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+}

package/mobile/src/wlc.json

@@ -0,0 +1,5 @@
+{
+  "PROD_BRANCH": "master",
+  "FORCED_DRAFT_FLOW": false,
+  "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -115,7 +115,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@redneckz/uni-jsx": "^2.1.3",
+    "@redneckz/uni-jsx": "^2.1.6",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
@@ -165,7 +165,7 @@
     "svgo": "^2.8.0",
     "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.6",
-    "ts-json-schema-generator": "^1.0.0",
+    "ts-json-schema-generator": "^1.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",

package/src/ProjectSettings.ts

@@ -6,6 +6,8 @@ export interface ProjectSettings {
   ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
+  YANDEX_MAP_API_KEY?: string;
+  YANDEX_METRIKA_ID?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -39,4 +41,10 @@ export const projectSettings = new (class implements ProjectSettings {
   get CDN() {
     return this._.CDN;
   }
+  get YANDEX_MAP_API_KEY() {
+    return this._.YANDEX_MAP_API_KEY;
+  }
+  get YANDEX_METRIKA_ID() {
+    return this._.YANDEX_METRIKA_ID;
+  }
 })();

package/src/components/Accordion/AccordionContent.ts

@@ -2,6 +2,8 @@ import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+
 /**
  * @title Элемент списка
  */
@@ -11,9 +13,7 @@ export interface AccordionItemCommonProps {
    * @default Список
    */
   label?: string;
-  /**
-   * @title Отображать в раскрытом виде
-   */
+  /** @title Отображать в раскрытом виде */
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
@@ -28,9 +28,7 @@ export interface AccordionItemCommonProps {
 /**
  * @title Аккордеон
  */
-export interface AccordionContent {
-  /** @title Заголовок */
-  title?: string;
+export type AccordionContent = HeadlineCommonProps & {
   /**
    * @title Выравнивание заголовка
    * @default center
@@ -39,11 +37,9 @@ export interface AccordionContent {
   version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
-  /** @title Описание */
-  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-}
+};

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,15 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
-import {
-  BenefitBlockItemProps,
-  BenefitsBlockVersion,
-  DescriptionDef,
-} from './BenefitsBlockContent';
-import { Picture } from '../../model/Picture';
+import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -56,7 +53,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 
 const renderBenefits = (
   benefitList: BenefitBlockItemProps[],
-  benefitsBlockVersion: BenefitsBlockVersion,
+  benefitsBlockVersion: BlockVersion,
 ) => {
   return (
     <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
@@ -65,7 +62,7 @@ const renderBenefits = (
   );
 };
 
-const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBlockVersion) => {
+const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
   if (!benefitIcon.icon) {
     return benefitIcon;
   }
@@ -75,7 +72,7 @@ const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBloc
 };
 
 const renderStep =
-  (benefitsBlockVersion: BenefitsBlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+  (benefitsBlockVersion: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
     const description = (benefit?.description || undefined) as DescriptionDef;
 
     return (
@@ -100,10 +97,7 @@ const renderStep =
     );
   };
 
-const renderDescription = (
-  description: DescriptionDef,
-  benefitsBlockVersion: BenefitsBlockVersion,
-) => {
+const renderDescription = (description: DescriptionDef, benefitsBlockVersion: BlockVersion) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,31 +1,32 @@
-import type { Picture } from '../../model/Picture';
-import type { TitleProps } from '../../model/HeadlineType';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { EmptyOption } from '../../model/EmptyOptionType';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { IconProps } from '../../model/Picture';
 
 /**
  * @title Пункты описания
- * @default {"benefitType": "text"}
  */
 export type TextBenefitDef = {
-  /**
-   * @title Описание
-   */
+  /** @title Описание */
   name?: string;
+  /** @default text */
   benefitType?: 'text';
 };
 
 /**
  * @title Список
- * @default {"benefitType": "list"}
  */
 export type ListBenefitDef = {
   /** @title Буллиты */
   bullets?: boolean;
   /**
    * @title Пункты
-   * @example ["Пункт 1"]
+   * @default [
+   *  "Пункт 1"
+   * ]
    */
   items?: string[];
+  /** @default list */
   benefitType?: 'list';
 };
 
@@ -37,19 +38,11 @@ export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitBlockItemProps {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: DescriptionDef;
-  icon?: Picture;
-}
-
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная"]
- */
-export type BenefitsBlockVersion = 'primary' | 'secondary';
+export type BenefitBlockItemProps = LabelProps &
+  IconProps & {
+    /** @title Описание */
+    description?: DescriptionDef;
+  };
 
 /**
  * @title Блок преимущества
@@ -61,5 +54,5 @@ export type BenefitsBlockContent = TitleProps & {
    */
   benefitList?: BenefitBlockItemProps[];
   /** @default primary */
-  benefitsBlockVersion?: BenefitsBlockVersion;
+  benefitsBlockVersion?: BlockVersion;
 };

package/src/components/BlockContent.ts

@@ -3,6 +3,7 @@ import type { BonusContent } from './Bonus/BonusContent';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
 import type { CardTransferContent } from './CardTransfer/CardTransferContent';
 import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
+import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
@@ -12,7 +13,6 @@ import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/Insuran
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
-import type { NavigationContent } from './Navigation/NavigationContent';
 import type { OfficeServicesBlockContent } from './OfficeServicesBlock/OfficeServicesBlockContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
@@ -26,7 +26,6 @@ import type { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 
 /**
  * @hidden
@@ -54,7 +53,6 @@ export type BlockContent =
   | TariffsTableContent
   | TextBlockContent
   | TileContent
-  | NavigationContent
   | LinkListContent
   | BonusBenefitsBlockContent
   | SafeDepositRentalContent

package/src/components/Blocks.ts

@@ -6,6 +6,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -16,7 +17,6 @@ import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBloc
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
-import { Navigation } from './Navigation/Navigation';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
@@ -32,7 +32,6 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 
 export const Blocks = {
   Accordion,
@@ -63,7 +62,6 @@ export const Blocks = {
   TariffsTable,
   TextBlock,
   Tile,
-  Navigation,
   Placeholder,
   BonusBenefitsBlock,
   SafeDepositRental,

package/src/components/Bonus/Bonus.tsx

@@ -42,7 +42,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                           <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
                             {_.bonusCount}
                           </span>
-                          <span className="text-[44px] bg-clip-text text-transparent bg-green-to-yellow">
+                          <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
                             {_.bonusName}
                           </span>
                         </div>

package/src/components/Bonus/BonusContent.ts

@@ -1,21 +1,19 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/** @title Плитка */
-interface BonusItems {
-  /** @title Бонусы */
-  title?: string;
-  /** @title Описание плитки */
-  description?: string;
+/**
+ * @title Плитка
+ */
+export type BonusItem = HeadlineCommonProps & {
   /** @title Количество баллов */
   bonusCount?: string;
   /** @title Наименование */
   bonusName?: string;
-}
+};
 
 /**
  * @title Блок Бонусы
  */
 export type BonusContent = HeadlineCommonProps & {
   /** @title Список плиток */
-  bonusItems?: BonusItems[];
+  bonusItems?: BonusItem[];
 };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,37 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
 import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { getElementsColsValue } from './getElementsColsValue';
-import { Headline } from '../Headline/Headline';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
+  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
+      context={context}
+      {...rest}
+    >
+      <Headline
         context={context}
-        {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={subtitle}
-          headlineVersion="M"
-          align="center"
-        />
-        {bonusBenefits?.length ? (
-          <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
-            {bonusBenefits.map(renderBonusBenefit)}
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        className="!p-0"
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+        align="center"
+      />
+      {bonusBenefits?.length ? (
+        <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
+          {bonusBenefits.map(renderBonusBenefit)}
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
@@ -39,10 +37,10 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
     <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
       {bonusBenefit?.icon ? (
         <Img
-          className="h-[180px] w-[160px] min-w-[160px] min-h-[160px]"
+          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
           image={bonusBenefit.icon}
-          width="160"
-          height="180"
+          width="180"
+          height="160"
         />
       ) : null}
       <div>