@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.87

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
@@ -10,7 +10,7 @@ export interface ComparisonTableProps extends ComparisonTableContent, UniBlockPr
 
 export const ComparisonTable = JSX<ComparisonTableProps>(
   ({
-    className,
+    className = '',
     context,
     title,
     rowHeaders,
@@ -25,9 +25,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className}`}
         {...rest}
       >
         <Heading
@@ -56,7 +54,7 @@ const renderShowMoreToggleButton = ({
   onClick,
 }: {
   isShowAllRow: boolean;
-  onClick?: (ev?: MouseEvent) => void;
+  onClick: () => void;
 }) => {
   return (
     <div className="pr-[50px]">

package/src/components/ComparisonTable/ComparisonTableColumnHeaders.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TableRowContainer } from './TableRowContainer';
-import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { HeaderCell } from './HeaderCell';
 import { useLink } from '../../hooks/useLink';
-import type { ColumnHeader } from './ComparisonTableContent';
 import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { ColumnHeader } from './ComparisonTableContent';
+import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { TableRowContainer } from './TableRowContainer';
 
 interface ComparisonTableColumnHeadersProps {
   colHeaders: ColumnHeader[];
@@ -18,7 +18,7 @@ export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProp
   ({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
     return (
       <TableRowContainer>
-        <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
+        <div className={FIRST_CELL_CLASSES} role="columnheader" />
         <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
           {colHeaders.map((header, i) => (
             <HeaderCell

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -2,11 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { TableRow } from './TableRow';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
 import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { CellData } from './ComparisonTableContent';
+import type { TitleProp } from '../../model/HeadlineType';
 
 type ComparisonTableRowsProps = TableArrowScrollControlProps & {
-  rowData: { header: HeadingContent; data: CellData[][] }[];
+  rowData: { header: TitleProp; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
 };

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -19,7 +19,7 @@ const subtitleStyle = (isFillGradient = false): string =>
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
-    <div role="columnheader" scope="col">
+    <div role="columnheader">
       {icon ? (
         <Img
           className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -18,7 +18,6 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
   <div
     className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
     role="columnheader"
-    scope="col"
   >
     {icon && !image?.src && (
       <Img

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -32,7 +32,7 @@ export default {
       className="bg-main"
       context={context}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef)}
+      data={normalizePage(data as ContentPageDef) as ContentPageDef}
     />
   ),
   editor: (

package/src/components/ContentPage/ContentPage.page.json

@@ -487,7 +487,7 @@
       "content": {
         "title": "Потребительский кредит наличными",
         "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
-        "headingType": "h2",
+        "headlineVersion": "XL",
         "backwardButton": {
           "href": "https://rshb.ru",
           "text": "Кнопка возврата",
@@ -2355,4 +2355,4 @@
       }
     }
   ]
-}
+}

package/src/components/ContentPage/ContentPage.tsx

@@ -26,7 +26,7 @@ export type BlocksRegistry = Record<string, JSXBlock>;
 
 export interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
-  data: ContentPageDef;
+  data?: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
@@ -45,9 +45,10 @@ export const ContentPage = JSX<ContentPageProps>(
     className = '',
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
+    data = {},
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
     const { header } = slots;
 
     return (

package/src/components/ContentPage/ContentPageContext.tsx

@@ -1,5 +1,4 @@
 import { VNode } from '../../model/VNode';
-import type { FuncReturnVoid } from '../../types';
 
 export interface Router {
   pathname: string;
@@ -34,10 +33,10 @@ export type SetStateAction<S> = S | ((prevState: S) => S);
 
 export type SetStateHook = <State>(
   initialState: State | (() => State),
-) => [State, FuncReturnVoid<SetStateAction<State>>];
+) => [State, (action: SetStateAction<State>) => void];
 
 export interface IntersectionObserverTagProps {
-  Tag: string;
+  tag: keyof HTMLElementTagNameMap;
   className?: string;
   anchor?: string;
   children?: VNode;
@@ -45,9 +44,7 @@ export interface IntersectionObserverTagProps {
   observerOptions?: IntersectionObserverInit;
 }
 
-export type IntersectionObserverComponent = (
-  props: IntersectionObserverTagProps & Record<string, any>,
-) => VNode;
+export type IntersectionObserverComponent = (props: IntersectionObserverTagProps) => VNode;
 
 export interface ContentPageContext {
   useRouter: () => Router;

package/src/components/ContentPage/ContentPageHead.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { VNode as _VNode } from '../../model/VNode';
 import type { ContentPageMeta } from '../../types';
-
 export interface ContentPageHeadProps {
-  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
+  HeadComponent: <Props, Context, VNode = _VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;
 }
 

package/src/components/ContentPage/normalizePage.mobile.ts

@@ -1,4 +1,4 @@
-import type { BlockDef, ContentPageDef } from '../../types';
+import type { BlockDef, ContentPageDef, Slot } from '../../types';
 import { Blocks } from '../Blocks';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
@@ -7,7 +7,7 @@ export function normalizePage(
   contentPage: ContentPageDef | undefined | null,
 ): ContentPageDef | undefined {
   if (!contentPage) {
-    return undefined;
+    return;
   }
 
   const { blocks, slots } = contentPage;
@@ -22,7 +22,7 @@ export function normalizePage(
           ...res,
           [key]: {
             ...slots[key],
-            blocks: getMobileBlocks(slots[key].blocks),
+            blocks: getMobileBlocks((slots[key] as Slot).blocks),
           },
         }),
         {},

package/src/components/ContentPage/normalizePage.ts

@@ -1,13 +1,13 @@
-import type { BlockDef, ContentPageDef } from '../../types';
+import type { BlockDef, ContentPageDef, Slot } from '../../types';
 import { Blocks } from '../Blocks';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export function normalizePage<T extends ContentPageDef | undefined | null>(
   contentPage: T,
-): T extends ContentPageDef ? ContentPageDef : ContentPageDef | undefined {
+): ContentPageDef | undefined {
   if (!contentPage) {
-    return undefined as any;
+    return;
   }
 
   const { blocks, slots } = contentPage;
@@ -22,7 +22,7 @@ export function normalizePage<T extends ContentPageDef | undefined | null>(
           ...res,
           [key]: {
             ...slots[key],
-            blocks: getDesktopBlocks(slots[key].blocks),
+            blocks: getDesktopBlocks((slots[key] as Slot).blocks),
           },
         }),
         {},

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../types';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { calculateResult, formatValue } from './calculateResult';
 import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
 import { renderButton } from './renderButton';
 import { renderInput } from './renderInput';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface ExchangeCurrencyItem {
   code?: Currency;
@@ -75,7 +75,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
 const handleSelectSell =
   (
     calcState: CalcState,
-    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    setCalcState: (state: Partial<CalcState>) => void,
     currencyRatesSell: ExchangeCurrencyItem[],
   ) =>
   (value: Currency) => {
@@ -92,7 +92,7 @@ const handleSelectSell =
 const handleSelectBuy =
   (
     calcState: CalcState,
-    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    setCalcState: (state: Partial<CalcState>) => void,
     currencyRatesBuy: ExchangeCurrencyItem[],
   ) =>
   (value: Currency) => {
@@ -106,7 +106,7 @@ const handleSelectBuy =
   };
 
 const handleInputSell =
-  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesSell: ExchangeCurrencyItem[]) =>
+  (setCalcState: (state: Partial<CalcState>) => void, currencyRatesSell: ExchangeCurrencyItem[]) =>
   (value: string, codeFrom: Currency, codeTo: Currency) => {
     setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
     const rate =
@@ -120,7 +120,7 @@ const handleInputSell =
   };
 
 const handleInputBuy =
-  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesBuy: ExchangeCurrencyItem[]) =>
+  (setCalcState: (state: Partial<CalcState>) => void, currencyRatesBuy: ExchangeCurrencyItem[]) =>
   (value: string, codeTo: Currency, codeFrom: Currency) => {
     setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
     const rate =

package/src/components/Footer/Contacts.tsx

@@ -40,7 +40,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   return (
     <div className="mb-4" key={String(index)}>
       <div>{renderText(type, text)}</div>
-      <div className="mt-1 font-sans font-light text-sm text-secondary-text">{description}</div>
+      <div className="mt-1 font-sans text-s-light text-secondary-text">{description}</div>
     </div>
   );
 };

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { Contacts } from './Contacts';
@@ -28,7 +28,7 @@ export const Footer = JSX<FooterProps>(
   }) => {
     return (
       <BlockWrapper
-        Tag="footer"
+        tag="footer"
         context={context}
         className={`p-9 bg-white ${className || ''}`}
         {...rest}

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -4,7 +4,7 @@ import type { LinkProps } from '../../model/LinkProps';
 interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
   index: number;
-  onClick: (ev: MouseEvent) => any;
+  onClick: () => void;
 }
 
 export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(

package/src/components/Footer/MediaButton.tsx

@@ -54,7 +54,6 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
-  const imageClassName = isPrimary ? 'group-hover:text-white' : '';
 
   return (
     <a
@@ -67,7 +66,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img image={icon} imageClassName={imageClassName} width="24" height="24" asSVG />
+        <Img image={icon} imageClassName="group-hover:text-white" width="24" height="24" asSVG />
       ) : null}
     </a>
   );

package/src/components/Footer/Sitemap.tsx

@@ -31,7 +31,7 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   return (
     <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
       <a
-        className="block font-sans leading-5 text-base text-primary-text no-underline"
+        className="block font-sans leading-5 text-l text-primary-text no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline"
+    className="block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/components/Footer/SocialMedia.tsx

@@ -26,7 +26,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
             />
           ))}
         </div>
-        <span className="font-light text-sm text-secondary-text">{children}</span>
+        <span className="text-s-light text-secondary-text">{children}</span>
       </div>
     );
   },

package/src/components/Footer/TextInformationLink.tsx

@@ -4,15 +4,13 @@ import type { LinkProps } from '../../model/LinkProps';
 interface TextInformationLinkProps extends LinkProps {
   className: string;
   index: number;
-  onClick: (ev: MouseEvent) => any;
+  onClick: () => void;
 }
 
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className
-      }`}
+      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Gallery/GalleryCardInner.tsx

@@ -18,9 +18,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
             </div>
           ) : null}
           {title ? renderCardTitle(title, titleStyleClasses) : null}
-          {description ? (
-            <div className={`font-light text-m-md-new ${title ? 'mt-2' : ''}`}>{description}</div>
-          ) : null}
+          {description ? <div className={`text-m${title ? 'mt-2' : ''}`}>{description}</div> : null}
           {items?.length ? renderItems(items, isDotted, version) : null}
         </div>
         {button?.text ? renderButton(button) : null}

package/src/components/Gallery/GalleryContainer.tsx

@@ -25,7 +25,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
         <div className="flex flex-col items-center mb-8">
           {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
           {description ? (
-            <div className="font-light text-md max-w-[600px] mt-2.5">{description}</div>
+            <div className="text-xl-light max-w-[600px] mt-2.5">{description}</div>
           ) : null}
         </div>
         <div

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export const GracePeriod = JSX<GracePeriodProps>(
     return (
       <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
         <Heading headingType="h3" className="text-center" title={title} />
-        <div className="font-light text-base-md text-center mt-3">{description}</div>
+        <div className="text-l-light-md text-center mt-3">{description}</div>
         {calendar ? renderCalendar(calendar) : null}
       </BlockWrapper>
     );
@@ -38,7 +38,7 @@ const renderCalendar = (calendar) => {
 
   return (
     <div className="w-full flex flex-col justify-center mt-[54px]">
-      <div className="flex w-full mb-3 font-light text-m-title-md text-center">
+      <div className="flex w-full mb-3 font-light text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex w-full">

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { TitleProp } from '../../model/HeadlineType';
 
 interface Month {
   /** @title Название месяца */
@@ -30,7 +30,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends HeadingContent {
+export interface GracePeriodContent extends TitleProp {
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/src/components/GroupBlock/GroupBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { filterBlocksByTag } from './filterBlocksByTag';
 import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
 import { GroupBlocksItem } from './GroupBlocksItem';
@@ -29,7 +29,7 @@ export const GroupBlock = JSX<GroupBlockProps>(
     });
 
     return (
-      <BlockWrapper context={context} className={`box-border gap-1 ${className}`} {...rest}>
+      <BlockWrapper context={context} className={`box-border ${className}`} {...rest}>
         {tabsNewMap?.length ? (
           <GroupBlockTabs
             currentTag={currentTag}
@@ -39,7 +39,9 @@ export const GroupBlock = JSX<GroupBlockProps>(
           />
         ) : null}
         {groupBlocks.length ? (
-          <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          <div className="mt-1">
+            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          </div>
         ) : null}
       </BlockWrapper>
     );

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -1,56 +1,55 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TabsItemProps } from './GroupBlock';
 
-export type TabClickHandler = (tag) => void;
-
 export interface GroupBlockTabsProps {
-  onTabClick: TabClickHandler;
-  currentTag?: string;
   className?: string;
+  currentTag?: string;
   tabs?: TabsItemProps[];
   isShowCounter?: boolean;
+  onTabClick: (tag?: string) => void;
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter = false } = props;
+  const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
 
   return (
-    <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
-      {tabs?.map(renderTab(onTabClick, currentTag, isShowCounter))}
+    <div className={`box-border flex gap-x-1 h-14 ${className}`} role="tablist">
+      {tabs?.map(renderTab({ currentTag, isShowCounter, onTabClick }))}
     </div>
   );
 });
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
 
 const renderTab =
-  (onTabClick: TabClickHandler, currentTag?: string, isShowCounter = false) =>
+  ({ currentTag, isShowCounter, onTabClick }: GroupBlockTabsProps) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
+
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+
+    const tabText = `text-m ${
+      isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
+    }`;
     const counterBlockStyle = `${badgeStyle}
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
+      ${
+        isActive
+          ? 'bg-white/30 text-white'
+          : 'bg-main-divider text-secondary-text group-hover:text-primary-main'
+      }`;
 
     return (
       <div
         key={String(i)}
-        className={`flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        className={`flex-1 flex items-center justify-center cursor-pointer ${tabBg}`}
         role="tab"
         onClick={() => onTabClick(tab.tag)}
-        aria-selected={String(isActive)}
-        tag={tab?.tag}
+        aria-selected={isActive}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
-          {isShowCounter ? (
-            <div
-              className={`flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`}
-            >
-              <span>{tab.count}</span>
-            </div>
-          ) : null}
-        </div>
+        {tab?.title ? <div className={tabText}>{tab.title}</div> : null}
+        {isShowCounter ? (
+          <div className={`flex items-center justify-center ${counterBlockStyle}`}>{tab.count}</div>
+        ) : null}
       </div>
     );
   };

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../ContentPage/ContentPage';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GroupBlockDef } from './BlocksTypeProps';
 import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
 import { GroupBlockContent } from './GroupBlockContent';
@@ -11,7 +11,7 @@ export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
 
 export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
   return (
-    <div className="grid grid-cols-12 gap-2 box-border">
+    <div className="grid grid-cols-12 gap-1 box-border">
       {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
     </div>
   );

package/src/components/Header/DropdownMenu.tsx

@@ -20,13 +20,13 @@ interface DropdownMenuProps extends UniBlockProps {
   menuItems: LinkProps[];
   bgColor?: BgColorVersion;
   context: ContentPageContext;
+  activeSubItem?: LinkProps;
 }
 
 export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
-  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+  const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
 
   const { useRouter, handlerDecorator } = context;
-
   const router = useRouter();
 
   return (
@@ -46,26 +46,39 @@ export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
         className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
         aria-hidden={!menuVisible}
       >
-        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+        {renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem })}
       </div>
     </div>
   );
 });
 
-const renderDotsSubMenuItems = (
-  menuItems: LinkProps[],
-  router: Router,
-  handlerDecorator: HandlerDecorator | undefined,
-) =>
-  menuItems?.map((_) => (
+type DotsSubMenuItemsProps = {
+  menuItems: LinkProps[];
+  router: Router;
+  handlerDecorator: HandlerDecorator | undefined;
+  activeSubItem?: LinkProps;
+};
+
+const renderDotsSubMenuItems = ({
+  menuItems,
+  router,
+  handlerDecorator,
+  activeSubItem,
+}: DotsSubMenuItemsProps) => {
+  const isActive = (item) => item === activeSubItem;
+
+  return menuItems?.map((_) => (
     <a
       key={_.href}
       {...useLink({ router, handlerDecorator }, _)}
-      className="text-base font-light pb-4 hover:text-primary-main"
+      className={`text-l-light pb-4 hover:text-primary-main ${
+        isActive(_) ? 'text-primary-main' : ''
+      }`}
     >
       {_.text}
     </a>
   ));
+};
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />