@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.75

package/src/components/StepsBlock/StepsBlock.tsx

@@ -5,11 +5,21 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { getStyleMap, StyleType } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
+  ({
+    className = '',
+    title,
+    showLines = true,
+    steps = [],
+    button,
+    anchor = null,
+    version = 'primary',
+  }) => {
+    const styleMap = getStyleMap(version);
     const shortGaps = steps.length > 3;
 
     return (
@@ -18,6 +28,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
           'box-border font-sans text-primary-text bg-white',
           shortGaps ? 'px-20' : 'px-[70px]',
           'py-[50px] flex flex-col items-center',
+          styleMap.background,
+          styleMap.title,
           className,
         ].join(' ')}
         id={anchor}
@@ -30,10 +42,10 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 <div
                   className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
                 />,
-              )(steps.map(renderStepIcon))}
+              )(steps.map(renderStepIcon(styleMap)))}
             </div>
             <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
-              {steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text)))}
+              {steps.map(renderStepTitle(styleMap, Boolean(button?.text)))}
             </div>
           </div>
         ) : null}
@@ -51,33 +63,37 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepIcon = (step: Step, i: number) => {
+const renderStepIcon = (styleMap: StyleType) => (step: Step, i: number) => {
   return (
     <div key={String(i)} className="flex flex-col items-center text-center relative">
-      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+      <div
+        className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`}
+      >
         {(step.icon?.icon && <Img image={step.icon} width="48" height="48" />) || (
-          <span className="font-normal text-title-sm text-secondary-text">{i + 1}</span>
+          <span className={`font-normal text-title-sm ${styleMap.title}`}>{i + 1}</span>
         )}
       </div>
     </div>
   );
 };
 
-const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
+const renderStepTitle = (styleMap: StyleType, isMainButton: boolean) => (step: Step, i: number) => {
   return (
     <div
       key={String(i)}
       className="flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden"
     >
       <div>
-        {step.label && <div className="font-normal text-xl m-0 mt-4">{step.label}</div>}
-        {step.description && (
+        {step.label ? <div className="font-normal text-xl m-0 mt-4">{step.label}</div> : null}
+        {step.description ? (
           <div
-            className={`font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`}
+            className={`font-light text-base ${styleMap.description} ${
+              step.label ? 'mt-2' : 'mt-4'
+            }`}
           >
             {step.description}
           </div>
-        )}
+        ) : null}
       </div>
       {step?.button?.text && !isMainButton ? (
         <Button

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
-import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
@@ -35,7 +35,10 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   button?: ButtonProps;
-  /** @title Размер шагов (моб.) */
+  /**
+   * @title Размер шагов (моб.)
+   * @default normal
+   */
   size?: SizeVersion; // TODO: mobile content
-  version?: BlockVersion; // TODO: mobile content
+  version?: BlockVersion;
 }

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -0,0 +1,28 @@
+import { BlockVersion } from '../../model/BlockVersion';
+
+export type StyleType = {
+  background: string;
+  title: string;
+  description: string;
+  iconBackground: string;
+  iconConnector: string;
+};
+
+const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+  primary: {
+    background: 'bg-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+    iconBackground: 'bg-secondary-light',
+    iconConnector: 'bg-secondary-light',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    title: 'text-white',
+    description: 'text-white/80',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+  },
+};
+
+export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -40,6 +40,7 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+
     return (
       <section
         className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}

package/src/components/TextBlock/TextBlock.tsx

@@ -41,6 +41,7 @@ export const TextBlock = JSX<TextBlockProps>(
     anchor = null,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+
     return (
       <section
         className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}

package/src/content-page-repository/ContentPageRepository.ts

@@ -27,6 +27,7 @@ export function ContentPageRepository({
   async function getAllContentPagesMap(): Promise<Record<string, ContentPageDef>> {
     const pagePaths = await listAllContentPages();
     const pages = await Promise.all(pagePaths.map(readPage));
+
     return pagePaths.reduce(
       (result, path, i) => ({
         ...result,
@@ -42,11 +43,13 @@ export function ContentPageRepository({
 
   async function getSecondaryContentPages(customPageType?: string) {
     const pages = await getAllContentPages();
+
     return pages.filter(not(bySlug(INDEX_PAGE_SLUG))).filter(byCustomPageType(customPageType));
   }
 
   async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
     const pages = await getAllContentPages();
+
     return pages.find(bySlug(slug));
   }
 
@@ -55,6 +58,7 @@ export function ContentPageRepository({
   }
 
   const cache: Record<string, ContentPageDef> = {};
+
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
       cache[filePath] = await transformContentPage(filePath, {
@@ -62,6 +66,7 @@ export function ContentPageRepository({
         publicDir,
       });
     }
+
     return cache[filePath];
   }
 

package/src/content-page-repository/mapJSON.ts

@@ -14,6 +14,7 @@ export async function mapJSON<T>(
 
   if (Array.isArray(data)) {
     const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
+
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
@@ -21,7 +22,9 @@ export async function mapJSON<T>(
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
+
     return Object.assign({}, ...pairs);
   }
+
   return mapper<T>(data, keyParts);
 }

package/src/content-page-repository/transformContentPage.ts

@@ -14,6 +14,7 @@ export async function transformContentPage(
   options: TransformationOptions,
 ): Promise<ContentPageDef> {
   const content = await readFile(pagePath, 'utf8');
+
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
     const isPicture = value && isLocalPath(value?.src);
@@ -22,6 +23,7 @@ export async function transformContentPage(
     } else if (isPicture) {
       return await transformPicture(pagePath, value as Picture, options);
     }
+
     return value;
   });
 }

package/src/content-page-repository/transformMarkdown.ts

@@ -8,5 +8,6 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
   }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
+
   return result.toString('utf-8');
 }

package/src/content-page-repository/transformPicture.ts

@@ -17,6 +17,7 @@ export async function transformPicture(
   const [transformedPicture, ...transformedSources] = await Promise.all(
     [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
   );
+
   return {
     ...picture,
     src: transformedPicture,
@@ -70,6 +71,7 @@ function transformSrc(src: string, { format, size }: TransformationOptions & Img
   }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
+
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${
     String(format) || path.extname(src)
   }`;

package/src/hooks/useCreditCalculatorData.ts

@@ -5,11 +5,13 @@ export function useCreditCalculatorData(
   directoryName: string | undefined,
 ): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
+
   return data || {};
 }
 
 async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
+
   return await response.json();
 }
 

package/src/hooks/useExchangeRates.ts

@@ -11,6 +11,7 @@ export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyI
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
   const result = data?.hits?.hits?.map((_) => _._source) || [];
+
   return result.length ? getCurrencyListByRate(result) : result;
 }
 
@@ -23,6 +24,7 @@ async function fetchExchangeRates(): Promise<any | undefined> {
       },
       body: JSON.stringify(EXCHANGE_RATES_BODY),
     });
+
     return await response.json();
   } catch (err) {
     console.error(err);
@@ -79,6 +81,7 @@ const getCurrencyListByRate = (currencyRates: RatesData[]) =>
         sell: Number(_.rate_sell),
       });
     }
+
     return result;
   }, []);
 

package/src/hooks/useLink.ts

@@ -13,6 +13,7 @@ export function useLink(
   link: Partial<LinkProps & { className: string }>,
 ) {
   const href = adjustHref(link.href, router);
+
   return {
     ...link,
     href,

package/src/react/setup-fixture.ts

@@ -40,6 +40,7 @@ export const context: ContentPageContext = {
         setData(_);
       });
     }, [key, fetcher]);
+
     return { data };
   },
   useGeolocation: (defaultLocation) => {

package/src/services/sitemap/findActiveSubItem.ts

@@ -10,5 +10,6 @@ export const findActiveSubItem =
     const activeSubItem = possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
       : null;
+
     return activeSubItem;
   };

package/src/services/sitemap/useSitemap.ts

@@ -4,11 +4,13 @@ import { projectSettings } from '../../ProjectSettings';
 
 export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
   const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+
   return data || {};
 }
 
 async function fetchSitemap(): Promise<HeaderContent> {
   const response = await fetch(sitemapURL());
+
   return await response.json();
 }
 

package/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -17,71 +17,81 @@ export interface ActiveHandler {
   initialState?: boolean;
 }
 
-/**
- * @title Количество колонок
- * @enumNames ["1 колонка", "2 колонки"]
- */
-export type ColumnsCount = 1 | 2;
+export interface BlocksCommonProps {
+  /**
+   * @title Стиль
+   * @default ["col-span-12"]
+   **/
+  style?: string[];
+}
 
 /**
  * @title Заголовок
  * @default {"blockListType": "Headline"}
  */
-export type HeadlineBlockListDef = HeadlineContent & { blockListType: 'Headline' };
+export type HeadlineBlockListDef = HeadlineContent &
+  BlocksCommonProps & { blockListType: 'Headline' };
 
 /**
  * @title Список документов
  * @default {"blockListType": "LinkDocs"}
  */
-export type LinkDocsBlockListDef = LinkDocsContent & { blockListType: 'LinkDocs' };
+export type LinkDocsBlockListDef = LinkDocsContent &
+  BlocksCommonProps & { blockListType: 'LinkDocs' };
 
 /**
  * @title Текстовый блок
  * @default {"blockListType": "TextBlock"}
  */
-export type TextBlockBlockListDef = TextBlockContent & { blockListType: 'TextBlock' };
+export type TextBlockBlockListDef = TextBlockContent &
+  BlocksCommonProps & { blockListType: 'TextBlock' };
 
 /**
  * @title Картинка с текстом
  * @default {"blockListType": "PictureText"}
  */
-export type PictureTextBlockListDef = PictureTextContent & { blockListType: 'PictureText' };
+export type PictureTextBlockListDef = PictureTextContent &
+  BlocksCommonProps & { blockListType: 'PictureText' };
 
 /**
  * @title Продуктовый блок
  * @default {"blockListType": "ProductBlock"}
  */
-export type ProductBlockBlockListDef = ProductBlockContent & { blockListType: 'ProductBlock' };
+export type ProductBlockBlockListDef = ProductBlockContent &
+  BlocksCommonProps & { blockListType: 'ProductBlock' };
 
 /**
  * @title Плитка
  * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & { blockListType: 'Tile' };
+export type TileBlockListDef = TileContent & BlocksCommonProps & { blockListType: 'Tile' };
 
 /**
  * @title Продуктовая плитка
  * @default {"blockListType": "ProductTile"}
  */
-export type ProductTileBlockListDef = ProductTileContent & { blockListType: 'ProductTile' };
+export type ProductTileBlockListDef = ProductTileContent &
+  BlocksCommonProps & { blockListType: 'ProductTile' };
 
 /**
  * @title Галерея
  * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & { blockListType: 'Gallery' };
+export type GalleryBlockListDef = GalleryContent & BlocksCommonProps & { blockListType: 'Gallery' };
 
 /**
  * @title Мини-галлерея
  * @default {"blockListType": "MiniGallery"}
  */
-export type MiniGalleryBlockListDef = MiniGalleryContent & { blockListType: 'MiniGallery' };
+export type MiniGalleryBlockListDef = MiniGalleryContent &
+  BlocksCommonProps & { blockListType: 'MiniGallery' };
 
 /**
  * @title Список ссылок
  * @default {"blockListType": "LinkList"}
  */
-export type LinkListBlockListDef = LinkListContent & { blockListType: 'LinkList' };
+export type LinkListBlockListDef = LinkListContent &
+  BlocksCommonProps & { blockListType: 'LinkList' };
 
 /**
  * @title Содержимое блока

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

@@ -1,30 +1,35 @@
 import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import type { BlockDef, ColumnsCount } from './BlocksListProps';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { BlockDef } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
-  columns?: ColumnsCount;
   className?: string;
 };
 
-export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
+export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
 
 const renderBlock =
-  ({ context, columns, className }: EmbeddableBlocksProps) =>
+  ({ context, className }: UniBlockProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
       return null;
     }
-    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+    const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
+
     return (
-      <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} className="!p-0" />
-      </div>
+      <EmbeddedBlock
+        key={`block_${i}`}
+        context={context}
+        {...block}
+        className={`${className} ${classNameBlock}`}
+      />
     );
   };

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

@@ -8,6 +8,7 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
   const { text, aboveText, appendLeft, appendRight } = props;
+
   return (
     <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}

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

@@ -10,6 +10,7 @@ export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
+
   return buttons?.length ? (
     <div className={className}>
       {buttons.map((button, index) =>

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

@@ -8,6 +8,7 @@ import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
 
 export type FoldableBlocks = VNode[];
 export type Render = (_: VNode, isActive: boolean) => VNode;
+
 export interface FoldableProps {
   context: ContentPageContext;
   foldButtonLabel?: string;
@@ -17,11 +18,13 @@ export interface FoldableProps {
   foldButtonDataTheme?: ColorPalette;
   isUnfolded?: boolean;
   render?: Render;
+  containerClasses?: string;
 }
 
 export interface RenderBlocksParams {
   blocksToHide: number;
   isActive: boolean;
+  containerClasses?: string;
 }
 
 export const Foldable = JSX<FoldableProps>(
@@ -33,6 +36,7 @@ export const Foldable = JSX<FoldableProps>(
     foldButtonLabel,
     foldButtonDataTheme,
     isUnfolded,
+    containerClasses,
     render = (_) => _,
   }) => {
     const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
@@ -44,7 +48,7 @@ export const Foldable = JSX<FoldableProps>(
 
     return blocks ? (
       <div>
-        {renderBlocks(blocks, render, { blocksToHide, isActive })}
+        {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
         {hiddenBlocksNum ? (
           <button
             className={
@@ -55,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />
+            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
           </button>
         ) : null}
       </div>
@@ -66,7 +70,7 @@ export const Foldable = JSX<FoldableProps>(
 const renderBlocks = (
   blocks: FoldableBlocks,
   render: Render,
-  { blocksToHide, isActive }: RenderBlocksParams,
+  { blocksToHide, isActive, containerClasses }: RenderBlocksParams,
 ) => {
   const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
   const hiddenBlocks = blocks.slice(-blocksToHide);
@@ -74,7 +78,7 @@ const renderBlocks = (
   return render(
     <div>
       {visibleBlocks}
-      <div className={foldableBlockClassNames}>{hiddenBlocks}</div>
+      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
     </div>,
     isActive,
   );

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

@@ -8,6 +8,7 @@ export const Input = JSX<InputProps>(
       const validInputValue = e.target.validity.valid ? e.target.value : value;
       onChange(validInputValue);
     };
+
     return (
       <input
         className={className}

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

@@ -25,6 +25,7 @@ export const InputRange = JSX<InputRangeProps>(
         onChange(max);
       }
     };
+
     return (
       <div className={className}>
         <label className="block relative">

package/src/ui-kit/List/ListItem.tsx

@@ -46,5 +46,6 @@ export const getListStyle = (version: ListItemVersion) => {
     tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
     'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
   };
+
   return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
 };

package/src/ui-kit/Logo/Logo.tsx

@@ -66,5 +66,6 @@ export const Logo = JSX<Partial<LogoProps>>(
 
 const renderTitle = (children, bgColor, title) => {
   const text = children || title || 'Россельхозбанк';
+
   return <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>{text}</span>;
 };

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

@@ -4,6 +4,7 @@ import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">

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

@@ -5,6 +5,7 @@ import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">

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

@@ -5,6 +5,7 @@ import { Img } from './Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">

package/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -20,5 +20,6 @@ export const getIndexParts = (
 
   const [start, end] = scrollPoints[index];
   const fraction = (scrollLeft - start) / (end - start);
+
   return { index, fraction };
 };

package/src/ui-kit/Tabs/Tabs.tsx

@@ -19,6 +19,7 @@ const tabDescriptionStyle = (isActive = false) =>
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
     const isActive = currentTabIndex === index;
+
     return (
       <div
         key={String(index)}

package/src/ui-kit/TopItem/TopItem.tsx

@@ -60,5 +60,6 @@ const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) =
   const nonActiveAtoms = `${
     flat ? 'text-primary-text' : 'text-secondary-text'
   } hover:text-primary-main`;
+
   return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
 };