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

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

@@ -0,0 +1,107 @@
+/* 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;
+  border-radius: var(--g-border-radius-xl);
+  height: 100%;
+}
+
+.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__content:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-nh-navigation-popup-item__content_padding_default {
+  padding: 12px;
+}
+
+.pc-addons-nh-navigation-popup-item__content_padding_s {
+  padding: 6px 12px;
+}
+
+.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__content_hover:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-nh-navigation-popup-item__content_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__container_with-margin {
+  margin-left: 28px;
+}
+
+.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;
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-nh-navigation-popup-item__tag {
+  position: relative;
+  top: -2px;
+}
+
+.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;
+}
+
+.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 {
+  display: flex;
+  justify-content: center;
+  min-width: 20px;
+  margin-right: 8px;
+}

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

@@ -0,0 +1,12 @@
+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;
+}
+export declare const NHPopupItem: (props: NHPopupItemProps) => React.JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHPopupItem = 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 uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const constants_1 = require("../../constants");
+const NHTag_1 = require("../NHTag/NHTag");
+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)))));
+};
+exports.NHPopupItem = NHPopupItem;

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

@@ -0,0 +1,125 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-products-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;
+  max-width: 1200px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-products-popup::-webkit-scrollbar {
+  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;
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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__powered-card-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  gap: 20px;
+}
+
+.pc-addons-nh-products-popup__powered-card-description {
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-products-popup__powered-card-container-image {
+  flex: 1;
+  max-width: 140px;
+}
+
+.pc-addons-nh-products-popup__powered-card-image {
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+.pc-addons-nh-products-popup__powered-card:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-nh-products-popup__run-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;
+  border-radius: 16px;
+  background-color: #f2f6f9;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+}
+
+.pc-addons-nh-products-popup__run-card_border {
+  border: 1px solid #e4ebf0;
+  background-color: transparent;
+}
+
+.pc-addons-nh-products-popup__run-card-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__run-card-image {
+  height: 40px;
+}
+
+.pc-addons-nh-products-popup__run-card:hover {
+  background-color: var(--g-color-base-simple-hover);
+}

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

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

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHProductsPopup = 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-products-popup');
+const PoweredCard = ({ title, description, image, url }) => {
+    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('powered-card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+        react_1.default.createElement("div", { className: b('powered-card-wrap') },
+            react_1.default.createElement("div", { className: b('powered-card-title') }, title),
+            react_1.default.createElement("div", { className: b('powered-card-description') }, description)),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('powered-card-image'), containerClassName: b('powered-card-container-image'), src: image })));
+};
+const RunCard = ({ title, description, image, border, url }) => {
+    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('run-card', { border: border }) }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('run-card-image'), src: image }),
+        react_1.default.createElement("div", { className: b('run-card-wrap') },
+            react_1.default.createElement("div", { className: b('run-card-title') }, title),
+            react_1.default.createElement("div", { className: b('run-card-description') }, description))));
+};
+const NHProductsPopup = ({ sections, poweredCard }) => (react_1.default.createElement(gravity_ui_page_constructor_1.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;
+    let content;
+    if (isRunSection) {
+        content = (react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, (_a = section.runCards) === null || _a === void 0 ? void 0 : _a.map((card, cardIndex) => (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { key: `${card.title}-${cardIndex}`, sizes: {
+                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 3,
+                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                } },
+                react_1.default.createElement(RunCard, Object.assign({}, card))))))));
+    }
+    else if (isScaleSection) {
+        content = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: {
+                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 8,
+                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                } },
+                react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, (_b = section.items) === null || _b === void 0 ? void 0 : _b.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
+                        [gravity_ui_page_constructor_1.GridColumnSize.Md]: 6,
+                        [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                    } })))))),
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: {
+                    [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                } }, poweredCard && react_1.default.createElement(PoweredCard, Object.assign({}, poweredCard)))));
+    }
+    else {
+        content = (_c = section.items) === null || _c === void 0 ? void 0 : _c.map((item, itemIndex) => (react_1.default.createElement(NHPopupItem_1.NHPopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
+                [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+            } }))));
+    }
+    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { key: section.title },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('title') }, section.title),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('wrap') },
+            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+                react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('subtitle') }, section.subtitle)),
+            react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, content))));
+})));
+exports.NHProductsPopup = NHProductsPopup;

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

@@ -0,0 +1,210 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-resources-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;
+  max-width: 1200px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-resources-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-resources-popup__container {
+  padding: 0;
+  display: flex;
+}
+
+.pc-addons-nh-resources-popup__wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.pc-addons-nh-resources-popup__wrap > div + div {
+  border-top: 1px solid #e4ebf0;
+}
+
+.pc-addons-nh-resources-popup__group {
+  padding: 32px 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pc-addons-nh-resources-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));
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.pc-addons-nh-resources-popup__title:hover {
+  color: var(--g-color-text-link-hover);
+}
+
+.pc-addons-nh-resources-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;
+}
+
+.pc-addons-nh-resources-popup__events {
+  width: 300px;
+  flex-shrink: 0;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f6f9;
+  gap: 8px;
+}
+
+.pc-addons-nh-resources-popup__events-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));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-resources-popup__banner {
+  color: inherit;
+  text-decoration: none;
+  background-color: #f2f6f9;
+  border-radius: 16px;
+  display: flex;
+  padding: 16px;
+  gap: 24px;
+}
+
+.pc-addons-nh-resources-popup__banner-container-image {
+  width: 263px;
+  height: 148px;
+}
+
+.pc-addons-nh-resources-popup__banner-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-addons-nh-resources-popup__banner-container-icon {
+  height: 20px;
+}
+
+.pc-addons-nh-resources-popup__banner-icon {
+  display: block;
+  height: 100%;
+  object-fit: contain;
+}
+
+.pc-addons-nh-resources-popup__banner-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pc-addons-nh-resources-popup__banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pc-addons-nh-resources-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));
+  font-weight: 500;
+}
+
+.pc-addons-nh-resources-popup__banner-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));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-resources-popup__banner:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-nh-resources-popup__event-card {
+  color: inherit;
+  text-decoration: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  border: 1px solid #e4ebf0;
+}
+
+.pc-addons-nh-resources-popup__event-card-tag {
+  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));
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.pc-addons-nh-resources-popup__event-card-container-image {
+  width: 100%;
+  height: 150px;
+}
+
+.pc-addons-nh-resources-popup__event-card-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-addons-nh-resources-popup__event-card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-resources-popup__event-card-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+}
+
+.pc-addons-nh-resources-popup__event-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));
+  font-weight: 500;
+}
+
+.pc-addons-nh-resources-popup__event-card-date {
+  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;
+}
+
+.pc-addons-nh-resources-popup__event-card-location {
+  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;
+}
+
+.pc-addons-nh-resources-popup__event-card:hover {
+  background-color: var(--g-color-base-simple-hover);
+}

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHResourcesPopup = 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-resources-popup');
+const EventCard = ({ url, tag, image, date, title, location }) => {
+    return (react_1.default.createElement("a", Object.assign({ href: url, className: b('event-card') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)),
+        react_1.default.createElement("div", { className: b('event-card-tag') }, tag),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('event-card-image'), containerClassName: b('event-card-container-image'), src: image }),
+        react_1.default.createElement("div", { className: b('event-card-content') },
+            react_1.default.createElement("div", { className: b('event-card-wrap') },
+                react_1.default.createElement("div", { className: b('event-card-date') }, date),
+                react_1.default.createElement("div", { className: b('event-card-title') }, title)),
+            react_1.default.createElement("div", { className: b('event-card-location') }, location))));
+};
+const NHResourcesPopup = ({ groups, banner, events }) => (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, { sizes: { [gravity_ui_page_constructor_1.GridColumnSize.Md]: 8, [gravity_ui_page_constructor_1.GridColumnSize.All]: 12 } },
+                    react_1.default.createElement("a", Object.assign({ href: group.url, className: b('title') }, (0, gravity_ui_page_constructor_1.getLinkProps)(group.url)), group.title),
+                    react_1.default.createElement("div", { className: b('subtitle') }, group.subtitle)),
+                react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: { [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4, [gravity_ui_page_constructor_1.GridColumnSize.All]: 12 } })),
+            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, hover: true }, item)))))))),
+        banner && (react_1.default.createElement("div", { className: b('group') },
+            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("a", Object.assign({ href: banner.url, className: b('banner') }, (0, gravity_ui_page_constructor_1.getLinkProps)(banner.url)),
+                        react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('banner-image'), containerClassName: b('banner-container-image'), src: banner.image }),
+                        react_1.default.createElement("div", { className: b('banner-wrap') },
+                            react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('banner-icon'), containerClassName: b('banner-container-icon'), src: banner.icon }),
+                            react_1.default.createElement("div", { className: b('banner-content') },
+                                react_1.default.createElement("div", { className: b('banner-title') }, banner.title),
+                                react_1.default.createElement("div", { className: b('banner-description') }, banner.description))))))))),
+    events && (react_1.default.createElement("div", { className: b('events') },
+        react_1.default.createElement("div", { className: b('events-title') }, events.title),
+        events.items.map((event) => (react_1.default.createElement(EventCard, Object.assign({ key: event.title }, event))))))));
+exports.NHResourcesPopup = NHResourcesPopup;

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

@@ -0,0 +1,49 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-solutions-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;
+  max-width: 1200px;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-solutions-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-solutions-popup__container {
+  padding: 0;
+}
+
+.pc-addons-nh-solutions-popup > div + div {
+  border-top: 1px solid #e4ebf0;
+}
+
+.pc-addons-nh-solutions-popup__wrap {
+  padding: 24px;
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-addons-nh-solutions-popup__head {
+  display: flex;
+  gap: 24px;
+}
+
+.pc-addons-nh-solutions-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));
+  font-weight: 600;
+}
+
+.pc-addons-nh-solutions-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;
+}

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHSolutionsPopup = 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-solutions-popup');
+const NHSolutionsPopup = ({ sections }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') }, sections.map((section) => (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { key: section.title },
+    react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('wrap') },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('head') },
+                react_1.default.createElement("div", { className: b('title') }, section.title),
+                react_1.default.createElement("div", { className: b('subtitle') }, section.subtitle))),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, section.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.Md]: 4,
+                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+            } })))))))))));
+exports.NHSolutionsPopup = NHSolutionsPopup;