@gravity-ui/page-constructor 4.33.0 → 4.34.0

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

@@ -3,8 +3,8 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
-import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
+import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -23,7 +23,8 @@ export declare enum BlockType {
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
     MapBlock = "map-block",
-    FilterBlock = "filter-block"
+    FilterBlock = "filter-block",
+    FormBlock = "form-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -297,6 +298,29 @@ export interface ShareBlockProps {
     items: PCShareSocialNetwork[];
     title?: string;
 }
+export declare enum FormBlockDataTypes {
+    YANDEX = "yandex",
+    HUBSPOT = "hubspot"
+}
+export declare enum FormBlockDirection {
+    FormContent = "form-content",
+    ContentForm = "content-form",
+    Center = "center"
+}
+export interface FormBlockYandexData {
+    yandex: YandexFormProps;
+}
+export interface FormBlockHubspotData {
+    hubspot: HubspotFormProps;
+}
+export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
+export interface FormBlockProps {
+    formData: FormBlockData;
+    title?: string;
+    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
+    direction?: FormBlockDirection;
+    background?: BackgroundImageProps;
+}
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
 } & HeaderBlockProps;
@@ -351,6 +375,9 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
+export type FormBlockModel = {
+    type: BlockType.FormBlock;
+} & FormBlockProps;
+type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel | FormBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/cjs/models/constructor-items/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
+exports.FormBlockDirection = exports.FormBlockDataTypes = exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
 var BlockType;
 (function (BlockType) {
     BlockType["PromoFeaturesBlock"] = "promo-features-block";
@@ -21,6 +21,7 @@ var BlockType;
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
     BlockType["FilterBlock"] = "filter-block";
+    BlockType["FormBlock"] = "form-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];
@@ -44,3 +45,14 @@ var PCShareSocialNetwork;
     PCShareSocialNetwork["Facebook"] = "facebook";
     PCShareSocialNetwork["LinkedIn"] = "linkedin";
 })(PCShareSocialNetwork = exports.PCShareSocialNetwork || (exports.PCShareSocialNetwork = {}));
+var FormBlockDataTypes;
+(function (FormBlockDataTypes) {
+    FormBlockDataTypes["YANDEX"] = "yandex";
+    FormBlockDataTypes["HUBSPOT"] = "hubspot";
+})(FormBlockDataTypes = exports.FormBlockDataTypes || (exports.FormBlockDataTypes = {}));
+var FormBlockDirection;
+(function (FormBlockDirection) {
+    FormBlockDirection["FormContent"] = "form-content";
+    FormBlockDirection["ContentForm"] = "content-form";
+    FormBlockDirection["Center"] = "center";
+})(FormBlockDirection = exports.FormBlockDirection || (exports.FormBlockDirection = {}));

package/build/cjs/models/constructor-items/common.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
-import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -340,4 +340,20 @@ export interface TitleProps {
     title?: TitleItemProps | string;
     subtitle?: string;
 }
+export interface YandexFormProps extends AnalyticsEventsBase {
+    id: number | string;
+    containerId?: string;
+    theme?: string;
+    className?: string;
+    headerHeight?: number;
+    customFormOrigin?: string;
+    customFormSection?: string;
+    params?: {
+        [key: string]: string;
+    };
+    onSubmit?: () => void;
+    onLoad?: () => void;
+    metrikaGoals?: string | string[];
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
+}
 export {};

package/build/cjs/models/guards.d.ts

@@ -1,4 +1,6 @@
-import { Block, ConstructorItem } from './';
+import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
 import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
 export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
+export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
+export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;

package/build/cjs/models/guards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNewMetrikaFormat = exports.isBlock = void 0;
+exports.isHubspotDataForm = exports.isYandexDataForm = exports.isNewMetrikaFormat = exports.isBlock = void 0;
 const _1 = require("./");
 function isBlock(block) {
     return block.type in _1.BlockTypes;
@@ -10,3 +10,11 @@ function isNewMetrikaFormat(metrika) {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
 exports.isNewMetrikaFormat = isNewMetrikaFormat;
+function isYandexDataForm(data) {
+    return Boolean(data.yandex);
+}
+exports.isYandexDataForm = isYandexDataForm;
+function isHubspotDataForm(data) {
+    return Boolean(data.hubspot);
+}
+exports.isHubspotDataForm = isHubspotDataForm;

package/build/cjs/schema/constants.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.constructorCardSchemaNames = exports.constructorBlockSchemaNames = exports.cardSchemas = exports.blockSchemas = void 0;
 const blocks_1 = require("./validators/blocks");
 const sub_blocks_1 = require("./validators/sub-blocks");
-exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock);
+exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FormBlock);
 exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard);
 exports.constructorBlockSchemaNames = [
     'divider',
@@ -30,6 +30,7 @@ exports.constructorBlockSchemaNames = [
     'content-layout-block',
     'share-block',
     'filter-block',
+    'form-block',
 ];
 exports.constructorCardSchemaNames = [
     'media-card',

package/build/cjs/schema/validators/blocks.d.ts

@@ -16,3 +16,4 @@ export * from '../../blocks/CardLayout/schema';
 export * from '../../blocks/ContentLayout/schema';
 export * from '../../blocks/Share/schema';
 export * from '../../blocks/FilterBlock/schema';
+export * from '../../blocks/Form/schema';

package/build/cjs/schema/validators/blocks.js

@@ -19,3 +19,4 @@ tslib_1.__exportStar(require("../../blocks/CardLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/ContentLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/Share/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/FilterBlock/schema"), exports);
+tslib_1.__exportStar(require("../../blocks/Form/schema"), exports);

package/build/cjs/sub-blocks/HubspotForm/schema.d.ts

@@ -0,0 +1,22 @@
+export declare const HubspotFormProps: {
+    type: string;
+    required: string[];
+    properties: {
+        region: {
+            type: string;
+        };
+        portalId: {
+            type: string;
+        };
+        formId: {
+            type: string;
+        };
+        formInstanceId: {
+            type: string;
+        };
+        type: {};
+        when: {
+            type: string;
+        };
+    };
+};

package/build/cjs/sub-blocks/HubspotForm/schema.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HubspotFormProps = void 0;
+const common_1 = require("../../schema/validators/common");
+exports.HubspotFormProps = {
+    type: 'object',
+    required: ['portalId', 'formId'],
+    properties: Object.assign(Object.assign({}, common_1.BaseProps), { region: {
+            type: 'string',
+        }, portalId: {
+            type: 'string',
+        }, formId: {
+            type: 'string',
+        }, formInstanceId: {
+            type: 'string',
+        } }),
+};

package/build/esm/blocks/Form/Form.css

@@ -0,0 +1,136 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-form-block {
+  border-radius: 32px;
+  position: relative;
+}
+.pc-form-block__title {
+  margin: 0 0 24px 10px;
+}
+.pc-form-block__title_mobile {
+  margin-left: 4px;
+}
+.pc-form-block__full-form {
+  background-color: var(--g-color-base-background);
+  padding: 48px 64px 48px calc(64px - 10px);
+  border-radius: var(--pc-border-radius);
+}
+.pc-form-block__media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 32px;
+}
+.pc-form-block__image {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.pc-form-block__row_direction_form-content {
+  flex-direction: row-reverse;
+}
+.pc-form-block__row_direction_center {
+  padding-top: 64px;
+  padding-bottom: 48px;
+  flex-direction: column;
+}
+.pc-form-block__row_direction_center .pc-form-block__content-wrapper {
+  margin-bottom: 32px;
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__full-form {
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper {
+  padding: 48px 0 64px 64px;
+}
+.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
+  padding: 48px 64px 64px 0;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__form-wrapper {
+  padding: 16px 0 24px 16px;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__form-wrapper {
+  padding: 16px 16px 24px 0;
+}
+.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
+  padding: 64px;
+}
+@media (min-width: 1081px) {
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__content-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__content-col {
+    flex: 1 0 0;
+  }
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form {
+    min-width: 475px;
+  }
+  .pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form-col {
+    max-width: initial;
+    width: fit-content;
+  }
+}
+@media (max-width: 1081px) and (min-width: 769px) {
+  .pc-form-block__row {
+    flex-direction: column;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    max-width: 609px;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__center,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__center,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    margin: 0 auto;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper {
+    padding-top: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    text-align: center;
+    padding-bottom: 32px;
+  }
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding: 0 0 32px 0;
+  }
+}
+@media (max-width: 769px) {
+  .pc-form-block__full-form {
+    padding: 32px;
+  }
+  .pc-form-block_with-background .pc-form-block__row, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row {
+    padding: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
+  .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding: 0;
+  }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
+    padding-bottom: 32px;
+    margin-bottom: 0;
+  }
+  .pc-form-block_with-background {
+    padding: 0 8px;
+  }
+  .pc-form-block_with-background .pc-form-block__row {
+    padding-top: 48px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_padding-bottom_m {
+    padding-bottom: 32px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_padding-bottom_l {
+    padding-bottom: 48px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_center .pc-form-block__content-wrapper {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  .pc-form-block_with-background .pc-form-block__row_direction_form-content, .pc-form-block_with-background .pc-form-block__row_direction_content-form {
+    padding-top: 32px;
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormBlockProps } from '../../models';
+import './Form.css';
+declare const FormBlock: React.FC<FormBlockProps>;
+export default FormBlock;

package/build/esm/blocks/Form/Form.js

@@ -0,0 +1,57 @@
+import React, { useCallback, useContext, useState } from 'react';
+import { BackgroundImage, Title } from '../../components';
+import { MobileContext } from '../../context/mobileContext';
+import { Col, Grid, GridAlignItems, GridColumnSize, Row } from '../../grid';
+import { FormBlockDataTypes, FormBlockDirection, isHubspotDataForm, isYandexDataForm, } from '../../models';
+import { Content } from '../../sub-blocks';
+import { block } from '../../utils';
+import InnerForm from './InnerForm/InnerForm';
+import './Form.css';
+const b = block('form-block');
+const colSizes = { [GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12 };
+const FormBlock = (props) => {
+    var _a;
+    const { formData, title, textContent, direction = FormBlockDirection.Center, background } = props;
+    const [contentLoaded, setContentLoaded] = useState(false);
+    const isMobile = useContext(MobileContext);
+    const hasImage = background && (background.src || background.desktop);
+    const paddingBottom = background && ((_a = background.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) && !hasImage ? 'l' : 'm'; // bigger padding for case with background color and no image
+    const onContentLoad = useCallback(() => {
+        setContentLoaded(true);
+    }, []);
+    if (!formData) {
+        return null;
+    }
+    let formType;
+    if (isYandexDataForm(formData)) {
+        formType = FormBlockDataTypes.YANDEX;
+    }
+    else if (isHubspotDataForm(formData)) {
+        formType = FormBlockDataTypes.HUBSPOT;
+    }
+    return (React.createElement("div", { className: b({
+            'with-background': Boolean(background),
+            'form-type': formType,
+        }) },
+        background && (React.createElement(BackgroundImage, Object.assign({}, background, { className: b('media'), imageClassName: b('image') }))),
+        React.createElement(Grid, null,
+            React.createElement(Row, { alignItems: direction === FormBlockDirection.Center
+                    ? GridAlignItems.Center
+                    : GridAlignItems.Start, className: b('row', {
+                    direction,
+                    'padding-bottom': paddingBottom,
+                }) },
+                React.createElement(Col, { sizes: colSizes, className: b('content-col') }, textContent && (React.createElement("div", { className: b('content-wrapper') },
+                    React.createElement(Content, Object.assign({ theme: "default" }, textContent, { centered: direction === FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }))))),
+                React.createElement(Col, { sizes: colSizes, className: b('form-col') },
+                    React.createElement("div", { className: b('form-wrapper') },
+                        React.createElement("div", { className: b('full-form', {
+                                hidden: !contentLoaded,
+                            }) },
+                            title && (React.createElement(Title, { title: {
+                                    text: title,
+                                    textSize: 's',
+                                }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })),
+                            React.createElement(InnerForm, { className: b('form'), formData: formData, onContentLoad: onContentLoad }))))))));
+};
+export default FormBlock;

package/build/esm/blocks/Form/InnerForm/InnerForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormBlockData } from '../../../models';
+interface InnerFormProps {
+    formData: FormBlockData;
+    onContentLoad: () => void;
+    className?: string;
+}
+declare const InnerForm: React.FC<InnerFormProps>;
+export default InnerForm;

package/build/esm/blocks/Form/InnerForm/InnerForm.js

@@ -0,0 +1,26 @@
+import { __rest } from "tslib";
+import React, { useEffect } from 'react';
+import { YandexForm } from '../../../components';
+import { isHubspotDataForm, isYandexDataForm } from '../../../models';
+import { HubspotForm } from '../../../sub-blocks';
+const InnerForm = (props) => {
+    const { formData, onContentLoad, className } = props;
+    useEffect(() => {
+        if (isHubspotDataForm(formData)) {
+            onContentLoad();
+        }
+    }, [onContentLoad, formData]);
+    if (isYandexDataForm(formData)) {
+        const _a = formData.yandex, { onLoad } = _a, rest = __rest(_a, ["onLoad"]);
+        return (React.createElement("div", { className: className },
+            React.createElement(YandexForm, Object.assign({}, rest, { onLoad: () => {
+                    onContentLoad();
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                } }))));
+    }
+    if (isHubspotDataForm(formData)) {
+        return React.createElement(HubspotForm, Object.assign({ createDOMElement: true }, formData.hubspot));
+    }
+    return null;
+};
+export default InnerForm;

package/build/esm/blocks/Form/schema.d.ts

@@ -0,0 +1,202 @@
+export declare const FormBlock: {
+    'form-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                type: string;
+            };
+            formData: {
+                oneOf: ({
+                    type: string;
+                    optionName: string;
+                    properties: {
+                        yandex: {
+                            type: string;
+                            required: string[];
+                            properties: {
+                                id: {
+                                    type: string;
+                                };
+                                containerId: {
+                                    type: string;
+                                };
+                                type: {};
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        hubspot?: undefined;
+                    };
+                } | {
+                    type: string;
+                    optionName: string;
+                    properties: {
+                        hubspot: {
+                            type: string;
+                            required: string[];
+                            properties: {
+                                region: {
+                                    type: string;
+                                };
+                                portalId: {
+                                    type: string;
+                                };
+                                formId: {
+                                    type: string;
+                                };
+                                formInstanceId: {
+                                    type: string;
+                                };
+                                type: {};
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        yandex?: undefined;
+                    };
+                })[];
+            };
+            textContent: {
+                additionalProperties: boolean;
+                properties: Partial<{
+                    title: {
+                        oneOf: ({
+                            type: string;
+                            contentType: string;
+                            optionName: string;
+                        } | {
+                            optionName: string;
+                            type: string;
+                            additionalProperties: boolean;
+                            required: string[];
+                            properties: {
+                                text: {
+                                    type: string;
+                                    contentType: string;
+                                };
+                                textSize: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                                url: {
+                                    type: string;
+                                };
+                                urlTitle: {
+                                    type: string;
+                                };
+                                resetMargin: {
+                                    type: string;
+                                };
+                            };
+                            contentType?: undefined;
+                        })[];
+                    };
+                    text: {
+                        type: string;
+                        contentType: string;
+                        inputType: string;
+                    };
+                    additionalInfo: {
+                        type: string;
+                        contentType: string;
+                    };
+                    size: {
+                        type: string;
+                        enum: string[];
+                    };
+                    links: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    buttons: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    theme: {
+                        type: string;
+                        enum: string[];
+                    };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                }>;
+            };
+            direction: {
+                enum: string[];
+            };
+            image: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    urlTitle: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};