@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,99 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { HEADER_HEIGHT } from '../constants';
+import { LocaleContext } from '../../context/localeContext';
+import { MobileContext } from '../../context/mobileContext';
+import { block } from '../../utils';
+import { useMetrika } from '../../hooks/useMetrika';
+export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
+const CONTAINER_ID = 'pc-yandex-form-container';
+const b = block('yandex-form');
+const YandexForm = (props) => {
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
+    const formContainerRef = useRef(null);
+    const iframeRef = useRef();
+    const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
+    const handleMetrika = useMetrika();
+    const isMobile = useContext(MobileContext);
+    const locale = useContext(LocaleContext);
+    const updateFormIframe = useCallback((container) => {
+        const queryParams = new URLSearchParams(location.search);
+        const url = location.origin + location.pathname;
+        queryParams.set('url', url);
+        queryParams.set('iframe', '1');
+        if (locale === null || locale === void 0 ? void 0 : locale.lang) {
+            queryParams.set('lang', locale.lang);
+        }
+        queryParams.set('theme', theme || 'cloud-www');
+        if (isMobile) {
+            queryParams.set('media-type', 'mobile');
+        }
+        if (params) {
+            Object.keys(params).forEach((param) => {
+                queryParams.set(param, params[param]);
+            });
+        }
+        const src = `${yaFormOrigin}/surveys/${id}/?${queryParams}`;
+        if (iframeRef.current) {
+            iframeRef.current.src = src;
+        }
+        else {
+            iframeRef.current = document.createElement('iframe');
+            iframeRef.current.src = src;
+            iframeRef.current.id = containerId;
+            iframeRef.current.name = `form${id}`;
+            iframeRef.current.frameBorder = '0';
+            iframeRef.current.scrolling = 'no';
+            iframeRef.current.width = '100%';
+            container.appendChild(iframeRef.current);
+        }
+    }, [locale.lang, theme, isMobile, yaFormOrigin, id, containerId, params]);
+    const handleSubmit = useCallback(() => {
+        if (formContainerRef && formContainerRef.current) {
+            const { top } = formContainerRef.current.getBoundingClientRect();
+            window.scrollBy(0, top - headerHeight);
+        }
+        handleMetrika({ metrikaGoals, pixelEvents });
+        if (onSubmit) {
+            onSubmit();
+        }
+    }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
+    const handleMessage = useCallback(({ origin, data }) => {
+        if (origin !== yaFormOrigin) {
+            return;
+        }
+        try {
+            const parsed = JSON.parse(data);
+            const height = parsed['iframe-height'];
+            const { message, name } = parsed;
+            if (name !== `form${id}`) {
+                return;
+            }
+            if (iframeRef.current && height && !message) {
+                iframeRef.current.height = `${height}px`;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+            }
+            if (message === 'sent') {
+                handleSubmit();
+            }
+        }
+        catch (error) {
+            return;
+        }
+    }, [yaFormOrigin, id, onLoad, handleSubmit]);
+    const addIframe = useCallback(() => {
+        const container = formContainerRef.current;
+        if (container) {
+            updateFormIframe(container);
+            window.addEventListener('message', handleMessage);
+        }
+    }, [updateFormIframe, handleMessage]);
+    useEffect(() => {
+        addIframe();
+        // Crunch for mobile chrome in lite mode
+        // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1
+        setTimeout(() => onLoad === null || onLoad === void 0 ? void 0 : onLoad(), 1000);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [id, addIframe, handleMessage, onLoad]);
+    return React.createElement("div", { ref: formContainerRef, className: b(null, className) });
+};
+export default YandexForm;

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

@@ -0,0 +1,6 @@
+export declare const DEFAULT_THEME = "light";
+export declare const KEY: {
+    ENTER: string;
+    TAB: string;
+};
+export declare const HEADER_HEIGHT = 64;

package/build/esm/components/constants.js

@@ -0,0 +1,6 @@
+export const DEFAULT_THEME = 'light';
+export const KEY = {
+    ENTER: 'Enter',
+    TAB: 'Tab',
+};
+export const HEADER_HEIGHT = 64;

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

@@ -0,0 +1,36 @@
+export { default as Anchor } from './Anchor/Anchor';
+export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+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 BlockHeader } from './BlockHeader/BlockHeader';
+export { default as Button } from './Button/Button';
+export { default as CardBase } from './CardBase/CardBase';
+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 FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
+export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HeightCalculator } from './HeightCalculator/HeightCalculator';
+export { default as Image } from './Image/Image';
+export { default as Link } from './Link/Link';
+export { default as Links } from './Link/Links';
+export { default as Media } from './Media/Media';
+export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+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 Control } from './Control/Control';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
+export { default as Author } from './Author/Author';
+export { default as RouterLink } from './RouterLink/RouterLink';
+export { default as HTML } from './HTML/HTML';
+export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/esm/components/index.js

@@ -0,0 +1,35 @@
+export { default as Anchor } from './Anchor/Anchor';
+export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+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 BlockHeader } from './BlockHeader/BlockHeader';
+export { default as Button } from './Button/Button';
+export { default as CardBase } from './CardBase/CardBase';
+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 FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
+export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HeightCalculator } from './HeightCalculator/HeightCalculator';
+export { default as Image } from './Image/Image';
+export { default as Link } from './Link/Link';
+export { default as Links } from './Link/Links';
+export { default as Media } from './Media/Media';
+export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+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 Control } from './Control/Control';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
+export { default as Author } from './Author/Author';
+export { default as RouterLink } from './RouterLink/RouterLink';
+export { default as HTML } from './HTML/HTML';

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,52 @@
+export declare const blockMap: {
+    "slider-block": (props: import("./models").WithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
+    "simple-block": (props: import("./models").WithChildren<import("./models").SimpleBlockProps>) => 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, images, animated }: import("./models").CompaniesBlockProps) => JSX.Element;
+    "media-block": (props: import("./models").MediaBlockProps) => JSX.Element;
+    "preview-block": (props: import("./models").PreviewBlockProps) => JSX.Element;
+    "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
+    "security-block": (props: import("./models").SecurityBlockProps) => JSX.Element;
+    "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated }: import("./models").TabsBlockProps) => JSX.Element;
+    "link-table-block": ({ items, title, description, linkTheme }: import("./models").LinkTableBlockProps) => 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;
+    "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
+    "card-layout-block": ({ title, description, animated, colSizes, children, }: import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps) => JSX.Element;
+    "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
+};
+export declare const subBlockMap: {
+    divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    "tutoral-card": (props: import("./models").TutorialCardProps) => JSX.Element;
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    partner: ({ text, logo, url, border }: import("./models").PartnerProps) => JSX.Element;
+    "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
+    "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
+    "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
+    "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: import("./models").CardWithImageProps) => JSX.Element;
+    "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
+    "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
+    content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
+    quote: (props: import("./models").QuoteProps) => JSX.Element;
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    card: {
+        (props: import("./components/CardBase/CardBase").CardBaseProps): JSX.Element;
+        Header: import("react").FC<import("./models").WithChildren<import("./components/CardBase/CardBase").CardHeaderBaseProps>>;
+        Content: import("react").FC<{
+            children?: import("react").ReactNode;
+        }>;
+        Footer: import("react").FC<import("./models").WithChildren<import("./components/CardBase/CardBase").CardFooterBaseProps>>;
+    };
+};

package/build/esm/constructor-items.js

@@ -0,0 +1,49 @@
+import { BlockType, SubBlockType } from './models';
+import { Partner, PriceDetailed, MediaCard, NewsCard, TutorialCard, CardWithImage, BackgroundCard, Content, Quote, Divider, BannerCard, BasicCard, } from './sub-blocks';
+import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, } from './blocks';
+import { CardBase } from './components';
+export const blockMap = {
+    [BlockType.SliderBlock]: SliderBlock,
+    [BlockType.SimpleBlock]: SimpleBlock,
+    [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
+    [BlockType.PromoFeaturesBlock]: PromoFeaturesBlock,
+    [BlockType.QuestionsBlock]: QuestionsBlock,
+    [BlockType.BannerBlock]: BannerBlock,
+    [BlockType.CompaniesBlock]: CompaniesBlock,
+    [BlockType.MediaBlock]: MediaBlock,
+    [BlockType.PreviewBlock]: PreviewBlock,
+    [BlockType.InfoBlock]: InfoBlock,
+    [BlockType.SecurityBlock]: SecurityBlock,
+    [BlockType.TableBlock]: TableBlock,
+    [BlockType.TabsBlock]: TabsBlock,
+    [BlockType.LinkTableBlock]: LinkTableBlock,
+    [BlockType.HeaderBlock]: HeaderBlock,
+    [BlockType.IconsBlock]: IconsBlock,
+    [BlockType.HeaderSliderBlock]: HeaderSliderBlock,
+    [BlockType.CardLayoutBlock]: CardLayoutBlock,
+    [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
+};
+export const subBlockMap = {
+    [SubBlockType.Divider]: Divider,
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    [SubBlockType.TutorialCard]: TutorialCard,
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    [SubBlockType.Partner]: Partner,
+    [SubBlockType.PriceDetailed]: PriceDetailed,
+    [SubBlockType.MediaCard]: MediaCard,
+    [SubBlockType.BannerCard]: BannerCard,
+    [SubBlockType.NewsCard]: NewsCard,
+    [SubBlockType.CardWithImage]: CardWithImage,
+    [SubBlockType.BackgroundCard]: BackgroundCard,
+    [SubBlockType.BasicCard]: BasicCard,
+    [SubBlockType.Content]: Content,
+    [SubBlockType.Quote]: Quote,
+    /**
+     * @deprecated Will be removed, use basic card instead
+     */
+    [SubBlockType.Card]: CardBase,
+};

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 { Block, 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: Block;
+    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, { useState, useEffect, useCallback } from 'react';
+import { Spin } from '@gravity-ui/uikit';
+import blockCn from 'bem-cn-lite';
+import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
+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,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'Loadable';
+export default registerKeyset({ en, ru }, COMPONENT);

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,139 @@
+@charset "UTF-8";
+@import '~@doc-tools/transform/dist/css/yfm.css';
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --header-height: 64px;
+}
+
+.yc-root {
+  --yc-text-accent-font-weight: 500;
+  --pc-transparent: rgba(255, 255, 255, 0);
+  --pc-border-radius: 24px;
+  --pc-image-padding: 4px;
+  --pc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --pc-color-line-generic-active-solid: #b3b3b3;
+  --pc-color-base-float-hover: var(--yc-color-base-float);
+  --pc-monochrome-button: #262626;
+  --pc-monochrome-button-hover: #393939;
+  --pc-text-header-color: var(--yc-color-text-primary);
+}
+.yc-root.yc-root_theme_dark {
+  --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+  --pc-color-line-generic-active-solid: #6c6c70;
+  --pc-color-base-float-hover: var(--yc-color-base-float-hover);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.yfm_constructor {
+  font-family: var(--yc-font-family-sans);
+}
+.yfm_constructor code,
+.yfm_constructor kbd,
+.yfm_constructor pre {
+  font-family: var(--yc-font-family-monospace);
+}
+.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(--yc-color-text-primary);
+}
+.yfm_constructor.yfm_constructor_notice li,
+.yfm_constructor.yfm_constructor_notice p {
+  color: var(--yc-color-text-secondary);
+}
+.yfm_constructor.yfm_constructor p,
+.yfm_constructor.yfm_constructor li {
+  margin: 0 0 12px;
+}
+.yfm_constructor.yfm_constructor p strong {
+  font-weight: 500;
+}
+
+.yfm_constructor_theme_dark p {
+  color: var(--yc-color-text-light-primary);
+}
+.yfm_constructor_footnote_text p, .yfm_constructor_footnote_page p {
+  opacity: 0.5;
+}
+.yfm_constructor_footnote_text p {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.yfm_constructor_footnote_page p {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+  display: inline;
+}
+.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(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .yfm_constructor a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.yfm_constructor a:hover, .yfm_constructor a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+
+.yfm_constructor_table table {
+  border: 0;
+  table-layout: fixed;
+}
+.yfm_constructor_table thead,
+.yfm_constructor_table tr {
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+.yfm_constructor_table tbody tr {
+  border-top: 1px solid var(--yc-color-line-generic);
+}
+.yfm_constructor_table td,
+.yfm_constructor_table th {
+  min-width: 120px;
+  width: 120px;
+  box-sizing: content-box;
+  white-space: inherit !important; /* stylelint-disable-line declaration-no-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; /* stylelint-disable-line declaration-no-important */
+}
+
+.pc-page-constructor {
+  font-feature-settings: "liga", "kern", "pnum" on, "lnum" on, "ss03" on;
+  margin-top: 0;
+  background-color: var(--yc-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,13 @@
+import React from 'react';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
+import './PageConstructor.css';
+export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
+export interface PageConstructorProps {
+    content?: PageContent;
+    shouldRenderBlock?: ShouldRenderBlock;
+    custom?: CustomConfig;
+    renderMenu?: () => React.ReactNode;
+}
+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,52 @@
+import { __rest } from "tslib";
+import React, { useContext, useMemo } from 'react';
+import { HeaderBlockTypes, BlockTypes, } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
+import { Grid } from '../../grid';
+import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
+import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getThemedValue, getCustomItems, } from '../../utils';
+import { AnimateContext } from '../../context/animateContext';
+import { InnerContext } from '../../context/innerContext';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { ConstructorRow } from './components/ConstructorRow';
+import { ConstructorFootnotes } from './components/ConstructorFootnotes';
+import { ConstructorHeader } from './components/ConstructorItem';
+import { ConstructorBlocks } from './components/ConstructorBlocks';
+import './PageConstructor.css';
+const b = cnBlock('page-constructor');
+export const Constructor = (props) => {
+    const { context, headerBlockTypes } = useMemo(() => {
+        var _a;
+        return ({
+            context: {
+                blockTypes: [...BlockTypes, ...getCustomBlockTypes(props.custom)],
+                itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(props.custom)),
+                loadables: (_a = props === null || props === void 0 ? void 0 : props.custom) === null || _a === void 0 ? void 0 : _a.loadable,
+            },
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(props.custom)],
+        });
+    }, [props.custom]);
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, } = props;
+    const hasFootnotes = footnotes.length > 0;
+    const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
+    const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
+    const restBlocks = blocks === null || blocks === void 0 ? void 0 : blocks.filter((block) => !isHeaderBlock(block));
+    const themedBackground = getThemedValue(background, theme);
+    return (React.createElement(InnerContext.Provider, { value: context },
+        React.createElement("div", { className: b() },
+            React.createElement("div", { className: b('wrapper') },
+                React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') })),
+                renderMenu && renderMenu(),
+                header && React.createElement(ConstructorHeader, { data: header }),
+                React.createElement(Grid, null,
+                    restBlocks && (React.createElement(ConstructorRow, null,
+                        React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                    hasFootnotes && (React.createElement(ConstructorRow, null,
+                        React.createElement(ConstructorFootnotes, { items: footnotes }))))))));
+};
+export const PageConstructor = (props) => {
+    const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
+    return (React.createElement(AnimateContext.Provider, { value: { animated } },
+        React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
+};

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

@@ -0,0 +1,17 @@
+import { MetrikaContextProps } from '../../context/metrikaContext';
+import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
+import { SSRContextProps } from '../../context/ssrContext';
+import { LocaleContextProps } from '../../context/localeContext';
+import { LocationContextProps } from '../../context/locationContext';
+import { ConstructorTheme } from '../../context/theme/ThemeValueContext';
+import { WithChildren } from '../../models';
+export interface PageConstructorProviderProps {
+    isMobile?: boolean;
+    locale?: LocaleContextProps;
+    location?: LocationContextProps;
+    metrika?: MetrikaContextProps;
+    ssrConfig?: SSRContextProps;
+    theme?: ConstructorTheme;
+    projectSettings?: ProjectSettingsContextProps;
+}
+export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

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

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import { MetrikaContext } from '../../context/metrikaContext';
+import { MobileContext } from '../../context/mobileContext';
+import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
+import { SSRContext } from '../../context/ssrContext';
+import { LocaleContext } from '../../context/localeContext';
+import { LocationContext } from '../../context/locationContext';
+import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { DEFAULT_THEME } from '../../components/constants';
+export const PageConstructorProvider = (props) => {
+    const { isMobile, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
+    /* eslint-disable react/jsx-key */
+    const context = [
+        React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
+        React.createElement(ProjectSettingsContext.Provider, { value: projectSettings }),
+        React.createElement(LocaleContext.Provider, { value: locale }),
+        React.createElement(LocationContext.Provider, { value: location }),
+        React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
+        React.createElement(MetrikaContext.Provider, { value: metrika }),
+        React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
+    ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
+    /* eslint-enable react/jsx-key */
+    return React.createElement(Fragment, null, context);
+};