@gravity-ui/page-constructor 8.4.2 → 8.5.0-alpha.0

package/build/esm/demo/ContentAndData.stories.js

@@ -1,51 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { blockTransform } from "../../.storybook/utils.js";
-import { PageConstructor } from "../containers/PageConstructor/index.js";
-import { CustomComponent } from "../navigation/__stories__/CustomComponent/CustomComponent.js";
+import { PageConstructor, PageConstructorProvider } from "../containers/PageConstructor/index.js";
+import { gravityBlocksExtension } from "../gravity-blocks/extensions/index.js";
+import { CustomComponent } from "../gravity-blocks/navigation/__stories__/CustomComponent/CustomComponent.js";
 import contentLayoutData from "../blocks/ContentLayout/__stories__/data.json";
 import foldableListData from "../blocks/FoldableList/__stories__/data.json";
 import questionsData from "../blocks/Questions/__stories__/data.json";
 import tableData from "../blocks/Table/__stories__/data.json";
 import tabsData from "../blocks/Tabs/__stories__/data.json";
-import navData from "../navigation/__stories__/data.json";
+import navData from "../gravity-blocks/navigation/__stories__/data.json";
 export default {
     title: 'Lab/Tokenization/Blocks/ContentAndData',
     component: PageConstructor,
 };
-const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
-        blocks: [
-            // content-layout-block: default text only
-            blockTransform(contentLayoutData.default),
-            // content-layout-block: centered
-            blockTransform(contentLayoutData.textAlignCenter),
-            // content-layout-block: with background color
-            blockTransform(contentLayoutData.withBackgroundColor),
-            // content-layout-block: with background image + color
-            blockTransform(contentLayoutData.withImageAndBackgroundColor),
-            // content-layout-block: dark monochrome theme
-            blockTransform(contentLayoutData.theme[0]),
-            // content-layout-block: light monochrome theme
-            blockTransform(contentLayoutData.theme[1]),
-            // content-layout-block variants with list/links/buttons
-            ...contentLayoutData.contentVariables.map(blockTransform),
-            // tabs-block: default (all tab types: image, video, youtube)
-            blockTransform(tabsData.default.content),
-            // questions-block: default with links
-            blockTransform(questionsData.default.content),
-            // questions-block: with bullet list items
-            blockTransform(questionsData.textWithListBullet.content),
-            // foldable-list-block: default
-            blockTransform(foldableListData.default),
-            // foldable-list-block: with bullet list items
-            blockTransform(foldableListData.textWithListBullet),
-            // foldable-list-block: with dash list items
-            blockTransform(foldableListData.textWithListDash),
-            // table-block: numeric values (0/1)
-            blockTransform(tableData.default.content),
-            // table-block: tick markers
-            blockTransform(tableData.tick.content),
-        ],
-    } }));
+const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructorProvider, { children: _jsx(PageConstructor, { extensions: gravityBlocksExtension({
+            globalDefaults: {
+                navigation,
+            },
+        }), custom: custom, content: {
+            blocks: [
+                // content-layout-block: default text only
+                blockTransform(contentLayoutData.default),
+                // content-layout-block: centered
+                blockTransform(contentLayoutData.textAlignCenter),
+                // content-layout-block: with background color
+                blockTransform(contentLayoutData.withBackgroundColor),
+                // content-layout-block: with background image + color
+                blockTransform(contentLayoutData.withImageAndBackgroundColor),
+                // content-layout-block: dark monochrome theme
+                blockTransform(contentLayoutData.theme[0]),
+                // content-layout-block: light monochrome theme
+                blockTransform(contentLayoutData.theme[1]),
+                // content-layout-block variants with list/links/buttons
+                ...contentLayoutData.contentVariables.map(blockTransform),
+                // tabs-block: default (all tab types: image, video, youtube)
+                blockTransform(tabsData.default.content),
+                // questions-block: default with links
+                blockTransform(questionsData.default.content),
+                // questions-block: with bullet list items
+                blockTransform(questionsData.textWithListBullet.content),
+                // foldable-list-block: default
+                blockTransform(foldableListData.default),
+                // foldable-list-block: with bullet list items
+                blockTransform(foldableListData.textWithListBullet),
+                // foldable-list-block: with dash list items
+                blockTransform(foldableListData.textWithListDash),
+                // table-block: numeric values (0/1)
+                blockTransform(tableData.default.content),
+                // table-block: tick markers
+                blockTransform(tableData.tick.content),
+            ],
+        } }) }));
 export const Default = Template.bind({});
 Default.args = {
     custom: {

package/build/esm/demo/ContentAndData.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAndData.stories.js","sourceRoot":"../../../src","sources":["demo/ContentAndData.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAE9D,OAAO,EAAC,eAAe,EAAC,qEAAkE;AAE1F,OAAO,iBAAiB,sDAAsD;AAC9E,OAAO,gBAAgB,qDAAqD;AAC5E,OAAO,aAAa,kDAAkD;AACtE,OAAO,SAAS,8CAA8C;AAC9D,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,0CAA0C;YAC1C,cAAc,CAAC,iBAAiB,CAAC,OAAO,CAAC;YACzC,iCAAiC;YACjC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC;YACjD,8CAA8C;YAC9C,cAAc,CAAC,iBAAiB,CAAC,mBAAmB,CAAC;YACrD,sDAAsD;YACtD,cAAc,CAAC,iBAAiB,CAAC,2BAA2B,CAAC;YAC7D,8CAA8C;YAC9C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,+CAA+C;YAC/C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,wDAAwD;YACxD,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,CAAC,cAAc,CAAC;YAEzD,6DAA6D;YAC7D,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;YAExC,sCAAsC;YACtC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,0CAA0C;YAC1C,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC;YAExD,+BAA+B;YAC/B,cAAc,CAAC,gBAAgB,CAAC,OAAO,CAAC;YACxC,8CAA8C;YAC9C,cAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;YACnD,4CAA4C;YAC5C,cAAc,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;YAEjD,oCAAoC;YACpC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;YACzC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;SACzC;KACW,GAEtB,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,MAAM,EAAE;QACJ,UAAU,EAAE;YACR,aAAa,EAAE,eAAe;SACjC;KACJ;IACD,UAAU,EAAE;QACR,GAAG,OAAO,CAAC,UAAU;QACrB,MAAM,EAAE;YACJ,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM;YAC5B,UAAU,EAAE;gBACR,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;gBACvC;oBACI,IAAI,EAAE,aAAa;iBACtB;aACJ;SACJ;KACc;CACtB,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\nimport {CustomComponent} from '../navigation/__stories__/CustomComponent/CustomComponent';\n\nimport contentLayoutData from '../blocks/ContentLayout/__stories__/data.json';\nimport foldableListData from '../blocks/FoldableList/__stories__/data.json';\nimport questionsData from '../blocks/Questions/__stories__/data.json';\nimport tableData from '../blocks/Table/__stories__/data.json';\nimport tabsData from '../blocks/Tabs/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/ContentAndData',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructor\n        navigation={navigation}\n        custom={custom}\n        content={\n            {\n                blocks: [\n                    // content-layout-block: default text only\n                    blockTransform(contentLayoutData.default),\n                    // content-layout-block: centered\n                    blockTransform(contentLayoutData.textAlignCenter),\n                    // content-layout-block: with background color\n                    blockTransform(contentLayoutData.withBackgroundColor),\n                    // content-layout-block: with background image + color\n                    blockTransform(contentLayoutData.withImageAndBackgroundColor),\n                    // content-layout-block: dark monochrome theme\n                    blockTransform(contentLayoutData.theme[0]),\n                    // content-layout-block: light monochrome theme\n                    blockTransform(contentLayoutData.theme[1]),\n                    // content-layout-block variants with list/links/buttons\n                    ...contentLayoutData.contentVariables.map(blockTransform),\n\n                    // tabs-block: default (all tab types: image, video, youtube)\n                    blockTransform(tabsData.default.content),\n\n                    // questions-block: default with links\n                    blockTransform(questionsData.default.content),\n                    // questions-block: with bullet list items\n                    blockTransform(questionsData.textWithListBullet.content),\n\n                    // foldable-list-block: default\n                    blockTransform(foldableListData.default),\n                    // foldable-list-block: with bullet list items\n                    blockTransform(foldableListData.textWithListBullet),\n                    // foldable-list-block: with dash list items\n                    blockTransform(foldableListData.textWithListDash),\n\n                    // table-block: numeric values (0/1)\n                    blockTransform(tableData.default.content),\n                    // table-block: tick markers\n                    blockTransform(tableData.tick.content),\n                ],\n            } as PageContent\n        }\n    />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    custom: {\n        navigation: {\n            'custom-item': CustomComponent,\n        },\n    },\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            rightItems: [\n                ...navData.navigation.header.rightItems,\n                {\n                    type: 'custom-item',\n                },\n            ],\n        },\n    } as NavigationData,\n};\n"]}
+{"version":3,"file":"ContentAndData.stories.js","sourceRoot":"../../../src","sources":["demo/ContentAndData.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,+CAAsC;AACvF,OAAO,EAAC,sBAAsB,EAAC,8CAAqC;AACpE,OAAO,EAAC,eAAe,EAAC,oFAAiF;AAGzG,OAAO,iBAAiB,sDAAsD;AAC9E,OAAO,gBAAgB,qDAAqD;AAC5E,OAAO,aAAa,kDAAkD;AACtE,OAAO,SAAS,8CAA8C;AAC9D,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,OAAO,2DAA2D;AAEzE,eAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,uBAAuB,cACpB,KAAC,eAAe,IACZ,UAAU,EAAE,sBAAsB,CAAC;YAC/B,cAAc,EAAE;gBACZ,UAAU;aACb;SACJ,CAAC,EACF,MAAM,EAAE,MAAM,EACd,OAAO,EACH;YACI,MAAM,EAAE;gBACJ,0CAA0C;gBAC1C,cAAc,CAAC,iBAAiB,CAAC,OAAO,CAAC;gBACzC,iCAAiC;gBACjC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC;gBACjD,8CAA8C;gBAC9C,cAAc,CAAC,iBAAiB,CAAC,mBAAmB,CAAC;gBACrD,sDAAsD;gBACtD,cAAc,CAAC,iBAAiB,CAAC,2BAA2B,CAAC;gBAC7D,8CAA8C;gBAC9C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC1C,+CAA+C;gBAC/C,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC1C,wDAAwD;gBACxD,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,CAAC,cAAc,CAAC;gBAEzD,6DAA6D;gBAC7D,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;gBAExC,sCAAsC;gBACtC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC7C,0CAA0C;gBAC1C,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC;gBAExD,+BAA+B;gBAC/B,cAAc,CAAC,gBAAgB,CAAC,OAAO,CAAC;gBACxC,8CAA8C;gBAC9C,cAAc,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;gBACnD,4CAA4C;gBAC5C,cAAc,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;gBAEjD,oCAAoC;gBACpC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;gBACzC,4BAA4B;gBAC5B,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;aACzC;SACW,GAEtB,GACoB,CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,MAAM,EAAE;QACJ,UAAU,EAAE;YACR,aAAa,EAAE,eAAe;SACjC;KACJ;IACD,UAAU,EAAE;QACR,GAAG,OAAO,CAAC,UAAU;QACrB,MAAM,EAAE;YACJ,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM;YAC5B,UAAU,EAAE;gBACR,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;gBACvC;oBACI,IAAI,EAAE,aAAa;iBACtB;aACJ;SACJ;KACc;CACtB,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor, PageConstructorProvider} from '../containers/PageConstructor';\nimport {gravityBlocksExtension} from '../gravity-blocks/extensions';\nimport {CustomComponent} from '../gravity-blocks/navigation/__stories__/CustomComponent/CustomComponent';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport contentLayoutData from '../blocks/ContentLayout/__stories__/data.json';\nimport foldableListData from '../blocks/FoldableList/__stories__/data.json';\nimport questionsData from '../blocks/Questions/__stories__/data.json';\nimport tableData from '../blocks/Table/__stories__/data.json';\nimport tabsData from '../blocks/Tabs/__stories__/data.json';\nimport navData from '../gravity-blocks/navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/ContentAndData',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructorProvider>\n        <PageConstructor\n            extensions={gravityBlocksExtension({\n                globalDefaults: {\n                    navigation,\n                },\n            })}\n            custom={custom}\n            content={\n                {\n                    blocks: [\n                        // content-layout-block: default text only\n                        blockTransform(contentLayoutData.default),\n                        // content-layout-block: centered\n                        blockTransform(contentLayoutData.textAlignCenter),\n                        // content-layout-block: with background color\n                        blockTransform(contentLayoutData.withBackgroundColor),\n                        // content-layout-block: with background image + color\n                        blockTransform(contentLayoutData.withImageAndBackgroundColor),\n                        // content-layout-block: dark monochrome theme\n                        blockTransform(contentLayoutData.theme[0]),\n                        // content-layout-block: light monochrome theme\n                        blockTransform(contentLayoutData.theme[1]),\n                        // content-layout-block variants with list/links/buttons\n                        ...contentLayoutData.contentVariables.map(blockTransform),\n\n                        // tabs-block: default (all tab types: image, video, youtube)\n                        blockTransform(tabsData.default.content),\n\n                        // questions-block: default with links\n                        blockTransform(questionsData.default.content),\n                        // questions-block: with bullet list items\n                        blockTransform(questionsData.textWithListBullet.content),\n\n                        // foldable-list-block: default\n                        blockTransform(foldableListData.default),\n                        // foldable-list-block: with bullet list items\n                        blockTransform(foldableListData.textWithListBullet),\n                        // foldable-list-block: with dash list items\n                        blockTransform(foldableListData.textWithListDash),\n\n                        // table-block: numeric values (0/1)\n                        blockTransform(tableData.default.content),\n                        // table-block: tick markers\n                        blockTransform(tableData.tick.content),\n                    ],\n                } as PageContent\n            }\n        />\n    </PageConstructorProvider>\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    custom: {\n        navigation: {\n            'custom-item': CustomComponent,\n        },\n    },\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            rightItems: [\n                ...navData.navigation.header.rightItems,\n                {\n                    type: 'custom-item',\n                },\n            ],\n        },\n    } as NavigationData,\n};\n"]}

package/build/esm/demo/FeaturesAndCards.stories.js

@@ -1,99 +1,107 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { blockTransform } from "../../.storybook/utils.js";
-import { PageConstructor } from "../containers/PageConstructor/index.js";
+import { PageConstructor, PageConstructorProvider } from "../containers/PageConstructor/index.js";
+import { gravityBlocksExtension } from "../gravity-blocks/extensions/index.js";
 import cardLayoutData from "../blocks/CardLayout/__stories__/data.json";
 import extendedFeaturesData from "../blocks/ExtendedFeatures/__stories__/data.json";
 import headerSliderData from "../blocks/HeaderSlider/__stories__/data.json";
 import promoFeaturesData from "../blocks/PromoFeaturesBlock/__stories__/data.json";
 import sliderData from "../blocks/Slider/__stories__/data.json";
-import navData from "../navigation/__stories__/data.json";
+import navData from "../gravity-blocks/navigation/__stories__/data.json";
 export default {
     title: 'Lab/Tokenization/Blocks/FeaturesAndCards',
     component: PageConstructor,
 };
-const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
-        blocks: [
-            // promo-features-block: default theme
-            blockTransform({
-                ...promoFeaturesData.common,
-                ...promoFeaturesData.defaultTheme.content,
-            }),
-            // promo-features-block: grey theme
-            blockTransform({
-                ...promoFeaturesData.common,
-                ...promoFeaturesData.greyTheme.content,
-            }),
-            // extended-features-block: default (3 cols)
-            blockTransform(extendedFeaturesData.default.content),
-            // extended-features-block: with labels
-            blockTransform({
-                type: 'extended-features-block',
-                ...extendedFeaturesData.withLabel.content,
-            }),
-            // extended-features-block: 2 per row
-            blockTransform({
-                type: 'extended-features-block',
-                ...extendedFeaturesData.colSizes.two,
-            }),
-            // extended-features-block: 4 per row
-            blockTransform({
-                type: 'extended-features-block',
-                ...extendedFeaturesData.colSizes.four,
-            }),
-            // card-layout-block: basic cards
-            {
-                ...cardLayoutData.default.content,
-                children: [
-                    blockTransform(cardLayoutData.cards.basicCard),
-                    blockTransform(cardLayoutData.cards.basicCard),
-                    blockTransform(cardLayoutData.cards.basicCard),
-                ],
+const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructorProvider, { children: _jsx(PageConstructor, { extensions: gravityBlocksExtension({
+            globalDefaults: {
+                navigation,
             },
-            // card-layout-block: layout items with images
-            {
-                type: 'card-layout-block',
-                title: 'Card layout with layout items',
-                children: [
-                    blockTransform(cardLayoutData.cards.layoutItem),
-                    blockTransform(cardLayoutData.cards.layoutItem),
-                    blockTransform(cardLayoutData.cards.layoutItem),
-                ],
-            },
-            // card-layout-block: background cards
-            {
-                type: 'card-layout-block',
-                title: 'Card layout with background cards',
-                children: [
-                    blockTransform(cardLayoutData.cards.backgroundCard),
-                    blockTransform(cardLayoutData.cards.backgroundCard),
-                    blockTransform(cardLayoutData.cards.backgroundCard),
-                ],
-            },
-            // card-layout-block: price cards
-            {
-                type: 'card-layout-block',
-                title: 'Card layout with price cards',
-                children: [
-                    blockTransform(cardLayoutData.cards.priceCard),
-                    blockTransform(cardLayoutData.cards.priceCard),
-                    blockTransform(cardLayoutData.cards.priceCard),
-                ],
-            },
-            // slider-block: basic cards
-            blockTransform(sliderData.default.content),
-            // slider-block: quote cards
-            blockTransform(sliderData.quoteCards.content),
-            // slider-block: banner cards (subtitle already HTML — no blockTransform)
-            sliderData.banners.content,
-            // header-slider-block: default
-            blockTransform({ type: 'header-slider-block', ...headerSliderData.default }),
-            // header-slider-block: with different slide themes
-            blockTransform({
-                type: 'header-slider-block',
-                ...headerSliderData.withDifferentSlidesTheme,
-            }),
-        ],
-    } }));
+        }), custom: custom, content: {
+            blocks: [
+                // promo-features-block: default theme
+                blockTransform({
+                    ...promoFeaturesData.common,
+                    ...promoFeaturesData.defaultTheme.content,
+                }),
+                // promo-features-block: grey theme
+                blockTransform({
+                    ...promoFeaturesData.common,
+                    ...promoFeaturesData.greyTheme.content,
+                }),
+                // extended-features-block: default (3 cols)
+                blockTransform(extendedFeaturesData.default.content),
+                // extended-features-block: with labels
+                blockTransform({
+                    type: 'extended-features-block',
+                    ...extendedFeaturesData.withLabel.content,
+                }),
+                // extended-features-block: 2 per row
+                blockTransform({
+                    type: 'extended-features-block',
+                    ...extendedFeaturesData.colSizes.two,
+                }),
+                // extended-features-block: 4 per row
+                blockTransform({
+                    type: 'extended-features-block',
+                    ...extendedFeaturesData.colSizes.four,
+                }),
+                // card-layout-block: basic cards
+                {
+                    ...cardLayoutData.default.content,
+                    children: [
+                        blockTransform(cardLayoutData.cards.basicCard),
+                        blockTransform(cardLayoutData.cards.basicCard),
+                        blockTransform(cardLayoutData.cards.basicCard),
+                    ],
+                },
+                // card-layout-block: layout items with images
+                {
+                    type: 'card-layout-block',
+                    title: 'Card layout with layout items',
+                    children: [
+                        blockTransform(cardLayoutData.cards.layoutItem),
+                        blockTransform(cardLayoutData.cards.layoutItem),
+                        blockTransform(cardLayoutData.cards.layoutItem),
+                    ],
+                },
+                // card-layout-block: background cards
+                {
+                    type: 'card-layout-block',
+                    title: 'Card layout with background cards',
+                    children: [
+                        blockTransform(cardLayoutData.cards.backgroundCard),
+                        blockTransform(cardLayoutData.cards.backgroundCard),
+                        blockTransform(cardLayoutData.cards.backgroundCard),
+                    ],
+                },
+                // card-layout-block: price cards
+                {
+                    type: 'card-layout-block',
+                    title: 'Card layout with price cards',
+                    children: [
+                        blockTransform(cardLayoutData.cards.priceCard),
+                        blockTransform(cardLayoutData.cards.priceCard),
+                        blockTransform(cardLayoutData.cards.priceCard),
+                    ],
+                },
+                // slider-block: basic cards
+                blockTransform(sliderData.default.content),
+                // slider-block: quote cards
+                blockTransform(sliderData.quoteCards.content),
+                // slider-block: banner cards (subtitle already HTML — no blockTransform)
+                sliderData.banners.content,
+                // header-slider-block: default
+                blockTransform({
+                    type: 'header-slider-block',
+                    ...headerSliderData.default,
+                }),
+                // header-slider-block: with different slide themes
+                blockTransform({
+                    type: 'header-slider-block',
+                    ...headerSliderData.withDifferentSlidesTheme,
+                }),
+            ],
+        } }) }));
 export const Default = Template.bind({});
 Default.args = {
     navigation: {

package/build/esm/demo/FeaturesAndCards.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturesAndCards.stories.js","sourceRoot":"../../../src","sources":["demo/FeaturesAndCards.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport cardLayoutData from '../blocks/CardLayout/__stories__/data.json';\nimport extendedFeaturesData from '../blocks/ExtendedFeatures/__stories__/data.json';\nimport headerSliderData from '../blocks/HeaderSlider/__stories__/data.json';\nimport promoFeaturesData from '../blocks/PromoFeaturesBlock/__stories__/data.json';\nimport sliderData from '../blocks/Slider/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/FeaturesAndCards',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructor\n        navigation={navigation}\n        custom={custom}\n        content={\n            {\n                blocks: [\n                    // promo-features-block: default theme\n                    blockTransform({\n                        ...promoFeaturesData.common,\n                        ...promoFeaturesData.defaultTheme.content,\n                    }),\n                    // promo-features-block: grey theme\n                    blockTransform({\n                        ...promoFeaturesData.common,\n                        ...promoFeaturesData.greyTheme.content,\n                    }),\n\n                    // extended-features-block: default (3 cols)\n                    blockTransform(extendedFeaturesData.default.content),\n                    // extended-features-block: with labels\n                    blockTransform({\n                        type: 'extended-features-block',\n                        ...extendedFeaturesData.withLabel.content,\n                    }),\n                    // extended-features-block: 2 per row\n                    blockTransform({\n                        type: 'extended-features-block',\n                        ...extendedFeaturesData.colSizes.two,\n                    }),\n                    // extended-features-block: 4 per row\n                    blockTransform({\n                        type: 'extended-features-block',\n                        ...extendedFeaturesData.colSizes.four,\n                    }),\n\n                    // card-layout-block: basic cards\n                    {\n                        ...cardLayoutData.default.content,\n                        children: [\n                            blockTransform(cardLayoutData.cards.basicCard),\n                            blockTransform(cardLayoutData.cards.basicCard),\n                            blockTransform(cardLayoutData.cards.basicCard),\n                        ],\n                    },\n                    // card-layout-block: layout items with images\n                    {\n                        type: 'card-layout-block',\n                        title: 'Card layout with layout items',\n                        children: [\n                            blockTransform(cardLayoutData.cards.layoutItem),\n                            blockTransform(cardLayoutData.cards.layoutItem),\n                            blockTransform(cardLayoutData.cards.layoutItem),\n                        ],\n                    },\n                    // card-layout-block: background cards\n                    {\n                        type: 'card-layout-block',\n                        title: 'Card layout with background cards',\n                        children: [\n                            blockTransform(cardLayoutData.cards.backgroundCard),\n                            blockTransform(cardLayoutData.cards.backgroundCard),\n                            blockTransform(cardLayoutData.cards.backgroundCard),\n                        ],\n                    },\n                    // card-layout-block: price cards\n                    {\n                        type: 'card-layout-block',\n                        title: 'Card layout with price cards',\n                        children: [\n                            blockTransform(cardLayoutData.cards.priceCard),\n                            blockTransform(cardLayoutData.cards.priceCard),\n                            blockTransform(cardLayoutData.cards.priceCard),\n                        ],\n                    },\n\n                    // slider-block: basic cards\n                    blockTransform(sliderData.default.content),\n                    // slider-block: quote cards\n                    blockTransform(sliderData.quoteCards.content),\n                    // slider-block: banner cards (subtitle already HTML — no blockTransform)\n                    sliderData.banners.content,\n\n                    // header-slider-block: default\n                    blockTransform({type: 'header-slider-block', ...headerSliderData.default}),\n                    // header-slider-block: with different slide themes\n                    blockTransform({\n                        type: 'header-slider-block',\n                        ...headerSliderData.withDifferentSlidesTheme,\n                    }),\n                ],\n            } as PageContent\n        }\n    />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            withBorder: true,\n            withBorderOnScroll: true,\n        },\n    } as NavigationData,\n};\n"]}
+{"version":3,"file":"FeaturesAndCards.stories.js","sourceRoot":"../../../src","sources":["demo/FeaturesAndCards.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor, PageConstructorProvider} from '../containers/PageConstructor';\nimport {gravityBlocksExtension} from '../gravity-blocks/extensions';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport cardLayoutData from '../blocks/CardLayout/__stories__/data.json';\nimport extendedFeaturesData from '../blocks/ExtendedFeatures/__stories__/data.json';\nimport headerSliderData from '../blocks/HeaderSlider/__stories__/data.json';\nimport promoFeaturesData from '../blocks/PromoFeaturesBlock/__stories__/data.json';\nimport sliderData from '../blocks/Slider/__stories__/data.json';\nimport navData from '../gravity-blocks/navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/FeaturesAndCards',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructorProvider>\n        <PageConstructor\n            extensions={gravityBlocksExtension({\n                globalDefaults: {\n                    navigation,\n                },\n            })}\n            custom={custom}\n            content={\n                {\n                    blocks: [\n                        // promo-features-block: default theme\n                        blockTransform({\n                            ...promoFeaturesData.common,\n                            ...promoFeaturesData.defaultTheme.content,\n                        }),\n                        // promo-features-block: grey theme\n                        blockTransform({\n                            ...promoFeaturesData.common,\n                            ...promoFeaturesData.greyTheme.content,\n                        }),\n\n                        // extended-features-block: default (3 cols)\n                        blockTransform(extendedFeaturesData.default.content),\n                        // extended-features-block: with labels\n                        blockTransform({\n                            type: 'extended-features-block',\n                            ...extendedFeaturesData.withLabel.content,\n                        }),\n                        // extended-features-block: 2 per row\n                        blockTransform({\n                            type: 'extended-features-block',\n                            ...extendedFeaturesData.colSizes.two,\n                        }),\n                        // extended-features-block: 4 per row\n                        blockTransform({\n                            type: 'extended-features-block',\n                            ...extendedFeaturesData.colSizes.four,\n                        }),\n\n                        // card-layout-block: basic cards\n                        {\n                            ...cardLayoutData.default.content,\n                            children: [\n                                blockTransform(cardLayoutData.cards.basicCard),\n                                blockTransform(cardLayoutData.cards.basicCard),\n                                blockTransform(cardLayoutData.cards.basicCard),\n                            ],\n                        },\n                        // card-layout-block: layout items with images\n                        {\n                            type: 'card-layout-block',\n                            title: 'Card layout with layout items',\n                            children: [\n                                blockTransform(cardLayoutData.cards.layoutItem),\n                                blockTransform(cardLayoutData.cards.layoutItem),\n                                blockTransform(cardLayoutData.cards.layoutItem),\n                            ],\n                        },\n                        // card-layout-block: background cards\n                        {\n                            type: 'card-layout-block',\n                            title: 'Card layout with background cards',\n                            children: [\n                                blockTransform(cardLayoutData.cards.backgroundCard),\n                                blockTransform(cardLayoutData.cards.backgroundCard),\n                                blockTransform(cardLayoutData.cards.backgroundCard),\n                            ],\n                        },\n                        // card-layout-block: price cards\n                        {\n                            type: 'card-layout-block',\n                            title: 'Card layout with price cards',\n                            children: [\n                                blockTransform(cardLayoutData.cards.priceCard),\n                                blockTransform(cardLayoutData.cards.priceCard),\n                                blockTransform(cardLayoutData.cards.priceCard),\n                            ],\n                        },\n\n                        // slider-block: basic cards\n                        blockTransform(sliderData.default.content),\n                        // slider-block: quote cards\n                        blockTransform(sliderData.quoteCards.content),\n                        // slider-block: banner cards (subtitle already HTML — no blockTransform)\n                        sliderData.banners.content,\n\n                        // header-slider-block: default\n                        blockTransform({\n                            type: 'header-slider-block',\n                            ...headerSliderData.default,\n                        }),\n                        // header-slider-block: with different slide themes\n                        blockTransform({\n                            type: 'header-slider-block',\n                            ...headerSliderData.withDifferentSlidesTheme,\n                        }),\n                    ],\n                } as PageContent\n            }\n        />\n    </PageConstructorProvider>\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            withBorder: true,\n            withBorderOnScroll: true,\n        },\n    } as NavigationData,\n};\n"]}

package/build/esm/demo/HeroAndMedia.stories.js

@@ -1,52 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { blockTransform } from "../../.storybook/utils.js";
-import { PageConstructor } from "../containers/PageConstructor/index.js";
+import { PageConstructor, PageConstructorProvider } from "../containers/PageConstructor/index.js";
+import { gravityBlocksExtension } from "../gravity-blocks/extensions/index.js";
 import bannerData from "../blocks/Banner/__stories__/data.json";
 import companiesData from "../blocks/Companies/__stories__/data.json";
 import headerData from "../blocks/Header/__stories__/data.json";
 import infoData from "../blocks/Info/__stories__/data.json";
 import mediaData from "../blocks/Media/__stories__/data.json";
-import navData from "../navigation/__stories__/data.json";
+import navData from "../gravity-blocks/navigation/__stories__/data.json";
 export default {
     title: 'Lab/Tokenization/Blocks/HeroAndMedia',
     component: PageConstructor,
 };
-const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
-        blocks: [
-            // header-block: default with action buttons
-            blockTransform(headerData.default),
-            // header-block: with breadcrumbs + light background
-            blockTransform(headerData.breadcrumbs[0]),
-            // header-block: with breadcrumbs + dark theme
-            blockTransform(headerData.breadcrumbs[1]),
-            // header-block: with image
-            blockTransform(headerData.image),
-            // header-block: with background image and color (media variant)
-            blockTransform({ type: 'header-block', ...headerData.media.image }),
-            // banner-block: light theme with themed image
-            blockTransform(bannerData.default.content),
-            // banner-block: forced dark theme
-            blockTransform(bannerData.darkTheme.content),
-            // media-block: default with image
-            blockTransform(mediaData.default),
-            // media-block: image slider
-            blockTransform(mediaData.imageSlider),
-            // media-block: youtube embed
-            blockTransform({ type: 'media-block', ...mediaData.video.youtube }),
-            // media-block: video with controls
-            blockTransform({ type: 'media-block', ...mediaData.video.staticWithControls }),
-            // media-block: video with preview
-            blockTransform({ type: 'media-block', ...mediaData.video.videoWithPreview }),
-            // companies-block: title only
-            blockTransform(companiesData.default.content),
-            // companies-block: with description
-            blockTransform(companiesData.withDescription.content),
-            // info-block: dark theme (default)
-            blockTransform(infoData.default),
-            // info-block: light theme with background color
-            blockTransform({ type: 'info-block', ...infoData.light }),
-        ],
-    } }));
+const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructorProvider, { children: _jsx(PageConstructor, { extensions: gravityBlocksExtension({
+            globalDefaults: {
+                navigation,
+            },
+        }), custom: custom, content: {
+            blocks: [
+                // header-block: default with action buttons
+                blockTransform(headerData.default),
+                // header-block: with breadcrumbs + light background
+                blockTransform(headerData.breadcrumbs[0]),
+                // header-block: with breadcrumbs + dark theme
+                blockTransform(headerData.breadcrumbs[1]),
+                // header-block: with image
+                blockTransform(headerData.image),
+                // header-block: with background image and color (media variant)
+                blockTransform({ type: 'header-block', ...headerData.media.image }),
+                // banner-block: light theme with themed image
+                blockTransform(bannerData.default.content),
+                // banner-block: forced dark theme
+                blockTransform(bannerData.darkTheme.content),
+                // media-block: default with image
+                blockTransform(mediaData.default),
+                // media-block: image slider
+                blockTransform(mediaData.imageSlider),
+                // media-block: youtube embed
+                blockTransform({ type: 'media-block', ...mediaData.video.youtube }),
+                // media-block: video with controls
+                blockTransform({
+                    type: 'media-block',
+                    ...mediaData.video.staticWithControls,
+                }),
+                // media-block: video with preview
+                blockTransform({
+                    type: 'media-block',
+                    ...mediaData.video.videoWithPreview,
+                }),
+                // companies-block: title only
+                blockTransform(companiesData.default.content),
+                // companies-block: with description
+                blockTransform(companiesData.withDescription.content),
+                // info-block: dark theme (default)
+                blockTransform(infoData.default),
+                // info-block: light theme with background color
+                blockTransform({ type: 'info-block', ...infoData.light }),
+            ],
+        } }) }));
 export const Default = Template.bind({});
 Default.args = {
     navigation: navData.navigation,

package/build/esm/demo/HeroAndMedia.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,UAAU,+CAA+C;AAChE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,SAAS,8CAA8C;AAC9D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,4CAA4C;YAC5C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;YAClC,oDAAoD;YACpD,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,2BAA2B;YAC3B,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;YAChC,gEAAgE;YAChE,cAAc,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;YAEjE,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,cAAc,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,OAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport headerData from '../blocks/Header/__stories__/data.json';\nimport infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/HeroAndMedia',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructor\n        navigation={navigation}\n        custom={custom}\n        content={\n            {\n                blocks: [\n                    // header-block: default with action buttons\n                    blockTransform(headerData.default),\n                    // header-block: with breadcrumbs + light background\n                    blockTransform(headerData.breadcrumbs[0]),\n                    // header-block: with breadcrumbs + dark theme\n                    blockTransform(headerData.breadcrumbs[1]),\n                    // header-block: with image\n                    blockTransform(headerData.image),\n                    // header-block: with background image and color (media variant)\n                    blockTransform({type: 'header-block', ...headerData.media.image}),\n\n                    // banner-block: light theme with themed image\n                    blockTransform(bannerData.default.content),\n                    // banner-block: forced dark theme\n                    blockTransform(bannerData.darkTheme.content),\n\n                    // media-block: default with image\n                    blockTransform(mediaData.default),\n                    // media-block: image slider\n                    blockTransform(mediaData.imageSlider),\n                    // media-block: youtube embed\n                    blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n                    // media-block: video with controls\n                    blockTransform({type: 'media-block', ...mediaData.video.staticWithControls}),\n                    // media-block: video with preview\n                    blockTransform({type: 'media-block', ...mediaData.video.videoWithPreview}),\n\n                    // companies-block: title only\n                    blockTransform(companiesData.default.content),\n                    // companies-block: with description\n                    blockTransform(companiesData.withDescription.content),\n\n                    // info-block: dark theme (default)\n                    blockTransform(infoData.default),\n                    // info-block: light theme with background color\n                    blockTransform({type: 'info-block', ...infoData.light}),\n                ],\n            } as PageContent\n        }\n    />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    navigation: navData.navigation as NavigationData,\n};\n"]}
+{"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,+CAAsC;AACvF,OAAO,EAAC,sBAAsB,EAAC,8CAAqC;AAGpE,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,UAAU,+CAA+C;AAChE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,SAAS,8CAA8C;AAC9D,OAAO,OAAO,2DAA2D;AAEzE,eAAe;IACX,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,uBAAuB,cACpB,KAAC,eAAe,IACZ,UAAU,EAAE,sBAAsB,CAAC;YAC/B,cAAc,EAAE;gBACZ,UAAU;aACb;SACJ,CAAC,EACF,MAAM,EAAE,MAAM,EACd,OAAO,EACH;YACI,MAAM,EAAE;gBACJ,4CAA4C;gBAC5C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;gBAClC,oDAAoD;gBACpD,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACzC,8CAA8C;gBAC9C,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACzC,2BAA2B;gBAC3B,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;gBAChC,gEAAgE;gBAChE,cAAc,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;gBAEjE,8CAA8C;gBAC9C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC1C,kCAAkC;gBAClC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;gBAE5C,kCAAkC;gBAClC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC;gBACjC,4BAA4B;gBAC5B,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;gBACrC,6BAA6B;gBAC7B,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;gBACjE,mCAAmC;gBACnC,cAAc,CAAC;oBACX,IAAI,EAAE,aAAa;oBACnB,GAAG,SAAS,CAAC,KAAK,CAAC,kBAAkB;iBACxC,CAAC;gBACF,kCAAkC;gBAClC,cAAc,CAAC;oBACX,IAAI,EAAE,aAAa;oBACnB,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB;iBACtC,CAAC;gBAEF,8BAA8B;gBAC9B,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC7C,oCAAoC;gBACpC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;gBAErD,mCAAmC;gBACnC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC;gBAChC,gDAAgD;gBAChD,cAAc,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAC,CAAC;aAC1D;SACW,GAEtB,GACoB,CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,OAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor, PageConstructorProvider} from '../containers/PageConstructor';\nimport {gravityBlocksExtension} from '../gravity-blocks/extensions';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport headerData from '../blocks/Header/__stories__/data.json';\nimport infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../gravity-blocks/navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/HeroAndMedia',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructorProvider>\n        <PageConstructor\n            extensions={gravityBlocksExtension({\n                globalDefaults: {\n                    navigation,\n                },\n            })}\n            custom={custom}\n            content={\n                {\n                    blocks: [\n                        // header-block: default with action buttons\n                        blockTransform(headerData.default),\n                        // header-block: with breadcrumbs + light background\n                        blockTransform(headerData.breadcrumbs[0]),\n                        // header-block: with breadcrumbs + dark theme\n                        blockTransform(headerData.breadcrumbs[1]),\n                        // header-block: with image\n                        blockTransform(headerData.image),\n                        // header-block: with background image and color (media variant)\n                        blockTransform({type: 'header-block', ...headerData.media.image}),\n\n                        // banner-block: light theme with themed image\n                        blockTransform(bannerData.default.content),\n                        // banner-block: forced dark theme\n                        blockTransform(bannerData.darkTheme.content),\n\n                        // media-block: default with image\n                        blockTransform(mediaData.default),\n                        // media-block: image slider\n                        blockTransform(mediaData.imageSlider),\n                        // media-block: youtube embed\n                        blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n                        // media-block: video with controls\n                        blockTransform({\n                            type: 'media-block',\n                            ...mediaData.video.staticWithControls,\n                        }),\n                        // media-block: video with preview\n                        blockTransform({\n                            type: 'media-block',\n                            ...mediaData.video.videoWithPreview,\n                        }),\n\n                        // companies-block: title only\n                        blockTransform(companiesData.default.content),\n                        // companies-block: with description\n                        blockTransform(companiesData.withDescription.content),\n\n                        // info-block: dark theme (default)\n                        blockTransform(infoData.default),\n                        // info-block: light theme with background color\n                        blockTransform({type: 'info-block', ...infoData.light}),\n                    ],\n                } as PageContent\n            }\n        />\n    </PageConstructorProvider>\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    navigation: navData.navigation as NavigationData,\n};\n"]}