@cntrl-site/sdk-nextjs 1.6.11-alpha.1 → 1.6.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/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

@@ -24,25 +24,25 @@ 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'};
+            }
           }`;
         }, '');
     };
     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.jsx)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }`))}
-      ${getSectionVisibilityStyles()}
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color]) => (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+         }`))}
+      ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;

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

@@ -25,9 +25,12 @@ const stylesMap = {
     [sdk_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const id = (0, react_1.useId)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts, fonts } = (0, useCntrlContext_1.useCntrlContext)();
+    const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
+    const fontAdobeTags = fonts === null || fonts === void 0 ? void 0 : fonts.adobe;
+    const fontCustomTags = new sdk_1.FontFaceGenerator((_a = fonts === null || fonts === void 0 ? void 0 : fonts.custom) !== null && _a !== void 0 ? _a : []).generate();
     const { anchor, blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { html } = item.commonParams;
@@ -36,9 +39,9 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const pos = stylesMap[anchor];
     const layoutValues = [item.area, item.layoutParams];
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
-    const blur = ((_b = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.blur) !== null && _b !== void 0 ? _b : itemBlur);
-    const opacity = (_d = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity) !== null && _d !== void 0 ? _d : itemOpacity;
-    const angle = (_f = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _e === void 0 ? void 0 : _e.angle) !== null && _f !== void 0 ? _f : itemAngle;
+    const blur = ((_c = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.blur) !== null && _c !== void 0 ? _c : itemBlur);
+    const opacity = (_e = (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : itemOpacity;
+    const angle = (_g = (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _f === void 0 ? void 0 : _f.angle) !== null && _g !== void 0 ? _g : itemAngle;
     (0, react_1.useEffect)(() => {
         if (!ref)
             return;
@@ -59,37 +62,45 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
         const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
         if (!iframe)
             return;
-        iframe.srcdoc = item.commonParams.html;
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
+    `;
+        iframe.srcdoc = htmlWithStyles;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
     const isInteractive = opacity !== 0;
     (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: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.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: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : '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/CompoundItem/CompoundChild.js

@@ -70,32 +70,32 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { height: `${sizingAxis.y === 'manual'
                     ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_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, getCompoundBondaryStyles_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, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
-              left: ${(0, getCompoundBondaryStyles_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, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
               width: ${sizingAxis.x === 'manual'
                         ? `${(0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform: ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
-              z-index: ${area.zIndex};
-            }
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform: ${(0, getCompoundBondaryStyles_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;
+            }
           `);
                 })}` })] }));
 };

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -135,31 +135,31 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      .embed-video-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-video {
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        border: none;
-        overflow: hidden;
-      }
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-video-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-video {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .embed-video-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-          }
-          .embed-video-wrapper-${item.id} .embed-video {
-            border-radius: ${layoutParams.radius * 100}vw;
-          }
+                    return (`
+          .embed-video-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+          }
+          .embed-video-wrapper-${item.id} .embed-video {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
         `);
-                })}
+                })}
     ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -128,34 +128,34 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .embed-youtube-video-wrapper-${item.id},
-        .embed-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-        }
-        .embed-${item.id} {
-          overflow: hidden;
-        }
-        .embed-youtube-video-wrapper-${item.id} iframe {
-          width: 100%;
-          height: 100%;
-          z-index: 1;
-          border: none;
-        }
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .embed-youtube-video-wrapper-${item.id},
+        .embed-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        .embed-${item.id} {
+          overflow: hidden;
+        }
+        .embed-youtube-video-wrapper-${item.id} iframe {
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          border: none;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .embed-youtube-video-wrapper-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            }
-            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
-              border-radius: ${layoutParams.radius * 100}vw;
-            }
+                    return (`
+            .embed-youtube-video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            }
+            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
+            }
           `);
-                })}
+                })}
       ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;