@cntrl-site/sdk-nextjs 1.9.78 → 1.9.79

package/src/components/StructuredContent/StructuredContent.tsx

@@ -1,42 +1,42 @@
-import { getLayoutStyles, Section } from '@cntrl-site/sdk';
-import { FC, useId } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { StructuredBlockItem } from '../StructuredBlockItem/StructuredBlockItem';
-
-interface Props {
-  section: Section;
-}
-
-export const StructuredContent: FC<Props> = ({ section }) => {
-  const reactId = useId();
-  const id = `${reactId}-structured-content-${section.id}`;
-  const { layouts } = useCntrlContext();
-  const structuredContentLength = section.structuredContent.length;
-  const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
-  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
-  if (structuredContentLength === 0) return null;
-  return (
-    <div className={`structured-content-${section.id}`}>
-      {section.structuredContent.map(block => (
-        <StructuredBlockItem block={block} key={block.id} maxWidthMap={defaultWidthRecord} />
-      ))}
-      <JSXStyle id={id}>
-        {`
-          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
-            return (`
-              .structured-content-${section.id} {
-                padding-bottom: ${paddingBottom * 100}vw;
-                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
-                display: flex;
-                flex-direction: column;
-                margin: 0 auto;
-                width: 100%;
-              }
-            `);
-          })}
-        `}
-      </JSXStyle>
-    </div>
-  );
-};
+import { getLayoutStyles, Section } from '@cntrl-site/sdk';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { StructuredBlockItem } from '../StructuredBlockItem/StructuredBlockItem';
+
+interface Props {
+  section: Section;
+}
+
+export const StructuredContent: FC<Props> = ({ section }) => {
+  const reactId = useId();
+  const id = `${reactId}-structured-content-${section.id}`;
+  const { layouts } = useCntrlContext();
+  const structuredContentLength = section.structuredContent.length;
+  const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
+  if (structuredContentLength === 0) return null;
+  return (
+    <div className={`structured-content-${section.id}`}>
+      {section.structuredContent.map(block => (
+        <StructuredBlockItem block={block} key={block.id} maxWidthMap={defaultWidthRecord} />
+      ))}
+      <JSXStyle id={id}>
+        {`
+          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
+            return (`
+              .structured-content-${section.id} {
+                padding-bottom: ${paddingBottom * 100}vw;
+                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
+                display: flex;
+                flex-direction: column;
+                margin: 0 auto;
+                width: 100%;
+              }
+            `);
+          })}
+        `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -1,148 +1,148 @@
-import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor, FontFaceGenerator } from '@cntrl-site/sdk';
-import { FC, useEffect, useId, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { ItemProps } from '../Item';
-import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { useItemAngle } from '../useItemAngle';
-import { LinkWrapper } from '../LinkWrapper';
-import { useCodeEmbedItem } from './useCodeEmbedItem';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-
-const stylesMap = {
-  [AreaAnchor.TopLeft]: {},
-  [AreaAnchor.TopCenter]: { justifyContent: 'center' },
-  [AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
-  [AreaAnchor.MiddleLeft]: { alignItems: 'center' },
-  [AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
-  [AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
-  [AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
-  [AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
-  [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
-};
-
-export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const reactId = useId();
-  const id = `${reactId}-codeembed-${item.id}`;
-  const { layouts, fonts } = useCntrlContext();
-  const fontGoogleTags = fonts?.google;
-  const fontAdobeTags = fonts?.adobe;
-  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
-  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
-  const itemAngle = useItemAngle(item, sectionId);
-  const html = decodeBase64(item.commonParams.html);
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  useItemGeometry(item.id, ref);
-  const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const stateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
-  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
-  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
-  const angle = stateParams?.styles?.angle ?? itemAngle;
-
-  useEffect(() => {
-    if (!ref) return;
-    const scripts = ref.querySelectorAll('script');
-    for (const script of scripts) {
-      const newScript = document.createElement('script');
-      for (const attr of script.getAttributeNames()) {
-        newScript.setAttribute(attr, script.getAttribute(attr)!);
-      }
-      newScript.textContent = script.textContent;
-      script.parentNode!.removeChild(script);
-      ref.appendChild(newScript);
-    }
-  }, [html]);
-
-  useEffect(() => {
-    if (!ref) return;
-    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
-    if (!iframe) return;
-    const htmlWithStyles = `
-      ${fontGoogleTags}
-      ${fontAdobeTags}
-      <style>
-      ${fontCustomTags}
-        html, body {
-          height: 100%;
-          margin: 0 !important;
-          padding: 0 !important;
-        }
-      </style>
-      ${html}
-    `;
-    iframe.srcdoc = htmlWithStyles;
-  }, [html, item.commonParams.iframe, ref]);
-
-  const isInteractive = opacity !== 0;
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-
-  return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <div
-        className={`embed-wrapper-${item.id}`}
-        style={{
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          ...(opacity !== undefined ? { opacity } : {}),
-          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
-          transition: stateParams?.transition ?? 'none'
-        }}
-        ref={setRef}
-      >
-        {item.commonParams.iframe ? (
-          <iframe
-            data-embed={item.id}
-            className={`embed-${item.id}`}
-            style={{
-              ...pos,
-              border: 'unset'
-            }}
-          />
-        ) : (
-          <div
-            className={`embed-${item.id}`}
-            style={{ ...pos }}
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        )}
-      </div>
-      <JSXStyle id={id}>{`
-      .embed-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-${item.id} {
-        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
-        transform-origin: top left;
-        z-index: 1;
-        border: none;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-      return (`
-          .embed-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
-        `);
-    })}
-    `}</JSXStyle>
-    </LinkWrapper>
-  );
-};
-
-export function decodeBase64(str: string): string {
-  const binary = atob(str);
-  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
-  return new TextDecoder().decode(bytes);
-}
+import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor, FontFaceGenerator } from '@cntrl-site/sdk';
+import { FC, useEffect, useId, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { useItemAngle } from '../useItemAngle';
+import { LinkWrapper } from '../LinkWrapper';
+import { useCodeEmbedItem } from './useCodeEmbedItem';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+
+const stylesMap = {
+  [AreaAnchor.TopLeft]: {},
+  [AreaAnchor.TopCenter]: { justifyContent: 'center' },
+  [AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
+  [AreaAnchor.MiddleLeft]: { alignItems: 'center' },
+  [AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
+  [AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
+  [AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
+  [AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
+  [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
+};
+
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const reactId = useId();
+  const id = `${reactId}-codeembed-${item.id}`;
+  const { layouts, fonts } = useCntrlContext();
+  const fontGoogleTags = fonts?.google;
+  const fontAdobeTags = fonts?.adobe;
+  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
+  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
+  const html = decodeBase64(item.commonParams.html);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const pos = stylesMap[anchor];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const stateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
+  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
+  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
+  const angle = stateParams?.styles?.angle ?? itemAngle;
+
+  useEffect(() => {
+    if (!ref) return;
+    const scripts = ref.querySelectorAll('script');
+    for (const script of scripts) {
+      const newScript = document.createElement('script');
+      for (const attr of script.getAttributeNames()) {
+        newScript.setAttribute(attr, script.getAttribute(attr)!);
+      }
+      newScript.textContent = script.textContent;
+      script.parentNode!.removeChild(script);
+      ref.appendChild(newScript);
+    }
+  }, [html]);
+
+  useEffect(() => {
+    if (!ref) return;
+    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
+    if (!iframe) return;
+    const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      </style>
+      ${html}
+    `;
+    iframe.srcdoc = htmlWithStyles;
+  }, [html, item.commonParams.iframe, ref]);
+
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <div
+        className={`embed-wrapper-${item.id}`}
+        style={{
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(opacity !== undefined ? { opacity } : {}),
+          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
+          transition: stateParams?.transition ?? 'none'
+        }}
+        ref={setRef}
+      >
+        {item.commonParams.iframe ? (
+          <iframe
+            data-embed={item.id}
+            className={`embed-${item.id}`}
+            style={{
+              ...pos,
+              border: 'unset'
+            }}
+          />
+        ) : (
+          <div
+            className={`embed-${item.id}`}
+            style={{ ...pos }}
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
+      </div>
+      <JSXStyle id={id}>{`
+      .embed-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
+        z-index: 1;
+        border: none;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
+      return (`
+          .embed-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
+        `);
+    })}
+    `}</JSXStyle>
+    </LinkWrapper>
+  );
+};
+
+export function decodeBase64(str: string): string {
+  const binary = atob(str);
+  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}

package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts

@@ -1,36 +1,36 @@
-import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useKeyframeValue } from '../../../common/useKeyframeValue';
-
-export function useCodeEmbedItem(item: CodeEmbedItem, sectionId: string) {
-  const layoutId = useLayoutContext();
-
-  const blur = useKeyframeValue(
-    item,
-    KeyframeType.Blur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'blur' in layoutParams ? layoutParams.blur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const opacity = useKeyframeValue(
-    item,
-    KeyframeType.Opacity,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
-  return { anchor, blur, opacity };
-}
+import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+
+export function useCodeEmbedItem(item: CodeEmbedItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
+  return { anchor, blur, opacity };
+}

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -1,85 +1,85 @@
-import JSXStyle from 'styled-jsx/style';
-import { ItemProps } from '../Item';
-import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useComponentItem } from './useComponentItem';
-import { useItemAngle } from '../useItemAngle';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-
-export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
-  const sdk = useCntrlContext();
-  const { layouts } = sdk;
-  const itemAngle = useItemAngle(item, sectionId);
-  const layout = useLayoutContext();
-  const fallbackLayout = layouts[0]?.id;
-  const effectiveLayout = layout ?? fallbackLayout;
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const component = sdk.getComponent(item.commonParams.componentId);
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
-  useRegisterResize(ref, onResize);
-  useItemGeometry(item.id, ref);
-  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
-  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
-  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
-  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
-  const Element = component ? component.element : undefined;
-  const layoutParameters = effectiveLayout ? item.layoutParams[effectiveLayout]?.parameters : undefined;
-  const commonParameters = item.commonParams.parameters;
-  const parameters = layoutParameters ? {
-    ...layoutParameters,
-    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
-  } : undefined;
-
-  return (
-    <>
-      <div
-        className={`custom-component-${item.id}`}
-        ref={setRef}
-        style={{
-          // preventing layout shift while supporting SSG for proper SEO
-          ...(opacity !== undefined
-            ? { opacity: layout == null ? 0 : opacity }
-            : layout == null ? { opacity: 0 } : {}),
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
-          transition: stateParams?.transition ?? 'none'
-        }}
-      >
-        {parameters && Element && (
-          <Element
-            metadata={{
-              itemId: item.id,
-              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
-            }}
-            portalId="component-portal"
-            content={item.commonParams.content}
-            {...parameters}
-          />
-        )}
-      </div>
-      <JSXStyle id={item.id}>{`
-      .custom-component-${item.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-      return (`
-          .custom-component-${item.id} {
-            transform: rotate(${area.angle}deg);
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-    })}`}
-      </JSXStyle>
-    </>
-  );
-};
+import JSXStyle from 'styled-jsx/style';
+import { ItemProps } from '../Item';
+import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useComponentItem } from './useComponentItem';
+import { useItemAngle } from '../useItemAngle';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+
+export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+  const sdk = useCntrlContext();
+  const { layouts } = sdk;
+  const itemAngle = useItemAngle(item, sectionId);
+  const layout = useLayoutContext();
+  const fallbackLayout = layouts[0]?.id;
+  const effectiveLayout = layout ?? fallbackLayout;
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const component = sdk.getComponent(item.commonParams.componentId);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
+  useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
+  const Element = component ? component.element : undefined;
+  const layoutParameters = effectiveLayout ? item.layoutParams[effectiveLayout]?.parameters : undefined;
+  const commonParameters = item.commonParams.parameters;
+  const parameters = layoutParameters ? {
+    ...layoutParameters,
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
+  } : undefined;
+
+  return (
+    <>
+      <div
+        className={`custom-component-${item.id}`}
+        ref={setRef}
+        style={{
+          // preventing layout shift while supporting SSG for proper SEO
+          ...(opacity !== undefined
+            ? { opacity: layout == null ? 0 : opacity }
+            : layout == null ? { opacity: 0 } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
+          transition: stateParams?.transition ?? 'none'
+        }}
+      >
+        {parameters && Element && (
+          <Element
+            metadata={{
+              itemId: item.id,
+              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
+            }}
+            portalId="component-portal"
+            content={item.commonParams.content}
+            {...parameters}
+          />
+        )}
+      </div>
+      <JSXStyle id={item.id}>{`
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+      return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+    })}`}
+      </JSXStyle>
+    </>
+  );
+};