@cntrl-site/sdk-nextjs 1.9.71-9 → 1.9.72

package/src/utils/getFill.ts

@@ -1,46 +1,46 @@
-import { FillLayer } from '@cntrl-site/sdk';
-
-export function getFill(fill: FillLayer) {
-  if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
-    return `linear-gradient(${fill.angle}deg, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
-      .join(', ')})`;
-  }
-
-  if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
-    const center = fill.center
-      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
-      : '50% 50%';
-    const diameter = fill.diameter;
-    return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
-      .join(', ')})`;
-  }
-
-  if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
-    const center = fill.center
-      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
-      : '50% 50%';
-    const angle = (fill.angle ?? 0);
-    const hasMultipleStops = fill.colors.length > 1;
-    const lastStop = fill.colors[fill.colors.length - 1];
-    const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
-    const colorsWithWrap = shouldAppendWrapStop
-      ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
-      : fill.colors;
-
-    return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
-      .map(c => `${c.value} ${c.position}%`)
-      .join(', ')})`;
-  }
-
-  if (fill.type === 'image' && fill.src) {
-    return `url(${fill.src})`;
-  }
-
-  if (fill.type === 'solid') {
-    return fill.value;
-  }
-
-  return 'transparent';
-}
+import { FillLayer } from '@cntrl-site/sdk';
+
+export function getFill(fill: FillLayer) {
+  if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
+    return `linear-gradient(${fill.angle}deg, ${fill.colors
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
+    const center = fill.center
+      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+      : '50% 50%';
+    const diameter = fill.diameter;
+    return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
+    const center = fill.center
+      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+      : '50% 50%';
+    const angle = (fill.angle ?? 0);
+    const hasMultipleStops = fill.colors.length > 1;
+    const lastStop = fill.colors[fill.colors.length - 1];
+    const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
+    const colorsWithWrap = shouldAppendWrapStop
+      ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+      : fill.colors;
+
+    return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'image' && fill.src) {
+    return `url(${fill.src})`;
+  }
+
+  if (fill.type === 'solid') {
+    return fill.value;
+  }
+
+  return 'transparent';
+}

package/src/utils/getFontFamilyValue.ts

@@ -1,3 +1,3 @@
-export function getFontFamilyValue(value: string | undefined) {
-  return value && value.includes('"') ? value : `"${value}"`;
-}
+export function getFontFamilyValue(value: string | undefined) {
+  return value && value.includes('"') ? value : `"${value}"`;
+}

package/src/utils/getInvertedRanges.ts

@@ -1,43 +1,43 @@
-interface Range {
-  start: number;
-  end: number;
-}
-
-/**
- * @param length
- * @param ranges - SORTED array of ranges [start, end)
- */
-
-export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
-  if (ranges.length === 0) {
-    return [{
-      start: 0,
-      end: length
-    }];
-  }
-  const inverted: Range[] = [];
-  if (ranges[0].start > 0) {
-    inverted.push({
-      start: 0,
-      end: ranges[0].start
-    });
-  }
-  for (let i = 0; i < ranges.length - 1; i += 1) {
-    const left = ranges[i];
-    const right = ranges[i + 1];
-    if (right.start - left.end > 0) {
-      inverted.push({
-        start: left.end,
-        end: right.start
-      });
-    }
-  }
-  const lastRange = ranges[ranges.length - 1];
-  if (lastRange.end < length) {
-    inverted.push({
-      start: lastRange.end,
-      end: length
-    });
-  }
-  return inverted;
-}
+interface Range {
+  start: number;
+  end: number;
+}
+
+/**
+ * @param length
+ * @param ranges - SORTED array of ranges [start, end)
+ */
+
+export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
+  if (ranges.length === 0) {
+    return [{
+      start: 0,
+      end: length
+    }];
+  }
+  const inverted: Range[] = [];
+  if (ranges[0].start > 0) {
+    inverted.push({
+      start: 0,
+      end: ranges[0].start
+    });
+  }
+  for (let i = 0; i < ranges.length - 1; i += 1) {
+    const left = ranges[i];
+    const right = ranges[i + 1];
+    if (right.start - left.end > 0) {
+      inverted.push({
+        start: left.end,
+        end: right.start
+      });
+    }
+  }
+  const lastRange = ranges[ranges.length - 1];
+  if (lastRange.end < length) {
+    inverted.push({
+      start: lastRange.end,
+      end: length
+    });
+  }
+  return inverted;
+}

package/src/utils/getItemTopStyle.ts

@@ -1,39 +1,39 @@
-import { AnchorSide } from '@cntrl-site/sdk';
-
-function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
-  if (!height) return 0;
-  switch (anchorSide) {
-    case AnchorSide.Center:
-      return height / 2;
-    case AnchorSide.Bottom:
-      return height;
-    default:
-      return 0;
-  }
-}
-
-export function getPercentageBasedTopStyle(top: number, height?: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
-  }
-}
-
-export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}
+import { AnchorSide } from '@cntrl-site/sdk';
+
+function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
+  if (!height) return 0;
+  switch (anchorSide) {
+    case AnchorSide.Center:
+      return height / 2;
+    case AnchorSide.Bottom:
+      return height;
+    default:
+      return 0;
+  }
+}
+
+export function getPercentageBasedTopStyle(top: number, height?: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+  }
+}
+
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}

package/src/utils/getStyleFromItemStateAndParams.ts

@@ -1,8 +1,8 @@
-export function getStyleFromItemStateAndParams<T>(
-  stateValue: T | undefined,
-  paramsValue: T | undefined
-): T | undefined {
-  return (stateValue as T) !== undefined
-    ? stateValue as T
-    : paramsValue;
-}
+export function getStyleFromItemStateAndParams<T>(
+  stateValue: T | undefined,
+  paramsValue: T | undefined
+): T | undefined {
+  return (stateValue as T) !== undefined
+    ? stateValue as T
+    : paramsValue;
+}

package/src/utils/getValidYoutubeUrl.ts

@@ -1,29 +1,29 @@
-enum Allowed {
-  Tiny = 'youtu.be',
-  Full = 'www.youtube.com'
-}
-
-export function getYoutubeId({ hostname, pathname, search }: URL): string {
-  if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
-  }
-  switch (hostname) {
-    case Allowed.Tiny:
-      return pathname.replace('/', '');
-    case Allowed.Full:
-      if (pathname.startsWith('/shorts/')) {
-        const shortsId = pathname.split('/shorts/')[1];
-        if (!shortsId) {
-          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
-        }
-        return shortsId;
-      } else {
-        const searchParams = new URLSearchParams(search);
-        const id = searchParams.get('v');
-        if (!id) {
-          throw new Error('Cannot get valid YouTube ID from search params.');
-        }
-        return id;
-      }
-  }
-}
+enum Allowed {
+  Tiny = 'youtu.be',
+  Full = 'www.youtube.com'
+}
+
+export function getYoutubeId({ hostname, pathname, search }: URL): string {
+  if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
+    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
+  }
+  switch (hostname) {
+    case Allowed.Tiny:
+      return pathname.replace('/', '');
+    case Allowed.Full:
+      if (pathname.startsWith('/shorts/')) {
+        const shortsId = pathname.split('/shorts/')[1];
+        if (!shortsId) {
+          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+        }
+        return shortsId;
+      } else {
+        const searchParams = new URLSearchParams(search);
+        const id = searchParams.get('v');
+        if (!id) {
+          throw new Error('Cannot get valid YouTube ID from search params.');
+        }
+        return id;
+      }
+  }
+}

package/src/utils/isItemType.ts

@@ -1,5 +1,5 @@
-import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
-
-export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
-  return item.type === itemType;
-}
+import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
+
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}

package/src/utils/rangeMap.ts

@@ -1,13 +1,13 @@
-export function rangeMap(
-  n: number,
-  start1: number,
-  stop1: number,
-  start2: number,
-  stop2: number,
-  withinBounds: boolean = false
-): number {
-  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
-  if (withinBounds && n < start1) return start2;
-  if (withinBounds && n > stop1) return stop2;
-  return mapped;
-}
+export function rangeMap(
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds: boolean = false
+): number {
+  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  if (withinBounds && n < start1) return start2;
+  if (withinBounds && n > stop1) return stop2;
+  return mapped;
+}

package/src/utils/useElementRect.ts

@@ -1,23 +1,23 @@
-import { useEffect, useState } from 'react';
-
-export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
-  const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
-
-  useEffect(() => {
-    if (!element) return;
-    const observer = new ResizeObserver(entries => {
-      const el = entries.find(entry => entry.target === element);
-      if (!el) {
-        throw new Error('Element is not found in observed entries');
-      }
-      setRect(el.target.getBoundingClientRect());
-    });
-    observer.observe(element);
-    return () => {
-      observer.unobserve(element);
-      observer.disconnect();
-    };
-  }, [element]);
-
-  return rect;
-}
+import { useEffect, useState } from 'react';
+
+export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
+  const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
+
+  useEffect(() => {
+    if (!element) return;
+    const observer = new ResizeObserver(entries => {
+      const el = entries.find(entry => entry.target === element);
+      if (!el) {
+        throw new Error('Element is not found in observed entries');
+      }
+      setRect(el.target.getBoundingClientRect());
+    });
+    observer.observe(element);
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return rect;
+}

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StructuredBlockItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
-const react_1 = require("react");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useSizing_1 = require("../items/useSizing");
-const StructuredComponent_1 = require("./StructuredComponent/StructuredComponent");
-const noop = () => null;
-const itemsMap = {
-    [sdk_1.StructuredBlockType.Component]: StructuredComponent_1.StructuredComponent,
-    [sdk_1.StructuredBlockType.RichText]: noop,
-    [sdk_1.StructuredBlockType.Image]: noop,
-    [sdk_1.StructuredBlockType.VimeoEmbed]: noop,
-    [sdk_1.StructuredBlockType.YoutubeEmbed]: noop,
-};
-const StructuredBlockItem = ({ block, maxWidthMap }) => {
-    var _a;
-    const reactId = (0, react_1.useId)();
-    const id = `${reactId}-item-${block.id}`;
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const layoutValues = [block.area, block.layoutParams, (_a = block.hidden) !== null && _a !== void 0 ? _a : {}, maxWidthMap];
-    const ItemComponent = itemsMap[block.type] || noop;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { block: block }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
-                    var _a, _b;
-                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
-                    return (`
-                .structured-block-item-${block.id} {
-                  display: ${hidden ? 'none' : 'block'};
-                  align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
-                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
-                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  outline: none;
-                  left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
-                  position: relative;
-                }
-              `);
-                })}
-        ` })] }));
-};
-exports.StructuredBlockItem = StructuredBlockItem;
-function getAlignSelf(alignment) {
-    switch (alignment) {
-        case 'left':
-            return 'start';
-        case 'right':
-            return 'end';
-        default:
-            return 'center';
-    }
-}

package/lib/components/StructuredBlockItem/StructuredComponent/StructuredComponent.js

@@ -1,48 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StructuredComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const sdk_1 = require("@cntrl-site/sdk");
-const react_1 = require("react");
-const useCntrlContext_1 = require("../../../provider/useCntrlContext");
-const useLayoutContext_1 = require("../../useLayoutContext");
-const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
-const StructuredComponent = ({ block }) => {
-    var _a, _b;
-    const sdk = (0, useCntrlContext_1.useCntrlContext)();
-    const { layouts } = sdk;
-    const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const fallbackLayout = (_a = layouts[0]) === null || _a === void 0 ? void 0 : _a.id;
-    const effectiveLayout = layout !== null && layout !== void 0 ? layout : fallbackLayout;
-    const layoutValues = [block.layoutParams];
-    const component = sdk.getComponent(block.commonParams.componentId);
-    const [ref, setRef] = (0, react_1.useState)(null);
-    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
-    const Element = component ? component.element : undefined;
-    const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
-    const commonParameters = block.commonParams.parameters;
-    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
-                        itemId: block.id,
-                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
-                    }, portalId: "component-portal", content: block.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: block.id, children: `
-      .custom-component-${block.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => {
-                    return (`
-          .custom-component-${block.id} {
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-                })}` })] }));
-};
-exports.StructuredComponent = StructuredComponent;

package/lib/components/StructuredContent/StructuredContent.js

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StructuredContent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
-const react_1 = require("react");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const StructuredBlockItem_1 = require("../StructuredBlockItem/StructuredBlockItem");
-const StructuredContent = ({ section }) => {
-    const reactId = (0, react_1.useId)();
-    const id = `${reactId}-structured-content-${section.id}`;
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const structuredContentLength = section.structuredContent.length;
-    const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
-    const layoutValues = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
-    if (structuredContentLength === 0)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-content-${section.id}`, children: [section.structuredContent.map(block => ((0, jsx_runtime_1.jsx)(StructuredBlockItem_1.StructuredBlockItem, { block: block, maxWidthMap: defaultWidthRecord }, block.id))), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-          ${(0, sdk_1.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%;
-              }
-            `);
-                })}
-        ` })] }));
-};
-exports.StructuredContent = StructuredContent;

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -1,69 +0,0 @@
-import { getLayoutStyles, StructuredBlockAny, StructuredBlockType } from '@cntrl-site/sdk';
-import { ComponentType, FC, useId } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { parseSizing } from '../items/useSizing';
-import { StructuredComponent } from './StructuredComponent/StructuredComponent';
-
-export interface StructuredBlockItemProps<I extends StructuredBlockAny> {
-  block: I;
-}
-
-interface Props {
-  block: StructuredBlockAny;
-  maxWidthMap: Record<string, number>;
-}
-
-const noop = () => null;
-
-const itemsMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
-  [StructuredBlockType.Component]: StructuredComponent,
-  [StructuredBlockType.RichText]: noop,
-  [StructuredBlockType.Image]: noop,
-  [StructuredBlockType.VimeoEmbed]: noop,
-  [StructuredBlockType.YoutubeEmbed]: noop,
-};
-
-export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
-  const reactId = useId();
-  const id = `${reactId}-item-${block.id}`;
-  const { layouts } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}, maxWidthMap];
-  const ItemComponent = itemsMap[block.type] || noop;
-  return (
-    <div
-      className={`structured-block-item-${block.id}`}
-    >
-      <ItemComponent block={block} />
-      <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
-          const sizingAxis = parseSizing(layoutParams.sizing);
-          return (`
-                .structured-block-item-${block.id} {
-                  display: ${hidden ? 'none' : 'block'};
-                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
-                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
-                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  outline: none;
-                  left: ${(area.horizontalOffset ?? 0) * 100}vw;
-                  position: relative;
-                }
-              `);
-          })}
-        `}
-      </JSXStyle>
-    </div>
-  );
-};
-
-function getAlignSelf(alignment: 'left' | 'center' | 'right') {
-  switch (alignment) {
-    case 'left':
-      return 'start';
-    case 'right':
-      return 'end';
-    default:
-      return 'center';
-  }
-}