@doyourjob/gravity-ui-page-constructor-addons 2.1.25-dev.0 → 2.1.25-dev.2

package/build/{cjs/components/NewHeader/components/InvestorPopup/InvestorPopup.css → esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-investor-popup {
+.pc-addons-nh-investor-popup {
   background: var(--g-color-base-float);
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
@@ -12,16 +12,16 @@ unpredictable css rules order in build */
   scrollbar-width: none;
 }
 
-.pc-addons-investor-popup::-webkit-scrollbar {
+.pc-addons-nh-investor-popup::-webkit-scrollbar {
   display: none;
 }
 
-.pc-addons-investor-popup__container {
+.pc-addons-nh-investor-popup__container {
   padding: 32px;
   display: flex;
 }
 
-.pc-addons-investor-popup__wrap {
+.pc-addons-nh-investor-popup__wrap {
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -29,21 +29,28 @@ unpredictable css rules order in build */
   flex: 1;
 }
 
-.pc-addons-investor-popup__title {
+.pc-addons-nh-investor-popup__title {
   font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
   line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: inherit;
+  text-decoration: none;
+  display: flex;
   font-weight: 600;
   margin-bottom: 8px;
 }
 
-.pc-addons-investor-popup__subtitle {
+.pc-addons-nh-investor-popup__title:hover {
+  color: var(--g-color-text-link-hover);
+}
+
+.pc-addons-nh-investor-popup__subtitle {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   font-weight: 500;
   color: #9fb1bd;
 }
 
-.pc-addons-investor-popup__card {
+.pc-addons-nh-investor-popup__card {
   background-color: #f2f4f5;
   border-radius: 8px;
   width: 268px;
@@ -53,25 +60,25 @@ unpredictable css rules order in build */
   justify-content: space-between;
 }
 
-.pc-addons-investor-popup__card-title {
+.pc-addons-nh-investor-popup__card-title {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   font-weight: 500;
 }
 
-.pc-addons-investor-popup__card-wrap {
+.pc-addons-nh-investor-popup__card-wrap {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.pc-addons-investor-popup__card-price {
+.pc-addons-nh-investor-popup__card-price {
   font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
   line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
   font-weight: 700;
 }
 
-.pc-addons-investor-popup__card-date {
+.pc-addons-nh-investor-popup__card-date {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   font-weight: 500;

package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHInvestorPopupData } from '../../models';
+import './NHInvestorPopup.css';
+export declare const NHInvestorPopup: ({ title, subtitle, url, items, stock }: NHInvestorPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/{InvestorPopup/InvestorPopup.js → NHInvestorPopup/NHInvestorPopup.js}

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Col, Grid, GridColumnSize, Row, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
-import { PopupItem } from '../PopupItem/PopupItem';
-import './InvestorPopup.css';
-const b = block('investor-popup');
-export const InvestorPopup = ({ title, subtitle, url, items, stock }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHInvestorPopup.css';
+const b = block('nh-investor-popup');
+export const NHInvestorPopup = ({ title, subtitle, url, items, stock }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
     React.createElement("div", { className: b('wrap') },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("a", Object.assign({ href: url, className: b('title') }, getLinkProps(url)), title),
                 React.createElement("div", { className: b('subtitle') }, subtitle))),
-        React.createElement(Row, null, items.map((item) => (React.createElement(PopupItem, Object.assign({ key: item.title }, item, { sizes: { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 6 } })))))),
+        React.createElement(Row, null, items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title, hover: true }, item, { sizes: { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 6 } })))))),
     stock && (React.createElement("div", { className: b('card') },
         React.createElement("div", { className: b('card-title') }, stock.title),
         React.createElement("div", { className: b('card-wrap') },

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.css

@@ -0,0 +1,16 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-login-button {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 4px;
+  padding: 0 8px 0 12px;
+  border-radius: 8px;
+  background: var(--g-color-base-brand);
+  color: var(--g-color-text-brand-contrast);
+}
+
+.pc-addons-nh-login-button:hover {
+  background: var(--g-color-base-brand-hover);
+}

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import React from 'react';
+import { NHLoginPopupData, SetupRouteChangeHandler } from '../../models';
+import './NHLoginButton.css';
+interface LoginButtonProps {
+    data: NHLoginPopupData;
+    headerRef?: RefObject<HTMLDivElement>;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+}
+export declare const NHLoginButton: ({ data, headerRef, setupRouteChangeHandler }: LoginButtonProps) => React.JSX.Element;
+export {};

package/build/esm/components/NewHeader/components/{LoginButton/LoginButton.js → NHLoginButton/NHLoginButton.js}

@@ -1,8 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
 import { SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
-import { LoginPopup } from '../LoginPopup/LoginPopup';
-import { NavigationPopup } from '../NavigationPopup/NavigationPopup';
-export const LoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
+import { NHLoginPopup } from '../NHLoginPopup/NHLoginPopup';
+import { NHNavigationPopup } from '../NHNavigationPopup/NHNavigationPopup';
+import './NHLoginButton.css';
+const b = block('nh-login-button');
+export const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     const [isActive, setIsActive] = useState(false);
     const [pretendentActiveTab, setPretendentAciveTab] = useState(false);
     const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
@@ -34,8 +39,9 @@ export const LoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
-    return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    return (React.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         data.text,
-        isActive && (React.createElement(NavigationPopup, { headerRef: headerRef },
-            React.createElement(LoginPopup, Object.assign({}, data))))));
+        React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 14 }),
+        isActive && (React.createElement(NHNavigationPopup, { headerRef: headerRef },
+            React.createElement(NHLoginPopup, Object.assign({}, data))))));
 };

package/build/{cjs/components/NewHeader/components/LoginPopup/LoginPopup.css → esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-login-popup {
+.pc-addons-nh-login-popup {
   border-radius: 16px;
   background: var(--g-color-base-float);
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
@@ -12,32 +12,38 @@ unpredictable css rules order in build */
   scrollbar-width: none;
 }
 
-.pc-addons-login-popup::-webkit-scrollbar {
+.pc-addons-nh-login-popup::-webkit-scrollbar {
   display: none;
 }
 
-.pc-addons-login-popup__container {
+.pc-addons-nh-login-popup__container {
   padding: 8px;
   gap: 8px;
   display: flex;
   flex-direction: column;
 }
 
-.pc-addons-login-popup__item {
+.pc-addons-nh-login-popup__item {
   padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
+  border-radius: 8px;
+  cursor: pointer;
 }
 
-.pc-addons-login-popup__title {
+.pc-addons-nh-login-popup__item:hover {
+  background: var(--g-color-private-black-50);
+}
+
+.pc-addons-nh-login-popup__title {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   font-weight: 500;
 }
 
-.pc-addons-login-popup__subtitle {
+.pc-addons-nh-login-popup__subtitle {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   font-weight: 500;

package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHLoginPopupData } from '../../models';
+import './NHLoginPopup.css';
+export declare const NHLoginPopup: ({ items }: NHLoginPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Grid, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHLoginPopup.css';
+const b = block('nh-login-popup');
+export const NHLoginPopup = ({ items }) => (React.createElement(Grid, { className: b(), containerClass: b('container') }, items.map((item) => (React.createElement("a", Object.assign({ href: item.url, className: b('item'), key: item.title }, getLinkProps(item.url || '')),
+    React.createElement("div", { className: b('title') }, item.title),
+    React.createElement("div", { className: b('subtitle') }, item.subtitle))))));

package/build/esm/components/NewHeader/components/{MediumPopup/MediumPopup.css → NHMediumPopup/NHMediumPopup.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-medium-popup {
+.pc-addons-nh-medium-popup {
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
   display: flex;

package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHMediumPopupData } from '../../models';
+import './NHMediumPopup.css';
+export declare const NHMediumPopup: ({ groups }: NHMediumPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/{MediumPopup/MediumPopup.js → NHMediumPopup/NHMediumPopup.js}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Col, Grid, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
-import { PopupItem } from '../PopupItem/PopupItem';
-import './MediumPopup.css';
-const b = block('medium-popup');
-export const MediumPopup = ({ groups }) => (React.createElement(Grid, null,
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHMediumPopup.css';
+const b = block('nh-medium-popup');
+export const NHMediumPopup = ({ groups }) => (React.createElement(Grid, null,
     React.createElement(Row, null,
-        React.createElement(Col, { className: b() }, groups.map((dataItem) => dataItem.items.map((item) => (React.createElement(PopupItem, Object.assign({}, item, { key: item.title, hover: true, imageSize: dataItem.imageSize, sizes: {
+        React.createElement(Col, { className: b() }, groups.map((dataItem) => dataItem.items.map((item) => (React.createElement(NHPopupItem, Object.assign({}, item, { key: item.title, hover: true, imageSize: dataItem.imageSize, sizes: {
                 [GridColumnSize.Xl]: 3,
                 [GridColumnSize.Md]: 4,
                 [GridColumnSize.All]: 12,

package/build/{cjs/components/NewHeader/components/MobileNavigation/MobileNavigation.css → esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-mobile-navigation {
+.pc-addons-nh-mobile-navigation {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -8,40 +8,40 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
 }
 
-.pc-addons-mobile-navigation__icon {
+.pc-addons-nh-mobile-navigation__icon {
   display: none;
 }
 
-.pc-addons-mobile-navigation__icon:hover:before {
+.pc-addons-nh-mobile-navigation__icon:hover:before {
   background: none;
 }
 
-.pc-addons-mobile-navigation__icon:hover .pc-addons-mobile-navigation__icon {
+.pc-addons-nh-mobile-navigation__icon:hover .pc-addons-nh-mobile-navigation__icon {
   color: var(--g-color-text-complementary);
 }
 
-.pc-addons-mobile-navigation__icon-icon {
+.pc-addons-nh-mobile-navigation__icon-icon {
   position: relative;
   top: 3px;
 }
 
-.pc-addons-mobile-navigation__icon_hidden {
+.pc-addons-nh-mobile-navigation__icon_hidden {
   display: none;
 }
 
-.pc-addons-mobile-navigation__user {
+.pc-addons-nh-mobile-navigation__user {
   margin-top: 24px;
 }
 
-.pc-addons-mobile-navigation__buttons {
+.pc-addons-nh-mobile-navigation__buttons {
   margin-top: 8px;
 }
 
 @media (max-width: 769px) {
-  .pc-addons-mobile-navigation__icon {
+  .pc-addons-nh-mobile-navigation__icon {
     display: block;
   }
-  .pc-addons-mobile-navigation__icon_hidden {
+  .pc-addons-nh-mobile-navigation__icon_hidden {
     display: none;
   }
 }

package/build/esm/components/NewHeader/components/{MobileNavigation/MobileNavigation.d.ts → NHMobileNavigation/NHMobileNavigation.d.ts}

@@ -1,15 +1,15 @@
 import React from 'react';
 import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
-import { MobileNavigationItemData } from '../../models';
-import './MobileNavigation.css';
+import { NHMobileNavigationItemData } from '../../models';
+import './NHMobileNavigation.css';
 interface MobileNavigationProps {
     isOpened: boolean;
     toogleOpen: (isOpened: boolean) => void;
     isSearchOpen: boolean;
-    data: MobileNavigationItemData[];
+    data: NHMobileNavigationItemData[];
     onMenuScroll: (scrollTop: number) => void;
     popupClassName?: string;
     buttons?: ButtonProps[];
 }
-export declare const MobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
+export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
 export {};

package/build/esm/components/NewHeader/components/{MobileNavigation/MobileNavigation.js → NHMobileNavigation/NHMobileNavigation.js}

@@ -3,19 +3,19 @@ import { Button as PCButton } from '@doyourjob/gravity-ui-page-constructor';
 import { Bars, Xmark } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
-import { MobileNavigationItem } from '../MobileNavigationItem/MobileNavigationItem';
-import { MobileNavigationPopup } from '../MobileNavigationPopup/MobileNavigationPopup';
-import './MobileNavigation.css';
-const b = block('mobile-navigation');
-export const MobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (React.createElement("div", { className: b() },
+import { NHMobileNavigationItem } from '../NHMobileNavigationItem/NHMobileNavigationItem';
+import { NHMobileNavigationPopup } from '../NHMobileNavigationPopup/NHMobileNavigationPopup';
+import './NHMobileNavigation.css';
+const b = block('nh-mobile-navigation');
+export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (React.createElement("div", { className: b() },
     React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
             e.stopPropagation();
             toogleOpen(!isOpened);
         } },
         React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
-    React.createElement(MobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+    React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
         React.createElement("nav", null,
             React.createElement("ul", { className: b() }, data.map((item) => (React.createElement("li", { className: b(), key: item.title },
-                React.createElement(MobileNavigationItem, Object.assign({}, item)))))),
+                React.createElement(NHMobileNavigationItem, Object.assign({}, item)))))),
             buttons &&
                 (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => React.createElement(PCButton, Object.assign({}, button, { size: "l", key: button.text }))))))));

package/build/esm/components/NewHeader/components/{MobileNavigationItem/MobileNavigationItem.css → NHMobileNavigationItem/NHMobileNavigationItem.css}

@@ -1,20 +1,20 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-mobile-navigation-item {
+.pc-addons-nh-mobile-navigation-item {
   display: flex;
   justify-content: space-between;
   position: relative;
   padding: 12px 0;
 }
 
-.pc-addons-mobile-navigation-item_type_link {
+.pc-addons-nh-mobile-navigation-item_type_link {
   color: inherit;
   text-decoration: none;
   display: block;
   color: var(--g-color-text-primary);
 }
 
-.pc-addons-mobile-navigation-item__arrow {
+.pc-addons-nh-mobile-navigation-item__arrow {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -23,34 +23,34 @@ unpredictable css rules order in build */
   min-width: 20px;
 }
 
-.pc-addons-mobile-navigation-item__text {
+.pc-addons-nh-mobile-navigation-item__text {
   padding-right: 20px;
 }
 
-.pc-addons-mobile-navigation-item__list {
+.pc-addons-nh-mobile-navigation-item__list {
   padding: 10px 20px;
   background-color: var(--g-color-base-generic);
   border-radius: var(--g-border-radius-l);
 }
 
-.pc-addons-mobile-navigation-item__list:not(:first-child) {
+.pc-addons-nh-mobile-navigation-item__list:not(:first-child) {
   margin-top: 12px;
 }
 
-.pc-addons-mobile-navigation-item__list-items {
+.pc-addons-nh-mobile-navigation-item__list-items {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.pc-addons-mobile-navigation-item__list-title {
+.pc-addons-nh-mobile-navigation-item__list-title {
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   margin: 0;
   padding: 10px 0;
 }
 
-.pc-addons-mobile-navigation-item__list-item {
+.pc-addons-nh-mobile-navigation-item__list-item {
   color: inherit;
   text-decoration: none;
   display: block;
@@ -58,12 +58,12 @@ unpredictable css rules order in build */
   padding: 10px 0;
 }
 
-.pc-addons-mobile-navigation-item__list-item:hover, .pc-addons-mobile-navigation-item__list-item:active {
+.pc-addons-nh-mobile-navigation-item__list-item:hover, .pc-addons-nh-mobile-navigation-item__list-item:active {
   --pc-text-header-color: inherit;
   color: inherit;
 }
 
-.pc-addons-mobile-navigation-item__list-link {
+.pc-addons-nh-mobile-navigation-item__list-link {
   color: inherit;
   text-decoration: none;
   outline: none;

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHMobileNavigationItemData } from '../../models';
+import './NHMobileNavigationItem.css';
+export declare const NHMobileNavigationItem: (props: NHMobileNavigationItemData) => React.JSX.Element | null;

package/build/esm/components/NewHeader/components/{MobileNavigationItem/MobileNavigationItem.js → NHMobileNavigationItem/NHMobileNavigationItem.js}

@@ -1,9 +1,9 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import { Foldable, ToggleArrow, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
-import './MobileNavigationItem.css';
-const b = block('mobile-navigation-item');
-export const MobileNavigationItem = (props) => {
+import './NHMobileNavigationItem.css';
+const b = block('nh-mobile-navigation-item');
+export const NHMobileNavigationItem = (props) => {
     const [isOpened, setIsOpened] = useState(false);
     const toggleOpen = useCallback(() => {
         setIsOpened(!isOpened);
@@ -17,7 +17,7 @@ export const MobileNavigationItem = (props) => {
                 React.createElement("div", { className: b('text') }, props.title),
                 React.createElement("div", { className: b('arrow') },
                     React.createElement(ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),
-            React.createElement(Foldable, { isOpened: isOpened }, props.data.map(({ title: itemTitle, items }) => (React.createElement("div", { className: b('list'), key: items[0].title },
+            React.createElement(Foldable, { isOpened: isOpened }, props.data.map(({ title: itemTitle, items, }) => (React.createElement("div", { className: b('list'), key: items[0].title },
                 itemTitle && React.createElement("h5", { className: b('list-title') }, itemTitle),
                 React.createElement("ul", { className: b('list-items') }, items.map((linkItem) => (React.createElement("li", { className: b('li'), key: linkItem.title },
                     React.createElement("a", Object.assign({ href: linkItem.url, className: b('list-item') }, getLinkProps(linkItem.url || '')), linkItem.title)))))))))));

package/build/{cjs/components/NewHeader/components/MobileNavigationPopup/MobileNavigationPopup.css → esm/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-mobile-navigation-popup {
+.pc-addons-nh-mobile-navigation-popup {
   width: 100%;
   position: fixed;
   top: 0;
@@ -11,44 +11,44 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--g-color-base-generic);
 }
 
-.pc-addons-mobile-navigation-popup__transition-enter {
+.pc-addons-nh-mobile-navigation-popup__transition-enter {
   transform: translateY(-30px);
   opacity: 0;
 }
 
-.pc-addons-mobile-navigation-popup__transition-enter-active {
+.pc-addons-nh-mobile-navigation-popup__transition-enter-active {
   transform: translateY(0);
   opacity: 1;
   transition: transform 0.4s, opacity 0.4s;
 }
 
-.pc-addons-mobile-navigation-popup__transition-exit {
+.pc-addons-nh-mobile-navigation-popup__transition-exit {
   transform: translateY(0);
   opacity: 1;
 }
 
-.pc-addons-mobile-navigation-popup__transition-exit .pc-addons-mobile-navigation-popup__container {
+.pc-addons-nh-mobile-navigation-popup__transition-exit .pc-addons-nh-mobile-navigation-popup__container {
   opacity: 0;
 }
 
-.pc-addons-mobile-navigation-popup__transition-exit-active {
+.pc-addons-nh-mobile-navigation-popup__transition-exit-active {
   transform: translateY(-30px);
   opacity: 0;
   transition: transform 0.4s, opacity 0.4s;
 }
 
-.pc-addons-mobile-navigation-popup__no-scroll {
+.pc-addons-nh-mobile-navigation-popup__no-scroll {
   overflow: hidden;
 }
 
-.pc-addons-mobile-navigation-popup__container {
+.pc-addons-nh-mobile-navigation-popup__container {
   padding: 4px 48px 0;
   overflow: scroll;
   height: 100%;
 }
 
 @media (max-width: 576px) {
-  .pc-addons-mobile-navigation-popup__container {
+  .pc-addons-nh-mobile-navigation-popup__container {
     padding-left: 24px;
     padding-right: 24px;
   }

package/build/esm/components/NewHeader/components/{MobileNavigationPopup/MobileNavigationPopup.d.ts → NHMobileNavigationPopup/NHMobileNavigationPopup.d.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
-import './MobileNavigationPopup.css';
+import './NHMobileNavigationPopup.css';
 interface MobileNavigationPopupProps {
     isOpened: boolean;
     onClose: () => void;
     children: React.ReactNode;
     onMenuScroll: (scrollTop: number) => void;
 }
-export declare const MobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
+export declare const NHMobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
 export {};

package/build/esm/components/NewHeader/components/{MobileNavigationPopup/MobileNavigationPopup.js → NHMobileNavigationPopup/NHMobileNavigationPopup.js}

@@ -4,12 +4,12 @@ import { useBodyScrollLock } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import { block } from '../../../../utils/cn';
-import './MobileNavigationPopup.css';
-const b = block('mobile-navigation-popup');
+import './NHMobileNavigationPopup.css';
+const b = block('nh-mobile-navigation-popup');
 const TRANSITION_TIME = 400;
 const POPUP_MARGIN = 80;
 const HEADER_HEIGHT = 68;
-export const MobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+export const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
     const [body, setBody] = useState();
     const ref = useRef(null);
     const [containerHeight, setContainerHeight] = useState(0);

package/build/esm/components/NewHeader/components/{Navigation/Navigation.css → NHNavigation/NHNavigation.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-navigation {
+.pc-addons-nh-navigation {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -8,16 +8,16 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   display: flex;
   align-items: center;
-  margin-left: 2px;
+  gap: 20px;
 }
 
 @media (max-width: 768px) {
-  .pc-addons-navigation {
+  .pc-addons-nh-navigation {
     display: none;
   }
 }
 @media (max-width: 769px) {
-  .pc-addons-navigation {
+  .pc-addons-nh-navigation {
     display: none;
   }
 }

package/build/esm/components/NewHeader/components/NHNavigation/NHNavigation.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import React from 'react';
+import { NHNavigationItemData, SetupRouteChangeHandler } from '../../models';
+import './NHNavigation.css';
+interface NavigationProps {
+    data: NHNavigationItemData[];
+    headerRef?: RefObject<HTMLDivElement>;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+}
+export declare const NHNavigation: ({ data, headerRef, setupRouteChangeHandler }: NavigationProps) => React.JSX.Element;
+export {};