fix: typings and namespace

Author: berdysheva

src/components/navigation/components/Header/Header.scss

@@ -1,7 +1,9 @@
 @import '../../../../../styles/variables.scss';
 @import '../../../../../styles/mixins.scss';
 
-.header {
+$block: '.#{$ns}header';
+
+#{$block} {
     $root: &;
 
     position: sticky;

src/components/navigation/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import React, {MouseEvent, useCallback, useState} from 'react';
-import block from 'bem-cn-lite';
 
+import {block} from '../../../../utils';
 import {HeaderData, NavigationLogo} from '../../../../models';
 import {Col, Grid, Row} from '../../../../grid';
 import OutsideClick from '../../../OutsideClick/OutsideClick';
@@ -50,7 +50,7 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemIndex, setActiveItemIndex] = useState(-1);
 
-    const onActiveItemChange = useCallback((index) => {
+    const onActiveItemChange = useCallback((index: number) => {
         setActiveItemIndex(index);
     }, []);
 

src/components/navigation/components/Logo/Logo.scss

@@ -1,7 +1,9 @@
 @import '../../../../../styles/variables.scss';
 @import '../../../../../styles/mixins.scss';
 
-.logo {
+$block: '.#{$ns}logo';
+
+#{$block} {
     display: flex;
     align-items: center;
 

src/components/navigation/components/Logo/Logo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 
+import {block} from '../../../../utils';
 import {NavigationLogo} from '../../../../models';
 import RouterLink from '../../../RouterLink/RouterLink';
 import {getMediaImage} from '../../../Media/Image/utils';

src/components/navigation/components/MobileNavigation/MobileNavigation.scss

@@ -1,7 +1,9 @@
 @import '../../../../../styles/variables.scss';
 @import '../../../../../styles/mixins.scss';
 
-.mobile-navigation {
+$block: '.#{$ns}mobile-navigation';
+
+#{$block} {
     position: fixed;
     z-index: 100;
     top: var(--header-height);

src/components/navigation/components/MobileNavigation/MobileNavigation.tsx

@@ -1,7 +1,7 @@
-import block from 'bem-cn-lite';
 import React, {MouseEventHandler, useRef, useCallback} from 'react';
 import {Popup, Portal} from '@gravity-ui/uikit';
 
+import {block} from '../../../../utils';
 import Foldable from '../../../Foldable/Foldable';
 import {
     NavigationItem as NavigationItemModel,

src/components/navigation/components/Navigation/Navigation.scss

@@ -1,7 +1,9 @@
 @import '../../../../../styles/variables.scss';
 @import '../../../../../styles/mixins.scss';
 
-.navigation {
+$block: '.#{$ns}navigation';
+
+#{$block} {
     @include text-size(body-2);
 
     &__links {

src/components/navigation/components/Navigation/Navigation.tsx

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import block from 'bem-cn-lite';
 import React, {
     Fragment,
     MouseEventHandler,
@@ -10,6 +9,7 @@ import React, {
     useRef,
 } from 'react';
 
+import {block} from '../../../../utils';
 import OverflowScroller from '../../../OverflowScroller/OverflowScroller';
 import {
     NavigationDropdownItem,

src/components/navigation/components/NavigationItem/NavigationItem.scss

@@ -1,7 +1,9 @@
 @import '../../../../../styles/variables.scss';
 @import '../../../../../styles/mixins.scss';
 
-.navigation-item {
+$block: '.#{$ns}navigation-item';
+
+#{$block} {
     position: relative;
 
     display: flex;

src/components/navigation/components/NavigationItem/NavigationItem.tsx

@@ -1,8 +1,7 @@
 import React, {Fragment, MouseEventHandler, useContext, useMemo} from 'react';
-import block from 'bem-cn-lite';
 
+import {block, getLinkProps} from '../../../../utils';
 import {RouterLink, ToggleArrow, Button, Image} from '../../../index';
-import {getLinkProps} from '../../../../utils';
 import {LocationContext} from '../../../../context/locationContext';
 import {
     NavigationButtonItem,