@gravity-ui/page-constructor 4.36.0-alpha.1 → 4.37.0

package/build/cjs/text-transform/config.js

@@ -156,6 +156,7 @@ exports.config = {
         },
     ],
     [models_1.BlockType.SliderBlock]: exports.blockHeaderTransformer,
+    [models_1.BlockType.CompaniesBlock]: exports.blockHeaderTransformer,
     [models_1.BlockType.QuestionsBlock]: [
         {
             fields: ['title'],
@@ -301,11 +302,5 @@ exports.config = {
         },
     ],
     [models_1.BlockType.CardLayoutBlock]: exports.blockHeaderTransformer,
-    [models_1.BlockType.IconsBlock]: [
-        {
-            fields: ['title'],
-            transformer: common_1.typografTransformer,
-            parser: parseTitle,
-        },
-    ],
+    [models_1.BlockType.IconsBlock]: exports.blockHeaderTransformer,
 };

package/build/cjs/utils/cn.d.ts

@@ -1,4 +1,5 @@
 export declare const NAMESPACE = "pc-";
 export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
 export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export declare const rootCn: import("@bem-react/classname").ClassNameFormatter;
 export type CnBlock = ReturnType<typeof cn>;

package/build/cjs/utils/cn.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.cn = exports.NAMESPACE = void 0;
+exports.rootCn = exports.block = exports.cn = exports.NAMESPACE = void 0;
 const classname_1 = require("@bem-react/classname");
+const constants_1 = require("../components/constants");
 exports.NAMESPACE = 'pc-';
 exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
 exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });
+exports.rootCn = (0, exports.cn)(constants_1.UIKIT_ROOT_CLASS);

package/build/esm/blocks/Companies/Companies.css

@@ -1,24 +1,8 @@
-.pc-companies-block__title {
-  margin: 0;
-}
-
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-companies-block {
   text-align: center;
 }
-.pc-companies-block__title {
-  font-size: var(--g-text-display-2-font-size);
-  line-height: var(--g-text-display-2-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--g-text-accent-font-weight);
-}
-@media (max-width: 576px) {
-  .pc-companies-block__title {
-    font-size: var(--g-text-display-1-font-size);
-    line-height: var(--g-text-display-1-line-height);
-  }
-}
 .pc-companies-block__images {
   margin-top: 32px;
 }

package/build/esm/blocks/Companies/Companies.d.ts

@@ -1,4 +1,4 @@
 import { CompaniesBlockProps } from '../../models';
 import './Companies.css';
-export declare const CompaniesBlock: ({ title, images, animated }: CompaniesBlockProps) => JSX.Element;
+export declare const CompaniesBlock: ({ title, description, images, animated }: CompaniesBlockProps) => JSX.Element;
 export default CompaniesBlock;

package/build/esm/blocks/Companies/Companies.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Image } from '../../components';
+import { Image, Title } from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import './Companies.css';
 const b = block('companies-block');
-export const CompaniesBlock = ({ title, images, animated }) => {
+export const CompaniesBlock = ({ title, description, images, animated }) => {
     const theme = useTheme();
     const themedImages = getThemedValue(images, theme) || {};
     return (React.createElement(AnimateBlock, { className: b(), offset: 150, animate: animated },
         React.createElement("div", { className: b('content') },
-            React.createElement("h2", { className: b('title') }, title),
+            React.createElement(Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }),
             React.createElement("div", { className: b('images') },
                 React.createElement(Image, Object.assign({}, themedImages, { className: b('image') }))))));
 };

package/build/esm/blocks/Icons/Icons.d.ts

@@ -1,4 +1,4 @@
 import { IconsBlockProps } from '../../models';
 import './Icons.css';
-declare const Icons: ({ title, size, items }: IconsBlockProps) => JSX.Element;
+declare const Icons: ({ title, description, size, items }: IconsBlockProps) => JSX.Element;
 export default Icons;

package/build/esm/blocks/Icons/Icons.js

@@ -8,14 +8,14 @@ const b = block('icons-block');
 const getItemContent = (item) => (React.createElement(Fragment, null,
     React.createElement(Image, { className: b('image'), src: item.src }),
     React.createElement("p", { className: b('text') }, item.text)));
-const Icons = ({ title, size = 's', items }) => {
+const Icons = ({ title, description, size = 's', items }) => {
     const { hostname } = useContext(LocationContext);
     const handleAnalytics = useAnalytics();
     const onClick = useCallback(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
     return (React.createElement("div", { className: b({ size }) },
-        title && React.createElement(Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
+        (title || description) && (React.createElement(Title, { className: b('header'), title: title, subtitle: description, colSizes: { all: 12 } })),
         items.map((item) => {
             const itemContent = getItemContent(item);
             const { url, text } = item;

package/build/esm/blocks/Tabs/Tabs.css

@@ -1,12 +1,16 @@
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+  margin: 0;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-tabs-block__title {
+.pc-tabs-block__block-title {
   margin-bottom: 24px;
 }
-.pc-tabs-block__title_centered {
+.pc-tabs-block__block-title_centered {
   text-align: center;
 }
-.pc-tabs-block__title_centered > * {
+.pc-tabs-block__block-title_centered > * {
   margin: 0 auto;
 }
 .pc-tabs-block__tabs {
@@ -40,6 +44,9 @@ unpredictable css rules order in build */
 .pc-tabs-block__row_reverse {
   flex-direction: row-reverse;
 }
+.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
+  margin: 24px 32px 0 0;
+}
 .pc-tabs-block__image {
   width: 100%;
   height: auto;
@@ -57,13 +64,40 @@ unpredictable css rules order in build */
   margin: 12px 0 0;
   color: var(--g-color-text-secondary);
 }
+.pc-tabs-block__content {
+  display: flex;
+  flex-direction: column;
+}
+.pc-tabs-block__content_centered {
+  margin: 0 auto;
+}
 .pc-tabs-block__col_centered {
   margin: 0 auto;
 }
+.pc-tabs-block__content-wrapper_margin {
+  margin: 24px 0 0 32px;
+}
+.pc-tabs-block__content-title {
+  margin: 0 auto 12px;
+}
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+
 @media (max-width: 769px) {
+  .pc-tabs-block__content-wrapper_margin {
+    margin: 0 0 32px 0;
+  }
   .pc-tabs-block__row_reverse {
     flex-direction: column-reverse;
   }
+  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
 }
 @media (min-width: 769px) {
   .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
@@ -9,12 +9,12 @@ import Title from '../../components/Title/Title';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
+import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
-import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
 export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
-    var _a, _b;
+    var _a;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
     const theme = useTheme();
@@ -23,24 +23,11 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     const isReverse = direction === 'content-media';
     const ref = useRef(null);
     const mediaWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const mediaHeight = mediaWidth && getHeight(mediaWidth);
     const captionId = useUniqId();
-    const themedMedia = getThemedValue(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media, theme);
-    const mediaVideoHeight = mediaWidth && getHeight(mediaWidth);
-    const setVideoHeight = !(themedMedia === null || themedMedia === void 0 ? void 0 : themedMedia.image) && !(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image);
-    const [minImageHeight, setMinImageHeight] = useState((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.offsetHeight);
-    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
     let imageProps;
-    const handleImageHeight = useCallback(() => {
-        var _a;
-        setMinImageHeight((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
-    }, []);
-    const onSelectTab = (id, e) => {
-        setActiveTab(id);
-        handleImageHeight();
-        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
-    };
     if (activeTabData) {
-        const themedImage = getThemedValue(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
+        const themedImage = getThemedValue(activeTabData.image, theme);
         imageProps = themedImage && getMediaImage(themedImage);
         if (activeTabData.caption && imageProps) {
             Object.assign(imageProps, {
@@ -50,18 +37,28 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
-    const textContent = activeTabData && showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const textContent = activeTabData && showText && (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
+        React.createElement("div", { className: b('content-wrapper', {
+                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
+            }) },
+            React.createElement(Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: contentSize, links: [
+                    ...(activeTabData.link ? [activeTabData.link] : []),
+                    ...(activeTabData.links || []),
+                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        React.createElement("div", { style: { minHeight: setVideoHeight ? mediaVideoHeight : minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { ref: ref },
-            React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: setVideoHeight ? mediaVideoHeight : undefined, handleImageLoad: handleImageHeight }))))),
+        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId }, activeTabData.caption))));
+    const onSelectTab = (id, e) => {
+        setActiveTab(id);
+        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
+    };
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        React.createElement(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
+        React.createElement(Title, { title: title, subtitle: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
                 React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),

package/build/esm/components/Image/Image.d.ts

@@ -1,10 +1,9 @@
-import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler } from 'react';
 import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
-    onLoad?: ReactEventHandler<HTMLDivElement>;
     containerClassName?: string;
 }
 export interface DeviceSpecificFragmentProps extends QAProps {

package/build/esm/components/Image/Image.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useState, } from 'react';
+import React, { Fragment, useContext, useState } from 'react';
 import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { getQaAttrubutes } from '../../utils';
@@ -12,7 +12,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React
     React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -27,6 +27,6 @@ const Image = (props) => {
         mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
         tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
         src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
-        React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
+        React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 export default Image;

package/build/esm/components/ImageBase/ImageBase.d.ts

@@ -1,10 +1,9 @@
-import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler } from 'react';
 import { ImageObjectProps } from '../../models';
 export interface ImageBaseProps extends Partial<ImageObjectProps> {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
-    onLoad?: ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
 export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;

package/build/esm/components/Media/Image/Image.d.ts

@@ -4,7 +4,6 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
-    handleImageLoad?: () => void;
 }
 interface InnerImageProps {
     hasVideoFallback: boolean;

package/build/esm/components/Media/Image/Image.js

@@ -12,7 +12,7 @@ import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, handleImageLoad, } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, } = props;
     const qaAttributes = getQaAttrubutes(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = useState(0);
     const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
@@ -46,7 +46,7 @@ const Image = (props) => {
     };
     const imageOnly = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: handleImageLoad })));
+        return (React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

package/build/esm/components/Media/Media.js

@@ -8,13 +8,13 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, handleImageLoad, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, handleImageLoad: handleImageLoad }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
         }
         if (video) {
             const videoProps = {
@@ -40,7 +40,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, handleImageLoad: handleImageLoad }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -69,7 +69,6 @@ export const Media = (props) => {
         ratio,
         youtubeClassName,
         autoplay,
-        handleImageLoad,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

package/build/esm/components/RootCn/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../models';
+declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+export default RootCn;

package/build/esm/components/RootCn/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useTheme } from '../../context/theme';
+import { rootCn } from '../../utils';
+const RootCn = ({ className, children }) => {
+    const theme = useTheme();
+    return React.createElement("div", { className: rootCn({ theme }, className) }, children);
+};
+export default RootCn;

package/build/esm/components/VideoBlock/VideoBlock.d.ts

@@ -17,7 +17,6 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     height?: number;
     fullscreen?: boolean;
     autoplay?: boolean;
-    handleImageLoad?: () => void;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -37,7 +37,7 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, handleImageLoad, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
@@ -91,7 +91,7 @@ const VideoBlock = (props) => {
         return null;
     }
     return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
-        React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: handleImageLoad }),
+        React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (React.createElement("button", { title: "Play", className: b('button') },
             React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));
 };

package/build/esm/constructor-items.d.ts

@@ -4,13 +4,13 @@ export declare const blockMap: {
     "promo-features-block": (props: import("./models").PromoFeaturesProps) => JSX.Element;
     "questions-block": (props: import("./models").QuestionsProps) => JSX.Element;
     "banner-block": (props: import("./models").BannerBlockProps) => JSX.Element;
-    "companies-block": ({ title, images, animated }: import("./models").CompaniesBlockProps) => JSX.Element;
+    "companies-block": ({ title, description, images, animated }: import("./models").CompaniesBlockProps) => JSX.Element;
     "media-block": (props: import("./models").MediaBlockProps) => JSX.Element;
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
     "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
-    "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
+    "icons-block": ({ title, description, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
     "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
-import { UIKIT_ROOT_CLASS } from '../../components/constants';
+import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
@@ -10,13 +10,12 @@ import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { cn as blockOrigin, block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
+import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
-const ycr = blockOrigin(UIKIT_ROOT_CLASS);
 export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
@@ -42,7 +41,7 @@ export const Constructor = (props) => {
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement("div", { className: b(null, ycr({ theme })) },
+        React.createElement(RootCn, null,
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },

package/build/esm/index.d.ts

@@ -10,4 +10,5 @@ export * from './utils';
 export * from './schema';
 export * from './hooks';
 export * from './icons';
+export * from './navigation';
 export { BREAKPOINTS } from './constants';

package/build/esm/index.js

@@ -11,4 +11,5 @@ export * from './utils';
 export * from './schema';
 export * from './hooks';
 export * from './icons';
+export * from './navigation';
 export { BREAKPOINTS } from './constants';

package/build/esm/models/constructor-items/blocks.d.ts

@@ -154,6 +154,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
     title: string;
+    description?: string;
     images: ThemeSupporting<ImageDeviceProps>;
 }
 export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
@@ -254,6 +255,7 @@ export interface IconsBlockItemProps extends AnalyticsEventsBase {
 }
 export interface IconsBlockProps {
     title?: string;
+    description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
 }

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

@@ -1,9 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation {
-  position: sticky;
-  z-index: 98;
-  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { HeaderData, ThemedNavigationLogoData } from '../../../models';
+import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
 import './Navigation.css';
-export interface NavigationProps {
+export interface NavigationProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }

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

@@ -8,7 +8,7 @@ import DesktopNavigation from '../DesktopNavigation/DesktopNavigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import './Navigation.css';
 const b = block('navigation');
-export const Navigation = ({ data, logo }) => {
+export const Navigation = ({ data, logo, className }) => {
     const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setActiveItemId] = useState(undefined);
@@ -30,7 +30,7 @@ export const Navigation = ({ data, logo }) => {
         window.addEventListener('scroll', scrollHandler, { passive: true });
         return () => window.removeEventListener('scroll', scrollHandler);
     });
-    return (React.createElement(Grid, { className: b({ 'with-border': showBorder }) },
+    return (React.createElement(Grid, { className: b({ 'with-border': showBorder }, className) },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("nav", null,

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

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import omit from 'lodash/omit';
 import { BlockIdContext } from '../../../context/blockIdContext';
-import { InnerContext } from '../../../context/innerContext';
 import { NavigationItemType } from '../../../models';
 import { block } from '../../../utils';
+import { useNavigationItemMap } from './hooks/useNavigationItemMap';
 import './NavigationItem.css';
 const b = block('navigation-item');
 const ANALYTICS_ID = 'navigation';
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
-    const { navItemMap } = useContext(InnerContext);
+    const navItemMap = useNavigationItemMap();
     const Component = navItemMap[type];
     const componentProps = useMemo(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);

package/build/esm/navigation/components/NavigationItem/hooks/useNavigationItemMap.d.ts

@@ -0,0 +1,7 @@
+export declare const useNavigationItemMap: () => {
+    button: import("react").FC<Pick<import("../../../models").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
+    social: import("react").FC<import("../../SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../../models").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("../../../models").NavigationItemProps & import("../../../..").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../../models").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
+};

package/build/esm/navigation/components/NavigationItem/hooks/useNavigationItemMap.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { navItemMap as NavItemMapDefault } from '../../../../constructor-items';
+import { InnerContext } from '../../../../context/innerContext';
+export const useNavigationItemMap = () => {
+    const { navItemMap } = useContext(InnerContext);
+    return isEmpty(navItemMap) ? NavItemMapDefault : navItemMap;
+};

package/build/esm/navigation/components/Standalone/index.d.ts

@@ -0,0 +1,3 @@
+import { NavigationProps } from './../../components/Navigation/Navigation';
+declare const Standalone: (props: NavigationProps) => JSX.Element;
+export default Standalone;

package/build/esm/navigation/components/Standalone/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import RootCn from '../../../components/RootCn';
+import Navigation from './../../components/Navigation/Navigation';
+const Standalone = (props) => (React.createElement(RootCn, null,
+    React.createElement(Navigation, Object.assign({}, props))));
+export default Standalone;

package/build/esm/navigation/containers/Layout/Layout.css

@@ -1,10 +1,15 @@
-.layout {
+.pc-layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
-.layout__content {
+.pc-layout__content {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+}
+.pc-layout__navigation {
+  position: sticky;
+  z-index: 98;
+  top: 0;
 }