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

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

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-navigation-tag {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  display: inline-block;
+  padding: 0 8px;
+  border-radius: 2px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.pc-addons-nh-navigation-tag_size_s {
+  font-size: var(--g-text-caption-2-font-size, var(--pc-text-caption-2-font-size));
+  line-height: var(--g-text-caption-2-line-height, var(--pc-text-caption-2-line-height));
+  padding: 0 4px;
+  height: 16px;
+  line-height: 16px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NHNavigationTag as NHNavigationTagModel } from '../../models';
+export interface NHNavigationTagProps extends NHNavigationTagModel, ClassNameProps {
+}
+export declare const NHNavigationTag: ({ text, color, textColor, className, size, }: NHNavigationTagProps) => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHNavigationTag = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const models_1 = require("../../models");
+const b = (0, cn_1.block)('nh-navigation-tag');
+const getColor = (color) => {
+    switch (color) {
+        case models_1.NHNavigationTagColor.Yellow:
+            return 'var(--pc-addons-navigation-color-tag-yellow)';
+        case models_1.NHNavigationTagColor.Blue:
+            return 'var(--pc-addons-navigation-color-tag-blue)';
+        case models_1.NHNavigationTagColor.Green:
+            return 'var(--pc-addons-navigation-color-tag-green)';
+        default:
+            return color;
+    }
+};
+const NHNavigationTag = ({ text, color = models_1.NHNavigationTagColor.Yellow, textColor, className, size = 'm', }) => (react_1.default.createElement("div", { className: b({ size }, className), style: { backgroundColor: getColor(color), color: textColor } }, text));
+exports.NHNavigationTag = NHNavigationTag;

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

@@ -0,0 +1,80 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-why-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);
+  overflow: auto;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-why-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-why-popup__container {
+  padding: 0;
+  display: flex;
+}
+
+.pc-addons-nh-why-popup__wrap {
+  padding: 20px;
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.pc-addons-nh-why-popup__group {
+  flex: 1;
+}
+
+.pc-addons-nh-why-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));
+  padding: 12px;
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-why-popup__card {
+  font-weight: 500;
+  width: 300px;
+  flex-shrink: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f6f9;
+}
+
+.pc-addons-nh-why-popup__card-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px;
+  gap: 20px;
+}
+
+.pc-addons-nh-why-popup__card-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: #9fb1bd;
+}
+
+.pc-addons-nh-why-popup__card-description {
+  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));
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-why-popup__card-container-image {
+  width: 100%;
+}
+
+.pc-addons-nh-why-popup__card-image {
+  width: 100%;
+  aspect-ratio: 300/244;
+  background-color: #99a5ae;
+  display: block;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NHWhyPopupData } from '../../models';
+export declare const NHWhyPopup: ({ groups, card }: NHWhyPopupData) => React.JSX.Element;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHWhyPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
+const b = (0, cn_1.block)('nh-why-popup');
+const NHWhyPopup = ({ groups, card }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') },
+    react_1.default.createElement("div", { className: b('wrap') }, groups.map((group) => (react_1.default.createElement("div", { className: b('group'), key: group.title },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
+                react_1.default.createElement("div", { className: b('title') }, group.title))),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, group.items.map((item) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: item.title }, item, { hover: true, sizes: { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12 } }))))))))),
+    card && (react_1.default.createElement("div", { className: b('card') },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), containerClassName: b('card-container-image'), src: card.image }),
+        react_1.default.createElement("div", { className: b('card-wrap') },
+            react_1.default.createElement("div", { className: b('card-title') }, card.title),
+            react_1.default.createElement("div", { className: b('card-description') }, card.description))))));
+exports.NHWhyPopup = NHWhyPopup;

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

@@ -0,0 +1,7 @@
+export declare const SWITCH_MENU_TAB_TIMEOUT = 200;
+export declare const NO_MENU_TAB_SELECTED = -1;
+export declare const DefaultCategorizedItemSizes: {
+    lg: number;
+    sm: number;
+    all: number;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCategorizedItemSizes = exports.NO_MENU_TAB_SELECTED = exports.SWITCH_MENU_TAB_TIMEOUT = void 0;
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+exports.SWITCH_MENU_TAB_TIMEOUT = 200;
+exports.NO_MENU_TAB_SELECTED = -1;
+exports.DefaultCategorizedItemSizes = {
+    [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 4,
+    [gravity_ui_page_constructor_1.GridColumnSize.Sm]: 6,
+    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+};

package/build/cjs/components/NewHeader/contexts/route-change.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type RouteChangeHandlerContextProps = (handler: () => void) => void;
+export declare const RouteChangeHandlerContext: React.Context<RouteChangeHandlerContextProps | undefined>;

package/build/cjs/components/NewHeader/contexts/route-change.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteChangeHandlerContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.RouteChangeHandlerContext = react_1.default.createContext(undefined);

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

@@ -0,0 +1,202 @@
+import type { ButtonProps, LinkProps } from '@doyourjob/gravity-ui-page-constructor';
+export declare enum NHNavigationItemType {
+    NHMediumPopup = "medium-popup",
+    NHProductsPopup = "products-popup",
+    NHSolutionsPopup = "solutions-popup",
+    NHWhyPopup = "why-popup",
+    NHResourcesPopup = "resources-popup",
+    NHCompanyPopup = "company-popup",
+    NHInvestorPopup = "investor-popup",
+    Link = "link"
+}
+export declare enum NHNavigationTagColor {
+    Green = "green",
+    Yellow = "yellow",
+    Blue = "blue"
+}
+export interface NHLogoData {
+    href?: string;
+    src?: string;
+    alt?: string;
+}
+export interface NHNavigationTag {
+    text: string;
+    color?: string;
+    textColor?: string;
+    size?: 's' | 'm';
+}
+export interface NHPopupItemData {
+    title: string;
+    url: string;
+    slug?: string;
+    description?: string;
+    icon?: string;
+    image?: string | null;
+    tag?: NHNavigationTag;
+}
+export interface NHCategoryGroupData {
+    title?: string;
+    items: NHPopupItemData[];
+    imageSize?: 's' | 'xm' | 'm';
+    url?: string;
+}
+export interface NHMediumPopupData {
+    groups: NHCategoryGroupData[];
+}
+export interface NHSpecialCardData {
+    title: string;
+    description: string;
+    image: string;
+    url: string;
+}
+export interface NHRunCardData {
+    title: string;
+    description: string;
+    image: string;
+    border?: boolean;
+    url: string;
+}
+export interface NHProductsPopupSection {
+    title: string;
+    subtitle: string;
+    items?: NHPopupItemData[];
+    runCards?: NHRunCardData[];
+}
+export interface NHProductsPopupData {
+    sections: NHProductsPopupSection[];
+    poweredCard: NHSpecialCardData;
+}
+export interface NHSolutionsPopupSection {
+    title: string;
+    subtitle: string;
+    items: NHPopupItemData[];
+}
+export interface NHSolutionsPopupData {
+    sections: NHSolutionsPopupSection[];
+}
+export interface NHWhyPopupGroup {
+    title: string;
+    items: NHPopupItemData[];
+}
+export interface NHWhyPopupData {
+    groups: NHWhyPopupGroup[];
+    card: NHSpecialCardData;
+}
+export interface NHBannerData {
+    title: string;
+    description: string;
+    image: string;
+    icon: string;
+    url: string;
+}
+export interface NHEventCardData {
+    url: string;
+    tag: string;
+    title: string;
+    date: string;
+    image: string;
+    location: string;
+}
+export interface NHResourcesPopupGroup {
+    title: string;
+    subtitle: string;
+    url: string;
+    items: NHPopupItemData[];
+}
+export interface NHResourcesPopupData {
+    groups: NHResourcesPopupGroup[];
+    banner: NHBannerData;
+    events: {
+        title: string;
+        items: NHEventCardData[];
+    };
+}
+export interface NHCompanyPopupSection {
+    title: string;
+    items: NHPopupItemData[];
+}
+export interface NHCompanyPopupData {
+    sections: NHCompanyPopupSection[];
+}
+export interface NHStockData {
+    title: string;
+    price: string;
+    date: string;
+}
+export interface NHInvestorPopupData {
+    title: string;
+    subtitle: string;
+    url: string;
+    items: NHPopupItemData[];
+    stock: NHStockData;
+}
+export interface NHLoginItemData {
+    title: string;
+    subtitle: string;
+    url?: string;
+}
+export interface NHLoginPopupData {
+    text: string;
+    items: NHLoginItemData[];
+}
+export interface NHNavigationDefaultData {
+    title: string;
+}
+export interface NHNavigationLinkData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.Link;
+    data: LinkProps;
+}
+export interface NHNavigationMediumPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHMediumPopup;
+    data: NHMediumPopupData;
+}
+export interface NHNavigationProductsPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHProductsPopup;
+    data: NHProductsPopupData;
+}
+export interface NHNavigationSolutionsPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHSolutionsPopup;
+    data: NHSolutionsPopupData;
+}
+export interface NHNavigationWhyPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHWhyPopup;
+    data: NHWhyPopupData;
+}
+export interface NHNavigationResourcesPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHResourcesPopup;
+    data: NHResourcesPopupData;
+}
+export interface NHNavigationCompanyPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHCompanyPopup;
+    data: NHCompanyPopupData;
+}
+export interface NHNavigationInvestorPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHInvestorPopup;
+    data: NHInvestorPopupData;
+}
+export type NHNavigationItemData = NHNavigationLinkData | NHNavigationMediumPopupData | NHNavigationProductsPopupData | NHNavigationSolutionsPopupData | NHNavigationWhyPopupData | NHNavigationResourcesPopupData | NHNavigationCompanyPopupData | NHNavigationInvestorPopupData;
+export interface NHMobileNavigationDefaultData {
+    title: string;
+}
+export interface NHMobileNavigationLinkData extends NHMobileNavigationDefaultData {
+    link: LinkProps;
+}
+export interface NHMobileNavigationGroupData extends NHMobileNavigationDefaultData {
+    data: {
+        title?: string;
+        items: {
+            title: string;
+            url: string;
+        }[];
+    }[];
+}
+export type NHMobileNavigationItemData = NHMobileNavigationLinkData | NHMobileNavigationGroupData;
+export interface NHNavigationData {
+    left: NHNavigationItemData[];
+    right: NHNavigationItemData[];
+    mobile: NHMobileNavigationItemData[];
+    login: NHLoginPopupData;
+    logo: NHLogoData;
+    buttons: ButtonProps[];
+}
+export type SetupRouteChangeHandler = (handler: () => void) => void;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHNavigationTagColor = exports.NHNavigationItemType = void 0;
+var NHNavigationItemType;
+(function (NHNavigationItemType) {
+    NHNavigationItemType["NHMediumPopup"] = "medium-popup";
+    NHNavigationItemType["NHProductsPopup"] = "products-popup";
+    NHNavigationItemType["NHSolutionsPopup"] = "solutions-popup";
+    NHNavigationItemType["NHWhyPopup"] = "why-popup";
+    NHNavigationItemType["NHResourcesPopup"] = "resources-popup";
+    NHNavigationItemType["NHCompanyPopup"] = "company-popup";
+    NHNavigationItemType["NHInvestorPopup"] = "investor-popup";
+    NHNavigationItemType["Link"] = "link";
+})(NHNavigationItemType = exports.NHNavigationItemType || (exports.NHNavigationItemType = {}));
+var NHNavigationTagColor;
+(function (NHNavigationTagColor) {
+    NHNavigationTagColor["Green"] = "green";
+    NHNavigationTagColor["Yellow"] = "yellow";
+    NHNavigationTagColor["Blue"] = "blue";
+})(NHNavigationTagColor = exports.NHNavigationTagColor || (exports.NHNavigationTagColor = {}));

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

@@ -0,0 +1,5 @@
+.g-root {
+  --pc-addons-navigation-color-tag-yellow: var(--g-color-base-warning-light);
+  --pc-addons-navigation-color-tag-green: var(--g-color-base-positive-light);
+  --pc-addons-navigation-color-tag-blue: var(--g-color-base-info-light);
+}

package/build/cjs/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './EnrichedLink/EnrichedLink';
 export * from './Navigation';
 export * from './HeaderStripe/HeaderStripe';
+export * from './NewHeader/NewHeader';

package/build/cjs/components/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./EnrichedLink/EnrichedLink"), exports);
 tslib_1.__exportStar(require("./Navigation"), exports);
 tslib_1.__exportStar(require("./HeaderStripe/HeaderStripe"), exports);
+tslib_1.__exportStar(require("./NewHeader/NewHeader"), exports);

package/build/esm/components/Navigation/components/Navigation/Navigation.d.ts

@@ -5,8 +5,8 @@ import './Navigation.css';
 interface NavigationProps {
     data: NavigationSectionData[];
     withBackground: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     headerRef?: RefObject<HTMLDivElement>;
     setupRouteChangeHandler?: SetupRouteChangeHandler;
 }

package/build/esm/components/Navigation/components/Navigation/NavigationItem/NavigationItem.d.ts

@@ -5,8 +5,8 @@ interface NavigationItemOwnProps {
     index: number;
     item: NavigationSectionData;
     isActive: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     handleActiveTab: (currentIndex: number) => void;
     children?: ReactNode;
     tooltipId?: string;

package/build/esm/components/Navigation/components/Navigation/NavigationItem/NavigationItem.js

@@ -21,12 +21,12 @@ export const NavigationItem = ({ item, isActive, handleActiveTab, handleOpenPopu
     const handleMouseEnter = useCallback(() => {
         handleActiveTab(index);
         if (isPopupExist) {
-            handleOpenPopup();
+            handleOpenPopup === null || handleOpenPopup === void 0 ? void 0 : handleOpenPopup();
         }
     }, [handleActiveTab, handleOpenPopup, index, isPopupExist]);
     const handleMouseLeave = useCallback(() => {
         if (isPopupExist) {
-            handleClosePopup();
+            handleClosePopup === null || handleClosePopup === void 0 ? void 0 : handleClosePopup();
         }
         handleActiveTab(NO_MENU_TAB_SELECTED);
     }, [handleActiveTab, handleClosePopup, isPopupExist]);

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

@@ -0,0 +1,190 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-new-header {
+  --g-scrollbar-width: 8px;
+  --g-color-scroll-handle: var(--g-color-base-generic);
+  --g-color-scroll-handle-hover: var(--g-color-line-generic);
+  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%;
+  max-width: 1328px;
+  padding: 0 40px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  border-radius: var(--pc-border-radius, 24px);
+}
+
+@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;
+}
+
+.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 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pc-addons-new-header__icons-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pc-addons-new-header__buttons {
+  display: flex;
+  margin-left: 8px;
+}
+
+.pc-addons-new-header__icon {
+  color: var(--g-color-text-hint);
+  transition: color 0.2s;
+}
+
+.pc-addons-new-header__user {
+  margin-left: 12px;
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__user {
+    display: none;
+  }
+}
+.pc-addons-new-header__back {
+  position: relative;
+  left: 2px;
+}
+
+.pc-addons-new-header__back-icon {
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__back {
+  display: none;
+}
+
+.pc-addons-new-header__back:hover:before {
+  background: none;
+}
+
+.pc-addons-new-header__back:hover .pc-addons-new-header__icon {
+  color: var(--g-color-text-complementary);
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__navigation {
+    display: none;
+  }
+}
+.pc-addons-new-header__popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--pc-border-radius, 24px);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+  --yc-popover-max-width: 1296px;
+  --yc-popover-padding: 20px;
+  width: var(--yc-popover-max-width);
+  left: 0;
+  box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
+}
+
+.pc-addons-new-header__popup_with-background {
+  border-radius: 0 0 var(--pc-border-radius, 24px) var(--pc-border-radius, 24px);
+}
+
+.pc-addons-new-header__scroll-arrow {
+  height: 20px;
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__user-popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--g-border-radius-m);
+  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 (max-width: 769px) {
+  .pc-addons-new-header {
+    max-width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .pc-addons-new-header__left {
+    margin-right: 12px;
+  }
+  .pc-addons-new-header__icons-container {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+  .pc-addons-new-header_search .pc-addons-new-header__logo {
+    display: none;
+  }
+}
+@media (max-width: 577px) {
+  .pc-addons-new-header__container {
+    height: 64px;
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NHNavigationData, SetupRouteChangeHandler } from './models';
+import './NewHeader.css';
+export declare const MOBILE_ICON_SIZE = 24;
+export interface NewHeaderProps extends ClassNameProps {
+    data: NHNavigationData;
+    renderSearch?: (props: {
+        onActiveToggle: (isActive: boolean) => void;
+    }) => ReactNode;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+    scrollOffset?: number;
+}
+export declare const NewHeader: ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset, }: NewHeaderProps) => React.JSX.Element;