@cntrl-site/sdk-nextjs 1.9.42 → 1.9.43

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

@@ -139,35 +139,35 @@ 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'};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-            .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'};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
+            }
           `);
-                })}
+                })}
       ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/components/items/FileItem/ImageItem.js

@@ -73,48 +73,48 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: hasGLEffect && isFXAllowed
                         ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
-                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .image-wrapper-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          display: flex;
-        }
-        .image {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-          border-style: solid;
-          overflow: hidden;
-          box-sizing: border-box;
-        }
-        .img-canvas {
-          border: solid;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-width: 0;
-          box-sizing: border-box;
-        }
+                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .image-wrapper-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+        }
+        .image {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+          border-style: solid;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        .img-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .image-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;' : ''}
-            }
-            .image-${item.id} {
-              border: solid;
-              border-color: ${stroke};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
-            }
+                        return (`
+            .image-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;' : ''}
+            }
+            .image-${item.id} {
+              border: solid;
+              border-color: ${stroke};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/FileItem/VideoItem.js

@@ -136,72 +136,72 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                     else {
                                         videoRef.play();
                                     }
-                                } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .video-wrapper-${item.id} {
-          position: absolute;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          opacity: ${opacity};
-        }
-        .video-overlay-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          cursor: pointer;
-          width: 100%;
-          height: 100%;
-        }
-        .video-cover-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          cursor: pointer;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-        .video {
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          opacity: 1;
-          object-fit: cover;
-          overflow: hidden;
-          border-style: solid;
-        }
-        .video-${item.id} {
-          border-radius: ${radius !== undefined ? `${radius * 100}vw` : '0'};
-        }
-        .video-playback-wrapper {
-          display: flex;
-          justify-content: center;
-        }
-        .video-canvas {
-          border: solid;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-width: 0;
-          box-sizing: border-box;
-        }
+                                } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: ${opacity};
+        }
+        .video-overlay-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+        }
+        .video-cover-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: 1;
+          object-fit: cover;
+          overflow: hidden;
+          border-style: solid;
+        }
+        .video-${item.id} {
+          border-radius: ${radius !== undefined ? `${radius * 100}vw` : '0'};
+        }
+        .video-playback-wrapper {
+          display: flex;
+          justify-content: center;
+        }
+        .video-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .video-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;' : ''}
-            }
-            .video-${item.id} {
-              border: solid;
-              border-color: ${stroke};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
-            }
+                    return (`
+            .video-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;' : ''}
+            }
+            .video-${item.id} {
+              border: solid;
+              border-color: ${stroke};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+            }
           `);
-                })}
+                })}
     ` })] }));
 };
 exports.VideoItem = VideoItem;

package/lib/components/items/GroupItem/GroupItem.js

@@ -51,22 +51,22 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
             }
         }, 0);
     }, [itemIds, item.id]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${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: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .group-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        }
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${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: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .group-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .group-${item.id} {
-              opacity: ${layoutParams.opacity};
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transform: rotate(${area.angle}deg);
-            }
+                        return (`
+            .group-${item.id} {
+              opacity: ${layoutParams.opacity};
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              transform: rotate(${area.angle}deg);
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.GroupItem = GroupItem;

package/lib/components/items/Item.js

@@ -29,9 +29,9 @@ const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
 const useDraggable_1 = require("./useDraggable");
 const ItemGeometryContext_1 = require("../../ItemGeometry/ItemGeometryContext");
-const stickyFix = `
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 `;
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
@@ -117,6 +117,9 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     };
     const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
     const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
+    const dimensionsType = layout ? item.area[layout].dimensionsType : sdk_1.DimensionsType.PixelsBased;
+    const isContainItem = dimensionsType === sdk_1.DimensionsType.PercentageBased;
+    const itemInnerHeight = isContainItem ? `${height}vh` : `${height * 100}vw`;
     const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
@@ -125,7 +128,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(top, height, anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
@@ -136,7 +139,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                         ? `${width * exemplary}px`
                                         : `${width * 100}vw`
                                     : 'max-content'}`,
-                                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                                height: `${sizingAxis.y === 'manual' ? itemInnerHeight : 'unset'}`
                             }
                             : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: isDraggingActive
                                 ? 'grabbing'
@@ -144,40 +147,41 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     ? 'grab'
                                     : hasClickTriggers
                                         ? 'pointer'
-                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;
-                    return (`
-            .item-${item.id} {
-              position: ${sticky ? 'sticky' : 'absolute'};
-              top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transition: opacity 0.2s linear 0.1s;
-              pointer-events: none;
-              display: ${hidden ? 'none' : 'block'};
-              height: fit-content;
-            }
-            .item-${item.id}-inner {
+                    const innerHeight = (area === null || area === void 0 ? void 0 : area.dimensionsType) && (area === null || area === void 0 ? void 0 : area.dimensionsType) === sdk_1.DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
+                    return (`
+            .item-${item.id} {
+              position: ${sticky ? 'sticky' : 'absolute'};
+              top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
+              transition: opacity 0.2s linear 0.1s;
+              pointer-events: none;
+              display: ${hidden ? 'none' : 'block'};
+              height: fit-content;
+            }
+            .item-${item.id}-inner {
               width: ${sizingAxis.x === 'manual'
                         ? `${area.width * 100}vw`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-              position: relative;
-            }
-            .item-wrapper-${item.id} {
-              position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
-              z-index: ${area.zIndex};
-              ${!isInGroup && stickyFix}
-              pointer-events: none;
-              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
-              left: ${area.left * 100}vw;
-            }
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? innerHeight : 'unset'};
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+              position: relative;
+            }
+            .item-wrapper-${item.id} {
+              position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
+              z-index: ${area.zIndex};
+              ${!isInGroup && stickyFix}
+              pointer-events: none;
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(area.top, area.height, area.anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              left: ${area.left * 100}vw;
+            }
           `);
-                })}
+                })}
       ` })] }));
 };
 exports.Item = Item;

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -60,35 +60,35 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
                             ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
                             : 'transparent';
                         return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, transition: (stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) || '', radius: radius, strokeWidth: strokeWidth, isHighest: index === itemFill.length - 1, borderColor: stroke }, fill.id));
-                    }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .rectangle-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        },
-        .image-fill-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform-origin: center center;
-          z-index: 1;
-          background-position: center;
-        },
+                    }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        },
+        .image-fill-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center center;
+          z-index: 1;
+          background-position: center;
+        },
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .rectangle-${item.id} {
-              border-radius: ${layoutParams.radius * 100}vw
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            }
+                        return (`
+            .rectangle-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -59,28 +59,28 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
-                        return (`
-            .rich-text-wrapper-${item.id} {
-              font-size: ${layoutParams.fontSize * 100}vw;
-              line-height: ${layoutParams.lineHeight * 100}vw;
-              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
-              word-spacing: ${layoutParams.wordSpacing * 100}vw;
-              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
-              font-weight: ${layoutParams.fontWeight};
-              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-              vertical-align: ${layoutParams.verticalAlign};
-              font-variant: ${layoutParams.fontVariant};
-              color: ${color.fmt('rgba')};
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              text-transform: ${layoutParams.textTransform};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-            @supports not (color: oklch(42% 0.3 90 / 1)) {
-              .rich-text-wrapper-${item.id} {
-                color: ${color.fmt('rgba')};
-              }
-            }
+                        return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
           `);
                     })}`] })] }));
 };

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -61,13 +61,13 @@ class RichTextConverter {
                 const kids = [];
                 layouts.forEach(l => {
                     const ta = richText.layoutParams[l.id].textAlign;
-                    styleRules[l.id].push(`
-            .${blockClass} {
-              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${ta};
-              white-space: pre-wrap;
-              overflow-wrap: break-word;
-            }
+                    styleRules[l.id].push(`
+            .${blockClass} {
+              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
+              text-align: ${ta};
+              white-space: pre-wrap;
+              overflow-wrap: break-word;
+            }
           `);
                 });
                 const item = group[0];
@@ -111,18 +111,18 @@ class RichTextConverter {
                             if (lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
-                            styleRules[item.layout].push(`
-                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
-                }
+                            styleRules[item.layout].push(`
+                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
+                }
               `);
                             if (color) {
-                                styleRules[item.layout].push(`
-                @supports not (color: oklch(42% 0.3 90 / 1)) {
-                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
-                  }
-                }
+                                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                  }
+                }
               `);
                             }
                         }
@@ -131,10 +131,10 @@ class RichTextConverter {
                 root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
             }
         }
-        const styles = layouts.map(l => `
-      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
-        ${styleRules[l.id].join('\n')}
-      }
+        const styles = layouts.map(l => `
+      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
+        ${styleRules[l.id].join('\n')}
+      }
     `).join('\n');
         return [
             root,