@cntrl-site/sdk-nextjs 1.9.72 → 1.9.73

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 CNTRL
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 CNTRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# sdk-nextjs
-SDK is the code that transforms the raw data from the API
-into React components. In Control this happens at build time,
-when users hit the "Publish" button from the Project Dashboard.
+# sdk-nextjs
+SDK is the code that transforms the raw data from the API
+into React components. In Control this happens at build time,
+when users hit the "Publish" button from the Project Dashboard.

package/TODO.md

@@ -1 +1 @@
-1. Uninstall `@types/isomorphic-fetch` package and run `npm run build` - results in a TS compile error 
+1. Uninstall `@types/isomorphic-fetch` package and run `npm run build` - results in a TS compile error 

package/eslint.config.mjs

@@ -1,35 +1,35 @@
-import antfu from '@antfu/eslint-config';
-
-export default antfu(
-  {
-    ignores: [],
-  },
-  {
-    rules: {
-      'import/order': 'off',
-      'style/semi': 'off',
-      'antfu/if-newline': 'off',
-      'style/comma-dangle': 'off',
-      'style/member-delimiter-style': 'off',
-      'semi': ['error', 'always'],
-      'no-alert': 'off',
-      'ts/consistent-type-definitions': 'off',
-      'perfectionist/sort-imports': 'off',
-      'perfectionist/sort-named-imports': 'off',
-      'ts/consistent-type-imports': 'off',
-      'jsonc/sort-keys': 'off',
-      'node/prefer-global/process': 'off',
-      'style/arrow-parens': 'off',
-      'ts/method-signature-style': 'off',
-      'style/brace-style': 'off',
-      'style/jsx-one-expression-per-line': 'off',
-      'test/prefer-lowercase-title': 'off',
-      'perfectionist/sort-exports': 'off',
-      'no-extra-boolean-cast': 'off',
-      'prefer-promise-reject-errors': 'off',
-      'new-cap': 'off',
-      'perfectionist/sort-named-exports': 'off',
-      'style/multiline-ternary': 'off'
-    },
-  },
-);
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    ignores: [],
+  },
+  {
+    rules: {
+      'import/order': 'off',
+      'style/semi': 'off',
+      'antfu/if-newline': 'off',
+      'style/comma-dangle': 'off',
+      'style/member-delimiter-style': 'off',
+      'semi': ['error', 'always'],
+      'no-alert': 'off',
+      'ts/consistent-type-definitions': 'off',
+      'perfectionist/sort-imports': 'off',
+      'perfectionist/sort-named-imports': 'off',
+      'ts/consistent-type-imports': 'off',
+      'jsonc/sort-keys': 'off',
+      'node/prefer-global/process': 'off',
+      'style/arrow-parens': 'off',
+      'ts/method-signature-style': 'off',
+      'style/brace-style': 'off',
+      'style/jsx-one-expression-per-line': 'off',
+      'test/prefer-lowercase-title': 'off',
+      'perfectionist/sort-exports': 'off',
+      'no-extra-boolean-cast': 'off',
+      'prefer-promise-reject-errors': 'off',
+      'new-cap': 'off',
+      'perfectionist/sort-named-exports': 'off',
+      'style/multiline-ternary': 'off'
+    },
+  },
+);

package/jest.config.js

@@ -1,6 +1,6 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  rootDir: './src'
-};
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  rootDir: './src'
+};

package/lib/common/useItemFXData.js

@@ -4,11 +4,11 @@ exports.useItemFXData = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("./useKeyframeValue");
 const react_1 = require("react");
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform vec2 u_imgDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform vec2 u_imgDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 function useItemFXData(item, sectionId) {
     const { fragmentShader: shaderBody, FXControls, FXTextures } = item.commonParams;

package/lib/components/Article.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const Section_1 = require("./Section/Section");
-const Item_1 = require("./items/Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const ArticleWrapper_1 = require("./ArticleWrapper");
@@ -31,12 +30,12 @@ const Article = ({ article, sectionData }) => {
     const sectionsLength = article.sections.length;
     return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsxs)("div", { className: "article", ref: articleRef, children: [(0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
                                     const data = section.name ? sectionData[section.name] : {};
-                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, zIndex: sectionsLength - i, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
-                                }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-       .article {
-         position: relative;
-         overflow: clip;
-       }
+                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { articleHeight: articleHeight, section: section, data: data, zIndex: sectionsLength - i }, section.id));
+                                }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" }), (0, jsx_runtime_1.jsx)("div", { id: "grid-component-lightbox-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+       .article {
+         position: relative;
+         overflow: clip;
+       }
       ` })] }) }));
 };
 exports.Article = Article;

package/lib/components/LayoutStyle.js

@@ -9,10 +9,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);
-    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
-        ${children === null || children === void 0 ? void 0 : children(layout)}
-      }
+    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
+        ${children === null || children === void 0 ? void 0 : children(layout)}
+      }
     ` }));
 };
 exports.LayoutStyle = LayoutStyle;

package/lib/components/Section/Section.js

@@ -15,18 +15,24 @@ const useLayoutContext_1 = require("../useLayoutContext");
 const SectionVideo_1 = require("./SectionVideo");
 const SectionImage_1 = require("./SectionImage");
 const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
+const StructuredContent_1 = require("../StructuredContent/StructuredContent");
+const Item_1 = require("../items/Item");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-const Section = ({ section, data, children, zIndex }) => {
+const Section = ({ section, data, zIndex, articleHeight }) => {
     var _a;
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-section-${section.id}`;
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
+    const [sectionHeight, setSectionHeight] = (0, react_1.useState)(0);
+    const layoutValues = [
+        section.minHeight,
+        section.color,
+        (_a = section.media) !== null && _a !== void 0 ? _a : {}
+    ];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
     (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
-    const sectionHeight = layout && section.height[layout] ? section.height[layout] : undefined;
     const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
     const media = (0, react_1.useMemo)(() => {
         if (layoutMedia && !(0, checkOverflowClipSupport_1.isOverflowClipSupported)()) {
@@ -39,38 +45,50 @@ const Section = ({ section, data, children, zIndex }) => {
             .sort((a, b) => a.startsWith - b.startsWith)
             .reduce((acc, layout) => {
             const isHidden = section.hidden[layout.id];
-            return `
-          ${acc}
-          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none' : 'block'};
-            }
+            return `
+          ${acc}
+          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
           }`;
         }, '');
     };
+    (0, react_1.useEffect)(() => {
+        if (!sectionRef.current)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const [entry] = entries;
+            const height = entry.contentRect.height;
+            setSectionHeight(height);
+        });
+        observer.observe(sectionRef.current);
+        return () => observer.disconnect();
+    }, []);
+    const children = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StructuredContent_1.StructuredContent, { section: section }), section.items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { sectionHeight: sectionHeight, item: item, sectionId: section.id, articleHeight: articleHeight }, item.id)))] }));
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, style: { zIndex }, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
-        `))}
-      ${getSectionVisibilityStyles()}
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, style: { zIndex }, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
+         .section-${section.id} {
+            min-height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+         }
+         .section-background-overlay-${section.id} {
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            overflow: clip;
+         }
+         .section-background-wrapper-${section.id} {
+            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+            position: relative;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+            width: 100%;
+         }
+        `))}
+      ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredBlockItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useSizing_1 = require("../items/useSizing");
+const StructuredComponent_1 = require("./StructuredComponent/StructuredComponent");
+const noop = () => null;
+const itemsMap = {
+    [sdk_1.StructuredBlockType.Component]: StructuredComponent_1.StructuredComponent,
+    [sdk_1.StructuredBlockType.RichText]: noop,
+    [sdk_1.StructuredBlockType.Image]: noop,
+    [sdk_1.StructuredBlockType.VimeoEmbed]: noop,
+    [sdk_1.StructuredBlockType.YoutubeEmbed]: noop,
+};
+const StructuredBlockItem = ({ block, maxWidthMap }) => {
+    var _a;
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-item-${block.id}`;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutValues = [block.area, block.layoutParams, (_a = block.hidden) !== null && _a !== void 0 ? _a : {}, maxWidthMap];
+    const ItemComponent = itemsMap[block.type] || noop;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { block: block }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
+                    var _a, _b;
+                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
+                    return (`
+                .structured-block-item-${block.id} {
+                  display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
+                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
+                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
+                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  outline: none;
+                  left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
+                  position: relative;
+                }
+              `);
+                })}
+        ` })] }));
+};
+exports.StructuredBlockItem = StructuredBlockItem;
+function getAlignSelf(alignment) {
+    switch (alignment) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return 'center';
+    }
+}

package/lib/components/StructuredBlockItem/StructuredComponent/StructuredComponent.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const StructuredComponent = ({ block }) => {
+    var _a, _b;
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = sdk;
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const fallbackLayout = (_a = layouts[0]) === null || _a === void 0 ? void 0 : _a.id;
+    const effectiveLayout = layout !== null && layout !== void 0 ? layout : fallbackLayout;
+    const layoutValues = [block.layoutParams];
+    const component = sdk.getComponent(block.commonParams.componentId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const Element = component ? component.element : undefined;
+    const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
+    const commonParameters = block.commonParams.parameters;
+    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
+                        itemId: block.id,
+                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
+                    }, portalId: "component-portal", content: block.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: block.id, children: `
+      .custom-component-${block.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => {
+                    return (`
+          .custom-component-${block.id} {
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+                })}` })] }));
+};
+exports.StructuredComponent = StructuredComponent;

package/lib/components/StructuredContent/StructuredContent.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const StructuredBlockItem_1 = require("../StructuredBlockItem/StructuredBlockItem");
+const StructuredContent = ({ section }) => {
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-structured-content-${section.id}`;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const structuredContentLength = section.structuredContent.length;
+    const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+    const layoutValues = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
+    if (structuredContentLength === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-content-${section.id}`, children: [section.structuredContent.map(block => ((0, jsx_runtime_1.jsx)(StructuredBlockItem_1.StructuredBlockItem, { block: block, maxWidthMap: defaultWidthRecord }, block.id))), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
+                    return (`
+              .structured-content-${section.id} {
+                padding-bottom: ${paddingBottom * 100}vw;
+                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
+                display: flex;
+                flex-direction: column;
+                margin: 0 auto;
+                width: 100%;
+              }
+            `);
+                })}
+        ` })] }));
+};
+exports.StructuredContent = StructuredContent;

package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -65,18 +65,18 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
         const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
         if (!iframe)
             return;
-        const htmlWithStyles = `
-      ${fontGoogleTags}
-      ${fontAdobeTags}
-      <style>
-      ${fontCustomTags}
-        html, body {
-          height: 100%;
-          margin: 0 !important;
-          padding: 0 !important;
-        }
-      </style>
-      ${html}
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      </style>
+      ${html}
     `;
         iframe.srcdoc = htmlWithStyles;
     }, [html, item.commonParams.iframe, ref]);
@@ -84,32 +84,32 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      .embed-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-${item.id} {
-        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
-        transform-origin: top left;
-        z-index: 1;
-        border: none;
-      }
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
+        z-index: 1;
+        border: none;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-                    return (`
-          .embed-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
+                    return (`
+          .embed-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
         `);
-                })}
+                })}
     ` })] }));
 };
 exports.CodeEmbedItem = CodeEmbedItem;

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -42,20 +42,20 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
                     : layout == null ? { opacity: 0 } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
                         itemId: item.id,
                         submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
-                    }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
-      .custom-component-${item.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
+                    }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .custom-component-${item.id} {
-            transform: rotate(${area.angle}deg);
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
+                    return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
         `);
                 })}` })] }));
 };