@contentful/experiences-visual-editor-react 1.36.0 → 1.37.0-dev-20250423T1119-4e477a9.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import styleInject from 'style-inject';
 import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutEffect, useMemo } from 'react';
-import md5 from 'md5';
 import { z } from 'zod';
-import { BLOCKS } from '@contentful/rich-text-types';
 import { omit, isArray, isEqual, get as get$1 } from 'lodash-es';
+import md5 from 'md5';
+import { BLOCKS } from '@contentful/rich-text-types';
 import { create } from 'zustand';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { produce } from 'immer';
@@ -163,497 +163,181 @@ const isStructureWithRelativeHeight = (componentId, height) => {
     return isContentfulStructureComponent(componentId) && !height?.toString().endsWith('px');
 };
 
-const findOutermostCoordinates = (first, second) => {
-    return {
-        top: Math.min(first.top, second.top),
-        right: Math.max(first.right, second.right),
-        bottom: Math.max(first.bottom, second.bottom),
-        left: Math.min(first.left, second.left),
-    };
-};
-const getElementCoordinates = (element) => {
-    const rect = element.getBoundingClientRect();
-    /**
-     * If element does not have children, or element has it's own width or height,
-     * return the element's coordinates.
-     */
-    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
-        return rect;
-    }
-    const rects = [];
-    /**
-     * If element has children, or element does not have it's own width and height,
-     * we find the cordinates of the children, and assume the outermost coordinates of the children
-     * as the coordinate of the element.
-     *
-     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
-     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
-     */
-    for (const child of element.children) {
-        const childRect = getElementCoordinates(child);
-        if (childRect.width !== 0 || childRect.height !== 0) {
-            const { top, right, bottom, left } = childRect;
-            rects.push({ top, right, bottom, left });
-        }
-    }
-    if (rects.length === 0) {
-        return rect;
-    }
-    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
-    return DOMRect.fromRect({
-        x: left,
-        y: top,
-        height: bottom - top,
-        width: right - left,
-    });
-};
-
-class ParseError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-const isValidJsonObject = (s) => {
-    try {
-        const result = JSON.parse(s);
-        if ('object' !== typeof result) {
-            return false;
-        }
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-};
-const doesMismatchMessageSchema = (event) => {
-    try {
-        tryParseMessage(event);
-        return false;
-    }
-    catch (e) {
-        if (e instanceof ParseError) {
-            return e.message;
-        }
-        throw e;
-    }
-};
-const tryParseMessage = (event) => {
-    if (!event.data) {
-        throw new ParseError('Field event.data is missing');
-    }
-    if ('string' !== typeof event.data) {
-        throw new ParseError(`Field event.data must be a string, instead of '${typeof event.data}'`);
-    }
-    if (!isValidJsonObject(event.data)) {
-        throw new ParseError('Field event.data must be a valid JSON object serialized as string');
-    }
-    const eventData = JSON.parse(event.data);
-    if (!eventData.source) {
-        throw new ParseError(`Field eventData.source must be equal to 'composability-app'`);
-    }
-    if ('composability-app' !== eventData.source) {
-        throw new ParseError(`Field eventData.source must be equal to 'composability-app', instead of '${eventData.source}'`);
-    }
-    // check eventData.eventType
-    const supportedEventTypes = Object.values(INCOMING_EVENTS$1);
-    if (!supportedEventTypes.includes(eventData.eventType)) {
-        // Expected message: This message is handled in the EntityStore to store fetched entities
-        if (eventData.eventType !== PostMessageMethods$3.REQUESTED_ENTITIES) {
-            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
-        }
-    }
-    return eventData;
+// These styles get added to every component, user custom or contentful provided
+const builtInStyles = {
+    cfVerticalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align right',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The vertical alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Vertical alignment',
+    },
+    cfHorizontalAlignment: {
+        validations: {
+            in: [
+                {
+                    value: 'start',
+                    displayName: 'Align top',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align bottom',
+                },
+            ],
+        },
+        type: 'Text',
+        group: 'style',
+        description: 'The horizontal alignment of the section',
+        defaultValue: 'center',
+        displayName: 'Horizontal alignment',
+    },
+    cfVisibility: {
+        displayName: 'Visibility toggle',
+        type: 'Boolean',
+        group: 'style',
+        defaultValue: true,
+        description: 'The visibility of the component',
+    },
+    cfMargin: {
+        displayName: 'Margin',
+        type: 'Text',
+        group: 'style',
+        description: 'The margin of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfPadding: {
+        displayName: 'Padding',
+        type: 'Text',
+        group: 'style',
+        description: 'The padding of the section',
+        defaultValue: '0 0 0 0',
+    },
+    cfBackgroundColor: {
+        displayName: 'Background color',
+        type: 'Text',
+        group: 'style',
+        description: 'The background color of the section',
+        defaultValue: 'rgba(0, 0, 0, 0)',
+    },
+    cfWidth: {
+        displayName: 'Width',
+        type: 'Text',
+        group: 'style',
+        description: 'The width of the section',
+        defaultValue: '100%',
+    },
+    cfHeight: {
+        displayName: 'Height',
+        type: 'Text',
+        group: 'style',
+        description: 'The height of the section',
+        defaultValue: 'fit-content',
+    },
+    cfMaxWidth: {
+        displayName: 'Max width',
+        type: 'Text',
+        group: 'style',
+        description: 'The max-width of the section',
+        defaultValue: 'none',
+    },
+    cfFlexDirection: {
+        displayName: 'Direction',
+        type: 'Text',
+        group: 'style',
+        description: 'The orientation of the section',
+        defaultValue: 'column',
+    },
+    cfFlexReverse: {
+        displayName: 'Reverse Direction',
+        type: 'Boolean',
+        group: 'style',
+        description: 'Toggle the flex direction to be reversed',
+        defaultValue: false,
+    },
+    cfFlexWrap: {
+        displayName: 'Wrap objects',
+        type: 'Text',
+        group: 'style',
+        description: 'Wrap objects',
+        defaultValue: 'nowrap',
+    },
+    cfBorder: {
+        displayName: 'Border',
+        type: 'Text',
+        group: 'style',
+        description: 'The border of the section',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
+    },
+    cfGap: {
+        displayName: 'Gap',
+        type: 'Text',
+        group: 'style',
+        description: 'The spacing between the elements of the section',
+        defaultValue: '0px',
+    },
+    cfHyperlink: {
+        displayName: 'URL',
+        type: 'Hyperlink',
+        defaultValue: '',
+        validations: {
+            format: 'URL',
+            bindingSourceType: ['entry', 'experience', 'manual'],
+        },
+        description: 'hyperlink for section or container',
+    },
+    cfOpenInNewTab: {
+        displayName: 'URL behaviour',
+        type: 'Boolean',
+        defaultValue: false,
+        description: 'Open in new tab',
+    },
 };
-
-const transformVisibility = (value) => {
-    if (value === false) {
-        return {
-            display: 'none !important',
-        };
-    }
-    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
-    return {};
-};
-// Keep this for backwards compatibility - deleting this would be a breaking change
-// because existing components on a users experience will have the width value as fill
-// rather than 100%
-const transformFill = (value) => (value === 'fill' ? '100%' : value);
-const transformGridColumn = (span) => {
-    if (!span) {
-        return {};
-    }
-    return {
-        gridColumn: `span ${span}`,
-    };
-};
-const transformBorderStyle = (value) => {
-    if (!value)
-        return {};
-    const parts = value.split(' ');
-    // Just accept the passed value
-    if (parts.length < 3)
-        return { border: value };
-    const [borderSize, borderStyle, ...borderColorParts] = parts;
-    const borderColor = borderColorParts.join(' ');
-    return {
-        border: `${borderSize} ${borderStyle} ${borderColor}`,
-    };
-};
-const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection = 'column') => cfFlexDirection === 'row'
-    ? {
-        alignItems: cfHorizontalAlignment,
-        justifyContent: cfVerticalAlignment === 'center' ? `safe ${cfVerticalAlignment}` : cfVerticalAlignment,
-    }
-    : {
-        alignItems: cfVerticalAlignment,
-        justifyContent: cfHorizontalAlignment === 'center'
-            ? `safe ${cfHorizontalAlignment}`
-            : cfHorizontalAlignment,
-    };
-const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
-    const matchBackgroundSize = (scaling) => {
-        if ('fill' === scaling)
-            return 'cover';
-        if ('fit' === scaling)
-            return 'contain';
-    };
-    const matchBackgroundPosition = (alignment) => {
-        if (!alignment || 'string' !== typeof alignment) {
-            return;
-        }
-        let [horizontalAlignment, verticalAlignment] = alignment.trim().split(/\s+/, 2);
-        // Special case for handling single values
-        // for backwards compatibility with single values 'right','left', 'center', 'top','bottom'
-        if (horizontalAlignment && !verticalAlignment) {
-            const singleValue = horizontalAlignment;
-            switch (singleValue) {
-                case 'left':
-                    horizontalAlignment = 'left';
-                    verticalAlignment = 'center';
-                    break;
-                case 'right':
-                    horizontalAlignment = 'right';
-                    verticalAlignment = 'center';
-                    break;
-                case 'center':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'center';
-                    break;
-                case 'top':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'top';
-                    break;
-                case 'bottom':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'bottom';
-                    break;
-                // just fall down to the normal validation logic for horiz and vert
-            }
-        }
-        const isHorizontalValid = ['left', 'right', 'center'].includes(horizontalAlignment);
-        const isVerticalValid = ['top', 'bottom', 'center'].includes(verticalAlignment);
-        horizontalAlignment = isHorizontalValid ? horizontalAlignment : 'left';
-        verticalAlignment = isVerticalValid ? verticalAlignment : 'top';
-        return `${horizontalAlignment} ${verticalAlignment}`;
-    };
-    if (!cfBackgroundImageUrl) {
-        return;
-    }
-    let backgroundImage;
-    let backgroundImageSet;
-    if (typeof cfBackgroundImageUrl === 'string') {
-        backgroundImage = `url(${cfBackgroundImageUrl})`;
-    }
-    else {
-        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
-        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
-        backgroundImageSet = `image-set(${imgSet})`;
-    }
-    return {
-        backgroundImage,
-        backgroundImage2: backgroundImageSet,
-        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
-        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
-        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
-    };
-};
-
-const toCSSAttribute = (key) => {
-    let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-    // Remove the number from the end of the key to allow for overrides on style properties
-    val = val.replace(/\d+$/, '');
-    return val;
-};
-/**
- * Turns a list of CSSProperties into a joined CSS string that can be
- * used for <style> tags. Per default it creates a minimized version.
- * For editor mode, use the `useWhitespaces` flag to create a more readable version.
- *
- * @param cssProperties list of CSS properties
- * @param useWhitespaces adds whitespaces and newlines between each rule
- * @returns a string of CSS rules
- */
-const stringifyCssProperties = (cssProperties, useWhitespaces = false) => {
-    const rules = Object.entries(cssProperties)
-        .filter(([, value]) => value !== undefined)
-        .map(([key, value]) => useWhitespaces ? `${toCSSAttribute(key)}: ${value};` : `${toCSSAttribute(key)}:${value};`);
-    return rules.join(useWhitespaces ? '\n' : '');
-};
-const buildStyleTag = ({ styles, nodeId }) => {
-    const generatedStyles = stringifyCssProperties(styles, true);
-    const className = `cfstyles-${nodeId ? nodeId : md5(generatedStyles)}`;
-    const styleRule = `.${className}{ ${generatedStyles} }`;
-    return [className, styleRule];
-};
-/**
- * Takes plain design values and transforms them into CSS properties. Undefined values will
- * be filtered out.
- *
- * **Example Input**
- * ```
- * values = {
- *   cfVisibility: 'visible',
- *   cfMargin: '10px',
- *   cfFlexReverse: true,
- *   cfImageOptions: { objectFit: 'cover' },
- *   // ...
- * }
- * ```
- * **Example Output**
- * ```
- * cssProperties = {
- *   margin: '10px',
- *   flexDirection: 'row-reverse',
- *   objectFit: 'cover',
- *   // ...
- * }
- * ```
- */
-const buildCfStyles = (values) => {
-    const cssProperties = {
-        boxSizing: 'border-box',
-        ...transformVisibility(values.cfVisibility),
-        margin: values.cfMargin,
-        padding: values.cfPadding,
-        backgroundColor: values.cfBackgroundColor,
-        width: transformFill(values.cfWidth || values.cfImageOptions?.width),
-        height: transformFill(values.cfHeight || values.cfImageOptions?.height),
-        maxWidth: values.cfMaxWidth,
-        ...transformGridColumn(values.cfColumnSpan),
-        ...transformBorderStyle(values.cfBorder),
-        borderRadius: values.cfBorderRadius,
-        gap: values.cfGap,
-        ...transformAlignment(values.cfHorizontalAlignment, values.cfVerticalAlignment, values.cfFlexDirection),
-        flexDirection: values.cfFlexReverse && values.cfFlexDirection
-            ? `${values.cfFlexDirection}-reverse`
-            : values.cfFlexDirection,
-        flexWrap: values.cfFlexWrap,
-        ...transformBackgroundImage(values.cfBackgroundImageUrl, values.cfBackgroundImageOptions),
-        fontSize: values.cfFontSize,
-        fontWeight: values.cfTextBold ? 'bold' : values.cfFontWeight,
-        fontStyle: values.cfTextItalic ? 'italic' : undefined,
-        textDecoration: values.cfTextUnderline ? 'underline' : undefined,
-        lineHeight: values.cfLineHeight,
-        letterSpacing: values.cfLetterSpacing,
-        color: values.cfTextColor,
-        textAlign: values.cfTextAlign,
-        textTransform: values.cfTextTransform,
-        objectFit: values.cfImageOptions?.objectFit,
-        objectPosition: values.cfImageOptions?.objectPosition,
-    };
-    const cssPropertiesWithoutUndefined = Object.fromEntries(Object.entries(cssProperties).filter(([, value]) => value !== undefined));
-    return cssPropertiesWithoutUndefined;
-};
-/**
- * Container/section default behavior:
- * Default height => height: EMPTY_CONTAINER_HEIGHT
- * If a container component has children => height: 'fit-content'
- */
-const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
-    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
-        return value;
-    }
-    if (children.length) {
-        return '100%';
-    }
-    return EMPTY_CONTAINER_HEIGHT$1;
-};
-
-// These styles get added to every component, user custom or contentful provided
-const builtInStyles = {
-    cfVerticalAlignment: {
-        validations: {
-            in: [
-                {
-                    value: 'start',
-                    displayName: 'Align left',
-                },
-                {
-                    value: 'center',
-                    displayName: 'Align center',
-                },
-                {
-                    value: 'end',
-                    displayName: 'Align right',
-                },
-            ],
-        },
+const optionalBuiltInStyles = {
+    cfFontSize: {
+        displayName: 'Font Size',
         type: 'Text',
         group: 'style',
-        description: 'The vertical alignment of the section',
-        defaultValue: 'center',
-        displayName: 'Vertical alignment',
+        description: 'The font size of the element',
+        defaultValue: '16px',
     },
-    cfHorizontalAlignment: {
+    cfFontWeight: {
         validations: {
             in: [
                 {
-                    value: 'start',
-                    displayName: 'Align top',
+                    value: '400',
+                    displayName: 'Normal',
                 },
                 {
-                    value: 'center',
-                    displayName: 'Align center',
+                    value: '500',
+                    displayName: 'Medium',
                 },
                 {
-                    value: 'end',
-                    displayName: 'Align bottom',
+                    value: '600',
+                    displayName: 'Semi Bold',
                 },
             ],
         },
-        type: 'Text',
-        group: 'style',
-        description: 'The horizontal alignment of the section',
-        defaultValue: 'center',
-        displayName: 'Horizontal alignment',
-    },
-    cfVisibility: {
-        displayName: 'Visibility toggle',
-        type: 'Boolean',
-        group: 'style',
-        defaultValue: true,
-        description: 'The visibility of the component',
-    },
-    cfMargin: {
-        displayName: 'Margin',
-        type: 'Text',
-        group: 'style',
-        description: 'The margin of the section',
-        defaultValue: '0 0 0 0',
-    },
-    cfPadding: {
-        displayName: 'Padding',
-        type: 'Text',
-        group: 'style',
-        description: 'The padding of the section',
-        defaultValue: '0 0 0 0',
-    },
-    cfBackgroundColor: {
-        displayName: 'Background color',
-        type: 'Text',
-        group: 'style',
-        description: 'The background color of the section',
-        defaultValue: 'rgba(0, 0, 0, 0)',
-    },
-    cfWidth: {
-        displayName: 'Width',
-        type: 'Text',
-        group: 'style',
-        description: 'The width of the section',
-        defaultValue: '100%',
-    },
-    cfHeight: {
-        displayName: 'Height',
-        type: 'Text',
-        group: 'style',
-        description: 'The height of the section',
-        defaultValue: 'fit-content',
-    },
-    cfMaxWidth: {
-        displayName: 'Max width',
-        type: 'Text',
-        group: 'style',
-        description: 'The max-width of the section',
-        defaultValue: 'none',
-    },
-    cfFlexDirection: {
-        displayName: 'Direction',
-        type: 'Text',
-        group: 'style',
-        description: 'The orientation of the section',
-        defaultValue: 'column',
-    },
-    cfFlexReverse: {
-        displayName: 'Reverse Direction',
-        type: 'Boolean',
-        group: 'style',
-        description: 'Toggle the flex direction to be reversed',
-        defaultValue: false,
-    },
-    cfFlexWrap: {
-        displayName: 'Wrap objects',
-        type: 'Text',
-        group: 'style',
-        description: 'Wrap objects',
-        defaultValue: 'nowrap',
-    },
-    cfBorder: {
-        displayName: 'Border',
-        type: 'Text',
-        group: 'style',
-        description: 'The border of the section',
-        defaultValue: '0px solid rgba(0, 0, 0, 0)',
-    },
-    cfGap: {
-        displayName: 'Gap',
-        type: 'Text',
-        group: 'style',
-        description: 'The spacing between the elements of the section',
-        defaultValue: '0px',
-    },
-    cfHyperlink: {
-        displayName: 'URL',
-        type: 'Hyperlink',
-        defaultValue: '',
-        validations: {
-            format: 'URL',
-            bindingSourceType: ['entry', 'experience', 'manual'],
-        },
-        description: 'hyperlink for section or container',
-    },
-    cfOpenInNewTab: {
-        displayName: 'URL behaviour',
-        type: 'Boolean',
-        defaultValue: false,
-        description: 'Open in new tab',
-    },
-};
-const optionalBuiltInStyles = {
-    cfFontSize: {
-        displayName: 'Font Size',
-        type: 'Text',
-        group: 'style',
-        description: 'The font size of the element',
-        defaultValue: '16px',
-    },
-    cfFontWeight: {
-        validations: {
-            in: [
-                {
-                    value: '400',
-                    displayName: 'Normal',
-                },
-                {
-                    value: '500',
-                    displayName: 'Medium',
-                },
-                {
-                    value: '600',
-                    displayName: 'Semi Bold',
-                },
-            ],
-        },
-        displayName: 'Font Weight',
+        displayName: 'Font Weight',
         type: 'Text',
         group: 'style',
         description: 'The font weight of the element',
@@ -1271,725 +955,1041 @@ var CodeNames$1;
     CodeNames["Custom"] = "custom";
 })(CodeNames$1 || (CodeNames$1 = {}));
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function get(obj, path) {
-    if (!path.length) {
-        return obj;
-    }
-    try {
-        const [currentPath, ...nextPath] = path;
-        return get(obj[currentPath], nextPath);
-    }
-    catch (err) {
+const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
+const toCSSMediaQuery = ({ query }) => {
+    if (query === '*')
         return undefined;
+    const match = query.match(MEDIA_QUERY_REGEXP);
+    if (!match)
+        return undefined;
+    const [, operator, value, unit] = match;
+    if (operator === '<') {
+        const maxScreenWidth = Number(value) - 1;
+        return `(max-width: ${maxScreenWidth}${unit})`;
     }
-}
-
-const getBoundValue = (entryOrAsset, path) => {
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
-    return value && typeof value == 'object' && value.url
-        ? value.url
-        : value;
-};
-
-const transformRichText = (entryOrAsset, entityStore, path) => {
-    const value = getBoundValue(entryOrAsset, path);
-    if (typeof value === 'string') {
-        return {
-            data: {},
-            content: [
-                {
-                    nodeType: BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
-                },
-            ],
-            nodeType: BLOCKS.DOCUMENT,
-        };
-    }
-    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
-        // resolve any links to assets/entries/hyperlinks
-        const richTextDocument = value;
-        resolveLinks(richTextDocument, entityStore);
-        return richTextDocument;
+    else if (operator === '>') {
+        const minScreenWidth = Number(value) + 1;
+        return `(min-width: ${minScreenWidth}${unit})`;
     }
     return undefined;
 };
-const isLinkTarget = (node) => {
-    return node?.data?.target?.sys?.type === 'Link';
+// Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
+const findLast = (array, predicate) => {
+    return array.reverse().find(predicate);
 };
-const resolveLinks = (node, entityStore) => {
-    if (!node)
-        return;
-    // Resolve link if current node has one
-    if (isLinkTarget(node)) {
-        const entity = entityStore.getEntityFromLink(node.data.target);
-        if (entity) {
-            node.data.target = entity;
-        }
-    }
-    // Process content array if it exists
-    if ('content' in node && Array.isArray(node.content)) {
-        node.content.forEach((childNode) => resolveLinks(childNode, entityStore));
-    }
+// Initialise media query matchers. This won't include the always matching fallback breakpoint.
+const mediaQueryMatcher = (breakpoints) => {
+    const mediaQueryMatches = {};
+    const mediaQueryMatchers = breakpoints
+        .map((breakpoint) => {
+        const cssMediaQuery = toCSSMediaQuery(breakpoint);
+        if (!cssMediaQuery)
+            return undefined;
+        if (typeof window === 'undefined')
+            return undefined;
+        const mediaQueryMatcher = window.matchMedia(cssMediaQuery);
+        mediaQueryMatches[breakpoint.id] = mediaQueryMatcher.matches;
+        return { id: breakpoint.id, signal: mediaQueryMatcher };
+    })
+        .filter((matcher) => !!matcher);
+    return [mediaQueryMatchers, mediaQueryMatches];
 };
-
-function getOptimizedImageUrl(url, width, quality, format) {
-    if (url.startsWith('//')) {
-        url = 'https:' + url;
-    }
-    const params = new URLSearchParams();
-    if (width) {
-        params.append('w', width.toString());
-    }
-    if (quality && quality > 0 && quality < 100) {
-        params.append('q', quality.toString());
-    }
-    if (format) {
-        params.append('fm', format);
-    }
-    const queryString = params.toString();
-    return `${url}${queryString ? '?' + queryString : ''}`;
-}
-
-function validateParams(file, quality, format) {
-    if (!file.details.image) {
-        throw Error('No image in file asset to transform');
-    }
-    if (quality < 0 || quality > 100) {
-        throw Error('Quality must be between 0 and 100');
-    }
-    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
-    }
-    return true;
-}
-
-const MAX_WIDTH_ALLOWED$1 = 2000;
-const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
-    const qualityNumber = Number(quality.replace('%', ''));
-    if (!validateParams(file, qualityNumber, format)) ;
-    if (!validateParams(file, qualityNumber, format)) ;
-    const url = file.url;
-    const { width1x, width2x } = getWidths(widthStyle, file);
-    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const optimizedBackgroundImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        file,
+const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
+    // The breakpoints are ordered (desktop-first: descending by screen width)
+    const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
+        id,
+        index,
+        // The fallback breakpoint with wildcard query will always match
+        isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
+    }));
+    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
+    const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
+    return mostSpecificIndex ?? fallbackBreakpointIndex;
+};
+const getFallbackBreakpointIndex = (breakpoints) => {
+    // We assume that there will be a single breakpoint which uses the wildcard query.
+    // If there is none, we just take the first one in the list.
+    return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
+};
+const builtInStylesWithDesignTokens = [
+    'cfMargin',
+    'cfPadding',
+    'cfGap',
+    'cfWidth',
+    'cfHeight',
+    'cfBackgroundColor',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfFontSize',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+    'cfMaxWidth',
+];
+const isValidBreakpointValue = (value) => {
+    return value !== undefined && value !== null && value !== '';
+};
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName, resolveDesignTokens = true) => {
+    const eventuallyResolveDesignTokens = (value) => {
+        // For some built-in design properties, we support design tokens
+        if (builtInStylesWithDesignTokens.includes(variableName)) {
+            return getDesignTokenRegistration(value, variableName);
+        }
+        // For all other properties, we just return the breakpoint-specific value
+        return value;
     };
-    return optimizedBackgroundImageAsset;
-    function getWidths(widthStyle, file) {
-        let width1x = 0;
-        let width2x = 0;
-        const intrinsicImageWidth = file.details.image.width;
-        if (widthStyle.endsWith('px')) {
-            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
+    if (valuesByBreakpoint instanceof Object) {
+        // Assume that the values are sorted by media query to apply the cascading CSS logic
+        for (let index = activeBreakpointIndex; index >= 0; index--) {
+            const breakpointId = breakpoints[index]?.id;
+            if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
+                // If the value is defined, we use it and stop the breakpoints cascade
+                if (resolveDesignTokens) {
+                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
+                }
+                return valuesByBreakpoint[breakpointId];
+            }
         }
-        else {
-            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
+        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
+        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
+            if (resolveDesignTokens) {
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+            }
+            return valuesByBreakpoint[fallbackBreakpointId];
         }
-        width2x = Math.min(width1x * 2, intrinsicImageWidth);
-        return { width1x, width2x };
     }
-};
-
-const MAX_WIDTH_ALLOWED = 4000;
-const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format, }) => {
-    const qualityNumber = Number(quality.replace('%', ''));
-    if (!validateParams(file, qualityNumber, format)) ;
-    const url = file.url;
-    const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
-    const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
-    const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
-    const srcSet = sizes
-        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, qualityNumber, format)} ${width}w`)
-        : [];
-    const intrinsicImageWidth = file.details.image.width;
-    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
-        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
+    else {
+        // Old design properties did not support breakpoints, keep for backward compatibility
+        return valuesByBreakpoint;
     }
-    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
-    const optimizedImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        sizes,
-        file,
-        loading,
-    };
-    return optimizedImageAsset;
 };
 
-const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
-    let value;
-    // If it is not a deep path and not pointing to the file of the asset,
-    // it is just pointing to a normal field and therefore we just resolve the value as normal field
-    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
-        return getBoundValue(asset, path);
-    }
-    //TODO: this will be better served by injectable type transformers instead of if statement
-    if (variableName === 'cfImageAsset') {
-        const optionsVariableName = 'cfImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+const CF_DEBUG_KEY$1 = 'cf_debug';
+let DebugLogger$1 = class DebugLogger {
+    constructor() {
+        // Public methods for logging
+        this.error = this.logger('error');
+        this.warn = this.logger('warn');
+        this.log = this.logger('log');
+        this.debug = this.logger('debug');
+        if (typeof localStorage === 'undefined') {
+            this.enabled = false;
             return;
         }
-        try {
-            value = getOptimizedImageAsset({
-                file: asset.fields.file,
-                loading: options.loading,
-                sizes: options.targetSize,
-                quality: options.quality,
-                format: options.format,
-            });
-            return value;
-        }
-        catch (error) {
-            console.error('Error transforming image asset', error);
+        // Default to checking localStorage for the debug mode on initialization if in browser
+        this.enabled = localStorage.getItem(CF_DEBUG_KEY$1) === 'true';
+    }
+    static getInstance() {
+        if (this.instance === null) {
+            this.instance = new DebugLogger();
         }
-        return;
+        return this.instance;
     }
-    if (variableName === 'cfBackgroundImageUrl') {
-        let width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
-        const optionsVariableName = 'cfBackgroundImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+    getEnabled() {
+        return this.enabled;
+    }
+    setEnabled(enabled) {
+        this.enabled = enabled;
+        if (typeof localStorage === 'undefined') {
             return;
         }
-        try {
-            // Target width (px/rem/em) will be applied to the css url if it's lower than the original image width (in px)
-            const assetDetails = asset.fields.file?.details;
-            const assetWidth = assetDetails?.image?.width || 0; // This is always in px
-            const targetWidthObject = parseCSSValue(options.targetSize); // Contains value and unit (px/rem/em) so convert and then compare to assetWidth
-            const targetValue = targetWidthObject
-                ? getTargetValueInPixels(targetWidthObject)
-                : assetWidth;
-            if (targetValue < assetWidth)
-                width = `${targetValue}px`;
-            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
-            return value;
+        if (enabled) {
+            localStorage.setItem(CF_DEBUG_KEY$1, 'true');
         }
-        catch (error) {
-            console.error('Error transforming image asset', error);
+        else {
+            localStorage.removeItem(CF_DEBUG_KEY$1);
         }
-        return;
     }
-    return asset.fields.file?.url;
+    // Log method for different levels (error, warn, log)
+    logger(level) {
+        return (...args) => {
+            if (this.enabled) {
+                console[level]('[cf-experiences-sdk]', ...args);
+            }
+        };
+    }
 };
+DebugLogger$1.instance = null;
+DebugLogger$1.getInstance();
 
-function getResolvedEntryFromLink(entryOrAsset, path, entityStore) {
-    if (entryOrAsset.sys.type === 'Asset') {
-        return entryOrAsset;
+const findOutermostCoordinates = (first, second) => {
+    return {
+        top: Math.min(first.top, second.top),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom),
+        left: Math.min(first.left, second.left),
+    };
+};
+const getElementCoordinates = (element) => {
+    const rect = element.getBoundingClientRect();
+    /**
+     * If element does not have children, or element has it's own width or height,
+     * return the element's coordinates.
+     */
+    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
+        return rect;
     }
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
-    if (value?.sys.type !== 'Link') {
-        console.warn(`Expected a link to a reference, but got: ${JSON.stringify(value)}`);
-        return;
+    const rects = [];
+    /**
+     * If element has children, or element does not have it's own width and height,
+     * we find the cordinates of the children, and assume the outermost coordinates of the children
+     * as the coordinate of the element.
+     *
+     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
+     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
+     */
+    for (const child of element.children) {
+        const childRect = getElementCoordinates(child);
+        if (childRect.width !== 0 || childRect.height !== 0) {
+            const { top, right, bottom, left } = childRect;
+            rects.push({ top, right, bottom, left });
+        }
     }
-    //Look up the reference in the entity store
-    const resolvedEntity = entityStore.getEntityFromLink(value);
-    if (!resolvedEntity) {
-        return;
+    if (rects.length === 0) {
+        return rect;
     }
-    //resolve any embedded links - we currently only support 2 levels deep
-    const fields = resolvedEntity.fields || {};
-    Object.entries(fields).forEach(([fieldKey, field]) => {
-        if (field && field.sys?.type === 'Link') {
-            const entity = entityStore.getEntityFromLink(field);
-            if (entity) {
-                resolvedEntity.fields[fieldKey] = entity;
-            }
-        }
-        else if (field && Array.isArray(field)) {
-            resolvedEntity.fields[fieldKey] = field.map((innerField) => {
-                if (innerField && innerField.sys?.type === 'Link') {
-                    const entity = entityStore.getEntityFromLink(innerField);
-                    if (entity) {
-                        return entity;
-                    }
-                }
-                return innerField;
-            });
-        }
+    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        height: bottom - top,
+        width: right - left,
     });
-    return resolvedEntity;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isLinkToAsset = (variable) => {
+    if (!variable)
+        return false;
+    if (typeof variable !== 'object')
+        return false;
+    return (variable.sys?.linkType === 'Asset' &&
+        typeof variable.sys?.id === 'string' &&
+        !!variable.sys?.id &&
+        variable.sys?.type === 'Link');
+};
+
+const isLink = (maybeLink) => {
+    if (maybeLink === null)
+        return false;
+    if (typeof maybeLink !== 'object')
+        return false;
+    const link = maybeLink;
+    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
+};
+
+/**
+ * This module encapsulates format of the path to a deep reference.
+ */
+const parseDataSourcePathIntoFieldset = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return parsedPath.fields.map((field) => [null, field, '~locale']);
+};
+/**
+ * Parse path into components, supports  L1 references (one reference follow) atm.
+ * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
+ *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
+ * @returns
+ */
+const parseDataSourcePathWithL1DeepBindings = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return {
+        key: parsedPath.key,
+        field: parsedPath.fields[0],
+        referentField: parsedPath.fields[1],
+    };
+};
+/**
+ * Detects if paths is valid deep-path, like:
+ *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+ * or regular, like:
+ *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
+ * @returns
+ */
+const isDeepPath = (deepPathCandidate) => {
+    const deepPathParsed = parseDeepPath(deepPathCandidate);
+    if (!deepPathParsed) {
+        return false;
+    }
+    return deepPathParsed.fields.length > 1;
+};
+const parseDeepPath = (deepPathCandidate) => {
+    // ALGORITHM:
+    // We start with deep path in form:
+    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+    // First turn string into array of segments
+    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
+    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
+    //      [
+    //        [ "", "uuid123" ],
+    //        [ "fields", "mainStory", "~locale" ],
+    //        [ "fields", "cover", "~locale" ],
+    //        [ "fields", "title", "~locale" ]
+    //      ]
+    // Then check "initial" chunk for corretness
+    // Then check all "field-leading" chunks for correctness
+    const isValidInitialChunk = (initialChunk) => {
+        // must have start with '' and have at least 2 segments, second non-empty
+        // eg. /-_432uuid123123
+        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
+    };
+    const isValidFieldChunk = (fieldChunk) => {
+        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
+        // eg. fields/-32234mainStory/~locale
+        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
+    };
+    const deepPathSegments = deepPathCandidate.split('/');
+    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
+    if (chunks.length <= 1) {
+        return null; // malformed path, even regular paths have at least 2 chunks
+    }
+    else if (chunks.length === 2) {
+        return null; // deep paths have at least 3 chunks
+    }
+    // With 3+ chunks we can now check for deep path correctness
+    const [initialChunk, ...fieldChunks] = chunks;
+    if (!isValidInitialChunk(initialChunk)) {
+        return null;
+    }
+    if (!fieldChunks.every(isValidFieldChunk)) {
+        return null;
+    }
+    return {
+        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
+        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
+    };
+};
+const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
+    const chunks = [];
+    let currentChunk = [];
+    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
+    const excludeEmptyChunks = (chunk) => chunk.length > 0;
+    for (let i = 0; i < segments.length; i++) {
+        const isInitialElement = i === 0;
+        const segment = segments[i];
+        if (isInitialElement) {
+            currentChunk = [segment];
+        }
+        else if (isSegmentBeginningOfChunk(segment)) {
+            chunks.push(currentChunk);
+            currentChunk = [segment];
+        }
+        else {
+            currentChunk.push(segment);
+        }
+    }
+    chunks.push(currentChunk);
+    return chunks.filter(excludeEmptyChunks);
+};
+const lastPathNamedSegmentEq = (path, expectedName) => {
+    // `/key123/fields/featureImage/~locale/fields/file/~locale`
+    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
+    const segments = path.split('/');
+    if (segments.length < 2) {
+        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
+        return false;
+    }
+    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
+    return secondLast === expectedName;
+};
+
+const resolveHyperlinkPattern = (pattern, entry, locale) => {
+    if (!entry || !locale)
+        return null;
+    const variables = {
+        entry,
+        locale,
+    };
+    return buildTemplate({ template: pattern, context: variables });
+};
+function getValue(obj, path) {
+    return path
+        .replace(/\[/g, '.')
+        .replace(/\]/g, '')
+        .split('.')
+        .reduce((o, k) => (o || {})[k], obj);
+}
+function addLocale(str, locale) {
+    const fieldsIndicator = 'fields';
+    const fieldsIndex = str.indexOf(fieldsIndicator);
+    if (fieldsIndex !== -1) {
+        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
+        if (dotIndex !== -1) {
+            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
+        }
+    }
+    return str;
+}
+function getTemplateValue(ctx, path) {
+    const pathWithLocale = addLocale(path, ctx.locale);
+    const retrievedValue = getValue(ctx, pathWithLocale);
+    return typeof retrievedValue === 'object' && retrievedValue !== null
+        ? retrievedValue[ctx.locale]
+        : retrievedValue;
+}
+function buildTemplate({ template, context, }) {
+    const localeVariable = /{\s*locale\s*}/g;
+    // e.g. "{ page.sys.id }"
+    const variables = /{\s*([\S]+?)\s*}/g;
+    return (template
+        // first replace the locale pattern
+        .replace(localeVariable, context.locale)
+        // then resolve the remaining variables
+        .replace(variables, (_, path) => {
+        const fallback = path + '_NOT_FOUND';
+        const value = getTemplateValue(context, path) ?? fallback;
+        // using _.result didn't gave proper results so we run our own version of it
+        return String(typeof value === 'function' ? value() : value);
+    }));
+}
+
+const stylesToKeep = ['cfImageAsset'];
+const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
+const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
+const sanitizeNodeProps = (nodeProps) => {
+    return omit(nodeProps, stylesToRemove, propsToRemove);
+};
+
+const transformVisibility = (value) => {
+    if (value === false) {
+        return {
+            display: 'none !important',
+        };
+    }
+    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+    return {};
+};
+// Keep this for backwards compatibility - deleting this would be a breaking change
+// because existing components on a users experience will have the width value as fill
+// rather than 100%
+const transformFill = (value) => (value === 'fill' ? '100%' : value);
+const transformGridColumn = (span) => {
+    if (!span) {
+        return {};
+    }
+    return {
+        gridColumn: `span ${span}`,
+    };
+};
+const transformBorderStyle = (value) => {
+    if (!value)
+        return {};
+    const parts = value.split(' ');
+    // Just accept the passed value
+    if (parts.length < 3)
+        return { border: value };
+    const [borderSize, borderStyle, ...borderColorParts] = parts;
+    const borderColor = borderColorParts.join(' ');
+    return {
+        border: `${borderSize} ${borderStyle} ${borderColor}`,
+    };
+};
+const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection = 'column') => cfFlexDirection === 'row'
+    ? {
+        alignItems: cfHorizontalAlignment,
+        justifyContent: cfVerticalAlignment === 'center' ? `safe ${cfVerticalAlignment}` : cfVerticalAlignment,
+    }
+    : {
+        alignItems: cfVerticalAlignment,
+        justifyContent: cfHorizontalAlignment === 'center'
+            ? `safe ${cfHorizontalAlignment}`
+            : cfHorizontalAlignment,
+    };
+const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
+    const matchBackgroundSize = (scaling) => {
+        if ('fill' === scaling)
+            return 'cover';
+        if ('fit' === scaling)
+            return 'contain';
+    };
+    const matchBackgroundPosition = (alignment) => {
+        if (!alignment || 'string' !== typeof alignment) {
+            return;
+        }
+        let [horizontalAlignment, verticalAlignment] = alignment.trim().split(/\s+/, 2);
+        // Special case for handling single values
+        // for backwards compatibility with single values 'right','left', 'center', 'top','bottom'
+        if (horizontalAlignment && !verticalAlignment) {
+            const singleValue = horizontalAlignment;
+            switch (singleValue) {
+                case 'left':
+                    horizontalAlignment = 'left';
+                    verticalAlignment = 'center';
+                    break;
+                case 'right':
+                    horizontalAlignment = 'right';
+                    verticalAlignment = 'center';
+                    break;
+                case 'center':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'center';
+                    break;
+                case 'top':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'top';
+                    break;
+                case 'bottom':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'bottom';
+                    break;
+                // just fall down to the normal validation logic for horiz and vert
+            }
+        }
+        const isHorizontalValid = ['left', 'right', 'center'].includes(horizontalAlignment);
+        const isVerticalValid = ['top', 'bottom', 'center'].includes(verticalAlignment);
+        horizontalAlignment = isHorizontalValid ? horizontalAlignment : 'left';
+        verticalAlignment = isVerticalValid ? verticalAlignment : 'top';
+        return `${horizontalAlignment} ${verticalAlignment}`;
+    };
+    if (!cfBackgroundImageUrl) {
+        return;
+    }
+    let backgroundImage;
+    let backgroundImageSet;
+    if (typeof cfBackgroundImageUrl === 'string') {
+        backgroundImage = `url(${cfBackgroundImageUrl})`;
+    }
+    else {
+        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
+        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
+        backgroundImageSet = `image-set(${imgSet})`;
+    }
+    return {
+        backgroundImage,
+        backgroundImage2: backgroundImageSet,
+        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
+        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
+        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
+    };
+};
+
+const toCSSAttribute = (key) => {
+    let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    // Remove the number from the end of the key to allow for overrides on style properties
+    val = val.replace(/\d+$/, '');
+    return val;
+};
+/**
+ * Turns a list of CSSProperties into a joined CSS string that can be
+ * used for <style> tags. Per default it creates a minimized version.
+ * For editor mode, use the `useWhitespaces` flag to create a more readable version.
+ *
+ * @param cssProperties list of CSS properties
+ * @param useWhitespaces adds whitespaces and newlines between each rule
+ * @returns a string of CSS rules
+ */
+const stringifyCssProperties = (cssProperties, useWhitespaces = false) => {
+    const rules = Object.entries(cssProperties)
+        .filter(([, value]) => value !== undefined)
+        .map(([key, value]) => useWhitespaces ? `${toCSSAttribute(key)}: ${value};` : `${toCSSAttribute(key)}:${value};`);
+    return rules.join(useWhitespaces ? '\n' : '');
+};
+const buildStyleTag = ({ styles, nodeId }) => {
+    const generatedStyles = stringifyCssProperties(styles, true);
+    const className = `cfstyles-${nodeId ? nodeId : md5(generatedStyles)}`;
+    const styleRule = `.${className}{ ${generatedStyles} }`;
+    return [className, styleRule];
+};
+/**
+ * Takes plain design values and transforms them into CSS properties. Undefined values will
+ * be filtered out.
+ *
+ * **Example Input**
+ * ```
+ * values = {
+ *   cfVisibility: 'visible',
+ *   cfMargin: '10px',
+ *   cfFlexReverse: true,
+ *   cfImageOptions: { objectFit: 'cover' },
+ *   // ...
+ * }
+ * ```
+ * **Example Output**
+ * ```
+ * cssProperties = {
+ *   margin: '10px',
+ *   flexDirection: 'row-reverse',
+ *   objectFit: 'cover',
+ *   // ...
+ * }
+ * ```
+ */
+const buildCfStyles = (values) => {
+    const cssProperties = {
+        boxSizing: 'border-box',
+        ...transformVisibility(values.cfVisibility),
+        margin: values.cfMargin,
+        padding: values.cfPadding,
+        backgroundColor: values.cfBackgroundColor,
+        width: transformFill(values.cfWidth || values.cfImageOptions?.width),
+        height: transformFill(values.cfHeight || values.cfImageOptions?.height),
+        maxWidth: values.cfMaxWidth,
+        ...transformGridColumn(values.cfColumnSpan),
+        ...transformBorderStyle(values.cfBorder),
+        borderRadius: values.cfBorderRadius,
+        gap: values.cfGap,
+        ...transformAlignment(values.cfHorizontalAlignment, values.cfVerticalAlignment, values.cfFlexDirection),
+        flexDirection: values.cfFlexReverse && values.cfFlexDirection
+            ? `${values.cfFlexDirection}-reverse`
+            : values.cfFlexDirection,
+        flexWrap: values.cfFlexWrap,
+        ...transformBackgroundImage(values.cfBackgroundImageUrl, values.cfBackgroundImageOptions),
+        fontSize: values.cfFontSize,
+        fontWeight: values.cfTextBold ? 'bold' : values.cfFontWeight,
+        fontStyle: values.cfTextItalic ? 'italic' : undefined,
+        textDecoration: values.cfTextUnderline ? 'underline' : undefined,
+        lineHeight: values.cfLineHeight,
+        letterSpacing: values.cfLetterSpacing,
+        color: values.cfTextColor,
+        textAlign: values.cfTextAlign,
+        textTransform: values.cfTextTransform,
+        objectFit: values.cfImageOptions?.objectFit,
+        objectPosition: values.cfImageOptions?.objectPosition,
+    };
+    const cssPropertiesWithoutUndefined = Object.fromEntries(Object.entries(cssProperties).filter(([, value]) => value !== undefined));
+    return cssPropertiesWithoutUndefined;
+};
+/**
+ * Container/section default behavior:
+ * Default height => height: EMPTY_CONTAINER_HEIGHT
+ * If a container component has children => height: 'fit-content'
+ */
+const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
+    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
+        return value;
+    }
+    if (children.length) {
+        return '100%';
+    }
+    return EMPTY_CONTAINER_HEIGHT$1;
+};
+
+function getOptimizedImageUrl(url, width, quality, format) {
+    if (url.startsWith('//')) {
+        url = 'https:' + url;
+    }
+    const params = new URLSearchParams();
+    if (width) {
+        params.append('w', width.toString());
+    }
+    if (quality && quality > 0 && quality < 100) {
+        params.append('q', quality.toString());
+    }
+    if (format) {
+        params.append('fm', format);
+    }
+    const queryString = params.toString();
+    return `${url}${queryString ? '?' + queryString : ''}`;
 }
 
-function getArrayValue(entryOrAsset, path, entityStore) {
-    if (entryOrAsset.sys.type === 'Asset') {
-        return entryOrAsset;
+function validateParams(file, quality, format) {
+    if (!file.details.image) {
+        throw Error('No image in file asset to transform');
     }
-    const arrayValue = get(entryOrAsset, path.split('/').slice(2, -1));
-    if (!isArray(arrayValue)) {
-        console.warn(`Expected a value to be an array, but got: ${JSON.stringify(arrayValue)}`);
-        return;
+    if (quality < 0 || quality > 100) {
+        throw Error('Quality must be between 0 and 100');
     }
-    const result = arrayValue.map((value) => {
-        if (typeof value === 'string') {
-            return value;
-        }
-        else if (value?.sys?.type === 'Link') {
-            const resolvedEntity = entityStore.getEntityFromLink(value);
-            if (!resolvedEntity) {
-                return;
-            }
-            //resolve any embedded links - we currently only support 2 levels deep
-            const fields = resolvedEntity.fields || {};
-            Object.entries(fields).forEach(([fieldKey, field]) => {
-                if (field && field.sys?.type === 'Link') {
-                    const entity = entityStore.getEntityFromLink(field);
-                    if (entity) {
-                        resolvedEntity.fields[fieldKey] = entity;
-                    }
-                }
-            });
-            return resolvedEntity;
+    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+    }
+    return true;
+}
+
+const MAX_WIDTH_ALLOWED$1 = 2000;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    if (!validateParams(file, qualityNumber, format)) ;
+    const url = file.url;
+    const { width1x, width2x } = getWidths(widthStyle, file);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    function getWidths(widthStyle, file) {
+        let width1x = 0;
+        let width2x = 0;
+        const intrinsicImageWidth = file.details.image.width;
+        if (widthStyle.endsWith('px')) {
+            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
         }
         else {
-            console.warn(`Expected value to be a string or Link, but got: ${JSON.stringify(value)}`);
-            return undefined;
+            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
         }
-    });
-    return result;
-}
-
-const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableType, path) => {
-    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
-    if (!entityOrAsset)
-        return;
-    switch (variableType) {
-        case 'Media':
-            // If we bound a normal entry field to the media variable we just return the bound value
-            if (entityOrAsset.sys.type === 'Entry') {
-                return getBoundValue(entityOrAsset, path);
-            }
-            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
-        case 'RichText':
-            return transformRichText(entityOrAsset, entityStore, path);
-        case 'Array':
-            return getArrayValue(entityOrAsset, path, entityStore);
-        case 'Link':
-            return getResolvedEntryFromLink(entityOrAsset, path, entityStore);
-        default:
-            return getBoundValue(entityOrAsset, path);
+        width2x = Math.min(width1x * 2, intrinsicImageWidth);
+        return { width1x, width2x };
     }
 };
 
-const getDataFromTree = (tree) => {
-    let dataSource = {};
-    let unboundValues = {};
-    const queue = [...tree.root.children];
-    while (queue.length) {
-        const node = queue.shift();
-        if (!node) {
-            continue;
-        }
-        dataSource = { ...dataSource, ...node.data.dataSource };
-        unboundValues = { ...unboundValues, ...node.data.unboundValues };
-        if (node.children.length) {
-            queue.push(...node.children);
-        }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function get(obj, path) {
+    if (!path.length) {
+        return obj;
     }
-    return {
-        dataSource,
-        unboundValues,
-    };
-};
-function parseCSSValue(input) {
-    const regex = /^(\d+(\.\d+)?)(px|em|rem)$/;
-    const match = input.match(regex);
-    if (match) {
-        return {
-            value: parseFloat(match[1]),
-            unit: match[3],
-        };
+    try {
+        const [currentPath, ...nextPath] = path;
+        return get(obj[currentPath], nextPath);
     }
-    return null;
-}
-function getTargetValueInPixels(targetWidthObject) {
-    switch (targetWidthObject.unit) {
-        case 'px':
-            return targetWidthObject.value;
-        case 'em':
-            return targetWidthObject.value * 16;
-        case 'rem':
-            return targetWidthObject.value * 16;
-        default:
-            return targetWidthObject.value;
+    catch (err) {
+        return undefined;
     }
 }
 
-const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
-const toCSSMediaQuery = ({ query }) => {
-    if (query === '*')
-        return undefined;
-    const match = query.match(MEDIA_QUERY_REGEXP);
-    if (!match)
-        return undefined;
-    const [, operator, value, unit] = match;
-    if (operator === '<') {
-        const maxScreenWidth = Number(value) - 1;
-        return `(max-width: ${maxScreenWidth}${unit})`;
+const getBoundValue = (entryOrAsset, path) => {
+    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    return value && typeof value == 'object' && value.url
+        ? value.url
+        : value;
+};
+
+const transformRichText = (entryOrAsset, entityStore, path) => {
+    const value = getBoundValue(entryOrAsset, path);
+    if (typeof value === 'string') {
+        return {
+            data: {},
+            content: [
+                {
+                    nodeType: BLOCKS.PARAGRAPH,
+                    data: {},
+                    content: [
+                        {
+                            data: {},
+                            nodeType: 'text',
+                            value: value,
+                            marks: [],
+                        },
+                    ],
+                },
+            ],
+            nodeType: BLOCKS.DOCUMENT,
+        };
     }
-    else if (operator === '>') {
-        const minScreenWidth = Number(value) + 1;
-        return `(min-width: ${minScreenWidth}${unit})`;
+    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
+        // resolve any links to assets/entries/hyperlinks
+        const richTextDocument = value;
+        resolveLinks(richTextDocument, entityStore);
+        return richTextDocument;
     }
     return undefined;
 };
-// Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
-const findLast = (array, predicate) => {
-    return array.reverse().find(predicate);
-};
-// Initialise media query matchers. This won't include the always matching fallback breakpoint.
-const mediaQueryMatcher = (breakpoints) => {
-    const mediaQueryMatches = {};
-    const mediaQueryMatchers = breakpoints
-        .map((breakpoint) => {
-        const cssMediaQuery = toCSSMediaQuery(breakpoint);
-        if (!cssMediaQuery)
-            return undefined;
-        if (typeof window === 'undefined')
-            return undefined;
-        const mediaQueryMatcher = window.matchMedia(cssMediaQuery);
-        mediaQueryMatches[breakpoint.id] = mediaQueryMatcher.matches;
-        return { id: breakpoint.id, signal: mediaQueryMatcher };
-    })
-        .filter((matcher) => !!matcher);
-    return [mediaQueryMatchers, mediaQueryMatches];
-};
-const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
-    // The breakpoints are ordered (desktop-first: descending by screen width)
-    const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
-        id,
-        index,
-        // The fallback breakpoint with wildcard query will always match
-        isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
-    }));
-    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
-    const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
-    return mostSpecificIndex ?? fallbackBreakpointIndex;
-};
-const getFallbackBreakpointIndex = (breakpoints) => {
-    // We assume that there will be a single breakpoint which uses the wildcard query.
-    // If there is none, we just take the first one in the list.
-    return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
-};
-const builtInStylesWithDesignTokens = [
-    'cfMargin',
-    'cfPadding',
-    'cfGap',
-    'cfWidth',
-    'cfHeight',
-    'cfBackgroundColor',
-    'cfBorder',
-    'cfBorderRadius',
-    'cfFontSize',
-    'cfLineHeight',
-    'cfLetterSpacing',
-    'cfTextColor',
-    'cfMaxWidth',
-];
-const isValidBreakpointValue = (value) => {
-    return value !== undefined && value !== null && value !== '';
+const isLinkTarget = (node) => {
+    return node?.data?.target?.sys?.type === 'Link';
 };
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName, resolveDesignTokens = true) => {
-    const eventuallyResolveDesignTokens = (value) => {
-        // For some built-in design properties, we support design tokens
-        if (builtInStylesWithDesignTokens.includes(variableName)) {
-            return getDesignTokenRegistration(value, variableName);
-        }
-        // For all other properties, we just return the breakpoint-specific value
-        return value;
-    };
-    if (valuesByBreakpoint instanceof Object) {
-        // Assume that the values are sorted by media query to apply the cascading CSS logic
-        for (let index = activeBreakpointIndex; index >= 0; index--) {
-            const breakpointId = breakpoints[index]?.id;
-            if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
-                // If the value is defined, we use it and stop the breakpoints cascade
-                if (resolveDesignTokens) {
-                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
-                }
-                return valuesByBreakpoint[breakpointId];
-            }
-        }
-        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
-        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
-            if (resolveDesignTokens) {
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
-            }
-            return valuesByBreakpoint[fallbackBreakpointId];
+const resolveLinks = (node, entityStore) => {
+    if (!node)
+        return;
+    // Resolve link if current node has one
+    if (isLinkTarget(node)) {
+        const entity = entityStore.getEntityFromLink(node.data.target);
+        if (entity) {
+            node.data.target = entity;
         }
     }
-    else {
-        // Old design properties did not support breakpoints, keep for backward compatibility
-        return valuesByBreakpoint;
+    // Process content array if it exists
+    if ('content' in node && Array.isArray(node.content)) {
+        node.content.forEach((childNode) => resolveLinks(childNode, entityStore));
     }
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isLinkToAsset = (variable) => {
-    if (!variable)
-        return false;
-    if (typeof variable !== 'object')
-        return false;
-    return (variable.sys?.linkType === 'Asset' &&
-        typeof variable.sys?.id === 'string' &&
-        !!variable.sys?.id &&
-        variable.sys?.type === 'Link');
-};
-
-const isLink = (maybeLink) => {
-    if (maybeLink === null)
-        return false;
-    if (typeof maybeLink !== 'object')
-        return false;
-    const link = maybeLink;
-    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
+const MAX_WIDTH_ALLOWED = 4000;
+const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format, }) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    const url = file.url;
+    const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
+    const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
+    const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
+    const srcSet = sizes
+        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, qualityNumber, format)} ${width}w`)
+        : [];
+    const intrinsicImageWidth = file.details.image.width;
+    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
+    }
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
+    const optimizedImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        sizes,
+        file,
+        loading,
+    };
+    return optimizedImageAsset;
 };
 
-/**
- * This module encapsulates format of the path to a deep reference.
- */
-const parseDataSourcePathIntoFieldset = (path) => {
-    const parsedPath = parseDeepPath(path);
-    if (null === parsedPath) {
-        throw new Error(`Cannot parse path '${path}' as deep path`);
+const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
+    let value;
+    // If it is not a deep path and not pointing to the file of the asset,
+    // it is just pointing to a normal field and therefore we just resolve the value as normal field
+    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
+        return getBoundValue(asset, path);
     }
-    return parsedPath.fields.map((field) => [null, field, '~locale']);
-};
-/**
- * Parse path into components, supports  L1 references (one reference follow) atm.
- * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
- *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
- * @returns
- */
-const parseDataSourcePathWithL1DeepBindings = (path) => {
-    const parsedPath = parseDeepPath(path);
-    if (null === parsedPath) {
-        throw new Error(`Cannot parse path '${path}' as deep path`);
+    //TODO: this will be better served by injectable type transformers instead of if statement
+    if (variableName === 'cfImageAsset') {
+        const optionsVariableName = 'cfImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            value = getOptimizedImageAsset({
+                file: asset.fields.file,
+                loading: options.loading,
+                sizes: options.targetSize,
+                quality: options.quality,
+                format: options.format,
+            });
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
     }
-    return {
-        key: parsedPath.key,
-        field: parsedPath.fields[0],
-        referentField: parsedPath.fields[1],
-    };
-};
-/**
- * Detects if paths is valid deep-path, like:
- *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
- * or regular, like:
- *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
- * @returns
- */
-const isDeepPath = (deepPathCandidate) => {
-    const deepPathParsed = parseDeepPath(deepPathCandidate);
-    if (!deepPathParsed) {
-        return false;
+    if (variableName === 'cfBackgroundImageUrl') {
+        let width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
+        const optionsVariableName = 'cfBackgroundImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            // Target width (px/rem/em) will be applied to the css url if it's lower than the original image width (in px)
+            const assetDetails = asset.fields.file?.details;
+            const assetWidth = assetDetails?.image?.width || 0; // This is always in px
+            const targetWidthObject = parseCSSValue(options.targetSize); // Contains value and unit (px/rem/em) so convert and then compare to assetWidth
+            const targetValue = targetWidthObject
+                ? getTargetValueInPixels(targetWidthObject)
+                : assetWidth;
+            if (targetValue < assetWidth)
+                width = `${targetValue}px`;
+            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
     }
-    return deepPathParsed.fields.length > 1;
+    return asset.fields.file?.url;
 };
-const parseDeepPath = (deepPathCandidate) => {
-    // ALGORITHM:
-    // We start with deep path in form:
-    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
-    // First turn string into array of segments
-    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
-    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
-    //      [
-    //        [ "", "uuid123" ],
-    //        [ "fields", "mainStory", "~locale" ],
-    //        [ "fields", "cover", "~locale" ],
-    //        [ "fields", "title", "~locale" ]
-    //      ]
-    // Then check "initial" chunk for corretness
-    // Then check all "field-leading" chunks for correctness
-    const isValidInitialChunk = (initialChunk) => {
-        // must have start with '' and have at least 2 segments, second non-empty
-        // eg. /-_432uuid123123
-        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
-    };
-    const isValidFieldChunk = (fieldChunk) => {
-        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
-        // eg. fields/-32234mainStory/~locale
-        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
-    };
-    const deepPathSegments = deepPathCandidate.split('/');
-    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
-    if (chunks.length <= 1) {
-        return null; // malformed path, even regular paths have at least 2 chunks
+
+function getResolvedEntryFromLink(entryOrAsset, path, entityStore) {
+    if (entryOrAsset.sys.type === 'Asset') {
+        return entryOrAsset;
     }
-    else if (chunks.length === 2) {
-        return null; // deep paths have at least 3 chunks
+    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    if (value?.sys.type !== 'Link') {
+        console.warn(`Expected a link to a reference, but got: ${JSON.stringify(value)}`);
+        return;
     }
-    // With 3+ chunks we can now check for deep path correctness
-    const [initialChunk, ...fieldChunks] = chunks;
-    if (!isValidInitialChunk(initialChunk)) {
-        return null;
+    //Look up the reference in the entity store
+    const resolvedEntity = entityStore.getEntityFromLink(value);
+    if (!resolvedEntity) {
+        return;
     }
-    if (!fieldChunks.every(isValidFieldChunk)) {
-        return null;
+    //resolve any embedded links - we currently only support 2 levels deep
+    const fields = resolvedEntity.fields || {};
+    Object.entries(fields).forEach(([fieldKey, field]) => {
+        if (field && field.sys?.type === 'Link') {
+            const entity = entityStore.getEntityFromLink(field);
+            if (entity) {
+                resolvedEntity.fields[fieldKey] = entity;
+            }
+        }
+        else if (field && Array.isArray(field)) {
+            resolvedEntity.fields[fieldKey] = field.map((innerField) => {
+                if (innerField && innerField.sys?.type === 'Link') {
+                    const entity = entityStore.getEntityFromLink(innerField);
+                    if (entity) {
+                        return entity;
+                    }
+                }
+                return innerField;
+            });
+        }
+    });
+    return resolvedEntity;
+}
+
+function getArrayValue(entryOrAsset, path, entityStore) {
+    if (entryOrAsset.sys.type === 'Asset') {
+        return entryOrAsset;
+    }
+    const arrayValue = get(entryOrAsset, path.split('/').slice(2, -1));
+    if (!isArray(arrayValue)) {
+        console.warn(`Expected a value to be an array, but got: ${JSON.stringify(arrayValue)}`);
+        return;
     }
-    return {
-        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
-        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
-    };
-};
-const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
-    const chunks = [];
-    let currentChunk = [];
-    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
-    const excludeEmptyChunks = (chunk) => chunk.length > 0;
-    for (let i = 0; i < segments.length; i++) {
-        const isInitialElement = i === 0;
-        const segment = segments[i];
-        if (isInitialElement) {
-            currentChunk = [segment];
+    const result = arrayValue.map((value) => {
+        if (typeof value === 'string') {
+            return value;
         }
-        else if (isSegmentBeginningOfChunk(segment)) {
-            chunks.push(currentChunk);
-            currentChunk = [segment];
+        else if (value?.sys?.type === 'Link') {
+            const resolvedEntity = entityStore.getEntityFromLink(value);
+            if (!resolvedEntity) {
+                return;
+            }
+            //resolve any embedded links - we currently only support 2 levels deep
+            const fields = resolvedEntity.fields || {};
+            Object.entries(fields).forEach(([fieldKey, field]) => {
+                if (field && field.sys?.type === 'Link') {
+                    const entity = entityStore.getEntityFromLink(field);
+                    if (entity) {
+                        resolvedEntity.fields[fieldKey] = entity;
+                    }
+                }
+            });
+            return resolvedEntity;
         }
         else {
-            currentChunk.push(segment);
+            console.warn(`Expected value to be a string or Link, but got: ${JSON.stringify(value)}`);
+            return undefined;
         }
+    });
+    return result;
+}
+
+const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableType, path) => {
+    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
+    if (!entityOrAsset)
+        return;
+    switch (variableType) {
+        case 'Media':
+            // If we bound a normal entry field to the media variable we just return the bound value
+            if (entityOrAsset.sys.type === 'Entry') {
+                return getBoundValue(entityOrAsset, path);
+            }
+            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
+        case 'RichText':
+            return transformRichText(entityOrAsset, entityStore, path);
+        case 'Array':
+            return getArrayValue(entityOrAsset, path, entityStore);
+        case 'Link':
+            return getResolvedEntryFromLink(entityOrAsset, path, entityStore);
+        default:
+            return getBoundValue(entityOrAsset, path);
     }
-    chunks.push(currentChunk);
-    return chunks.filter(excludeEmptyChunks);
-};
-const lastPathNamedSegmentEq = (path, expectedName) => {
-    // `/key123/fields/featureImage/~locale/fields/file/~locale`
-    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
-    const segments = path.split('/');
-    if (segments.length < 2) {
-        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
-        return false;
-    }
-    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
-    return secondLast === expectedName;
 };
 
-const resolveHyperlinkPattern = (pattern, entry, locale) => {
-    if (!entry || !locale)
-        return null;
-    const variables = {
-        entry,
-        locale,
+const getDataFromTree = (tree) => {
+    let dataSource = {};
+    let unboundValues = {};
+    const queue = [...tree.root.children];
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node) {
+            continue;
+        }
+        dataSource = { ...dataSource, ...node.data.dataSource };
+        unboundValues = { ...unboundValues, ...node.data.unboundValues };
+        if (node.children.length) {
+            queue.push(...node.children);
+        }
+    }
+    return {
+        dataSource,
+        unboundValues,
     };
-    return buildTemplate({ template: pattern, context: variables });
 };
-function getValue(obj, path) {
-    return path
-        .replace(/\[/g, '.')
-        .replace(/\]/g, '')
-        .split('.')
-        .reduce((o, k) => (o || {})[k], obj);
-}
-function addLocale(str, locale) {
-    const fieldsIndicator = 'fields';
-    const fieldsIndex = str.indexOf(fieldsIndicator);
-    if (fieldsIndex !== -1) {
-        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
-        if (dotIndex !== -1) {
-            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
-        }
+function parseCSSValue(input) {
+    const regex = /^(\d+(\.\d+)?)(px|em|rem)$/;
+    const match = input.match(regex);
+    if (match) {
+        return {
+            value: parseFloat(match[1]),
+            unit: match[3],
+        };
     }
-    return str;
-}
-function getTemplateValue(ctx, path) {
-    const pathWithLocale = addLocale(path, ctx.locale);
-    const retrievedValue = getValue(ctx, pathWithLocale);
-    return typeof retrievedValue === 'object' && retrievedValue !== null
-        ? retrievedValue[ctx.locale]
-        : retrievedValue;
+    return null;
 }
-function buildTemplate({ template, context, }) {
-    const localeVariable = /{\s*locale\s*}/g;
-    // e.g. "{ page.sys.id }"
-    const variables = /{\s*([\S]+?)\s*}/g;
-    return (template
-        // first replace the locale pattern
-        .replace(localeVariable, context.locale)
-        // then resolve the remaining variables
-        .replace(variables, (_, path) => {
-        const fallback = path + '_NOT_FOUND';
-        const value = getTemplateValue(context, path) ?? fallback;
-        // using _.result didn't gave proper results so we run our own version of it
-        return String(typeof value === 'function' ? value() : value);
-    }));
+function getTargetValueInPixels(targetWidthObject) {
+    switch (targetWidthObject.unit) {
+        case 'px':
+            return targetWidthObject.value;
+        case 'em':
+            return targetWidthObject.value * 16;
+        case 'rem':
+            return targetWidthObject.value * 16;
+        default:
+            return targetWidthObject.value;
+    }
 }
 
-const stylesToKeep = ['cfImageAsset'];
-const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
-const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
-const sanitizeNodeProps = (nodeProps) => {
-    return omit(nodeProps, stylesToRemove, propsToRemove);
-};
-
-const CF_DEBUG_KEY$1 = 'cf_debug';
-let DebugLogger$1 = class DebugLogger {
-    constructor() {
-        // Public methods for logging
-        this.error = this.logger('error');
-        this.warn = this.logger('warn');
-        this.log = this.logger('log');
-        this.debug = this.logger('debug');
-        if (typeof localStorage === 'undefined') {
-            this.enabled = false;
-            return;
-        }
-        // Default to checking localStorage for the debug mode on initialization if in browser
-        this.enabled = localStorage.getItem(CF_DEBUG_KEY$1) === 'true';
+class ParseError extends Error {
+    constructor(message) {
+        super(message);
     }
-    static getInstance() {
-        if (this.instance === null) {
-            this.instance = new DebugLogger();
+}
+const isValidJsonObject = (s) => {
+    try {
+        const result = JSON.parse(s);
+        if ('object' !== typeof result) {
+            return false;
         }
-        return this.instance;
+        return true;
     }
-    getEnabled() {
-        return this.enabled;
+    catch (e) {
+        return false;
     }
-    setEnabled(enabled) {
-        this.enabled = enabled;
-        if (typeof localStorage === 'undefined') {
-            return;
-        }
-        if (enabled) {
-            localStorage.setItem(CF_DEBUG_KEY$1, 'true');
-        }
-        else {
-            localStorage.removeItem(CF_DEBUG_KEY$1);
+};
+const doesMismatchMessageSchema = (event) => {
+    try {
+        tryParseMessage(event);
+        return false;
+    }
+    catch (e) {
+        if (e instanceof ParseError) {
+            return e.message;
         }
+        throw e;
     }
-    // Log method for different levels (error, warn, log)
-    logger(level) {
-        return (...args) => {
-            if (this.enabled) {
-                console[level]('[cf-experiences-sdk]', ...args);
-            }
-        };
+};
+const tryParseMessage = (event) => {
+    if (!event.data) {
+        throw new ParseError('Field event.data is missing');
+    }
+    if ('string' !== typeof event.data) {
+        throw new ParseError(`Field event.data must be a string, instead of '${typeof event.data}'`);
+    }
+    if (!isValidJsonObject(event.data)) {
+        throw new ParseError('Field event.data must be a valid JSON object serialized as string');
+    }
+    const eventData = JSON.parse(event.data);
+    if (!eventData.source) {
+        throw new ParseError(`Field eventData.source must be equal to 'composability-app'`);
+    }
+    if ('composability-app' !== eventData.source) {
+        throw new ParseError(`Field eventData.source must be equal to 'composability-app', instead of '${eventData.source}'`);
+    }
+    // check eventData.eventType
+    const supportedEventTypes = Object.values(INCOMING_EVENTS$1);
+    if (!supportedEventTypes.includes(eventData.eventType)) {
+        // Expected message: This message is handled in the EntityStore to store fetched entities
+        if (eventData.eventType !== PostMessageMethods$3.REQUESTED_ENTITIES) {
+            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
+        }
     }
+    return eventData;
 };
-DebugLogger$1.instance = null;
-DebugLogger$1.getInstance();
 
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {