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

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

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

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

@@ -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/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js

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

package/build/esm/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/esm/components/NewHeader/components/NHPopupItem/ArrowRight.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ArrowRight = (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: "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" })));

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

@@ -1,75 +1,64 @@
 /* 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__content:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: -2px;
+.pc-addons-nh-navigation-popup-item_column {
+  flex-direction: column;
 }
 
-.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 {
+  width: auto;
+  max-width: 100%;
+  height: 30px;
 }
 
-.pc-addons-nh-navigation-popup-item__content_padding_default {
-  padding: 12px;
+.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_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 {
+  display: inline-block;
 }
 
-.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__icon-container {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.pc-addons-nh-navigation-popup-item__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: 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: none;
+  vertical-align: sub;
 }
 
 .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));
   display: block;
-  margin-top: 2px;
+  margin-top: 1px;
   color: var(--g-color-text-secondary);
 }
 
@@ -80,28 +69,18 @@ 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);
 }
 
-.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/esm/components/NewHeader/components/NHPopupItem/NHPopupItem.d.ts

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

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

@@ -1,24 +1,19 @@
-import React from 'react';
-import { Col, HTML, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import React, { useMemo } from 'react';
+import { HTML, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
-import { DefaultCategorizedItemSizes } from '../../constants';
-import { NHNavigationTag } from '../NHTag/NHTag';
+import { ArrowRight } from './ArrowRight';
 import './NHPopupItem.css';
 const b = block('nh-navigation-popup-item');
 export const NHPopupItem = (props) => {
-    const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = DefaultCategorizedItemSizes, padding = 'default', } = props;
-    const navigationTag = tag && React.createElement(NHNavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
-    return (React.createElement(Col, { className: b(null, className), sizes: sizes },
-        React.createElement("a", Object.assign({ className: b('content', { hover, padding, disable: !url }), href: url }, getLinkProps(url || '', undefined, target)),
-            icon && (React.createElement("div", { className: b('icon-container') },
-                React.createElement(Icon, { className: b('icon'), data: icon, size: 16 }))),
-            image && (React.createElement("div", { className: b('image-container') },
-                React.createElement(Image, { className: b('image', { size: imageSize }), src: image }))),
-            React.createElement("div", { className: b('container', { 'with-margin': Boolean(icon) }) },
-                React.createElement("div", { className: b('title-tag-wrapper') },
-                    React.createElement("span", { className: b('title') }, title),
-                    "\u00A0",
-                    navigationTag),
-                description && React.createElement(HTML, { className: b('description') }, description)))));
+    const { url, target, title, description, image, imageColor, imageColorHover, column } = props;
+    const styleImageContainer = useMemo(() => (Object.assign(Object.assign({}, (imageColor ? { '--nh-popup-item-color': imageColor } : {})), (imageColorHover ? { '--nh-popup-item-color-hover': imageColorHover } : {}))), [imageColor, imageColorHover]);
+    return (React.createElement("a", Object.assign({ className: b({ disable: !url, column }), href: url }, getLinkProps(url || '', undefined, target)),
+        image && (React.createElement("div", { className: b('image-container', { 'no-bg': !imageColor }), style: styleImageContainer },
+            React.createElement(Image, { className: b('image'), src: image }))),
+        React.createElement("div", { className: b('container') },
+            React.createElement("div", { className: b('title') },
+                title,
+                React.createElement(Icon, { data: ArrowRight, size: 16 })),
+            description && React.createElement(HTML, { className: b('description') }, description))));
 };

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

@@ -14,111 +14,106 @@ unpredictable css rules order in build */
   display: none;
 }
 
-.pc-addons-nh-products-popup__container {
-  padding: 0;
-}
-
 .pc-addons-nh-products-popup > div + div {
   border-top: 1px solid #e4ebf0;
 }
 
-.pc-addons-nh-products-popup__wrap {
-  padding: 24px;
-  gap: 24px;
+.pc-addons-nh-products-popup__section {
+  display: flex;
+  padding: 24px 32px;
+}
+
+.pc-addons-nh-products-popup__section-head {
   display: flex;
   flex-direction: column;
+  width: 200px;
+  padding-right: 32px;
+  flex-shrink: 0;
+  gap: 2px;
 }
 
 .pc-addons-nh-products-popup__title {
-  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
-  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
-  padding: 24px;
-  max-width: 108px;
-  font-weight: 600;
-  background-color: #e0e0e0;
+  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-products-popup__subtitle {
-  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));
-  font-weight: 700;
-  color: #e0e0e0;
+  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-products-popup__powered-card {
-  color: inherit;
-  text-decoration: none;
-  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;
-  background-color: #f2f6f9;
-  border-radius: 16px;
-  padding: 16px;
-  display: flex;
-  gap: 24px;
+.pc-addons-nh-products-popup__wrap, .pc-addons-nh-products-popup__wrap-scale {
+  display: grid;
+  gap: 24px 40px;
+  align-items: flex-start;
 }
 
-.pc-addons-nh-products-popup__powered-card-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  gap: 20px;
+.pc-addons-nh-products-popup__wrap {
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.pc-addons-nh-products-popup__powered-card-description {
-  color: #9fb1bd;
+.pc-addons-nh-products-popup__wrap-scale {
+  grid-template-columns: repeat(12, 1fr);
 }
 
-.pc-addons-nh-products-popup__powered-card-container-image {
-  flex: 1;
-  max-width: 140px;
+.pc-addons-nh-products-popup__wrap-scale > a {
+  grid-column: span 4;
+  grid-row: 1;
 }
 
-.pc-addons-nh-products-popup__powered-card-image {
-  width: 100%;
-  aspect-ratio: 1;
+.pc-addons-nh-products-popup__wrap-scale > .pc-addons-nh-products-popup__wrap:empty {
+  display: none;
 }
 
-.pc-addons-nh-products-popup__powered-card:hover {
-  background-color: var(--g-color-base-simple-hover);
+.pc-addons-nh-products-popup__wrap-scale > a + .pc-addons-nh-products-popup__wrap {
+  grid-column: span 8;
 }
 
-.pc-addons-nh-products-popup__run-card {
+.pc-addons-nh-products-popup__wrap-scale > .pc-addons-nh-products-popup__wrap:last-child {
+  grid-column: span 12;
+}
+
+.pc-addons-nh-products-popup__banner {
   color: inherit;
   text-decoration: none;
-  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));
+  grid-area: 1/3/3/4;
   font-weight: 500;
   border-radius: 16px;
-  background-color: #f2f6f9;
   padding: 16px;
   display: flex;
-  flex-direction: column;
   gap: 20px;
-  height: 100%;
+  background: var(--nh-products-banner-background, transparent);
 }
 
-.pc-addons-nh-products-popup__run-card_border {
-  border: 1px solid #e4ebf0;
-  background-color: transparent;
+.pc-addons-nh-products-popup__banner_border {
+  border: 1px solid var(--g-color-line-generic-solid);
 }
 
-.pc-addons-nh-products-popup__run-card-wrap {
+.pc-addons-nh-products-popup__banner-wrap {
   display: flex;
   flex-direction: column;
   flex: 1;
   gap: 4px;
 }
 
-.pc-addons-nh-products-popup__run-card-description {
-  color: #9fb1bd;
+.pc-addons-nh-products-popup__banner-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(--nh-products-banner-color, var(--g-color-text-primary));
+  font-weight: 600;
 }
 
-.pc-addons-nh-products-popup__run-card-image {
-  height: 40px;
+.pc-addons-nh-products-popup__banner-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(--nh-products-banner-color, var(--g-color-text-secondary));
 }
 
-.pc-addons-nh-products-popup__run-card:hover {
-  background-color: var(--g-color-base-simple-hover);
+.pc-addons-nh-products-popup__banner-image {
+  display: block;
+  width: 86px;
+  aspect-ratio: 1;
 }

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { NHProductsPopupData } from '../../models';
 import './NHProductsPopup.css';
-export declare const NHProductsPopup: ({ sections, poweredCard }: NHProductsPopupData) => React.JSX.Element;
+export declare const NHProductsPopup: ({ sections, primaryColor, primaryColorHover, }: NHProductsPopupData) => React.JSX.Element;

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

@@ -1,61 +1,39 @@
-import React from 'react';
-import { Col, Grid, GridColumnSize, Image, Row, getLinkProps, } from '@doyourjob/gravity-ui-page-constructor';
+import React, { useMemo } from 'react';
+import { Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
 import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 import './NHProductsPopup.css';
 const b = block('nh-products-popup');
-const PoweredCard = ({ title, description, image, url }) => {
-    return (React.createElement("a", Object.assign({ href: url, className: b('powered-card') }, getLinkProps(url)),
-        React.createElement("div", { className: b('powered-card-wrap') },
-            React.createElement("div", { className: b('powered-card-title') }, title),
-            React.createElement("div", { className: b('powered-card-description') }, description)),
-        React.createElement(Image, { className: b('powered-card-image'), containerClassName: b('powered-card-container-image'), src: image })));
+const NHBanner = ({ title, description, image, url, background, color, border, }) => {
+    const styles = useMemo(() => (Object.assign(Object.assign({}, (background ? { '--nh-products-banner-background': background } : {})), (color ? { '--nh-products-banner-color': color } : {}))), [background, color]);
+    return (React.createElement("a", Object.assign({ href: url, className: b('banner', { border }), style: styles }, getLinkProps(url)),
+        React.createElement(Image, { className: b('banner-image'), src: image }),
+        React.createElement("div", { className: b('banner-wrap') },
+            React.createElement("div", { className: b('banner-title') }, title),
+            React.createElement("div", { className: b('banner-description') }, description))));
 };
-const RunCard = ({ title, description, image, border, url }) => {
-    return (React.createElement("a", Object.assign({ href: url, className: b('run-card', { border: border }) }, getLinkProps(url)),
-        React.createElement(Image, { className: b('run-card-image'), src: image }),
-        React.createElement("div", { className: b('run-card-wrap') },
-            React.createElement("div", { className: b('run-card-title') }, title),
-            React.createElement("div", { className: b('run-card-description') }, description))));
-};
-export const NHProductsPopup = ({ sections, poweredCard }) => (React.createElement(Grid, { className: b(), containerClass: b('container') }, sections.map((section, index) => {
-    var _a, _b, _c;
-    const isScaleSection = index === 2; // "Scale" section is usually the 3rd one
-    const isRunSection = section.runCards && section.runCards.length > 0;
+export const NHProductsPopup = ({ sections, primaryColor, primaryColorHover, }) => (React.createElement("div", { className: b() }, sections.map((section) => {
+    var _a, _b, _c, _d, _e;
     let content;
-    if (isRunSection) {
-        content = (React.createElement(Col, null,
-            React.createElement(Row, null, (_a = section.runCards) === null || _a === void 0 ? void 0 : _a.map((card, cardIndex) => (React.createElement(Col, { key: `${card.title}-${cardIndex}`, sizes: {
-                    [GridColumnSize.Md]: 3,
-                    [GridColumnSize.All]: 12,
-                } },
-                React.createElement(RunCard, Object.assign({}, card))))))));
+    if ('mode' in section && section.mode === 'run') {
+        content = (React.createElement("div", { className: b('wrap-scale') },
+            ((_a = section.items) === null || _a === void 0 ? void 0 : _a[0]) && React.createElement(NHPopupItem, Object.assign({}, section.items[0], { hover: true, column: true })),
+            React.createElement("div", { className: b('wrap') }, (_b = section.items) === null || _b === void 0 ? void 0 : _b.slice(1, 4).map((item, cardIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${cardIndex + 1}` }, item, { hover: true, column: true }))))),
+            React.createElement("div", { className: b('wrap') }, (_c = section.items) === null || _c === void 0 ? void 0 : _c.slice(4).map((item, cardIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${cardIndex + 4}` }, item, { hover: true, column: true })))))));
     }
-    else if (isScaleSection) {
-        content = (React.createElement(React.Fragment, null,
-            React.createElement(Col, { sizes: {
-                    [GridColumnSize.Md]: 8,
-                    [GridColumnSize.All]: 12,
-                } },
-                React.createElement(Row, null, (_b = section.items) === null || _b === void 0 ? void 0 : _b.map((item, itemIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                        [GridColumnSize.Md]: 6,
-                        [GridColumnSize.All]: 12,
-                    } })))))),
-            React.createElement(Col, { sizes: {
-                    [GridColumnSize.Md]: 4,
-                    [GridColumnSize.All]: 12,
-                } }, poweredCard && React.createElement(PoweredCard, Object.assign({}, poweredCard)))));
+    else if ('mode' in section && section.mode === 'scale') {
+        content = (React.createElement("div", { className: b('wrap') }, (_d = section.items) === null || _d === void 0 ? void 0 :
+            _d.map((item, itemIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item, { hover: true })))),
+            section.banner && React.createElement(NHBanner, Object.assign({}, section.banner))));
     }
     else {
-        content = (_c = section.items) === null || _c === void 0 ? void 0 : _c.map((item, itemIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                [GridColumnSize.Md]: 4,
-                [GridColumnSize.All]: 12,
-            } }))));
+        content = (React.createElement("div", { className: b('wrap') }, (_e = section.items) === null || _e === void 0 ? void 0 :
+            _e.map((item, itemIndex) => (React.createElement(NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}`, imageColor: primaryColor, imageColorHover: primaryColorHover }, item, { hover: true })))),
+            ' '));
     }
-    return (React.createElement(Row, { key: section.title },
-        React.createElement(Col, { className: b('title') }, section.title),
-        React.createElement(Col, { className: b('wrap') },
-            React.createElement(Row, null,
-                React.createElement(Col, { className: b('subtitle') }, section.subtitle)),
-            React.createElement(Row, null, content))));
+    return (React.createElement("div", { className: b('section'), key: section.title },
+        React.createElement("div", { className: b('section-head') },
+            React.createElement("div", { className: b('title') }, section.title),
+            React.createElement("div", { className: b('subtitle') }, section.subtitle)),
+        content));
 })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, Grid, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { Col, Grid, Row } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
 import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 import './NHSolutionsPopup.css';
@@ -10,7 +10,4 @@ export const NHSolutionsPopup = ({ sections }) => (React.createElement(Grid, { c
             React.createElement(Col, { className: b('head') },
                 React.createElement("div", { className: b('title') }, section.title),
                 React.createElement("div", { className: b('subtitle') }, section.subtitle))),
-        React.createElement(Row, null, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { hover: true, sizes: {
-                [GridColumnSize.Md]: 4,
-                [GridColumnSize.All]: 12,
-            } })))))))))));
+        React.createElement(Row, null, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { hover: true })))))))))));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, Grid, GridColumnSize, Image, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { Col, Grid, Image, Row } from '@doyourjob/gravity-ui-page-constructor';
 import { block } from '../../../../utils/cn';
 import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
 import './NHWhyPopup.css';
@@ -9,7 +9,7 @@ export const NHWhyPopup = ({ groups, card }) => (React.createElement(Grid, { cla
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("div", { className: b('title') }, group.title))),
-        React.createElement(Row, null, group.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { hover: true, sizes: { [GridColumnSize.All]: 12 } }))))))))),
+        React.createElement(Row, null, group.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title }, item, { hover: true }))))))))),
     card && (React.createElement("div", { className: b('card') },
         React.createElement(Image, { className: b('card-image'), containerClassName: b('card-container-image'), src: card.image }),
         React.createElement("div", { className: b('card-wrap') },

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

@@ -30,9 +30,9 @@ export interface NHPopupItemData {
     url: string;
     slug?: string;
     description?: string;
-    icon?: string;
     image?: string | null;
-    tag?: NHNavigationTag;
+    imageColor?: string;
+    imageColorHover?: string;
 }
 export interface NHCategoryGroupData {
     title?: string;
@@ -43,28 +43,37 @@ export interface NHCategoryGroupData {
 export interface NHMediumPopupData {
     groups: NHCategoryGroupData[];
 }
-export interface NHSpecialCardData {
+export interface NHBannerData {
     title: string;
     description: string;
     image: string;
     url: string;
 }
-export interface NHRunCardData {
+export interface NHProductBannerData {
     title: string;
     description: string;
     image: string;
-    border?: boolean;
     url: string;
+    background?: string;
+    color?: string;
+    border?: boolean;
 }
-export interface NHProductsPopupSection {
+export interface NHProductsPopupSectionBase {
     title: string;
     subtitle: string;
     items?: NHPopupItemData[];
-    runCards?: NHRunCardData[];
+}
+export interface NHProductsPopupSectionRun extends NHProductsPopupSectionBase {
+    mode: 'run';
+}
+export interface NHProductsPopupSectionScale extends NHProductsPopupSectionBase {
+    mode: 'scale';
+    banner?: NHProductBannerData;
 }
 export interface NHProductsPopupData {
-    sections: NHProductsPopupSection[];
-    poweredCard: NHSpecialCardData;
+    primaryColor?: string;
+    primaryColorHover?: string;
+    sections: (NHProductsPopupSectionRun | NHProductsPopupSectionBase | NHProductsPopupSectionScale)[];
 }
 export interface NHSolutionsPopupSection {
     title: string;
@@ -80,7 +89,7 @@ export interface NHWhyPopupGroup {
 }
 export interface NHWhyPopupData {
     groups: NHWhyPopupGroup[];
-    card: NHSpecialCardData;
+    card: NHBannerData;
 }
 export interface NHBannerData {
     title: string;

package/package.json

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