@gravity-ui/page-constructor 8.2.2 → 8.4.0

package/README.md

@@ -142,7 +142,7 @@ interface PageConstructorProviderProps {
   location?: Location; //API of the browser or router history, the page URL.
   analytics?: AnalyticsContextProps; // function to handle analytics event
 
-  ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
+  ssrConfig?: SSR; //A flag indicating that the code is run on the server side.
   theme?: 'light' | 'dark'; //Theme to render the page with.
   mapsContext?: MapsContextType; //Params for map: apikey, type, scriptSrc, nonce
 }

package/build/cjs/blocks/ContentLayout/ContentLayout.css

@@ -1,4 +1,4 @@
-.pc-content-layout-block__files_size_l, .pc-content-layout-block__files_size_s {
+.pc-content-layout-block__files_size_l, .pc-content-layout-block__files_size_xl, .pc-content-layout-block__files_size_s {
   margin: 0;
 }
 
@@ -18,7 +18,7 @@ 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-layout-block__files_size_l {
+.pc-content-layout-block__files_size_l, .pc-content-layout-block__files_size_xl {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
 }

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -17,7 +17,9 @@ function getFileTextSize(size) {
     switch (size) {
         case 's':
             return 's';
+        case 'm':
         case 'l':
+        case 'xl':
         default:
             return 'l';
     }

package/build/cjs/blocks/ContentLayout/ContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sourceRoot":"../../../../src","sources":["blocks/ContentLayout/ContentLayout.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA+B;AAE/B,0DAA2D;AAC3D,kDAA4C;AAC5C,wDAA6C;AAC7C,kFAAgE;AAChE,8CAA+B;AAE/B,0DAAyC;AACzC,gDAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,sBAAsB,CAAC,CAAC;AAExC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT;YACI,OAAO,GAAG,CAAC;IACnB,CAAC;AACL,CAAC;AAED,SAAS,YAAY,CAAC,IAAqB;IACvC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QAC5B,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,CAAC;QAC7B,KAAK,GAAG,CAAC;QACT;YACI,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;IAChC,CAAC;AACL,CAAC;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACjE,MAAM,WAAW,GAAG,IAAA,mCAAc,GAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,WAAW,IAAI,uBAAW,CAAC,EAAE,CAAC;IAE/C,MAAM,EACF,WAAW,EACX,WAAW,EACX,IAAI,GAAG,GAAG,EACV,UAAU,EACV,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,GAAG,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,WAAW,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAC/B,MAAM,gBAAgB,GAAG,IAAA,sBAAc,EAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAEjE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAC,CAAC,aAC7D,uBAAC,oBAAO,IACJ,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,KACnB,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,EACD,WAAW,IAAI,CACZ,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,EAAE,KAAK,QAAC,KAAK,EAAE,QAAQ,YAC9D,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,2BAAC,qBAAQ,IACL,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAChB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE,KAAK,GACd,CACL,CAAC,GACA,CACT,EACA,UAAU,IAAI,CACX,gCAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YAC3B,uBAAC,4BAAe,IACZ,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,KAC3B,gBAAgB,EACpB,IAAI,EAAE,QAAQ,GAChB,GACA,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AArDW,QAAA,kBAAkB,sBAqD7B;AACF,kBAAe,0BAAkB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, FileLink} from '../../components';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Col} from '../../grid';\nimport {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport './ContentLayout.scss';\n\nconst b = block('content-layout-block');\n\nfunction getFileTextSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 's';\n        case 'l':\n        default:\n            return 'l';\n    }\n}\n\nfunction getTextWidth(size: ContentTextSize) {\n    switch (size) {\n        case 's':\n            return {all: 12, md: 6};\n        case 'l':\n            return {all: 12, md: 12};\n        case 'm':\n        default:\n            return {all: 12, md: 8};\n    }\n}\n\nexport const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {\n    const windowWidth = useWindowWidth();\n    const isMobile = windowWidth <= BREAKPOINTS.sm;\n\n    const {\n        textContent,\n        fileContent,\n        size = 'l',\n        background,\n        centered,\n        theme = 'default',\n        textWidth = 'm',\n    } = props;\n\n    const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);\n    const globalTheme = useTheme();\n    const themedBackground = getThemedValue(background, globalTheme);\n\n    return (\n        <div className={b({size, theme, background: Boolean(background)})}>\n            <Content\n                className={b('content')}\n                {...textContent}\n                size={size}\n                centered={centered}\n                colSizes={colSizes}\n                theme={theme}\n            />\n            {fileContent && (\n                <Col className={b('files', {size, centered})} reset sizes={colSizes}>\n                    {fileContent.map((file) => (\n                        <FileLink\n                            className={b('file')}\n                            {...file}\n                            key={file.href}\n                            type=\"horizontal\"\n                            textSize={getFileTextSize(size)}\n                            theme={theme}\n                        />\n                    ))}\n                </Col>\n            )}\n            {background && (\n                <div className={b('background')}>\n                    <BackgroundImage\n                        className={b('background-item')}\n                        {...themedBackground}\n                        hide={isMobile}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\nexport default ContentLayoutBlock;\n"]}
+{"version":3,"file":"ContentLayout.js","sourceRoot":"../../../../src","sources":["blocks/ContentLayout/ContentLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, FileLink} from '../../components';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Col} from '../../grid';\nimport {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport './ContentLayout.scss';\n\nconst b = block('content-layout-block');\n\nfunction getFileTextSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 's';\n        case 'm':\n        case 'l':\n        case 'xl':\n        default:\n            return 'l';\n    }\n}\n\nfunction getTextWidth(size: ContentTextSize) {\n    switch (size) {\n        case 's':\n            return {all: 12, md: 6};\n        case 'l':\n            return {all: 12, md: 12};\n        case 'm':\n        default:\n            return {all: 12, md: 8};\n    }\n}\n\nexport const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {\n    const windowWidth = useWindowWidth();\n    const isMobile = windowWidth <= BREAKPOINTS.sm;\n\n    const {\n        textContent,\n        fileContent,\n        size = 'l',\n        background,\n        centered,\n        theme = 'default',\n        textWidth = 'm',\n    } = props;\n\n    const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);\n    const globalTheme = useTheme();\n    const themedBackground = getThemedValue(background, globalTheme);\n\n    return (\n        <div className={b({size, theme, background: Boolean(background)})}>\n            <Content\n                className={b('content')}\n                {...textContent}\n                size={size}\n                centered={centered}\n                colSizes={colSizes}\n                theme={theme}\n            />\n            {fileContent && (\n                <Col className={b('files', {size, centered})} reset sizes={colSizes}>\n                    {fileContent.map((file) => (\n                        <FileLink\n                            className={b('file')}\n                            {...file}\n                            key={file.href}\n                            type=\"horizontal\"\n                            textSize={getFileTextSize(size)}\n                            theme={theme}\n                        />\n                    ))}\n                </Col>\n            )}\n            {background && (\n                <div className={b('background')}>\n                    <BackgroundImage\n                        className={b('background-item')}\n                        {...themedBackground}\n                        hide={isMobile}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\nexport default ContentLayoutBlock;\n"]}

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

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

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

@@ -129,17 +129,6 @@ 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/cjs/blocks/Form/Form.css

@@ -4,6 +4,15 @@ unpredictable css rules order in build */
   border-radius: 32px;
   position: relative;
 }
+.pc-form-block__additional-content {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 20px;
+}
+.pc-form-block__additional-content_centered {
+  justify-content: center;
+}
 .pc-form-block__title {
   margin: 0 0 24px 10px;
 }
@@ -94,7 +103,7 @@ 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 {
+  .pc-form-block_with-background .pc-form-block__row .pc-form-block__additional-content, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__additional-content {
     justify-content: center;
   }
   .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {

package/build/cjs/blocks/Form/Form.js

@@ -16,7 +16,7 @@ const utils_2 = require("./utils.js");
 const b = (0, utils_1.block)('form-block');
 const colSizes = { [grid_1.GridColumnSize.Lg]: 6, [grid_1.GridColumnSize.All]: 12 };
 const Form = (props) => {
-    const { formData, title, textContent, direction = models_1.FormBlockDirection.Center, background, customFormNode, } = props;
+    const { formData, title, textContent, direction = models_1.FormBlockDirection.Center, background, customFormNode, additionalContentNode, } = props;
     const [contentLoaded, setContentLoaded] = React.useState(false);
     const isMobile = React.useContext(mobileContext_1.MobileContext);
     const theme = (0, theme_1.useTheme)();
@@ -46,7 +46,9 @@ const Form = (props) => {
                         ? grid_1.GridAlignItems.Center
                         : grid_1.GridAlignItems.Start, className: b('row', {
                         direction,
-                    }), children: [(0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('content-col'), children: textContent && ((0, jsx_runtime_1.jsx)("div", { className: b('content-wrapper'), children: (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { theme: "default", ...textContent, centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }) })) }), (0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('form-col'), children: (0, jsx_runtime_1.jsx)("div", { className: b('form-wrapper'), children: (0, jsx_runtime_1.jsx)("div", { className: b('full-form', {
+                    }), children: [(0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('content-col'), children: textContent && ((0, jsx_runtime_1.jsxs)("div", { className: b('content-wrapper'), children: [(0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { theme: "default", ...textContent, centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }), additionalContentNode && ((0, jsx_runtime_1.jsx)("div", { className: b('additional-content', {
+                                            centered: direction === models_1.FormBlockDirection.Center,
+                                        }), children: additionalContentNode }))] })) }), (0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('form-col'), children: (0, jsx_runtime_1.jsx)("div", { className: b('form-wrapper'), children: (0, jsx_runtime_1.jsx)("div", { className: b('full-form', {
                                         hidden: !contentLoaded,
                                     }), children: customFormNode || ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { title: {
                                                     text: title,

package/build/cjs/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 {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"]}
+{"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        additionalContentNode,\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                                {additionalContentNode && (\n                                    <div\n                                        className={b('additional-content', {\n                                            centered: direction === FormBlockDirection.Center,\n                                        })}\n                                    >\n                                        {additionalContentNode}\n                                    </div>\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/cjs/blocks/Form/schema.d.ts

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

package/build/cjs/blocks/Header/Header.css

@@ -67,6 +67,12 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-accent-font-weight);
   position: relative;
 }
+@media (max-width: 769px) {
+  .pc-header-block__title.pc-header-block__title {
+    font-size: var(--g-text-display-3-font-size);
+    line-height: var(--g-text-display-3-line-height);
+  }
+}
 @media (max-width: 577px) {
   .pc-header-block__title.pc-header-block__title {
     font-size: var(--g-text-display-2-font-size);

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

@@ -86,31 +86,7 @@ exports.HeaderProperties = {
         type: 'string',
         enum: ['default', 'dark'],
     },
-    breadcrumbs: {
-        type: 'object',
-        additionalProperties: false,
-        required: ['items'],
-        properties: {
-            items: {
-                type: 'array',
-                items: {
-                    type: 'object',
-                    additionalProperties: false,
-                    required: ['url', 'text'],
-                    properties: {
-                        url: {
-                            type: 'string',
-                        },
-                        text: {
-                            type: 'string',
-                            contentType: 'text',
-                        },
-                    },
-                },
-            },
-            theme: { type: 'string', enum: ['light', 'dark'] },
-        },
-    },
+    breadcrumbs: common_1.HeaderBreadcrumbsProps,
     status: {
         type: 'string',
     },

package/build/cjs/blocks/Header/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderVideoIframeProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['src'],\n    properties: {\n        src: {type: 'string'},\n        autoplay: {type: 'boolean'},\n        previewImg: {type: 'string'},\n        height: {type: 'number'},\n    },\n};\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    videoIframe: withTheme(HeaderVideoIframeProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: {\n        type: 'object',\n        additionalProperties: false,\n        required: ['items'],\n        properties: {\n            items: {\n                type: 'array',\n                items: {\n                    type: 'object',\n                    additionalProperties: false,\n                    required: ['url', 'text'],\n                    properties: {\n                        url: {\n                            type: 'string',\n                        },\n                        text: {\n                            type: 'string',\n                            contentType: 'text',\n                        },\n                    },\n                },\n            },\n            theme: {type: 'string', enum: ['light', 'dark']},\n        },\n    },\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    HeaderBreadcrumbsProps,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderVideoIframeProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['src'],\n    properties: {\n        src: {type: 'string'},\n        autoplay: {type: 'boolean'},\n        previewImg: {type: 'string'},\n        height: {type: 'number'},\n    },\n};\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    videoIframe: withTheme(HeaderVideoIframeProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: HeaderBreadcrumbsProps,\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}

package/build/cjs/blocks/Hero/Hero.css

@@ -0,0 +1,211 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-hero-block {
+  position: relative;
+}
+.pc-hero-block__background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: min(1440px, 100%);
+  border-radius: var(--pc-border-radius);
+  transform: translateX(-50%);
+}
+.pc-hero-block__background_full-width {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  border-radius: initial;
+}
+.pc-hero-block__background > div {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-image {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-video {
+  width: 100%;
+  height: 100%;
+}
+.pc-hero-block__background-video > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pc-hero-block__wrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 1fr;
+  gap: 16px;
+  padding-inline: 8px;
+}
+.pc-hero-block__breadcrumbs {
+  position: absolute;
+  top: 16px;
+  left: 8px;
+  max-width: 100%;
+}
+.pc-hero-block__content {
+  grid-column: span 6;
+  padding-inline-end: 48px;
+}
+.pc-hero-block__content_vertical-offset_s {
+  padding-block: 48px;
+}
+.pc-hero-block__content_vertical-offset_m {
+  padding-block: 96px;
+}
+.pc-hero-block__content_vertical-offset_l {
+  padding-block: 128px;
+}
+.pc-hero-block__content_vertical-offset_xl {
+  padding-block: 160px;
+}
+.pc-hero-block__content_no-media {
+  width: 100%;
+}
+.pc-hero-block__content-overtitle {
+  margin-bottom: 8px;
+}
+.pc-hero-block__content-overtitle_theme_light {
+  --_--overtitle-color: var(--g-color-text-dark-primary);
+}
+.pc-hero-block__content-overtitle_theme_dark {
+  --_--overtitle-color: var(--g-color-text-light-primary);
+}
+.pc-hero-block__content-overtitle,
+.pc-hero-block__content-overtitle .yfm_constructor {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--_--overtitle-color);
+}
+.pc-hero-block__media {
+  position: relative;
+  grid-column: span 6;
+  padding-block: 16px;
+}
+.pc-hero-block__media-container {
+  position: absolute;
+  inset: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pc-hero-block__media-container-content,
+.pc-hero-block__media-container-content .pc-media-component-image__item,
+.pc-hero-block__media-container-content .pc-fullscreen-image,
+.pc-hero-block__media-container-content .pc-fullscreen-image__image-wrapper,
+.pc-hero-block__media-container-content .pc-media-component-video__wrap,
+.pc-hero-block__media-container-content .pc-media-component-video__react-player,
+.pc-hero-block__media-container-content .pc-default-video,
+.pc-hero-block__media-container-content .pc-ReactPlayer__preview-img,
+.pc-hero-block__media-container-content .pc-full-screen-media,
+.pc-hero-block__media-container-content .pc-full-screen-media__media-wrapper {
+  width: 100%;
+  height: auto;
+}
+.pc-hero-block__media-container-content .pc-ReactPlayer__player,
+.pc-hero-block__media-container-content .pc-ReactPlayer__player > video,
+.pc-hero-block__media-container-content .react-player__preview {
+  /* stylelint-disable declaration-no-important */
+  width: 100% !important;
+  height: auto !important;
+  /* stylelint-enable declaration-no-important */
+}
+.pc-hero-block__media-container-content_vertical,
+.pc-hero-block__media-container-content_vertical .pc-media-component-image__item,
+.pc-hero-block__media-container-content_vertical .pc-fullscreen-image,
+.pc-hero-block__media-container-content_vertical .pc-fullscreen-image__image-wrapper,
+.pc-hero-block__media-container-content_vertical .pc-media-component-video__wrap,
+.pc-hero-block__media-container-content_vertical .pc-media-component-video__react-player,
+.pc-hero-block__media-container-content_vertical .pc-default-video,
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__preview-img,
+.pc-hero-block__media-container-content_vertical .pc-full-screen-media,
+.pc-hero-block__media-container-content_vertical .pc-full-screen-media__media-wrapper {
+  width: auto;
+  height: 100%;
+}
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player,
+.pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player > video,
+.pc-hero-block__media-container-content_vertical .react-player__preview {
+  /* stylelint-disable declaration-no-important */
+  width: auto !important;
+  height: 100% !important;
+  /* stylelint-enable declaration-no-important */
+}
+.pc-hero-block__media-container-content_round-corners {
+  border-radius: var(--pc-border-radius);
+}
+.pc-hero-block__media-container-content .pc-ReactPlayer__player {
+  display: flex;
+}
+.pc-hero-block__media-container-content .pc-Media__youtube {
+  border-radius: initial;
+}
+.pc-hero-block__media-container-content .pc-media-component-data-lens__wrap,
+.pc-hero-block__media-container-content .pc-media-component-iframe {
+  margin: 0;
+}
+@media (max-width: 993px) {
+  .pc-hero-block__content {
+    grid-column: span 7;
+  }
+  .pc-hero-block__content_no-media {
+    grid-column: span 12;
+  }
+  .pc-hero-block__media {
+    grid-column: span 5;
+  }
+}
+@media (max-width: 769px) {
+  .pc-hero-block__wrapper {
+    padding-block: 20px 24px;
+  }
+  .pc-hero-block__breadcrumbs {
+    grid-column: span 12;
+    order: 1;
+    position: initial;
+  }
+  .pc-hero-block__content {
+    grid-column: span 12;
+    order: 3;
+    width: 100%;
+    padding-block: 0 16px;
+    padding-inline: 0;
+  }
+  .pc-hero-block__media {
+    grid-column: span 12;
+    order: 2;
+    width: 100%;
+    padding-block: 0;
+  }
+  .pc-hero-block__media-container {
+    position: initial;
+    inset: 0;
+  }
+  .pc-hero-block__media-container-content_vertical,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-image__item,
+  .pc-hero-block__media-container-content_vertical .pc-fullscreen-image,
+  .pc-hero-block__media-container-content_vertical .pc-fullscreen-image__image-wrapper,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-video__wrap,
+  .pc-hero-block__media-container-content_vertical .pc-media-component-video__react-player,
+  .pc-hero-block__media-container-content_vertical .pc-default-video,
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__preview-img,
+  .pc-hero-block__media-container-content_vertical .pc-full-screen-media,
+  .pc-hero-block__media-container-content_vertical .pc-full-screen-media__media-wrapper {
+    width: 100%;
+    height: auto;
+  }
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player,
+  .pc-hero-block__media-container-content_vertical .pc-ReactPlayer__player > video,
+  .pc-hero-block__media-container-content_vertical .react-player__preview {
+    /* stylelint-disable declaration-no-important */
+    width: 100% !important;
+    height: auto !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}

package/build/cjs/blocks/Hero/Hero.d.ts

@@ -0,0 +1,3 @@
+import { HeroBlockProps } from "../../models/index.js";
+declare const Hero: (props: HeroBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default Hero;

package/build/cjs/blocks/Hero/Hero.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const components_1 = require("../../components/index.js");
+const constants_1 = require("../../constants.js");
+const theme_1 = require("../../context/theme/index.js");
+const windowWidthContext_1 = require("../../context/windowWidthContext/index.js");
+const grid_1 = require("../../grid/index.js");
+const sub_blocks_1 = require("../../sub-blocks/index.js");
+const utils_1 = require("../../utils/index.js");
+const hooks_1 = require("./hooks.js");
+const b = (0, utils_1.block)('hero-block');
+const Hero = (props) => {
+    const { breadcrumbs, overtitle, buttons, media: themedMedia, fullWidth, verticalOffset = 'm', theme: contentTheme = 'default', background: themedBackground, ...contentProps } = props;
+    const [mediaAspectRatio, setMediaAspectRatio] = React.useState(Infinity);
+    const { aspectRatio: mediaContainerAspectRatio, ref: mediaContainerRef } = (0, hooks_1.useContainerAspectRatio)();
+    const isDesktop = (0, windowWidthContext_1.useWindowWidth)() > constants_1.BREAKPOINTS.md;
+    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;
+    const contextTheme = (0, theme_1.useTheme)();
+    const theme = contentTheme === 'default' ? contextTheme : contentTheme;
+    const background = (0, utils_1.getThemedValue)(themedBackground, theme);
+    const media = (0, utils_1.getThemedValue)(themedMedia, theme);
+    const buttonProps = React.useMemo(() => buttons?.map((buttonThemed) => {
+        if (React.isValidElement(buttonThemed)) {
+            return buttonThemed;
+        }
+        const button = (0, utils_1.getThemedValue)(buttonThemed, theme);
+        return {
+            size: 'xl',
+            ...button,
+        };
+    }), [buttons, theme]);
+    const onMediaIntrinsicSizeChange = React.useCallback(({ width, height }) => setMediaAspectRatio(width / height), []);
+    return ((0, jsx_runtime_1.jsxs)("header", { className: b(), children: [background && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('background', {
+                    ['full-width']: fullWidth,
+                }), imageClassName: b('background-image'), videoClassName: b('background-video'), ...background, isBackground: true })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(components_1.HeaderBreadcrumbs, { className: b('breadcrumbs'), ...breadcrumbs, theme: theme })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {
+                                ['vertical-offset']: verticalOffset,
+                                ['no-media']: !media,
+                            }), children: [overtitle && ((0, jsx_runtime_1.jsx)("div", { className: b('content-overtitle', { theme }), children: typeof overtitle === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { tagName: "span", content: overtitle, modifiers: {
+                                            constructor: true,
+                                            constructorTheme: theme,
+                                        } })) : (overtitle) })), (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { size: "xl", colSizes: { all: 12 }, ...contentProps, buttons: buttonProps, theme: contentTheme })] }), media && ((0, jsx_runtime_1.jsx)("div", { className: b('media'), children: (0, jsx_runtime_1.jsx)("div", { className: b('media-container'), ref: mediaContainerRef, children: (0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media-container-content', {
+                                        ['round-corners']: media.roundCorners ?? true,
+                                        vertical: isDesktop && isMediaVertical,
+                                    }), ...media, disablePlayerAutoSizing: true, onIntrinsicSizeChange: onMediaIntrinsicSizeChange }) }) }))] }) })] }));
+};
+exports.default = Hero;
+//# sourceMappingURL=Hero.js.map

package/build/cjs/blocks/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"../../../../src","sources":["blocks/Hero/Hero.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,0DAAsE;AACtE,kDAA4C;AAC5C,wDAA6C;AAC7C,kFAAgE;AAChE,8CAAgC;AAEhC,0DAAyC;AACzC,gDAAkD;AAElD,sCAAgD;AAIhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAAG,CAAC,KAAqB,EAAE,EAAE;IACnC,MAAM,EACF,WAAW,EACX,SAAS,EACT,OAAO,EACP,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,KAAK,EAAE,YAAY,GAAG,SAAS,EAC/B,UAAU,EAAE,gBAAgB,EAC5B,GAAG,YAAY,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,QAAQ,CAAC,CAAC;IAEjF,MAAM,EAAC,WAAW,EAAE,yBAAyB,EAAE,GAAG,EAAE,iBAAiB,EAAC,GAClE,IAAA,+BAAuB,GAAE,CAAC;IAE9B,MAAM,SAAS,GAAG,IAAA,mCAAc,GAAE,GAAG,uBAAW,CAAC,EAAE,CAAC;IACpD,MAAM,eAAe,GAAG,gBAAgB,GAAG,yBAAyB,CAAC;IAErE,MAAM,YAAY,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAChC,MAAM,KAAK,GAAG,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAE,YAAsB,CAAC;IAElF,MAAM,UAAU,GAAG,IAAA,sBAAc,EAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,IAAA,sBAAc,EAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CACD,OAAO,EAAE,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QAC1B,IAAI,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC;YACrC,OAAO,YAAY,CAAC;QACxB,CAAC;QAED,MAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,YAAY,EAAE,KAAK,CAAgB,CAAC;QAElE,OAAO;YACH,IAAI,EAAE,IAAI;YACV,GAAG,MAAM;SACZ,CAAC;IACN,CAAC,CAAC,EACN,CAAC,OAAO,EAAE,KAAK,CAAC,CACnB,CAAC;IAEF,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,EAAC,KAAK,EAAE,MAAM,EAAkC,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,GAAG,MAAM,CAAC,EACzF,EAAE,CACL,CAAC;IAEF,OAAO,CACH,oCAAQ,SAAS,EAAE,CAAC,EAAE,aACjB,UAAU,IAAI,CACX,uBAAC,kBAAK,IACF,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE;oBACvB,CAAC,YAAY,CAAC,EAAE,SAAS;iBAC5B,CAAC,EACF,cAAc,EAAE,CAAC,CAAC,kBAAkB,CAAC,EACrC,cAAc,EAAE,CAAC,CAAC,kBAAkB,CAAC,KACjC,UAAU,EACd,YAAY,SACd,CACL,EACD,uBAAC,WAAI,cACD,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACvB,WAAW,IAAI,CACZ,uBAAC,8BAAiB,IACd,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,KACvB,WAAW,EACf,KAAK,EAAE,KAAK,GACd,CACL,EACD,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;gCACpB,CAAC,iBAAiB,CAAC,EAAE,cAAc;gCACnC,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK;6BACvB,CAAC,aAED,SAAS,IAAI,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,EAAE,EAAC,KAAK,EAAC,CAAC,YAC1C,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,uBAAC,uBAAU,IACP,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE;4CACP,WAAW,EAAE,IAAI;4CACjB,gBAAgB,EAAE,KAAK;yCAC1B,GACH,CACL,CAAC,CAAC,CAAC,CACA,SAAS,CACZ,GACC,CACT,EACD,uBAAC,oBAAO,IACJ,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAC,KACf,YAAY,EAChB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,GACrB,IACA,EACL,KAAK,IAAI,CACN,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,iBAAiB,YACxD,uBAAC,kBAAK,IACF,SAAS,EAAE,CAAC,CAAC,yBAAyB,EAAE;wCACpC,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,IAAI,IAAI;wCAC7C,QAAQ,EAAE,SAAS,IAAI,eAAe;qCACzC,CAAC,KACE,KAAK,EACT,uBAAuB,QACvB,qBAAqB,EAAE,0BAA0B,GACnD,GACA,GACJ,CACT,IACC,GACH,IACF,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {HeaderBreadcrumbs, Media, YFMWrapper} from '../../components';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Grid} from '../../grid';\nimport {ButtonProps, HeroBlockProps, Theme} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport {useContainerAspectRatio} from './hooks';\n\nimport './Hero.scss';\n\nconst b = block('hero-block');\n\nconst Hero = (props: HeroBlockProps) => {\n    const {\n        breadcrumbs,\n        overtitle,\n        buttons,\n        media: themedMedia,\n        fullWidth,\n        verticalOffset = 'm',\n        theme: contentTheme = 'default',\n        background: themedBackground,\n        ...contentProps\n    } = props;\n\n    const [mediaAspectRatio, setMediaAspectRatio] = React.useState<number>(Infinity);\n\n    const {aspectRatio: mediaContainerAspectRatio, ref: mediaContainerRef} =\n        useContainerAspectRatio();\n\n    const isDesktop = useWindowWidth() > BREAKPOINTS.md;\n    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;\n\n    const contextTheme = useTheme();\n    const theme = contentTheme === 'default' ? contextTheme : (contentTheme as Theme);\n\n    const background = getThemedValue(themedBackground, theme);\n    const media = getThemedValue(themedMedia, theme);\n\n    const buttonProps = React.useMemo<(ButtonProps | React.ReactNode)[] | undefined>(\n        () =>\n            buttons?.map((buttonThemed) => {\n                if (React.isValidElement(buttonThemed)) {\n                    return buttonThemed;\n                }\n\n                const button = getThemedValue(buttonThemed, theme) as ButtonProps;\n\n                return {\n                    size: 'xl',\n                    ...button,\n                };\n            }),\n        [buttons, theme],\n    );\n\n    const onMediaIntrinsicSizeChange = React.useCallback(\n        ({width, height}: {width: number; height: number}) => setMediaAspectRatio(width / height),\n        [],\n    );\n\n    return (\n        <header className={b()}>\n            {background && (\n                <Media\n                    className={b('background', {\n                        ['full-width']: fullWidth,\n                    })}\n                    imageClassName={b('background-image')}\n                    videoClassName={b('background-video')}\n                    {...background}\n                    isBackground\n                />\n            )}\n            <Grid>\n                <div className={b('wrapper')}>\n                    {breadcrumbs && (\n                        <HeaderBreadcrumbs\n                            className={b('breadcrumbs')}\n                            {...breadcrumbs}\n                            theme={theme}\n                        />\n                    )}\n                    <div\n                        className={b('content', {\n                            ['vertical-offset']: verticalOffset,\n                            ['no-media']: !media,\n                        })}\n                    >\n                        {overtitle && (\n                            <div className={b('content-overtitle', {theme})}>\n                                {typeof overtitle === 'string' ? (\n                                    <YFMWrapper\n                                        tagName=\"span\"\n                                        content={overtitle}\n                                        modifiers={{\n                                            constructor: true,\n                                            constructorTheme: theme,\n                                        }}\n                                    />\n                                ) : (\n                                    overtitle\n                                )}\n                            </div>\n                        )}\n                        <Content\n                            size=\"xl\"\n                            colSizes={{all: 12}}\n                            {...contentProps}\n                            buttons={buttonProps}\n                            theme={contentTheme}\n                        />\n                    </div>\n                    {media && (\n                        <div className={b('media')}>\n                            <div className={b('media-container')} ref={mediaContainerRef}>\n                                <Media\n                                    className={b('media-container-content', {\n                                        ['round-corners']: media.roundCorners ?? true,\n                                        vertical: isDesktop && isMediaVertical,\n                                    })}\n                                    {...media}\n                                    disablePlayerAutoSizing\n                                    onIntrinsicSizeChange={onMediaIntrinsicSizeChange}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </Grid>\n        </header>\n    );\n};\n\nexport default Hero;\n"]}

package/build/cjs/blocks/Hero/hooks.d.ts

@@ -0,0 +1,4 @@
+export declare const useContainerAspectRatio: () => {
+    aspectRatio: number;
+    ref: (mediaContainer: HTMLDivElement | null) => void;
+};

package/build/cjs/blocks/Hero/hooks.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerAspectRatio = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle.js"));
+const SIZE_UPDATE_FREQUENCY_MS = 100;
+const useContainerAspectRatio = () => {
+    const containerRef = React.useRef(null);
+    const [containerAspectRatio, setContainerAspectRatio] = React.useState(1);
+    const updateAspectRatio = React.useCallback(() => {
+        const container = containerRef.current;
+        if (container) {
+            setContainerAspectRatio(container.clientWidth / container.clientHeight);
+        }
+    }, []);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        const isResizeEventsSupported = 'ResizeObserver' in window;
+        if (!container || !isResizeEventsSupported) {
+            return () => { };
+        }
+        const observer = new ResizeObserver((0, throttle_1.default)(updateAspectRatio, SIZE_UPDATE_FREQUENCY_MS, { leading: true }));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [updateAspectRatio]);
+    return {
+        aspectRatio: containerAspectRatio,
+        ref: (mediaContainer) => {
+            if (mediaContainer) {
+                containerRef.current = mediaContainer;
+                updateAspectRatio();
+            }
+        },
+    };
+};
+exports.useContainerAspectRatio = useContainerAspectRatio;
+//# sourceMappingURL=hooks.js.map

package/build/cjs/blocks/Hero/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"../../../../src","sources":["blocks/Hero/hooks.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,0EAAuC;AAEvC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAE9B,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAElF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,IAAI,SAAS,EAAE,CAAC;YACZ,uBAAuB,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;QAC5E,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,MAAM,uBAAuB,GAAG,gBAAgB,IAAI,MAAM,CAAC;QAE3D,IAAI,CAAC,SAAS,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACzC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QACpB,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,cAAc,CAC/B,IAAA,kBAAQ,EAAC,iBAAiB,EAAE,wBAAwB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CACzE,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAE5B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO;QACH,WAAW,EAAE,oBAAoB;QACjC,GAAG,EAAE,CAAC,cAAqC,EAAE,EAAE;YAC3C,IAAI,cAAc,EAAE,CAAC;gBACjB,YAAY,CAAC,OAAO,GAAG,cAAc,CAAC;gBACtC,iBAAiB,EAAE,CAAC;YACxB,CAAC;QACL,CAAC;KACJ,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,uBAAuB,2BAsClC","sourcesContent":["import * as React from 'react';\n\nimport throttle from 'lodash/throttle';\n\nconst SIZE_UPDATE_FREQUENCY_MS = 100;\n\nexport const useContainerAspectRatio = () => {\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\n    const [containerAspectRatio, setContainerAspectRatio] = React.useState<number>(1);\n\n    const updateAspectRatio = React.useCallback(() => {\n        const container = containerRef.current;\n\n        if (container) {\n            setContainerAspectRatio(container.clientWidth / container.clientHeight);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const container = containerRef.current;\n        const isResizeEventsSupported = 'ResizeObserver' in window;\n\n        if (!container || !isResizeEventsSupported) {\n            return () => {};\n        }\n\n        const observer = new ResizeObserver(\n            throttle(updateAspectRatio, SIZE_UPDATE_FREQUENCY_MS, {leading: true}),\n        );\n\n        observer.observe(container);\n\n        return () => observer.disconnect();\n    }, [updateAspectRatio]);\n\n    return {\n        aspectRatio: containerAspectRatio,\n        ref: (mediaContainer: HTMLDivElement | null) => {\n            if (mediaContainer) {\n                containerRef.current = mediaContainer;\n                updateAspectRatio();\n            }\n        },\n    };\n};\n"]}