@cntrl-site/sdk-nextjs 0.8.10 → 0.9.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/lib/components/Article.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const Section_1 = require("./Section");
 const Item_1 = require("./Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
@@ -10,7 +14,8 @@ const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const Article = ({ article }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
-    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;
             overflow: clip;

package/lib/components/Item.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isItemType = exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const RectangleItem_1 = require("./items/RectangleItem");
 const ImageItem_1 = require("./items/ImageItem");
@@ -30,6 +34,7 @@ const itemsMap = {
 };
 const noop = () => null;
 const Item = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item);
     const position = (0, useItemPosition_1.useItemPosition)(item);
@@ -65,7 +70,7 @@ const Item = ({ item }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/LayoutStyle.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-// @ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);

package/lib/components/Section.js

@@ -1,11 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useSectionColor_1 = require("./useSectionColor");
 const Section = ({ section, children }) => {
+    const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
     const getSectionVisibilityStyles = () => {
@@ -24,7 +30,7 @@ const Section = ({ section, children }) => {
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor
-                }, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};

package/lib/components/items/ImageItem.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const ImageItem = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
@@ -17,7 +22,7 @@ const ImageItem = ({ item }) => {
                         opacity: `${opacity}`,
                         borderColor: `${borderColor}`,
                         transform: `rotate(${angle}deg)`
-                    }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                    }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;

package/lib/components/items/RectangleItem.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
 const RectangleItem = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
@@ -18,7 +23,7 @@ const RectangleItem = ({ item }) => {
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor}`,
                         transform: `rotate(${angle}deg)`
-                    } }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                    } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;

package/lib/components/items/RichTextItem.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-//@ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useItemAngle_1 = require("../useItemAngle");

package/lib/components/items/VideoItem.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const VideoItem = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
@@ -17,7 +22,7 @@ const VideoItem = ({ item }) => {
                     opacity: `${opacity}`,
                     borderColor: `${borderColor}`,
                     transform: `rotate(${angle}deg)`
-                }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", 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

@@ -1,11 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const LinkWrapper_1 = require("../LinkWrapper");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const VimeoEmbedItem = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
@@ -26,7 +32,7 @@ const VimeoEmbedItem = ({ item }) => {
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;

package/lib/components/items/YoutubeEmbed.js

@@ -1,12 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YoutubeEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const YoutubeEmbedItem = ({ item }) => {
+    const id = (0, react_1.useId)();
     const { autoplay, controls, url } = item.commonParams;
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
     const angle = (0, useItemAngle_1.useItemAngle)(item);
@@ -23,7 +29,7 @@ const YoutubeEmbedItem = ({ item }) => {
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.8.10",
+  "version": "0.9.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,14 +21,14 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.7.2",
+    "@cntrl-site/sdk": "^1.0.0",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
     "@types/lodash.isequal": "^4.5.6",
     "lodash.isequal": "^4.5.0",
-    "next": "^12.2.3",
+    "next": "^13.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/components/Article.tsx

@@ -1,4 +1,5 @@
-import { FC, useRef } from 'react';
+import { FC, useId, useRef } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
@@ -12,6 +13,7 @@ interface Props {
 export const Article: FC<Props> = ({ article }) => {
   const articleRef = useRef<HTMLDivElement | null>(null);
   const articleRectObserver = useArticleRectObserver(articleRef.current);
+  const id = useId();
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
@@ -24,12 +26,12 @@ export const Article: FC<Props> = ({ article }) => {
           </Section>
         ))}
       </div>
-      <style jsx>{`
+      <JSXStyle id={id}>{`
        .article {
             position: relative;
             overflow: clip;
           }
-      `}</style>
+      `}</JSXStyle>
     </ArticleRectContext.Provider>
   );
 };

package/src/components/Item.tsx

@@ -1,4 +1,5 @@
-import { ComponentType, FC, useEffect, useRef, useState } from 'react';
+import { ComponentType, FC, useEffect, useId, useRef, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import {
   ArticleItemSizingType as SizingType,
   ArticleItemType,
@@ -39,6 +40,7 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
 const noop = () => null;
 
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
+  const id = useId();
   const { layouts } = useCntrlContext();
   const { scale, scaleAnchor } = useItemScale(item);
   const position = useItemPosition(item);
@@ -86,7 +88,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
       style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
     >
       <ItemComponent item={item} />
-      <style jsx>{`
+      <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           return (`
@@ -103,7 +105,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
             }
           `);
         })}
-      `}</style>
+      `}</JSXStyle>
     </div>
   );
 };

package/src/components/LayoutStyle.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { getLayoutMediaQuery, TLayout } from '@cntrl-site/sdk';
-// @ts-ignore
 import JSXStyle from 'styled-jsx/style';
 
 export interface LayoutStyleProps {

package/src/components/Section.tsx

@@ -1,4 +1,5 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
   getLayoutStyles,
@@ -17,6 +18,7 @@ interface Props {
 }
 
 export const Section: FC<Props> = ({ section, children }) => {
+  const id = useId();
   const { layouts } = useCntrlContext();
   const backgroundColor = useSectionColor(section.color);
   const getSectionVisibilityStyles = () => {
@@ -45,7 +47,7 @@ export const Section: FC<Props> = ({ section, children }) => {
       >
         {children}
       </div>
-      <style jsx>{`
+      <JSXStyle id={id}>{`
       ${
         getLayoutStyles(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
@@ -55,7 +57,7 @@ export const Section: FC<Props> = ({ section, children }) => {
         ))
       }
       ${getSectionVisibilityStyles()}
-    `}</style>
+    `}</JSXStyle>
     </>
   );
 };

package/src/components/items/ImageItem.tsx

@@ -1,4 +1,5 @@
-import { FC, useMemo } from 'react';
+import { FC, useId, useMemo } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { CntrlColor, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -6,6 +7,7 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
+  const id = useId();
   const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
   const angle = useItemAngle(item);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
@@ -23,7 +25,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
         >
           <img className="image" src={item.commonParams.url} />
         </div>
-        <style jsx>{`
+        <JSXStyle id={id}>{`
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;
@@ -39,7 +41,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
             object-fit: cover;
             pointer-events: none;
           }
-      `}</style>
+      `}</JSXStyle>
       </>
     </LinkWrapper>
   );

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,5 @@
-import { FC, useMemo } from 'react';
+import { FC, useId, useMemo } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -6,6 +7,7 @@ import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
+  const id = useId();
   const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
   const angle = useItemAngle(item);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
@@ -23,7 +25,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
             transform: `rotate(${angle}deg)`
           }}
         />
-        <style jsx>{`
+        <JSXStyle id={id}>{`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
@@ -31,7 +33,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
             border-style: solid;
             box-sizing: border-box;
           }
-      `}</style>
+      `}</JSXStyle>
       </>
     </LinkWrapper>
   );

package/src/components/items/RichTextItem.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { TRichTextItem } from '@cntrl-site/sdk';
-//@ts-ignore
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,5 @@
-import { FC, useMemo } from 'react';
+import { FC, useId, useMemo } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { CntrlColor, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -6,6 +7,7 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
+  const id = useId();
   const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
   const angle = useItemAngle(item);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
@@ -24,7 +26,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
           <source src={item.commonParams.url} />
         </video>
       </div>
-      <style jsx>{`
+      <JSXStyle id={id}>{`
        .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -42,7 +44,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
           object-fit: cover;
           pointer-events: none;
         }
-    `}</style>
+    `}</JSXStyle>
     </LinkWrapper>
   );
 };

package/src/components/items/VimeoEmbed.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -6,6 +7,7 @@ import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
+  const id = useId();
   const { radius } = useEmbedVideoItem(item);
   const angle = useItemAngle(item);
   const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
@@ -40,7 +42,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
             allowFullScreen
           />
         </div>
-        <style jsx>{`
+        <JSXStyle id={id}>{`
         .embed-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -53,7 +55,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
           z-index: 1;
           border: none;
         }
-      `}</style>
+      `}</JSXStyle>
     </LinkWrapper>
   );
 };

package/src/components/items/YoutubeEmbed.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -7,6 +8,7 @@ import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
+  const id = useId();
   const { autoplay, controls, url } = item.commonParams;
   const { radius } = useEmbedVideoItem(item);
   const angle = useItemAngle(item);
@@ -38,7 +40,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
           allowFullScreen
         />
       </div>
-      <style jsx>{`
+      <JSXStyle id={id}>{`
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -51,7 +53,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
           z-index: 1;
           border: none;
         }
-      `}</style>
+      `}</JSXStyle>
     </LinkWrapper>
   )
 };

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>