@doyourjob/gravity-ui-page-constructor-addons 2.1.31 → 2.1.33

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

@@ -1,53 +1,24 @@
 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",
+    NHDefaultPopup = "default-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;
     image?: string | null;
+    imageMobile?: string | null;
     imageColor?: string;
     imageColorHover?: string;
-}
-export interface NHCategoryGroupData {
-    title?: string;
-    items: NHPopupItemData[];
-    imageSize?: 's' | 'xm' | 'm';
-    url?: string;
-}
-export interface NHMediumPopupData {
-    groups: NHCategoryGroupData[];
-}
-export interface NHBannerData {
-    title: string;
-    description: string;
-    image: string;
-    url: string;
+    target?: string;
 }
 export interface NHProductBannerData {
     title: string;
@@ -70,75 +41,44 @@ export interface NHProductsPopupSectionScale extends NHProductsPopupSectionBase
     mode: 'scale';
     banner?: NHProductBannerData;
 }
+export type NHProductsPopupSection = NHProductsPopupSectionRun | NHProductsPopupSectionScale | NHProductsPopupSectionBase;
 export interface NHProductsPopupData {
     primaryColor?: string;
     primaryColorHover?: string;
-    sections: (NHProductsPopupSectionRun | NHProductsPopupSectionBase | NHProductsPopupSectionScale)[];
+    sections: NHProductsPopupSection[];
 }
-export interface NHSolutionsPopupSection {
+export interface NHDefaultPopupSection {
     title: string;
     subtitle: string;
     items: NHPopupItemData[];
+    columns?: number;
 }
-export interface NHSolutionsPopupData {
-    sections: NHSolutionsPopupSection[];
-}
-export interface NHWhyPopupGroup {
-    title: string;
-    items: NHPopupItemData[];
-}
-export interface NHWhyPopupData {
-    groups: NHWhyPopupGroup[];
-    card: NHBannerData;
-}
-export interface NHBannerData {
+export interface NHStoryCardData {
     title: string;
     description: string;
     image: string;
-    icon: string;
     url: string;
 }
 export interface NHEventCardData {
-    url: string;
-    tag: string;
     title: string;
-    date: string;
+    caption: string;
+    description: string;
     image: string;
-    location: string;
-}
-export interface NHResourcesPopupGroup {
-    title: string;
-    subtitle: string;
     url: string;
-    items: NHPopupItemData[];
 }
-export interface NHResourcesPopupData {
-    groups: NHResourcesPopupGroup[];
-    banner: NHBannerData;
-    events: {
+export interface NHDefaultPopupData {
+    sections: NHDefaultPopupSection[];
+    maxWidth?: number;
+    primaryColor?: string;
+    primaryColorHover?: string;
+    right?: {
         title: string;
-        items: NHEventCardData[];
+        stories?: NHStoryCardData[];
+        events?: NHEventCardData[];
+        stock?: boolean;
+        stockImage?: string;
     };
 }
-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;
@@ -146,7 +86,7 @@ export interface NHLoginItemData {
 }
 export interface NHLoginPopupData {
     text: string;
-    items: NHLoginItemData[];
+    items: NHPopupItemData[];
 }
 export interface NHNavigationDefaultData {
     title: string;
@@ -155,35 +95,15 @@ 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 interface NHNavigationDefaultPopupData extends NHNavigationDefaultData {
+    type: NHNavigationItemType.NHDefaultPopup;
+    data: NHDefaultPopupData;
 }
-export type NHNavigationItemData = NHNavigationLinkData | NHNavigationMediumPopupData | NHNavigationProductsPopupData | NHNavigationSolutionsPopupData | NHNavigationWhyPopupData | NHNavigationResourcesPopupData | NHNavigationCompanyPopupData | NHNavigationInvestorPopupData;
+export type NHNavigationItemData = NHNavigationLinkData | NHNavigationProductsPopupData | NHNavigationDefaultPopupData;
 export interface NHMobileNavigationDefaultData {
     title: string;
 }
@@ -201,11 +121,11 @@ export interface NHMobileNavigationGroupData extends NHMobileNavigationDefaultDa
 }
 export type NHMobileNavigationItemData = NHMobileNavigationLinkData | NHMobileNavigationGroupData;
 export interface NHNavigationData {
-    left: NHNavigationItemData[];
-    right: NHNavigationItemData[];
-    mobile: NHMobileNavigationItemData[];
-    login: NHLoginPopupData;
-    logo: NHLogoData;
-    buttons: ButtonProps[];
+    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

@@ -1,20 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NHNavigationTagColor = exports.NHNavigationItemType = void 0;
+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["NHDefaultPopup"] = "default-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/esm/components/NewHeader/components/NHDefaultPopup/NHDefaultPopup.css

@@ -0,0 +1,167 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-default-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;
+  display: flex;
+}
+
+.pc-addons-nh-default-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-default-popup__head {
+  display: flex;
+  align-items: baseline;
+  column-gap: 12px;
+  row-gap: 2px;
+  flex-wrap: wrap;
+}
+
+.pc-addons-nh-default-popup__title {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  color: var(--g-color-text-primary);
+  font-weight: 500;
+}
+
+.pc-addons-nh-default-popup__subtitle {
+  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));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-default-popup__left {
+  flex: 1;
+}
+
+.pc-addons-nh-default-popup__left > div + div {
+  border-top: 1px solid var(--g-color-line-generic-solid);
+}
+
+.pc-addons-nh-default-popup__section {
+  display: flex;
+  padding: 24px 32px;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pc-addons-nh-default-popup__wrap {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
+}
+
+.pc-addons-nh-default-popup__right {
+  width: 100%;
+  max-width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--g-color-line-generic-solid);
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px;
+  gap: 20px;
+}
+
+.pc-addons-nh-default-popup__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pc-addons-nh-default-popup__card {
+  color: inherit;
+  text-decoration: none;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.pc-addons-nh-default-popup__card:hover {
+  opacity: 0.8;
+}
+
+.pc-addons-nh-default-popup__card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-default-popup__card-caption {
+  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));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-default-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));
+  color: var(--g-color-text-primary);
+  font-weight: 600;
+}
+
+.pc-addons-nh-default-popup__card-description {
+  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));
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-default-popup__card-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
+.pc-addons-nh-default-popup__stock {
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  min-height: 310px;
+  border-radius: 8px;
+}
+
+.pc-addons-nh-default-popup__stock-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.pc-addons-nh-default-popup__stock-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));
+  color: var(--g-color-text-primary);
+  font-weight: 600;
+  z-index: 1;
+  margin-bottom: 4px;
+}
+
+.pc-addons-nh-default-popup__stock-value {
+  color: var(--g-color-text-primary);
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 600;
+  z-index: 1;
+  margin-top: auto;
+}
+
+.pc-addons-nh-default-popup__stock-date {
+  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));
+  color: var(--g-color-text-secondary);
+  z-index: 1;
+  margin-top: 4px;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHDefaultPopupData } from '../../models';
+import './NHDefaultPopup.css';
+export declare const NHDefaultPopup: ({ sections, right, maxWidth, primaryColor, primaryColorHover, }: NHDefaultPopupData) => React.JSX.Element;

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

@@ -0,0 +1,59 @@
+import React, { useContext, useMemo } from 'react';
+import { HeaderStockContext, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHDefaultPopup.css';
+const b = block('nh-default-popup');
+const NHStoryCard = ({ title, description, image, url }) => (React.createElement("a", Object.assign({ href: url, className: b('card') }, getLinkProps(url)),
+    React.createElement(Image, { className: b('card-image'), src: image }),
+    React.createElement("div", { className: b('card-wrap') },
+        React.createElement("div", { className: b('card-title') }, title),
+        React.createElement("div", { className: b('card-description') }, description))));
+const NHEventCard = ({ title, caption, description, image, url }) => (React.createElement("a", Object.assign({ href: url, className: b('card') }, getLinkProps(url)),
+    React.createElement(Image, { className: b('card-image'), src: image }),
+    React.createElement("div", { className: b('card-wrap') },
+        React.createElement("div", { className: b('card-caption') }, caption),
+        React.createElement("div", { className: b('card-title') }, title),
+        React.createElement("div", { className: b('card-description') }, description))));
+const NHStock = ({ background }) => {
+    const data = useContext(HeaderStockContext);
+    if (!data.price)
+        return null;
+    return (React.createElement("div", { className: b('stock') },
+        background ? (React.createElement("img", { className: b('stock-background'), src: background, alt: "Stock background" })) : null,
+        React.createElement("div", { className: b('stock-title') }, data.price.name),
+        React.createElement("div", { className: b('stock-title') }, data.price.percent),
+        React.createElement("div", { className: b('stock-value') }, data.price.price),
+        React.createElement("div", { className: b('stock-date') }, data.price.update),
+        React.createElement("div", { className: b('stock-date') }, data.price.delayed)));
+};
+export const NHDefaultPopup = ({ sections, right, maxWidth, primaryColor, primaryColorHover, }) => {
+    const rootStyle = useMemo(() => maxWidth
+        ? {
+            marginLeft: 'auto',
+            maxWidth,
+        }
+        : undefined, [maxWidth]);
+    const wrapsStyle = useMemo(() => sections.map((section) => ({
+        gridTemplateColumns: `repeat(${section.columns || 3}, 1fr)`,
+    })), [sections]);
+    const cards = useMemo(() => {
+        if (right === null || right === void 0 ? void 0 : right.stories) {
+            return right.stories.map((card, index) => React.createElement(NHStoryCard, Object.assign({ key: index }, card)));
+        }
+        if (right === null || right === void 0 ? void 0 : right.events) {
+            return right.events.map((card, index) => React.createElement(NHEventCard, Object.assign({ key: index }, card)));
+        }
+        return null;
+    }, [right]);
+    return (React.createElement("div", { className: b(), style: rootStyle },
+        React.createElement("div", { className: b('left') }, sections.map((section, index) => (React.createElement("div", { key: index, className: b('section') },
+            section.title || section.subtitle ? (React.createElement("div", { className: b('head') },
+                React.createElement("div", { className: b('title') }, section.title),
+                React.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
+            React.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { imageColor: primaryColor, imageColorHover: primaryColorHover }))))))))),
+        right && (React.createElement("div", { className: b('right') },
+            React.createElement("div", { className: b('title') }, right.title),
+            cards && React.createElement("div", { className: b('cards') }, cards),
+            right.stock && React.createElement(NHStock, { background: right.stockImage })))));
+};

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

@@ -6,9 +6,9 @@ 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: 260px;
   margin-left: auto;
-  width: 100%;
+  width: max-content;
+  min-width: 212px;
   scrollbar-width: none;
 }
 
@@ -16,36 +16,10 @@ unpredictable css rules order in build */
   display: none;
 }
 
-.pc-addons-nh-login-popup__container {
-  padding: 8px;
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
+.pc-addons-nh-login-popup > div + div {
+  border-top: 1px solid var(--g-color-line-generic-solid);
 }
 
 .pc-addons-nh-login-popup__item {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.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-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;
-  color: #9fb1bd;
+  padding: 16px;
 }

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Grid, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 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))))));
+export const NHLoginPopup = ({ items }) => (React.createElement("div", { className: b() }, items.map((item, index) => (React.createElement("div", { key: index, className: b('item') },
+    React.createElement(NHPopupItem, Object.assign({}, item)))))));

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

@@ -1,36 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { block } from '../../../../utils/cn';
 import { NO_MENU_TAB_SELECTED, SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
-import { NHNavigationItemType, } from '../../models';
-import { NHCompanyPopup } from '../NHCompanyPopup/NHCompanyPopup';
-import { NHInvestorPopup } from '../NHInvestorPopup/NHInvestorPopup';
-import { NHMediumPopup } from '../NHMediumPopup/NHMediumPopup';
+import { NHNavigationItemType } from '../../models';
+import { NHDefaultPopup } from '../NHDefaultPopup/NHDefaultPopup';
 import { NHNavigationItem } from '../NHNavigationItem/NHNavigationItem';
 import { NHNavigationPopup } from '../NHNavigationPopup/NHNavigationPopup';
 import { NHProductsPopup } from '../NHProductsPopup/NHProductsPopup';
-import { NHResourcesPopup } from '../NHResourcesPopup/NHResourcesPopup';
-import { NHSolutionsPopup } from '../NHSolutionsPopup/NHSolutionsPopup';
-import { NHWhyPopup } from '../NHWhyPopup/NHWhyPopup';
 import './NHNavigation.css';
 const b = block('nh-navigation');
 const tooltipPrefixId = 'navigation-item-key';
 const getPopupContent = (sectionData) => {
-    const { type, data } = sectionData;
-    switch (type) {
-        case NHNavigationItemType.NHMediumPopup:
-            return React.createElement(NHMediumPopup, Object.assign({}, data));
+    switch (sectionData.type) {
         case NHNavigationItemType.NHProductsPopup:
-            return React.createElement(NHProductsPopup, Object.assign({}, data));
-        case NHNavigationItemType.NHSolutionsPopup:
-            return React.createElement(NHSolutionsPopup, Object.assign({}, data));
-        case NHNavigationItemType.NHWhyPopup:
-            return React.createElement(NHWhyPopup, Object.assign({}, data));
-        case NHNavigationItemType.NHResourcesPopup:
-            return React.createElement(NHResourcesPopup, Object.assign({}, data));
-        case NHNavigationItemType.NHCompanyPopup:
-            return React.createElement(NHCompanyPopup, Object.assign({}, data));
-        case NHNavigationItemType.NHInvestorPopup:
-            return React.createElement(NHInvestorPopup, Object.assign({}, data));
+            return React.createElement(NHProductsPopup, Object.assign({}, sectionData.data));
+        case NHNavigationItemType.NHDefaultPopup:
+            return React.createElement(NHDefaultPopup, Object.assign({}, sectionData.data));
         default:
             return null;
     }

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

@@ -26,6 +26,10 @@ unpredictable css rules order in build */
   border: none;
 }
 
+.pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__container {
+  align-self: initial;
+}
+
 .pc-addons-nh-navigation-popup-item:hover .pc-addons-nh-navigation-popup-item__description, .pc-addons-nh-navigation-popup-item:active .pc-addons-nh-navigation-popup-item__description {
   color: var(--g-color-text-primary);
 }
@@ -35,14 +39,20 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-nh-navigation-popup-item:hover .pc-addons-nh-navigation-popup-item__title > svg, .pc-addons-nh-navigation-popup-item:active .pc-addons-nh-navigation-popup-item__title > svg {
-  display: inline-block;
+  pointer-events: initial;
+  opacity: 1;
 }
 
 .pc-addons-nh-navigation-popup-item_disable {
   pointer-events: none;
 }
 
+.pc-addons-nh-navigation-popup-item__container {
+  align-self: center;
+}
+
 .pc-addons-nh-navigation-popup-item__title {
+  position: relative;
   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: 600;
@@ -50,13 +60,18 @@ unpredictable css rules order in build */
 }
 
 .pc-addons-nh-navigation-popup-item__title > svg {
-  display: none;
-  vertical-align: sub;
+  display: inline-block;
+  position: absolute;
+  margin-top: 3px;
+  transition: opacity 0.2s;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .pc-addons-nh-navigation-popup-item__description {
   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));
+  transition: color 0.2s;
   display: block;
   margin-top: 1px;
   color: var(--g-color-text-secondary);
@@ -73,10 +88,21 @@ unpredictable css rules order in build */
   height: 24px;
 }
 
+@media (max-width: 769px) {
+  .pc-addons-nh-navigation-popup-item__image_desktop {
+    display: none;
+  }
+}
+@media (min-width: 770px) {
+  .pc-addons-nh-navigation-popup-item__image_mobile {
+    display: none;
+  }
+}
 .pc-addons-nh-navigation-popup-item__image-container {
   padding: 8px;
   border-radius: 8px;
   background: var(--nh-popup-item-color);
+  transition: background 0.2s;
 }
 
 .pc-addons-nh-navigation-popup-item__image-container_no-bg {

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { NHPopupItemData } from '../../models';
 import './NHPopupItem.css';
 export interface NHPopupItemProps extends Partial<NHPopupItemData> {
-    hover?: boolean;
     column?: boolean;
-    target?: string;
 }
 export declare const NHPopupItem: (props: NHPopupItemProps) => React.JSX.Element;