npm - @gravity-ui/page-constructor - Versions diffs - 7.21.1 → 7.22.0 - Mend

@gravity-ui/page-constructor 7.21.1 → 7.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/build/cjs/sub-blocks/BackgroundCard/schema.d.ts CHANGED Viewed

@@ -221,6 +221,17 @@ export declare const BackgroundCard: {
                 type: string;
                 enum: string[];
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

package/build/cjs/sub-blocks/BasicCard/schema.d.ts CHANGED Viewed

@@ -109,6 +109,17 @@ export declare const BasicCard: {
                 contentType: string;
                 inputType: string;
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

package/build/cjs/sub-blocks/Content/Content.css CHANGED Viewed

@@ -38,6 +38,10 @@ unpredictable css rules order in build */
   text-align: center;
 }
+.pc-content_centered .pc-content__labels {
+  justify-content: center;
+  margin-inline: auto;
+}
 .pc-content_centered .pc-content__list {
   margin-inline: auto;
 }
@@ -62,11 +66,15 @@ unpredictable css rules order in build */
 .pc-content_size_s .pc-content__text_without-title {
   margin-top: 0;
 }
+.pc-content_size_s .pc-content__labels,
 .pc-content_size_s .pc-content__list,
 .pc-content_size_s .pc-content__links,
 .pc-content_size_s .pc-content__notice {
   margin-top: 16px;
 }
+.pc-content_size_s .pc-content__labels + .pc-content__list, .pc-content_size_s .pc-content__labels + .pc-content__link, .pc-content_size_s .pc-content__labels + .pc-content__notice {
+  margin-top: 20px;
+}
 .pc-content_size_s .pc-content__buttons {
   margin-top: 20px;
 }
@@ -93,11 +101,15 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
+.pc-content_size_m .pc-content__labels,
 .pc-content_size_m .pc-content__list,
 .pc-content_size_m .pc-content__links,
 .pc-content_size_m .pc-content__notice {
   margin-top: 20px;
 }
+.pc-content_size_m .pc-content__labels + .pc-content__list, .pc-content_size_m .pc-content__labels + .pc-content__link, .pc-content_size_m .pc-content__labels + .pc-content__notice {
+  margin-top: 24px;
+}
 .pc-content_size_m .pc-content__buttons {
   margin-top: 24px;
 }
@@ -120,11 +132,15 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
+.pc-content_size_l .pc-content__labels,
 .pc-content_size_l .pc-content__list,
 .pc-content_size_l .pc-content__links,
 .pc-content_size_l .pc-content__notice {
   margin-top: 20px;
 }
+.pc-content_size_l .pc-content__labels + .pc-content__list, .pc-content_size_l .pc-content__labels + .pc-content__link, .pc-content_size_l .pc-content__labels + .pc-content__notice {
+  margin-top: 24px;
+}
 .pc-content_size_l .pc-content__buttons {
   margin-top: 24px;
 }

package/build/cjs/sub-blocks/Content/Content.js CHANGED Viewed

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components/index.js");
+const ContentLabels_1 = tslib_1.__importDefault(require("../../components/ContentLabels/ContentLabels.js"));
 const grid_1 = require("../../grid/index.js");
 const utils_1 = require("../../utils/index.js");
 const blocks_1 = require("../../utils/blocks.js");
@@ -19,15 +21,22 @@ function getTextSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, controlPosition, } = props;
-    const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
+    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, labels, qa, controlPosition, } = props;
+    const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, [
+        'links',
+        'link',
+        'buttons',
+        'button',
+        'list',
+        'labels',
+    ]);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
     const hasTitle = Boolean(title);
     const defaultTitleId = (0, uikit_1.useUniqId)();
     const titleId = titleIdFromProps || defaultTitleId;
-    return ((0, jsx_runtime_1.jsxs)(grid_1.Col, { className: b({ size, centered, theme, 'control-position': controlPosition }, className), reset: true, sizes: colSizes, qa: qaAttributes.container, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })), text && ((0, jsx_runtime_1.jsx)("div", { className: b('text', { ['without-title']: !hasTitle }), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId, qa: qaAttributes.list }) })), list?.length ? ((0, jsx_runtime_1.jsx)("div", { className: b('list'), children: (0, jsx_runtime_1.jsx)(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list, theme: theme }) })) : null, additionalInfo && ((0, jsx_runtime_1.jsx)("div", { className: b('notice'), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
+    return ((0, jsx_runtime_1.jsxs)(grid_1.Col, { className: b({ size, centered, theme, 'control-position': controlPosition }, className), reset: true, sizes: colSizes, qa: qaAttributes.container, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })), text && ((0, jsx_runtime_1.jsx)("div", { className: b('text', { ['without-title']: !hasTitle }), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId, qa: qaAttributes.list }) })), labels?.length ? ((0, jsx_runtime_1.jsx)("div", { className: b('labels'), children: (0, jsx_runtime_1.jsx)(ContentLabels_1.default, { labels: labels, theme: theme, size: size, qa: qaAttributes.labels }) })) : null, list?.length ? ((0, jsx_runtime_1.jsx)("div", { className: b('list'), children: (0, jsx_runtime_1.jsx)(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list, theme: theme }) })) : null, additionalInfo && ((0, jsx_runtime_1.jsx)("div", { className: b('notice'), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
                         constructor: true,
                         'constructor-notice': true,
                         [`constructor-size-${size}`]: true,

package/build/cjs/sub-blocks/Content/Content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.js","sourceRoot":"../../../../src","sources":["sub-blocks/Content/Content.tsx"],"names":[],"mappings":"~~;;;~~AAAA,6CAA4C;AAE5C,0DAAgF;AAChF,8CAA+B;AAS/B,gDAAkC;AAClC,kDAAmD;AAInD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,SAAS,CAAC,CAAC;AAE3B,SAAS,WAAW,CAAC,IAAiB;IAClC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,GAAG,CAAC;IACnB,CAAC;AACL,CAAC;AAID,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACpC,MAAM,EACF,KAAK,EACL,OAAO,EAAE,gBAAgB,EACzB,IAAI,EACJ,MAAM,EACN,cAAc,EACd,IAAI,GAAG,GAAG,EACV,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EAC3B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,IAAI,EACJ,EAAE,EACF,eAAe,GAClB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,EAAE,EAAE,~~CAAC,~~OAAO,~~EAAE,~~MAAM,~~EAAE,~~SAAS,~~EAAE,~~QAAQ,~~EAAE,~~MAAM,~~CAAC~~,CAAC,CAAC;~~IAEzF~~,MAAM,UAAU,GACZ,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC/B,CAAC,CAAE,EAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,EAAoB;QAChE,CAAC,CAAC,KAAK,CAAC;IAEhB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,cAAc,GAAG,IAAA,iBAAS,GAAE,CAAC;IACnC,MAAM,OAAO,GAAG,gBAAgB,IAAI,cAAc,CAAC;IAEnD,OAAO,CACH,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAC,EAAE,SAAS,CAAC,EACrF,KAAK,QACL,KAAK,EAAE,QAAQ,EACf,EAAE,EAAE,YAAY,CAAC,SAAS,aAEzB,KAAK,IAAI,CACN,uBAAC,kBAAK,IACF,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,EACnB,EAAE,EAAE,OAAO,GACb,CACL,EACA,IAAI,IAAI,CACL,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAC,CAAC,YACrD,uBAAC,uBAAU,IACP,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAE,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,EAClE,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,GACA,CACT,EACA,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CACZ,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,wBAAW,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,GAC1E,CACT,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,IAAI,CACf,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,uBAAU,IACP,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE;wBACP,WAAW,EAAE,IAAI;wBACjB,oBAAoB,EAAE,IAAI;wBAC1B,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,IAAI;qBACrC,GACH,GACA,CACT,EACA,KAAK,IAAI,CACN,uBAAC,kBAAK,IACF,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAC,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,MAAM,EAAE,YAAY,CAAC,IAAI,GAC3B,CACL,EACA,OAAO,IAAI,CACR,uBAAC,oBAAO,IACJ,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAC,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,YAAY,CAAC,OAAO,EACxB,QAAQ,EAAE,YAAY,CAAC,MAAM,GAC/B,CACL,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC","sourcesContent":["import {useUniqId} from '@gravity-ui/uikit';\n\nimport {Buttons, ContentList, Links, Title, YFMWrapper} from '../../components';\nimport {Col} from '../../grid';\nimport {\n ClassNameProps,\n ContentBlockProps,\n ContentSize,\n TextSize,\n TitleItemProps,\n} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\n\nimport './Content.scss';\n\nconst b = block('content');\n\nfunction getTextSize(size: ContentSize): TextSize {\n switch (size) {\n case 's':\n return 's';\n case 'm':\n return 'sm';\n case 'l':\n default:\n return 'm';\n }\n}\n\nexport type ContentProps = ContentBlockProps & ClassNameProps & QAProps;\n\nconst Content = (props: ContentProps) => {\n const {\n title,\n titleId: titleIdFromProps,\n text,\n textId,\n additionalInfo,\n size = 'l',\n links,\n buttons,\n colSizes = {all: 12, sm: 8},\n centered,\n theme,\n className,\n list,\n qa,\n controlPosition,\n } = props;\n const qaAttributes = getQaAttrubutes(qa, ['links', 'link', 'buttons', 'button', 'list']);\n\n const titleProps =\n !title \|\| typeof title === 'string'\n ? ({text: title, textSize: getTextSize(size)} as TitleItemProps)\n : title;\n\n const hasTitle = Boolean(title);\n const defaultTitleId = useUniqId();\n const titleId = titleIdFromProps \|\| defaultTitleId;\n\n return (\n <Col\n className={b({size, centered, theme, 'control-position': controlPosition}, className)}\n reset\n sizes={colSizes}\n qa={qaAttributes.container}\n >\n {title && (\n <Title\n className={b('title')}\n title={titleProps}\n colSizes={{all: 12}}\n id={titleId}\n />\n )}\n {text && (\n <div className={b('text', {['without-title']: !hasTitle})}>\n <YFMWrapper\n content={text}\n modifiers={{constructor: true, [`constructor-size-${size}`]: true}}\n id={textId}\n qa={qaAttributes.list}\n />\n </div>\n )}\n {list?.length ? (\n <div className={b('list')}>\n <ContentList list={list} size={size} qa={qaAttributes.list} theme={theme} />\n </div>\n ) : null}\n {additionalInfo && (\n <div className={b('notice')}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n 'constructor-notice': true,\n [`constructor-size-${size}`]: true,\n }}\n />\n </div>\n )}\n {links && (\n <Links\n className={b('links', {size})}\n size={size}\n links={links}\n titleId={titleId}\n qa={qaAttributes.links}\n linkQa={qaAttributes.link}\n />\n )}\n {buttons && (\n <Buttons\n className={b('buttons', {size})}\n size={size}\n buttons={buttons}\n titleId={titleId}\n qa={qaAttributes.buttons}\n buttonQa={qaAttributes.button}\n />\n )}\n </Col>\n );\n};\n\nexport default Content;\n"]}
1	+ {"version":3,"file":"Content.js","sourceRoot":"../../../../src","sources":["sub-blocks/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useUniqId} from '@gravity-ui/uikit';\n\nimport {Buttons, ContentList, Links, Title, YFMWrapper} from '../../components';\nimport ContentLabels from '../../components/ContentLabels/ContentLabels';\nimport {Col} from '../../grid';\nimport {\n ClassNameProps,\n ContentBlockProps,\n ContentSize,\n TextSize,\n TitleItemProps,\n} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\n\nimport './Content.scss';\n\nconst b = block('content');\n\nfunction getTextSize(size: ContentSize): TextSize {\n switch (size) {\n case 's':\n return 's';\n case 'm':\n return 'sm';\n case 'l':\n default:\n return 'm';\n }\n}\n\nexport type ContentProps = ContentBlockProps & ClassNameProps & QAProps;\n\nconst Content = (props: ContentProps) => {\n const {\n title,\n titleId: titleIdFromProps,\n text,\n textId,\n additionalInfo,\n size = 'l',\n links,\n buttons,\n colSizes = {all: 12, sm: 8},\n centered,\n theme,\n className,\n list,\n labels,\n qa,\n controlPosition,\n } = props;\n const qaAttributes = getQaAttrubutes(qa, [\n 'links',\n 'link',\n 'buttons',\n 'button',\n 'list',\n 'labels',\n ]);\n\n const titleProps =\n !title \|\| typeof title === 'string'\n ? ({text: title, textSize: getTextSize(size)} as TitleItemProps)\n : title;\n\n const hasTitle = Boolean(title);\n const defaultTitleId = useUniqId();\n const titleId = titleIdFromProps \|\| defaultTitleId;\n\n return (\n <Col\n className={b({size, centered, theme, 'control-position': controlPosition}, className)}\n reset\n sizes={colSizes}\n qa={qaAttributes.container}\n >\n {title && (\n <Title\n className={b('title')}\n title={titleProps}\n colSizes={{all: 12}}\n id={titleId}\n />\n )}\n {text && (\n <div className={b('text', {['without-title']: !hasTitle})}>\n <YFMWrapper\n content={text}\n modifiers={{constructor: true, [`constructor-size-${size}`]: true}}\n id={textId}\n qa={qaAttributes.list}\n />\n </div>\n )}\n {labels?.length ? (\n <div className={b('labels')}>\n <ContentLabels\n labels={labels}\n theme={theme}\n size={size}\n qa={qaAttributes.labels}\n />\n </div>\n ) : null}\n {list?.length ? (\n <div className={b('list')}>\n <ContentList list={list} size={size} qa={qaAttributes.list} theme={theme} />\n </div>\n ) : null}\n {additionalInfo && (\n <div className={b('notice')}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n 'constructor-notice': true,\n [`constructor-size-${size}`]: true,\n }}\n />\n </div>\n )}\n {links && (\n <Links\n className={b('links', {size})}\n size={size}\n links={links}\n titleId={titleId}\n qa={qaAttributes.links}\n linkQa={qaAttributes.link}\n />\n )}\n {buttons && (\n <Buttons\n className={b('buttons', {size})}\n size={size}\n buttons={buttons}\n titleId={titleId}\n qa={qaAttributes.buttons}\n buttonQa={qaAttributes.button}\n />\n )}\n </Col>\n );\n};\n\nexport default Content;\n"]}

package/build/cjs/sub-blocks/Content/schema.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 export declare const ContentItem: {
     additionalProperties: boolean;
-    required: string[];
+    oneOf: {
+        required: string[];
+    }[];
     properties: {
         title: {
             type: string;
@@ -80,6 +82,84 @@ export declare const ContentItem: {
         };
     };
 };
+export declare const ContentLabel: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        text: {
+            type: string;
+            contentType: string;
+        };
+        icon: {
+            oneOf: (({
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
+                })[];
+            } & {
+                optionName: string;
+            }) | {
+                type: string;
+                additionalProperties: boolean;
+                required: import("../../index.js").Theme[];
+                properties: {};
+                optionName: string;
+            })[];
+        };
+        gravityIcon: {
+            oneOf: (({
+                oneOf: ({
+                    type: string;
+                    additionalProperties?: undefined;
+                    required?: undefined;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        color: {
+                            type: string;
+                            enum: string[];
+                        };
+                    };
+                })[];
+            } & {
+                optionName: string;
+            }) | {
+                type: string;
+                additionalProperties: boolean;
+                required: import("../../index.js").Theme[];
+                properties: {};
+                optionName: string;
+            })[];
+        };
+    };
+};
 export declare const ContentBase: {
     title: {
         oneOf: ({
@@ -163,6 +243,17 @@ export declare const ContentBase: {
             };
         };
     };
+    labels: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
     controlPosition: {
         type: string;
         enum: string[];
@@ -258,6 +349,17 @@ export declare const ContentBlock: {
                     };
                 };
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             controlPosition: {
                 type: string;
                 enum: string[];

package/build/cjs/sub-blocks/Content/schema.js CHANGED Viewed

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentBlock = exports.ContentBase = exports.ContentItem = void 0;
+exports.ContentBlock = exports.ContentBase = exports.ContentLabel = exports.ContentItem = void 0;
 const schema_1 = require("../../components/Image/schema.js");
 const common_1 = require("../../schema/validators/common.js");
 const utils_1 = require("../../schema/validators/utils.js");
 exports.ContentItem = {
     additionalProperties: false,
-    required: ['icon'],
+    oneOf: [
+        {
+            required: ['icon'],
+        },
+        {
+            required: ['gravityIcon'],
+        },
+    ],
     properties: {
         title: {
             type: 'string',
@@ -20,6 +27,18 @@ exports.ContentItem = {
         gravityIcon: (0, common_1.withTheme)(common_1.GravityIconProps),
     },
 };
+exports.ContentLabel = {
+    additionalProperties: false,
+    required: ['text'],
+    properties: {
+        text: {
+            type: 'string',
+            contentType: 'text',
+        },
+        icon: (0, common_1.withTheme)(schema_1.ImageProps),
+        gravityIcon: (0, common_1.withTheme)(common_1.GravityIconProps),
+    },
+};
 exports.ContentBase = {
     title: {
         oneOf: [
@@ -54,6 +73,7 @@ exports.ContentBase = {
         enum: common_1.contentThemes,
     },
     list: (0, utils_1.filteredArray)(exports.ContentItem),
+    labels: (0, utils_1.filteredArray)(exports.ContentLabel),
     controlPosition: {
         type: 'string',
         enum: ['default', 'bottom'],

package/build/cjs/sub-blocks/Content/schema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/Content/schema.ts"],"names":[],"mappings":";;;AAAA,6DAAyD;AACzD,8DAUwC;AACxC,4DAA4D;AAE/C,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,CAAC;~~IAClB~~,UAAU,EAAE;QACR,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,MAAM;SACtB;QACD,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,KAAK;SACrB;QACD,IAAI,EAAE,IAAA,kBAAS,EAAC,mBAAU,CAAC;QAC3B,WAAW,EAAE,IAAA,kBAAS,EAAC,yBAAgB,CAAC;KAC3C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,KAAK,EAAE;QACH,KAAK,EAAE;YACH;gBACI,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,MAAM;gBACnB,UAAU,EAAE,MAAM;aACrB;YACD;gBACI,GAAG,mBAAU;gBACb,UAAU,EAAE,SAAS;aACxB;SACJ;KACJ;IACD,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;QAClB,SAAS,EAAE,UAAU;KACxB;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;KACrB;IACD,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,qBAAY;KACrB;IACD,KAAK,EAAE,IAAA,qBAAa,EAAC,kBAAS,CAAC;IAC/B,OAAO,EAAE,IAAA,qBAAa,EAAC,oBAAW,CAAC;IACnC,KAAK,EAAE;QACH,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,sBAAa;KACtB;IACD,IAAI,EAAE,IAAA,qBAAa,EAAC,mBAAW,CAAC;IAChC,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,YAAY,GAAG;IACxB,OAAO,EAAE;QACL,oBAAoB,EAAE,KAAK;QAC3B,UAAU,EAAE;YACR,GAAG,mBAAW;YACd,QAAQ,EAAE,4BAAmB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,mBAAU,EAAC,CAAC,EAAE,EAAE,CAAC;YACvF,QAAQ,EAAE;gBACN,IAAI,EAAE,SAAS;aAClB;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n ButtonBlock,\n GravityIconProps,\n LinkProps,\n TitleProps,\n containerSizesArray,\n contentSizes,\n contentThemes,\n sizeNumber,\n withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const ContentItem = {\n additionalProperties: false,\n required: ['icon'],\n properties: {\n title: {\n type: 'string',\n contentType: 'text',\n },\n text: {\n type: 'string',\n contentType: 'yfm',\n },\n icon: withTheme(ImageProps),\n gravityIcon: withTheme(GravityIconProps),\n },\n};\n\nexport const ContentBase = {\n title: {\n oneOf: [\n {\n type: 'string',\n contentType: 'text',\n optionName: 'text',\n },\n {\n ...TitleProps,\n optionName: 'options',\n },\n ],\n },\n text: {\n type: 'string',\n contentType: 'yfm',\n inputType: 'textarea',\n },\n additionalInfo: {\n type: 'string',\n contentType: 'yfm',\n },\n size: {\n type: 'string',\n enum: contentSizes,\n },\n links: filteredArray(LinkProps),\n buttons: filteredArray(ButtonBlock),\n theme: {\n type: 'string',\n enum: contentThemes,\n },\n list: filteredArray(ContentItem),\n controlPosition: {\n type: 'string',\n enum: ['default', 'bottom'],\n },\n};\n\nexport const ContentBlock = {\n content: {\n additionalProperties: false,\n properties: {\n ...ContentBase,\n colSizes: containerSizesArray.reduce((acc, size) => ({...acc, [size]: sizeNumber}), {}),\n centered: {\n type: 'boolean',\n },\n },\n },\n};\n"]}
1	+ {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/Content/schema.ts"],"names":[],"mappings":";;;AAAA,6DAAyD;AACzD,8DAUwC;AACxC,4DAA4D;AAE/C,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,KAAK,EAAE;QACH;YACI,QAAQ,EAAE,CAAC,MAAM,CAAC;SACrB;QACD;YACI,QAAQ,EAAE,CAAC,aAAa,CAAC;SAC5B;KACJ;IACD,UAAU,EAAE;QACR,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,MAAM;SACtB;QACD,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,KAAK;SACrB;QACD,IAAI,EAAE,IAAA,kBAAS,EAAC,mBAAU,CAAC;QAC3B,WAAW,EAAE,IAAA,kBAAS,EAAC,yBAAgB,CAAC;KAC3C;CACJ,CAAC;AAEW,QAAA,YAAY,GAAG;IACxB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,CAAC;IAClB,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,MAAM;SACtB;QACD,IAAI,EAAE,IAAA,kBAAS,EAAC,mBAAU,CAAC;QAC3B,WAAW,EAAE,IAAA,kBAAS,EAAC,yBAAgB,CAAC;KAC3C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,KAAK,EAAE;QACH,KAAK,EAAE;YACH;gBACI,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,MAAM;gBACnB,UAAU,EAAE,MAAM;aACrB;YACD;gBACI,GAAG,mBAAU;gBACb,UAAU,EAAE,SAAS;aACxB;SACJ;KACJ;IACD,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;QAClB,SAAS,EAAE,UAAU;KACxB;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;KACrB;IACD,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,qBAAY;KACrB;IACD,KAAK,EAAE,IAAA,qBAAa,EAAC,kBAAS,CAAC;IAC/B,OAAO,EAAE,IAAA,qBAAa,EAAC,oBAAW,CAAC;IACnC,KAAK,EAAE;QACH,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,sBAAa;KACtB;IACD,IAAI,EAAE,IAAA,qBAAa,EAAC,mBAAW,CAAC;IAChC,MAAM,EAAE,IAAA,qBAAa,EAAC,oBAAY,CAAC;IACnC,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,YAAY,GAAG;IACxB,OAAO,EAAE;QACL,oBAAoB,EAAE,KAAK;QAC3B,UAAU,EAAE;YACR,GAAG,mBAAW;YACd,QAAQ,EAAE,4BAAmB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,mBAAU,EAAC,CAAC,EAAE,EAAE,CAAC;YACvF,QAAQ,EAAE;gBACN,IAAI,EAAE,SAAS;aAClB;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n ButtonBlock,\n GravityIconProps,\n LinkProps,\n TitleProps,\n containerSizesArray,\n contentSizes,\n contentThemes,\n sizeNumber,\n withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const ContentItem = {\n additionalProperties: false,\n oneOf: [\n {\n required: ['icon'],\n },\n {\n required: ['gravityIcon'],\n },\n ],\n properties: {\n title: {\n type: 'string',\n contentType: 'text',\n },\n text: {\n type: 'string',\n contentType: 'yfm',\n },\n icon: withTheme(ImageProps),\n gravityIcon: withTheme(GravityIconProps),\n },\n};\n\nexport const ContentLabel = {\n additionalProperties: false,\n required: ['text'],\n properties: {\n text: {\n type: 'string',\n contentType: 'text',\n },\n icon: withTheme(ImageProps),\n gravityIcon: withTheme(GravityIconProps),\n },\n};\n\nexport const ContentBase = {\n title: {\n oneOf: [\n {\n type: 'string',\n contentType: 'text',\n optionName: 'text',\n },\n {\n ...TitleProps,\n optionName: 'options',\n },\n ],\n },\n text: {\n type: 'string',\n contentType: 'yfm',\n inputType: 'textarea',\n },\n additionalInfo: {\n type: 'string',\n contentType: 'yfm',\n },\n size: {\n type: 'string',\n enum: contentSizes,\n },\n links: filteredArray(LinkProps),\n buttons: filteredArray(ButtonBlock),\n theme: {\n type: 'string',\n enum: contentThemes,\n },\n list: filteredArray(ContentItem),\n labels: filteredArray(ContentLabel),\n controlPosition: {\n type: 'string',\n enum: ['default', 'bottom'],\n },\n};\n\nexport const ContentBlock = {\n content: {\n additionalProperties: false,\n properties: {\n ...ContentBase,\n colSizes: containerSizesArray.reduce((acc, size) => ({...acc, [size]: sizeNumber}), {}),\n centered: {\n type: 'boolean',\n },\n },\n },\n};\n"]}

package/build/cjs/sub-blocks/ImageCard/schema.d.ts CHANGED Viewed

@@ -129,6 +129,17 @@ export declare const ImageCard: {
                     };
                 };
             } | undefined;
+            labels?: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            } | undefined;
             controlPosition: {
                 type: string;
                 enum: string[];

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts CHANGED Viewed

@@ -394,6 +394,17 @@ export declare const LayoutItem: {
                     };
                 };
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             controlPosition: {
                 type: string;
                 enum: string[];

package/build/cjs/utils/breakpoint.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { Device } from "../models/index.js";
+export interface ValueWithDevice<T> extends Partial<Record<Device, T>> {
+    [Device.Desktop]: T;
+    [Device.Mobile]: T;
+}
+export type DeviceSupporting<T> = T | ValueWithDevice<T>;
+export declare function isDeviceValue<T>(value: DeviceSupporting<T>): value is ValueWithDevice<T>;

package/build/cjs/utils/breakpoint.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDeviceValue = isDeviceValue;
+const models_1 = require("../models/index.js");
+function isDeviceValue(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        models_1.Device.Desktop in value &&
+        models_1.Device.Mobile in value);
+}
+//# sourceMappingURL=breakpoint.js.map

package/build/cjs/utils/breakpoint.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"breakpoint.js","sourceRoot":"../../../src","sources":["utils/breakpoint.ts"],"names":[],"mappings":";;AASA,sCAQC;AAjBD,+CAAiC;AASjC,SAAgB,aAAa,CAAI,KAA0B;IACvD,OAAO,CACH,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB,eAAM,CAAC,OAAO,IAAI,KAAK;QACvB,eAAM,CAAC,MAAM,IAAI,KAAK,CACzB,CAAC;AACN,CAAC","sourcesContent":["import {Device} from '../models';\n\nexport interface ValueWithDevice<T> extends Partial<Record<Device, T>> {\n [Device.Desktop]: T;\n [Device.Mobile]: T;\n}\n\nexport type DeviceSupporting<T> = T | ValueWithDevice<T>;\n\nexport function isDeviceValue<T>(value: DeviceSupporting<T>): value is ValueWithDevice<T> {\n return (\n typeof value === 'object' &&\n value !== null &&\n !Array.isArray(value) &&\n Device.Desktop in value &&\n Device.Mobile in value\n );\n}\n"]}

package/build/cjs/utils/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from "./common.js";
 export * from "./analytics.js";
+export * from "./breakpoint.js";
 export * from "./blocks.js";
 export * from "./url.js";
 export * from "./cn.js";

package/build/cjs/utils/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ exports.isHubspotEventData = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./common.js"), exports);
 tslib_1.__exportStar(require("./analytics.js"), exports);
+tslib_1.__exportStar(require("./breakpoint.js"), exports);
 tslib_1.__exportStar(require("./blocks.js"), exports);
 tslib_1.__exportStar(require("./url.js"), exports);
 tslib_1.__exportStar(require("./cn.js"), exports);

package/build/cjs/utils/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["utils/index.ts"],"names":[],"mappings":";;;;AAAA,sDAAyB;AACzB,yDAA4B;AAC5B,sDAAyB;AACzB,mDAAsB;AACtB,kDAAqB;AACrB,mDAAsB;AACtB,qDAAwB;AACxB,qDAAwB;AAGxB,wCAA6C;AAArC,6GAAA,kBAAkB,OAAA","sourcesContent":["export * from './common';\nexport * from './analytics';\nexport * from './blocks';\nexport * from './url';\nexport * from './cn';\nexport * from './url';\nexport * from './theme';\nexport * from './icons';\n\nexport type {HubspotEventData, HubspotEventHandlers, HubspotEventName} from './hubspot';\nexport {isHubspotEventData} from './hubspot';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["utils/index.ts"],"names":[],"mappings":";;;;AAAA,sDAAyB;AACzB,yDAA4B;AAC5B,0DAA6B;AAC7B,sDAAyB;AACzB,mDAAsB;AACtB,kDAAqB;AACrB,mDAAsB;AACtB,qDAAwB;AACxB,qDAAwB;AAGxB,wCAA6C;AAArC,6GAAA,kBAAkB,OAAA","sourcesContent":["export * from './common';\nexport * from './analytics';\nexport * from './breakpoint';\nexport * from './blocks';\nexport * from './url';\nexport * from './cn';\nexport * from './url';\nexport * from './theme';\nexport * from './icons';\n\nexport type {HubspotEventData, HubspotEventHandlers, HubspotEventName} from './hubspot';\nexport {isHubspotEventData} from './hubspot';\n"]}

package/build/esm/blocks/ContentLayout/schema.d.ts CHANGED Viewed

@@ -225,6 +225,17 @@ export declare const ContentLayoutBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];

package/build/esm/blocks/FoldableList/schema.d.ts CHANGED Viewed

@@ -51,6 +51,17 @@ export declare const FoldableListBlock: {
                 contentType: string;
                 inputType: string;
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

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

@@ -69,7 +69,7 @@ unpredictable css rules order in build */
     width: fit-content;
   }
 }
-@media (max-width: 1081px) and (min-width: 769px) {
+@media (max-width: 1080px) and (min-width: 769px) {
   .pc-form-block__row {
     flex-direction: column;
   }
@@ -94,11 +94,14 @@ unpredictable css rules order in build */
     text-align: center;
     padding-bottom: 32px;
   }
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper .pc-content-labels, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper .pc-content-labels {
+    justify-content: center;
+  }
   .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) {
+@media (max-width: 768px) {
   .pc-form-block__full-form {
     padding: 32px;
   }

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

@@ -5,26 +5,29 @@ import InnerForm from "../../components/InnerForm/InnerForm.js";
 import { MobileContext } from "../../context/mobileContext/index.js";
 import { useTheme } from "../../context/theme/index.js";
 import { Col, Grid, GridAlignItems, GridColumnSize, Row } from "../../grid/index.js";
+import { useDeviceValue } from "../../hooks/useDeviceValue.js";
 import { FormBlockDataTypes, FormBlockDirection, isHubspotDataForm, isYandexDataForm, } from "../../models/index.js";
 import { Content } from "../../sub-blocks/index.js";
 import { block, getThemedValue } from "../../utils/index.js";
+import { hasBackgroundCSS } from "./utils.js";
 import './Form.css';
 const b = block('form-block');
 const colSizes = { [GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12 };
 const Form = (props) => {
-    const { formData, title, textContent, direction = FormBlockDirection.Center, background } = props;
+    const { formData, title, textContent, direction = FormBlockDirection.Center, background, customFormNode, } = props;
     const [contentLoaded, setContentLoaded] = React.useState(false);
     const isMobile = React.useContext(MobileContext);
     const theme = useTheme();
     const themedBackground = getThemedValue(background, theme) || undefined;
+    const themedBackgroundStyle = useDeviceValue(themedBackground?.style) || undefined;
     const withBackground = Boolean(themedBackground &&
         (themedBackground.src ||
             themedBackground.desktop ||
-            themedBackground.style?.backgroundColor));
+            hasBackgroundCSS(themedBackgroundStyle ?? {})));
     const onContentLoad = React.useCallback(() => {
         setContentLoaded(true);
     }, []);
-    if (!formData) {
+    if (!formData && !customFormNode) {
         return null;
     }
     let formType;
@@ -37,16 +40,16 @@ const Form = (props) => {
     return (_jsxs("div", { className: b({
             'with-background': withBackground,
             'form-type': formType,
-        }), children: [themedBackground && (_jsx(BackgroundImage, { ...themedBackground, className: b('media'), imageClassName: b('image') })), _jsx(Grid, { children: _jsxs(Row, { alignItems: direction === FormBlockDirection.Center
+        }), children: [themedBackground && (_jsx(BackgroundImage, { ...themedBackground, style: themedBackgroundStyle, className: b('media'), imageClassName: b('image') })), _jsx(Grid, { children: _jsxs(Row, { alignItems: direction === FormBlockDirection.Center
                         ? GridAlignItems.Center
                         : GridAlignItems.Start, className: b('row', {
                         direction,
-                    }), children: [_jsx(Col, { sizes: colSizes, className: b('content-col'), children: textContent && (_jsx("div", { className: b('content-wrapper'), children: _jsx(Content, { theme: "default", ...textContent, centered: direction === FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }) })) }), _jsx(Col, { sizes: colSizes, className: b('form-col'), children: _jsx("div", { className: b('form-wrapper'), children: _jsxs("div", { className: b('full-form', {
+                    }), children: [_jsx(Col, { sizes: colSizes, className: b('content-col'), children: textContent && (_jsx("div", { className: b('content-wrapper'), children: _jsx(Content, { theme: "default", ...textContent, centered: direction === FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }) })) }), _jsx(Col, { sizes: colSizes, className: b('form-col'), children: _jsx("div", { className: b('form-wrapper'), children: _jsx("div", { className: b('full-form', {
                                         hidden: !contentLoaded,
-                                    }), children: [title && (_jsx(Title, { title: {
-                                                text: title,
-                                                textSize: 's',
-                                            }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })), _jsx(InnerForm, { className: b('form'), formData: formData, onContentLoad: onContentLoad })] }) }) })] }) })] }));
+                                    }), children: customFormNode || (_jsxs(React.Fragment, { children: [title && (_jsx(Title, { title: {
+                                                    text: title,
+                                                    textSize: 's',
+                                                }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })), _jsx(InnerForm, { className: b('form'), formData: formData, onContentLoad: onContentLoad })] })) }) }) })] }) })] }));
 };
 export default Form;
 //# sourceMappingURL=Form.js.map

package/build/esm/blocks/Form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","sourceRoot":"../../../../src","sources":["blocks/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACxD,OAAO,SAAS,gDAA6C;AAC7D,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,EAAC,4BAAmB;~~AAE1E~~,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACnB,8BAAqB;AACtB,OAAO,EAAC,OAAO,EAAC,kCAAyB;AACzC,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,QAAQ,GAAG,EAAC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;AAEpE,MAAM,IAAI,GAAG,CAAC,KAAqB,EAAE,EAAE;IACnC,MAAM,~~EAAC~~,QAAQ,~~EAAE~~,KAAK,~~EAAE~~,WAAW,~~EAAE~~,SAAS,GAAG,kBAAkB,CAAC,MAAM,~~EAAE~~,UAAU,~~EAAC~~,GAAG,KAAK,CAAC;~~IAChG~~,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,SAAS,CAAC;~~IAExE~~,MAAM,cAAc,GAAG,OAAO,CAC1B,gBAAgB;QACZ,CAAC,gBAAgB,CAAC,GAAG;YACjB,gBAAgB,CAAC,OAAO;YACxB,gBAAgB,CAAC,~~KAAK~~,EAAE,~~eAAe~~,CAAC,~~CACnD~~,CAAC;~~IACF~~,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,QAAQ,EAAE,CAAC;~~QACZ~~,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,QAAQ,CAAC;IAEb,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC;IACzC,CAAC;SAAM,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrC,QAAQ,GAAG,kBAAkB,CAAC,OAAO,CAAC;IAC1C,CAAC;IAED,OAAO,CACH,eACI,SAAS,EAAE,CAAC,CAAC;YACT,iBAAiB,EAAE,cAAc;YACjC,WAAW,EAAE,QAAQ;SACxB,CAAC,aAED,gBAAgB,IAAI,CACjB,KAAC,eAAe,OACR,gBAAgB,EACpB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,GAC5B,CACL,EACD,KAAC,IAAI,cACD,MAAC,GAAG,IACA,UAAU,EACN,SAAS,KAAK,kBAAkB,CAAC,MAAM;wBACnC,CAAC,CAAC,cAAc,CAAC,MAAM;wBACvB,CAAC,CAAC,cAAc,CAAC,KAAK,EAE9B,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,SAAS;qBACZ,CAAC,aAEF,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5C,WAAW,IAAI,CACZ,cAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,YAChC,KAAC,OAAO,IACJ,KAAK,EAAC,SAAS,KACX,WAAW,EACf,QAAQ,EAAE,SAAS,KAAK,kBAAkB,CAAC,MAAM,EACjD,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,EACnB,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,GACA,CACT,GACC,EACN,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YAC1C,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7B,~~eACI~~,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE;wCACtB,MAAM,EAAE,CAAC,aAAa;qCACzB,CAAC,~~aAED~~,KAAK,IAAI,CACN,KAAC,KAAK,IACF,KAAK,EAAE;~~gDACH~~,IAAI,EAAE,KAAK;~~gDACX~~,QAAQ,EAAE,GAAG;~~6CAChB~~,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EACzC,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,GACrB,CACL,EACD,KAAC,SAAS,IACN,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC9B,~~IACA~~,GACJ,GACJ,IACJ,GACH,IACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, Title} from '../../components';\nimport InnerForm from '../../components/InnerForm/InnerForm';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';\nimport type {FormBlockProps} from '../../models';\nimport {\n FormBlockDataTypes,\n FormBlockDirection,\n isHubspotDataForm,\n isYandexDataForm,\n} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport './Form.scss';\n\nconst b = block('form-block');\n\nconst colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};\n\nconst Form = (props: FormBlockProps) => {\n const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props;\n const [contentLoaded, setContentLoaded] = React.useState(false);\n const isMobile = React.useContext(MobileContext);\n const theme = useTheme();\n\n const themedBackground = getThemedValue(background, theme) \|\| undefined;\n\n const withBackground = Boolean(\n themedBackground &&\n (themedBackground.src \|\|\n themedBackground.desktop \|\|\n ~~themedBackground.style?.backgroundColor~~),\n );\n const onContentLoad = React.useCallback(() => {\n setContentLoaded(true);\n }, []);\n\n if (!formData) {\n return null;\n }\n\n let formType;\n\n if (isYandexDataForm(formData)) {\n formType = FormBlockDataTypes.YANDEX;\n } else if (isHubspotDataForm(formData)) {\n formType = FormBlockDataTypes.HUBSPOT;\n }\n\n return (\n <div\n className={b({\n 'with-background': withBackground,\n 'form-type': formType,\n })}\n >\n {themedBackground && (\n <BackgroundImage\n {...themedBackground}\n className={b('media')}\n imageClassName={b('image')}\n />\n )}\n <Grid>\n <Row\n alignItems={\n direction === FormBlockDirection.Center\n ? GridAlignItems.Center\n : GridAlignItems.Start\n }\n className={b('row', {\n direction,\n })}\n >\n <Col sizes={colSizes} className={b('content-col')}>\n {textContent && (\n <div className={b('content-wrapper')}>\n <Content\n theme=\"default\"\n {...textContent}\n centered={direction === FormBlockDirection.Center}\n colSizes={{all: 12}}\n className={b('content')}\n />\n </div>\n )}\n </Col>\n <Col sizes={colSizes} className={b('form-col')}>\n <div className={b('form-wrapper')}>\n <div\n className={b('full-form', {\n hidden: !contentLoaded,\n })}\n >\n {title && (\n <Title\n title={{\n text: title,\n textSize: 's',\n }}\n className={b('title', {mobile: isMobile})}\n colSizes={{all: 12}}\n />\n )}\n <InnerForm\n className={b('form')}\n formData={formData}\n onContentLoad={onContentLoad}\n />\n </div>\n </div>\n </Col>\n </Row>\n </Grid>\n </div>\n );\n};\n\nexport default Form;\n"]}
1	+ {"version":3,"file":"Form.js","sourceRoot":"../../../../src","sources":["blocks/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACxD,OAAO,SAAS,gDAA6C;AAC7D,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,EAAC,4BAAmB;AAC1E,OAAO,EAAC,cAAc,EAAC,sCAAmC;AAE1D,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACnB,8BAAqB;AACtB,OAAO,EAAC,OAAO,EAAC,kCAAyB;AACzC,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,EAAC,gBAAgB,EAAC,mBAAgB;AAEzC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,QAAQ,GAAG,EAAC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;AAEpE,MAAM,IAAI,GAAG,CAAC,KAAqB,EAAE,EAAE;IACnC,MAAM,EACF,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,kBAAkB,CAAC,MAAM,EACrC,UAAU,EACV,cAAc,GACjB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,SAAS,CAAC;IACxE,MAAM,qBAAqB,GAAG,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,IAAI,SAAS,CAAC;IAEnF,MAAM,cAAc,GAAG,OAAO,CAC1B,gBAAgB;QACZ,CAAC,gBAAgB,CAAC,GAAG;YACjB,gBAAgB,CAAC,OAAO;YACxB,gBAAgB,CAAC,qBAAqB,IAAI,EAAE,CAAC,CAAC,CACzD,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,QAAQ,CAAC;IAEb,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC;IACzC,CAAC;SAAM,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrC,QAAQ,GAAG,kBAAkB,CAAC,OAAO,CAAC;IAC1C,CAAC;IAED,OAAO,CACH,eACI,SAAS,EAAE,CAAC,CAAC;YACT,iBAAiB,EAAE,cAAc;YACjC,WAAW,EAAE,QAAQ;SACxB,CAAC,aAED,gBAAgB,IAAI,CACjB,KAAC,eAAe,OACR,gBAAgB,EACpB,KAAK,EAAE,qBAAqB,EAC5B,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,GAC5B,CACL,EACD,KAAC,IAAI,cACD,MAAC,GAAG,IACA,UAAU,EACN,SAAS,KAAK,kBAAkB,CAAC,MAAM;wBACnC,CAAC,CAAC,cAAc,CAAC,MAAM;wBACvB,CAAC,CAAC,cAAc,CAAC,KAAK,EAE9B,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,SAAS;qBACZ,CAAC,aAEF,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5C,WAAW,IAAI,CACZ,cAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,YAChC,KAAC,OAAO,IACJ,KAAK,EAAC,SAAS,KACX,WAAW,EACf,QAAQ,EAAE,SAAS,KAAK,kBAAkB,CAAC,MAAM,EACjD,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,EACnB,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,GACA,CACT,GACC,EACN,KAAC,GAAG,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YAC1C,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7B,cACI,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE;wCACtB,MAAM,EAAE,CAAC,aAAa;qCACzB,CAAC,YAED,cAAc,IAAI,CACf,MAAC,KAAK,CAAC,QAAQ,eACV,KAAK,IAAI,CACN,KAAC,KAAK,IACF,KAAK,EAAE;oDACH,IAAI,EAAE,KAAK;oDACX,QAAQ,EAAE,GAAG;iDAChB,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EACzC,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,GACrB,CACL,EACD,KAAC,SAAS,IACN,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC9B,IACW,CACpB,GACC,GACJ,GACJ,IACJ,GACH,IACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, Title} from '../../components';\nimport InnerForm from '../../components/InnerForm/InnerForm';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';\nimport {useDeviceValue} from '../../hooks/useDeviceValue';\nimport type {FormBlockProps} from '../../models';\nimport {\n FormBlockDataTypes,\n FormBlockDirection,\n isHubspotDataForm,\n isYandexDataForm,\n} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport {hasBackgroundCSS} from './utils';\n\nimport './Form.scss';\n\nconst b = block('form-block');\n\nconst colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};\n\nconst Form = (props: FormBlockProps) => {\n const {\n formData,\n title,\n textContent,\n direction = FormBlockDirection.Center,\n background,\n customFormNode,\n } = props;\n const [contentLoaded, setContentLoaded] = React.useState(false);\n const isMobile = React.useContext(MobileContext);\n const theme = useTheme();\n\n const themedBackground = getThemedValue(background, theme) \|\| undefined;\n const themedBackgroundStyle = useDeviceValue(themedBackground?.style) \|\| undefined;\n\n const withBackground = Boolean(\n themedBackground &&\n (themedBackground.src \|\|\n themedBackground.desktop \|\|\n hasBackgroundCSS(themedBackgroundStyle ?? {})),\n );\n\n const onContentLoad = React.useCallback(() => {\n setContentLoaded(true);\n }, []);\n\n if (!formData && !customFormNode) {\n return null;\n }\n\n let formType;\n\n if (isYandexDataForm(formData)) {\n formType = FormBlockDataTypes.YANDEX;\n } else if (isHubspotDataForm(formData)) {\n formType = FormBlockDataTypes.HUBSPOT;\n }\n\n return (\n <div\n className={b({\n 'with-background': withBackground,\n 'form-type': formType,\n })}\n >\n {themedBackground && (\n <BackgroundImage\n {...themedBackground}\n style={themedBackgroundStyle}\n className={b('media')}\n imageClassName={b('image')}\n />\n )}\n <Grid>\n <Row\n alignItems={\n direction === FormBlockDirection.Center\n ? GridAlignItems.Center\n : GridAlignItems.Start\n }\n className={b('row', {\n direction,\n })}\n >\n <Col sizes={colSizes} className={b('content-col')}>\n {textContent && (\n <div className={b('content-wrapper')}>\n <Content\n theme=\"default\"\n {...textContent}\n centered={direction === FormBlockDirection.Center}\n colSizes={{all: 12}}\n className={b('content')}\n />\n </div>\n )}\n </Col>\n <Col sizes={colSizes} className={b('form-col')}>\n <div className={b('form-wrapper')}>\n <div\n className={b('full-form', {\n hidden: !contentLoaded,\n })}\n >\n {customFormNode \|\| (\n <React.Fragment>\n {title && (\n <Title\n title={{\n text: title,\n textSize: 's',\n }}\n className={b('title', {mobile: isMobile})}\n colSizes={{all: 12}}\n />\n )}\n <InnerForm\n className={b('form')}\n formData={formData}\n onContentLoad={onContentLoad}\n />\n </React.Fragment>\n )}\n </div>\n </div>\n </Col>\n </Row>\n </Grid>\n </div>\n );\n};\n\nexport default Form;\n"]}