@cntrl-site/sdk-nextjs 1.0.2 → 1.0.3

package/lib/components/Item.js

@@ -102,7 +102,7 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${dimensions.width * exemplary}px`

package/lib/components/items/CodeEmbedItem.js

@@ -58,7 +58,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
             return;
         iframe.srcdoc = item.commonParams.html;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: { opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }, 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: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), 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%;

package/lib/components/items/CustomItem.js

@@ -22,9 +22,7 @@ const CustomItem = ({ item, onResize, sectionId }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     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: {
-                    transform: `rotate(${angle}deg)`,
-                }, children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hoverParams]) => {
+    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({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
               transform: rotate(${area.angle}deg);

package/lib/components/items/GroupItem.js

@@ -25,10 +25,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.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: {
-                        opacity,
-                        transform: `rotate(${angle}deg)`,
-                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.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({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/ImageItem.js

@@ -33,7 +33,7 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const { url, hasGLEffect, fragmentShader } = item.commonParams;
@@ -64,16 +64,8 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const rect = (0, useElementRect_1.useElementRect)(ref);
     const rectWidth = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0);
     const rectHeight = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0);
-    const inlineStyles = {
-        borderRadius: `${radius * 100}vw`,
-        borderWidth: `${strokeWidth * 100}vw`,
-        borderColor: `${borderColor.fmt('rgba')}`
-    };
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
-                        opacity: `${opacity}`,
-                        transform: `rotate(${angle}deg)`,
-                        filter: `blur(${blur * 100}vw)`
-                    }, children: item.commonParams.hasGLEffect ? ((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: `
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}));
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: item.commonParams.hasGLEffect ? ((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%;

package/lib/components/items/RectangleItem.js

@@ -21,22 +21,15 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const backgroundColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(fillColor), [fillColor]);
-    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const backgroundColor = (0, react_1.useMemo)(() => fillColor ? color_1.CntrlColor.parse(fillColor) : undefined, [fillColor]);
+    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
-                        backgroundColor: `${backgroundColor.fmt('rgba')}`,
-                        borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor.toCss()}`,
-                        transform: `rotate(${angle}deg)`,
-                        filter: `blur(${blur * 100}vw)`,
-                        backdropFilter: backdropFilterValue,
-                        WebkitBackdropFilter: backdropFilterValue
-                    } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
+                        ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
+                        : {})) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/RichTextItem.js

@@ -24,11 +24,11 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
-    const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
+    const textColor = (0, react_1.useMemo)(() => color ? color_1.CntrlColor.parse(color) : undefined, [color]);
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const exemplary = (0, useExemplary_1.useExemplary)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    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({ transform: `rotate(${angle}deg)`, filter: `blur(${blur * exemplary}px)`, color: `${textColor.fmt('rgba')}` }, (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` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+    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({}, (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` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {

package/lib/components/items/VideoItem.js

@@ -32,11 +32,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const hasScrollPlayback = scrollPlayback !== null;
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity,
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`,
-                }, children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;

package/lib/components/items/VimeoEmbed.js

@@ -41,11 +41,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         return validURL.href;
     };
     const validUrl = getValidVimeoUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity: `${opacity}`,
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
-                }, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -53,9 +49,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
-                        borderRadius: `${radius * 100}vw`
-                    } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;

package/lib/components/items/YoutubeEmbed.js

@@ -65,11 +65,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, style: {
-                    opacity: `${opacity}`,
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;

package/lib/components/items/useCodeEmbedItem.js

@@ -8,16 +8,16 @@ const useCodeEmbedItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 1;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
     const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : sdk_1.AreaAnchor.TopLeft;
     return { anchor, blur, opacity };
 };

package/lib/components/items/useEmbedVideoItem.js

@@ -8,22 +8,22 @@ const useEmbedVideoItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined, sectionId, [layoutId]);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 1;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
     return { radius, blur, opacity };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/components/items/useFileItem.js

@@ -9,34 +9,34 @@ const useFileItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined, sectionId, [layoutId]);
     const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderWidth, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
-    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined, sectionId, [layoutId]);
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 1;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
     const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
         if (!layoutId)
-            return DEFAULT_COLOR;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
-    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId);
+    }, (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    }, (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     return { radius, strokeWidth, opacity, strokeColor, blur };
 };
 exports.useFileItem = useFileItem;

package/lib/components/items/useGroupItem.js

@@ -8,10 +8,10 @@ function useGroupItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 1;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
     return { opacity };
 }
 exports.useGroupItem = useGroupItem;

package/lib/components/items/useRectangleItem.js

@@ -9,40 +9,40 @@ const useRectangleItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined, sectionId, [layoutId]);
     const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderWidth, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
-    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined, sectionId, [layoutId]);
     const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Color, (item, layoutId) => {
         if (!layoutId)
-            return defaultColor;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
-    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
     const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
         if (!layoutId)
-            return defaultColor;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
-    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BackdropBlur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
-    }, (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined, sectionId, [layoutId]);
     return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/components/items/useRichTextItemValues.js

@@ -9,10 +9,10 @@ const useRichTextItemValues = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.LetterSpacing, (item, layoutId) => {
         if (!layoutId)
             return;
@@ -27,10 +27,10 @@ const useRichTextItemValues = (item, sectionId) => {
     }, (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined, sectionId, [layoutId]);
     const color = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.TextColor, (item, layoutId) => {
         if (!layoutId)
-            return DEFAULT_COLOR;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
-    }, (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
     const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
     const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
     return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };

package/lib/components/useItemAngle.js

@@ -4,7 +4,7 @@ exports.useItemAngle = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useItemAngle = (item, sectionId) => {
-    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Rotation, (item, layoutId) => layoutId ? item.area[layoutId].angle : 0, (animator, scroll, value) => animator.getRotation({ angle: value }, scroll).angle, sectionId);
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Rotation, (item, layoutId) => layoutId ? item.area[layoutId].angle : undefined, (animator, scroll, value) => value ? animator.getRotation({ angle: value }, scroll).angle : undefined, sectionId);
     return angle;
 };
 exports.useItemAngle = useItemAngle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -148,7 +148,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
           top: `${stickyTop * 100}vw`,
           height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
-          ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {}),
+          ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {}),
         }}
       >
         <RichTextWrapper isRichText={isRichText}>

package/src/components/items/CodeEmbedItem.tsx

@@ -57,7 +57,11 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-wrapper-${item.id}`}
-        style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }}
+        style={{
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(opacity !== undefined ? { opacity } : {}),
+      }}
         ref={setRef}
       >
         {item.commonParams.iframe ? (

package/src/components/items/CustomItem.tsx

@@ -22,7 +22,7 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
         className={`custom-component-${item.id}`}
         ref={setRef}
         style={{
-          transform: `rotate(${angle}deg)`,
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
         }}
       >
         {component({})}

package/src/components/items/GroupItem.tsx

@@ -26,8 +26,8 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           className={`group-${item.id}`}
           ref={setRef}
           style={{
-            opacity,
-            transform: `rotate(${angle}deg)`,
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           }}
         >
           {items && items.map(item => (

package/src/components/items/ImageItem.tsx

@@ -28,7 +28,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const layoutId = useLayoutContext();
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const { url, hasGLEffect, fragmentShader } = item.commonParams;
@@ -66,9 +66,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
   const inlineStyles = {
-    borderRadius: `${radius * 100}vw`,
-    borderWidth: `${strokeWidth * 100}vw`,
-    borderColor: `${borderColor.fmt('rgba')}`
+    ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
+    ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
+    ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
   };
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -77,9 +77,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           className={`image-wrapper-${item.id}`}
           ref={setRef}
           style={{
-            opacity: `${opacity}`,
-            transform: `rotate(${angle}deg)`,
-            filter: `blur(${blur * 100}vw)`
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           }}
         >
           {item.commonParams.hasGLEffect ? (

package/src/components/items/RectangleItem.tsx

@@ -16,8 +16,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const { layouts } = useCntrlContext();
   const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const backgroundColor = useMemo(() => fillColor ? CntrlColor.parse(fillColor) : undefined, [fillColor]);
+  const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
@@ -30,14 +30,16 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            backgroundColor: `${backgroundColor.fmt('rgba')}`,
-            borderRadius: `${radius * 100}vw`,
-            borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${borderColor.toCss()}`,
-            transform: `rotate(${angle}deg)`,
-            filter: `blur(${blur * 100}vw)`,
-            backdropFilter: backdropFilterValue,
-            WebkitBackdropFilter: backdropFilterValue
+            ...(backgroundColor ? { backgroundColor : `${backgroundColor.fmt('rgba')}` } : {}),
+            ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
+            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
+            ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+            ...(backdropFilterValue !== undefined
+              ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
+              : {}
+            ),
           }}
         />
         <JSXStyle id={id}>{`

package/src/components/items/RichTextItem.tsx

@@ -19,7 +19,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item, sectionId);
   const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = useRichTextItemValues(item, sectionId);
-  const textColor = useMemo(() => CntrlColor.parse(color), [color]);
+  const textColor = useMemo(() => color ? CntrlColor.parse(color) : undefined, [color]);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const exemplary = useExemplary();
   useRegisterResize(ref, onResize);
@@ -30,9 +30,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         ref={setRef}
         className={`rich-text-wrapper-${item.id}`}
         style={{
-          transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * exemplary}px)`,
-          color: `${textColor.fmt('rgba')}`,
+          ...(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` } : {}),

package/src/components/items/VideoItem.tsx

@@ -37,9 +37,9 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
         className={`video-wrapper-${item.id}`}
         ref={setRef}
         style={{
-          opacity,
-          transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`,
+          ...(opacity !== undefined ? { opacity } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
         }}
       >
         {hasScrollPlayback ? (

package/src/components/items/VimeoEmbed.tsx

@@ -43,9 +43,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         className={`embed-video-wrapper-${item.id}`}
         ref={setRef}
         style={{
-          opacity: `${opacity}`,
-          transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`
+          ...(opacity !== undefined ? { opacity } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
         }}
         onMouseEnter={() => {
           if (!vimeoPlayer || play !== 'on-hover') return;
@@ -63,7 +63,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           allow="autoplay; fullscreen; picture-in-picture;"
           allowFullScreen
           style={{
-            borderRadius: `${radius * 100}vw`
+            ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {})
           }}
         />
       </div>

package/src/components/items/YoutubeEmbed.tsx

@@ -65,9 +65,9 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           player.pauseVideo();
         }}
         style={{
-          opacity: `${opacity}`,
-          transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`
+          ...(opacity !== undefined ? { opacity } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
         }}
       >
         <div

package/src/components/items/useCodeEmbedItem.ts

@@ -9,11 +9,11 @@ export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
     item,
     KeyframeType.Blur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'blur' in layoutParams ? layoutParams.blur : 0;
     },
-    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined,
     sectionId,
     [layoutId]
   );
@@ -22,11 +22,11 @@ export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
     item,
     KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 1;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
-    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
     sectionId,
     [layoutId]
   );

package/src/components/items/useEmbedVideoItem.ts

@@ -8,11 +8,11 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
     item,
     KeyframeType.BorderRadius,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'radius' in layoutParams ? layoutParams.radius : 0;
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
-    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined,
     sectionId,
     [layoutId]
   );
@@ -20,11 +20,11 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
     item,
     KeyframeType.Blur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'blur' in layoutParams ? layoutParams.blur : 0;
     },
-    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined,
     sectionId,
     [layoutId]
   );
@@ -33,11 +33,11 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
     item,
     KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 1;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
-    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
     sectionId,
     [layoutId]
   );

package/src/components/items/useFileItem.ts

@@ -9,11 +9,11 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
     item,
     KeyframeType.BorderRadius,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
-    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined,
     sectionId,
     [layoutId]
   );
@@ -21,11 +21,11 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
     item,
     KeyframeType.BorderWidth,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
-    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    (animator, scroll, value) => value ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined,
     sectionId,
     [layoutId]
   );
@@ -34,11 +34,11 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
     item,
     KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 1;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
-    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
     sectionId,
     [layoutId]
   );
@@ -47,24 +47,26 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
     item,
     KeyframeType.BorderColor,
     (item, layoutId) => {
-      if (!layoutId) return DEFAULT_COLOR;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
     },
-    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
-    sectionId
+    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
+    sectionId,
+    [layoutId]
   );
 
   const blur = useKeyframeValue(
     item,
     KeyframeType.Blur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'blur' in layoutParams ? layoutParams.blur : 0;
     },
-    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
-    sectionId
+    (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
   );
 
   return { radius, strokeWidth, opacity, strokeColor, blur };

package/src/components/items/useGroupItem.ts

@@ -8,11 +8,11 @@ export function useGroupItem(item: GroupItem, sectionId: string) {
     item,
     KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 1;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
-    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    (animator, scroll, value) => value ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
     sectionId,
     [layoutId]
   );

package/src/components/items/useRectangleItem.ts

@@ -10,11 +10,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.BorderRadius,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
-    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    (animator, scroll, value) => value ? animator.getRadius({ radius: value }, scroll).radius : undefined,
     sectionId,
     [layoutId]
   );
@@ -22,11 +22,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.BorderWidth,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
-    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    (animator, scroll, value) => value ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined,
     sectionId,
     [layoutId]
   );
@@ -34,11 +34,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.Color,
     (item, layoutId) => {
-      if (!layoutId) return defaultColor;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getColor({ color: value }, scroll).color,
+    (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );
@@ -46,11 +46,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.BorderColor,
     (item, layoutId) => {
-      if (!layoutId) return defaultColor;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );
@@ -58,11 +58,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.Blur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'blur' in layoutParams ? layoutParams.blur : 0;
     },
-    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined,
     sectionId,
     [layoutId]
   );
@@ -70,11 +70,11 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
     item,
     KeyframeType.BackdropBlur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
     },
-    (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur,
+    (animator, scroll, value) => value ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined,
     sectionId,
     [layoutId]
   );

package/src/components/items/useRichTextItemValues.ts

@@ -10,11 +10,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     item,
     KeyframeType.Blur,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'blur' in layoutParams ? layoutParams.blur : 0;
     },
-    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    (animator, scroll, value) => value ? animator.getBlur({ blur: value }, scroll).blur : undefined,
     sectionId,
     [layoutId]
   );
@@ -49,11 +49,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     item,
     KeyframeType.TextColor,
     (item, layoutId) => {
-      if (!layoutId) return DEFAULT_COLOR;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
     },
-    (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color,
+    (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );

package/src/components/useItemAngle.ts

@@ -5,8 +5,8 @@ export const useItemAngle = (item: ItemAny, sectionId: string) => {
   const angle = useKeyframeValue(
     item,
     KeyframeType.Rotation,
-    (item, layoutId) => layoutId ? item.area[layoutId].angle : 0,
-    (animator, scroll, value) => animator.getRotation({ angle: value }, scroll).angle,
+    (item, layoutId) => layoutId ? item.area[layoutId].angle : undefined,
+    (animator, scroll, value) => value ? animator.getRotation({ angle: value }, scroll).angle : undefined,
     sectionId
   );
   return angle;