@doyourjob/gravity-ui-page-constructor 5.31.151 → 5.31.153

package/build/cjs/blocks/BannerMinify/BannerMinify.css

@@ -1,7 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-banner-minify-block {
-  align-items: end;
   --dc-accent-color: #001a2b;
   --dc-bg-color: #ffffff;
 }
@@ -9,6 +8,22 @@ unpredictable css rules order in build */
   --dc-accent-color: #ffffff;
   --dc-bg-color: #001a2b;
 }
+@media (min-width: 769px) {
+  .pc-banner-minify-block.pc-AnimateBlock .pc-banner-minify-block__row, .pc-AnimateBlock .pc-banner-minify-block .pc-banner-minify-block__row {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-banner-minify-block.pc-AnimateBlock.animate .pc-banner-minify-block__row, .pc-AnimateBlock .pc-banner-minify-block.animate .pc-banner-minify-block__row {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-banner-minify-block__row {
+  align-items: end;
+}
 .pc-banner-minify-block__title {
   font-size: 48px;
   line-height: 52px;

package/build/cjs/blocks/BannerMinify/BannerMinify.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerMinifyBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Button_1 = tslib_1.__importDefault(require("./Button/Button"));
@@ -10,13 +11,14 @@ const b = (0, utils_1.block)('banner-minify-block');
 const leftColSizes = { lg: 5, all: 12 };
 const rightColSizes = { lg: 7, all: 12 };
 const BannerMinifyBlock = (props) => {
-    const { title, text, buttons, theme } = props;
-    return (react_1.default.createElement(grid_1.Row, { className: b({ theme }) },
-        react_1.default.createElement(grid_1.Col, { sizes: leftColSizes },
-            title && react_1.default.createElement("div", { className: b('title') }, title),
-            text && react_1.default.createElement("div", { className: b('text') }, text)),
-        react_1.default.createElement(grid_1.Col, { sizes: rightColSizes },
-            react_1.default.createElement("div", { className: b('buttons') }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (react_1.default.createElement(Button_1.default, Object.assign({ key: index }, button))))))));
+    const { animated, title, text, buttons, theme } = props;
+    return (react_1.default.createElement(components_1.AnimateBlock, { animate: animated, className: b({ theme }) },
+        react_1.default.createElement(grid_1.Row, { className: b('row') },
+            react_1.default.createElement(grid_1.Col, { sizes: leftColSizes },
+                title && react_1.default.createElement("div", { className: b('title') }, title),
+                text && react_1.default.createElement("div", { className: b('text') }, text)),
+            react_1.default.createElement(grid_1.Col, { sizes: rightColSizes },
+                react_1.default.createElement("div", { className: b('buttons') }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (react_1.default.createElement(Button_1.default, Object.assign({ key: index }, button)))))))));
 };
 exports.BannerMinifyBlock = BannerMinifyBlock;
 exports.default = exports.BannerMinifyBlock;

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

@@ -32,6 +32,9 @@ export declare const BannerMinifyBlock: {
                     };
                 };
             };
+            animated: {
+                type: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -5,7 +5,7 @@ const common_1 = require("../../schema/validators/common");
 exports.BannerMinifyBlock = {
     'banner-minify-block': {
         additionalProperties: false,
-        properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { theme: {
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), { theme: {
                 type: 'string',
                 enum: ['light', 'dark'],
             }, title: {

package/build/cjs/blocks/Benchmark/Benchmark.css

@@ -1,6 +1,19 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-benchmark-block {
+@media (min-width: 769px) {
+  .pc-benchmark-block.pc-AnimateBlock .pc-benchmark-block__root, .pc-AnimateBlock .pc-benchmark-block .pc-benchmark-block__root {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-benchmark-block.pc-AnimateBlock.animate .pc-benchmark-block__root, .pc-AnimateBlock .pc-benchmark-block.animate .pc-benchmark-block__root {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-benchmark-block__root {
   display: flex;
   flex-direction: column;
   align-items: center;

package/build/cjs/blocks/Benchmark/Benchmark.js

@@ -12,15 +12,16 @@ const Benchmark = ({ title, data, duration, animated }) => {
     const [playNumbers, setPlayNumbers] = (0, react_1.useState)(false);
     const handleOnAnimateStart = (0, react_1.useCallback)(() => setPlayNumbers(true), []);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated, onAnimateStart: handleOnAnimateStart },
-        title && react_1.default.createElement("div", { className: b('title') }, title),
-        react_1.default.createElement(grid_1.Grid, { className: b('content') },
-            react_1.default.createElement(grid_1.Row, null, data.map((column, columnIndex) => (react_1.default.createElement(grid_1.Col, { key: columnIndex, sizes: column.sizes || defaultSizes, className: b('wrap') },
-                column.title && (react_1.default.createElement(uikit_1.Text, { variant: "header-2", className: b('wrap-title') }, column.title)),
-                react_1.default.createElement("div", { className: b('wrap-inner') }, column.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item') },
-                    item.top && (react_1.default.createElement(uikit_1.Text, { variant: "body-1", className: b('label') }, item.top)),
-                    react_1.default.createElement("div", { className: b('value') },
-                        react_1.default.createElement(components_1.Odometer, { value: item.value, initValue: item.init, duration: duration, animated: playNumbers }),
-                        item.postfix),
-                    item.bottom && (react_1.default.createElement(uikit_1.Text, { variant: "body-1", className: b('label') }, item.bottom)))))))))))));
+        react_1.default.createElement("div", { className: b('root') },
+            title && react_1.default.createElement("div", { className: b('title') }, title),
+            react_1.default.createElement(grid_1.Grid, { className: b('content') },
+                react_1.default.createElement(grid_1.Row, null, data.map((column, columnIndex) => (react_1.default.createElement(grid_1.Col, { key: columnIndex, sizes: column.sizes || defaultSizes, className: b('wrap') },
+                    column.title && (react_1.default.createElement(uikit_1.Text, { variant: "header-2", className: b('wrap-title') }, column.title)),
+                    react_1.default.createElement("div", { className: b('wrap-inner') }, column.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('item') },
+                        item.top && (react_1.default.createElement(uikit_1.Text, { variant: "body-1", className: b('label') }, item.top)),
+                        react_1.default.createElement("div", { className: b('value') },
+                            react_1.default.createElement(components_1.Odometer, { value: item.value, initValue: item.init, duration: duration, animated: playNumbers }),
+                            item.postfix),
+                        item.bottom && (react_1.default.createElement(uikit_1.Text, { variant: "body-1", className: b('label') }, item.bottom))))))))))))));
 };
 exports.default = Benchmark;

package/build/cjs/blocks/Benefits/Benefits.css

@@ -1,8 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-benefits-block {
-  position: relative;
-  z-index: 0;
   --local-base-color: #001a2b;
   --local-bg-color: #ffffff;
 }
@@ -10,6 +8,23 @@ unpredictable css rules order in build */
   --local-base-color: #ffffff;
   --local-bg-color: #001a2b;
 }
+@media (min-width: 769px) {
+  .pc-benefits-block.pc-AnimateBlock .pc-benefits-block__root, .pc-AnimateBlock .pc-benefits-block .pc-benefits-block__root {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-benefits-block.pc-AnimateBlock.animate .pc-benefits-block__root, .pc-AnimateBlock .pc-benefits-block.animate .pc-benefits-block__root {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-benefits-block__root {
+  position: relative;
+  z-index: 0;
+}
 .pc-benefits-block__background {
   position: absolute;
   top: 0;

package/build/cjs/blocks/Benefits/Benefits.js

@@ -9,7 +9,7 @@ const BenefitsCard_1 = tslib_1.__importDefault(require("./BenefitsCard/BenefitsC
 const BenefitsLabel_1 = tslib_1.__importDefault(require("./BenefitsLabel/BenefitsLabel"));
 const b = (0, utils_1.block)('benefits-block');
 const BenefitsBlock = (props) => {
-    const { titleOne, postTitleOne, textOne, titleTwo, postTitleTwo, textTwo, background, cards, items, theme, accentColor, } = props;
+    const { animated, titleOne, postTitleOne, textOne, titleTwo, postTitleTwo, textTwo, background, cards, items, theme, accentColor, } = props;
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const data = items === null || items === void 0 ? void 0 : items[activeIndex];
     const handleClick = (0, react_1.useCallback)((index) => setActiveIndex(index), []);
@@ -18,25 +18,26 @@ const BenefitsBlock = (props) => {
             ['--local-accent-color']: accentColor,
         }
         : {}, [accentColor]);
-    return (react_1.default.createElement("div", { className: b({ theme }), style: styles },
-        react_1.default.createElement("div", { className: b('background'), style: { background } }),
-        (titleOne || postTitleOne || textOne) && (react_1.default.createElement("div", { className: b('header') },
-            (titleOne || postTitleOne) && (react_1.default.createElement("div", { className: b('title') },
-                titleOne,
-                react_1.default.createElement("span", null, postTitleOne))),
-            textOne && react_1.default.createElement(components_1.HTML, { className: b('text') }, textOne))),
-        Boolean(cards === null || cards === void 0 ? void 0 : cards.length) && (react_1.default.createElement("div", { className: b('cards') }, cards === null || cards === void 0 ? void 0 : cards.map((card, index) => (react_1.default.createElement(BenefitsCard_1.default, Object.assign({ key: index }, card)))))),
-        (titleTwo || postTitleTwo || textTwo) && (react_1.default.createElement("div", { className: b('header') },
-            (titleTwo || postTitleTwo) && (react_1.default.createElement("div", { className: b('title') },
-                titleTwo,
-                react_1.default.createElement("span", null, postTitleTwo))),
-            textTwo && react_1.default.createElement(components_1.HTML, { className: b('text') }, textTwo))),
-        Boolean(items === null || items === void 0 ? void 0 : items.length) && (react_1.default.createElement("div", { className: b('labels') }, items === null || items === void 0 ? void 0 : items.map((item, index) => (react_1.default.createElement(BenefitsLabel_1.default, Object.assign({ key: index }, item, { active: index === activeIndex, index: index, onClick: handleClick })))))),
-        data && (react_1.default.createElement("div", { className: b('images') }, data.images.map((image, index) => (react_1.default.createElement("div", { key: index, style: {
-                gridColumn: `span ${data.columns[index]}`,
-                gridRow: `span ${data.rows[index]}`,
-            } },
-            react_1.default.createElement(components_1.ImageBase, { className: b('image'), src: image }))))))));
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ theme }), animate: animated },
+        react_1.default.createElement("div", { className: b('root'), style: styles },
+            react_1.default.createElement("div", { className: b('background'), style: { background } }),
+            (titleOne || postTitleOne || textOne) && (react_1.default.createElement("div", { className: b('header') },
+                (titleOne || postTitleOne) && (react_1.default.createElement("div", { className: b('title') },
+                    titleOne,
+                    react_1.default.createElement("span", null, postTitleOne))),
+                textOne && react_1.default.createElement(components_1.HTML, { className: b('text') }, textOne))),
+            Boolean(cards === null || cards === void 0 ? void 0 : cards.length) && (react_1.default.createElement("div", { className: b('cards') }, cards === null || cards === void 0 ? void 0 : cards.map((card, index) => (react_1.default.createElement(BenefitsCard_1.default, Object.assign({ key: index }, card)))))),
+            (titleTwo || postTitleTwo || textTwo) && (react_1.default.createElement("div", { className: b('header') },
+                (titleTwo || postTitleTwo) && (react_1.default.createElement("div", { className: b('title') },
+                    titleTwo,
+                    react_1.default.createElement("span", null, postTitleTwo))),
+                textTwo && react_1.default.createElement(components_1.HTML, { className: b('text') }, textTwo))),
+            Boolean(items === null || items === void 0 ? void 0 : items.length) && (react_1.default.createElement("div", { className: b('labels') }, items === null || items === void 0 ? void 0 : items.map((item, index) => (react_1.default.createElement(BenefitsLabel_1.default, Object.assign({ key: index }, item, { active: index === activeIndex, index: index, onClick: handleClick })))))),
+            data && (react_1.default.createElement("div", { className: b('images') }, data.images.map((image, index) => (react_1.default.createElement("div", { key: index, style: {
+                    gridColumn: `span ${data.columns[index]}`,
+                    gridRow: `span ${data.rows[index]}`,
+                } },
+                react_1.default.createElement(components_1.ImageBase, { className: b('image'), src: image })))))))));
 };
 exports.BenefitsBlock = BenefitsBlock;
 exports.default = exports.BenefitsBlock;

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

@@ -83,6 +83,9 @@ export declare const BenefitsBlock: {
             accentColor: {
                 type: string;
             };
+            animated: {
+                type: string;
+            };
             type: {};
             when: {
                 type: string;

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

@@ -6,7 +6,7 @@ exports.BenefitsBlock = {
     'benefits-block': {
         additionalProperties: false,
         required: false,
-        properties: Object.assign(Object.assign({}, common_1.BaseProps), { titleOne: { type: 'string' }, postTitleOne: { type: 'string' }, textOne: { type: 'string' }, titleTwo: { type: 'string' }, postTitleTwo: { type: 'string' }, textTwo: { type: 'string' }, background: { type: 'string' }, cards: {
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { titleOne: { type: 'string' }, postTitleOne: { type: 'string' }, textOne: { type: 'string' }, titleTwo: { type: 'string' }, postTitleTwo: { type: 'string' }, textTwo: { type: 'string' }, background: { type: 'string' }, cards: {
                 type: 'array',
                 items: {
                     additionalProperties: false,

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

@@ -4,9 +4,33 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-content-layout-block {
+.pc-content-layout-block_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
+@media (min-width: 769px) {
+  .pc-content-layout-block.pc-AnimateBlock .pc-content-layout-block__root, .pc-AnimateBlock .pc-content-layout-block .pc-content-layout-block__root {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-content-layout-block.pc-AnimateBlock.animate .pc-content-layout-block__root, .pc-AnimateBlock .pc-content-layout-block.animate .pc-content-layout-block__root {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-content-layout-block__root {
   position: relative;
 }
+.pc-content-layout-block__root_background {
+  padding: 64px;
+}
+@media (max-width: 577px) {
+  .pc-content-layout-block__root_background {
+    padding: 32px;
+  }
+}
 .pc-content-layout-block__content, .pc-content-layout-block__files {
   z-index: 10;
   position: relative;
@@ -46,15 +70,4 @@ unpredictable css rules order in build */
 }
 .pc-content-layout-block__background-item {
   height: 100%;
-}
-.pc-content-layout-block_background {
-  padding: 64px;
-}
-.pc-content-layout-block_theme_dark {
-  --g-color-line-focus: var(--pc-color-line-focus-dark);
-}
-@media (max-width: 577px) {
-  .pc-content-layout-block_background {
-    padding: 32px;
-  }
 }

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

@@ -33,17 +33,18 @@ function getTextWidth(size) {
 }
 const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textContent, fileContent, size = 'l', background, unicorn, centered, theme = 'default', textWidth = 'm', } = props;
+    const { animated, textContent, fileContent, size = 'l', background, unicorn, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
     const globalTheme = (0, theme_1.useTheme)();
     const themedBackground = (0, utils_1.getThemedValue)(background, globalTheme);
-    return (react_1.default.createElement("div", { className: b({ size, theme, background: Boolean(background) || Boolean(unicorn) }) },
-        react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
-        fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
-        background && (react_1.default.createElement("div", { className: b('background') },
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, themedBackground, { hide: isMobile })))),
-        unicorn && (react_1.default.createElement("div", { className: b('background') },
-            react_1.default.createElement(unicornstudio_react_1.default, { className: b('background-item'), jsonFilePath: unicorn, width: "100%" })))));
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ size, theme }), animate: animated },
+        react_1.default.createElement("div", { className: b('root', { background: Boolean(background) || Boolean(unicorn) }) },
+            react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
+            fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
+            background && (react_1.default.createElement("div", { className: b('background') },
+                react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, themedBackground, { hide: isMobile })))),
+            unicorn && (react_1.default.createElement("div", { className: b('background') },
+                react_1.default.createElement(unicornstudio_react_1.default, { className: b('background-item'), jsonFilePath: unicorn, width: "100%" }))))));
 };
 exports.ContentLayoutBlock = ContentLayoutBlock;
 exports.default = exports.ContentLayoutBlock;

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

@@ -262,7 +262,9 @@ export declare const ContentLayoutBlock: {
                     };
                     text: {
                         type: string;
-                        contentType: string;
+                        contentType: string; /**
+                         * @deprecated Use params on top level instead
+                         */
                         inputType: string;
                     };
                     additionalInfo: {
@@ -445,6 +447,9 @@ export declare const ContentLayoutBlock: {
                     enum: string[];
                 };
             };
+            animated: {
+                type: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -29,7 +29,7 @@ const ContentLayoutBlockProperties = {
 exports.ContentLayoutBlock = {
     'content-layout-block': {
         additionalProperties: false,
-        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), { textContent: schema_2.ContentBlock === null || schema_2.ContentBlock === void 0 ? void 0 : schema_2.ContentBlock.content, fileContent: (0, utils_1.filteredArray)(common_1.FileLinkProps), 
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), { textContent: schema_2.ContentBlock === null || schema_2.ContentBlock === void 0 ? void 0 : schema_2.ContentBlock.content, fileContent: (0, utils_1.filteredArray)(common_1.FileLinkProps), 
             /**
              * @deprecated Use params on top level instead
              */

package/build/cjs/blocks/Form/Form.css

@@ -14,6 +14,9 @@ unpredictable css rules order in build */
 .pc-form-block__title_mobile {
   margin-left: 4px;
 }
+.pc-form-block__title_centered {
+  text-align: center;
+}
 .pc-form-block__full-form {
   background-color: var(--g-color-base-background);
   padding: 48px 64px 48px calc(64px - 10px);

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

@@ -82,7 +82,10 @@ const FormBlock = (props) => {
                             innerTitle && (react_1.default.createElement(components_1.Title, { title: {
                                     text: innerTitle,
                                     textSize: 's',
-                                }, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })),
+                                }, className: b('title', {
+                                    mobile: isMobile,
+                                    centered: direction === models_1.FormBlockDirection.Center,
+                                }), colSizes: { all: 12 } })),
                             react_1.default.createElement(sub_blocks_1.Content, Object.assign({}, textFormContent, { theme: "default", centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') })),
                             data && (react_1.default.createElement(InnerForm_1.default, { className: b('form'), formData: data, onContentLoad: onContentLoad })))))))));
 };

package/build/cjs/blocks/HighlightTable/HighlightTable.css

@@ -1,5 +1,18 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-highlight-table-block.pc-AnimateBlock .pc-highlight-table-block__root, .pc-AnimateBlock .pc-highlight-table-block .pc-highlight-table-block__root {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-highlight-table-block.pc-AnimateBlock.animate .pc-highlight-table-block__root, .pc-AnimateBlock .pc-highlight-table-block.animate .pc-highlight-table-block__root {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
 .pc-highlight-table-block__title {
   margin-bottom: 24px;
 }

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

@@ -1,3 +1,3 @@
 import { HighlightTableBlockProps } from '../../models';
-export declare const HighlightTableBlock: ({ title, description, table, legend, contentSize, legendPosition, legendAlign, rowHoverColor, rowHoverIncrease, }: HighlightTableBlockProps) => JSX.Element;
+export declare const HighlightTableBlock: ({ animated, title, description, table, legend, contentSize, legendPosition, legendAlign, rowHoverColor, rowHoverIncrease, }: HighlightTableBlockProps) => JSX.Element;
 export default HighlightTableBlock;

package/build/cjs/blocks/HighlightTable/HighlightTable.js

@@ -18,7 +18,7 @@ const getTextStyles = (contentSize) => {
             return 'body-1';
     }
 };
-const HighlightTableBlock = ({ title, description, table, legend = [], contentSize = 's', legendPosition = 'top', legendAlign = 'center', rowHoverColor, rowHoverIncrease, }) => {
+const HighlightTableBlock = ({ animated, title, description, table, legend = [], contentSize = 's', legendPosition = 'top', legendAlign = 'center', rowHoverColor, rowHoverIncrease, }) => {
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
     const customColumnWidth = table.customColumnWidth || [];
@@ -85,23 +85,24 @@ const HighlightTableBlock = ({ title, description, table, legend = [], contentSi
     const rootStyle = (0, react_1.useMemo)(() => ({
         ['--ps-ht-hover-color']: rowHoverColor,
     }), [rowHoverColor]);
-    return (react_1.default.createElement("div", { ref: blockRef, className: b(), style: rootStyle },
-        (title || description) && (react_1.default.createElement(components_1.Title, { className: b('title'), title: title, subtitle: description })),
-        legendPosition === 'top' && renderLegend,
-        react_1.default.createElement("div", { ref: tableRef, className: `${b('table')} ${textStyles}` },
-            react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
-                react_1.default.createElement("div", { className: b('head') },
-                    react_1.default.createElement("div", { className: b('row') }, firstRow.map((cell, index) => {
-                        var _a, _b;
-                        return (react_1.default.createElement(Cell_1.default, { key: index, cell: cell, justify: (_a = table.justify) === null || _a === void 0 ? void 0 : _a[index], columnWidth: (_b = table.customColumnWidth) === null || _b === void 0 ? void 0 : _b[index] }));
-                    }))),
-                react_1.default.createElement("div", { className: b('body') }, otherRows.map((row, index) => {
-                    var _a;
-                    return (react_1.default.createElement(Row_1.default, { key: index, row: row, rowHoverIncrease: rowHoverIncrease, color: (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index], justify: table.justify, customColumnWidth: table.customColumnWidth }));
-                })))),
-        react_1.default.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },
-            react_1.default.createElement("div", { ref: scrollThumbRef })),
-        legendPosition === 'bottom' && renderLegend));
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
+        react_1.default.createElement("div", { ref: blockRef, className: b('root'), style: rootStyle },
+            (title || description) && (react_1.default.createElement(components_1.Title, { className: b('title'), title: title, subtitle: description })),
+            legendPosition === 'top' && renderLegend,
+            react_1.default.createElement("div", { ref: tableRef, className: `${b('table')} ${textStyles}` },
+                react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
+                    react_1.default.createElement("div", { className: b('head') },
+                        react_1.default.createElement("div", { className: b('row') }, firstRow.map((cell, index) => {
+                            var _a, _b;
+                            return (react_1.default.createElement(Cell_1.default, { key: index, cell: cell, justify: (_a = table.justify) === null || _a === void 0 ? void 0 : _a[index], columnWidth: (_b = table.customColumnWidth) === null || _b === void 0 ? void 0 : _b[index] }));
+                        }))),
+                    react_1.default.createElement("div", { className: b('body') }, otherRows.map((row, index) => {
+                        var _a;
+                        return (react_1.default.createElement(Row_1.default, { key: index, row: row, rowHoverIncrease: rowHoverIncrease, color: (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index], justify: table.justify, customColumnWidth: table.customColumnWidth }));
+                    })))),
+            react_1.default.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },
+                react_1.default.createElement("div", { ref: scrollThumbRef })),
+            legendPosition === 'bottom' && renderLegend)));
 };
 exports.HighlightTableBlock = HighlightTableBlock;
 exports.default = exports.HighlightTableBlock;

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

@@ -191,6 +191,9 @@ export declare const HighlightTableBlock: {
                     };
                 };
             };
+            animated: {
+                type: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -90,6 +90,6 @@ exports.HighlightTableBlock = {
     'highlight-table-block': {
         additionalProperties: false,
         required: ['table'],
-        properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), exports.HighlightTable),
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.HighlightTable),
     },
 };

package/build/cjs/blocks/Icons/Icons.css

@@ -1,19 +1,32 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-icons-block {
+@media (min-width: 769px) {
+  .pc-icons-block.pc-AnimateBlock .pc-icons-block__root, .pc-AnimateBlock .pc-icons-block .pc-icons-block__root {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-icons-block.pc-AnimateBlock.animate .pc-icons-block__root, .pc-AnimateBlock .pc-icons-block.animate .pc-icons-block__root {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-icons-block__root {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
 }
-.pc-icons-block_size_s .pc-icons-block__item {
+.pc-icons-block__root_size_s .pc-icons-block__item {
   width: 96px;
 }
-.pc-icons-block_size_m .pc-icons-block__item {
+.pc-icons-block__root_size_m .pc-icons-block__item {
   width: 128px;
 }
-.pc-icons-block_size_l .pc-icons-block__item {
+.pc-icons-block__root_size_l .pc-icons-block__item {
   width: 160px;
 }
 .pc-icons-block__header {

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

@@ -1,3 +1,3 @@
 import { IconsBlockProps } from '../../models';
-declare const Icons: ({ title, description, size, colSizes, items }: IconsBlockProps) => JSX.Element;
+declare const Icons: ({ animated, title, description, size, colSizes, items, }: IconsBlockProps) => JSX.Element;
 export default Icons;

package/build/cjs/blocks/Icons/Icons.js

@@ -11,20 +11,21 @@ const b = (0, utils_1.block)('icons-block');
 const getItemContent = (item) => (react_1.default.createElement(react_1.Fragment, null,
     react_1.default.createElement(components_1.Image, { className: b('image'), src: item.src }),
     react_1.default.createElement("p", { className: b('text') }, item.text)));
-const Icons = ({ title, description, size = 's', colSizes = { all: 12 }, items }) => {
+const Icons = ({ animated, title, description, size = 's', colSizes = { all: 12 }, items, }) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const handleAnalytics = (0, hooks_1.useAnalytics)();
     const theme = (0, theme_1.useTheme)();
     const onClick = (0, react_1.useCallback)(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
-    return (react_1.default.createElement("div", { className: b({ size }) },
-        (title || description) && (react_1.default.createElement(components_1.Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
-        items.map((item) => {
-            const themedSrc = (0, utils_1.getThemedValue)(item.src, theme);
-            const itemContent = getItemContent(Object.assign(Object.assign({}, item), { src: themedSrc }));
-            const { url, text } = item;
-            return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: text }, itemContent));
-        })));
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
+        react_1.default.createElement("div", { className: b('root', { size }) },
+            (title || description) && (react_1.default.createElement(components_1.Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
+            items.map((item) => {
+                const themedSrc = (0, utils_1.getThemedValue)(item.src, theme);
+                const itemContent = getItemContent(Object.assign(Object.assign({}, item), { src: themedSrc }));
+                const { url, text } = item;
+                return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: text }, itemContent));
+            }))));
 };
 exports.default = Icons;

package/build/cjs/blocks/Info/Info.css

@@ -1,5 +1,18 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-info-block.pc-AnimateBlock .pc-info-block__container, .pc-AnimateBlock .pc-info-block .pc-info-block__container {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-info-block.pc-AnimateBlock.animate .pc-info-block__container, .pc-AnimateBlock .pc-info-block.animate .pc-info-block__container {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
 .pc-info-block__container {
   background-color: var(--g-color-base-brand);
   padding: 96px 64px;

package/build/cjs/blocks/Info/Info.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const Content_1 = tslib_1.__importDefault(require("../../sub-blocks/Content/Content"));
@@ -10,7 +11,7 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('info-block');
 const sizes = { md: 6, all: 12 };
 const InfoBlock = (props) => {
-    const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
+    const { animated, backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
     const theme = (0, theme_1.useTheme)();
     const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
     const rightLinks = [
@@ -23,7 +24,7 @@ const InfoBlock = (props) => {
         className: b('content'),
         theme: contentTheme,
     };
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (0, utils_1.getThemedValue)(backgroundColor, theme) } },
             react_1.default.createElement(grid_1.Grid, null,
                 react_1.default.createElement(grid_1.Row, null,