@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/mobile/src/components/Gallery/Gallery.tsx

@@ -2,19 +2,18 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import type { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+  ({ title, description, cards = [], className, orientation = 'horizontal' }) => {
     const headingClassName = description ? 'mb-2' : 'mb-5';
 
     return (
@@ -29,19 +28,15 @@ export const Gallery = JSX<GalleryProps>(
             <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
           ) : null}
         </div>
-        {renderCardsLayout(orientation, cards, context)}
+        {renderCardsLayout(orientation, cards)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(
-  orientation: ListOrientation,
-  cards: GalleryCardProps[],
-  context: ContentPageContext,
-) {
+function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[]) {
   return orientation === 'horizontal' ? (
-    <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
+    <SwipeListControl>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>
   );

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -1,43 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { Headline } from '../Headline/Headline';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
 import type { GalleryCardProps } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
 
-export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
+export interface GalleryContainerProps extends GalleryInnerProps {
   activeCardIndex: number;
 }
 
 export interface GalleryCardData {
   card: GalleryCardProps;
   version: GalleryVersion;
-  context: ContentPageContext;
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({
-    context,
-    title,
-    headlineVersion = 'M',
-    description,
-    cards = [],
-    version = 'normal',
-    activeCardIndex,
-  }) => {
+  ({ headlineVersion = 'M', cards = [], version = 'normal', activeCardIndex, ...rest }) => {
     return (
       <div>
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          align="center"
-        />
+        <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
         <div
           className={`flex mt-8 ${
             cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
@@ -45,7 +28,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
           style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
           role="list"
         >
-          {cards?.map((card, i) => renderCard({ card, version, context }, i))}
+          {cards?.map((card, i) => renderCard({ card, version }, i))}
         </div>
       </div>
     );

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -1,4 +1,4 @@
-import { AlignType } from '../../model/AlignType';
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -14,7 +14,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', button, ...rest }) => {
+  ({ cards = [], className = '', version = 'normal', button, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -30,12 +30,10 @@ export const GalleryInner = JSX<GalleryInnerProps>(
 
     return (
       <BlockWrapper
-        context={context}
         className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
         <GalleryContainer
-          context={context}
           cards={cards}
           version={version}
           activeCardIndex={activeCardIndex}

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -12,25 +12,19 @@ interface MappedCalendarItemProps extends CalendarItem {
 export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
-  ({ context, className = '', title, description, calendar, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans bg-white p-[50px] ${className}`}
-        context={context}
+  ({ className = '', title, description, calendar, ...rest }) => (
+    <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
+      <Headline
+        className="!p-0 mb-4"
+        title={title}
+        description={description}
+        headlineVersion="M"
+        align="center"
         {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0 mb-4"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          align="center"
-        />
-        {calendar ? renderCalendar(calendar) : null}
-      </BlockWrapper>
-    );
-  },
+      />
+      {calendar ? renderCalendar(calendar) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderCalendar = (calendar: CalendarItem[]) => {

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -4,7 +4,6 @@ import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'bg-primary-text',
@@ -12,56 +11,52 @@ const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
 };
 
 interface DropdownMenuProps {
-  context: ContentPageContext;
   className?: string;
   items: LinkProps[];
   activeItem?: LinkProps;
   bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ context, className, items, activeItem, bgColor }) => {
-    const { useRouter, handlerDecorator } = context;
-    const router = useRouter();
+export const DropdownMenu = JSX<DropdownMenuProps>(({ className, items, activeItem, bgColor }) => {
+  const link = useLink();
 
-    const [visible, setVisible] = useState(false);
-    const handleToggle = useCallback(() => setVisible((_) => !_), []);
+  const [visible, setVisible] = useState(false);
+  const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-    const handleClickOutside = useCallback(() => setVisible(false), []);
-    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+  const handleClickOutside = useCallback(() => setVisible(false), []);
+  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-    return (
+  return (
+    <div
+      className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
+      ref={ref}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+        onClick={handleToggle}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
       <div
-        className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
-        ref={ref}
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        aria-hidden={!visible}
       >
-        <button
-          className="flex justify-between items-center cursor-pointer h-6 ml-6"
-          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-          onClick={handleToggle}
-        >
-          {Array(3).fill(bgColor).map(renderDot)}
-        </button>
-        <div
-          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
-          aria-hidden={!visible}
-        >
-          {items?.map((item, i) => (
-            <a
-              key={item.href || String(i)}
-              className={`text-l-light pb-4 hover:text-primary-main ${
-                item === activeItem ? 'text-primary-main' : ''
-              }`}
-              {...useLink({ router, handlerDecorator }, item)}
-            >
-              {item.text}
-            </a>
-          ))}
-        </div>
+        {items?.map((item, i) => (
+          <a
+            key={item.href || String(i)}
+            className={`text-l-light pb-4 hover:text-primary-main ${
+              item === activeItem ? 'text-primary-main' : ''
+            }`}
+            {...link(item)}
+          >
+            {item.text}
+          </a>
+        ))}
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

package/mobile/src/components/Header/Header.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
+import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
@@ -18,12 +19,15 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, page }) => {
-    const { handlerDecorator } = context;
-    const router = context.useRouter();
+  ({ className = '', defaultLocation, bgColor = 'bg-white', ...rest }) => {
+    const router = useRouter();
 
+    const { page } = rest;
     const fallback: Fallback | undefined = page?.fallback;
-    const { topItems, dispositions } = useSitemap(fallback);
+    const { topItems, dispositions } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      fallback,
+    );
 
     const activeTopItem = topItems?.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
@@ -39,34 +43,30 @@ export const Header = JSX<HeaderProps>(
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
           <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
             <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) =>
-                renderSubItem(
-                  {
-                    ...useLink({ router, handlerDecorator }, _),
-                    active: _ === activeSubItem,
-                    bgColor,
-                  },
-                  i,
-                ),
-              )}
+              {subItems?.map((_, i) => (
+                <HeaderItem
+                  key={String(i)}
+                  className="mr-8 whitespace-nowrap text-s"
+                  active={_ === activeSubItem}
+                  bgColor={bgColor}
+                  {..._}
+                />
+              ))}
             </div>
           </nav>
         </div>
         {burgerMenuShow ? (
           <HeaderBurger
-            context={context}
             onClick={toggleBurgerMenu}
             burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <AccordionItemsList>
-              {topItems?.map((item, i) => {
-                item?.text ? (
-                  <AccordionItem key={String(i)} context={context} label={item.text}>
-                    <LinkList context={context} documents={item.items} />
-                  </AccordionItem>
-                ) : null;
-              })}
+              {topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} label={item.text} {...rest}>
+                  <LinkList documents={item.items} {...rest} />
+                </AccordionItem>
+              ))}
             </AccordionItemsList>
           </HeaderBurger>
         ) : null}
@@ -74,7 +74,3 @@ export const Header = JSX<HeaderProps>(
     );
   },
 );
-
-const renderSubItem = (item: TopItemProps, i: number) => (
-  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-s" {...item} />
-);

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -3,11 +3,9 @@ import { useGeolocation } from '../../hooks/useGeolocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
-  context: ContentPageContext;
   onClick: () => void;
   burgerSubMenu?: DispositionItem[];
   defaultLocation?: string;
@@ -15,7 +13,7 @@ export interface HeaderBurgerProps {
 }
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
-  ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
+  ({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
@@ -41,7 +39,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
-        <SearchBar context={context} className="grow" />
+        <SearchBar className="grow" />
       </div>
     );
   },

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -1,20 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
-  context: ContentPageContext;
   subItems?: LinkProps[];
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const router = context.useRouter();
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }) => {
+  const router = useRouter();
 
   const activeSubItem = findActiveSubItem(router)(subItems);
 
@@ -44,7 +43,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
         {subItems.map((_, i) => (
           <HeaderSubMenuItem
             key={String(i)}
-            context={context}
             className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
             active={_ === activeSubItem}
             bgColor={bgColor}
@@ -56,7 +54,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
       </div>
       {dropDownMenuItems.length ? (
         <DropdownMenu
-          context={context}
           className="absolute w-52 -top-4 right-0 pt-4 z-40"
           items={dropDownMenuItems}
           activeItem={activeSubItem}

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,14 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 export interface HeaderSubMenuItemProps extends LinkProps {
-  context: ContentPageContext;
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
@@ -17,19 +14,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({
-    context,
-    className,
-    active,
-    bgColor,
-    observerOptions,
-    onVisibilityChange,
-    children,
-    ...linkProps
-  }) => {
-    const { handlerDecorator } = context;
-    const router = context.useRouter();
-
+  ({ className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -47,12 +32,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
 
     return (
       <span ref={ref}>
-        <HeaderItem
-          className={className}
-          active={active}
-          bgColor={bgColor}
-          {...useLink({ router, handlerDecorator }, linkProps)}
-        >
+        <HeaderItem className={className} active={active} bgColor={bgColor} {...linkProps}>
           {children}
         </HeaderItem>
       </span>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -16,12 +16,11 @@ interface RenderNavButtonProps {
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
+  ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
     return (
       <BlockWrapper
-        context={context}
         className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
         {...rest}
       >
@@ -44,8 +43,6 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
           role="list"
         >
           {renderInsuranceGalleries({
-            context,
-            className,
             insuranceTabs,
             button,
           })}
@@ -55,23 +52,12 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   },
 );
 
-const renderInsuranceGalleries = ({
-  insuranceTabs,
-  button,
-  context,
-  className = '',
-}: InsuranceAmountBlockProps) => {
+const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBlockContent) => {
   const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
 
   return insuranceGalleries?.length
     ? insuranceGalleries.map((cards, i) => (
-        <InsuranceAmountBlockInner
-          key={String(i)}
-          context={context}
-          className={className}
-          button={button}
-          cards={cards}
-        />
+        <InsuranceAmountBlockInner key={String(i)} button={button} cards={cards} />
       ))
     : null;
 };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -8,7 +7,8 @@ import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
 
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab, UniBlockProps {
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab {
+  className?: string;
   button?: ButtonProps;
 }
 

package/mobile/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -11,7 +11,6 @@ import type {
   InvestmentGalleryCardTypes,
   InvestmentGalleryContent,
 } from './InvestmentGalleryContent';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
 const CARD_FULL_VIEW_COUNT = 1;
@@ -25,16 +24,13 @@ interface NavButtonsProps {
 }
 
 export const InvestmentGallery = JSX<InvestmentGalleryProps>(
-  ({ context, cards = [], className = '', title, version = 'primary', ...rest }) => {
+  ({ cards = [], className = '', title, version = 'primary', ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
     const cardWidth = 525;
 
     return (
       <BlockWrapper
-        context={context}
-        className={`relative font-sans p-9 overflow-hidden text-center 
-        ${VersionStyleMap[version]} 
-        ${className}`}
+        className={`relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`}
         {...rest}
       >
         {title ? <Heading headingType="h3" className="mb-9" title={title} /> : null}
@@ -44,9 +40,7 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
             style={{ transform: `translateX(-${activeCardIndex * cardWidth}px)` }}
             role="list"
           >
-            {cards?.length
-              ? cards.map(renderInvestmentGalleryCard(context, className, version))
-              : null}
+            {cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null}
           </div>
           {renderNavButtons({
             cardsCount: cards.length,
@@ -70,17 +64,8 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
 );
 
 const renderInvestmentGalleryCard =
-  (context: ContentPageContext, className: string, version?: BlockVersion) =>
-  (card: InvestmentGalleryCardTypes, i: number) =>
-    (
-      <InvestmentGalleryCard
-        key={String(i)}
-        className={className}
-        context={context}
-        version={version}
-        {...card}
-      />
-    );
+  (className: string, version?: BlockVersion) => (card: InvestmentGalleryCardTypes, i: number) =>
+    <InvestmentGalleryCard key={String(i)} className={className} version={version} {...card} />;
 
 const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }: NavButtonsProps) => {
   const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;

package/mobile/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,7 +11,8 @@ import type {
   InvestmentGalleryCardTypes,
 } from './InvestmentGalleryContent';
 
-export interface RecommendationCardProps extends InvestmentGalleryCardTypes, UniBlockProps {
+export interface RecommendationCardProps extends InvestmentGalleryCardTypes {
+  className?: string;
   version?: BlockVersion;
 }
 const getItemListFontSize = (colValue?: string) => (colValue === 'single' ? 'text-h6' : 'text-l');
@@ -26,7 +26,6 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
   ({
     className = '',
     columnsMode = 'double',
-    context,
     description,
     additionalDescription,
     image,
@@ -49,12 +48,7 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
           ${className}`}
         role="listitem"
       >
-        <BaseTile
-          context={context}
-          className="flex justify-between"
-          title={tileTitle}
-          image={tileImage}
-        >
+        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="flex flex-col justify-between">
             <div className="flex itens-center justify-between mb-4">
               {description ? <Description className="text-h6" description={description} /> : null}