@cntrl-site/sdk-nextjs 1.8.11 → 1.8.12

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemFXData = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("./useKeyframeValue");
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 function useItemFXData(item, sectionId) {
     const { fragmentShader: shaderBody, FXControls } = item.commonParams;

package/lib/common/useRegisterResize.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRegisterResize = void 0;
 const react_1 = require("react");
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-const useRegisterResize = (ref, onResize) => {
+function useRegisterResize(ref, onResize) {
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
             return;
@@ -19,5 +19,5 @@ const useRegisterResize = (ref, onResize) => {
             observer.unobserve(ref);
         };
     }, [ref, onResize]);
-};
+}
 exports.useRegisterResize = useRegisterResize;

package/lib/components/Article.js

@@ -28,11 +28,11 @@ const Article = ({ article, sectionData }) => {
     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.jsx)("div", { className: "article", ref: articleRef, 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, 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)(style_1.default, { id: id, children: `
-       .article {
-         position: relative;
-         overflow: clip;
-       }
+                        }) }) }), (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

@@ -33,12 +33,12 @@ const Section = ({ section, data, children }) => {
             .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'};
+            }
           }`;
         }, '');
     };
@@ -66,46 +66,46 @@ const Section = ({ section, data, children }) => {
     }, [isVideo]);
     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, children: [layout && ((_g = (_f = section.media) === null || _f === void 0 ? void 0 : _f[layout]) === null || _g === void 0 ? void 0 : _g.url) && ((_j = (_h = section.media) === null || _h === void 0 ? void 0 : _h[layout]) === null || _j === void 0 ? void 0 : _j.size) !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsx)("div", { className: `section-background-wrapper-${section.id}`, children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", className: `video-background-${section.id}`, children: (0, jsx_runtime_1.jsx)("source", { src: (_m = (_l = (_k = section.media) === null || _k === void 0 ? void 0 : _k[layout]) === null || _l === void 0 ? void 0 : _l.url) !== null && _m !== void 0 ? _m : '' }) })) : ((0, jsx_runtime_1.jsx)("img", { src: (_q = (_p = (_o = section.media) === null || _o === void 0 ? void 0 : _o[layout]) === null || _p === void 0 ? void 0 : _p.url) !== null && _q !== void 0 ? _q : '', className: `image-background-${section.id}` })) }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, 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, children: [layout && ((_g = (_f = section.media) === null || _f === void 0 ? void 0 : _f[layout]) === null || _g === void 0 ? void 0 : _g.url) && ((_j = (_h = section.media) === null || _h === void 0 ? void 0 : _h[layout]) === null || _j === void 0 ? void 0 : _j.size) !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsx)("div", { className: `section-background-wrapper-${section.id}`, children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", className: `video-background-${section.id}`, children: (0, jsx_runtime_1.jsx)("source", { src: (_m = (_l = (_k = section.media) === null || _k === void 0 ? void 0 : _k[layout]) === null || _l === void 0 ? void 0 : _l.url) !== null && _m !== void 0 ? _m : '' }) })) : ((0, jsx_runtime_1.jsx)("img", { src: (_q = (_p = (_o = section.media) === null || _o === void 0 ? void 0 : _o[layout]) === null || _p === void 0 ? void 0 : _p.url) !== null && _q !== void 0 ? _q : '', className: `image-background-${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]) => {
                     var _a;
-                    return (`
-         .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%;
-         }
-         .video-background-${section.id} {
-            object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
-            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null || (media === null || media === void 0 ? void 0 : media.size) === 'cover' ? '100%' : 'auto'};
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
-            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
-            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-         .image-background-${section.id} {
-            object-fit: ${media === null || media === void 0 ? void 0 : media.size};
-            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null ? '100%' : 'auto'};
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
-            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
-            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
+                    return (`
+         .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%;
+         }
+         .video-background-${section.id} {
+            object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
+            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null || (media === null || media === void 0 ? void 0 : media.size) === 'cover' ? '100%' : 'auto'};
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
+            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
+            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
+         }
+         .image-background-${section.id} {
+            object-fit: ${media === null || media === void 0 ? void 0 : media.size};
+            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null ? '100%' : 'auto'};
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
+            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
+            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
+         }
         `);
-                })}
-      ${getSectionVisibilityStyles()}
+                })}
+      ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;

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

@@ -62,18 +62,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>
-      ${item.commonParams.html}
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      </style>
+      ${item.commonParams.html}
     `;
         iframe.srcdoc = htmlWithStyles;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
@@ -81,31 +81,31 @@ 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 } : {})), { 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 } : {})), { 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'};
-          }
-          .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'};
+          }
+          .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

@@ -15,7 +15,7 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -23,25 +23,27 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const layoutValues = [item.area, item.layoutParams];
     const component = sdk.getComponent(item.commonParams.componentId);
     const [ref, setRef] = (0, react_1.useState)(null);
-    const { opacity: itemOpacity } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle, blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const Element = component ? component.element : undefined;
     const parameters = layout ? item.layoutParams[layout].parameters : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ 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;
-      }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ 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};
-          }
+                    return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+          }
         `);
                 })}` })] }));
 };

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

@@ -12,8 +12,15 @@ function useComponentItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     return {
-        opacity
+        opacity,
+        blur
     };
 }
 exports.useComponentItem = useComponentItem;

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -70,32 +70,32 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { height: `${sizingAxis.y === 'manual'
                     ? (0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (compoundSettings ? { transform: `${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;
-                    return (`
-            .item-${item.id}-inner {
-              width: 100%;
-              height: 100%;
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-            }
-            .item-${item.id} {
-              position: absolute;
-              top: ${(0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
-              left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
-              transition: opacity 0.2s linear 0.1s;
-              display: ${hidden ? 'none' : 'block'};
+                    return (`
+            .item-${item.id}-inner {
+              width: 100%;
+              height: 100%;
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+            }
+            .item-${item.id} {
+              position: absolute;
+              top: ${(0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
               width: ${sizingAxis.x === 'manual'
                         ? `${(0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
-              z-index: ${area.zIndex};
-            }
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
           `);
-                })}
+                })}
       ` })] })));
 };
 exports.CompoundChild = CompoundChild;

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -32,22 +32,22 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .compound-${item.id} {
-          overflow: ${item.commonParams.overflow};
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        }
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .compound-${item.id} {
+          overflow: ${item.commonParams.overflow};
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .compound-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-            }
+                        return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.CompoundItem = CompoundItem;

package/lib/components/items/CustomItem/CustomItem.js

@@ -25,15 +25,15 @@ const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     if (!component)
         return null;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => {
-                    return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              height: 100%;
-              width: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-            }
+                    return (`
+            .custom-component-${item.id} {
+              transform: rotate(${area.angle}deg);
+              height: 100%;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+            }
           `);
                 })}` })] }));
 };