@contentful/experiences-core 1.7.1 → 1.7.2-dev-20240613T1745-9217fd8.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import md5 from 'md5';
-import { BLOCKS } from '@contentful/rich-text-types';
 import { z, ZodIssueCode } from 'zod';
+import { BLOCKS } from '@contentful/rich-text-types';
 import { uniqBy } from 'lodash-es';
 
 const INCOMING_EVENTS = {
@@ -65,6 +65,43 @@ const CONTENTFUL_COMPONENTS = {
     },
 };
 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;
@@ -360,485 +397,178 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     return EMPTY_CONTAINER_HEIGHT;
 };
 
-// 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: [
+// These styles get added to every component, user custom or contentful provided
+const builtInStyles = {
+    cfVerticalAlignment: {
+        validations: {
+            in: [
                 {
-                    nodeType: BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
+                    value: 'start',
+                    displayName: 'Align left',
+                },
+                {
+                    value: 'center',
+                    displayName: 'Align center',
+                },
+                {
+                    value: 'end',
+                    displayName: 'Align right',
                 },
             ],
-            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 };
-    }
+        },
+        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 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'];
-
-// These styles get added to every component, user custom or contentful provided
-const builtInStyles = {
-    cfVerticalAlignment: {
-        validations: {
-            in: [
-                {
-                    value: 'start',
-                    displayName: 'Align left',
-                },
-                {
-                    value: 'center',
-                    displayName: 'Align center',
-                },
-                {
-                    value: 'end',
-                    displayName: 'Align right',
-                },
-            ],
-        },
+const optionalBuiltInStyles = {
+    cfFontSize: {
+        displayName: 'Font Size',
         type: 'Text',
         group: 'style',
-        description: 'The horizontal alignment of the section',
-        defaultValue: 'center',
-        displayName: 'Vertical alignment',
+        description: 'The font size of the element',
+        defaultValue: '16px',
     },
-    cfHorizontalAlignment: {
+    cfFontWeight: {
         validations: {
             in: [
                 {
-                    value: 'start',
-                    displayName: 'Align top',
+                    value: '400',
+                    displayName: 'Normal',
                 },
                 {
-                    value: 'center',
-                    displayName: 'Align center',
+                    value: '500',
+                    displayName: 'Medium',
                 },
                 {
-                    value: 'end',
-                    displayName: 'Align bottom',
+                    value: '600',
+                    displayName: 'Semi Bold',
                 },
             ],
         },
+        displayName: 'Font Weight',
         type: 'Text',
         group: 'style',
-        description: 'The horizontal alignment of the section',
-        defaultValue: 'center',
-        displayName: 'Horizontal alignment',
+        description: 'The font weight of the element',
+        defaultValue: '400',
     },
-    cfMargin: {
-        displayName: 'Margin',
-        type: 'Text',
-        group: 'style',
-        description: 'The margin of the section',
-        defaultValue: '0 0 0 0',
+    cfImageAsset: {
+        displayName: 'Image',
+        type: 'Media',
+        description: 'Image to display',
     },
-    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',
+    cfImageOptions: {
+        displayName: 'Image options',
+        type: 'Object',
         group: 'style',
         defaultValue: {
             width: DEFAULT_IMAGE_WIDTH,
@@ -1189,6 +919,54 @@ const columnsBuiltInStyles = {
     },
 };
 
+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.
@@ -1538,79 +1316,833 @@ const convertTooBig = (issue) => {
         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 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 defaultConversion = (issue) => {
+
+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 {
-        details: issue.message || 'An unexpected error occurred',
-        name: CodeNames.Custom,
-        path: issue.path.map(String),
+        dataSource,
+        unboundValues,
     };
 };
-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);
+/**
+ * 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,
+        };
     }
-};
-const validateBreakpointsDefinition = (breakpoints) => {
-    const result = z
-        .array(BreakpointSchema)
-        .superRefine(breakpointsRefinement)
-        .safeParse(breakpoints);
-    if (!result.success) {
+    // 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 {
-            success: false,
-            errors: result.error.issues.map(zodToContentfulError),
+            // 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,
         };
     }
-    return { success: true };
 };
-
-let breakpointsRegistry = [];
-/**
- * Register custom breakpoints
- * @param breakpoints - [{[key:string]: string}]
- * @returns void
- */
-const defineBreakpoints = (breakpoints) => {
-    Object.assign(breakpointsRegistry, breakpoints);
+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 runBreakpointsValidation = () => {
-    if (!breakpointsRegistry.length)
-        return;
-    const validation = validateBreakpointsDefinition(breakpointsRegistry);
-    if (!validation.success) {
-        throw new Error(`Invalid breakpoints definition. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
-    }
+const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
+    if (!usedComponents?.length)
+        return false;
+    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
 };
-// 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 = [];
+/** @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 === '*')
@@ -1903,54 +2435,6 @@ function buildTemplate({ template, context, }) {
     }));
 }
 
-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.',
-    },
-};
-
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -2880,5 +3364,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, }) {
     }
 }
 
-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, dividerBuiltInStyles, dividerDefinition, doesMismatchMessageSchema, fetchById, fetchBySlug, findOutermostCoordinates, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTemplateValue, getValueForBreakpoint, isComponentAllowedOnRoot, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isStructureWithRelativeHeight, lastPathNamedSegmentEq, mediaQueryMatcher, optionalBuiltInStyles, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveHyperlinkPattern, runBreakpointsValidation, sectionBuiltInStyles, sectionDefinition, sendMessage, singleColumnBuiltInStyles, singleColumnDefinition, supportedModes, toCSSAttribute, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+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