@doyourjob/gravity-ui-page-constructor-addons 2.1.26 → 2.1.27

package/build/cjs/components/NewHeader/NewHeader.css

@@ -4,42 +4,52 @@ unpredictable css rules order in build */
   --g-scrollbar-width: 8px;
   --g-color-scroll-handle: var(--g-color-base-generic);
   --g-color-scroll-handle-hover: var(--g-color-line-generic);
-  position: relative;
-  max-width: 1328px;
-  margin: 0 auto;
   width: 100%;
   z-index: 100;
+  background: var(--pc-transparent);
+}
+
+.pc-addons-new-header_with-background {
+  background: var(--g-color-base-background);
 }
 
 .pc-addons-new-header__container {
+  position: relative;
   width: 100%;
-  padding: 0 32px;
+  max-width: 1328px;
+  padding: 0 40px;
+  margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
-  background: var(--pc-transparent);
   border-radius: var(--pc-border-radius, 24px);
 }
 
-.pc-addons-new-header__container_with-background {
-  background: var(--g-color-base-background);
-  box-shadow: 0 4px 24px var(--g-color-base-generic);
+@media (max-width: 1248px) {
+  .pc-addons-new-header__container {
+    padding: 0 16px;
+  }
 }
-
 .pc-addons-new-header__left, .pc-addons-new-header__right {
   display: flex;
   align-items: center;
-  gap: 40px;
 }
 
 .pc-addons-new-header__left {
   margin-right: 32px;
+  gap: 20px;
 }
 
+@media (max-width: 1248px) {
+  .pc-addons-new-header__left {
+    gap: 12px;
+  }
+}
 .pc-addons-new-header__right {
   justify-content: flex-end;
   width: 100%;
+  gap: 8px;
 }
 
 .pc-addons-new-header__wrap {
@@ -127,20 +137,38 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
 }
 
+.pc-addons-new-header__logo-img {
+  display: block;
+  height: 36px;
+}
+
+.pc-addons-new-header__buttons {
+  display: flex;
+  gap: 8px;
+}
+
+@media (max-width: 577px) {
+  .pc-addons-new-header__buttons {
+    display: none;
+  }
+}
+.pc-addons-new-header__button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  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;
+}
+
 @media (max-width: 1081px) {
   .pc-addons-new-header__left {
     margin-right: 0;
   }
 }
-@media (min-width: 769px) {
-  .pc-addons-new-header__logo-img {
-    height: 30px;
-  }
-}
-@media (max-width: 768px) {
+@media (max-width: 769px) {
   .pc-addons-new-header {
     max-width: 100%;
-    padding: 16px 40px 16px 48px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -154,15 +182,8 @@ unpredictable css rules order in build */
   .pc-addons-new-header_search .pc-addons-new-header__logo {
     display: none;
   }
-  .pc-addons-new-header_search .pc-addons-new-header__back {
-    display: block;
-  }
 }
-@media (max-width: 576px) {
-  .pc-addons-new-header {
-    padding-left: 24px;
-    padding-right: 16px;
-  }
+@media (max-width: 577px) {
   .pc-addons-new-header__container {
     height: 64px;
   }

package/build/cjs/components/NewHeader/NewHeader.js

@@ -15,7 +15,6 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
     const { logo, buttons, left, right, mobile, login } = data;
     const headerRef = (0, react_1.useRef)(null);
     const [withBackground, setWithBackground] = (0, react_1.useState)(false);
-    const [withShadow, setWithShadow] = (0, react_1.useState)(true);
     const [isSearchMode, setIsSearchMode] = (0, react_1.useState)(false);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = (0, react_1.useState)(false);
     const [pageHasScroll, setPageHasScroll] = (0, react_1.useState)(false);
@@ -23,14 +22,8 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
     const toggleSearch = (0, react_1.useCallback)((isActive) => setIsSearchMode(isActive), []);
     const toggleMobileNavigationPopup = (0, react_1.useCallback)((isOpened) => {
         setIsMobileNavigationOpen(isOpened);
-        // disable header's shadow on mobile with opened menu and if page was scrolled
-        if (isOpened && pageHasScroll) {
-            setWithShadow(false);
-        }
-    }, [pageHasScroll]);
+    }, []);
     const onMenuScroll = (0, react_1.useCallback)((scrollTop) => {
-        // enable header's shadow on mobile if mobile menu started to scroll
-        setWithShadow(scrollTop > 0);
         if (!pageHasScroll) {
             setWithBackground(scrollTop > 0);
         }
@@ -58,11 +51,9 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
     return (react_1.default.createElement(route_change_1.RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
         react_1.default.createElement("header", { className: b({
                 search: isSearchMode,
+                'with-background': withBackground,
             }, className), ref: headerRef },
-            react_1.default.createElement("div", { className: b('container', {
-                    'with-background': withBackground,
-                    'with-shadow': withShadow,
-                }) },
+            react_1.default.createElement("div", { className: b('container') },
                 react_1.default.createElement("div", { className: b('left') },
                     logo && (react_1.default.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, (0, gravity_ui_page_constructor_1.getLinkProps)(logo.href || '')), logo.src && (react_1.default.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
                     left ? (react_1.default.createElement("div", { className: b('navigation') },
@@ -71,10 +62,11 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
                     right ? (react_1.default.createElement("div", { className: b('navigation') },
                         react_1.default.createElement(NHNavigation_1.NHNavigation, { data: right, headerRef: headerRef }))) : null,
                     react_1.default.createElement("div", { className: b('wrap') },
-                        react_1.default.createElement("div", { className: b('icons-container') }, renderSearch && renderSearch({ onActiveToggle: toggleSearch })),
-                        showButtonsContainer &&
-                            (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { size: "l", key: button.text }))))),
-                        login && react_1.default.createElement(NHLoginButton_1.NHLoginButton, { data: login, headerRef: headerRef }),
+                        renderSearch && (react_1.default.createElement("div", { className: b('icons-container') }, renderSearch({ onActiveToggle: toggleSearch }))),
+                        react_1.default.createElement("div", { className: b('buttons') },
+                            showButtonsContainer &&
+                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { className: b('button'), size: "l", key: button.text }))))),
+                            login && react_1.default.createElement(NHLoginButton_1.NHLoginButton, { data: login, headerRef: headerRef })),
                         mobile ? (react_1.default.createElement(NHMobileNavigation_1.NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null))))));
 };
 exports.NewHeader = NewHeader;

package/build/cjs/components/NewHeader/components/ChevronDown.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChevronDown: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/ChevronDown.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronDown = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ChevronDown = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    react_1.default.createElement("path", { xmlns: "http://www.w3.org/2000/svg", d: "M10.4697 6.46967C10.7626 6.17678 11.2373 6.17678 11.5302 6.46967C11.8231 6.76256 11.8231 7.23732 11.5302 7.53022L8.53705 10.5234C8.24031 10.8199 7.75957 10.8199 7.46283 10.5234L4.46967 7.53022C4.17678 7.23732 4.17678 6.76256 4.46967 6.46967C4.76256 6.17678 5.23732 6.17678 5.53022 6.46967L7.99994 8.9394L10.4697 6.46967Z", fill: "currentColor" })));
+exports.ChevronDown = ChevronDown;

package/build/cjs/components/NewHeader/components/ChevronUp.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChevronUp: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/ChevronUp.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronUp = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ChevronUp = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    react_1.default.createElement("path", { xmlns: "http://www.w3.org/2000/svg", d: "M7.52039 5.42501C7.81886 5.18147 8.2587 5.19859 8.53699 5.47677L11.5302 8.46993C11.8229 8.76283 11.823 9.23762 11.5302 9.53048C11.2373 9.82321 10.7625 9.82321 10.4696 9.53048L7.99988 7.06075L5.53016 9.53048C5.23729 9.82321 4.76247 9.82321 4.46961 9.53048C4.17676 9.23762 4.17684 8.76283 4.46961 8.46993L7.46277 5.47677L7.52039 5.42501Z", fill: "currentColor" })));
+exports.ChevronUp = ChevronUp;

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

@@ -6,9 +6,12 @@ unpredictable css rules order in build */
   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);
+  border-radius: var(--g-button-border-radius, 8px);
+  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-nh-login-button:hover {

package/build/cjs/components/NewHeader/components/NHLoginButton/NHLoginButton.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHLoginButton = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn");
 const constants_1 = require("../../constants");
+const ChevronDown_1 = require("../ChevronDown");
+const ChevronUp_1 = require("../ChevronUp");
 const NHLoginPopup_1 = require("../NHLoginPopup/NHLoginPopup");
 const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
 const b = (0, cn_1.block)('nh-login-button');
@@ -44,7 +45,7 @@ const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     }), [handleMouseLeave, setupRouteChangeHandler]);
     return (react_1.default.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         data.text,
-        react_1.default.createElement(uikit_1.Icon, { data: isActive ? icons_1.ChevronUp : icons_1.ChevronDown, size: 14 }),
+        react_1.default.createElement(uikit_1.Icon, { data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 }),
         isActive && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef },
             react_1.default.createElement(NHLoginPopup_1.NHLoginPopup, Object.assign({}, data))))));
 };

package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css

@@ -8,6 +8,11 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
 }
 
+@media (min-width: 1081px) {
+  .pc-addons-nh-mobile-navigation {
+    display: none;
+  }
+}
 .pc-addons-nh-mobile-navigation__icon {
   display: none;
 }
@@ -37,7 +42,7 @@ unpredictable css rules order in build */
   margin-top: 8px;
 }
 
-@media (max-width: 769px) {
+@media (max-width: 1081px) {
   .pc-addons-nh-mobile-navigation__icon {
     display: block;
   }

package/build/cjs/components/NewHeader/components/NHNavigation/NHNavigation.css

@@ -8,7 +8,7 @@ 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;
-  gap: 20px;
+  gap: 4px;
 }
 
 @media (max-width: 768px) {
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
     display: none;
   }
 }
-@media (max-width: 769px) {
+@media (max-width: 1081px) {
   .pc-addons-nh-navigation {
     display: none;
   }

package/build/cjs/components/NewHeader/components/NHNavigationItem/NHNavigationItem.css

@@ -6,7 +6,7 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-nh-navigation-item:hover .pc-addons-nh-navigation-item__text {
-  color: var(--g-color-text-link);
+  background-color: rgb(245, 246, 247);
 }
 
 .pc-addons-nh-navigation-item_disable {
@@ -25,6 +25,11 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
 }
 
+@media (max-width: 1248px) {
+  .pc-addons-nh-navigation-item__icon {
+    display: none;
+  }
+}
 .pc-addons-nh-navigation-item__text {
   display: inline-block;
   margin: 0;
@@ -37,17 +42,15 @@ unpredictable css rules order in build */
   cursor: pointer;
   color: inherit;
   text-decoration: none;
+  padding: 8px;
+  border-radius: 8px;
+  font-weight: 500;
   display: flex;
   align-items: center;
-  gap: 4px;
   color: var(--g-color-text-primary);
   position: relative;
 }
 
-.pc-addons-nh-navigation-item__text_active {
-  color: var(--g-color-text-link);
-}
-
 .pc-addons-nh-navigation-item__text_cursor_default {
   cursor: default;
 }

package/build/cjs/components/NewHeader/components/NHNavigationItem/NHNavigationItem.js

@@ -4,12 +4,13 @@ exports.NHNavigationItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn");
 const constants_1 = require("../../constants");
 const route_change_1 = require("../../contexts/route-change");
 const models_1 = require("../../models");
+const ChevronDown_1 = require("../ChevronDown");
+const ChevronUp_1 = require("../ChevronUp");
 const b = (0, cn_1.block)('nh-navigation-item');
 const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
     var _a, _b, _c, _d;
@@ -27,7 +28,7 @@ const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, to
     return (react_1.default.createElement("li", { key: item.title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         react_1.default.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
             item.title,
-            react_1.default.createElement(uikit_1.Icon, { data: isActive ? icons_1.ChevronUp : icons_1.ChevronDown, size: 14 })),
+            react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 })),
         children));
 };
 exports.NHNavigationItem = NHNavigationItem;

package/build/cjs/components/NewHeader/components/NHNavigationPopup/NHNavigationPopup.css

@@ -1,7 +1,10 @@
 .pc-addons-nh-navigation-popup {
   position: absolute;
-  margin: 0 32px;
-  width: calc(100% - 64px);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 1248px;
+  width: 100%;
   z-index: 10;
 }
 

package/build/cjs/components/NewHeader/components/NHProductsPopup/NHProductsPopup.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

package/build/cjs/components/NewHeader/components/NHResourcesPopup/NHResourcesPopup.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

package/build/cjs/components/NewHeader/components/NHSolutionsPopup/NHSolutionsPopup.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

package/build/cjs/components/NewHeader/components/NHWhyPopup/NHWhyPopup.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 900px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

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

@@ -4,42 +4,52 @@ unpredictable css rules order in build */
   --g-scrollbar-width: 8px;
   --g-color-scroll-handle: var(--g-color-base-generic);
   --g-color-scroll-handle-hover: var(--g-color-line-generic);
-  position: relative;
-  max-width: 1328px;
-  margin: 0 auto;
   width: 100%;
   z-index: 100;
+  background: var(--pc-transparent);
+}
+
+.pc-addons-new-header_with-background {
+  background: var(--g-color-base-background);
 }
 
 .pc-addons-new-header__container {
+  position: relative;
   width: 100%;
-  padding: 0 32px;
+  max-width: 1328px;
+  padding: 0 40px;
+  margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
-  background: var(--pc-transparent);
   border-radius: var(--pc-border-radius, 24px);
 }
 
-.pc-addons-new-header__container_with-background {
-  background: var(--g-color-base-background);
-  box-shadow: 0 4px 24px var(--g-color-base-generic);
+@media (max-width: 1248px) {
+  .pc-addons-new-header__container {
+    padding: 0 16px;
+  }
 }
-
 .pc-addons-new-header__left, .pc-addons-new-header__right {
   display: flex;
   align-items: center;
-  gap: 40px;
 }
 
 .pc-addons-new-header__left {
   margin-right: 32px;
+  gap: 20px;
 }
 
+@media (max-width: 1248px) {
+  .pc-addons-new-header__left {
+    gap: 12px;
+  }
+}
 .pc-addons-new-header__right {
   justify-content: flex-end;
   width: 100%;
+  gap: 8px;
 }
 
 .pc-addons-new-header__wrap {
@@ -127,20 +137,38 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
 }
 
+.pc-addons-new-header__logo-img {
+  display: block;
+  height: 36px;
+}
+
+.pc-addons-new-header__buttons {
+  display: flex;
+  gap: 8px;
+}
+
+@media (max-width: 577px) {
+  .pc-addons-new-header__buttons {
+    display: none;
+  }
+}
+.pc-addons-new-header__button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  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;
+}
+
 @media (max-width: 1081px) {
   .pc-addons-new-header__left {
     margin-right: 0;
   }
 }
-@media (min-width: 769px) {
-  .pc-addons-new-header__logo-img {
-    height: 30px;
-  }
-}
-@media (max-width: 768px) {
+@media (max-width: 769px) {
   .pc-addons-new-header {
     max-width: 100%;
-    padding: 16px 40px 16px 48px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -154,15 +182,8 @@ unpredictable css rules order in build */
   .pc-addons-new-header_search .pc-addons-new-header__logo {
     display: none;
   }
-  .pc-addons-new-header_search .pc-addons-new-header__back {
-    display: block;
-  }
 }
-@media (max-width: 576px) {
-  .pc-addons-new-header {
-    padding-left: 24px;
-    padding-right: 16px;
-  }
+@media (max-width: 577px) {
   .pc-addons-new-header__container {
     height: 64px;
   }

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

@@ -12,7 +12,6 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
     const { logo, buttons, left, right, mobile, login } = data;
     const headerRef = useRef(null);
     const [withBackground, setWithBackground] = useState(false);
-    const [withShadow, setWithShadow] = useState(true);
     const [isSearchMode, setIsSearchMode] = useState(false);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
     const [pageHasScroll, setPageHasScroll] = useState(false);
@@ -20,14 +19,8 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
     const toggleSearch = useCallback((isActive) => setIsSearchMode(isActive), []);
     const toggleMobileNavigationPopup = useCallback((isOpened) => {
         setIsMobileNavigationOpen(isOpened);
-        // disable header's shadow on mobile with opened menu and if page was scrolled
-        if (isOpened && pageHasScroll) {
-            setWithShadow(false);
-        }
-    }, [pageHasScroll]);
+    }, []);
     const onMenuScroll = useCallback((scrollTop) => {
-        // enable header's shadow on mobile if mobile menu started to scroll
-        setWithShadow(scrollTop > 0);
         if (!pageHasScroll) {
             setWithBackground(scrollTop > 0);
         }
@@ -55,11 +48,9 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
     return (React.createElement(RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
         React.createElement("header", { className: b({
                 search: isSearchMode,
+                'with-background': withBackground,
             }, className), ref: headerRef },
-            React.createElement("div", { className: b('container', {
-                    'with-background': withBackground,
-                    'with-shadow': withShadow,
-                }) },
+            React.createElement("div", { className: b('container') },
                 React.createElement("div", { className: b('left') },
                     logo && (React.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, getLinkProps(logo.href || '')), logo.src && (React.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
                     left ? (React.createElement("div", { className: b('navigation') },
@@ -68,9 +59,10 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
                     right ? (React.createElement("div", { className: b('navigation') },
                         React.createElement(NHNavigation, { data: right, headerRef: headerRef }))) : null,
                     React.createElement("div", { className: b('wrap') },
-                        React.createElement("div", { className: b('icons-container') }, renderSearch && renderSearch({ onActiveToggle: toggleSearch })),
-                        showButtonsContainer &&
-                            (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (React.createElement(PCButton, Object.assign({}, button, { size: "l", key: button.text }))))),
-                        login && React.createElement(NHLoginButton, { data: login, headerRef: headerRef }),
+                        renderSearch && (React.createElement("div", { className: b('icons-container') }, renderSearch({ onActiveToggle: toggleSearch }))),
+                        React.createElement("div", { className: b('buttons') },
+                            showButtonsContainer &&
+                                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (React.createElement(PCButton, Object.assign({}, button, { className: b('button'), size: "l", key: button.text }))))),
+                            login && React.createElement(NHLoginButton, { data: login, headerRef: headerRef })),
                         mobile ? (React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null))))));
 };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChevronDown: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ChevronDown = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    React.createElement("path", { xmlns: "http://www.w3.org/2000/svg", d: "M10.4697 6.46967C10.7626 6.17678 11.2373 6.17678 11.5302 6.46967C11.8231 6.76256 11.8231 7.23732 11.5302 7.53022L8.53705 10.5234C8.24031 10.8199 7.75957 10.8199 7.46283 10.5234L4.46967 7.53022C4.17678 7.23732 4.17678 6.76256 4.46967 6.46967C4.76256 6.17678 5.23732 6.17678 5.53022 6.46967L7.99994 8.9394L10.4697 6.46967Z", fill: "currentColor" })));

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChevronUp: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ChevronUp = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, props),
+    React.createElement("path", { xmlns: "http://www.w3.org/2000/svg", d: "M7.52039 5.42501C7.81886 5.18147 8.2587 5.19859 8.53699 5.47677L11.5302 8.46993C11.8229 8.76283 11.823 9.23762 11.5302 9.53048C11.2373 9.82321 10.7625 9.82321 10.4696 9.53048L7.99988 7.06075L5.53016 9.53048C5.23729 9.82321 4.76247 9.82321 4.46961 9.53048C4.17676 9.23762 4.17684 8.76283 4.46961 8.46993L7.46277 5.47677L7.52039 5.42501Z", fill: "currentColor" })));

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

@@ -6,9 +6,12 @@ unpredictable css rules order in build */
   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);
+  border-radius: var(--g-button-border-radius, 8px);
+  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-nh-login-button:hover {

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

@@ -1,8 +1,9 @@
 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 { ChevronDown } from '../ChevronDown';
+import { ChevronUp } from '../ChevronUp';
 import { NHLoginPopup } from '../NHLoginPopup/NHLoginPopup';
 import { NHNavigationPopup } from '../NHNavigationPopup/NHNavigationPopup';
 import './NHLoginButton.css';
@@ -41,7 +42,7 @@ export const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     }), [handleMouseLeave, setupRouteChangeHandler]);
     return (React.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         data.text,
-        React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 14 }),
+        React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 16 }),
         isActive && (React.createElement(NHNavigationPopup, { headerRef: headerRef },
             React.createElement(NHLoginPopup, Object.assign({}, data))))));
 };

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

@@ -8,6 +8,11 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
 }
 
+@media (min-width: 1081px) {
+  .pc-addons-nh-mobile-navigation {
+    display: none;
+  }
+}
 .pc-addons-nh-mobile-navigation__icon {
   display: none;
 }
@@ -37,7 +42,7 @@ unpredictable css rules order in build */
   margin-top: 8px;
 }
 
-@media (max-width: 769px) {
+@media (max-width: 1081px) {
   .pc-addons-nh-mobile-navigation__icon {
     display: block;
   }

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

@@ -8,7 +8,7 @@ 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;
-  gap: 20px;
+  gap: 4px;
 }
 
 @media (max-width: 768px) {
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
     display: none;
   }
 }
-@media (max-width: 769px) {
+@media (max-width: 1081px) {
   .pc-addons-nh-navigation {
     display: none;
   }

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

@@ -6,7 +6,7 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-nh-navigation-item:hover .pc-addons-nh-navigation-item__text {
-  color: var(--g-color-text-link);
+  background-color: rgb(245, 246, 247);
 }
 
 .pc-addons-nh-navigation-item_disable {
@@ -25,6 +25,11 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
 }
 
+@media (max-width: 1248px) {
+  .pc-addons-nh-navigation-item__icon {
+    display: none;
+  }
+}
 .pc-addons-nh-navigation-item__text {
   display: inline-block;
   margin: 0;
@@ -37,17 +42,15 @@ unpredictable css rules order in build */
   cursor: pointer;
   color: inherit;
   text-decoration: none;
+  padding: 8px;
+  border-radius: 8px;
+  font-weight: 500;
   display: flex;
   align-items: center;
-  gap: 4px;
   color: var(--g-color-text-primary);
   position: relative;
 }
 
-.pc-addons-nh-navigation-item__text_active {
-  color: var(--g-color-text-link);
-}
-
 .pc-addons-nh-navigation-item__text_cursor_default {
   cursor: default;
 }

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

@@ -1,11 +1,12 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
-import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
 import { NO_MENU_TAB_SELECTED } from '../../constants';
 import { RouteChangeHandlerContext } from '../../contexts/route-change';
 import { NHNavigationItemType } from '../../models';
+import { ChevronDown } from '../ChevronDown';
+import { ChevronUp } from '../ChevronUp';
 import './NHNavigationItem.css';
 const b = block('nh-navigation-item');
 export const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
@@ -24,6 +25,6 @@ export const NHNavigationItem = ({ item, isActive, handleActiveTab, index, child
     return (React.createElement("li", { key: item.title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         React.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
             item.title,
-            React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 14 })),
+            React.createElement(Icon, { className: b('icon'), data: isActive ? ChevronUp : ChevronDown, size: 16 })),
         children));
 };

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

@@ -1,7 +1,10 @@
 .pc-addons-nh-navigation-popup {
   position: absolute;
-  margin: 0 32px;
-  width: calc(100% - 64px);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 1248px;
+  width: 100%;
   z-index: 10;
 }
 

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

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

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

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

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

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 1200px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

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

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
   max-height: calc(100vh - 64px - 64px);
   overflow: auto;
-  max-width: 900px;
   width: 100%;
   border-radius: var(--pc-border-radius, 24px);
   scrollbar-width: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor-addons",
-  "version": "2.1.26",
+  "version": "2.1.27",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {