@cntrl-site/sdk-nextjs 1.6.11 → 1.6.12

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

@@ -1,120 +1,132 @@
-import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } 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';
-
-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 id = useId();
-  const { layouts } = useCntrlContext();
-  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
-  const itemAngle = useItemAngle(item, sectionId);
-  const { html } = item.commonParams;
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const stateParams = interactionCtrl?.getState(['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);
-    }
-  }, [item.commonParams.html])
-
-  useEffect(() => {
-    if (!ref) return;
-    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
-    if (!iframe) return;
-    iframe.srcdoc = item.commonParams.html;
-  }, [item.commonParams.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 } : {}),
-          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'};
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
-        `);
-      })}
-    `}</JSXStyle>
-    </LinkWrapper>
-  );
-};
+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';
+
+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 id = useId();
+  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 } = item.commonParams;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const pos = stylesMap[anchor];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const stateParams = interactionCtrl?.getState(['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);
+    }
+  }, [item.commonParams.html]);
+
+  useEffect(() => {
+    if (!ref) return;
+    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
+    if (!iframe) return;
+    const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
+    `;
+    iframe.srcdoc = htmlWithStyles;
+  }, [item.commonParams.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 } : {}),
+          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'};
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
+        `);
+    })}
+    `}</JSXStyle>
+    </LinkWrapper>
+  );
+};

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 const 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 const 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/CompoundItem/CompoundChild.tsx

@@ -1,150 +1,150 @@
-import React, {
-  FC,
-  useEffect,
-  useId,
-  useRef,
-} from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useExemplary } from '../../../common/useExemplary';
-import { useItemScale } from '../useItemScale';
-import { useItemInteractionCtrl } from '../../../interactions/useItemInteractionCtrl';
-import { ArticleItemType, getLayoutStyles, ItemAny, AreaAnchor } from '@cntrl-site/sdk';
-import JSXStyle from 'styled-jsx/style';
-import { ScaleAnchorMap } from '../../../utils/ScaleAnchorMap';
-import { isItemType } from '../../../utils/isItemType';
-import { RichTextWrapper } from '../RichTextWrapper';
-import { itemsMap } from '../itemsMap';
-import {
-  getCompoundHeight,
-  getCompoundLeft,
-  getCompoundTop,
-  getCompoundTransform,
-  getCompoundWidth
-} from '../../../utils/getCompoundBondaryStyles';
-import { useItemTriggers } from '../useItemTriggers';
-import { parseSizing, useSizing } from '../useSizing';
-import { useItemPointerEvents } from '../useItemPointerEvents';
-import { useItemArea } from '../useItemArea';
-
-interface ChildItemProps {
-  item: ItemAny;
-  sectionId: string;
-  isParentVisible?: boolean;
-}
-
-const noop = () => null;
-
-export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
-  const id = useId();
-  const { layouts } = useCntrlContext();
-  const layout = useLayoutContext();
-  const exemplary = useExemplary();
-  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(
-    item.commonParams?.pointerEvents ?? 'when_visible',
-    isParentVisible
-  );
-  const itemScale = useItemScale(item, sectionId);
-  const interactionCtrl = useItemInteractionCtrl(item.id);
-  const triggers = useItemTriggers(interactionCtrl);
-  const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
-  const innerStateProps = interactionCtrl?.getState(['scale']);
-  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
-  const { width, height, top, left } = useItemArea(item, sectionId, {
-    top: wrapperStateProps?.styles?.top as number,
-    left: wrapperStateProps?.styles?.left as number,
-    width: wrapperStateProps?.styles?.width as number,
-    height: wrapperStateProps?.styles?.height as number
-  });
-  const isInitialRef = useRef(true);
-  const sizingAxis = useSizing(item);
-  const ItemComponent = itemsMap[item.type] || noop;
-
-  useEffect(() => {
-    isInitialRef.current = false;
-  }, []);
-
-  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
-  const isRichText = isItemType(item, ArticleItemType.RichText);
-  const scale = innerStateProps?.styles?.scale ?? itemScale;
-  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
-  if (!item.compoundSettings) return null;
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
-  if (item.layoutParams) {
-    layoutValues.push(item.layoutParams);
-  }
-  return (
-    <div
-      className={`item-${item.id}`}
-      onTransitionEnd={(e) => {
-        e.stopPropagation();
-        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
-      }}
-      style={{
-        ...(top !== undefined && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
-        ...(left !== undefined && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
-        ...(width !== undefined && compoundSettings
-          ? { width: `${sizingAxis.x === 'manual'
-              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
-              : 'max-content'}` }
-          : {}),
-        ...(height !== undefined && compoundSettings
-          ? { height: `${sizingAxis.y === 'manual'
-              ? getCompoundHeight(compoundSettings, height)
-              : 'unset'}` }
-          : {}),
-        ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
-        transition: wrapperStateProps?.transition ?? 'none',
-        cursor: hasClickTriggers ? 'pointer' : 'unset',
-        pointerEvents: allowPointerEvents ? 'auto' : 'none'
-      }}
-      {...triggers}
-    >
-      <div
-        className={`item-${item.id}-inner`}
-        style={{
-          transition: innerStateProps?.transition ?? 'none',
-          ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
-        }}
-      >
-        <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
-          <ItemComponent
-            item={item}
-            sectionId={sectionId}
-            interactionCtrl={interactionCtrl}
-            onVisibilityChange={handleVisibilityChange}
-            isInCompound
-          />
-        </RichTextWrapper>
-      </div>
-      <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
-      const sizingAxis = parseSizing(layoutParams.sizing);
-      const scaleAnchor = area.scaleAnchor as AreaAnchor;
-      return (`
-            .item-${item.id}-inner {
-              width: 100%;
-              height: 100%;
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-            }
-            .item-${item.id} {
-              position: absolute;
-              top: ${getCompoundTop(compoundSettings, area.top)};
-              left: ${getCompoundLeft(compoundSettings, area.left)};
-              transition: opacity 0.2s linear 0.1s;
-              display: ${hidden ? 'none' : 'block'};
-              width: ${sizingAxis.x === 'manual'
-          ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
-          : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
-              transform: ${getCompoundTransform(compoundSettings)};
-              z-index: ${area.zIndex};
-            }
-          `);
-    })}
-      `}
-      </JSXStyle>
-    </div>
-  );
-};
+import React, {
+  FC,
+  useEffect,
+  useId,
+  useRef,
+} from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useExemplary } from '../../../common/useExemplary';
+import { useItemScale } from '../useItemScale';
+import { useItemInteractionCtrl } from '../../../interactions/useItemInteractionCtrl';
+import { ArticleItemType, getLayoutStyles, ItemAny, AreaAnchor } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+import { ScaleAnchorMap } from '../../../utils/ScaleAnchorMap';
+import { isItemType } from '../../../utils/isItemType';
+import { RichTextWrapper } from '../RichTextWrapper';
+import { itemsMap } from '../itemsMap';
+import {
+  getCompoundHeight,
+  getCompoundLeft,
+  getCompoundTop,
+  getCompoundTransform,
+  getCompoundWidth
+} from '../../../utils/getCompoundBondaryStyles';
+import { useItemTriggers } from '../useItemTriggers';
+import { parseSizing, useSizing } from '../useSizing';
+import { useItemPointerEvents } from '../useItemPointerEvents';
+import { useItemArea } from '../useItemArea';
+
+interface ChildItemProps {
+  item: ItemAny;
+  sectionId: string;
+  isParentVisible?: boolean;
+}
+
+const noop = () => null;
+
+export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
+  const id = useId();
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = useExemplary();
+  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(
+    item.commonParams?.pointerEvents ?? 'when_visible',
+    isParentVisible
+  );
+  const itemScale = useItemScale(item, sectionId);
+  const interactionCtrl = useItemInteractionCtrl(item.id);
+  const triggers = useItemTriggers(interactionCtrl);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
+  const innerStateProps = interactionCtrl?.getState(['scale']);
+  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+  const { width, height, top, left } = useItemArea(item, sectionId, {
+    top: wrapperStateProps?.styles?.top as number,
+    left: wrapperStateProps?.styles?.left as number,
+    width: wrapperStateProps?.styles?.width as number,
+    height: wrapperStateProps?.styles?.height as number
+  });
+  const isInitialRef = useRef(true);
+  const sizingAxis = useSizing(item);
+  const ItemComponent = itemsMap[item.type] || noop;
+
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
+
+  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
+  const isRichText = isItemType(item, ArticleItemType.RichText);
+  const scale = innerStateProps?.styles?.scale ?? itemScale;
+  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
+  if (!item.compoundSettings) return null;
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
+  if (item.layoutParams) {
+    layoutValues.push(item.layoutParams);
+  }
+  return (
+    <div
+      className={`item-${item.id}`}
+      onTransitionEnd={(e) => {
+        e.stopPropagation();
+        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
+      }}
+      style={{
+        ...(top !== undefined && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
+        ...(left !== undefined && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
+        ...(width !== undefined && compoundSettings
+          ? { width: `${sizingAxis.x === 'manual'
+              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
+              : 'max-content'}` }
+          : {}),
+        ...(height !== undefined && compoundSettings
+          ? { height: `${sizingAxis.y === 'manual'
+              ? getCompoundHeight(compoundSettings, height)
+              : 'unset'}` }
+          : {}),
+        ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
+        transition: wrapperStateProps?.transition ?? 'none',
+        cursor: hasClickTriggers ? 'pointer' : 'unset',
+        pointerEvents: allowPointerEvents ? 'auto' : 'none'
+      }}
+      {...triggers}
+    >
+      <div
+        className={`item-${item.id}-inner`}
+        style={{
+          transition: innerStateProps?.transition ?? 'none',
+          ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
+        }}
+      >
+        <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
+          <ItemComponent
+            item={item}
+            sectionId={sectionId}
+            interactionCtrl={interactionCtrl}
+            onVisibilityChange={handleVisibilityChange}
+            isInCompound
+          />
+        </RichTextWrapper>
+      </div>
+      <JSXStyle id={id}>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
+      const sizingAxis = parseSizing(layoutParams.sizing);
+      const scaleAnchor = area.scaleAnchor as AreaAnchor;
+      return (`
+            .item-${item.id}-inner {
+              width: 100%;
+              height: 100%;
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+            }
+            .item-${item.id} {
+              position: absolute;
+              top: ${getCompoundTop(compoundSettings, area.top)};
+              left: ${getCompoundLeft(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
+              width: ${sizingAxis.x === 'manual'
+          ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
+          : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
+              transform: ${getCompoundTransform(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
+          `);
+    })}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};