@cntrl-site/sdk-nextjs 1.8.34 → 1.8.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +3 -2
  2. package/lib/components/items/ComponentItem/ComponentItem.js +3 -2
  3. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +3 -2
  4. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +3 -2
  5. package/lib/components/items/FileItem/ImageItem.js +3 -2
  6. package/lib/components/items/FileItem/VideoItem.js +3 -2
  7. package/lib/components/items/GroupItem/GroupItem.js +3 -2
  8. package/lib/components/items/RectangleItem/RectangleItem.js +3 -2
  9. package/lib/components/items/RichTextItem/RichTextItem.js +3 -2
  10. package/package.json +1 -1
  11. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +3 -2
  12. package/src/components/items/ComponentItem/ComponentItem.tsx +3 -2
  13. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +3 -2
  14. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +3 -2
  15. package/src/components/items/FileItem/ImageItem.tsx +3 -2
  16. package/src/components/items/FileItem/VideoItem.tsx +3 -2
  17. package/src/components/items/GroupItem/GroupItem.tsx +3 -2
  18. package/src/components/items/RectangleItem/RectangleItem.tsx +3 -2
  19. package/src/components/items/RichTextItem/RichTextItem.tsx +3 -2
  20. package/src/provider/ArticleRectContext.ts +2 -2
  21. package/cntrl-site-sdk-nextjs-1.8.33.tgz +0 -0
  22. package/cntrl-site-sdk-nextjs-1.8.34.tgz +0 -0
package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js CHANGED
@@ -81,10 +81,11 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
81
81
  (0, react_1.useEffect)(() => {
82
82
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
83
83
  }, [isInteractive, onVisibilityChange]);
84
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
84
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
85
85
  .embed-wrapper-${item.id} {
86
86
  position: absolute;
87
87
  width: 100%;
88
+ will-change: transform;
88
89
  height: 100%;
89
90
  }
90
91
  .embed-${item.id} {
@@ -97,7 +98,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
97
98
  return (`
98
99
  .embed-wrapper-${item.id} {
99
100
  opacity: ${layoutParams.opacity};
100
- transform: rotate(${area.angle}deg) translateZ(0);
101
+ transform: rotate(${area.angle}deg);
101
102
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
103
  }
103
104
  .embed-${item.id} {
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -31,16 +31,17 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
31
31
  const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
32
32
  const Element = component ? component.element : undefined;
33
33
  const parameters = layout ? item.layoutParams[layout].parameters : undefined;
34
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
34
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
35
35
  .custom-component-${item.id} {
36
36
  width: 100%;
37
37
  height: 100%;
38
38
  pointer-events: auto;
39
+ will-change: transform;
39
40
  }
40
41
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
41
42
  return (`
42
43
  .custom-component-${item.id} {
43
- transform: rotate(${area.angle}deg) translateZ(0);
44
+ transform: rotate(${area.angle}deg);
44
45
  opacity: ${layoutParams.opacity};
45
46
  filter: blur(${layoutParams.blur}vw);
46
47
  }
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js CHANGED
@@ -116,7 +116,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
116
116
  }
117
117
  });
118
118
  }, [interactionCtrl, vimeoPlayer]);
119
- return ((0, jsx_runtime_1.jsxs)(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)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
119
+ return ((0, jsx_runtime_1.jsxs)(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)("div", { className: `embed-video-wrapper-${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: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
120
120
  if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
121
121
  return;
122
122
  vimeoPlayer.play();
@@ -144,6 +144,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
144
144
  position: absolute;
145
145
  width: 100%;
146
146
  height: 100%;
147
+ will-change: transform;
147
148
  }
148
149
  .embed-video {
149
150
  width: 100%;
@@ -156,7 +157,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
156
157
  return (`
157
158
  .embed-video-wrapper-${item.id} {
158
159
  opacity: ${layoutParams.opacity};
159
- transform: rotate(${area.angle}deg) translateZ(0);
160
+ transform: rotate(${area.angle}deg);
160
161
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
161
162
  }
162
163
  .embed-video-wrapper-${item.id} .embed-video {
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js CHANGED
@@ -122,7 +122,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
122
122
  if (!player || !layoutParams || layoutParams.play !== 'on-hover')
123
123
  return;
124
124
  player.pauseVideo();
125
- }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
125
+ }, 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: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
126
126
  display: isCoverVisible ? 'block' : 'none',
127
127
  cursor: 'pointer',
128
128
  position: 'absolute',
@@ -136,6 +136,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
136
136
  .embed-youtube-video-wrapper-${item.id},
137
137
  .embed-${item.id} {
138
138
  position: absolute;
139
+ will-change: transform;
139
140
  width: 100%;
140
141
  height: 100%;
141
142
  }
@@ -152,7 +153,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
152
153
  return (`
153
154
  .embed-youtube-video-wrapper-${item.id} {
154
155
  opacity: ${layoutParams.opacity};
155
- transform: rotate(${area.angle}deg) translateZ(0);
156
+ transform: rotate(${area.angle}deg);
156
157
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
157
158
  }
158
159
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -65,13 +65,14 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
65
65
  (0, react_1.useEffect)(() => {
66
66
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
67
67
  }, [isInteractive, onVisibilityChange]);
68
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
68
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
69
69
  ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
70
70
  : ((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: `
71
71
  .image-wrapper-${item.id} {
72
72
  position: absolute;
73
73
  width: 100%;
74
74
  height: 100%;
75
+ will-change: transform;
75
76
  box-sizing: border-box;
76
77
  display: flex;
77
78
  }
@@ -97,7 +98,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
97
98
  return (`
98
99
  .image-wrapper-${item.id} {
99
100
  opacity: ${layoutParams.opacity};
100
- transform: rotate(${area.angle}deg) translateZ(0);
101
+ transform: rotate(${area.angle}deg);
101
102
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
103
  }
103
104
  .image-${item.id} {
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -92,7 +92,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
92
92
  observer.observe(ref);
93
93
  return () => observer.disconnect();
94
94
  }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
95
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), 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}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
95
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${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: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), 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}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
96
96
  setIsVideoInteracted(true);
97
97
  }, muted: layoutParams.muted, onPlay: () => {
98
98
  setIsVideoPlaying(true);
@@ -138,6 +138,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
138
138
  height: 100%;
139
139
  box-sizing: border-box;
140
140
  opacity: ${opacity};
141
+ will-change: transform;
141
142
  }
142
143
  .video-overlay-${item.id} {
143
144
  position: absolute;
@@ -184,7 +185,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
184
185
  return (`
185
186
  .video-wrapper-${item.id} {
186
187
  opacity: ${layoutParams.opacity};
187
- transform: rotate(${area.angle}deg) translateZ(0);
188
+ transform: rotate(${area.angle}deg);
188
189
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
189
190
  }
190
191
  .video-${item.id} {
package/lib/components/items/GroupItem/GroupItem.js CHANGED
@@ -34,18 +34,19 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
34
34
  (0, react_1.useEffect)(() => {
35
35
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
36
36
  }, [isInteractive, onVisibilityChange]);
37
- 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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), 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: `
37
+ 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' }), 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: `
38
38
  .group-${item.id} {
39
39
  position: absolute;
40
40
  width: 100%;
41
41
  height: 100%;
42
42
  box-sizing: border-box;
43
+ will-change: transform;
43
44
  }
44
45
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
45
46
  return (`
46
47
  .group-${item.id} {
47
48
  opacity: ${layoutParams.opacity};
48
- transform: rotate(${area.angle}deg) translateZ(0);
49
+ transform: rotate(${area.angle}deg);
49
50
  }
50
51
  `);
51
52
  })}
package/lib/components/items/RectangleItem/RectangleItem.js CHANGED
@@ -44,7 +44,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
44
44
  (0, react_1.useEffect)(() => {
45
45
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
46
46
  }, [isInteractive, onVisibilityChange]);
47
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.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(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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
47
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.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(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
48
48
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
49
49
  : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
50
50
  .rectangle-${item.id} {
@@ -61,7 +61,8 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
61
61
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
62
62
  border-radius: ${layoutParams.radius * 100}vw;
63
63
  border-width: ${layoutParams.strokeWidth * 100}vw;
64
- transform: rotate(${area.angle}deg) translateZ(0);
64
+ transform: rotate(${area.angle}deg);
65
+ will-change: transform;
65
66
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
66
67
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
67
68
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
package/lib/components/items/RichTextItem/RichTextItem.js CHANGED
@@ -53,7 +53,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
53
53
  (0, react_1.useEffect)(() => {
54
54
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
55
55
  }, [isInteractive, onVisibilityChange]);
56
- 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) translateZ(0)` } : {})), (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` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
56
+ 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` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
57
57
  const color = color_1.CntrlColor.parse(layoutParams.color);
58
58
  return (`
59
59
  .rich-text-wrapper-${item.id} {
@@ -67,7 +67,8 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
67
67
  vertical-align: ${layoutParams.verticalAlign};
68
68
  font-variant: ${layoutParams.fontVariant};
69
69
  color: ${color.fmt('rgba')};
70
- transform: rotate(${area.angle}deg) translateZ(0);
70
+ transform: rotate(${area.angle}deg);
71
+ will-change: transform;
71
72
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
72
73
  text-transform: ${layoutParams.textTransform};
73
74
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.34",
3
+ "version": "1.8.35",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx CHANGED
@@ -82,7 +82,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
82
82
  <div
83
83
  className={`embed-wrapper-${item.id}`}
84
84
  style={{
85
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
85
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
86
86
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
88
  transition: stateParams?.transition ?? 'none'
@@ -110,6 +110,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
110
110
  .embed-wrapper-${item.id} {
111
111
  position: absolute;
112
112
  width: 100%;
113
+ will-change: transform;
113
114
  height: 100%;
114
115
  }
115
116
  .embed-${item.id} {
@@ -122,7 +123,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
122
123
  return (`
123
124
  .embed-wrapper-${item.id} {
124
125
  opacity: ${layoutParams.opacity};
125
- transform: rotate(${area.angle}deg) translateZ(0);
126
+ transform: rotate(${area.angle}deg);
126
127
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
127
128
  }
128
129
  .embed-${item.id} {
package/src/components/items/ComponentItem/ComponentItem.tsx CHANGED
@@ -32,7 +32,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
32
32
  ref={setRef}
33
33
  style={{
34
34
  ...(opacity !== undefined ? { opacity } : {}),
35
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
35
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
36
36
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
37
37
  transition: stateParams?.transition ?? 'none'
38
38
  }}
@@ -49,11 +49,12 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
49
49
  width: 100%;
50
50
  height: 100%;
51
51
  pointer-events: auto;
52
+ will-change: transform;
52
53
  }
53
54
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
54
55
  return (`
55
56
  .custom-component-${item.id} {
56
- transform: rotate(${area.angle}deg) translateZ(0);
57
+ transform: rotate(${area.angle}deg);
57
58
  opacity: ${layoutParams.opacity};
58
59
  filter: blur(${layoutParams.blur}vw);
59
60
  }
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -115,7 +115,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
115
115
  ref={setRef}
116
116
  style={{
117
117
  ...(opacity !== undefined ? { opacity } : {}),
118
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
118
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
119
119
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
120
120
  transition: wrapperStateParams?.transition ?? 'none'
121
121
  }}
@@ -177,6 +177,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
177
177
  position: absolute;
178
178
  width: 100%;
179
179
  height: 100%;
180
+ will-change: transform;
180
181
  }
181
182
  .embed-video {
182
183
  width: 100%;
@@ -189,7 +190,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
189
190
  return (`
190
191
  .embed-video-wrapper-${item.id} {
191
192
  opacity: ${layoutParams.opacity};
192
- transform: rotate(${area.angle}deg) translateZ(0);
193
+ transform: rotate(${area.angle}deg);
193
194
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
194
195
  }
195
196
  .embed-video-wrapper-${item.id} .embed-video {
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -123,7 +123,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
123
123
  }}
124
124
  style={{
125
125
  ...(opacity !== undefined ? { opacity } : {}),
126
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
126
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
127
127
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
128
128
  transition: wrapperStateParams?.transition ?? 'none'
129
129
  }}
@@ -160,6 +160,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
160
160
  .embed-youtube-video-wrapper-${item.id},
161
161
  .embed-${item.id} {
162
162
  position: absolute;
163
+ will-change: transform;
163
164
  width: 100%;
164
165
  height: 100%;
165
166
  }
@@ -176,7 +177,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
176
177
  return (`
177
178
  .embed-youtube-video-wrapper-${item.id} {
178
179
  opacity: ${layoutParams.opacity};
179
- transform: rotate(${area.angle}deg) translateZ(0);
180
+ transform: rotate(${area.angle}deg);
180
181
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
181
182
  }
182
183
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -85,7 +85,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
85
85
  ref={setWrapperRef}
86
86
  style={{
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
88
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
89
89
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
90
90
  transition: wrapperStateParams?.transition ?? 'none'
91
91
  }}
@@ -114,6 +114,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
114
114
  position: absolute;
115
115
  width: 100%;
116
116
  height: 100%;
117
+ will-change: transform;
117
118
  box-sizing: border-box;
118
119
  display: flex;
119
120
  }
@@ -139,7 +140,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
139
140
  return (`
140
141
  .image-wrapper-${item.id} {
141
142
  opacity: ${layoutParams.opacity};
142
- transform: rotate(${area.angle}deg) translateZ(0);
143
+ transform: rotate(${area.angle}deg);
143
144
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
144
145
  }
145
146
  .image-${item.id} {
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -110,7 +110,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
110
110
  ref={setRef}
111
111
  style={{
112
112
  ...(opacity !== undefined ? { opacity } : {}),
113
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
113
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
114
114
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
115
115
  transition: wrapperStateParams?.transition ?? 'none'
116
116
  }}
@@ -211,6 +211,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
211
211
  height: 100%;
212
212
  box-sizing: border-box;
213
213
  opacity: ${opacity};
214
+ will-change: transform;
214
215
  }
215
216
  .video-overlay-${item.id} {
216
217
  position: absolute;
@@ -257,7 +258,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
257
258
  return (`
258
259
  .video-wrapper-${item.id} {
259
260
  opacity: ${layoutParams.opacity};
260
- transform: rotate(${area.angle}deg) translateZ(0);
261
+ transform: rotate(${area.angle}deg);
261
262
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
262
263
  }
263
264
  .video-${item.id} {
package/src/components/items/GroupItem/GroupItem.tsx CHANGED
@@ -35,7 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
35
35
  ref={setRef}
36
36
  style={{
37
37
  ...(opacity !== undefined ? { opacity } : {}),
38
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
38
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
39
39
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
40
40
  transition: stateParams?.transition ?? 'none'
41
41
  }}
@@ -63,12 +63,13 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
63
63
  width: 100%;
64
64
  height: 100%;
65
65
  box-sizing: border-box;
66
+ will-change: transform;
66
67
  }
67
68
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
68
69
  return (`
69
70
  .group-${item.id} {
70
71
  opacity: ${layoutParams.opacity};
71
- transform: rotate(${area.angle}deg) translateZ(0);
72
+ transform: rotate(${area.angle}deg);
72
73
  }
73
74
  `);
74
75
  })}
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -57,7 +57,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
57
57
  ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
58
58
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
59
59
  ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
60
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
60
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
61
61
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
62
62
  ...(backdropFilterValue !== undefined
63
63
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
@@ -81,7 +81,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
81
81
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
82
82
  border-radius: ${layoutParams.radius * 100}vw;
83
83
  border-width: ${layoutParams.strokeWidth * 100}vw;
84
- transform: rotate(${area.angle}deg) translateZ(0);
84
+ transform: rotate(${area.angle}deg);
85
+ will-change: transform;
85
86
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
86
87
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
87
88
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
package/src/components/items/RichTextItem/RichTextItem.tsx CHANGED
@@ -62,7 +62,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
62
62
  style={{
63
63
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
64
64
  ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
65
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
65
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
66
66
  ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
67
67
  ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
68
68
  ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
@@ -88,7 +88,8 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
88
88
  vertical-align: ${layoutParams.verticalAlign};
89
89
  font-variant: ${layoutParams.fontVariant};
90
90
  color: ${color.fmt('rgba')};
91
- transform: rotate(${area.angle}deg) translateZ(0);
91
+ transform: rotate(${area.angle}deg);
92
+ will-change: transform;
92
93
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
93
94
  text-transform: ${layoutParams.textTransform};
94
95
  }
package/src/provider/ArticleRectContext.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, Context } from 'react';
1
+ import { createContext } from 'react';
2
2
  import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
3
3
 
4
- export const ArticleRectContext: Context<ArticleRectObserver | null> = createContext<ArticleRectObserver | null>(null);
4
+ export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);
package/cntrl-site-sdk-nextjs-1.8.33.tgz DELETED
Binary file
package/cntrl-site-sdk-nextjs-1.8.34.tgz DELETED
Binary file