@gravity-ui/page-constructor 7.21.1 → 7.23.0

package/build/esm/blocks/CardLayout/CardLayout.css

@@ -14,6 +14,12 @@ unpredictable css rules order in build */
   padding: 8px 32px 48px;
   margin-top: 24px;
 }
+.pc-card-layout-block__title_centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
 .pc-card-layout-block__image {
   position: absolute;
   top: 0;

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

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps } from "../../models/index.js";
 import './CardLayout.css';
 export type CardLayoutBlockProps = React.PropsWithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
-declare const CardLayout: ({ title, description, animated, colSizes, children, className, titleClassName, background, }: CardLayoutBlockProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardLayout: ({ title, description, animated, colSizes, children, className, titleClassName, background, centered, }: CardLayoutBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default CardLayout;

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import isEmpty from "lodash/isEmpty.js";
 import { AnimateBlock, BackgroundImage, Title } from "../../components/index.js";
 import { useTheme } from "../../context/theme/index.js";
-import { Col, Row } from "../../grid/index.js";
+import { Col, GridJustifyContent, Row } from "../../grid/index.js";
 import { block, getThemedValue } from "../../utils/index.js";
 import './CardLayout.css';
 const DEFAULT_SIZES = {
@@ -12,10 +12,10 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, centered = false, }) => {
     const theme = useTheme();
     const { border, ...backgroundImageProps } = getThemedValue(background || {}, theme);
-    return (_jsxs(AnimateBlock, { className: b(null, className), animate: animated, children: [(title || description) && (_jsx(Title, { title: title, subtitle: description, className: titleClassName })), _jsxs("div", { className: b('content', {
+    return (_jsxs(AnimateBlock, { className: b(null, className), animate: animated, children: [(title || description) && (_jsx(Title, { title: title, subtitle: description, className: b('title', { centered }, titleClassName), colJustifyContent: centered ? GridJustifyContent.Center : GridJustifyContent.Start })), _jsxs("div", { className: b('content', {
                     'with-background': !isEmpty(background),
                 }), children: [_jsx(BackgroundImage, { className: b('image', { border }), ...backgroundImageProps }), _jsx(Row, { children: React.Children.map(children, (child, index) => (_jsx(Col, { sizes: colSizes, className: b('item'), children: child }, index))) })] })] }));
 };

package/build/esm/blocks/CardLayout/CardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,0BAAuB;AAErC,OAAO,EAAC,YAAY,EAAE,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACtE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAuB,GAAG,EAAC,4BAAmB;AAEzD,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAMF,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,GACS,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,cAAc,CAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,CAC5E,EACD,eACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,KAAC,GAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,GAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACjD,KAAK,IADA,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnSizesType, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nconst DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout = ({\n    title,\n    description,\n    animated,\n    colSizes = DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n}: CardLayoutBlockProps) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            {(title || description) && (\n                <Title title={title} subtitle={description} className={titleClassName} />\n            )}\n            <div\n                className={b('content', {\n                    'with-background': !isEmpty(background),\n                })}\n            >\n                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n                <Row>\n                    {React.Children.map(children, (child, index) => (\n                        <Col key={index} sizes={colSizes} className={b('item')}>\n                            {child}\n                        </Col>\n                    ))}\n                </Row>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}
+{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,0BAAuB;AAErC,OAAO,EAAC,YAAY,EAAE,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACtE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAuB,kBAAkB,EAAE,GAAG,EAAC,4BAAmB;AAE7E,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAOF,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,QAAQ,GAAG,KAAK,GACG,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,cAAc,CAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAE,cAAc,CAAC,EACjD,iBAAiB,EACb,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAErE,CACL,EACD,eACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,KAAC,GAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,GAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACjD,KAAK,IADA,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nconst DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\n\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout = ({\n    title,\n    description,\n    animated,\n    colSizes = DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n    centered = false,\n}: CardLayoutBlockProps) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            {(title || description) && (\n                <Title\n                    title={title}\n                    subtitle={description}\n                    className={b('title', {centered}, titleClassName)}\n                    colJustifyContent={\n                        centered ? GridJustifyContent.Center : GridJustifyContent.Start\n                    }\n                />\n            )}\n            <div\n                className={b('content', {\n                    'with-background': !isEmpty(background),\n                })}\n            >\n                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n                <Row>\n                    {React.Children.map(children, (child, index) => (\n                        <Col key={index} sizes={colSizes} className={b('item')}>\n                            {child}\n                        </Col>\n                    ))}\n                </Row>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"../../../../src","sources":["blocks/Form/Form.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"Form.js","sourceRoot":"../../../../src","sources":["blocks/Form/Form.tsx"],"names":[],"mappings":"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","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"]}

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

@@ -164,6 +164,17 @@ export declare const FormBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];
@@ -173,7 +184,7 @@ export declare const FormBlock: {
             direction: {
                 enum: string[];
             };
-            image: {
+            background: {
                 oneOf: ({
                     type: string;
                     properties: {
@@ -200,9 +211,6 @@ export declare const FormBlock: {
                     pattern?: undefined;
                 })[];
             };
-            backgroundColor: {
-                type: string;
-            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -39,10 +39,7 @@ export const FormBlock = {
             direction: {
                 enum: ['content-form', 'form-content', 'center'],
             },
-            image: ImageProps,
-            backgroundColor: {
-                type: 'string',
-            },
+            background: ImageProps,
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Form/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,EAAC,UAAU,EAAC,yCAAsC;AACzD,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,cAAc,EAAE,SAAS,EAAC,0CAAuC;AACzE,OAAO,EAAC,WAAW,EAAC,2CAAwC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,+CAA4C;AAErE,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,YAAY,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,UAAU,CAAC;QACtB,UAAU,EAAE;YACR,GAAG,cAAc;YACjB,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;YACD,QAAQ,EAAE;gBACN,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,QAAQ;wBACpB,UAAU,EAAE;4BACR,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC;yBACrC;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,SAAS;wBACrB,UAAU,EAAE;4BACR,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC;yBACvC;qBACJ;iBACJ;aACJ;YACD,WAAW,EAAE;gBACT,oBAAoB,EAAE,KAAK;gBAC3B,UAAU,EAAE,qBAAqB;aACpC;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,CAAC;aACnD;YACD,KAAK,EAAE,UAAU;YACjB,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;aACjB;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport {ImageProps} from '../../components/Image/schema';\nimport {YandexFormProps} from '../../components/YandexForm/schema';\nimport {BlockBaseProps, withTheme} from '../../schema/validators/common';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\nimport {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';\n\nconst FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);\n\nexport const FormBlock = {\n    'form-block': {\n        additionalProperties: false,\n        required: ['formData'],\n        properties: {\n            ...BlockBaseProps,\n            title: {\n                type: 'string',\n            },\n            formData: {\n                oneOf: [\n                    {\n                        type: 'object',\n                        optionName: 'yandex',\n                        properties: {\n                            yandex: withTheme(YandexFormProps),\n                        },\n                    },\n                    {\n                        type: 'object',\n                        optionName: 'hubspot',\n                        properties: {\n                            hubspot: withTheme(HubspotFormProps),\n                        },\n                    },\n                ],\n            },\n            textContent: {\n                additionalProperties: false,\n                properties: FormBlockContentProps,\n            },\n            direction: {\n                enum: ['content-form', 'form-content', 'center'],\n            },\n            image: ImageProps,\n            backgroundColor: {\n                type: 'string',\n            },\n        },\n    },\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Form/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,EAAC,UAAU,EAAC,yCAAsC;AACzD,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,cAAc,EAAE,SAAS,EAAC,0CAAuC;AACzE,OAAO,EAAC,WAAW,EAAC,2CAAwC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,+CAA4C;AAErE,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,YAAY,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,UAAU,CAAC;QACtB,UAAU,EAAE;YACR,GAAG,cAAc;YACjB,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;YACD,QAAQ,EAAE;gBACN,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,QAAQ;wBACpB,UAAU,EAAE;4BACR,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC;yBACrC;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,SAAS;wBACrB,UAAU,EAAE;4BACR,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC;yBACvC;qBACJ;iBACJ;aACJ;YACD,WAAW,EAAE;gBACT,oBAAoB,EAAE,KAAK;gBAC3B,UAAU,EAAE,qBAAqB;aACpC;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,CAAC;aACnD;YACD,UAAU,EAAE,UAAU;SACzB;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport {ImageProps} from '../../components/Image/schema';\nimport {YandexFormProps} from '../../components/YandexForm/schema';\nimport {BlockBaseProps, withTheme} from '../../schema/validators/common';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\nimport {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';\n\nconst FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);\n\nexport const FormBlock = {\n    'form-block': {\n        additionalProperties: false,\n        required: ['formData'],\n        properties: {\n            ...BlockBaseProps,\n            title: {\n                type: 'string',\n            },\n            formData: {\n                oneOf: [\n                    {\n                        type: 'object',\n                        optionName: 'yandex',\n                        properties: {\n                            yandex: withTheme(YandexFormProps),\n                        },\n                    },\n                    {\n                        type: 'object',\n                        optionName: 'hubspot',\n                        properties: {\n                            hubspot: withTheme(HubspotFormProps),\n                        },\n                    },\n                ],\n            },\n            textContent: {\n                additionalProperties: false,\n                properties: FormBlockContentProps,\n            },\n            direction: {\n                enum: ['content-form', 'form-content', 'center'],\n            },\n            background: ImageProps,\n        },\n    },\n};\n"]}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BACKGROUND_STYLE_PROPS: readonly ["background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "backgroundPosition"];
+export declare const hasBackgroundCSS: (style: React.CSSProperties) => boolean;

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

@@ -0,0 +1,16 @@
+export const BACKGROUND_STYLE_PROPS = [
+    'background',
+    'backgroundAttachment',
+    'backgroundBlendMode',
+    'backgroundClip',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundOrigin',
+    'backgroundPositionX',
+    'backgroundPositionY',
+    'backgroundRepeat',
+    'backgroundSize',
+    'backgroundPosition',
+];
+export const hasBackgroundCSS = (style) => BACKGROUND_STYLE_PROPS.some((backgroundStyleProp) => backgroundStyleProp in style);
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["blocks/Form/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,YAAY;IACZ,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;IAClB,qBAAqB;IACrB,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,oBAAoB;CACd,CAAC;AAEX,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,EAAE,CAC3D,sBAAsB,CAAC,IAAI,CAAC,CAAC,mBAAmB,EAAE,EAAE,CAAC,mBAAmB,IAAI,KAAK,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nexport const BACKGROUND_STYLE_PROPS = [\n    'background',\n    'backgroundAttachment',\n    'backgroundBlendMode',\n    'backgroundClip',\n    'backgroundColor',\n    'backgroundImage',\n    'backgroundOrigin',\n    'backgroundPositionX',\n    'backgroundPositionY',\n    'backgroundRepeat',\n    'backgroundSize',\n    'backgroundPosition',\n] as const;\n\nexport const hasBackgroundCSS = (style: React.CSSProperties) =>\n    BACKGROUND_STYLE_PROPS.some((backgroundStyleProp) => backgroundStyleProp in style);\n"]}

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

@@ -135,6 +135,17 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];
@@ -226,6 +237,17 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];

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

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

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

@@ -537,6 +537,17 @@ export declare const MediaBlockBaseProps: {
         type: string;
         enum: string[];
     };
+    labels: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
     additionalInfo: {
         type: string;
         contentType: string;
@@ -1178,6 +1189,17 @@ export declare const MediaBlock: {
                 type: string;
                 enum: string[];
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

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

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

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

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

package/build/esm/components/{ContentList/ContentListItemIcon.d.ts → ContentIcon/ContentIcon.d.ts}

@@ -1,8 +1,8 @@
 import { ClassNameProps, GravityIconProps, ImageProps, QAProps, SVGIcon } from "../../models/index.js";
 import { ThemeSupporting } from "../../utils/index.js";
-interface ListItemProps extends QAProps, ClassNameProps {
+interface ContentIconProps extends QAProps, ClassNameProps {
     icon?: ThemeSupporting<ImageProps | SVGIcon>;
     gravityIcon?: ThemeSupporting<GravityIconProps>;
 }
-declare const ContentListItemIcon: ({ icon, className, qa, gravityIcon }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-export default ContentListItemIcon;
+declare const ContentIcon: ({ icon, className, qa, gravityIcon }: ContentIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ContentIcon;

package/build/esm/components/{ContentList/ContentListItemIcon.js → ContentIcon/ContentIcon.js}

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon.js";
 function isIconSvg(icon) {
     return typeof icon === 'function';
 }
-const ContentListItemIcon = ({ icon, className, qa, gravityIcon }) => {
+const ContentIcon = ({ icon, className, qa, gravityIcon }) => {
     const theme = useTheme();
     const iconThemed = getThemedValue(icon, theme);
     const gravityIconThemed = getThemedValue(gravityIcon, theme);
@@ -15,5 +15,5 @@ const ContentListItemIcon = ({ icon, className, qa, gravityIcon }) => {
     }
     return _jsx(Icon, { icon: iconThemed, gravityIcon: gravityIconThemed, className: className, qa: qa });
 };
-export default ContentListItemIcon;
-//# sourceMappingURL=ContentListItemIcon.js.map
+export default ContentIcon;
+//# sourceMappingURL=ContentIcon.js.map

package/build/esm/components/ContentIcon/ContentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentIcon.js","sourceRoot":"../../../../src","sources":["components/ContentIcon/ContentIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAkB,cAAc,EAAC,6BAAoB;AAC5D,OAAO,IAAI,wBAAqB;AAOhC,SAAS,SAAS,CAAC,IAA0B;IACzC,OAAO,OAAO,IAAI,KAAK,UAAU,CAAC;AACtC,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAmB,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,MAAM,iBAAiB,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAE7D,IAAI,UAAU,IAAI,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,UAAU,CAAC;QACjC,OAAO,CACH,wBACI,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI,GACrC,CACT,CAAC;IACN,CAAC;IAED,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,GAAI,CAAC;AACpG,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {useTheme} from '../../context/theme';\nimport {ClassNameProps, GravityIconProps, ImageProps, QAProps, SVGIcon} from '../../models';\nimport {ThemeSupporting, getThemedValue} from '../../utils';\nimport Icon from '../Icon/Icon';\n\ninterface ContentIconProps extends QAProps, ClassNameProps {\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nfunction isIconSvg(icon: ImageProps | SVGIcon): icon is SVGIcon {\n    return typeof icon === 'function';\n}\n\nconst ContentIcon = ({icon, className, qa, gravityIcon}: ContentIconProps) => {\n    const theme = useTheme();\n    const iconThemed = getThemedValue(icon, theme);\n    const gravityIconThemed = getThemedValue(gravityIcon, theme);\n\n    if (iconThemed && isIconSvg(iconThemed)) {\n        const IconComponent = iconThemed;\n        return (\n            <div>\n                <IconComponent className={className} />\n            </div>\n        );\n    }\n\n    return <Icon icon={iconThemed} gravityIcon={gravityIconThemed} className={className} qa={qa} />;\n};\n\nexport default ContentIcon;\n"]}

package/build/esm/components/ContentLabels/ContentLabels.css

@@ -0,0 +1,53 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-content-labels {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.pc-content-labels__label {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  padding: 5px 11px;
+  background-color: var(--g-color-base-generic);
+  border-radius: 6px;
+}
+.pc-content-labels__label, .pc-content-labels__label-text {
+  color: var(--g-color-text-primary);
+}
+.pc-content-labels__label > .pc-icon, .pc-content-labels__label > picture {
+  display: flex;
+}
+.pc-content-labels__label-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 6px;
+}
+.pc-content-labels__label_theme_light {
+  background-color: var(--g-color-private-black-50);
+}
+.pc-content-labels__label_theme_light,
+.pc-content-labels__label_theme_light .pc-content-labels__label-text {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-labels__label_theme_dark {
+  background-color: var(--g-color-private-white-100);
+}
+.pc-content-labels__label_theme_dark,
+.pc-content-labels__label_theme_dark .pc-content-labels__label-text {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-labels_size_l .pc-content-labels__label, .pc-content-labels_size_m .pc-content-labels__label {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pc-content-labels_size_s .pc-content-labels__label {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}

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

@@ -0,0 +1,4 @@
+import { ClassNameProps, ContentLabelsProps, QAProps } from "../../models/index.js";
+import './ContentLabels.css';
+declare const ContentLabels: ({ className, labels, theme, size, qa, }: ContentLabelsProps & ClassNameProps & QAProps) => import("react/jsx-runtime").JSX.Element;
+export default ContentLabels;

package/build/esm/components/ContentLabels/ContentLabels.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block, getQaAttrubutes } from "../../utils/index.js";
+import ContentIcon from "../ContentIcon/ContentIcon.js";
+import './ContentLabels.css';
+const b = block('content-labels');
+const ContentLabels = ({ className, labels, theme, size = 'l', qa, }) => {
+    const qaAttributes = getQaAttrubutes(qa, ['icon', 'text']);
+    return (_jsx("div", { className: b({ size }, className), children: labels.map((label) => {
+            const { text, icon, gravityIcon } = label;
+            return (_jsxs("div", { className: b('label', { theme }), children: [_jsx(ContentIcon, { className: b('label-icon'), icon: icon, gravityIcon: gravityIcon, qa: qaAttributes.icon }), _jsx("span", { className: b('label-text'), "data-qa": qaAttributes.text, children: text })] }, text));
+        }) }));
+};
+export default ContentLabels;
+//# sourceMappingURL=ContentLabels.js.map

package/build/esm/components/ContentLabels/ContentLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLabels.js","sourceRoot":"../../../../src","sources":["components/ContentLabels/ContentLabels.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,WAAW,sCAAmC;AAErD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,aAAa,GAAG,CAAC,EACnB,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAI,GAAG,GAAG,EACV,EAAE,GAC0C,EAAE,EAAE;IAChD,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAC/B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;YAExC,OAAO,CACH,eAAgB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAC,CAAC,aAC1C,KAAC,WAAW,IACR,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,EACF,eAAM,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,aAAW,YAAY,CAAC,IAAI,YACvD,IAAI,GACF,KATD,IAAI,CAUR,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {ClassNameProps, ContentLabelsProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport ContentIcon from '../ContentIcon/ContentIcon';\n\nimport './ContentLabels.scss';\n\nconst b = block('content-labels');\n\nconst ContentLabels = ({\n    className,\n    labels,\n    theme,\n    size = 'l',\n    qa,\n}: ContentLabelsProps & ClassNameProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['icon', 'text']);\n\n    return (\n        <div className={b({size}, className)}>\n            {labels.map((label) => {\n                const {text, icon, gravityIcon} = label;\n\n                return (\n                    <div key={text} className={b('label', {theme})}>\n                        <ContentIcon\n                            className={b('label-icon')}\n                            icon={icon}\n                            gravityIcon={gravityIcon}\n                            qa={qaAttributes.icon}\n                        />\n                        <span className={b('label-text')} data-qa={qaAttributes.text}>\n                            {text}\n                        </span>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentLabels;\n"]}

package/build/esm/components/ContentList/ContentList.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { block } from "../../utils/index.js";
 import { getQaAttrubutes } from "../../utils/blocks.js";
+import ContentIcon from "../ContentIcon/ContentIcon.js";
 import YFMWrapper from "../YFMWrapper/YFMWrapper.js";
-import ItemIcon from "./ContentListItemIcon.js";
 import './ContentList.css';
 const b = block('content-list');
 function getHeadingLevel(size) {
@@ -20,7 +20,7 @@ const ContentList = ({ list, size = 'l', qa, theme }) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
     return (_jsx("div", { className: b({ size, theme }), "data-qa": qa, children: list?.map((item) => {
             const { icon, title, text, gravityIcon } = item;
-            return (_jsxs("div", { className: b('item', { 'without-title': !title }), children: [_jsx(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image, gravityIcon: gravityIcon }), _jsxs("div", { children: [title &&
+            return (_jsxs("div", { className: b('item', { 'without-title': !title }), children: [_jsx(ContentIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image, gravityIcon: gravityIcon }), _jsxs("div", { children: [title &&
                                 React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, _jsx(YFMWrapper, { content: title, modifiers: { constructor: true } })), text && (_jsx(YFMWrapper, { contentClassName: b('text', { 'without-title': !title }), content: text, modifiers: { constructor: true }, qa: qaAttributes.text }))] })] }, uuidv4()));
         }) }));
 };

package/build/esm/components/ContentList/ContentList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,IAAI,MAAM,EAAC,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,eAAe,EAAC,8BAA2B;AACnD,OAAO,UAAU,oCAAiC;AAElD,OAAO,QAAQ,iCAA8B;AAE7C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC;YAC9C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,KAAC,QAAQ,IACL,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,WAAW,EAAE,WAAW,GAC1B,EACF,0BACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,KAAC,UAAU,IACP,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,EACtD,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAtBiD,MAAM,EAAE,CAuB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport ItemIcon from './ContentListItemIcon';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text, gravityIcon} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ItemIcon\n                            icon={icon}\n                            className={b('icon')}\n                            qa={qaAttributes.image}\n                            gravityIcon={gravityIcon}\n                        />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    contentClassName={b('text', {'without-title': !title})}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}
+{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,IAAI,MAAM,EAAC,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,eAAe,EAAC,8BAA2B;AACnD,OAAO,WAAW,sCAAmC;AACrD,OAAO,UAAU,oCAAiC;AAElD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC;YAC9C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,WAAW,EAAE,WAAW,GAC1B,EACF,0BACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,KAAC,UAAU,IACP,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,EACtD,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAtBiD,MAAM,EAAE,CAuB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport ContentIcon from '../ContentIcon/ContentIcon';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text, gravityIcon} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ContentIcon\n                            icon={icon}\n                            className={b('icon')}\n                            qa={qaAttributes.image}\n                            gravityIcon={gravityIcon}\n                        />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    contentClassName={b('text', {'without-title': !title})}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}