@contentful/experiences-core 1.9.0-dev-20240628T2230-7a4f71f.0 → 1.9.0-dev-20240628T2235-7a4f71f.0

package/dist/index.js

@@ -1,3370 +0,0 @@
-import md5 from 'md5';
-import { z, ZodIssueCode } from 'zod';
-import { BLOCKS } from '@contentful/rich-text-types';
-import { uniqBy } from 'lodash-es';
-
-const INCOMING_EVENTS = {
-    RequestEditorMode: 'requestEditorMode',
-    ExperienceUpdated: 'componentTreeUpdated',
-    ComponentDraggingChanged: 'componentDraggingChanged',
-    ComponentDragCanceled: 'componentDragCanceled',
-    ComponentDragStarted: 'componentDragStarted',
-    ComponentDragEnded: 'componentDragEnded',
-    ComponentMoveEnded: 'componentMoveEnded',
-    CanvasResized: 'canvasResized',
-    SelectComponent: 'selectComponent',
-    HoverComponent: 'hoverComponent',
-    UpdatedEntity: 'updatedEntity',
-    AssembliesAdded: 'assembliesAdded',
-    AssembliesRegistered: 'assembliesRegistered',
-    MouseMove: 'mouseMove',
-    RequestedEntities: 'REQUESTED_ENTITIES',
-};
-const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';
-const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';
-const CONTENTFUL_COMPONENTS = {
-    section: {
-        id: 'contentful-section',
-        name: 'Section',
-    },
-    container: {
-        id: 'contentful-container',
-        name: 'Container',
-    },
-    columns: {
-        id: 'contentful-columns',
-        name: 'Columns',
-    },
-    singleColumn: {
-        id: 'contentful-single-column',
-        name: 'Column',
-    },
-    button: {
-        id: 'contentful-button',
-        name: 'Button',
-    },
-    heading: {
-        id: 'contentful-heading',
-        name: 'Heading',
-    },
-    image: {
-        id: 'contentful-image',
-        name: 'Image',
-    },
-    richText: {
-        id: 'contentful-richText',
-        name: 'Rich Text',
-    },
-    text: {
-        id: 'contentful-text',
-        name: 'Text',
-    },
-    divider: {
-        id: 'contentful-divider',
-        name: 'Divider',
-    },
-};
-const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
-const CF_STYLE_ATTRIBUTES = [
-    'cfHorizontalAlignment',
-    'cfVerticalAlignment',
-    'cfMargin',
-    'cfPadding',
-    'cfBackgroundColor',
-    'cfWidth',
-    'cfMaxWidth',
-    'cfHeight',
-    'cfImageAsset',
-    'cfImageOptions',
-    'cfBackgroundImageUrl',
-    'cfBackgroundImageOptions',
-    'cfFlexDirection',
-    'cfFlexWrap',
-    'cfBorder',
-    'cfBorderRadius',
-    'cfGap',
-    'cfFontSize',
-    'cfFontWeight',
-    'cfLineHeight',
-    'cfLetterSpacing',
-    'cfTextColor',
-    'cfTextAlign',
-    'cfTextTransform',
-    'cfTextBold',
-    'cfTextItalic',
-    'cfTextUnderline',
-    // For backwards compatibility
-    // we need to keep those in this constant array
-    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
-    // can filter them out and not pass as props
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
-    'cfBackgroundImageAlignmentVertical',
-    'cfBackgroundImageAlignmentHorizontal',
-];
-const EMPTY_CONTAINER_HEIGHT = '80px';
-const DEFAULT_IMAGE_WIDTH = '500px';
-var PostMessageMethods;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods || (PostMessageMethods = {}));
-const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
-
-const structureComponents = new Set([
-    CONTENTFUL_COMPONENTS.section.id,
-    CONTENTFUL_COMPONENTS.columns.id,
-    CONTENTFUL_COMPONENTS.container.id,
-    CONTENTFUL_COMPONENTS.singleColumn.id,
-]);
-const isContentfulStructureComponent = (componentId) => structureComponents.has(componentId ?? '');
-const isComponentAllowedOnRoot = (componentId) => isContentfulStructureComponent(componentId) || componentId === CONTENTFUL_COMPONENTS.divider.id;
-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;
-};
-const validateExperienceBuilderConfig = ({ locale, isEditorMode, }) => {
-    if (isEditorMode) {
-        return;
-    }
-    if (!locale) {
-        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
-    }
-};
-
-// Keep this for backwards compatilibity - 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;
-};
-const buildStyleTag = ({ styles, nodeId }) => {
-    const stylesStr = Object.entries(styles)
-        .filter(([, value]) => value !== undefined)
-        .reduce((acc, [key, value]) => `${acc}
-        ${toCSSAttribute(key)}: ${value};`, '');
-    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
-    const styleRule = `.${className}{ ${stylesStr} }`;
-    return [className, styleRule];
-};
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
-    return {
-        margin: cfMargin,
-        padding: cfPadding,
-        backgroundColor: cfBackgroundColor,
-        width: transformFill(cfWidth || cfImageOptions?.width),
-        height: transformFill(cfHeight || cfImageOptions?.height),
-        maxWidth: cfMaxWidth,
-        ...transformGridColumn(cfColumnSpan),
-        ...transformBorderStyle(cfBorder),
-        borderRadius: cfBorderRadius,
-        gap: cfGap,
-        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
-        flexDirection: cfFlexDirection,
-        flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
-        fontSize: cfFontSize,
-        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
-        fontStyle: cfTextItalic ? 'italic' : 'normal',
-        lineHeight: cfLineHeight,
-        letterSpacing: cfLetterSpacing,
-        color: cfTextColor,
-        textAlign: cfTextAlign,
-        textTransform: cfTextTransform,
-        textDecoration: cfTextUnderline ? 'underline' : 'none',
-        boxSizing: 'border-box',
-        objectFit: cfImageOptions?.objectFit,
-        objectPosition: cfImageOptions?.objectPosition,
-    };
-};
-/**
- * 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: {
-        validations: {
-            in: [
-                {
-                    value: 'start',
-                    displayName: 'Align left',
-                },
-                {
-                    value: 'center',
-                    displayName: 'Align center',
-                },
-                {
-                    value: 'end',
-                    displayName: 'Align right',
-                },
-            ],
-        },
-        type: 'Text',
-        group: 'style',
-        description: 'The horizontal 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',
-    },
-    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',
-    },
-    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',
-    },
-    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: 'Hyperlink',
-        type: 'Hyperlink',
-        defaultValue: '',
-        validations: {
-            format: 'URL',
-        },
-        description: 'hyperlink for section or container',
-    },
-    cfOpenInNewTab: {
-        displayName: 'Hyperlink behaviour',
-        type: 'Boolean',
-        defaultValue: false,
-        description: 'To open hyperlink in new Tab or not',
-    },
-};
-const optionalBuiltInStyles = {
-    cfFontSize: {
-        displayName: 'Font Size',
-        type: 'Text',
-        group: 'style',
-        description: 'The font size of the element',
-        defaultValue: '16px',
-    },
-    cfFontWeight: {
-        validations: {
-            in: [
-                {
-                    value: '400',
-                    displayName: 'Normal',
-                },
-                {
-                    value: '500',
-                    displayName: 'Medium',
-                },
-                {
-                    value: '600',
-                    displayName: 'Semi Bold',
-                },
-            ],
-        },
-        displayName: 'Font Weight',
-        type: 'Text',
-        group: 'style',
-        description: 'The font weight of the element',
-        defaultValue: '400',
-    },
-    cfImageAsset: {
-        displayName: 'Image',
-        type: 'Media',
-        description: 'Image to display',
-    },
-    cfImageOptions: {
-        displayName: 'Image options',
-        type: 'Object',
-        group: 'style',
-        defaultValue: {
-            width: DEFAULT_IMAGE_WIDTH,
-            height: '100%',
-            targetSize: DEFAULT_IMAGE_WIDTH,
-        },
-    },
-    cfBackgroundImageUrl: {
-        displayName: 'Background image',
-        type: 'Media',
-        description: 'Background image for component',
-    },
-    cfBackgroundImageOptions: {
-        displayName: 'Background image options',
-        type: 'Object',
-        group: 'style',
-        defaultValue: {
-            scaling: 'fill',
-            alignment: 'left top',
-            targetSize: '2000px',
-        },
-    },
-    cfBorderRadius: {
-        displayName: 'Border Radius',
-        type: 'Text',
-        group: 'style',
-        description: 'The border radius of the section',
-        defaultValue: '0px',
-    },
-    cfLineHeight: {
-        displayName: 'Line Height',
-        type: 'Text',
-        group: 'style',
-        description: 'The line height of the element',
-        defaultValue: '20px',
-    },
-    cfLetterSpacing: {
-        displayName: 'Letter Spacing',
-        type: 'Text',
-        group: 'style',
-        description: 'The letter spacing of the element',
-        defaultValue: '0px',
-    },
-    cfTextColor: {
-        displayName: 'Text Color',
-        type: 'Text',
-        group: 'style',
-        description: 'The text color of the element',
-        defaultValue: 'rgba(0, 0, 0, 1)',
-    },
-    cfTextAlign: {
-        validations: {
-            in: [
-                {
-                    value: 'left',
-                    displayName: 'Align left',
-                },
-                {
-                    value: 'center',
-                    displayName: 'Align center',
-                },
-                {
-                    value: 'right',
-                    displayName: 'Align right',
-                },
-            ],
-        },
-        displayName: 'Text Align',
-        type: 'Text',
-        group: 'style',
-        description: 'The text alignment of the element',
-        defaultValue: 'left',
-    },
-    cfTextTransform: {
-        validations: {
-            in: [
-                {
-                    value: 'none',
-                    displayName: 'Normal',
-                },
-                {
-                    value: 'capitalize',
-                    displayName: 'Capitalize',
-                },
-                {
-                    value: 'uppercase',
-                    displayName: 'Uppercase',
-                },
-                {
-                    value: 'lowercase',
-                    displayName: 'Lowercase',
-                },
-            ],
-        },
-        displayName: 'Text Transform',
-        type: 'Text',
-        group: 'style',
-        description: 'The text transform of the element',
-        defaultValue: 'none',
-    },
-    cfTextBold: {
-        displayName: 'Bold',
-        type: 'Boolean',
-        group: 'style',
-        description: 'The text bold of the element',
-        defaultValue: false,
-    },
-    cfTextItalic: {
-        displayName: 'Italic',
-        type: 'Boolean',
-        group: 'style',
-        description: 'The text italic of the element',
-        defaultValue: false,
-    },
-    cfTextUnderline: {
-        displayName: 'Underline',
-        type: 'Boolean',
-        group: 'style',
-        description: 'The text underline of the element',
-        defaultValue: false,
-    },
-};
-const sectionBuiltInStyles = {
-    ...builtInStyles,
-    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
-    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
-    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
-};
-const containerBuiltInStyles = {
-    ...builtInStyles,
-    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
-    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
-    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
-    cfMaxWidth: {
-        displayName: 'Max Width',
-        type: 'Text',
-        group: 'style',
-        description: 'The max-width of the section',
-        defaultValue: '1192px',
-    },
-};
-const dividerBuiltInStyles = {
-    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
-    cfMargin: {
-        displayName: 'Margin',
-        type: 'Text',
-        group: 'style',
-        description: 'The margin of the divider',
-        defaultValue: '20px 0px 20px 0px',
-    },
-    cfWidth: {
-        displayName: 'Width',
-        type: 'Text',
-        group: 'style',
-        description: 'The width of the divider',
-        defaultValue: '100%',
-    },
-    cfHeight: {
-        displayName: 'Height',
-        type: 'Text',
-        group: 'style',
-        description: 'The height of the divider',
-        defaultValue: '2px',
-    },
-    cfMaxWidth: {
-        displayName: 'Max width',
-        type: 'Text',
-        group: 'style',
-        description: 'The max-width of the divider',
-        defaultValue: 'none',
-    },
-    cfBackgroundColor: {
-        displayName: 'Background color',
-        type: 'Text',
-        group: 'style',
-        description: 'The background color of the divider',
-        defaultValue: 'rgba(0, 0, 0, 1)',
-    },
-};
-const singleColumnBuiltInStyles = {
-    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
-    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
-    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
-    cfVerticalAlignment: {
-        validations: {
-            in: [
-                {
-                    value: 'start',
-                    displayName: 'Align left',
-                },
-                {
-                    value: 'center',
-                    displayName: 'Align center',
-                },
-                {
-                    value: 'end',
-                    displayName: 'Align right',
-                },
-            ],
-        },
-        type: 'Text',
-        group: 'style',
-        description: 'The horizontal alignment of the column',
-        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 column',
-        defaultValue: 'center',
-        displayName: 'Horizontal alignment',
-    },
-    cfPadding: {
-        displayName: 'Padding',
-        type: 'Text',
-        group: 'style',
-        description: 'The padding of the column',
-        defaultValue: '0 0 0 0',
-    },
-    cfBackgroundColor: {
-        displayName: 'Background color',
-        type: 'Text',
-        group: 'style',
-        description: 'The background color of the column',
-    },
-    cfFlexDirection: {
-        displayName: 'Direction',
-        type: 'Text',
-        group: 'style',
-        description: 'The orientation of the column',
-        defaultValue: 'column',
-    },
-    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 column',
-        defaultValue: '0px solid rgba(0, 0, 0, 0)',
-    },
-    cfGap: {
-        displayName: 'Gap',
-        type: 'Text',
-        group: 'style',
-        description: 'The spacing between the elements of the column',
-        defaultValue: '0px',
-    },
-    cfColumnSpan: {
-        type: 'Text',
-        defaultValue: '6',
-        group: 'style',
-    },
-    cfColumnSpanLock: {
-        type: 'Boolean',
-        defaultValue: false,
-        group: 'style',
-    },
-};
-const columnsBuiltInStyles = {
-    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
-    cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
-    cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
-    cfMargin: {
-        displayName: 'Margin',
-        type: 'Text',
-        group: 'style',
-        description: 'The margin of the columns',
-        defaultValue: '0 0 0 0',
-    },
-    cfWidth: {
-        displayName: 'Width',
-        type: 'Text',
-        group: 'style',
-        description: 'The width of the columns',
-        defaultValue: '100%',
-    },
-    cfMaxWidth: {
-        displayName: 'Max width',
-        type: 'Text',
-        group: 'style',
-        description: 'The max-width of the columns',
-        defaultValue: '1192px',
-    },
-    cfPadding: {
-        displayName: 'Padding',
-        type: 'Text',
-        group: 'style',
-        description: 'The padding of the columns',
-        defaultValue: '10px 10px 10px 10px',
-    },
-    cfBackgroundColor: {
-        displayName: 'Background color',
-        type: 'Text',
-        group: 'style',
-        description: 'The background color of the columns',
-    },
-    cfBorder: {
-        displayName: 'Border',
-        type: 'Text',
-        group: 'style',
-        description: 'The border of the columns',
-        defaultValue: '0px solid rgba(0, 0, 0, 0)',
-    },
-    cfGap: {
-        displayName: 'Gap',
-        type: 'Text',
-        group: 'style',
-        description: 'The spacing between the elements of the columns',
-        defaultValue: '10px 10px',
-    },
-    cfColumns: {
-        type: 'Text',
-        defaultValue: '[6,6]',
-        group: 'style',
-    },
-    cfWrapColumns: {
-        type: 'Boolean',
-        defaultValue: false,
-        group: 'style',
-    },
-    cfWrapColumnsCount: {
-        type: 'Text',
-        defaultValue: '2',
-        group: 'style',
-    },
-};
-
-const sectionDefinition = {
-    id: CONTENTFUL_COMPONENTS.section.id,
-    name: CONTENTFUL_COMPONENTS.section.name,
-    category: CONTENTFUL_COMPONENT_CATEGORY,
-    children: true,
-    variables: sectionBuiltInStyles,
-    tooltip: {
-        description: 'Create a new full width section of your experience by dragging this component onto the canvas. Other components and patterns can be added into a section.',
-    },
-};
-const containerDefinition = {
-    id: CONTENTFUL_COMPONENTS.container.id,
-    name: CONTENTFUL_COMPONENTS.container.name,
-    category: CONTENTFUL_COMPONENT_CATEGORY,
-    children: true,
-    variables: containerBuiltInStyles,
-    tooltip: {
-        description: 'Create a new area or pattern within your page layout by dragging a container onto the canvas. Other components and patterns can be added into a container.',
-    },
-};
-const columnsDefinition = {
-    id: CONTENTFUL_COMPONENTS.columns.id,
-    name: CONTENTFUL_COMPONENTS.columns.name,
-    category: CONTENTFUL_COMPONENT_CATEGORY,
-    children: true,
-    variables: columnsBuiltInStyles,
-    tooltip: {
-        description: 'Add columns to a container to create your desired layout and ensure that the experience is responsive across different screen sizes.',
-    },
-};
-const singleColumnDefinition = {
-    id: CONTENTFUL_COMPONENTS.singleColumn.id,
-    name: CONTENTFUL_COMPONENTS.singleColumn.name,
-    category: CONTENTFUL_COMPONENT_CATEGORY,
-    children: true,
-    variables: singleColumnBuiltInStyles,
-};
-const dividerDefinition = {
-    id: CONTENTFUL_COMPONENTS.divider.id,
-    name: CONTENTFUL_COMPONENTS.divider.name,
-    category: CONTENTFUL_DEFAULT_CATEGORY,
-    children: false,
-    variables: dividerBuiltInStyles,
-    tooltip: {
-        description: 'Drop onto the canvas to add a divider.',
-    },
-};
-
-let designTokensRegistry = {};
-// This function is used to ensure that the composite values are valid since composite values are optional.
-// Therefore only border and in the future text related design tokens are/will be checked in this funciton.
-// Ensuring values for simple key-value design tokens are not neccessary since they are required via typescript.
-const ensureValidCompositeValues = (designTokenDefinition) => {
-    // TODO: add validation logic when text related design tokens are added
-    // Border validation
-    if (designTokenDefinition.border) {
-        for (const borderKey in designTokenDefinition.border) {
-            const borderValue = designTokenDefinition.border[borderKey];
-            designTokenDefinition.border[borderKey] = {
-                width: borderValue.width || '1px',
-                style: borderValue.style || 'solid',
-                color: borderValue.color || '#000000',
-            };
-        }
-    }
-    return designTokenDefinition;
-};
-/**
- * Register design tokens styling
- * @param designTokenDefinition - {[key:string]: Record<string, string>}
- * @returns void
- */
-const defineDesignTokens = (designTokenDefinition) => {
-    Object.assign(designTokensRegistry, ensureValidCompositeValues(designTokenDefinition));
-};
-const templateStringRegex = /\${(.+?)}/g;
-const getDesignTokenRegistration = (breakpointValue, variableName) => {
-    if (!breakpointValue)
-        return breakpointValue;
-    let resolvedValue = '';
-    for (const part of breakpointValue.split(' ')) {
-        const tokenValue = templateStringRegex.test(part)
-            ? resolveSimpleDesignToken(part, variableName)
-            : part;
-        resolvedValue += `${tokenValue} `;
-    }
-    // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
-    return resolvedValue.trim();
-};
-const resolveSimpleDesignToken = (templateString, variableName) => {
-    const nonTemplateValue = templateString.replace(templateStringRegex, '$1');
-    const [tokenCategory, tokenName] = nonTemplateValue.split('.');
-    const tokenValues = designTokensRegistry[tokenCategory];
-    if (tokenValues && tokenValues[tokenName]) {
-        if (variableName === 'cfBorder') {
-            const { width, style, color } = tokenValues[tokenName];
-            return `${width} ${style} ${color}`;
-        }
-        return tokenValues[tokenName];
-    }
-    if (builtInStyles[variableName]) {
-        return builtInStyles[variableName].defaultValue;
-    }
-    if (optionalBuiltInStyles[variableName]) {
-        return optionalBuiltInStyles[variableName].defaultValue;
-    }
-    return '0px';
-};
-// Used in unit tests to reset the design token registry
-const resetDesignTokenRegistry = () => {
-    designTokensRegistry = {};
-};
-
-// If more than one version is supported, use z.union
-const SchemaVersions = z.literal('2023-09-28');
-// Keep deprecated versions here just for reference
-z.union([
-    z.literal('2023-08-23'),
-    z.literal('2023-07-26'),
-    z.literal('2023-06-27'),
-]);
-
-const DefinitionPropertyTypeSchema = z.enum([
-    'Text',
-    'RichText',
-    'Number',
-    'Date',
-    'Boolean',
-    'Location',
-    'Media',
-    'Object',
-    'Hyperlink',
-]);
-const DefinitionPropertyKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,32}$/, { message: 'Property needs to match: /^[a-zA-Z0-9-_]{1,32}$/' });
-z.object({
-    id: DefinitionPropertyKeySchema,
-    variables: z.record(DefinitionPropertyKeySchema, z.object({
-        // TODO - extend with definition of validations and defaultValue
-        displayName: z.string().optional(),
-        type: DefinitionPropertyTypeSchema,
-        description: z.string().optional(),
-        group: z.string().optional(),
-    })),
-});
-
-const uuidKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
-/**
- * Property keys for imported components have a limit of 32 characters (to be implemented) while
- * property keys for patterns have a limit of 54 characters (<32-char-variabl-name>_<21-char-nanoid-id>).
- * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
- */
-const propertyKeySchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
-const DataSourceSchema = z.record(uuidKeySchema, z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.enum(['Entry', 'Asset']),
-    }),
-}));
-const PrimitiveValueSchema = z.union([
-    z.string(),
-    z.boolean(),
-    z.number(),
-    z.record(z.any(), z.any()),
-    z.undefined(),
-]);
-const ValuesByBreakpointSchema = z.record(z.lazy(() => PrimitiveValueSchema));
-const DesignValueSchema = z
-    .object({
-    type: z.literal('DesignValue'),
-    valuesByBreakpoint: ValuesByBreakpointSchema,
-})
-    .strict();
-const BoundValueSchema = z
-    .object({
-    type: z.literal('BoundValue'),
-    path: z.string(),
-})
-    .strict();
-const HyperlinkValueSchema = z
-    .object({
-    type: z.literal('HyperlinkValue'),
-    linkTargetKey: z.string(),
-    overrides: z.object({}).optional(),
-})
-    .strict();
-const UnboundValueSchema = z
-    .object({
-    type: z.literal('UnboundValue'),
-    key: z.string(),
-})
-    .strict();
-const ComponentValueSchema = z
-    .object({
-    type: z.literal('ComponentValue'),
-    key: z.string(),
-})
-    .strict();
-const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
-    DesignValueSchema,
-    BoundValueSchema,
-    UnboundValueSchema,
-    HyperlinkValueSchema,
-    ComponentValueSchema,
-]);
-const BreakpointSchema = z
-    .object({
-    id: propertyKeySchema,
-    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
-    previewSize: z.string(),
-    displayName: z.string(),
-    displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
-})
-    .strict();
-const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
-    value: PrimitiveValueSchema,
-}));
-// Use helper schema to define a recursive schema with its type correctly below
-const BaseComponentTreeNodeSchema = z.object({
-    definitionId: DefinitionPropertyKeySchema,
-    displayName: z.string().optional(),
-    slotId: z.string().optional(),
-    variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-});
-const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
-    children: z.lazy(() => ComponentTreeNodeSchema.array()),
-});
-const ComponentSettingsSchema = z.object({
-    variableDefinitions: z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
-    z.object({
-        displayName: z.string().optional(),
-        type: DefinitionPropertyTypeSchema,
-        defaultValue: PrimitiveValueSchema.or(ComponentPropertyValueSchema).optional(),
-        description: z.string().optional(),
-        group: z.string().optional(),
-        validations: z
-            .object({
-            required: z.boolean().optional(),
-            format: z.literal('URL').optional(),
-            in: z
-                .array(z.object({
-                value: z.union([z.string(), z.number()]),
-                displayName: z.string().optional(),
-            }))
-                .optional(),
-        })
-            .optional(),
-    })),
-});
-const UsedComponentsSchema = z.array(z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.literal('Entry'),
-    }),
-}));
-const breakpointsRefinement = (value, ctx) => {
-    if (!value.length || value[0].query !== '*') {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `The first breakpoint should include the following attributes: { "query": "*" }`,
-        });
-    }
-    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
-        // check if the current breakpoint id is found in the rest of the array
-        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
-        return breakpointIndex !== currentBreakpointIndex;
-    });
-    if (hasDuplicateIds) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Breakpoint IDs must be unique`,
-        });
-    }
-    // Extract the queries boundary by removing the special characters around it
-    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
-    // sort updates queries array in place so we need to create a copy
-    const originalQueries = [...queries];
-    queries.sort((q1, q2) => {
-        if (q1 === '*') {
-            return -1;
-        }
-        if (q2 === '*') {
-            return 1;
-        }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Breakpoints should be ordered from largest to smallest pixel value`,
-        });
-    }
-};
-const componentSettingsRefinement = (value, ctx) => {
-    const { componentSettings, usedComponents } = value;
-    if (!componentSettings || !usedComponents) {
-        return;
-    }
-    const localeKey = Object.keys(componentSettings ?? {})[0];
-    if (componentSettings[localeKey] !== undefined && usedComponents[localeKey] !== undefined) {
-        ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `'componentSettings' field cannot be used in conjunction with 'usedComponents' field`,
-            path: ['componentSettings', localeKey],
-        });
-    }
-};
-const ComponentTreeSchema = z
-    .object({
-    breakpoints: z.array(BreakpointSchema).superRefine(breakpointsRefinement),
-    children: z.array(ComponentTreeNodeSchema),
-    schemaVersion: SchemaVersions,
-})
-    .strict();
-const localeWrapper = (fieldSchema) => z.record(z.string(), fieldSchema);
-z
-    .object({
-    componentTree: localeWrapper(ComponentTreeSchema),
-    dataSource: localeWrapper(DataSourceSchema),
-    unboundValues: localeWrapper(UnboundValuesSchema),
-    usedComponents: localeWrapper(UsedComponentsSchema).optional(),
-    componentSettings: localeWrapper(ComponentSettingsSchema).optional(),
-})
-    .superRefine(componentSettingsRefinement);
-
-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 detachExperienceStyles = (experience) => {
-    const experienceTreeRoot = experience.entityStore?.experienceEntryFields
-        ?.componentTree;
-    if (!experienceTreeRoot) {
-        return;
-    }
-    const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);
-    // getting breakpoints from the entry componentTree field
-    /**
-     * breakpoints [
-        {
-          id: 'desktop',
-          query: '*',
-          displayName: 'All Sizes',
-          previewSize: '100%'
-        },
-        {
-          id: 'tablet',
-          query: '<992px',
-          displayName: 'Tablet',
-          previewSize: '820px'
-        },
-        {
-          id: 'mobile',
-          query: '<576px',
-          displayName: 'Mobile',
-          previewSize: '390px'
-        }
-      ]
-     */
-    const { breakpoints } = experienceTreeRoot;
-    // creating the structure which I thought would work best for aggregation
-    const mediaQueriesTemplate = breakpoints.reduce((mediaQueryTemplate, breakpoint) => {
-        return {
-            ...mediaQueryTemplate,
-            [breakpoint.id]: {
-                condition: breakpoint.query,
-                cssByClassName: {},
-            },
-        };
-    }, {});
-    // getting the breakpoint ids
-    const breakpointIds = Object.keys(mediaQueriesTemplate);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, }) => {
-        // traversing the tree
-        const queue = [];
-        queue.push(...componentTree.children);
-        let currentNode = undefined;
-        // for each tree node
-        while (queue.length) {
-            currentNode = queue.shift();
-            if (!currentNode) {
-                break;
-            }
-            const usedComponents = experience.entityStore?.experienceEntryFields?.usedComponents ?? [];
-            const isPatternNode = checkIsAssemblyNode({
-                componentId: currentNode.definitionId,
-                usedComponents,
-            });
-            if (isPatternNode) {
-                const patternEntry = usedComponents.find((component) => component.sys.id === currentNode.definitionId);
-                if (!patternEntry || !('fields' in patternEntry)) {
-                    continue;
-                }
-                const defaultPatternDivStyles = Object.fromEntries(Object.entries(buildCfStyles({}))
-                    .filter(([, value]) => value !== undefined)
-                    .map(([key, value]) => [toCSSAttribute(key), value]));
-                // I create a hash of the object above because that would ensure hash stability
-                const styleHash = md5(JSON.stringify(defaultPatternDivStyles));
-                // and prefix the className to make sure the value can be processed
-                const className = `cf-${styleHash}`;
-                for (const breakpointId of breakpointIds) {
-                    if (!mediaQueriesTemplate[breakpointId].cssByClassName[className]) {
-                        mediaQueriesTemplate[breakpointId].cssByClassName[className] =
-                            toCSSString(defaultPatternDivStyles);
-                    }
-                }
-                currentNode.variables.cfSsrClassName = {
-                    type: 'DesignValue',
-                    valuesByBreakpoint: {
-                        [breakpointIds[0]]: className,
-                    },
-                };
-                // the node of a used pattern contains only the definitionId (id of the patter entry)
-                // as well as the variables overwrites
-                // the layout of a pattern is stored in it's entry
-                iterateOverTreeAndExtractStyles({
-                    // that is why we pass it here to iterate of the pattern tree
-                    componentTree: patternEntry.fields.componentTree,
-                    // but we pass the data source of the experience entry cause that's where the binding is stored
-                    dataSource,
-                    // unbound values of a pattern store the default values of pattern variables
-                    unboundValues: patternEntry.fields.unboundValues,
-                    // this is where we can map the pattern variable to it's default value
-                    componentSettings: patternEntry.fields.componentSettings,
-                    // and this is where the over-writes for the default values are stored
-                    // yes, I know, it's a bit confusing
-                    componentVariablesOverwrites: currentNode.variables,
-                });
-                continue;
-            }
-            /** Variables value is stored in `valuesByBreakpoint` object
-           * {
-              cfVerticalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfHorizontalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfBackgroundColor: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'rgba(246, 246, 246, 1)' }
-              },
-              cfWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'fill' } },
-              cfHeight: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'fit-content' }
-              },
-              cfMaxWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'none' } },
-              cfFlexDirection: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'column' } },
-              cfFlexWrap: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'nowrap' } },
-              cfBorder: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: '0px solid rgba(0, 0, 0, 0)' }
-              },
-              cfBorderRadius: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px' } },
-              cfGap: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px 0px' } },
-              cfHyperlink: { type: 'UnboundValue', key: 'VNc49Qyepd6IzN7rmKUyS' },
-              cfOpenInNewTab: { type: 'UnboundValue', key: 'ZA5YqB2fmREQ4pTKqY5hX' },
-              cfBackgroundImageUrl: { type: 'UnboundValue', key: 'FeskH0WbYD5_RQVXX-1T8' },
-              cfBackgroundImageOptions: { type: 'DesignValue', valuesByBreakpoint: { desktop: [Object] } }
-            }
-           */
-            // so first, I convert it into a map to help me make it easier to access the values
-            const propsByBreakpoint = indexByBreakpoint({
-                variables: currentNode.variables,
-                breakpointIds,
-                unboundValues: unboundValues,
-                dataSource: dataSource,
-                componentSettings,
-                componentVariablesOverwrites,
-                getBoundEntityById: (id) => {
-                    return experience.entityStore?.entities.find((entity) => entity.sys.id === id);
-                },
-            });
-            /**
-           * propsByBreakpoint {
-              desktop: {
-                cfVerticalAlignment: 'center',
-                cfHorizontalAlignment: 'center',
-                cfMargin: '0 0 0 0',
-                cfPadding: '0 0 0 0',
-                cfBackgroundColor: 'rgba(246, 246, 246, 1)',
-                cfWidth: 'fill',
-                cfHeight: 'fit-content',
-                cfMaxWidth: 'none',
-                cfFlexDirection: 'column',
-                cfFlexWrap: 'nowrap',
-                cfBorder: '0px solid rgba(0, 0, 0, 0)',
-                cfBorderRadius: '0px',
-                cfGap: '0px 0px',
-                cfBackgroundImageOptions: { scaling: 'fill', alignment: 'left top', targetSize: '2000px' }
-              },
-              tablet: {},
-              mobile: {}
-            }
-           */
-            const currentNodeClassNames = [];
-            // then for each breakpoint
-            for (const breakpointId of breakpointIds) {
-                const propsByBreakpointWithResolvedDesignTokens = Object.entries(propsByBreakpoint[breakpointId]).reduce((acc, [variableName, variableValue]) => {
-                    return {
-                        ...acc,
-                        [variableName]: maybePopulateDesignTokenValue(variableName, variableValue, mapOfDesignVariableKeys),
-                    };
-                }, {});
-                // We convert cryptic prop keys to css variables
-                // Eg: cfMargin to margin
-                const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);
-                const stylesForBreakpointWithoutUndefined = Object.fromEntries(Object.entries(stylesForBreakpoint)
-                    .filter(([, value]) => value !== undefined)
-                    .map(([key, value]) => [toCSSAttribute(key), value]));
-                /**
-               * stylesForBreakpoint {
-                  margin: '0 0 0 0',
-                  padding: '0 0 0 0',
-                  'background-color': 'rgba(246, 246, 246, 1)',
-                  width: '100%',
-                  height: 'fit-content',
-                  'max-width': 'none',
-                  border: '0px solid rgba(0, 0, 0, 0)',
-                  'border-radius': '0px',
-                  gap: '0px 0px',
-                  'align-items': 'center',
-                  'justify-content': 'safe center',
-                  'flex-direction': 'column',
-                  'flex-wrap': 'nowrap',
-                  'font-style': 'normal',
-                  'text-decoration': 'none',
-                  'box-sizing': 'border-box'
-                }
-               */
-                // I create a hash of the object above because that would ensure hash stability
-                const styleHash = md5(JSON.stringify(stylesForBreakpointWithoutUndefined));
-                // and prefix the className to make sure the value can be processed
-                const className = `cf-${styleHash}`;
-                // I save the generated hashes into an array to later save it in the tree node
-                // as cfSsrClassName prop
-                // making sure to avoid the duplicates in case styles for > 1 breakpoints are the same
-                if (!currentNodeClassNames.includes(className)) {
-                    currentNodeClassNames.push(className);
-                }
-                // if there is already the similar hash - no need to over-write it
-                if (mediaQueriesTemplate[breakpointId].cssByClassName[className]) {
-                    continue;
-                }
-                // otherwise, save it to the stylesheet
-                mediaQueriesTemplate[breakpointId].cssByClassName[className] = toCSSString(stylesForBreakpointWithoutUndefined);
-            }
-            // all generated classNames are saved in the tree node
-            // to be handled by the sdk later
-            // each node will get N classNames, where N is the number of breakpoints
-            // browsers process classNames in the order they are defined
-            // meaning that in case of className1 className2 className3
-            // className3 will win over className2 and className1
-            // making sure that we respect the order of breakpoints from
-            // we can achieve "desktop first" or "mobile first" approach to style over-writes
-            currentNode.variables.cfSsrClassName = {
-                type: 'DesignValue',
-                valuesByBreakpoint: {
-                    [breakpointIds[0]]: currentNodeClassNames.join(' '),
-                },
-            };
-            queue.push(...currentNode.children);
-        }
-    };
-    iterateOverTreeAndExtractStyles({
-        componentTree: experienceTreeRoot,
-        dataSource: experience.entityStore?.dataSource ?? {},
-        unboundValues: experience.entityStore?.unboundValues ?? {},
-        componentSettings: experience.entityStore?.experienceEntryFields?.componentSettings,
-    });
-    // once the whole tree was traversed, for each breakpoint, I aggregate the styles
-    // for each generated className into one css string
-    const styleSheet = Object.entries(mediaQueriesTemplate).reduce((acc, [, breakpointPayload]) => {
-        return `${acc}${toMediaQuery(breakpointPayload)}`;
-    }, '');
-    return styleSheet;
-};
-const isCfStyleAttribute = (variableName) => {
-    return CF_STYLE_ATTRIBUTES.includes(variableName);
-};
-const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignVariableKeys) => {
-    // TODO: refactor to reuse fn from core package
-    if (typeof variableValue !== 'string') {
-        return variableValue;
-    }
-    if (!isCfStyleAttribute(variableName)) {
-        return variableValue;
-    }
-    const resolveSimpleDesignToken = (variableName, variableValue) => {
-        const nonTemplateDesignTokenValue = variableValue.replace(templateStringRegex, '$1');
-        const tokenValue = mapOfDesignVariableKeys[nonTemplateDesignTokenValue];
-        if (!tokenValue) {
-            if (builtInStyles[variableName]) {
-                return builtInStyles[variableName].defaultValue;
-            }
-            if (optionalBuiltInStyles[variableName]) {
-                return optionalBuiltInStyles[variableName].defaultValue;
-            }
-            return '0px';
-        }
-        if (variableName === 'cfBorder' || variableName.startsWith('cfBorder_')) {
-            if (typeof tokenValue === 'object') {
-                const { width, style, color } = tokenValue;
-                return `${width} ${style} ${color}`;
-            }
-        }
-        return tokenValue;
-    };
-    const templateStringRegex = /\${(.+?)}/g;
-    const parts = variableValue.split(' ');
-    let resolvedValue = '';
-    for (const part of parts) {
-        const tokenValue = templateStringRegex.test(part)
-            ? resolveSimpleDesignToken(variableName, part)
-            : part;
-        resolvedValue += `${tokenValue} `;
-    }
-    // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
-    return resolvedValue.trim();
-};
-const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataSource = {}, unboundValues = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
-    if (variableData.type === 'UnboundValue') {
-        const uuid = variableData.key;
-        return unboundValues[uuid]?.value;
-    }
-    if (variableData.type === 'ComponentValue') {
-        const variableDefinitionKey = variableData.key;
-        const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
-        // @ts-expect-error TODO: fix the types as it thinks taht `defaultValue` is of type string
-        const defaultValueKey = variableDefinition.defaultValue?.key;
-        const defaultValue = unboundValues[defaultValueKey].value;
-        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
-        if (!userSetValue) {
-            return defaultValue;
-        }
-        // at this point userSetValue will either be type of 'DesignValue' or 'BoundValue'
-        // so we recursively run resolution again to resolve it
-        const resolvedValue = resolveBackgroundImageBinding({
-            variableData: userSetValue,
-            getBoundEntityById,
-            dataSource,
-            unboundValues,
-            componentVariablesOverwrites,
-            componentSettings,
-        });
-        return resolvedValue || defaultValue;
-    }
-    if (variableData.type === 'BoundValue') {
-        // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
-        const [, uuid] = variableData.path.split('/');
-        const binding = dataSource[uuid];
-        const boundEntity = getBoundEntityById(binding.sys.id);
-        if (!boundEntity) {
-            return;
-        }
-        if (boundEntity.sys.type === 'Asset') {
-            return boundEntity.fields.file?.url;
-        }
-        else {
-            // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
-            // becomes
-            // '/fields/assetReference/~locale/fields/file/~locale'
-            const pathWithoutUUID = variableData.path.split(uuid)[1];
-            // '/fields/assetReference/~locale/fields/file/~locale'
-            // becomes
-            // '/fields/assetReference/'
-            const pathToReferencedAsset = pathWithoutUUID.split('~locale')[0];
-            // '/fields/assetReference/'
-            // becomes
-            // '[fields, assetReference]'
-            const [, fieldName] = pathToReferencedAsset.substring(1).split('/') ?? undefined;
-            const referenceToAsset = boundEntity.fields[fieldName];
-            if (!referenceToAsset) {
-                return;
-            }
-            if (referenceToAsset.sys?.linkType === 'Asset') {
-                const referencedAsset = getBoundEntityById(referenceToAsset.sys.id);
-                if (!referencedAsset) {
-                    return;
-                }
-                return referencedAsset.fields.file?.url;
-            }
-        }
-    }
-};
-const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unboundValues = {}, dataSource = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
-    const variableValuesByBreakpoints = breakpointIds.reduce((acc, breakpointId) => {
-        return {
-            ...acc,
-            [breakpointId]: {},
-        };
-    }, {});
-    const defaultBreakpoint = breakpointIds[0];
-    for (const [variableName, variableData] of Object.entries(variables)) {
-        // handling the special case - cfBackgroundImageUrl variable, which can be bound or unbound
-        // so, we need to resolve it here and pass it down as a css property to be convereted into the CSS
-        // I used .startsWith() cause it can be part of a pattern node
-        if (variableName === 'cfBackgroundImageUrl' ||
-            variableName.startsWith('cfBackgroundImageUrl_')) {
-            const imageUrl = resolveBackgroundImageBinding({
-                variableData,
-                getBoundEntityById,
-                unboundValues,
-                dataSource,
-                componentSettings,
-                componentVariablesOverwrites,
-            });
-            if (imageUrl) {
-                variableValuesByBreakpoints[defaultBreakpoint][variableName] = imageUrl;
-            }
-            continue;
-        }
-        if (variableData.type !== 'DesignValue') {
-            continue;
-        }
-        for (const [breakpointId, variableValue] of Object.entries(variableData.valuesByBreakpoint)) {
-            if (!variableValue) {
-                continue;
-            }
-            variableValuesByBreakpoints[breakpointId] = {
-                ...variableValuesByBreakpoints[breakpointId],
-                [variableName]: variableValue,
-            };
-        }
-    }
-    return variableValuesByBreakpoints;
-};
-/**
- * Flattens the object from
- * {
- *   color: {
- *      [key]: [value]
- *   }
- * }
- *
- * to
- *
- * {
- *  'color.key': [value]
- * }
- */
-const flattenDesignTokenRegistry = (designTokenRegistry) => {
-    return Object.entries(designTokenRegistry).reduce((acc, [categoryName, tokenCategory]) => {
-        const tokensWithCategory = Object.entries(tokenCategory).reduce((acc, [tokenName, tokenValue]) => {
-            return {
-                ...acc,
-                [`${categoryName}.${tokenName}`]: tokenValue,
-            };
-        }, {});
-        return {
-            ...acc,
-            ...tokensWithCategory,
-        };
-    }, {});
-};
-// Replaces camelCase with kebab-case
-// converts the <key, value> object into a css string
-const toCSSString = (breakpointStyles) => {
-    return Object.entries(breakpointStyles)
-        .map(([key, value]) => `${key}:${value};`)
-        .join('');
-};
-const toMediaQuery = (breakpointPayload) => {
-    const mediaQueryStyles = Object.entries(breakpointPayload.cssByClassName).reduce((acc, [className, css]) => {
-        return `${acc}.${className}{${css}}`;
-    }, ``);
-    if (breakpointPayload.condition === '*') {
-        return mediaQueryStyles;
-    }
-    const [evaluation, pixelValue] = [
-        breakpointPayload.condition[0],
-        breakpointPayload.condition.substring(1),
-    ];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function get(obj, path) {
-    if (!path.length) {
-        return obj;
-    }
-    try {
-        const [currentPath, ...nextPath] = path;
-        return get(obj[currentPath], nextPath);
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-
-const getBoundValue = (entryOrAsset, path) => {
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
-    return value && typeof value == 'object' && value.url
-        ? value.url
-        : value;
-};
-
-const transformRichText = (entryOrAsset, path) => {
-    const value = getBoundValue(entryOrAsset, path);
-    if (typeof value === 'string') {
-        return {
-            data: {},
-            content: [
-                {
-                    nodeType: BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
-                },
-            ],
-            nodeType: BLOCKS.DOCUMENT,
-        };
-    }
-    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
-        return value;
-    }
-    return undefined;
-};
-
-function getOptimizedImageUrl(url, width, quality, format) {
-    if (url.startsWith('//')) {
-        url = 'https:' + url;
-    }
-    const params = new URLSearchParams();
-    if (width) {
-        params.append('w', width.toString());
-    }
-    if (quality && quality > 0 && quality < 100) {
-        params.append('q', quality.toString());
-    }
-    if (format) {
-        params.append('fm', format);
-    }
-    const queryString = params.toString();
-    return `${url}${queryString ? '?' + queryString : ''}`;
-}
-
-function validateParams(file, quality, format) {
-    if (!file.details.image) {
-        throw Error('No image in file asset to transform');
-    }
-    if (quality < 0 || quality > 100) {
-        throw Error('Quality must be between 0 and 100');
-    }
-    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
-    }
-    return true;
-}
-
-const MAX_WIDTH_ALLOWED$1 = 2000;
-const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
-    const qualityNumber = Number(quality.replace('%', ''));
-    if (!validateParams(file, qualityNumber, format)) ;
-    if (!validateParams(file, qualityNumber, format)) ;
-    const url = file.url;
-    const { width1x, width2x } = getWidths(widthStyle, file);
-    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const optimizedBackgroundImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        file,
-    };
-    return optimizedBackgroundImageAsset;
-    function getWidths(widthStyle, file) {
-        let width1x = 0;
-        let width2x = 0;
-        const intrinsicImageWidth = file.details.image.width;
-        if (widthStyle.endsWith('px')) {
-            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
-        }
-        else {
-            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
-        }
-        width2x = Math.min(width1x * 2, intrinsicImageWidth);
-        return { width1x, width2x };
-    }
-};
-
-const MAX_WIDTH_ALLOWED = 4000;
-const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format, }) => {
-    const qualityNumber = Number(quality.replace('%', ''));
-    if (!validateParams(file, qualityNumber, format)) ;
-    const url = file.url;
-    const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
-    const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
-    const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
-    const srcSet = sizes
-        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, qualityNumber, format)} ${width}w`)
-        : [];
-    const intrinsicImageWidth = file.details.image.width;
-    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
-        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
-    }
-    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
-    const optimizedImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        sizes,
-        file,
-        loading,
-    };
-    return optimizedImageAsset;
-};
-
-const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
-    let value;
-    // If it is not a deep path and not pointing to the file of the asset,
-    // it is just pointing to a normal field and therefore we just resolve the value as normal field
-    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
-        return getBoundValue(asset, path);
-    }
-    //TODO: this will be better served by injectable type transformers instead of if statement
-    if (variableName === 'cfImageAsset') {
-        const optionsVariableName = 'cfImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
-            return;
-        }
-        try {
-            value = getOptimizedImageAsset({
-                file: asset.fields.file,
-                loading: options.loading,
-                sizes: options.targetSize,
-                quality: options.quality,
-                format: options.format,
-            });
-            return value;
-        }
-        catch (error) {
-            console.error('Error transforming image asset', error);
-        }
-        return;
-    }
-    if (variableName === 'cfBackgroundImageUrl') {
-        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
-        const optionsVariableName = 'cfBackgroundImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
-            return;
-        }
-        try {
-            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
-            return value;
-        }
-        catch (error) {
-            console.error('Error transforming image asset', error);
-        }
-        return;
-    }
-    return asset.fields.file?.url;
-};
-
-const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
-    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
-    if (!entityOrAsset)
-        return;
-    switch (variableDefinition.type) {
-        case 'Media':
-            // If we bound a normal entry field to the media veriable 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, path);
-        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;
-
-const isExperienceEntry = (entry) => {
-    return (entry?.sys?.type === 'Entry' &&
-        !!entry.fields?.title &&
-        !!entry.fields?.slug &&
-        !!entry.fields?.componentTree &&
-        Array.isArray(entry.fields.componentTree.breakpoints) &&
-        Array.isArray(entry.fields.componentTree.children) &&
-        typeof entry.fields.componentTree.schemaVersion === 'string');
-};
-
-const supportedModes = ['delivery', 'preview', 'editor'];
-
-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 getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName) => {
-    const eventuallyResolveDesignTokens = (value) => {
-        // For some built-in design propertier, 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 (valuesByBreakpoint[breakpointId]) {
-                // If the value is defined, we use it and stop the breakpoints cascade
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
-            }
-        }
-        // If no breakpoint matched, we search and apply the fallback breakpoint
-        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
-        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex].id;
-        return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
-    }
-    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],
-    };
-};
-/**
- * Detects if paths is valid deep-path, like:
- *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
- * or regular, like:
- *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
- * @returns
- */
-const isDeepPath = (deepPathCandidate) => {
-    const deepPathParsed = parseDeepPath(deepPathCandidate);
-    if (!deepPathParsed) {
-        return false;
-    }
-    return deepPathParsed.fields.length > 1;
-};
-const parseDeepPath = (deepPathCandidate) => {
-    // ALGORITHM:
-    // We start with deep path in form:
-    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
-    // First turn string into array of segments
-    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
-    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
-    //      [
-    //        [ "", "uuid123" ],
-    //        [ "fields", "mainStory", "~locale" ],
-    //        [ "fields", "cover", "~locale" ],
-    //        [ "fields", "title", "~locale" ]
-    //      ]
-    // Then check "initial" chunk for corretness
-    // Then check all "field-leading" chunks for correctness
-    const isValidInitialChunk = (initialChunk) => {
-        // must have start with '' and have at least 2 segments, second non-empty
-        // eg. /-_432uuid123123
-        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
-    };
-    const isValidFieldChunk = (fieldChunk) => {
-        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
-        // eg. fields/-32234mainStory/~locale
-        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
-    };
-    const deepPathSegments = deepPathCandidate.split('/');
-    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
-    if (chunks.length <= 1) {
-        return null; // malformed path, even regular paths have at least 2 chunks
-    }
-    else if (chunks.length === 2) {
-        return null; // deep paths have at least 3 chunks
-    }
-    // With 3+ chunks we can now check for deep path correctness
-    const [initialChunk, ...fieldChunks] = chunks;
-    if (!isValidInitialChunk(initialChunk)) {
-        return null;
-    }
-    if (!fieldChunks.every(isValidFieldChunk)) {
-        return null;
-    }
-    return {
-        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
-        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
-    };
-};
-const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
-    const chunks = [];
-    let currentChunk = [];
-    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
-    const excludeEmptyChunks = (chunk) => chunk.length > 0;
-    for (let i = 0; i < segments.length; i++) {
-        const isInitialElement = i === 0;
-        const segment = segments[i];
-        if (isInitialElement) {
-            currentChunk = [segment];
-        }
-        else if (isSegmentBeginningOfChunk(segment)) {
-            chunks.push(currentChunk);
-            currentChunk = [segment];
-        }
-        else {
-            currentChunk.push(segment);
-        }
-    }
-    chunks.push(currentChunk);
-    return chunks.filter(excludeEmptyChunks);
-};
-const lastPathNamedSegmentEq = (path, expectedName) => {
-    // `/key123/fields/featureImage/~locale/fields/file/~locale`
-    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
-    const segments = path.split('/');
-    if (segments.length < 2) {
-        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
-        return false;
-    }
-    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
-    return secondLast === expectedName;
-};
-
-const resolveHyperlinkPattern = (pattern, entry, locale) => {
-    if (!entry || !locale)
-        return null;
-    const variables = {
-        entry,
-        locale,
-    };
-    return buildTemplate({ template: pattern, context: variables });
-};
-function getValue(obj, path) {
-    return path
-        .replace(/\[/g, '.')
-        .replace(/\]/g, '')
-        .split('.')
-        .reduce((o, k) => (o || {})[k], obj);
-}
-function addLocale(str, locale) {
-    const fieldsIndicator = 'fields';
-    const fieldsIndex = str.indexOf(fieldsIndicator);
-    if (fieldsIndex !== -1) {
-        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
-        if (dotIndex !== -1) {
-            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
-        }
-    }
-    return str;
-}
-function getTemplateValue(ctx, path) {
-    const pathWithLocale = addLocale(path, ctx.locale);
-    const retrievedValue = getValue(ctx, pathWithLocale);
-    return typeof retrievedValue === 'object' && retrievedValue !== null
-        ? retrievedValue[ctx.locale]
-        : retrievedValue;
-}
-function buildTemplate({ template, context, }) {
-    const localeVariable = /{\s*locale\s*}/g;
-    // e.g. "{ page.sys.id }"
-    const variables = /{\s*([\S]+?)\s*}/g;
-    return (template
-        // first replace the locale pattern
-        .replace(localeVariable, context.locale)
-        // then resolve the remaining variables
-        .replace(variables, (_, path) => {
-        const fallback = path + '_NOT_FOUND';
-        const value = getTemplateValue(context, path) ?? fallback;
-        // using _.result didn't gave proper results so we run our own version of it
-        return String(typeof value === 'function' ? value() : value);
-    }));
-}
-
-const sendMessage = (eventType, data) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    console.debug(`[experiences-sdk-react::sendMessage] Sending message [${eventType}]`, {
-        source: 'customer-app',
-        eventType,
-        payload: data,
-    });
-    window.parent?.postMessage({
-        source: 'customer-app',
-        eventType,
-        payload: data,
-    }, '*');
-};
-
-/**
- * Base Store for entities
- * Can be extended for the different loading behaviours (editor, production, ..)
- */
-class EntityStoreBase {
-    constructor({ entities, locale }) {
-        this.entryMap = new Map();
-        this.assetMap = new Map();
-        this.locale = locale;
-        for (const entity of entities) {
-            this.addEntity(entity);
-        }
-    }
-    get entities() {
-        return [...this.entryMap.values(), ...this.assetMap.values()];
-    }
-    updateEntity(entity) {
-        this.addEntity(entity);
-    }
-    getEntryOrAsset(linkOrEntryOrAsset, path) {
-        if (isDeepPath(path)) {
-            return this.getDeepEntry(linkOrEntryOrAsset, path);
-        }
-        let entity;
-        if (isLink(linkOrEntryOrAsset)) {
-            const resolvedEntity = linkOrEntryOrAsset.sys.linkType === 'Entry'
-                ? this.entryMap.get(linkOrEntryOrAsset.sys.id)
-                : this.assetMap.get(linkOrEntryOrAsset.sys.id);
-            if (!resolvedEntity || resolvedEntity.sys.type !== linkOrEntryOrAsset.sys.linkType) {
-                console.warn(`Experience references unresolved entity: ${JSON.stringify(linkOrEntryOrAsset)}`);
-                return;
-            }
-            entity = resolvedEntity;
-        }
-        else {
-            // We already have the complete entity in preview & delivery (resolved by the CMA client)
-            entity = linkOrEntryOrAsset;
-        }
-        return entity;
-    }
-    /**
-     * @deprecated in the base class this should be simply an abstract method
-     * @param entityLink
-     * @param path
-     * @returns
-     */
-    getValue(entityLink, path) {
-        const entity = this.getEntity(entityLink.sys.linkType, entityLink.sys.id);
-        if (!entity) {
-            // TODO: move to `debug` utils once it is extracted
-            console.warn(`Unresolved entity reference: ${entityLink.sys.linkType} with ID ${entityLink.sys.id}`);
-            return;
-        }
-        return get(entity, path);
-    }
-    getEntityFromLink(link) {
-        const resolvedEntity = link.sys.linkType === 'Entry'
-            ? this.entryMap.get(link.sys.id)
-            : this.assetMap.get(link.sys.id);
-        if (!resolvedEntity || resolvedEntity.sys.type !== link.sys.linkType) {
-            console.warn(`Experience references unresolved entity: ${JSON.stringify(link)}`);
-            return;
-        }
-        return resolvedEntity;
-    }
-    getEntitiesFromMap(type, ids) {
-        const resolved = [];
-        const missing = [];
-        for (const id of ids) {
-            const entity = this.getEntity(type, id);
-            if (entity) {
-                resolved.push(entity);
-            }
-            else {
-                missing.push(id);
-            }
-        }
-        return {
-            resolved,
-            missing,
-        };
-    }
-    addEntity(entity) {
-        if (this.isAsset(entity)) {
-            this.assetMap.set(entity.sys.id, entity);
-        }
-        else {
-            this.entryMap.set(entity.sys.id, entity);
-        }
-    }
-    async fetchAsset(id) {
-        const { resolved, missing } = this.getEntitiesFromMap('Asset', [id]);
-        if (missing.length) {
-            // TODO: move to `debug` utils once it is extracted
-            console.warn(`Asset "${id}" is not in the store`);
-            return;
-        }
-        return resolved[0];
-    }
-    async fetchAssets(ids) {
-        const { resolved, missing } = this.getEntitiesFromMap('Asset', ids);
-        if (missing.length) {
-            throw new Error(`Missing assets in the store (${missing.join(',')})`);
-        }
-        return resolved;
-    }
-    async fetchEntry(id) {
-        const { resolved, missing } = this.getEntitiesFromMap('Entry', [id]);
-        if (missing.length) {
-            // TODO: move to `debug` utils once it is extracted
-            console.warn(`Entry "${id}" is not in the store`);
-            return;
-        }
-        return resolved[0];
-    }
-    async fetchEntries(ids) {
-        const { resolved, missing } = this.getEntitiesFromMap('Entry', ids);
-        if (missing.length) {
-            throw new Error(`Missing assets in the store (${missing.join(',')})`);
-        }
-        return resolved;
-    }
-    getDeepEntry(linkOrEntryOrAsset, path) {
-        const resolveFieldset = (unresolvedFieldset, headEntry) => {
-            const resolvedFieldset = [];
-            let entityToResolveFieldsFrom = headEntry;
-            for (let i = 0; i < unresolvedFieldset.length; i++) {
-                const isLeaf = i === unresolvedFieldset.length - 1; // with last row, we are not expecting a link, but a value
-                const row = unresolvedFieldset[i];
-                const [, field, _localeQualifier] = row;
-                if (!entityToResolveFieldsFrom) {
-                    throw new Error(`Logic Error: Cannot resolve field ${field} of a fieldset as there is no entity to resolve it from.`);
-                }
-                if (isLeaf) {
-                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
-                    break;
-                }
-                const fieldValue = get(entityToResolveFieldsFrom, ['fields', field]);
-                if (undefined === fieldValue) {
-                    return {
-                        resolvedFieldset,
-                        isFullyResolved: false,
-                        reason: `Cannot resolve field Link<${entityToResolveFieldsFrom.sys.type}>(sys.id=${entityToResolveFieldsFrom.sys.id}).fields[${field}] as field value is not defined`,
-                    };
-                }
-                else if (isLink(fieldValue)) {
-                    const entity = this.getEntityFromLink(fieldValue);
-                    if (entity === undefined) {
-                        return {
-                            resolvedFieldset,
-                            isFullyResolved: false,
-                            reason: `Field reference Link (sys.id=${fieldValue.sys.id}) not found in the EntityStore, waiting...`,
-                        };
-                    }
-                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
-                    entityToResolveFieldsFrom = entity; // we move up
-                }
-                else {
-                    // TODO: Eg. when someone changed the schema and the field is not a link anymore, what should we return then?
-                    throw new Error(`LogicError: Invalid value of a field we consider a reference field. Cannot resolve field ${field} of a fieldset as it is not a link, neither undefined.`);
-                }
-            }
-            return {
-                resolvedFieldset,
-                isFullyResolved: true,
-            };
-        };
-        const headEntity = isLink(linkOrEntryOrAsset)
-            ? this.getEntityFromLink(linkOrEntryOrAsset)
-            : linkOrEntryOrAsset;
-        if (undefined === headEntity) {
-            return;
-        }
-        const unresolvedFieldset = parseDataSourcePathIntoFieldset(path);
-        // The purpose here is to take this intermediate representation of the deep-path
-        // and to follow the links to the leaf-entity and field
-        // in case we can't follow till the end, we should signal that there was null-reference in the path
-        const { resolvedFieldset, isFullyResolved, reason } = resolveFieldset(unresolvedFieldset, headEntity);
-        if (!isFullyResolved) {
-            reason &&
-                console.debug(`[exp-builder.sdk::EntityStoreBased::getValueDeep()] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
-            return;
-        }
-        const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
-        return leafEntity;
-    }
-    isAsset(entity) {
-        return entity.sys.type === 'Asset';
-    }
-    getEntity(type, id) {
-        if (type === 'Asset') {
-            return this.assetMap.get(id);
-        }
-        return this.entryMap.get(id);
-    }
-    toJSON() {
-        return {
-            entryMap: Object.fromEntries(this.entryMap),
-            assetMap: Object.fromEntries(this.assetMap),
-            locale: this.locale,
-        };
-    }
-}
-
-/**
- * EntityStore which resolves entries and assets from the editor
- * over the sendMessage and subscribe functions.
- */
-class EditorEntityStore extends EntityStoreBase {
-    constructor({ entities, locale, sendMessage, subscribe, timeoutDuration = 3000, }) {
-        super({ entities, locale });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.requestCache = new Map();
-        this.cacheIdSeperator = ',';
-        this.sendMessage = sendMessage;
-        this.subscribe = subscribe;
-        this.timeoutDuration = timeoutDuration;
-    }
-    cleanupPromise(referenceId) {
-        setTimeout(() => {
-            this.requestCache.delete(referenceId);
-        }, 300);
-    }
-    getCacheId(id) {
-        return id.length === 1 ? id[0] : id.join(this.cacheIdSeperator);
-    }
-    async fetchEntity(type, ids, skipCache = false) {
-        let missing;
-        if (!skipCache) {
-            const { missing: missingFromCache, resolved } = this.getEntitiesFromMap(type, ids);
-            if (missingFromCache.length === 0) {
-                // everything is already in cache
-                return resolved;
-            }
-            missing = missingFromCache;
-        }
-        else {
-            missing = [...ids];
-        }
-        const cacheId = this.getCacheId(missing);
-        const openRequest = this.requestCache.get(cacheId);
-        if (openRequest) {
-            return openRequest;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const newPromise = new Promise((resolve, reject) => {
-            const unsubscribe = this.subscribe(PostMessageMethods.REQUESTED_ENTITIES, (message) => {
-                const messageIds = [
-                    ...message.entities.map((entity) => entity.sys.id),
-                    ...(message.missingEntityIds ?? []),
-                ];
-                if (missing.every((id) => messageIds.find((entityId) => entityId === id))) {
-                    clearTimeout(timeout);
-                    resolve(message.entities);
-                    this.cleanupPromise(cacheId);
-                    ids.forEach((id) => this.cleanupPromise(id));
-                    unsubscribe();
-                }
-                else {
-                    console.warn('Unexpected entities received in REQUESTED_ENTITIES. Ignoring this response.');
-                }
-            });
-            const timeout = setTimeout(() => {
-                reject(new Error(`Request for entities timed out ${this.timeoutDuration}ms} for ${cacheId}`));
-                this.cleanupPromise(cacheId);
-                ids.forEach((id) => this.cleanupPromise(id));
-                unsubscribe();
-            }, this.timeoutDuration);
-            this.sendMessage(PostMessageMethods.REQUEST_ENTITIES, {
-                entityIds: missing,
-                entityType: type,
-                locale: this.locale,
-            });
-        });
-        this.requestCache.set(cacheId, newPromise);
-        ids.forEach((cid) => {
-            this.requestCache.set(cid, newPromise);
-        });
-        const result = (await newPromise);
-        result.forEach((value) => {
-            this.addEntity(value);
-        });
-        return this.getEntitiesFromMap(type, ids).resolved;
-    }
-    async fetchAsset(id, skipCache = false) {
-        try {
-            return (await this.fetchAssets([id], skipCache))[0];
-        }
-        catch (err) {
-            // TODO: move to debug utils once it is extracted
-            console.warn(`Failed to request asset ${id}`);
-            return undefined;
-        }
-    }
-    fetchAssets(ids, skipCache = false) {
-        return this.fetchEntity('Asset', ids, skipCache);
-    }
-    async fetchEntry(id, skipCache = false) {
-        try {
-            return (await this.fetchEntries([id], skipCache))[0];
-        }
-        catch (err) {
-            // TODO: move to debug utils once it is extracted
-            console.warn(`Failed to request entry ${id}`, err);
-            return undefined;
-        }
-    }
-    fetchEntries(ids, skipCache = false) {
-        return this.fetchEntity('Entry', ids, skipCache);
-    }
-}
-
-function transformAssetFileToUrl(fieldValue) {
-    return fieldValue && typeof fieldValue == 'object' && fieldValue.url
-        ? fieldValue.url
-        : fieldValue;
-}
-
-// The default of 3s in the EditorEntityStore is sometimes timing out and
-// leads to not rendering bound content and assemblies.
-const REQUEST_TIMEOUT = 10000;
-class EditorModeEntityStore extends EditorEntityStore {
-    constructor({ entities, locale }) {
-        console.debug(`[experiences-sdk-react] Initializing editor entity store with ${entities.length} entities for locale ${locale}.`, { entities });
-        const subscribe = (method, cb) => {
-            const handleMessage = (event) => {
-                const data = JSON.parse(event.data);
-                if (typeof data !== 'object' || !data)
-                    return;
-                if (data.source !== 'composability-app')
-                    return;
-                if (data.eventType === method) {
-                    cb(data.payload);
-                }
-            };
-            if (typeof window !== 'undefined') {
-                window.addEventListener('message', handleMessage);
-            }
-            return () => {
-                if (typeof window !== 'undefined') {
-                    window.removeEventListener('message', handleMessage);
-                }
-            };
-        };
-        super({ entities, sendMessage, subscribe, locale, timeoutDuration: REQUEST_TIMEOUT });
-        this.locale = locale;
-    }
-    /**
-     * This function collects and returns the list of requested entries and assets. Additionally, it checks
-     * upfront whether any async fetching logic is actually happening. If not, it returns a plain `false` value, so we
-     * can detect this early and avoid unnecessary re-renders.
-     * @param entityLinks
-     * @returns false if no async fetching is happening, otherwise a promise that resolves when all entities are fetched
-     */
-    async fetchEntities({ missingEntryIds, missingAssetIds, skipCache = false, }) {
-        // Entries and assets will be stored in entryMap and assetMap
-        await Promise.all([
-            this.fetchEntries(missingEntryIds, skipCache),
-            this.fetchAssets(missingAssetIds, skipCache),
-        ]);
-    }
-    getMissingEntityIds(entityLinks) {
-        const entryLinks = entityLinks.filter((link) => link.sys?.linkType === 'Entry');
-        const assetLinks = entityLinks.filter((link) => link.sys?.linkType === 'Asset');
-        const uniqueEntryIds = [...new Set(entryLinks.map((link) => link.sys.id))];
-        const uniqueAssetIds = [...new Set(assetLinks.map((link) => link.sys.id))];
-        const { missing: missingEntryIds } = this.getEntitiesFromMap('Entry', uniqueEntryIds);
-        const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
-        return { missingEntryIds, missingAssetIds };
-    }
-    getValue(entityLinkOrEntity, path) {
-        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
-        if (!entity) {
-            return;
-        }
-        const fieldValue = get(entity, path);
-        // walk around to render asset files
-        return fieldValue && typeof fieldValue == 'object' && fieldValue.url
-            ? fieldValue.url
-            : fieldValue;
-    }
-}
-
-class EntityStore extends EntityStoreBase {
-    constructor(options) {
-        if (typeof options === 'string') {
-            const data = JSON.parse(options);
-            const { _experienceEntry, _unboundValues, locale, entryMap, assetMap } = data.entityStore;
-            super({
-                entities: [
-                    ...Object.values(entryMap),
-                    ...Object.values(assetMap),
-                ],
-                locale,
-            });
-            this._experienceEntry = _experienceEntry;
-            this._unboundValues = _unboundValues;
-        }
-        else {
-            const { experienceEntry, entities, locale } = options;
-            super({ entities, locale });
-            if (isExperienceEntry(experienceEntry)) {
-                this._experienceEntry = experienceEntry.fields;
-                this._unboundValues = experienceEntry.fields.unboundValues;
-            }
-            else {
-                throw new Error('Provided entry is not experience entry');
-            }
-        }
-    }
-    getCurrentLocale() {
-        return this.locale;
-    }
-    get experienceEntryFields() {
-        return this._experienceEntry;
-    }
-    get schemaVersion() {
-        return this._experienceEntry?.componentTree.schemaVersion;
-    }
-    get breakpoints() {
-        return this._experienceEntry?.componentTree.breakpoints ?? [];
-    }
-    get dataSource() {
-        return this._experienceEntry?.dataSource ?? {};
-    }
-    get unboundValues() {
-        return this._unboundValues ?? {};
-    }
-    get usedComponents() {
-        return this._experienceEntry?.usedComponents ?? [];
-    }
-    /**
-     * Extend the existing set of unbound values with the ones from the assembly definition.
-     * When creating a new assembly out of a container, the unbound value keys are copied and
-     * thus the existing and the added ones have colliding keys. In the case of overlapping value
-     * keys, the ones from the experience overrule the ones from the assembly definition as
-     * the latter one is certainly just a default value while the other one is from the actual instance.
-     * @param unboundValues set of unbound values defined in the assembly definition
-     */
-    addAssemblyUnboundValues(unboundValues) {
-        this._unboundValues = { ...unboundValues, ...(this._unboundValues ?? {}) };
-    }
-    getValue(entityLinkOrEntity, path) {
-        const entity = isLink(entityLinkOrEntity)
-            ? this.getEntityFromLink(entityLinkOrEntity)
-            : entityLinkOrEntity;
-        if (entity === undefined) {
-            return;
-        }
-        const fieldValue = get(entity, path);
-        return transformAssetFileToUrl(fieldValue);
-    }
-    toJSON() {
-        return {
-            _experienceEntry: this._experienceEntry,
-            _unboundValues: this._unboundValues,
-            ...super.toJSON(),
-        };
-    }
-}
-
-var VisualEditorMode;
-(function (VisualEditorMode) {
-    VisualEditorMode["LazyLoad"] = "lazyLoad";
-    VisualEditorMode["InjectScript"] = "injectScript";
-})(VisualEditorMode || (VisualEditorMode = {}));
-
-function createExperience(options) {
-    if (typeof options === 'string') {
-        const entityStore = new EntityStore(options);
-        return {
-            entityStore,
-        };
-    }
-    else {
-        const { experienceEntry, referencedAssets, referencedEntries, locale } = options;
-        if (!isExperienceEntry(experienceEntry)) {
-            throw new Error('Provided entry is not experience entry');
-        }
-        const entityStore = new EntityStore({
-            experienceEntry,
-            entities: [...referencedEntries, ...referencedAssets],
-            locale,
-        });
-        return {
-            entityStore,
-        };
-    }
-}
-
-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) {
-        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 entries = await client.getEntries({
-        content_type: experienceTypeId,
-        locale,
-        ...filter,
-    });
-    if (entries.items.length > 1) {
-        throw new Error(`More than one experience with identifier: ${JSON.stringify(identifier)} was found`);
-    }
-    return entries.items[0];
-};
-
-function treeVisit(initialNode, onNode) {
-    // returns last used index
-    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
-        // Copy children in case of onNode removing it as we pass the node by reference
-        const children = [...currentNode.children];
-        onNode(currentNode, currentIndex, currentDepth);
-        let nextAvailableIndex = currentIndex + 1;
-        const lastUsedIndex = currentIndex;
-        for (const child of children) {
-            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
-            nextAvailableIndex = lastUsedIndex + 1;
-        }
-        return lastUsedIndex;
-    };
-    _treeVisit(initialNode, 0, 0);
-}
-
-class DeepReference {
-    constructor({ path, dataSource }) {
-        const { key, field, referentField } = parseDataSourcePathWithL1DeepBindings(path);
-        this.originalPath = path;
-        this.entityId = dataSource[key].sys.id;
-        this.entityLink = dataSource[key];
-        this.field = field;
-        this.referentField = referentField;
-    }
-    get headEntityId() {
-        return this.entityId;
-    }
-    /**
-     * Extracts referent from the path, using EntityStore as source of
-     * entities during the resolution path.
-     */
-    extractReferent(entityStore) {
-        const headEntity = entityStore.getEntityFromLink(this.entityLink);
-        const maybeReferentLink = headEntity?.fields[this.field];
-        if (undefined === maybeReferentLink) {
-            // field references nothing (or even field doesn't exist)
-            return undefined;
-        }
-        if (!isLink(maybeReferentLink)) {
-            // Scenario of "impostor referent", where one of the deepPath's segments is not a Link but some other type
-            // Under normal circumstance we expect field to be a Link, but it could be an "impostor"
-            // eg. `Text` or `Number` or anything like that; could be due to CT changes or manual path creation via CMA
-            return undefined;
-        }
-        return maybeReferentLink;
-    }
-    static from(opt) {
-        return new DeepReference(opt);
-    }
-}
-function gatherDeepReferencesFromExperienceEntry(experienceEntry) {
-    const deepReferences = [];
-    const dataSource = experienceEntry.fields.dataSource;
-    const { children } = experienceEntry.fields.componentTree;
-    treeVisit({
-        definitionId: 'root',
-        variables: {},
-        children,
-    }, (node) => {
-        if (!node.variables)
-            return;
-        for (const [, variableMapping] of Object.entries(node.variables)) {
-            if (variableMapping.type !== 'BoundValue')
-                continue;
-            if (!isDeepPath(variableMapping.path))
-                continue;
-            deepReferences.push(DeepReference.from({
-                path: variableMapping.path,
-                dataSource,
-            }));
-        }
-    });
-    return deepReferences;
-}
-function gatherDeepReferencesFromTree(startingNode, dataSource) {
-    const deepReferences = [];
-    treeVisit(startingNode, (node) => {
-        if (!node.data.props)
-            return;
-        for (const [, variableMapping] of Object.entries(node.data.props)) {
-            if (variableMapping.type !== 'BoundValue')
-                continue;
-            if (!isDeepPath(variableMapping.path))
-                continue;
-            deepReferences.push(DeepReference.from({
-                path: variableMapping.path,
-                dataSource,
-            }));
-        }
-    });
-    return deepReferences;
-}
-
-/**
- * Traverses deep-references and extracts referents from valid deep-paths.
- * The referents are received from the CDA/CPA response `.includes` field.
- *
- * In case deep-paths not resolving till the end, eg.:
- *  - non-link referents: are ignored
- *  - unset references:   are ignored
- *
- * Errors are thrown in case of deep-paths being correct,
- * but referents not found. Because if we don't throw now, the EntityStore will
- * be missing entities and upon rendering will not be able to render bindings.
- */
-function gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse) {
-    const autoFetchedReferentEntries = [];
-    const autoFetchedReferentAssets = [];
-    for (const reference of deepReferences) {
-        const headEntry = entriesResponse.items.find((entry) => entry.sys.id === reference.headEntityId);
-        if (!headEntry) {
-            console.debug(`[experiences-sdk-core::fetchers] When resolving deep-references could not find headEntry with id '${reference.entityId}'`);
-            continue;
-        }
-        const linkToReferent = headEntry.fields[reference.field];
-        if (undefined === linkToReferent) {
-            console.debug(`[experiences-sdk-core::fetchers] Empty reference in headEntity. Probably reference is simply not set.`);
-            continue;
-        }
-        if (!isLink(linkToReferent)) {
-            console.debug(`[experiences-sdk-core::fetchers] Non-link value in headEntity. Probably broken path '${reference.originalPath}'`);
-            continue;
-        }
-        const linkType = linkToReferent.sys.linkType;
-        if (!['Entry', 'Asset'].includes(linkType)) {
-            console.debug(`[experiences-sdk-core::fetchers] Unhandled linkType :${JSON.stringify(linkToReferent)}`);
-            continue;
-        }
-        const referentEntity = entriesResponse.includes?.[linkType]?.find((entity) => entity.sys.id === linkToReferent.sys.id);
-        if (!referentEntity) {
-            console.debug(`[experiences-sdk-core::fetchers] L2-referent ${linkType} was not found within .includes (${JSON.stringify({
-                linkToReferent,
-            })})`);
-            continue;
-        }
-        linkType === 'Entry'
-            ? autoFetchedReferentEntries.push(referentEntity)
-            : autoFetchedReferentAssets.push(referentEntity);
-    } // for (reference of deepReferences)
-    return { autoFetchedReferentAssets, autoFetchedReferentEntries };
-}
-
-const MIN_FETCH_LIMIT = 1;
-const fetchAllEntries = async ({ client, ids, locale, skip = 0, limit = 100, responseItems = [], responseIncludes = { Entry: [], Asset: [] }, }) => {
-    try {
-        if (!client) {
-            throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
-        }
-        if (!ids.length) {
-            return {
-                items: [],
-                includes: {
-                    Entry: [],
-                    Asset: [],
-                },
-            };
-        }
-        const query = { 'sys.id[in]': ids, locale, limit, skip };
-        const { items, includes, total: responseTotal, } = await client.withoutLinkResolution.getEntries({ ...query });
-        responseItems.push(...items);
-        responseIncludes?.Entry?.push(...(includes?.Entry || []));
-        responseIncludes?.Asset?.push(...(includes?.Asset || []));
-        // E.g Total entries = 99
-        // First fetch => { skip: 0, limit: 50, total: 99 } => 50 Entries fetched in Page 0
-        // Total Entries fetched = 50, 49 remaining
-        // 0(skip) + 50(limit) < 99(total) => Fetch again
-        // Second fetch => { skip: 50, limit: 50, total: 99 } => 49 Entries fetched in Page 1
-        // Total Entries fetched = 50(Page 0) + 49(Page 1) = 99, 0 remaining
-        // 50(skip) + 50(limit) > 99(total) => Stop fetching
-        if (skip + limit < responseTotal) {
-            return await fetchAllEntries({
-                client,
-                ids,
-                locale,
-                skip: skip + limit,
-                limit,
-                responseItems,
-                responseIncludes,
-            });
-        }
-        const dedupedEntries = uniqBy(responseIncludes?.Entry, (entry) => entry.sys.id);
-        const dedupedAssets = uniqBy(responseIncludes?.Asset, (asset) => asset.sys.id);
-        return {
-            items: responseItems,
-            includes: {
-                Entry: dedupedEntries,
-                Asset: dedupedAssets,
-            },
-        };
-    }
-    catch (error) {
-        if (error instanceof Error &&
-            error.message.includes('size too big') &&
-            limit > MIN_FETCH_LIMIT) {
-            const newLimit = Math.max(MIN_FETCH_LIMIT, Math.floor(limit / 2));
-            return fetchAllEntries({
-                client,
-                ids,
-                locale,
-                skip,
-                limit: newLimit,
-                responseItems,
-            });
-        }
-        throw error;
-    }
-};
-const fetchAllAssets = async ({ client, ids, locale, skip = 0, limit = 100, responseItems = [], }) => {
-    try {
-        if (!client) {
-            throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
-        }
-        if (!ids.length) {
-            return { items: [] };
-        }
-        const query = { 'sys.id[in]': ids, locale, limit, skip };
-        const { items, total: responseTotal } = await client.getAssets({ ...query });
-        responseItems.push(...items);
-        if (skip + limit < responseTotal) {
-            return await fetchAllAssets({
-                client,
-                ids,
-                locale,
-                skip: skip + limit,
-                limit,
-                responseItems,
-            });
-        }
-        return {
-            items: responseItems,
-        };
-    }
-    catch (error) {
-        if (error instanceof Error &&
-            error.message.includes('size too big') &&
-            limit > MIN_FETCH_LIMIT) {
-            const newLimit = Math.max(MIN_FETCH_LIMIT, Math.floor(limit / 2));
-            return fetchAllAssets({
-                client,
-                ids,
-                locale,
-                skip,
-                limit: newLimit,
-                responseItems,
-            });
-        }
-        throw error;
-    }
-};
-
-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');
-    }
-    const deepReferences = gatherDeepReferencesFromExperienceEntry(experienceEntry);
-    const entryIds = [];
-    const assetIds = [];
-    for (const dataBinding of Object.values(experienceEntry.fields.dataSource)) {
-        if (!('sys' in dataBinding)) {
-            continue;
-        }
-        if (dataBinding.sys.linkType === 'Entry') {
-            entryIds.push(dataBinding.sys.id);
-        }
-        if (dataBinding.sys.linkType === 'Asset') {
-            assetIds.push(dataBinding.sys.id);
-        }
-    }
-    const [entriesResponse, assetsResponse] = await Promise.all([
-        fetchAllEntries({ client, ids: entryIds, locale }),
-        fetchAllAssets({ client, ids: assetIds, locale }),
-    ]);
-    const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
-    // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
-    const allResolvedEntries = [
-        ...(entriesResponse?.items ?? []),
-        ...(experienceEntry.fields.usedComponents || []),
-        ...autoFetchedReferentEntries,
-    ];
-    const allResolvedAssets = [
-        ...(assetsResponse.items ?? []),
-        ...autoFetchedReferentAssets,
-    ];
-    return {
-        entries: allResolvedEntries,
-        assets: allResolvedAssets,
-    };
-};
-
-const errorMessagesWhileFetching$1 = {
-    experience: 'Failed to fetch experience',
-    experienceReferences: 'Failed to fetch entities, referenced in experience',
-};
-const handleError$1 = (generalMessage, error) => {
-    const message = error instanceof Error ? error.message : `Unknown error: ${error}`;
-    throw Error(message);
-};
-/**
- * Fetch experience entry using slug as the identifier
- * @param {string} experienceTypeId - id of the content type associated with the experience
- * @param {string} slug - slug of the experience (defined in entry settings)
- * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
- */
-//  Promise<Experience<EntityStore> | undefined> =>
-async function fetchBySlug({ client, experienceTypeId, slug, localeCode, }) {
-    let experienceEntry = undefined;
-    try {
-        experienceEntry = await fetchExperienceEntry({
-            client,
-            experienceTypeId,
-            locale: localeCode,
-            identifier: {
-                slug,
-            },
-        });
-        if (!experienceEntry) {
-            throw new Error(`No experience entry with slug: ${slug} exists`);
-        }
-        try {
-            const { entries, assets } = await fetchReferencedEntities({
-                client,
-                experienceEntry,
-                locale: localeCode,
-            });
-            const experience = createExperience({
-                experienceEntry,
-                referencedAssets: assets,
-                referencedEntries: entries,
-                locale: localeCode,
-            });
-            return experience;
-        }
-        catch (error) {
-            handleError$1(errorMessagesWhileFetching$1.experienceReferences, error);
-        }
-    }
-    catch (error) {
-        handleError$1(errorMessagesWhileFetching$1.experience, error);
-    }
-}
-
-const errorMessagesWhileFetching = {
-    experience: 'Failed to fetch experience',
-    experienceReferences: 'Failed to fetch entities, referenced in experience',
-};
-const handleError = (generalMessage, error) => {
-    const message = error instanceof Error ? error.message : `Unknown error: ${error}`;
-    throw Error(message);
-};
-/**
- * Fetch experience entry using slug as the identifier
- * @param {string} experienceTypeId - id of the content type associated with the experience
- * @param {string} slug - slug of the experience (defined in entry settings)
- * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
- */
-async function fetchById({ client, experienceTypeId, id, localeCode, }) {
-    let experienceEntry = undefined;
-    try {
-        experienceEntry = await fetchExperienceEntry({
-            client,
-            experienceTypeId,
-            locale: localeCode,
-            identifier: {
-                id,
-            },
-        });
-        if (!experienceEntry) {
-            throw new Error(`No experience entry with id: ${id} exists`);
-        }
-        try {
-            const { entries, assets } = await fetchReferencedEntities({
-                client,
-                experienceEntry,
-                locale: localeCode,
-            });
-            const experience = createExperience({
-                experienceEntry,
-                referencedAssets: assets,
-                referencedEntries: entries,
-                locale: localeCode,
-            });
-            return experience;
-        }
-        catch (error) {
-            handleError(errorMessagesWhileFetching.experienceReferences, error);
-        }
-    }
-    catch (error) {
-        handleError(errorMessagesWhileFetching.experience, error);
-    }
-}
-
-export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, columnsDefinition, containerBuiltInStyles, containerDefinition, createExperience, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, dividerBuiltInStyles, dividerDefinition, doesMismatchMessageSchema, fetchById, fetchBySlug, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isStructureWithRelativeHeight, lastPathNamedSegmentEq, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sectionBuiltInStyles, sectionDefinition, sendMessage, singleColumnBuiltInStyles, singleColumnDefinition, supportedModes, toCSSAttribute, toCSSString, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
-//# sourceMappingURL=index.js.map