@contentful/experiences-core 1.36.0-dev-20250417T1301-b6204ec.0 → 1.36.0-dev-20250422T1327-c14ac85.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import md5 from 'md5';
 import { z, ZodIssueCode } from 'zod';
+import { omit, isArray, uniqBy } from 'lodash-es';
+import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { isArray, omit, uniqBy } from 'lodash-es';
 
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
@@ -151,514 +151,173 @@ 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);
-    if (!supportedEventTypes.includes(eventData.eventType)) {
-        // Expected message: This message is handled in the EntityStore to store fetched entities
-        if (eventData.eventType !== PostMessageMethods.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 validateExperienceBuilderConfig = ({ locale, mode, }) => {
-    if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
-        return;
-    }
-    if (!locale) {
-        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
-    }
-};
-
-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;
-};
-/**
- * **Only meant to be used in editor mode!**
- *
- * If the node is an empty structure component with a relative height (e.g. '100%'),
- * it might render with a zero height. In this case, add a min height of 80px to ensure
- * that child nodes can be added via drag & drop.
- */
-const addMinHeightForEmptyStructures = (cssProperties, node) => {
-    if (!node.children.length &&
-        isStructureWithRelativeHeight(node.definitionId, cssProperties.height)) {
-        return {
-            ...cssProperties,
-            minHeight: EMPTY_CONTAINER_HEIGHT,
-        };
-    }
-    return cssProperties;
-};
-/**
- * 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;
-};
-
-// These styles get added to every component, user custom or contentful provided
-const builtInStyles = {
-    cfVerticalAlignment: {
+const optionalBuiltInStyles = {
+    cfFontSize: {
+        displayName: 'Font Size',
+        type: 'Text',
+        group: 'style',
+        description: 'The font size of the element',
+        defaultValue: '16px',
+    },
+    cfFontWeight: {
         validations: {
             in: [
                 {
-                    value: 'start',
-                    displayName: 'Align left',
+                    value: '400',
+                    displayName: 'Normal',
                 },
                 {
-                    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 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: '500',
+                    displayName: 'Medium',
                 },
                 {
                     value: '600',
@@ -1506,143 +1165,819 @@ z.object({
     })),
 });
 
-var CodeNames;
-(function (CodeNames) {
-    CodeNames["Type"] = "type";
-    CodeNames["Required"] = "required";
-    CodeNames["Unexpected"] = "unexpected";
-    CodeNames["Regex"] = "regex";
-    CodeNames["In"] = "in";
-    CodeNames["Size"] = "size";
-    CodeNames["Custom"] = "custom";
-})(CodeNames || (CodeNames = {}));
-const convertInvalidType = (issue) => {
-    const name = issue.received === 'undefined' ? CodeNames.Required : CodeNames.Type;
-    const details = issue.received === 'undefined'
-        ? `The property "${issue.path.slice(-1)}" is required here`
-        : `The type of "${issue.path.slice(-1)}" is incorrect, expected type: ${issue.expected}`;
-    return {
-        details: details,
-        name: name,
-        path: issue.path,
-        value: issue.received.toString(),
+var CodeNames;
+(function (CodeNames) {
+    CodeNames["Type"] = "type";
+    CodeNames["Required"] = "required";
+    CodeNames["Unexpected"] = "unexpected";
+    CodeNames["Regex"] = "regex";
+    CodeNames["In"] = "in";
+    CodeNames["Size"] = "size";
+    CodeNames["Custom"] = "custom";
+})(CodeNames || (CodeNames = {}));
+const convertInvalidType = (issue) => {
+    const name = issue.received === 'undefined' ? CodeNames.Required : CodeNames.Type;
+    const details = issue.received === 'undefined'
+        ? `The property "${issue.path.slice(-1)}" is required here`
+        : `The type of "${issue.path.slice(-1)}" is incorrect, expected type: ${issue.expected}`;
+    return {
+        details: details,
+        name: name,
+        path: issue.path,
+        value: issue.received.toString(),
+    };
+};
+const convertUnrecognizedKeys = (issue) => {
+    const missingProperties = issue.keys.map((k) => `"${k}"`).join(', ');
+    return {
+        details: issue.keys.length > 1
+            ? `The properties ${missingProperties} are not expected`
+            : `The property ${missingProperties} is not expected`,
+        name: CodeNames.Unexpected,
+        path: issue.path,
+    };
+};
+const convertInvalidString = (issue) => {
+    return {
+        details: issue.message || 'Invalid string',
+        name: issue.validation === 'regex' ? CodeNames.Regex : CodeNames.Unexpected,
+        path: issue.path,
+    };
+};
+const convertInvalidEnumValue = (issue) => {
+    return {
+        details: issue.message || 'Value must be one of expected values',
+        name: CodeNames.In,
+        path: issue.path,
+        value: issue.received.toString(),
+        expected: issue.options,
+    };
+};
+const convertInvalidLiteral = (issue) => {
+    return {
+        details: issue.message || 'Value must be one of expected values',
+        name: CodeNames.In,
+        path: issue.path,
+        value: issue.received,
+        expected: [issue.expected],
+    };
+};
+const convertTooBig = (issue) => {
+    return {
+        details: issue.message || `Size should be at most ${issue.maximum}`,
+        name: CodeNames.Size,
+        path: issue.path,
+        max: issue.maximum,
+    };
+};
+const convertTooSmall = (issue) => {
+    return {
+        details: issue.message || `Size should be at least ${issue.minimum}`,
+        name: CodeNames.Size,
+        path: issue.path,
+        min: issue.minimum,
+    };
+};
+const defaultConversion = (issue) => {
+    return {
+        details: issue.message || 'An unexpected error occurred',
+        name: CodeNames.Custom,
+        path: issue.path.map(String),
+    };
+};
+const zodToContentfulError = (issue) => {
+    switch (issue.code) {
+        case ZodIssueCode.invalid_type:
+            return convertInvalidType(issue);
+        case ZodIssueCode.unrecognized_keys:
+            return convertUnrecognizedKeys(issue);
+        case ZodIssueCode.invalid_enum_value:
+            return convertInvalidEnumValue(issue);
+        case ZodIssueCode.invalid_string:
+            return convertInvalidString(issue);
+        case ZodIssueCode.too_small:
+            return convertTooSmall(issue);
+        case ZodIssueCode.too_big:
+            return convertTooBig(issue);
+        case ZodIssueCode.invalid_literal:
+            return convertInvalidLiteral(issue);
+        default:
+            return defaultConversion(issue);
+    }
+};
+
+const validateBreakpointsDefinition = (breakpoints) => {
+    const result = z
+        .array(BreakpointSchema)
+        .superRefine(breakpointsRefinement)
+        .safeParse(breakpoints);
+    if (!result.success) {
+        return {
+            success: false,
+            errors: result.error.issues.map(zodToContentfulError),
+        };
+    }
+    return { success: true };
+};
+
+let breakpointsRegistry = [];
+/**
+ * Register custom breakpoints
+ * @param breakpoints - [{[key:string]: string}]
+ * @returns void
+ */
+const defineBreakpoints = (breakpoints) => {
+    Object.assign(breakpointsRegistry, breakpoints);
+};
+const runBreakpointsValidation = () => {
+    if (!breakpointsRegistry.length)
+        return;
+    const validation = validateBreakpointsDefinition(breakpointsRegistry);
+    if (!validation.success) {
+        throw new Error(`Invalid breakpoints definition. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
+    }
+};
+// Used in the tests to get a breakpoint registration
+const getBreakpointRegistration = (id) => breakpointsRegistry.find((breakpoint) => breakpoint.id === id);
+// Used in the tests to reset the registry
+const resetBreakpointsRegistry = () => {
+    breakpointsRegistry = [];
+};
+
+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})`;
+    }
+    else if (operator === '>') {
+        const minScreenWidth = Number(value) + 1;
+        return `(min-width: ${minScreenWidth}${unit})`;
+    }
+    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 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];
+        }
+    }
+    else {
+        // Old design properties did not support breakpoints, keep for backward compatibility
+        return valuesByBreakpoint;
+    }
+};
+
+const CF_DEBUG_KEY = 'cf_debug';
+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) === 'true';
+    }
+    static getInstance() {
+        if (this.instance === null) {
+            this.instance = new DebugLogger();
+        }
+        return this.instance;
+    }
+    getEnabled() {
+        return this.enabled;
+    }
+    setEnabled(enabled) {
+        this.enabled = enabled;
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        if (enabled) {
+            localStorage.setItem(CF_DEBUG_KEY, 'true');
+        }
+        else {
+            localStorage.removeItem(CF_DEBUG_KEY);
+        }
+    }
+    // Log method for different levels (error, warn, log)
+    logger(level) {
+        return (...args) => {
+            if (this.enabled) {
+                console[level]('[cf-experiences-sdk]', ...args);
+            }
+        };
+    }
+}
+DebugLogger.instance = null;
+const debug = DebugLogger.getInstance();
+const enableDebug = () => {
+    debug.setEnabled(true);
+    console.log('Debug mode enabled');
+};
+const disableDebug = () => {
+    debug.setEnabled(false);
+    console.log('Debug mode disabled');
+};
+
+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,
+    });
+};
+
+// 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';
+};
+
+/**
+ * Localizes the provided entry or asset to match the regular format of CDA/CPA entities.
+ * Note that this function does not apply a fallback to the default locale nor does it check
+ * the content type for the localization setting of each field.
+ * It will simply resolve each field to the requested locale. As using single and multiple
+ * reference fields is still considered an experimental feature, this function does not handle
+ * recursive localization of deeper referenced entities.
+ *
+ * If the entity is already localized, it will return the entity as is.
+ *
+ * Note that localization is later on determined by the existence of the `sys.locale` property (matching the API shape).
+ *
+ * @example
+ * ```
+ * const multiLocaleEntry = { fields: { title: { 'en-US': 'Hello' } } };
+ * const localizedEntry = localizeEntity(multiLocaleEntry, 'en-US');
+ * console.log(localizedEntry.fields.title); // 'Hello'
+ * ```
+ */
+function localizeEntity(entity, locale) {
+    if (!entity || !entity.fields) {
+        throw new Error('Invalid entity provided');
+    }
+    if (entity.sys.locale) {
+        return entity;
+    }
+    const cloned = structuredClone(entity);
+    // Set the requested locale as entry locale to follow the API shape:
+    // https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/common-resource-attributes
+    cloned.sys.locale = locale;
+    for (const key in cloned.fields) {
+        cloned.fields[key] = cloned.fields[key][locale];
+    }
+    return cloned;
+}
+
+/**
+ * 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 });
 };
-const convertUnrecognizedKeys = (issue) => {
-    const missingProperties = issue.keys.map((k) => `"${k}"`).join(', ');
-    return {
-        details: issue.keys.length > 1
-            ? `The properties ${missingProperties} are not expected`
-            : `The property ${missingProperties} is not expected`,
-        name: CodeNames.Unexpected,
-        path: issue.path,
-    };
+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 convertInvalidString = (issue) => {
-    return {
-        details: issue.message || 'Invalid string',
-        name: issue.validation === 'regex' ? CodeNames.Regex : CodeNames.Unexpected,
-        path: issue.path,
-    };
+
+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 {};
 };
-const convertInvalidEnumValue = (issue) => {
+// 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 {
-        details: issue.message || 'Value must be one of expected values',
-        name: CodeNames.In,
-        path: issue.path,
-        value: issue.received.toString(),
-        expected: issue.options,
+        gridColumn: `span ${span}`,
     };
 };
-const convertInvalidLiteral = (issue) => {
+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 {
-        details: issue.message || 'Value must be one of expected values',
-        name: CodeNames.In,
-        path: issue.path,
-        value: issue.received,
-        expected: [issue.expected],
+        border: `${borderSize} ${borderStyle} ${borderColor}`,
     };
 };
-const convertTooBig = (issue) => {
-    return {
-        details: issue.message || `Size should be at most ${issue.maximum}`,
-        name: CodeNames.Size,
-        path: issue.path,
-        max: issue.maximum,
+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 convertTooSmall = (issue) => {
+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 {
-        details: issue.message || `Size should be at least ${issue.minimum}`,
-        name: CodeNames.Size,
-        path: issue.path,
-        min: issue.minimum,
+        backgroundImage,
+        backgroundImage2: backgroundImageSet,
+        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
+        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
+        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
-const defaultConversion = (issue) => {
-    return {
-        details: issue.message || 'An unexpected error occurred',
-        name: CodeNames.Custom,
-        path: issue.path.map(String),
+
+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;
 };
-const zodToContentfulError = (issue) => {
-    switch (issue.code) {
-        case ZodIssueCode.invalid_type:
-            return convertInvalidType(issue);
-        case ZodIssueCode.unrecognized_keys:
-            return convertUnrecognizedKeys(issue);
-        case ZodIssueCode.invalid_enum_value:
-            return convertInvalidEnumValue(issue);
-        case ZodIssueCode.invalid_string:
-            return convertInvalidString(issue);
-        case ZodIssueCode.too_small:
-            return convertTooSmall(issue);
-        case ZodIssueCode.too_big:
-            return convertTooBig(issue);
-        case ZodIssueCode.invalid_literal:
-            return convertInvalidLiteral(issue);
-        default:
-            return defaultConversion(issue);
-    }
-};
-
-const validateBreakpointsDefinition = (breakpoints) => {
-    const result = z
-        .array(BreakpointSchema)
-        .superRefine(breakpointsRefinement)
-        .safeParse(breakpoints);
-    if (!result.success) {
+/**
+ * **Only meant to be used in editor mode!**
+ *
+ * If the node is an empty structure component with a relative height (e.g. '100%'),
+ * it might render with a zero height. In this case, add a min height of 80px to ensure
+ * that child nodes can be added via drag & drop.
+ */
+const addMinHeightForEmptyStructures = (cssProperties, node) => {
+    if (!node.children.length &&
+        isStructureWithRelativeHeight(node.definitionId, cssProperties.height)) {
         return {
-            success: false,
-            errors: result.error.issues.map(zodToContentfulError),
+            ...cssProperties,
+            minHeight: EMPTY_CONTAINER_HEIGHT,
         };
     }
-    return { success: true };
+    return cssProperties;
 };
-
-let breakpointsRegistry = [];
 /**
- * Register custom breakpoints
- * @param breakpoints - [{[key:string]: string}]
- * @returns void
+ * Container/section default behavior:
+ * Default height => height: EMPTY_CONTAINER_HEIGHT
+ * If a container component has children => height: 'fit-content'
  */
-const defineBreakpoints = (breakpoints) => {
-    Object.assign(breakpointsRegistry, breakpoints);
-};
-const runBreakpointsValidation = () => {
-    if (!breakpointsRegistry.length)
-        return;
-    const validation = validateBreakpointsDefinition(breakpointsRegistry);
-    if (!validation.success) {
-        throw new Error(`Invalid breakpoints definition. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
+const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
+    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
+        return value;
     }
-};
-// Used in the tests to get a breakpoint registration
-const getBreakpointRegistration = (id) => breakpointsRegistry.find((breakpoint) => breakpoint.id === id);
-// Used in the tests to reset the registry
-const resetBreakpointsRegistry = () => {
-    breakpointsRegistry = [];
+    if (children.length) {
+        return '100%';
+    }
+    return EMPTY_CONTAINER_HEIGHT;
 };
 
 function getOptimizedImageUrl(url, width, quality, format) {
@@ -2499,138 +2834,30 @@ function getArrayValue(entryOrAsset, path, entityStore) {
             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);
-    }
-};
-
-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,
-    };
-};
-/**
- * Gets calculates the index to drop the dragged component based on the mouse position
- * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
- */
-const getInsertionData = ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }) => {
-    const APPEND_INSIDE = dropReceiverNode.children.length;
-    const PREPEND_INSIDE = 0;
-    if (isMouseAtTopBorder || isMouseAtBottomBorder) {
-        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
-        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
-        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
-        return {
-            // when the mouse is around the border we want to drop the new component as a new section onto the root node
-            node: dropReceiverParentNode,
-            index: isMouseAtBottomBorder ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
-        };
-    }
-    // if over one of the section indicators
-    if (isOverTopIndicator || isOverBottomIndicator) {
-        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
-        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
-        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
-        return {
-            // when the mouse is around the border we want to drop the new component as a new section onto the root node
-            node: dropReceiverParentNode,
-            index: isOverBottomIndicator ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
-        };
-    }
-    if (flexDirection === undefined || flexDirection === 'row') {
-        return {
-            node: dropReceiverNode,
-            index: isMouseInLeftHalf ? PREPEND_INSIDE : APPEND_INSIDE,
-        };
-    }
-    else {
-        return {
-            node: dropReceiverNode,
-            index: isMouseInUpperHalf ? PREPEND_INSIDE : APPEND_INSIDE,
-        };
-    }
-};
-const generateRandomId = (letterCount) => {
-    const LETTERS = 'abcdefghijklmnopqvwxyzABCDEFGHIJKLMNOPQVWXYZ';
-    const NUMS = '0123456789';
-    const ALNUM = NUMS + LETTERS;
-    const times = (n, callback) => Array.from({ length: n }, callback);
-    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-    return times(letterCount, () => ALNUM[random(0, ALNUM.length - 1)]).join('');
-};
-const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
-    if (!usedComponents?.length)
-        return false;
-    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
-};
-/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
-const checkIsAssembly = checkIsAssemblyNode;
-/**
- * This check assumes that the entry is already ensured to be an experience, i.e. the
- * content type of the entry is an experience type with the necessary annotations.
- **/
-const checkIsAssemblyEntry = (entry) => {
-    return Boolean(entry.fields?.componentSettings);
-};
-const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
-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 null;
-}
-function getTargetValueInPixels(targetWidthObject) {
-    switch (targetWidthObject.unit) {
-        case 'px':
-            return targetWidthObject.value;
-        case 'em':
-            return targetWidthObject.value * 16;
-        case 'rem':
-            return targetWidthObject.value * 16;
+    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 targetWidthObject.value;
+            return getBoundValue(entityOrAsset, path);
     }
-}
+};
 
 const isExperienceEntry = (entry) => {
     return (entry?.sys?.type === 'Entry' &&
@@ -2642,368 +2869,177 @@ const isExperienceEntry = (entry) => {
         typeof entry.fields.componentTree.schemaVersion === 'string');
 };
 
-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})`;
-    }
-    else if (operator === '>') {
-        const minScreenWidth = Number(value) + 1;
-        return `(min-width: ${minScreenWidth}${unit})`;
-    }
-    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 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 getDataFromTree = (tree) => {
+    let dataSource = {};
+    let unboundValues = {};
+    const queue = [...tree.root.children];
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node) {
+            continue;
         }
-        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
-        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
-            if (resolveDesignTokens) {
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
-            }
-            return valuesByBreakpoint[fallbackBreakpointId];
+        dataSource = { ...dataSource, ...node.data.dataSource };
+        unboundValues = { ...unboundValues, ...node.data.unboundValues };
+        if (node.children.length) {
+            queue.push(...node.children);
         }
     }
-    else {
-        // Old design properties did not support breakpoints, keep for backward compatibility
-        return valuesByBreakpoint;
-    }
-};
-
-// 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],
+        dataSource,
+        unboundValues,
     };
 };
 /**
- * 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
+ * Gets calculates the index to drop the dragged component based on the mouse position
+ * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
  */
-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
+const getInsertionData = ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }) => {
+    const APPEND_INSIDE = dropReceiverNode.children.length;
+    const PREPEND_INSIDE = 0;
+    if (isMouseAtTopBorder || isMouseAtBottomBorder) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isMouseAtBottomBorder ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
     }
-    else if (chunks.length === 2) {
-        return null; // deep paths have at least 3 chunks
+    // if over one of the section indicators
+    if (isOverTopIndicator || isOverBottomIndicator) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isOverBottomIndicator ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
     }
-    // With 3+ chunks we can now check for deep path correctness
-    const [initialChunk, ...fieldChunks] = chunks;
-    if (!isValidInitialChunk(initialChunk)) {
-        return null;
+    if (flexDirection === undefined || flexDirection === 'row') {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInLeftHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
     }
-    if (!fieldChunks.every(isValidFieldChunk)) {
-        return null;
+    else {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInUpperHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
     }
-    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 generateRandomId = (letterCount) => {
+    const LETTERS = 'abcdefghijklmnopqvwxyzABCDEFGHIJKLMNOPQVWXYZ';
+    const NUMS = '0123456789';
+    const ALNUM = NUMS + LETTERS;
+    const times = (n, callback) => Array.from({ length: n }, callback);
+    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+    return times(letterCount, () => ALNUM[random(0, ALNUM.length - 1)]).join('');
 };
-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.`);
+const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
+    if (!usedComponents?.length)
         return false;
-    }
-    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
-    return secondLast === expectedName;
+    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
 };
-
-const resolveHyperlinkPattern = (pattern, entry, locale) => {
-    if (!entry || !locale)
-        return null;
-    const variables = {
-        entry,
-        locale,
-    };
-    return buildTemplate({ template: pattern, context: variables });
+/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
+const checkIsAssembly = checkIsAssemblyNode;
+/**
+ * This check assumes that the entry is already ensured to be an experience, i.e. the
+ * content type of the entry is an experience type with the necessary annotations.
+ **/
+const checkIsAssemblyEntry = (entry) => {
+    return Boolean(entry.fields?.componentSettings);
 };
-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);
-        }
+const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
+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 = 'cf_debug';
-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) === '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, 'true');
-        }
-        else {
-            localStorage.removeItem(CF_DEBUG_KEY);
+};
+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');
     }
-}
-DebugLogger.instance = null;
-const debug = DebugLogger.getInstance();
-const enableDebug = () => {
-    debug.setEnabled(true);
-    console.log('Debug mode enabled');
+    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);
+    if (!supportedEventTypes.includes(eventData.eventType)) {
+        // Expected message: This message is handled in the EntityStore to store fetched entities
+        if (eventData.eventType !== PostMessageMethods.REQUESTED_ENTITIES) {
+            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
+        }
+    }
+    return eventData;
 };
-const disableDebug = () => {
-    debug.setEnabled(false);
-    console.log('Debug mode disabled');
+const validateExperienceBuilderConfig = ({ locale, mode, }) => {
+    if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
+        return;
+    }
+    if (!locale) {
+        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
+    }
 };
 
 const sendMessage = (eventType, data) => {
@@ -3443,7 +3479,7 @@ class EntityStore extends EntityStoreBase {
         else {
             const { experienceEntry, entities, locale } = options;
             if (!isExperienceEntry(experienceEntry)) {
-                throw new Error('Provided entry is not experience entry');
+                throw new Error('Provided entry is not an experience entry');
             }
             super({ entities, locale });
             this._experienceEntryFields = experienceEntry.fields;
@@ -3525,8 +3561,11 @@ function createExperience(options) {
     }
     else {
         const { experienceEntry, referencedAssets, referencedEntries, locale } = options;
+        if ([experienceEntry, ...referencedAssets, ...referencedEntries].some(isNotLocalized)) {
+            throw new Error('Some of the provided content is not localized. Please localize every entity before passing it to this function. Note that this is solely determined by `sys.locale` being set respectively.');
+        }
         if (!isExperienceEntry(experienceEntry)) {
-            throw new Error('Provided entry is not experience entry');
+            throw new Error('Provided entry is not an experience entry');
         }
         const entityStore = new EntityStore({
             experienceEntry,
@@ -3538,21 +3577,33 @@ function createExperience(options) {
         };
     }
 }
+// Following the API shape, we check the `sys.locale` property as we can't rely on the shape of
+// fields to determine whether it's localized or not.
+// See CDA documentation mentioning it here: https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/common-resource-attributes
+const isNotLocalized = (entity) => {
+    return !entity.sys.locale;
+};
 
+/**
+ * Fetches an experience entry by its slug or id. Throws an error if there are multiple
+ * entries with the same slug. Additionally, it resolves all nested pattern entries inside `fields.usedComponents`.
+ * @param options.client - Instantiated client from the Contentful SDK. If this is using the `withAllLocales` modifier, you may not provide a specific locale.
+ * @param options.locale - Provide a locale if your experience contains custom localized fields. Otherwise, it will fallback to the default locale.
+ * @param options.experienceTypeId - id of the content type associated with the experience
+ * @param options.identifier - identifying condition to find the correct experience entry
+ *
+ */
 const fetchExperienceEntry = async ({ client, experienceTypeId, locale, identifier, }) => {
     if (!client) {
         throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
     }
-    if (!locale) {
-        throw new Error('Failed to fetch experience entities. Required "locale" parameter was not provided');
-    }
     if (!experienceTypeId) {
         throw new Error('Failed to fetch experience entities. Required "experienceTypeId" parameter was not provided');
     }
-    if (!identifier.slug && !identifier.id) {
+    if (!('slug' in identifier) && !('id' in identifier)) {
         throw new Error(`Failed to fetch experience entities. At least one identifier must be provided. Received: ${JSON.stringify(identifier)}`);
     }
-    const filter = identifier.slug ? { 'fields.slug': identifier.slug } : { 'sys.id': identifier.id };
+    const filter = 'slug' in identifier ? { 'fields.slug': identifier.slug } : { 'sys.id': identifier.id };
     const entries = await client.getEntries({
         content_type: experienceTypeId,
         locale,
@@ -3817,13 +3868,18 @@ const fetchAllAssets = async ({ client, ids, locale, skip = 0, limit = 100, resp
     }
 };
 
+/**
+ * Fetches all entries and assets from the `dataSource` of the given experience entry. This will
+ * also consider deep references that are not listed explicitly but linked through deep binding paths.
+ * @param options.client - Instantiated client from the Contentful SDK. If this is using the `withAllLocales` modifier, you may not provide a specific locale.
+ * @param options.experienceEntry - Localized experience entry. To localize a multi locale entry, use the `localizeEntity` function.
+ * @param options.locale - Retrieve a specific localized version of the referenced entities. Otherwise, it will fallback to the default locale.
+ * @returns object with a list of `entries` and a list of `assets`
+ */
 const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) => {
     if (!client) {
         throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
     }
-    if (!locale) {
-        throw new Error('Failed to fetch experience entities. Required "locale" parameter was not provided');
-    }
     if (!isExperienceEntry(experienceEntry)) {
         throw new Error('Failed to fetch experience entities. Provided "experienceEntry" does not match experience entry schema');
     }
@@ -3935,7 +3991,8 @@ const handleError$1 = (generalMessage, error) => {
     throw Error(message);
 };
 /**
- * Fetches an experience object by its slug
+ * Fetches an experience entry by its slug and additionally fetches all its references to return
+ * an initilized experience instance.
  * @param {FetchBySlugParams} options - options to fetch the experience
  */
 async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEditorMode, }) {
@@ -3943,6 +4000,9 @@ async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEdito
     if (isEditorMode)
         return;
     let experienceEntry = undefined;
+    if (!localeCode) {
+        throw new Error('Failed to fetch by slug. Required "localeCode" parameter was not provided');
+    }
     try {
         experienceEntry = await fetchExperienceEntry({
             client,
@@ -3989,7 +4049,8 @@ const handleError = (generalMessage, error) => {
     throw Error(message);
 };
 /**
- * Fetches an experience object by its id
+ * Fetches an experience entry by its id and additionally fetches all its references to return
+ * an initilized experience instance.
  * @param {FetchByIdParams} options - options to fetch the experience
  */
 async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMode, }) {
@@ -3997,6 +4058,9 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     if (isEditorMode)
         return;
     let experienceEntry = undefined;
+    if (!localeCode) {
+        throw new Error('Failed to fetch by id. Required "localeCode" parameter was not provided');
+    }
     try {
         experienceEntry = await fetchExperienceEntry({
             client,
@@ -4034,5 +4098,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map