@doyourjob/gravity-ui-page-constructor-addons 2.1.30 → 2.1.32

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

@@ -0,0 +1,166 @@
+/* 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;
+  margin-bottom: auto;
+  z-index: 1;
+}
+
+.pc-addons-nh-default-popup__stock-value {
+  color: var(--g-color-text-primary);
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  z-index: 1;
+}
+
+.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;
+}

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHDefaultPopup = 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 cn_1 = require("../../../../utils/cn");
+const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
+const b = (0, cn_1.block)('nh-default-popup');
+const NHStoryCard = ({ title, description, image, url }) => (react_1.default.createElement("a", Object.assign({ href: url, className: b('card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+    react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
+    react_1.default.createElement("div", { className: b('card-wrap') },
+        react_1.default.createElement("div", { className: b('card-title') }, title),
+        react_1.default.createElement("div", { className: b('card-description') }, description))));
+const NHEventCard = ({ title, caption, description, image, url }) => (react_1.default.createElement("a", Object.assign({ href: url, className: b('card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+    react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('card-image'), src: image }),
+    react_1.default.createElement("div", { className: b('card-wrap') },
+        react_1.default.createElement("div", { className: b('card-caption') }, caption),
+        react_1.default.createElement("div", { className: b('card-title') }, title),
+        react_1.default.createElement("div", { className: b('card-description') }, description))));
+const NHDefaultPopup = ({ sections, right, maxWidth }) => {
+    const rootStyle = (0, react_1.useMemo)(() => maxWidth
+        ? {
+            marginLeft: 'auto',
+            maxWidth,
+        }
+        : undefined, [maxWidth]);
+    const wrapsStyle = (0, react_1.useMemo)(() => sections.map((section) => ({
+        gridTemplateColumns: `repeat(${section.columns || 3}, 1fr)`,
+    })), [sections]);
+    const cards = (0, react_1.useMemo)(() => {
+        if (right === null || right === void 0 ? void 0 : right.stories) {
+            return right.stories.map((card, index) => react_1.default.createElement(NHStoryCard, Object.assign({ key: index }, card)));
+        }
+        if (right === null || right === void 0 ? void 0 : right.events) {
+            return right.events.map((card, index) => react_1.default.createElement(NHEventCard, Object.assign({ key: index }, card)));
+        }
+        return null;
+    }, [right]);
+    return (react_1.default.createElement("div", { className: b(), style: rootStyle },
+        react_1.default.createElement("div", { className: b('left') }, sections.map((section, index) => (react_1.default.createElement("div", { key: index, className: b('section') },
+            section.title || section.subtitle ? (react_1.default.createElement("div", { className: b('head') },
+                react_1.default.createElement("div", { className: b('title') }, section.title),
+                react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle))) : null,
+            react_1.default.createElement("div", { className: b('wrap'), style: wrapsStyle[index] }, section.items.map((item) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: item.title }, item))))))))),
+        right && (react_1.default.createElement("div", { className: b('right') },
+            react_1.default.createElement("div", { className: b('title') }, right.title),
+            cards && react_1.default.createElement("div", { className: b('cards') }, cards),
+            right.stock && (react_1.default.createElement("div", { className: b('stock') },
+                right.stock.background ? (react_1.default.createElement("img", { className: b('stock-background'), src: right.stock.background, alt: "Stock background" })) : null,
+                react_1.default.createElement("div", { className: b('stock-title') }, right.stock.title),
+                react_1.default.createElement("div", { className: b('stock-value') }, right.stock.value),
+                react_1.default.createElement("div", { className: b('stock-date') }, right.stock.date)))))));
+};
+exports.NHDefaultPopup = NHDefaultPopup;

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

@@ -8,7 +8,7 @@ unpredictable css rules order in build */
   padding: 0 8px 0 12px;
   background: var(--g-color-base-brand);
   color: var(--g-color-text-brand-contrast);
-  border-radius: var(--g-button-border-radius, 8px);
+  border-radius: 24px;
   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/cjs/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/cjs/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHLoginPopup = 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-login-popup');
-const NHLoginPopup = ({ items }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') }, items.map((item) => (react_1.default.createElement("a", Object.assign({ href: item.url, className: b('item'), key: item.title }, (0, gravity_ui_page_constructor_1.getLinkProps)(item.url || '')),
-    react_1.default.createElement("div", { className: b('title') }, item.title),
-    react_1.default.createElement("div", { className: b('subtitle') }, item.subtitle))))));
+const NHLoginPopup = ({ items }) => (react_1.default.createElement("div", { className: b() }, items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item') },
+    react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({}, item)))))));
 exports.NHLoginPopup = NHLoginPopup;

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

@@ -6,34 +6,18 @@ const react_1 = tslib_1.__importStar(require("react"));
 const cn_1 = require("../../../../utils/cn");
 const constants_1 = require("../../constants");
 const models_1 = require("../../models");
-const NHCompanyPopup_1 = require("../NHCompanyPopup/NHCompanyPopup");
-const NHInvestorPopup_1 = require("../NHInvestorPopup/NHInvestorPopup");
-const NHMediumPopup_1 = require("../NHMediumPopup/NHMediumPopup");
+const NHDefaultPopup_1 = require("../NHDefaultPopup/NHDefaultPopup");
 const NHNavigationItem_1 = require("../NHNavigationItem/NHNavigationItem");
 const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
 const NHProductsPopup_1 = require("../NHProductsPopup/NHProductsPopup");
-const NHResourcesPopup_1 = require("../NHResourcesPopup/NHResourcesPopup");
-const NHSolutionsPopup_1 = require("../NHSolutionsPopup/NHSolutionsPopup");
-const NHWhyPopup_1 = require("../NHWhyPopup/NHWhyPopup");
 const b = (0, cn_1.block)('nh-navigation');
 const tooltipPrefixId = 'navigation-item-key';
 const getPopupContent = (sectionData) => {
-    const { type, data } = sectionData;
-    switch (type) {
-        case models_1.NHNavigationItemType.NHMediumPopup:
-            return react_1.default.createElement(NHMediumPopup_1.NHMediumPopup, Object.assign({}, data));
+    switch (sectionData.type) {
         case models_1.NHNavigationItemType.NHProductsPopup:
-            return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, data));
-        case models_1.NHNavigationItemType.NHSolutionsPopup:
-            return react_1.default.createElement(NHSolutionsPopup_1.NHSolutionsPopup, Object.assign({}, data));
-        case models_1.NHNavigationItemType.NHWhyPopup:
-            return react_1.default.createElement(NHWhyPopup_1.NHWhyPopup, Object.assign({}, data));
-        case models_1.NHNavigationItemType.NHResourcesPopup:
-            return react_1.default.createElement(NHResourcesPopup_1.NHResourcesPopup, Object.assign({}, data));
-        case models_1.NHNavigationItemType.NHCompanyPopup:
-            return react_1.default.createElement(NHCompanyPopup_1.NHCompanyPopup, Object.assign({}, data));
-        case models_1.NHNavigationItemType.NHInvestorPopup:
-            return react_1.default.createElement(NHInvestorPopup_1.NHInvestorPopup, Object.assign({}, data));
+            return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, sectionData.data));
+        case models_1.NHNavigationItemType.NHDefaultPopup:
+            return react_1.default.createElement(NHDefaultPopup_1.NHDefaultPopup, Object.assign({}, sectionData.data));
         default:
             return null;
     }

package/build/cjs/components/NewHeader/components/NHPopupItem/ArrowRight.d.ts

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRight = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ArrowRight = (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: "M3.00073 8.49151L3.00024 6.96175L10.6817 6.96059L7.76622 4.04513L8.82439 3.00146L13.5493 7.72639L8.8238 12.4519L7.76495 11.3931L10.6822 8.49035L3.00073 8.49151Z", fill: "currentColor" })));
+exports.ArrowRight = ArrowRight;

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

@@ -1,75 +1,79 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-addons-nh-navigation-popup-item {
-  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-bottom: 2px;
-}
-
-.pc-addons-nh-navigation-popup-item__content {
-  outline: none;
   color: inherit;
   text-decoration: none;
   display: flex;
+  align-items: flex-start;
   border-radius: var(--g-border-radius-xl);
   height: 100%;
+  gap: 16px;
 }
 
-.utilityfocus .pc-addons-nh-navigation-popup-item__content:focus {
-  outline: 2px solid #ffdb4d;
+.pc-addons-nh-navigation-popup-item_column {
+  flex-direction: column;
 }
 
-.pc-addons-nh-navigation-popup-item__content:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: -2px;
+.pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__image {
+  width: auto;
+  max-width: 100%;
+  height: 30px;
 }
 
-.pc-addons-nh-navigation-popup-item__content:focus:not(:focus-visible) {
-  outline: 0;
+.pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__image-container {
+  padding: 0;
+  border-radius: 0;
+  border: none;
 }
 
-.pc-addons-nh-navigation-popup-item__content_padding_default {
-  padding: 12px;
+.pc-addons-nh-navigation-popup-item_column .pc-addons-nh-navigation-popup-item__container {
+  align-self: initial;
 }
 
-.pc-addons-nh-navigation-popup-item__content_padding_s {
-  padding: 6px 12px;
+.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);
 }
 
-.pc-addons-nh-navigation-popup-item__content_hover:hover, .pc-addons-nh-navigation-popup-item__content_hover:active {
-  color: inherit;
+.pc-addons-nh-navigation-popup-item:hover .pc-addons-nh-navigation-popup-item__image-container, .pc-addons-nh-navigation-popup-item:active .pc-addons-nh-navigation-popup-item__image-container {
+  background: var(--nh-popup-item-color-hover);
 }
 
-.pc-addons-nh-navigation-popup-item__content_hover:hover {
-  background-color: var(--g-color-base-simple-hover);
+.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 {
+  pointer-events: initial;
+  opacity: 1;
 }
 
-.pc-addons-nh-navigation-popup-item__content_disable {
+.pc-addons-nh-navigation-popup-item_disable {
   pointer-events: none;
 }
 
-.pc-addons-nh-navigation-popup-item__icon {
-  color: var(--g-color-base-brand);
+.pc-addons-nh-navigation-popup-item__container {
+  align-self: center;
 }
 
-.pc-addons-nh-navigation-popup-item__icon-container {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: 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;
+  color: var(--g-color-text-primary);
 }
 
-.pc-addons-nh-navigation-popup-item__container_with-margin {
-  margin-left: 28px;
+.pc-addons-nh-navigation-popup-item__title > svg {
+  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: 2px;
+  margin-top: 1px;
   color: var(--g-color-text-secondary);
 }
 
@@ -80,28 +84,19 @@ unpredictable css rules order in build */
 
 .pc-addons-nh-navigation-popup-item__image {
   display: block;
-  position: relative;
-  top: 2px;
-}
-
-.pc-addons-nh-navigation-popup-item__image_size_m {
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
 }
 
-.pc-addons-nh-navigation-popup-item__image_size_xm {
-  width: 16px;
-  height: 16px;
-}
-
-.pc-addons-nh-navigation-popup-item__image_size_s {
-  width: 14px;
-  height: 14px;
+.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 {
-  display: flex;
-  justify-content: center;
-  min-width: 20px;
-  margin-right: 8px;
+.pc-addons-nh-navigation-popup-item__image-container_no-bg {
+  border: 1px solid var(--g-color-line-generic-solid);
+  padding: 7px;
+  background: transparent;
 }

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

@@ -1,12 +1,6 @@
 import React from 'react';
-import type { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
 import { NHPopupItemData } from '../../models';
 export interface NHPopupItemProps extends Partial<NHPopupItemData> {
-    hover?: boolean;
-    sizes?: GridColumnSizesType;
-    className?: string;
-    padding?: 'default' | 's';
-    imageSize?: 's' | 'xm' | 'm';
-    target?: string;
+    column?: boolean;
 }
 export declare const NHPopupItem: (props: NHPopupItemProps) => React.JSX.Element;

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

@@ -2,27 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHPopupItem = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn");
-const constants_1 = require("../../constants");
-const NHTag_1 = require("../NHTag/NHTag");
+const ArrowRight_1 = require("./ArrowRight");
 const b = (0, cn_1.block)('nh-navigation-popup-item');
 const NHPopupItem = (props) => {
-    const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = constants_1.DefaultCategorizedItemSizes, padding = 'default', } = props;
-    const navigationTag = tag && react_1.default.createElement(NHTag_1.NHNavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
-    return (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b(null, className), sizes: sizes },
-        react_1.default.createElement("a", Object.assign({ className: b('content', { hover, padding, disable: !url }), href: url }, (0, gravity_ui_page_constructor_1.getLinkProps)(url || '', undefined, target)),
-            icon && (react_1.default.createElement("div", { className: b('icon-container') },
-                react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icon, size: 16 }))),
-            image && (react_1.default.createElement("div", { className: b('image-container') },
-                react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { size: imageSize }), src: image }))),
-            react_1.default.createElement("div", { className: b('container', { 'with-margin': Boolean(icon) }) },
-                react_1.default.createElement("div", { className: b('title-tag-wrapper') },
-                    react_1.default.createElement("span", { className: b('title') }, title),
-                    "\u00A0",
-                    navigationTag),
-                description && react_1.default.createElement(gravity_ui_page_constructor_1.HTML, { className: b('description') }, description)))));
+    const { url, target, title, description, image, imageColor, imageColorHover, column } = props;
+    const styleImageContainer = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (imageColor ? { '--nh-popup-item-color': imageColor } : {})), (imageColorHover ? { '--nh-popup-item-color-hover': imageColorHover } : {}))), [imageColor, imageColorHover]);
+    return (react_1.default.createElement("a", Object.assign({ className: b({ disable: !url, column }), href: url }, (0, gravity_ui_page_constructor_1.getLinkProps)(url || '', undefined, target)),
+        image && (react_1.default.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
+            react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image'), src: image }))),
+        react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement("div", { className: b('title') },
+                title,
+                react_1.default.createElement(uikit_1.Icon, { data: ArrowRight_1.ArrowRight, size: 16 })),
+            description && react_1.default.createElement(gravity_ui_page_constructor_1.HTML, { className: b('description') }, description))));
 };
 exports.NHPopupItem = NHPopupItem;