@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTypes.ts

@@ -1,12 +1,9 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
-
 export interface SafeDepositRentalState {
   selectedRegion: string;
   selectedBranch: string;
   selectedCaseVolume: string;
   selectedBoxSize: string;
   days: number;
-  branches: Branch[];
 }
 
 export type HandleChangeState = (state: Partial<SafeDepositRentalState>) => void;

package/mobile/src/components/SafeDepositRental/utils.ts

@@ -1,4 +1,4 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Branch } from '../../hooks/useSafeBoxes';
 
 export const getCoordinates = (data?: Branch | Branch[]): number[][] => {
   if (Array.isArray(data)) {

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

@@ -4,6 +4,14 @@
       "items": {
         "icon": {
           "ui:field": "icon"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          },
+          "iconRight": {
+            "ui:field": "icon"
+          }
         }
       }
     }

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
@@ -12,6 +12,13 @@ export type Step = DescriptionProps &
   IconProps & {
     /** @title Кнопка */
     button?: ButtonWithIconProps;
+    /**
+     * @title Буллиты
+     * @default true
+     */
+    isDotted?: boolean;
+    /** @title Список */
+    items?: string[];
   };
 
 /**
@@ -26,7 +33,7 @@ export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 4
+   * @maxItems 5
    */
   steps?: Step[];
   /** @title Кнопка */

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -7,23 +7,26 @@ export type StyleType = {
   iconText: string;
   iconBackground: string;
   iconConnector: string;
+  dot: string;
 };
 
 export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
-    description: 'text-secondary-text',
+    description: '!text-secondary-text text-l-light',
     iconText: 'text-secondary-text',
     iconBackground: 'bg-main-divider',
     iconConnector: 'bg-secondary-light',
+    dot: 'bg-secondary-text',
   },
   secondary: {
     background: 'bg-primary-main',
     title: 'text-white',
-    description: 'text-white/80',
+    description: '!text-white/80 text-l-light',
     iconText: 'text-white',
     iconBackground: 'bg-white/30',
     iconConnector: 'bg-white',
+    dot: 'bg-white/80',
   },
 };

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

@@ -0,0 +1,26 @@
+import { List } from '../../ui-kit/List/List';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+export const renderItems = ({
+  items,
+  isDotted = true,
+  version = 'primary',
+  className = '',
+}: {
+  items?: string[];
+  isDotted?: boolean;
+  version?: BlockVersion;
+  className?: string;
+}) => {
+  const listVersion = version === 'primary' ? 'gray' : version;
+
+  return items ? (
+    <List
+      className={`mt-4 ${className}`}
+      version={listVersion}
+      items={items}
+      listItemSize="S"
+      isDotted={isDotted}
+    />
+  ) : null;
+};

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

@@ -0,0 +1,63 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { Step } from './StepsBlockContent';
+import type { StyleType } from './StepsBlockStyleMaps';
+import { renderItems } from './renderItems';
+import { useLink } from '../../hooks/useLink';
+
+export const renderStepContent =
+  ({
+    styleMap,
+    isMainButton,
+    version,
+    router,
+    handlerDecorator,
+  }: {
+    styleMap: StyleType;
+    isMainButton: boolean;
+    version: BlockVersion;
+    router: Router;
+    handlerDecorator?: HandlerDecorator;
+  }) =>
+  (step: Step, i: number, { length }: { length: number }) => {
+    const { label, description, button, items, isDotted } = step;
+
+    const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
+    const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`}
+      >
+        {renderStepLabel(label)}
+        {renderStepDescription({
+          description,
+          className: `${styleMap.description} ${additionalMarginClass}`,
+        })}
+        {renderItems({ items, isDotted, version, className: styleMap.description })}
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            {...useLink({ router, handlerDecorator }, button)}
+            version={version}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const renderStepLabel = (label?: string) =>
+  label ? <div className="text-x6 m-0 mt-4">{label}</div> : null;
+
+const renderStepDescription = ({
+  description,
+  className = '',
+}: {
+  description?: string;
+  className?: string;
+}) => (description ? <div className={className}>{description}</div> : null);

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

@@ -5,7 +5,6 @@ import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export type EmbeddableCellDataType =
   | ButtonContent
@@ -16,17 +15,14 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      {buttons.map(({ rounded, appendLeft, ariaLabel, ...buttonProps }, idx) => (
         <Button
-          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${appendLeft ? 'w-12 h-12' : ''}`}
           key={String(idx)}
-          ariaLabel={getButtonAriaLabel(icon)}
+          appendLeft={appendLeft}
           rounded={rounded}
-          appendLeft={
-            icon?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
-          }
+          ariaLabel={ariaLabel}
           {...buttonProps}
-          aria-label={icon}
         />
       ))}
     </div>

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

@@ -30,7 +30,7 @@ const renderCellInner =
     return (
       <div
         key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`}
+        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
       >
         {i > 0 ? <div className="h-5" /> : null}
         {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { UniBlockProps } from '../../model/ContentPageDef';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
@@ -34,9 +33,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 asSVG
               />
             ) : null}
-            {header?.title ? (
-              <Heading headingType={header?.headingType || 'h6'} as="h6" title={header?.title} />
-            ) : null}
+            {header?.title ? <div className="text-m-light">{header?.title}</div> : null}
           </div>
         </div>
         {data?.length ? (

package/mobile/src/components/TariffsTable/{dataFixture.ts → dataFixture.tsx}

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
 import type {
   InnerTableBlockDef,
   LabelDescriptionCellDef,
@@ -93,14 +94,14 @@ export const columns: TariffsTableColumn[] = [
           tableCellType: 'Buttons',
           buttons: [
             {
-              icon: { icon: 'AppleIcon' },
+              appendLeft: <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />,
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              icon: { icon: 'PlayMarketIcon' },
+              appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
               rounded: true,
               version: 'secondary',
               href: '/',

package/mobile/src/components/TariffsTable/utils/getButtonAriaLabel.ts

@@ -1,5 +1,3 @@
 import type { Picture } from '../../../model/Picture';
-import { IconTitleMap } from '../../../icons/IconName';
 
-export const getButtonAriaLabel = (icon: Picture | undefined) =>
-  icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
+export const getButtonAriaLabel = (icon: Picture | undefined) => icon?.alt || icon?.title || '';

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

@@ -67,7 +67,7 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2" description={description} />
+          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
         ) : null}
         {children}
         {renderList(items, { version, isDotted, listItemSize })}
@@ -77,16 +77,14 @@ export const Tile = JSX<TileProps>((props) => {
 });
 
 function renderList(items, { version, isDotted, listItemSize }: ListProps) {
-  const listVersion = version === 'primary' ? 'tile' : 'tile-white';
-
   return items?.length ? (
     <List
       items={items}
       isDotted={isDotted}
-      className="mt-3"
+      className="mt-2.5"
       listItemSize={listItemSize}
       itemClassName="mb-1.5"
-      version={listVersion}
+      version={version}
     />
   ) : null;
 }

package/mobile/src/hooks/useOutsideClick.ts

@@ -0,0 +1,25 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+interface Ref {
+  current: HTMLInputElement | null;
+}
+
+export function useOutsideClick(wrapperRef: Ref, setIsOpen: (_: boolean) => void) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        wrapperRef &&
+        wrapperRef.current &&
+        event.target instanceof HTMLElement &&
+        !wrapperRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+}

package/mobile/src/hooks/{useFetchSafeBoxes.ts → useSafeBoxes.ts}

@@ -25,20 +25,19 @@ export interface Branch {
 }
 
 const SAFEBOXES_URL = '/api/v1/safeboxes';
+const EMPTY_VALUE = [];
 
-export function useFetchSafeBoxes(regionCode?: string) {
-  const { data } = useAsyncData<{ data?: Branch[] }, any, string | null>(
+export function useSafeBoxes(regionCode?: string): Branch[] {
+  const { data } = useAsyncData<Branch[], any, string | null>(
     regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null,
     fetchSafeBoxes,
   );
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }
 
-const fetchSafeBoxes = (url?: string) => {
-  if (!url) {
-    return {};
-  }
+const fetchSafeBoxes = async (url: string): Promise<Branch[]> => {
+  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
 
-  return fetchJSON(url, { method: 'GET' });
+  return result || EMPTY_VALUE;
 };

package/mobile/src/icons/IconName.ts

@@ -2,9 +2,9 @@
 // Generated. Do not touch
 /* eslint-disable max-len, max-lines */
 
-export const IconInverseMap = {
-  ActualBalanceIcon: false, AirPlaneIcon: false, AppleIcon: true, ArrowDownIcon: true, ArrowLeftIcon: true, ArrowUpIcon: true, AtmIcon: true, BankIcon: true, BuildingIcon: true, BurgerIcon: true, Calendar2Icon: true, CalendarCircleIcon: true, CalendarIcon: true, CalendarTickIcon: true, Car2Icon: true, CardIcon: true, CardPosIcon: true, CardTickIcon: true, CardWithGemIcon: false, CarIcon: false, ChartSquareIcon: true, CinemaIcon: false, ClockIcon: false, CloseIcon: true, ComfortableCompIcon: false, CreditCardsIcon: false, DiscountShapeIcon: true, DocDownloadIcon: true, DocIcon: true, DocIconMonoColor: true, DocsIcon: false, DocumentTextIcon: true, DollarIcon: false, DoneIcon: false, DoneSimpleIcon: true, EarthIcon: false, EmptyWalletChangeIcon: true, EmptyWalletIcon: true, EuroIcon: false, GeolocationIcon: true, GlassIcon: false, GlobalIcon: true, GpsIcon: true, GridIcon: true, InterestGrowthIcon: false, InterestIcon: true, JCBIcon: false, LogoIcon: true, LoupeIcon: true, MapMarkerClusterIcon: false, MapMarkerSingleIcon: false, MasterCardIcon: false, MinusIcon: true, MirIcon: false, MoneyIcon: true, MoneyInsuranceIcon: false, MoneysIcon: true, MonitorMobileIcon: true, NewDocIcon: false, OfficeIcon: false, OkIcon: true, PackA4Icon: false, PassSendIcon: false, PercentageRoundIcon: true, PercentageSquareIcon: true, PersonalCardIcon: true, PlayMarketIcon: true, PlusIcon: true, PowerIcon: false, Profile2UserIcon: true, ProfileIcon: true, PumpkinIcon: false, RoundRubleIcon: true, SafeIcon: true, ShieldTickIcon: true, SignDocsIcon: false, SmallClockIcon: true, SoundIcon: false, StrongBoxIcon: true, TelegramIcon: true, UnionPayIcon: false, UserSquareIcon: true, UserTickIcon: true, VisaIcon: false, VKIcon: true, WalletAdd2Icon: true, WalletAddIcon: true, WalletIcon: true, WalletWithMoneyIcon: true, WateringCanIcon: false
-}
+export const IconsWithoutInversion = new Set([
+  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'GlassIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'VisaIcon', 'WateringCanIcon'
+]);
 
 export enum IconMap {
   ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon'

package/mobile/src/model/BlockDecorator.ts

@@ -4,6 +4,8 @@ export const DEFAULT_SLOT_NAME = null;
 
 export type BlockAncestors = [keyof SlotsMap | typeof DEFAULT_SLOT_NAME, ...Slot[]];
 
+export const DEFAULT_ANCESTORS: BlockAncestors = [DEFAULT_SLOT_NAME];
+
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
   block: BlockDef;

package/mobile/src/model/BlocksRegistry.ts

@@ -6,6 +6,9 @@ export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
   BlockProps & UniBlockProps,
   any,
   VNode | VNode[]
->;
+> & {
+  childrenTypes?: string[];
+  renderChild?: (child: VNode, i: number) => VNode;
+};
 
 export type BlocksRegistry<BlockProps = Record<string, any>> = Record<string, JSXBlock<BlockProps>>;

package/mobile/src/model/HeadlineType.ts

@@ -4,6 +4,12 @@
  */
 export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
 
+/**
+ * @title Размер заголовка
+ * @enumNames ["Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
+ */
+export type HeadlineSmallVersion = 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
+
 export type TitleProps = {
   /** @title Заголовок */
   title?: string;
@@ -24,3 +30,7 @@ export type HeadlineCommonProps = TitleProps & DescriptionProps;
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;
 };
+
+export type HeadlineSmallProps = HeadlineCommonProps & {
+  headlineSmallVersion?: HeadlineSmallVersion;
+};

package/mobile/src/model/Picture.ts

@@ -49,6 +49,7 @@ export interface ImgSource {
   alignment?: ImgAlignment;
   /** @title Иконка */
   icon?: IconName;
+  /** @title Версия иконки */
   iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;

package/mobile/src/react/setup-fixture.ts

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
 import { projectSettings } from '../ProjectSettings';
 import wlc from '../wlc.json';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 const TEST_ORIGIN = 'http://localhost:5001';
 
@@ -35,7 +34,6 @@ export const context: ContentPageContext = {
       ev.preventDefault();
       console.log(ev.target, ev, targetContent);
     },
-  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

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

@@ -26,16 +26,13 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
+  const iconVersion = getIconVersion(icon, isIconWhite);
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img
-            className="w-6 h-6"
-            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-            asSVG
-          />
+          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -59,3 +56,6 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
+
+const getIconVersion = (icon, isIconWhite) =>
+  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

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

@@ -1,14 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
-import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
 import type { UniBlockProps } from '../model/ContentPageDef';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
-  context: ContentPageContext;
-  className?: string;
   anchor?: string;
   tag?: keyof HTMLElementTagNameMap;
 }
@@ -19,17 +17,15 @@ const THRESHOLD_ARRAY_START_VALUE =
   (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, tag = 'section', labels }) => {
+  ({ anchor, className, children, tag = 'section', labels }) => {
     const Tag: any = tag;
 
-    const { IntersectionObserverTag } = context;
-
     const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
     const observerCallback = useMemo(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
-      [anchor, anchorClickRef],
+      [anchor],
     );
 
     useEffect(() => {
@@ -49,7 +45,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         anchorClickCleanup();
         tabCleanup();
       };
-    }, [anchorClickRef]);
+    }, []);
 
     if (!shouldRenderBlock) {
       return null;

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -12,7 +12,7 @@ export type EmbeddableBlocksProps = {
 };
 
 export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : [];
 
 const renderBlock =
   ({ context, className }: UniBlockProps) =>

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

@@ -41,7 +41,7 @@ export const Button = JSX<ButtonWithIconProps>(
   }) => {
     // It isn't a valid HTML attribute. Must be excluded from "rest"
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { asSVG, iconRight, appendRight, icon, ...buttonInnerRest } = rest;
+    const { appendRight, ...buttonInnerRest } = rest;
     const buttonInner = children ?? (
       <ButtonInner
         text={text}

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { iconStyleMap } from './buttonClassNameConstants';
 import type { ButtonWithIconProps } from './ButtonProps';
 
 interface ButtonInnerProps extends ButtonWithIconProps {
@@ -7,18 +8,18 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 }
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
-  const { text, aboveText, appendLeft, appendRight } = props;
+  const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
     <div className={getButtonStyle(props)}>
-      {appendLeft ? appendLeft : null}
+      {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
           <div className="text-xs-light text-left">{aboveText}</div>
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
-      {appendRight ? appendRight : null}
+      {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}
     </div>
   );
 });

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps, Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 
 /**
@@ -29,18 +29,12 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
-  /** @title Иконка слева */
-  icon?: Picture;
-  /** @title Иконка справа */
-  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
   appendLeft?: VNode;
   /** @hidden */
   appendRight?: VNode;
-  /** @hidden */
-  asSVG?: boolean;
 }
 
 export interface ButtonContent {