@gravity-ui/page-constructor 1.7.0-alpha.1 → 1.7.0-alpha.10

package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.mobile-navigation {
+.pc-mobile-navigation {
   position: fixed;
   z-index: 100;
   top: var(--header-height);
@@ -9,22 +9,22 @@ unpredictable css rules order in build */
   border-bottom-right-radius: var(--pc-border-radius);
   border-bottom-left-radius: var(--pc-border-radius);
   background-color: var(--yc-color-base-background);
-  box-shadow: 0px 3px 10px var(--yc-color-sfx-shadow);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
 @media (min-width: 769px) {
-  .mobile-navigation {
+  .pc-mobile-navigation {
     display: none;
   }
 }
-.mobile-navigation__wrapper {
-  padding: 32px 20px;
+.pc-mobile-navigation__wrapper {
+  padding: 32px 48px;
 }
-.mobile-navigation__button {
+.pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.mobile-navigation__links {
+.pc-mobile-navigation__links {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,13 +33,13 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__links-item:not(:last-child) {
   margin-bottom: 24px;
 }
-.mobile-navigation__dropdown-item:not(:last-child) {
+.pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mobile-navigation__popup {
+.pc-mobile-navigation__popup {
   z-index: 101;
   display: flex;
   flex-direction: column;
@@ -52,7 +52,13 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (min-width: 769px) {
-  .mobile-navigation__popup {
+  .pc-mobile-navigation__popup {
     display: none;
   }
+}
+@media (max-width: 576px) {
+  .pc-mobile-navigation__wrapper {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }

package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
 const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../utils");
+const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
 const navigation_1 = require("../../../../models/navigation");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('mobile-navigation');
+const b = (0, utils_1.block)('mobile-navigation');
 const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
     const ref = (0, react_1.useRef)(null);
     return (react_1.default.createElement("div", { ref: ref, className: b('dropdown') },

package/build/cjs/components/navigation/components/Navigation/Navigation.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation {
+.pc-navigation {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
-.navigation__links {
+.pc-navigation__links {
   position: relative;
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.navigation__links-item {
+.pc-navigation__links-item {
   position: relative;
   height: var(--header-height);
   line-height: var(--header-height);
@@ -21,22 +21,22 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
 }
-.utilityfocus .navigation__links-item:focus {
+.utilityfocus .pc-navigation__links-item:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation__links-item:hover, .navigation__links-item:active {
+.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
   color: var(--yc-color-text-link);
 }
-.navigation__links-item:not(:last-child) {
+.pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
 }
-.navigation__slider-container {
+.pc-navigation__slider-container {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.navigation__slider {
+.pc-navigation__slider {
   width: 100%;
   height: 2px;
   background-color: var(--yc-color-text-link);

package/build/cjs/components/navigation/components/Navigation/Navigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem, NavigationItem as NavigationItemModel } from '../../../../models/navigation';
 export interface NavigationProps {
     links: NavigationItemModel[];
     activeItemIndex: number;
@@ -7,5 +7,12 @@ export interface NavigationProps {
     className?: string;
     highlightActiveItem?: boolean;
 }
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

package/build/cjs/components/navigation/components/Navigation/Navigation.js

@@ -2,14 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../../utils");
 const OverflowScroller_1 = (0, tslib_1.__importDefault)(require("../../../OverflowScroller/OverflowScroller"));
 const navigation_1 = require("../../../../models/navigation");
 const NavigationPopup_1 = (0, tslib_1.__importDefault)(require("../NavigationPopup/NavigationPopup"));
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
 const locationContext_1 = require("../../../../context/locationContext");
-const b = (0, bem_cn_lite_1.default)('navigation');
+const b = (0, utils_1.block)('navigation');
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
+        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const itemRefs = (0, react_1.useRef)([]);
@@ -22,22 +28,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
         e.stopPropagation();
         onActiveItemChange(index === activeItemIndex ? -1 : index);
     }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
-        return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
-            isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (react_1.default.createElement("div", { className: b('slider-container') },
-        react_1.default.createElement("div", { className: b('slider') })));
-    const content = (react_1.default.createElement("nav", null,
-        react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === navigation_1.NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
     const calculateItemPositions = (0, react_1.useCallback)(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -65,6 +55,15 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     (0, react_1.useEffect)(() => {
         hidePopup();
     }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
+    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+        react_1.default.createElement("nav", null,
+            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
+                const isActive = index === activeItemIndex;
+                const onClick = getItemClickHandler(index);
+                return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
+                    link.type === navigation_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdown, { data: link, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
+                    highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
+                        react_1.default.createElement("div", { className: b('slider') })))));
+            })))));
 };
 exports.default = Navigation;

package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css

@@ -1,40 +1,40 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-item {
+.pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
 }
-.navigation-item_type_link {
+.pc-navigation-item_type_link {
   color: var(--yc-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
 }
-.utilityfocus .navigation-item_type_link:focus {
+.utilityfocus .pc-navigation-item_type_link:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
+.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
   color: var(--yc-color-text-link);
 }
-.navigation-item_type_button {
+.pc-navigation-item_type_button {
   display: inline-block;
 }
-.navigation-item__arrow {
+.pc-navigation-item__arrow {
   position: relative;
   top: -2px;
   width: 9px;
   height: 9px;
   margin-left: 5px;
 }
-.navigation-item__icon {
+.pc-navigation-item__icon {
+  display: flex;
   width: 20px;
   height: 20px;
   margin-right: 8px;
-  border-radius: 50%;
   object-fit: cover;
 }
-.navigation-item__dropdown {
+.pc-navigation-item__dropdown {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.d.ts

@@ -1,7 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models/navigation';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+import { NavigationItemData } from '../../../../models';
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.js

@@ -2,44 +2,56 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const index_1 = require("../../../index");
 const utils_1 = require("../../../../utils");
+const index_1 = require("../../../index");
 const locationContext_1 = require("../../../../context/locationContext");
-const navigation_1 = require("../../../../models/navigation");
+const models_1 = require("../../../../models");
 const icons_1 = require("../../../../icons");
 const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
-const b = (0, bem_cn_lite_1.default)('navigation-item');
+const utils_2 = require("../../../Media/Image/utils");
+const b = (0, utils_1.block)('navigation-item');
 const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && react_1.default.createElement("img", { className: b('icon'), src: icon }),
+    icon && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, icon)),
     react_1.default.createElement("span", { className: b('text') }, text)));
 const NavigationDropdown = (_a) => {
     var { text, icon, isOpened } = _a, props = (0, tslib_1.__rest)(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement("span", Object.assign({}, props),
-        react_1.default.createElement(Content, { text: text, icon: icon }),
+        react_1.default.createElement(Content, { text: text, icon: iconData }),
         react_1.default.createElement(index_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
-    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { url, text, icon, arrow, target } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target"]);
     const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
+    const iconData = icon && (0, utils_2.getMediaImage)(icon);
     const content = (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(Content, { text: text, icon: icon }),
+        react_1.default.createElement(Content, { text: text, icon: iconData }),
         arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
-    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
-        react_1.default.createElement("a", Object.assign({}, rest), content)));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content));
+    }
+    else {
+        return (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
+            react_1.default.createElement("a", Object.assign({}, rest), content)));
+    }
+};
+const NavigationButton = (props) => {
+    const { url, target } = props;
+    return target ? (react_1.default.createElement(index_1.Button, Object.assign({}, props, { url: url }))) : (react_1.default.createElement(index_1.RouterLink, { href: url },
+        react_1.default.createElement(index_1.Button, Object.assign({}, props, { url: url }))));
 };
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
-    [navigation_1.NavigationItemType.Button]: index_1.RouterLink,
-    [navigation_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [navigation_1.NavigationItemType.Dropdown]: NavigationDropdown,
-    [navigation_1.NavigationItemType.Link]: NavigationLink,
+    [models_1.NavigationItemType.Button]: NavigationButton,
+    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
+    [models_1.NavigationItemType.Dropdown]: NavigationDropdown,
+    [models_1.NavigationItemType.Link]: NavigationLink,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = (0, tslib_1.__rest)(_a, ["data", "className"]);
-    const { type = navigation_1.NavigationItemType.Link } = data;
+    const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
     const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
     return react_1.default.createElement(Component, Object.assign({}, componentProps));

package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-popup {
+.pc-navigation-popup {
   position: fixed;
   top: calc(var(--header-height) - 16px);
   padding-right: 4px;
@@ -18,16 +18,16 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (max-width: 768px) {
-  .navigation-popup {
+  .pc-navigation-popup {
     display: none;
   }
 }
-.navigation-popup__link {
+.pc-navigation-popup__link {
   height: 36px;
   padding: 8px 12px;
   border-radius: 8px;
 }
-.navigation-popup__link:hover {
+.pc-navigation-popup__link:hover {
   color: var(--yc-color-text-primary);
   background-color: var(--yc-color-base-simple-hover);
 }

package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts

@@ -1,24 +1,10 @@
-import React, { RefObject } from 'react';
-import { NavigationLinkItem } from '../../../../models/navigation';
+import React from 'react';
+import { NavigationLinkItem } from '../../../../models';
 export interface NavigationPopupProps {
     items: NavigationLinkItem[];
     onClose: () => void;
     left?: number;
     className?: string;
 }
-interface NavigationPopupState {
-    calculatedLeft?: number;
-}
-export default class NavigationPopup extends React.Component<NavigationPopupProps, NavigationPopupState> {
-    ref: RefObject<HTMLDivElement>;
-    state: {
-        calculatedLeft: number | undefined;
-    };
-    private calculateLeft;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: NavigationPopupProps): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element | null;
-    private renderDefaultPopup;
-}
-export {};
+export declare const NavigationPopup: React.FC<NavigationPopupProps>;
+export default NavigationPopup;

package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js

@@ -1,57 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationPopup = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../utils");
 const index_1 = require("../../../index");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('navigation-popup');
-class NavigationPopup extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = (0, react_1.createRef)();
-        this.state = {
-            calculatedLeft: this.props.left,
-        };
-        this.calculateLeft = lodash_1.default.debounce(() => {
-            const { left } = this.props;
-            if (this.ref && this.ref.current && left) {
-                const right = left + this.ref.current.offsetWidth;
-                const docWidth = document.body.clientWidth;
-                const calculatedLeft = right > docWidth ? left - (right - docWidth) : left;
-                this.setState({ calculatedLeft });
-            }
-            else {
-                this.setState({ calculatedLeft: left });
-            }
-        }, 100);
-    }
-    componentDidMount() {
-        this.calculateLeft();
-        window.addEventListener('resize', this.calculateLeft);
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.left !== this.props.left) {
-            this.calculateLeft();
+const b = (0, utils_1.block)('navigation-popup');
+const NavigationPopup = ({ items, left, onClose }) => {
+    const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
+    const popupRef = (0, react_1.useRef)(null);
+    const calculateLeft = (0, react_1.useCallback)(() => {
+        if (popupRef && popupRef.current && left) {
+            const right = left + popupRef.current.offsetWidth;
+            const docWidth = document.body.clientWidth;
+            const currentLeft = right > docWidth ? left - (right - docWidth) : left;
+            setCalculatedLeft(currentLeft);
         }
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.calculateLeft);
-    }
-    render() {
-        if (!document || !document.body) {
-            return null;
+        else {
+            setCalculatedLeft(left);
         }
-        const { onClose } = this.props;
-        const { calculatedLeft } = this.state;
-        return (react_1.default.createElement(uikit_1.Portal, null,
-            react_1.default.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
-                react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
-    }
-    renderDefaultPopup() {
-        return (react_1.default.createElement(react_1.Fragment, null, this.props.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
+    }, [left]);
+    (0, react_1.useEffect)(() => {
+        const debounceCalculateLeft = lodash_1.default.debounce(calculateLeft, 100);
+        calculateLeft();
+        window.addEventListener('resize', debounceCalculateLeft);
+        return () => {
+            window.removeEventListener('resize', debounceCalculateLeft);
+        };
+    }, [calculateLeft]);
+    (0, react_1.useEffect)(() => {
+        calculateLeft();
+    }, [calculateLeft, left]);
+    if (!document || !document.body) {
+        return null;
     }
-}
-exports.default = NavigationPopup;
+    return (react_1.default.createElement(uikit_1.Portal, null,
+        react_1.default.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
+            react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))))));
+};
+exports.NavigationPopup = NavigationPopup;
+exports.default = exports.NavigationPopup;

package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.social-icon {
+.pc-social-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,10 +11,10 @@ unpredictable css rules order in build */
   border-radius: 50%;
   background-color: var(--yc-color-base-generic);
 }
-.social-icon:hover {
+.pc-social-icon:hover {
   background-color: var(--yc-color-base-generic-hover);
 }
-.social-icon__icon {
+.pc-social-icon__icon {
   width: 16px;
   height: 16px;
 }

package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationSocialItem } from '../../../../models/navigation';
+import { NavigationSocialItem } from '../../../../models';
 export interface NavigationSocialItemProps extends NavigationSocialItem {
     className?: string;
 }

package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.js

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const index_1 = require("../../../index");
-const b = (0, bem_cn_lite_1.default)('social-icon');
-const SocialIcon = ({ icon, url, className }) => (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
-    react_1.default.createElement(index_1.Image, { className: b('icon'), src: icon })));
+const utils_2 = require("../../../Media/Image/utils");
+const b = (0, utils_1.block)('social-icon');
+const SocialIcon = ({ icon, url, className }) => {
+    const iconData = (0, utils_2.getMediaImage)(icon);
+    return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+        react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, iconData))));
+};
 exports.default = SocialIcon;

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

package/build/cjs/components/navigation/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialIcon = exports.NavigationPopup = exports.Navigation = exports.MobileNavigation = exports.Logo = exports.NavigationItem = exports.Header = void 0;
+var Header_1 = require("./Header/Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+var NavigationItem_1 = require("./NavigationItem/NavigationItem");
+Object.defineProperty(exports, "NavigationItem", { enumerable: true, get: function () { return __importDefault(NavigationItem_1).default; } });
+var Logo_1 = require("./Logo/Logo");
+Object.defineProperty(exports, "Logo", { enumerable: true, get: function () { return __importDefault(Logo_1).default; } });
+var MobileNavigation_1 = require("./MobileNavigation/MobileNavigation");
+Object.defineProperty(exports, "MobileNavigation", { enumerable: true, get: function () { return __importDefault(MobileNavigation_1).default; } });
+var Navigation_1 = require("./Navigation/Navigation");
+Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return __importDefault(Navigation_1).default; } });
+var NavigationPopup_1 = require("./NavigationPopup/NavigationPopup");
+Object.defineProperty(exports, "NavigationPopup", { enumerable: true, get: function () { return __importDefault(NavigationPopup_1).default; } });
+var SocialIcon_1 = require("./SocialIcon/SocialIcon");
+Object.defineProperty(exports, "SocialIcon", { enumerable: true, get: function () { return __importDefault(SocialIcon_1).default; } });

package/build/cjs/components/navigation/containers/Layout/Layout.css

@@ -0,0 +1,10 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

package/build/cjs/components/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationData } from '../../../../models';
+export interface LayoutProps {
+    navigation?: NavigationData;
+    children?: React.ReactNode;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

package/build/cjs/components/navigation/containers/Layout/Layout.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../../../utils");
+const Header_1 = (0, tslib_1.__importDefault)(require("../../components/Header/Header"));
+const b = (0, utils_1.block)('layout');
+const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
+    navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
+    react_1.default.createElement("main", { className: b('content') }, children)));
+exports.default = Layout;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -1,15 +1,14 @@
 import React from 'react';
-import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
-import { blockMap, subBlockMap } from '../../constructor-items';
-import { NavigationData } from '../../models/navigation';
 import '@doc-tools/transform/dist/js/yfm';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems, NavigationData } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
-    navigationData?: NavigationData;
+    navigation?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;