@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/components/YandexForm/schema.d.ts

@@ -0,0 +1,16 @@
+export declare const YandexFormProps: {
+    type: string;
+    required: string[];
+    properties: {
+        id: {
+            type: string;
+        };
+        containerId: {
+            type: string;
+        };
+        type: {};
+        when: {
+            type: string;
+        };
+    };
+};

package/build/esm/components/YandexForm/schema.js

@@ -0,0 +1,10 @@
+import { BaseProps } from '../../schema/validators/common';
+export const YandexFormProps = {
+    type: 'object',
+    required: ['id'],
+    properties: Object.assign(Object.assign({}, BaseProps), { id: {
+            type: 'string',
+        }, containerId: {
+            type: 'string',
+        } }),
+};

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

@@ -0,0 +1,4 @@
+import { Theme } from '../models';
+export declare const DEFAULT_THEME = Theme.Light;
+export declare const UIKIT_ROOT_CLASS = "g-root";
+export declare const HEADER_HEIGHT = 64;

package/build/esm/components/constants.js

@@ -0,0 +1,4 @@
+import { Theme } from '../models';
+export const DEFAULT_THEME = Theme.Light;
+export const UIKIT_ROOT_CLASS = 'g-root';
+export const HEADER_HEIGHT = 64;

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

@@ -0,0 +1,44 @@
+export { default as Anchor } from './Anchor/Anchor';
+export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+export { default as Author } from './Author/Author';
+export { default as BackgroundImage } from './BackgroundImage/BackgroundImage';
+export { default as BackgroundMedia } from './BackgroundMedia/BackgroundMedia';
+export { default as BackLink } from './BackLink/BackLink';
+export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
+export { default as BlockBase } from './BlockBase/BlockBase';
+export { default as Button } from './Button/Button';
+export { default as Buttons } from './Buttons/Buttons';
+export { default as BrandFooter } from './BrandFooter/BrandFooter';
+export { default as CardBase } from './CardBase/CardBase';
+export { default as ContentList } from './ContentList/ContentList';
+export { default as Control } from './Control/Control';
+export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
+export { default as FileLink } from './FileLink/FileLink';
+export { default as Foldable } from './Foldable/Foldable';
+export { default as FullscreenImage } from './FullscreenImage/FullscreenImage';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
+export { default as FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
+export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HTML } from './HTML/HTML';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
+export { default as Image } from './Image/Image';
+export { default as ImageBase } from './ImageBase/ImageBase';
+export { default as InnerForm } from './InnerForm/InnerForm';
+export { default as Link } from './Link/Link';
+export { default as Links } from './Links/Links';
+export { default as Media } from './Media/Media';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
+export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+export { default as RouterLink } from './RouterLink/RouterLink';
+export { default as Table } from './Table/Table';
+export { default as Title } from './Title/Title';
+export { default as ToggleArrow } from './ToggleArrow/ToggleArrow';
+export { default as UnpublishedLabel } from './UnpublishedLabel/UnpublishedLabel';
+export { default as VideoBlock } from './VideoBlock/VideoBlock';
+export { default as YFMWrapper } from './YFMWrapper/YFMWrapper';
+export { default as YandexForm } from './YandexForm/YandexForm';
+export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll';
+export type { RouterLinkProps } from './RouterLink/RouterLink';
+export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/esm/components/index.js

@@ -0,0 +1,42 @@
+export { default as Anchor } from './Anchor/Anchor';
+export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+export { default as Author } from './Author/Author';
+export { default as BackgroundImage } from './BackgroundImage/BackgroundImage';
+export { default as BackgroundMedia } from './BackgroundMedia/BackgroundMedia';
+export { default as BackLink } from './BackLink/BackLink';
+export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
+export { default as BlockBase } from './BlockBase/BlockBase';
+export { default as Button } from './Button/Button';
+export { default as Buttons } from './Buttons/Buttons';
+export { default as BrandFooter } from './BrandFooter/BrandFooter';
+export { default as CardBase } from './CardBase/CardBase';
+export { default as ContentList } from './ContentList/ContentList';
+export { default as Control } from './Control/Control';
+export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
+export { default as FileLink } from './FileLink/FileLink';
+export { default as Foldable } from './Foldable/Foldable';
+export { default as FullscreenImage } from './FullscreenImage/FullscreenImage';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
+export { default as FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
+export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HTML } from './HTML/HTML';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
+export { default as Image } from './Image/Image';
+export { default as ImageBase } from './ImageBase/ImageBase';
+export { default as InnerForm } from './InnerForm/InnerForm';
+export { default as Link } from './Link/Link';
+export { default as Links } from './Links/Links';
+export { default as Media } from './Media/Media';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
+export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+export { default as RouterLink } from './RouterLink/RouterLink';
+export { default as Table } from './Table/Table';
+export { default as Title } from './Title/Title';
+export { default as ToggleArrow } from './ToggleArrow/ToggleArrow';
+export { default as UnpublishedLabel } from './UnpublishedLabel/UnpublishedLabel';
+export { default as VideoBlock } from './VideoBlock/VideoBlock';
+export { default as YFMWrapper } from './YFMWrapper/YFMWrapper';
+export { default as YandexForm } from './YandexForm/YandexForm';
+export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll';

package/build/esm/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};

package/build/esm/constants.js

@@ -0,0 +1,7 @@
+export const BREAKPOINTS = {
+    xs: 0,
+    sm: 577,
+    md: 769,
+    lg: 1081,
+    xl: 1185,
+};

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

@@ -0,0 +1,51 @@
+export declare const blockMap: {
+    "slider-block": (props: import("react").PropsWithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
+    "extended-features-block": ({ title, description, items, colSizes, animated, }: import("./models").ExtendedFeaturesProps) => JSX.Element;
+    "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, 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("react").PropsWithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
+    "icons-block": ({ title, description, size, colSizes, 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;
+    "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
+    "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
+    "filter-block": import("react").FC<import("./models").FilterBlockProps>;
+    "form-block": import("react").FC<import("./models").FormBlockProps>;
+    "marquee-links-block": ({ title, description, textAlign, speed, items, }: import("./models").MarqueeLinksBlockProps) => JSX.Element | null;
+    "solutions-block": () => JSX.Element;
+    "events-feed-block": ({ image, title }: import("./models").EventsFeedBlockProps) => JSX.Element;
+    "press-releases-block": ({ title }: import("./models").PressReleasesBlockProps) => JSX.Element;
+    "link-table-block": ({ title, items }: import("./models").LinkTableBlockProps) => JSX.Element;
+    "services-block": ({ title, serviceLinkType }: import("./models").ServicesBlockProps) => JSX.Element;
+    "quotes-block": ({ theme: localTheme, items, background, backgroundColor, }: import("./models").QuotesBlockProps) => JSX.Element;
+    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
+};
+export declare const subBlockMap: {
+    divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
+    "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
+    "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
+    "layout-item": ({ title, afterTitle, rightSpace, content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
+    "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
+    "basic-card": import("react").MemoExoticComponent<(props: import("./models").BasicCardProps) => JSX.Element>;
+    content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
+    quote: (props: import("./models").QuoteProps) => JSX.Element;
+    "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
+    "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
+    "content-layout-card": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
+    card: ({ header, text, service, ...props }: import("./models").CardProps) => JSX.Element;
+};
+export declare const navItemMap: {
+    button: import("react").FC<Pick<import("./navigation").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("./navigation").NavigationItemProps & import("./models").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+};

package/build/esm/constructor-items.js

@@ -0,0 +1,58 @@
+import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, EventsFeedBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, LinkTableBlock, MapBlock, MarqueeLinksBlock, MediaBlock, PressReleasesBlock, PromoFeaturesBlock, QuestionsBlock, QuotesBlock, ServicesBlock, ShareBlock, SliderBlock, SolutionsBlock, TableBlock, TabsBlock, } from './blocks';
+import { SliderNewBlock } from './blocks/unstable';
+import { BlockType, NavigationItemType, SubBlockType } from './models';
+import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
+import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
+import { BackgroundCard, BannerCard, BasicCard, Card, Content, ContentLayoutCard, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
+export const blockMap = {
+    [BlockType.SliderBlock]: SliderBlock,
+    [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
+    [BlockType.PromoFeaturesBlock]: PromoFeaturesBlock,
+    [BlockType.QuestionsBlock]: QuestionsBlock,
+    [BlockType.BannerBlock]: BannerBlock,
+    [BlockType.CompaniesBlock]: CompaniesBlock,
+    [BlockType.MediaBlock]: MediaBlock,
+    [BlockType.InfoBlock]: InfoBlock,
+    [BlockType.TableBlock]: TableBlock,
+    [BlockType.TabsBlock]: TabsBlock,
+    [BlockType.HeaderBlock]: HeaderBlock,
+    [BlockType.IconsBlock]: IconsBlock,
+    [BlockType.HeaderSliderBlock]: HeaderSliderBlock,
+    [BlockType.CardLayoutBlock]: CardLayoutBlock,
+    [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
+    [BlockType.ShareBlock]: ShareBlock,
+    [BlockType.MapBlock]: MapBlock,
+    [BlockType.FilterBlock]: FilterBlock,
+    [BlockType.FormBlock]: FormBlock,
+    [BlockType.MarqueeLinksBlock]: MarqueeLinksBlock,
+    [BlockType.SolutionsBlock]: SolutionsBlock,
+    [BlockType.EventsFeedBlock]: EventsFeedBlock,
+    [BlockType.PressReleasesBlock]: PressReleasesBlock,
+    [BlockType.LinkTableBlock]: LinkTableBlock,
+    [BlockType.ServicesBlock]: ServicesBlock,
+    [BlockType.QuotesBlock]: QuotesBlock,
+    // unstable
+    [BlockType.SliderNewBlock]: SliderNewBlock,
+};
+export const subBlockMap = {
+    [SubBlockType.Divider]: Divider,
+    [SubBlockType.PriceDetailed]: PriceDetailed,
+    [SubBlockType.MediaCard]: MediaCard,
+    [SubBlockType.BannerCard]: BannerCard,
+    [SubBlockType.LayoutItem]: LayoutItem,
+    [SubBlockType.BackgroundCard]: BackgroundCard,
+    [SubBlockType.BasicCard]: BasicCard,
+    [SubBlockType.Content]: Content,
+    [SubBlockType.Quote]: Quote,
+    [SubBlockType.PriceCard]: PriceCard,
+    [SubBlockType.ImageCard]: ImageCard,
+    [SubBlockType.ContentLayoutCard]: ContentLayoutCard,
+    [SubBlockType.Card]: Card,
+};
+export const navItemMap = {
+    [NavigationItemType.Button]: NavigationButton,
+    [NavigationItemType.Social]: SocialIcon,
+    [NavigationItemType.Dropdown]: NavigationDropdown,
+    [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
+};

package/build/esm/containers/Loadable/Loadable.css

@@ -0,0 +1,4 @@
+.pc-loadable-block__loader {
+  padding: 20px;
+  text-align: center;
+}

package/build/esm/containers/Loadable/Loadable.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { ConstructorBlock, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
+import './Loadable.css';
+export interface LoadableState {
+    loading: boolean;
+    error: boolean;
+    data?: LoadableData;
+}
+export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
+    Component: CustomItem;
+    ChildComponent: CustomItem;
+    block: ConstructorBlock;
+    blockKey: string;
+    fetch: FetchLoadableData;
+}
+declare const Loadable: (props: LoadableComponentsProps) => JSX.Element;
+export default Loadable;

package/build/esm/containers/Loadable/Loadable.js

@@ -0,0 +1,44 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Spin } from '@gravity-ui/uikit';
+import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
+import { block as blockCn } from '../../utils/cn';
+import { i18n } from './i18n';
+import './Loadable.css';
+const b = blockCn('loadable-block');
+const initData = {
+    loading: false,
+    error: false,
+};
+const Loadable = (props) => {
+    const { Component, ChildComponent, fetch, block, blockKey, serviceId, params } = props;
+    const [dataState, setDataState] = useState(initData);
+    const [refetchIndex, setRefetchIndex] = useState(0);
+    const onTryAgain = useCallback(() => {
+        setRefetchIndex(refetchIndex + 1);
+    }, [refetchIndex]);
+    useEffect(() => {
+        async function processData() {
+            setDataState({ loading: true, error: false });
+            let data, error;
+            try {
+                data = await fetch(Object.assign({ blockKey, serviceId }, (params !== null && params !== void 0 ? params : {})));
+                error = false;
+                setDataState({ data, loading: false, error });
+            }
+            catch (ex) {
+                error = true;
+                setDataState({ loading: false, error });
+            }
+        }
+        processData();
+    }, [refetchIndex, fetch, blockKey, serviceId, params]);
+    const { error, loading, data } = dataState;
+    if (loading) {
+        return (React.createElement("div", { className: b('loader') },
+            React.createElement(Spin, { size: "xl" })));
+    }
+    return (React.createElement(ErrorWrapper, { isError: error, text: i18n('loadable-load-error'), buttonText: i18n('loadable-try-again'), handler: onTryAgain },
+        React.createElement(Component, Object.assign({}, block), data &&
+            (Array.isArray(data) ? (data.map((componentData, index) => (React.createElement(ChildComponent, Object.assign({ key: componentData.id || index }, componentData))))) : (React.createElement(ChildComponent, Object.assign({}, data)))))));
+};
+export default Loadable;

package/build/esm/containers/Loadable/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "loadable-load-error": "Error occured",
+  "loadable-try-again": "Try again"
+}

package/build/esm/containers/Loadable/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "loadable-load-error" | "loadable-try-again", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/containers/Loadable/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Loadable`);

package/build/esm/containers/Loadable/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "loadable-load-error": "Произошла ошибка",
+  "loadable-try-again": "Повторить"
+}

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -0,0 +1,204 @@
+@charset "UTF-8";
+@import '~@diplodoc/transform/dist/css/yfm.css';
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --header-height: 64px;
+}
+
+.g-root {
+  --pc-color-telegram: #51a4db;
+  --pc-color-facebook: #4968ad;
+  --pc-color-twitter: #4aa0eb;
+  --pc-color-vk: #436eab;
+  --pc-color-youtube: #eb3323;
+  --pc-color-github: #25292e;
+  --pc-color-rss: #f29c39;
+  --pc-color-linkedin: #0a66c2;
+  --g-text-accent-font-weight: 600;
+  --pc-text-display-5-font-size: 64px;
+  --pc-text-display-5-line-height: 68px;
+  --pc-first-block-indent: 48px;
+  --pc-first-block-mobile-indent: 32px;
+  --pc-color-service-tag-yellow: #fff1b8;
+  --pc-color-service-tag-blue: #d6e9fd;
+  --pc-transparent: rgba(255, 255, 255, 0);
+  --pc-border-radius: 24px;
+  --pc-image-padding: 4px;
+  --pc-color-sfx-shadow: var(--g-color-base-simple-hover);
+  --pc-color-line-generic-active-solid: #b3b3b3;
+  --pc-color-base-float-hover: var(--g-color-base-float);
+  --pc-monochrome-button-background-color: #262626;
+  --pc-monochrome-button-background-color-hover: #393939;
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
+  --pc-text-header-color: var(--g-color-text-primary);
+  --pc-media-card-meta-info-color: var(--g-color-text-secondary);
+  --pc-tab-item-color: var(--g-color-text-primary);
+  --pc-tab-item-background-color: var(--g-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--g-color-base-generic-hover);
+  --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
+  --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
+  --pc-selected-tab-item-background-color-hover: var(
+      --pc-monochrome-button-background-color-hover
+  );
+  --pc-color-line-focus-light: var(--g-color-text-brand);
+  --pc-color-line-focus-dark: var(--g-color-text-light-primary);
+}
+.g-root_theme_light {
+  --pc-color-base-silver: #eff2f8;
+  --pc-color-base-gold: #ffdb4d;
+  --pc-color-base-asphalt: #313538;
+  --pc-color-base-copper: #ffe6c4;
+  --g-color-line-focus: var(--pc-color-line-focus-light);
+}
+.g-root_theme_dark {
+  --pc-color-base-silver: #bcc0c4;
+  --pc-color-base-gold: #ffde5d;
+  --pc-color-base-asphalt: #474d52;
+  --pc-color-base-copper: #7f7262;
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
+.g-root.g-root_theme_dark {
+  --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
+  --pc-color-line-generic-active-solid: #6c6c70;
+  --pc-color-base-float-hover: var(--g-color-base-float-hover);
+  --pc-monochrome-button-background-color: #ffffff;
+  --pc-monochrome-button-background-color-hover: #e9e9e9;
+  --pc-monochrome-button-color: var(--g-color-text-dark-primary);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.yfm_constructor {
+  font-family: var(--g-font-family-sans, var(--yfm-font-family-sans));
+  color: var(--g-color-text-primary);
+}
+.yfm_constructor code,
+.yfm_constructor kbd,
+.yfm_constructor pre {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-primary);
+}
+.yfm_constructor.yfm_constructor h1,
+.yfm_constructor.yfm_constructor h2,
+.yfm_constructor.yfm_constructor h3,
+.yfm_constructor.yfm_constructor h4,
+.yfm_constructor.yfm_constructor h5,
+.yfm_constructor.yfm_constructor h6,
+.yfm_constructor.yfm_constructor span,
+.yfm_constructor.yfm_constructor p,
+.yfm_constructor.yfm_constructor li {
+  color: var(--g-color-text-primary);
+}
+.yfm_constructor.yfm_constructor_notice li,
+.yfm_constructor.yfm_constructor_notice p {
+  color: var(--g-color-text-secondary);
+}
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.yfm_constructor.yfm_constructor ul,
+.yfm_constructor.yfm_constructor ol,
+.yfm_constructor.yfm_constructor li,
+.yfm_constructor.yfm_constructor p {
+  margin: 0 0 12px;
+}
+.yfm_constructor.yfm_constructor p strong {
+  font-weight: var(--g-text-accent-font-weight);
+}
+.yfm_constructor.yfm_constructor_size_s ul,
+.yfm_constructor.yfm_constructor_size_s ol,
+.yfm_constructor.yfm_constructor_size_s li,
+.yfm_constructor.yfm_constructor_size_s p {
+  margin-bottom: 8px;
+}
+.yfm_constructor.yfm_constructor_theme_dark p {
+  color: var(--g-color-text-light-primary);
+}
+
+.yfm_constructor_list_style ul {
+  padding-left: 20px;
+}
+.yfm_constructor_list_style_dash ul {
+  list-style-type: none;
+  position: relative;
+}
+.yfm_constructor_list_style_dash ul li:before {
+  content: "—";
+  position: absolute;
+  margin-left: -20px;
+}
+.yfm_constructor a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.utilityfocus .yfm_constructor a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.yfm_constructor a:hover, .yfm_constructor a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.yfm_constructor table {
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
+}
+.yfm_constructor thead,
+.yfm_constructor table tr:nth-child(2n) {
+  background-color: var(--g-color-base-generic);
+}
+
+.yfm_constructor_table {
+  /* stylelint-enable declaration-no-important */
+}
+.yfm_constructor_table table {
+  border: 0;
+  table-layout: fixed;
+}
+.yfm_constructor_table thead,
+.yfm_constructor_table tr {
+  /* stylelint-disable declaration-no-important */
+  background-color: transparent !important;
+}
+.yfm_constructor_table tbody tr {
+  border-top: 1px solid var(--g-color-line-generic);
+}
+.yfm_constructor_table td,
+.yfm_constructor_table th {
+  min-width: 120px;
+  width: 120px;
+  box-sizing: content-box;
+  white-space: inherit !important;
+}
+.yfm_constructor_table td:first-child,
+.yfm_constructor_table th:first-child {
+  min-width: 172px;
+  width: 172px;
+}
+.yfm_constructor_table th {
+  text-align: left !important;
+}
+
+.pc-page-constructor {
+  font-feature-settings: "liga", "kern", "pnum" on, "lnum" on, "ss03" on;
+  margin-top: 0;
+  background-color: var(--g-color-base-background);
+  z-index: 10;
+}
+.pc-page-constructor__wrapper {
+  position: relative;
+}
+.pc-page-constructor__background.pc-page-constructor__background {
+  top: calc(-1 * var(--header-height));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import '@diplodoc/transform/dist/js/yfm';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
+import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from '../../models';
+import './PageConstructor.css';
+export type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
+export type NavItemMap = typeof navItemMap & CustomItems;
+export interface PageConstructorProps {
+    content?: PageContent;
+    shouldRenderBlock?: ShouldRenderBlock;
+    custom?: CustomConfig;
+    renderMenu?: () => React.ReactNode;
+    navigation?: NavigationData;
+    isBranded?: boolean;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
+}
+export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
+export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

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

@@ -0,0 +1,62 @@
+import { __rest } from "tslib";
+import React, { useContext, useMemo } from 'react';
+import '@diplodoc/transform/dist/js/yfm';
+import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
+import BrandFooter from '../../components/BrandFooter/BrandFooter';
+import RootCn from '../../components/RootCn';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
+import { AnimateContext } from '../../context/animateContext';
+import { InnerContext } from '../../context/innerContext';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
+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 { 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');
+export const Constructor = (props) => {
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
+    const { context } = useMemo(() => ({
+        context: {
+            blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
+            subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],
+            navigationBlockTypes: [
+                ...NavigationItemTypes,
+                ...getCustomTypes(['navigation'], custom),
+            ],
+            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(['blocks', 'headers', 'subBlocks'], custom)),
+            navItemMap: Object.assign(Object.assign({}, navItemMap), getCustomItems(['navigation'], custom)),
+            loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
+            shouldRenderBlock,
+            customization: {
+                decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
+            },
+            microdata,
+        },
+    }), [custom, shouldRenderBlock, microdata]);
+    const theme = useTheme();
+    const header = getHeaderBlock(blocks, context.headerBlockTypes);
+    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
+    const themedBackground = getThemedValue(background, theme);
+    return (React.createElement(InnerContext.Provider, { value: context },
+        React.createElement(RootCn, { className: b() },
+            React.createElement("div", { className: b('wrapper') },
+                themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
+                React.createElement(Layout, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && (React.createElement(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })),
+                    React.createElement(Grid, null, restBlocks && (React.createElement(ConstructorRow, null,
+                        React.createElement(ConstructorBlocks, { items: restBlocks }))))),
+                isBranded && React.createElement(BrandFooter, null)))));
+};
+export const PageConstructor = (props) => {
+    const { isAnimationEnabled = true } = useContext(ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = __rest(props, ["content"]);
+    return (React.createElement(AnimateContext.Provider, { value: { animated } },
+        React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
+};