@redneckz/wildless-cms-uni-blocks 0.4.1 → 0.4.3

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';

package/src/components/PictureText/PictureText.example.json

@@ -4,7 +4,8 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 400,
+      "height": 300
     }
   },
   "version": "primary",
@@ -13,14 +14,16 @@
     {
       "label": "Преимущество №1",
       "icon": {
-        "icon": "DocumentTextIcon"
+        "icon": "ShieldTickIcon"
       }
     },
     {
       "label": "Преимущество №2",
       "icon": {
-        "icon": "DocumentTextIcon"
+        "icon": "ShieldTickIcon"
       }
     }
-  ]
+  ],
+  "sum": 500000,
+  "monthLimit": 25000
 }

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,21 +1,39 @@
 import { context } from '../../react/setup-fixture';
-
 import type { Picture } from '../../model/Picture';
-import { PictureText } from './PictureText';
 import type { PictureTextContent } from './PictureTextContent';
+import { PictureText } from './PictureText';
 
 const image: Picture = {
   src: 'legal-support-business.png',
   format: 'webp',
   size: {
-    width: 200,
-    height: 200,
+    width: 400,
+    height: 300,
   },
   alt: 'Варианты потребительского кредита',
 };
 
+const imageInsurance: Picture = {
+  src: 'insurance.png',
+  format: 'webp',
+  alt: 'Страховые риски и продукты',
+  size: {
+    width: 400,
+    height: 300,
+  },
+  sources: [
+    {
+      src: 'insurance.png 1x, insurance-2x.png 2x',
+      format: 'png',
+    },
+  ],
+};
+
 export const PICTURE_TEXT: PictureTextContent = {
-  title: 'Варианты потребительского кредита',
+  title: 'Обменивайте бонусы на путешествия',
+  description:
+    'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте ' +
+    'бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   benefits: [
     {
       label: 'Кредит по одному документу',
@@ -31,10 +49,61 @@ export const PICTURE_TEXT: PictureTextContent = {
   image,
 };
 
+export const INSURANCE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Защита вас и ваших близких»',
+  benefits: [
+    {
+      label: 'Телесное повреждение',
+      description: 'Описание',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      label: 'Госпитализация застрахованного',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      label: 'Сокращение численности работников организации',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      label: 'Смерть застрахованного',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+  ],
+  image: imageInsurance,
+  sum: 500000,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <PictureText className="col-span-12" context={context} {...PICTURE_TEXT} />
     </div>
   ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <PictureText
+        className="col-span-12"
+        context={context}
+        {...PICTURE_TEXT}
+        version="secondary"
+      />
+    </div>
+  ),
+  'insurance sum': (
+    <div className="container grid grid-cols-12">
+      <PictureText context={context} className="col-span-12" {...INSURANCE_TEXT} />
+    </div>
+  ),
+  'insurance monthPay': (
+    <div className="container grid grid-cols-12">
+      <PictureText
+        context={context}
+        className="col-span-12"
+        {...INSURANCE_TEXT}
+        monthLimit={25000}
+      />
+    </div>
+  ),
 };

package/src/components/PictureText/PictureText.tsx

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { PictureTextBenefit, PictureTextContent } from './PictureTextContent';
-
-import { BlockVersion } from '../../model/BlockVersion';
+import type { PictureTextContent } from './PictureTextContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import { Headline } from '../Headline/Headline';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -17,56 +19,75 @@ const pictureTextStyleMap: Record<BlockVersion, string> = {
 export const PictureText = JSX<PictureTextProps>(
   ({
     className = '',
+    context,
     title,
+    description,
     image,
     benefits,
     version = 'primary',
+    sum,
+    monthLimit,
     directionRight = false,
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
+        context={context}
         {...rest}
       >
-        <Heading headingType="h2" className="text-center" title={title} />
-        <div className={'flex justify-center mt-9'}>
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          bgColorHeadline={version}
+          align="center"
+        />
+        <div className={'flex justify-center gap-[122px] mt-[30px]'}>
           {image?.src && <Img className={directionRight ? 'order-2 ml-6' : 'mr-6'} image={image} />}
-          {benefits?.length ? (
-            <div className="flex flex-col">
-              {benefits.map((_, i) => renderBenefit(_, i, version))}
-            </div>
-          ) : null}
+          <div className="w-[558px] m-auto">
+            {benefits?.length ? (
+              <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
+            ) : null}
+            {renderInsuranceSumMonth(sum, monthLimit)}
+          </div>
         </div>
       </BlockWrapper>
     );
   },
 );
 
-function renderBenefit(benefit: PictureTextBenefit, i: number, version: string) {
+const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
+  (
+    <BenefitItem
+      key={String(i)}
+      icon={benefit.icon}
+      label={benefit.label}
+      description={benefit.description}
+      version={version}
+    />
+  );
+
+function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
+  return sum || monthLimit ? (
+    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
+      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {Number.isFinite(monthLimit)
+        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
+        : null}
+    </div>
+  ) : null;
+}
+
+function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
-    <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon ? (
-        <Img
-          className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          image={benefit.icon}
-          width="48"
-          height="48"
-          asSVG
-        />
-      ) : null}
-      <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
-        {benefit?.label ? (
-          <div className={`text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`}>
-            {benefit.label}
-          </div>
-        ) : null}
-        {benefit?.description ? (
-          <div className={`text-s ${version === 'primary' ? 'text-secondary-text' : ''}`}>
-            {benefit.description}
-          </div>
-        ) : null}
-      </div>
+    <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
+      <span className="text-secondary-text text-l-light">{title}</span>
+      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
     </div>
   );
 }

package/src/components/PictureText/PictureTextContent.ts

@@ -1,29 +1,20 @@
-import { BlockVersion } from '../../model/BlockVersion';
-import type { TitleProp } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { Picture } from '../../model/Picture';
+import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-export type TitleWithImageContent = TitleProp & ImageContent;
-
-export interface PictureTextBenefit {
-  /** @title Иконка */
-  icon?: Picture;
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type TitleWithImageContent = HeadlineCommonProps & ImageContent;
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends TitleWithImageContent {
-  version?: BlockVersion;
-  /** @title Список преимуществ */
-  benefits?: PictureTextBenefit[];
+export interface PictureTextContent extends BenefitsProps, TitleWithImageContent {
   /**
    * @title Картинка справа/текст слева
    * @default false
    */
   directionRight?: boolean;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 }

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

@@ -1,8 +1,8 @@
-import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { ProductBlockBenefit } from './ProductBlockContent';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =
@@ -25,7 +25,7 @@ const image: Picture = {
   ],
 };
 
-const benefits: ProductBlockBenefit[] = [
+const benefits: BenefitItemProps[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,8 +1,9 @@
-import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
-import type { ProductBlockBenefit, ProductBlockContent } from './ProductBlockContent';
+import type { Picture } from '../../model/Picture';
+import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ProductBlockContent } from './ProductBlockContent';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -14,7 +15,7 @@ const image: Picture = {
   },
 };
 
-const benefits: ProductBlockBenefit[] = [
+const benefits: BenefitItemProps[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
@@ -81,14 +82,35 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        backwardButton={backwardButton}
-        headlineVersion="XL"
+        headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
+        benefitsVersion="normal"
         buttons={buttons}
         image={image}
       />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title="Потребительский кредит наличными"
+        headlineVersion="L"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        benefitsVersion="white"
+        image={image}
+      />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title="Потребительский кредит наличными"
+        headlineVersion="L"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        benefitsVersion="white"
+        image={image}
+        version="secondary"
+      />
     </div>
   ),
   'primary with color benefits': (

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -4,33 +4,19 @@ import type { LinkProps } from '../../model/LinkProps';
 import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { Picture } from '../../model/Picture';
 import type { HeadlineProps } from '../../model/HeadlineType';
-
-export interface ProductBlockBenefit {
-  icon?: Picture;
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
-
-export type BenefitItemProps = {
-  benefit: ProductBlockBenefit;
-  version?: BlockVersion;
-  benefitsVersion?: IconVersion;
-};
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent &
   ImageContent & {
     /**
-     * @title Преимущества
+     * @title Список преимуществ
      * @minItems 2
      * @maxItems 3
      */
-    benefits?: ProductBlockBenefit[];
+    benefits?: BenefitItemProps[];
     benefitsVersion?: IconVersion;
     version?: BlockVersion;
     /**

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

@@ -52,11 +52,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {benefits?.filter((_) => _.label)?.length ? (
-              <div className="mt-3">
-                {benefits.map((benefit, i) =>
-                  renderBenefit({ benefit, version, benefitsVersion }, i),
-                )}
-              </div>
+              <div className="mt-3">{benefits.map(renderBenefit(version, benefitsVersion))}</div>
             ) : null}
             {items?.length ? (
               <List className="mt-3 text-m" items={items} version={version} isDotted={isDotted} />

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -41,9 +41,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
           <BaseTile context={context} buttons={getButtons(context, buttons)}>
             {benefits?.filter((_) => _.label)?.length ? (
               <div className="flex gap-6 mt-6">
-                {benefits.map((benefit, i) =>
-                  renderBenefit({ benefit, version, benefitsVersion }, i),
-                )}
+                {benefits.map(renderBenefit(version, benefitsVersion))}
               </div>
             ) : null}
             {items?.length ? (

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,53 +1,19 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Img } from '../../ui-kit/Img/Img';
-import { BenefitItemProps } from './ProductBlockContent';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { IconVersion } from '../../model/IconVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 
-const benefitTitleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-const benefitDescStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export function renderBenefit(
-  { benefit, version = 'primary', benefitsVersion = 'normal' }: BenefitItemProps,
-  i: number,
-) {
-  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-
-  return (
-    <div key={String(i)} className="flex gap-4 items-center">
-      {benefit.icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-      <div className="flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]">
-        <div className={`text-h6 m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
-        {benefit.description ? (
-          <div className={`text-m-light ${benefitDescStyleMap[version]}`}>
-            {benefit.description}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function renderBenefitIconBgStyle(version, benefitsVersion) {
-  let bgColorStyle = 'bg-primary-main text-black';
-
-  if (version === 'secondary') {
-    bgColorStyle = 'bg-white/30 text-black';
-  } else if (benefitsVersion === 'normal') {
-    bgColorStyle = 'bg-secondary-light text-primary-main';
-  }
-
-  return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
-}
+export const renderBenefit =
+  (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
+  ({ icon, label, description }: BenefitItemProps, i: number) => {
+    return (
+      <BenefitItem
+        key={String(i)}
+        icon={icon}
+        label={label}
+        description={description}
+        version={version}
+        benefitsVersion={benefitsVersion}
+      />
+    );
+  };

package/src/components/ProductGallery/ProductGallery.tsx

@@ -50,7 +50,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           {galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context))}
         </div>
 
-        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border">
+        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
           {galleryNav.map((slide, i) =>
             renderNavButton({
               slide,
@@ -82,6 +82,7 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
           context={context}
           textBlockClassName="mb-[154px]"
           {...block}
+          headlineVersion="XXL"
         />
       </div>
     </section>
@@ -92,8 +93,8 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const isActiveBtn = i === activeSlideIndex;
 
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] p-0 border-none'
-    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+    ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
+    : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
     ? 'text-primary-text text-h6'
@@ -110,7 +111,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
+      className={`box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
         ${btnClassName} ${additionalBorder}
       `}
     >

package/src/components/ProductTile/ProductTile.tsx

@@ -69,7 +69,7 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-4">
+    <div className="flex mt-3.5">
       {benefits.length ? (
         <div className="mr-6 gap-2.5 text-h6">{benefits.map(renderBenefitLabel)}</div>
       ) : null}

package/src/components/PromoTile/PromoTile.tsx

@@ -55,7 +55,7 @@ export const PromoTile = JSX<PromoTileProps>(
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              <ButtonSection context={context} buttons={buttons} className="flex gap-3" />
             ) : null
           }
         >

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,4 +1,4 @@
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export type StyleType = {
   background: string;

package/src/components/Tabs/Tabs.example.json

@@ -2,15 +2,15 @@
   "showCounter": true,
   "tabs": [
     {
-      "id": "tab1",
+      "ref": "tab1",
       "title": "Вкладка 1"
     },
     {
-      "id": "tab2",
+      "ref": "tab2",
       "title": "Вкладка 2"
     },
     {
-      "id": "tab3",
+      "ref": "tab3",
       "title": "Вкладка 3"
     }
   ]

package/src/components/Tabs/Tabs.fixture.tsx

@@ -8,9 +8,9 @@ export default {
         context={context}
         className="col-span-12"
         tabs={[
-          { id: 'tab1', title: 'Вкладка 1' },
-          { id: 'tab2', title: 'Вкладка 2' },
-          { id: 'tab3', title: 'Вкладка 3' },
+          { ref: 'tab1', title: 'Вкладка 1' },
+          { ref: 'tab2', title: 'Вкладка 2' },
+          { ref: 'https://google.com', title: 'Вкладка 3' },
         ]}
       />
     </div>

package/src/components/Tabs/Tabs.tsx

@@ -4,9 +4,10 @@ import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { Tab, TabsContent } from './TabsContent';
+import type { Tab, TabsContent, TabType } from './TabsContent';
 
 export interface TabActivationEvent {
+  type?: TabType;
   label?: string;
 }
 
@@ -17,10 +18,10 @@ export const Tabs = JSX<TabsProps>((props) => {
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
-    EventBus.inst.fire('tab', { label: selectedTab.id });
+    EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     setCurrentTab(selectedTab);
   };
 
@@ -30,7 +31,7 @@ export const Tabs = JSX<TabsProps>((props) => {
       className={`mb-2 box-border flex gap-x-1 ${className}`}
       role="tablist"
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter }))}
+      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context }))}
     </BlockWrapper>
   );
 });