@contentful/experiences-visual-editor-react 0.0.1-alpha.7 → 0.0.1-alpha.8

package/dist/renderApp.js

@@ -37,8 +37,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$7 = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+styleInject(css_248z$8);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -33852,16 +33852,16 @@ var charenc_1 = charenc;
 // The _isBuffer check is for Safari 5-7 support, because it's missing
 // Object.prototype.constructor. Remove this eventually
 var isBuffer_1 = function (obj) {
-  return obj != null && (isBuffer$1(obj) || isSlowBuffer(obj) || !!obj._isBuffer)
+  return obj != null && (isBuffer$2(obj) || isSlowBuffer(obj) || !!obj._isBuffer)
 };
 
-function isBuffer$1 (obj) {
+function isBuffer$2 (obj) {
   return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)
 }
 
 // For Node v0.10 support. Remove this eventually.
 function isSlowBuffer (obj) {
-  return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer$1(obj.slice(0, 0))
+  return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer$2(obj.slice(0, 0))
 }
 
 (function(){
@@ -34081,6 +34081,7 @@ var INLINES;
 var marks = {};
 
 Object.defineProperty(marks, "__esModule", { value: true });
+marks.MARKS = void 0;
 /**
  * Map of all Contentful marks.
  */
@@ -34092,8 +34093,7 @@ var MARKS;
     MARKS["CODE"] = "code";
     MARKS["SUPERSCRIPT"] = "superscript";
     MARKS["SUBSCRIPT"] = "subscript";
-})(MARKS || (MARKS = {}));
-marks.default = MARKS;
+})(MARKS || (marks.MARKS = MARKS = {}));
 
 var schemaConstraints = {};
 
@@ -34107,15 +34107,12 @@ var schemaConstraints = {};
 	    }
 	    return to.concat(ar || Array.prototype.slice.call(from));
 	};
-	var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-	    return (mod && mod.__esModule) ? mod : { "default": mod };
-	};
 	var _a;
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.V1_MARKS = exports.V1_NODE_TYPES = exports.TEXT_CONTAINERS = exports.HEADINGS = exports.CONTAINERS = exports.VOID_BLOCKS = exports.TABLE_BLOCKS = exports.LIST_ITEM_BLOCKS = exports.TOP_LEVEL_BLOCKS = void 0;
 	var blocks_1 = blocks;
 	var inlines_1 = inlines;
-	var marks_1 = __importDefault(marks);
+	var marks_1 = marks;
 	/**
 	 * Array of all top level block types.
 	 * Only these block types can be the direct children of the document.
@@ -34229,7 +34226,7 @@ var schemaConstraints = {};
 	/**
 	 * Marks before `superscript` & `subscript` release.
 	 */
-	exports.V1_MARKS = [marks_1.default.BOLD, marks_1.default.CODE, marks_1.default.ITALIC, marks_1.default.UNDERLINE];
+	exports.V1_MARKS = [marks_1.MARKS.BOLD, marks_1.MARKS.CODE, marks_1.MARKS.ITALIC, marks_1.MARKS.UNDERLINE];
 	
 } (schemaConstraints));
 
@@ -34244,12 +34241,13 @@ Object.defineProperty(nodeTypes, "__esModule", { value: true });
 var emptyDocument = {};
 
 Object.defineProperty(emptyDocument, "__esModule", { value: true });
+emptyDocument.EMPTY_DOCUMENT = void 0;
 var blocks_1$1 = blocks;
 /**
  * A rich text document considered to be empty.
  * Any other document structure than this is not considered empty.
  */
-var EMPTY_DOCUMENT = {
+emptyDocument.EMPTY_DOCUMENT = {
     nodeType: blocks_1$1.BLOCKS.DOCUMENT,
     data: {},
     content: [
@@ -34267,7 +34265,6 @@ var EMPTY_DOCUMENT = {
         },
     ],
 };
-emptyDocument.default = EMPTY_DOCUMENT;
 
 var helpers = {};
 
@@ -34337,9 +34334,6 @@ helpers.isText = isText;
 	    __setModuleDefault(result, mod);
 	    return result;
 	};
-	var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-	    return (mod && mod.__esModule) ? mod : { "default": mod };
-	};
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.helpers = exports.EMPTY_DOCUMENT = exports.MARKS = exports.INLINES = exports.BLOCKS = void 0;
 	var blocks_1 = blocks;
@@ -34347,12 +34341,12 @@ helpers.isText = isText;
 	var inlines_1 = inlines;
 	Object.defineProperty(exports, "INLINES", { enumerable: true, get: function () { return inlines_1.INLINES; } });
 	var marks_1 = marks;
-	Object.defineProperty(exports, "MARKS", { enumerable: true, get: function () { return __importDefault(marks_1).default; } });
+	Object.defineProperty(exports, "MARKS", { enumerable: true, get: function () { return marks_1.MARKS; } });
 	__exportStar(schemaConstraints, exports);
 	__exportStar(types, exports);
 	__exportStar(nodeTypes, exports);
 	var emptyDocument_1 = emptyDocument;
-	Object.defineProperty(exports, "EMPTY_DOCUMENT", { enumerable: true, get: function () { return __importDefault(emptyDocument_1).default; } });
+	Object.defineProperty(exports, "EMPTY_DOCUMENT", { enumerable: true, get: function () { return emptyDocument_1.EMPTY_DOCUMENT; } });
 	var helpers$1 = __importStar(helpers);
 	exports.helpers = helpers$1;
 	
@@ -34414,11 +34408,13 @@ const CONTENTFUL_COMPONENTS$1 = {
     },
 };
 const EMPTY_CONTAINER_HEIGHT$1 = '80px';
+const DEFAULT_IMAGE_WIDTH = '500px';
 var PostMessageMethods$2;
 (function (PostMessageMethods) {
     PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
 })(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
+const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
 
 const structureComponents = new Set([
     CONTENTFUL_COMPONENTS$1.section.id,
@@ -34569,24 +34565,18 @@ const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDi
             ? `safe ${cfHorizontalAlignment}`
             : cfHorizontalAlignment,
     };
-const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageScaling, cfBackgroundImageAlignment) => {
-    const matchBackgroundSize = (backgroundImageScaling) => {
-        if ('fill' === backgroundImageScaling)
+const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
+    const matchBackgroundSize = (scaling) => {
+        if ('fill' === scaling)
             return 'cover';
-        if ('fit' === backgroundImageScaling)
+        if ('fit' === scaling)
             return 'contain';
-        return undefined;
     };
-    const matchBackgroundPosition = (cfBackgroundImageAlignment) => {
-        if (!cfBackgroundImageAlignment) {
-            return undefined;
-        }
-        if ('string' !== typeof cfBackgroundImageAlignment) {
-            return undefined;
+    const matchBackgroundPosition = (alignment) => {
+        if (!alignment || 'string' !== typeof alignment) {
+            return;
         }
-        let [horizontalAlignment, verticalAlignment] = cfBackgroundImageAlignment
-            .trim()
-            .split(/\s+/, 2);
+        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) {
@@ -34622,50 +34612,29 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageScaling
         return `${horizontalAlignment} ${verticalAlignment}`;
     };
     if (!cfBackgroundImageUrl) {
-        return undefined;
-    }
-    return {
-        backgroundImage: `url(${cfBackgroundImageUrl})`,
-        backgroundRepeat: cfBackgroundImageScaling === 'tile' ? 'repeat' : 'no-repeat',
-        backgroundPosition: matchBackgroundPosition(cfBackgroundImageAlignment),
-        backgroundSize: matchBackgroundSize(cfBackgroundImageScaling),
-    };
-};
-const transformContentValue = (value, variableDefinition) => {
-    if (variableDefinition.type === 'RichText') {
-        return transformRichText(value);
+        return;
     }
-    return value;
-};
-const transformRichText = (value) => {
-    if (typeof value === 'string') {
-        return {
-            data: {},
-            content: [
-                {
-                    nodeType: dist.BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
-                },
-            ],
-            nodeType: dist.BLOCKS.DOCUMENT,
-        };
+    let backgroundImage;
+    let backgroundImageSet;
+    if (typeof cfBackgroundImageUrl === 'string') {
+        backgroundImage = `url(${cfBackgroundImageUrl})`;
     }
-    if (typeof value === 'object' && value.nodeType === dist.BLOCKS.DOCUMENT) {
-        return value;
+    else {
+        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
+        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
+        backgroundImageSet = `image-set(${imgSet})`;
     }
-    return undefined;
+    return {
+        backgroundImage,
+        backgroundImage2: backgroundImageSet,
+        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
+        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
+        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
+    };
 };
 const transformWidthSizing = ({ value, cfMargin, }) => {
     if (!value || !cfMargin)
-        return undefined;
+        return;
     const transformedValue = transformFill(value);
     const marginValues = cfMargin.split(' ');
     const rightMargin = marginValues[1] || '0px';
@@ -34683,7 +34652,12 @@ const transformWidthSizing = ({ value, cfMargin, }) => {
     return transformedValue;
 };
 
-const toCSSAttribute = (key) => key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+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)
@@ -34693,13 +34667,13 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfGap, cfBackgroundImageUrl, cfBackgroundImageAlignment, cfBackgroundImageScaling, cfFontSize, cfFontWeight, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
     return {
         margin: cfMargin,
         padding: cfPadding,
         backgroundColor: cfBackgroundColor,
-        width: transformWidthSizing({ value: cfWidth, cfMargin }),
-        height: transformFill(cfHeight),
+        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin }),
+        height: transformFill(cfHeight || cfImageOptions?.height),
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
         ...transformBorderStyle(cfBorder),
@@ -34707,7 +34681,7 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
         ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
         flexDirection: cfFlexDirection,
         flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageScaling, cfBackgroundImageAlignment),
+        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
         fontSize: cfFontSize,
         fontWeight: cfTextBold ? 'bold' : cfFontWeight,
         fontStyle: cfTextItalic ? 'italic' : 'normal',
@@ -34718,10 +34692,12 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
         textTransform: cfTextTransform,
         textDecoration: cfTextUnderline ? 'underline' : 'none',
         boxSizing: 'border-box',
+        objectFit: cfImageOptions?.objectFit,
+        objectPosition: cfImageOptions?.objectPosition,
     };
 };
 /**
- * Container/section default behaviour:
+ * Container/section default behavior:
  * Default height => height: EMPTY_CONTAINER_HEIGHT (120px)
  * If a container component has children => height: 'fit-content'
  */
@@ -34735,6 +34711,206 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     return EMPTY_CONTAINER_HEIGHT$1;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function get$1(obj, path) {
+    if (!path.length) {
+        return obj;
+    }
+    try {
+        const [currentPath, ...nextPath] = path;
+        return get$1(obj[currentPath], nextPath);
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+
+const getBoundValue = (entryOrAsset, path) => {
+    const value = get$1(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: dist.BLOCKS.PARAGRAPH,
+                    data: {},
+                    content: [
+                        {
+                            data: {},
+                            nodeType: 'text',
+                            value: value,
+                            marks: [],
+                        },
+                    ],
+                },
+            ],
+            nodeType: dist.BLOCKS.DOCUMENT,
+        };
+    }
+    if (typeof value === 'object' && value.nodeType === dist.BLOCKS.DOCUMENT) {
+        return value;
+    }
+    return undefined;
+};
+
+function getOptimizedImageUrl(url, width, quality, format) {
+    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 : ''}`;
+}
+
+const MAX_WIDTH_ALLOWED$1 = 2000;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = 100, format) => {
+    if (!validateParams(file, quality, format)) ;
+    const url = file.url;
+    const { width1x, width2x } = getWidths(widthStyle, file);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, quality, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, quality, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrlImageUrl = getOptimizedImageUrl(url, width2x, quality, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrlImageUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    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;
+    }
+};
+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, quality = 100, format) => {
+    if (!validateParams(file, quality, 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, quality, format)} ${width}w`)
+        : [];
+    const intrinsicImageWidth = file.details.image.width;
+    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, quality, format)} ${intrinsicImageWidth}w`);
+    }
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, quality, format);
+    const optimizedImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        sizes,
+        file,
+    };
+    return optimizedImageAsset;
+    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 transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
+    let value;
+    //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(asset.fields.file, options.targetSize, Number(options.quality), 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, Number(options.quality), options.format);
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
+    }
+    // return getBoundValue(asset, entityStore, binding, path);
+    return getBoundValue(asset, path);
+};
+
+const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
+    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
+    if (!entityOrAsset)
+        return;
+    switch (variableDefinition.type) {
+        case 'Media':
+            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 = {};
@@ -34873,42 +35049,6 @@ const builtInStyles = {
         description: 'The spacing between the elements of the section',
         defaultValue: '0px',
     },
-    cfBackgroundImageUrl: {
-        displayName: 'Background image',
-        type: 'Text',
-        defaultValue: '',
-        description: 'Background image for section or container',
-    },
-    cfBackgroundImageScaling: {
-        displayName: 'Image scaling',
-        type: 'Text',
-        group: 'style',
-        description: 'Adjust background image to fit, fill or tile the container',
-        defaultValue: 'fit',
-        validations: {
-            in: [
-                {
-                    value: 'fill',
-                    displayName: 'Fill',
-                },
-                {
-                    value: 'fit',
-                    displayName: 'Fit',
-                },
-                {
-                    value: 'tile',
-                    displayName: 'Tile',
-                },
-            ],
-        },
-    },
-    cfBackgroundImageAlignment: {
-        displayName: 'Image alignment',
-        type: 'Text',
-        group: 'style',
-        description: 'Align background image to the edges of the container',
-        defaultValue: 'left top',
-    },
     cfHyperlink: {
         displayName: 'Hyperlink',
         type: 'Text',
@@ -34956,6 +35096,40 @@ const optionalBuiltInStyles = {
         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%',
+            objectFit: 'none',
+            objectPosition: 'center center',
+            quality: '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',
+            quality: '100',
+            targetSize: '2000px',
+        },
+    },
     cfLineHeight: {
         displayName: 'Line Height',
         type: 'Text',
@@ -35338,29 +35512,9 @@ const sendMessage = (eventType, data) => {
     }, '*');
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function get$1(obj, path) {
-    if (!path.length) {
-        return obj;
-    }
-    try {
-        const [currentPath, ...nextPath] = path;
-        return get$1(obj[currentPath], nextPath);
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-
-function transformAssetFileToUrl(fieldValue) {
-    return fieldValue && typeof fieldValue == 'object' && fieldValue.url
-        ? fieldValue.url
-        : fieldValue;
-}
-
 /**
  * Base Store for entities
- * Can be extened for the different loading behaviours (editor, production, ..)
+ * Can be extended for the different loading behaviours (editor, production, ..)
  */
 class EntityStoreBase {
     constructor({ entities, locale }) {
@@ -35377,68 +35531,26 @@ class EntityStoreBase {
     updateEntity(entity) {
         this.addEntity(entity);
     }
-    getValueDeep(headLinkOrEntity, deepPath) {
-        const resolveFieldset = (unresolvedFieldset, headEntity) => {
-            const resolvedFieldset = [];
-            let entityToResolveFieldsFrom = headEntity;
-            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$1(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) {
-                        throw new Error(`Logic Error: Broken Precondition [by the time resolution of deep path happens all referents should be in EntityStore]: Cannot resolve field ${field} of a fieldset row [${JSON.stringify(row)}] as linked entity not found in the EntityStore. ${JSON.stringify({
-                            link: fieldValue,
-                        })}`);
-                    }
-                    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.`);
-                }
+    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;
             }
-            return {
-                resolvedFieldset,
-                isFullyResolved: true,
-            };
-        };
-        const headEntity = isLink(headLinkOrEntity)
-            ? this.getEntityFromLink(headLinkOrEntity)
-            : headLinkOrEntity;
-        if (undefined === headEntity) {
-            return;
+            entity = resolvedEntity;
         }
-        const unresolvedFieldset = parseDataSourcePathIntoFieldset(deepPath);
-        // 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(`[experiences-sdk-react::EntityStoreBased::getValueDeep()] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
-            return undefined;
+        else {
+            // We already have the complete entity in preview & delivery (resolved by the CMA client)
+            entity = linkOrEntryOrAsset;
         }
-        const [leafEntity, field /* localeQualifier */] = resolvedFieldset[resolvedFieldset.length - 1];
-        const fieldValue = get$1(leafEntity, ['fields', field]); // is allowed to be undefined (when non-required field not set; or even when field does NOT exist on the type)
-        return transformAssetFileToUrl(fieldValue);
+        return entity;
     }
     /**
      * @deprecated in the base class this should be simply an abstract method
@@ -35495,7 +35607,7 @@ class EntityStoreBase {
         if (missing.length) {
             // TODO: move to `debug` utils once it is extracted
             console.warn(`Asset "${id}" is not in the store`);
-            return undefined;
+            return;
         }
         return resolved[0];
     }
@@ -35511,7 +35623,7 @@ class EntityStoreBase {
         if (missing.length) {
             // TODO: move to `debug` utils once it is extracted
             console.warn(`Entry "${id}" is not in the store`);
-            return undefined;
+            return;
         }
         return resolved[0];
     }
@@ -35522,6 +35634,70 @@ class EntityStoreBase {
         }
         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$1(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';
     }
@@ -35700,11 +35876,16 @@ class EditorModeEntityStore extends EditorEntityStore {
         const { missing: missingAssetIds } = this.getEntitiesFromMap('Asset', uniqueAssetIds);
         return { missingEntryIds, missingAssetIds };
     }
-    getValue(entityLink, path) {
-        if (!entityLink || !entityLink.sys)
+    getValue(entityLinkOrEntity, path) {
+        const entity = this.getEntryOrAsset(entityLinkOrEntity, path.join('/'));
+        if (!entity) {
             return;
-        const fieldValue = super.getValue(entityLink, path);
-        return transformAssetFileToUrl(fieldValue);
+        }
+        const fieldValue = get$1(entity, path);
+        // walk around to render asset files
+        return fieldValue && typeof fieldValue == 'object' && fieldValue.url
+            ? fieldValue.url
+            : fieldValue;
     }
 }
 
@@ -36610,13 +36791,21 @@ function requireUseSyncExternalStoreShim_development () {
 	return useSyncExternalStoreShim_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  shim.exports = requireUseSyncExternalStoreShim_production_min();
-} else {
-  shim.exports = requireUseSyncExternalStoreShim_development();
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production_min();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
 }
 
-var shimExports = shim.exports;
+var shimExports = requireShim();
 
 var withSelector = {exports: {}};
 
@@ -36627,7 +36816,7 @@ var hasRequiredWithSelector_production_min;
 function requireWithSelector_production_min () {
 	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
 	hasRequiredWithSelector_production_min = 1;
-var h=reactExports,n=shimExports;function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+var h=reactExports,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
 	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
 	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
 	return withSelector_production_min;
@@ -36653,7 +36842,7 @@ function requireWithSelector_development () {
 	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 	}
 	          var React = reactExports;
-	var shim = shimExports;
+	var shim = requireShim();
 
 	/**
 	 * inlined Object.is polyfill to avoid requiring consumers ship their own
@@ -37137,7 +37326,7 @@ function getStatics(component) {
   return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
 }
 
-var defineProperty$1 = Object.defineProperty;
+var defineProperty$2 = Object.defineProperty;
 var getOwnPropertyNames = Object.getOwnPropertyNames;
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
@@ -37171,7 +37360,7 @@ function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
 
         try {
           // Avoid failures from read-only properties
-          defineProperty$1(targetComponent, key, descriptor);
+          defineProperty$2(targetComponent, key, descriptor);
         } catch (e) {}
       }
     }
@@ -38627,6 +38816,8 @@ var rafSchd = function rafSchd(fn) {
   return wrapperFn;
 };
 
+var rafSchd$1 = rafSchd;
+
 const isProduction$1 = process.env.NODE_ENV === 'production';
 const spacesAndTabs = /[ \t]{2,}/g;
 const lineStartWithSpaces = /^[ \t]*/gm;
@@ -41511,7 +41702,7 @@ function getScrollListener({
   function updateScroll() {
     onWindowScroll(getWindowScroll());
   }
-  const scheduled = rafSchd(updateScroll);
+  const scheduled = rafSchd$1(updateScroll);
   const binding = getWindowScrollBinding(scheduled);
   let unbind = noop$2;
   function isActive() {
@@ -42672,8 +42863,8 @@ var createFluidScroller = (({
   scrollDroppable,
   getAutoScrollerOptions = () => defaultAutoScrollerOptions
 }) => {
-  const scheduleWindowScroll = rafSchd(scrollWindow);
-  const scheduleDroppableScroll = rafSchd(scrollDroppable);
+  const scheduleWindowScroll = rafSchd$1(scrollWindow);
+  const scheduleDroppableScroll = rafSchd$1(scrollDroppable);
   let dragging = null;
   const tryScroll = state => {
     !dragging ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fluid scroll if not dragging') : invariant(false) : void 0;
@@ -44434,7 +44625,7 @@ function tryStart({
     };
   }
   function fluidLift(clientSelection) {
-    const move$1 = rafSchd(client => {
+    const move$1 = rafSchd$1(client => {
       tryDispatchWhenDragging(() => move({
         client
       }));
@@ -45501,7 +45692,7 @@ function useDroppablePublisher(args) {
     const scroll = getClosestScroll();
     memoizedUpdateScroll(scroll.x, scroll.y);
   }, [getClosestScroll, memoizedUpdateScroll]);
-  const scheduleScrollUpdate = useMemo(() => rafSchd(updateScroll), [updateScroll]);
+  const scheduleScrollUpdate = useMemo(() => rafSchd$1(updateScroll), [updateScroll]);
   const onClosestScroll = useCallback(() => {
     const dragging = whileDraggingRef.current;
     const closest = getClosestScrollableFromDrag(dragging);
@@ -46168,9 +46359,9 @@ var classnames = {exports: {}};
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-var css_248z$6 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var css_248z$7 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
 var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","userIsDragging":"styles-module_userIsDragging__lqbjG","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
-styleInject(css_248z$6);
+styleInject(css_248z$7);
 
 const SCROLL_STATES = {
     Start: 'scrollStart',
@@ -46274,13 +46465,14 @@ const CF_STYLE_ATTRIBUTES = [
     'cfWidth',
     'cfMaxWidth',
     'cfHeight',
+    'cfImageAsset',
+    'cfImageOptions',
+    'cfBackgroundImageUrl',
+    'cfBackgroundImageOptions',
     'cfFlexDirection',
     'cfFlexWrap',
     'cfBorder',
     'cfGap',
-    'cfBackgroundImageUrl',
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
     'cfFontSize',
     'cfFontWeight',
     'cfLineHeight',
@@ -46295,6 +46487,8 @@ const CF_STYLE_ATTRIBUTES = [
     // 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',
 ];
@@ -46808,14 +47002,20 @@ const createAssemblyRegistration = ({ definitionId, definitionName, component, }
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
 
+var freeGlobal$1 = freeGlobal;
+
 /** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
 /** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
+var root = freeGlobal$1 || freeSelf || Function('return this')();
+
+var root$1 = root;
 
 /** Built-in value references. */
-var Symbol$1 = root.Symbol;
+var Symbol$1 = root$1.Symbol;
+
+var Symbol$2 = Symbol$1;
 
 /** Used for built-in method references. */
 var objectProto$f = Object.prototype;
@@ -46831,7 +47031,7 @@ var hasOwnProperty$c = objectProto$f.hasOwnProperty;
 var nativeObjectToString$1 = objectProto$f.toString;
 
 /** Built-in value references. */
-var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
 
 /**
  * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
@@ -46886,7 +47086,7 @@ var nullTag = '[object Null]',
     undefinedTag = '[object Undefined]';
 
 /** Built-in value references. */
-var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
 
 /**
  * The base implementation of `getTag` without fallbacks for buggy environments.
@@ -47002,11 +47202,13 @@ function arrayMap(array, iteratee) {
  */
 var isArray = Array.isArray;
 
+var isArray$1 = isArray;
+
 /** Used as references for various `Number` constants. */
 var INFINITY$1 = 1 / 0;
 
 /** Used to convert symbols to primitives and strings. */
-var symbolProto$2 = Symbol$1 ? Symbol$1.prototype : undefined,
+var symbolProto$2 = Symbol$2 ? Symbol$2.prototype : undefined,
     symbolToString = symbolProto$2 ? symbolProto$2.toString : undefined;
 
 /**
@@ -47022,7 +47224,7 @@ function baseToString(value) {
   if (typeof value == 'string') {
     return value;
   }
-  if (isArray(value)) {
+  if (isArray$1(value)) {
     // Recursively convert values (susceptible to call stack limits).
     return arrayMap(value, baseToString) + '';
   }
@@ -47117,11 +47319,13 @@ function isFunction(value) {
 }
 
 /** Used to detect overreaching core-js shims. */
-var coreJsData = root['__core-js_shared__'];
+var coreJsData = root$1['__core-js_shared__'];
+
+var coreJsData$1 = coreJsData;
 
 /** Used to detect methods masquerading as native. */
 var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  var uid = /[^.]+$/.exec(coreJsData$1 && coreJsData$1.keys && coreJsData$1.keys.IE_PROTO || '');
   return uid ? ('Symbol(src)_1.' + uid) : '';
 }());
 
@@ -47228,7 +47432,9 @@ function getNative(object, key) {
 }
 
 /* Built-in method references that are verified to be native. */
-var WeakMap$1 = getNative(root, 'WeakMap');
+var WeakMap$1 = getNative(root$1, 'WeakMap');
+
+var WeakMap$2 = WeakMap$1;
 
 /** Built-in value references. */
 var objectCreate = Object.create;
@@ -47257,6 +47463,8 @@ var baseCreate = (function() {
   };
 }());
 
+var baseCreate$1 = baseCreate;
+
 /**
  * A faster alternative to `Function#apply`, this function invokes `func`
  * with the `this` binding of `thisArg` and the arguments of `args`.
@@ -47365,6 +47573,8 @@ var defineProperty = (function() {
   } catch (e) {}
 }());
 
+var defineProperty$1 = defineProperty;
+
 /**
  * The base implementation of `setToString` without support for hot loop shorting.
  *
@@ -47373,8 +47583,8 @@ var defineProperty = (function() {
  * @param {Function} string The `toString` result.
  * @returns {Function} Returns `func`.
  */
-var baseSetToString = !defineProperty ? identity : function(func, string) {
-  return defineProperty(func, 'toString', {
+var baseSetToString = !defineProperty$1 ? identity : function(func, string) {
+  return defineProperty$1(func, 'toString', {
     'configurable': true,
     'enumerable': false,
     'value': constant(string),
@@ -47394,6 +47604,8 @@ var baseSetToString$1 = baseSetToString;
  */
 var setToString = shortOut(baseSetToString$1);
 
+var setToString$1 = setToString;
+
 /**
  * A specialized version of `_.forEach` for arrays without support for
  * iteratee shorthands.
@@ -47449,8 +47661,8 @@ function isIndex(value, length) {
  * @param {*} value The value to assign.
  */
 function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
+  if (key == '__proto__' && defineProperty$1) {
+    defineProperty$1(object, key, {
       'configurable': true,
       'enumerable': true,
       'value': value,
@@ -47735,6 +47947,8 @@ var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsAr
     !propertyIsEnumerable$1.call(value, 'callee');
 };
 
+var isArguments$1 = isArguments;
+
 /**
  * This method returns `false`.
  *
@@ -47762,7 +47976,7 @@ var freeModule$2 = freeExports$2 && typeof module == 'object' && module && !modu
 var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
 
 /** Built-in value references. */
-var Buffer$1 = moduleExports$2 ? root.Buffer : undefined;
+var Buffer$1 = moduleExports$2 ? root$1.Buffer : undefined;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : undefined;
@@ -47786,6 +48000,8 @@ var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : undefined;
  */
 var isBuffer = nativeIsBuffer || stubFalse;
 
+var isBuffer$1 = isBuffer;
+
 /** `Object#toString` result references. */
 var argsTag$2 = '[object Arguments]',
     arrayTag$2 = '[object Array]',
@@ -47864,7 +48080,7 @@ var freeModule$1 = freeExports$1 && typeof module == 'object' && module && !modu
 var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
 
 /** Detect free variable `process` from Node.js. */
-var freeProcess = moduleExports$1 && freeGlobal.process;
+var freeProcess = moduleExports$1 && freeGlobal$1.process;
 
 /** Used to access faster Node.js helpers. */
 var nodeUtil = (function() {
@@ -47881,8 +48097,10 @@ var nodeUtil = (function() {
   } catch (e) {}
 }());
 
+var nodeUtil$1 = nodeUtil;
+
 /* Node.js helper references. */
-var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+var nodeIsTypedArray = nodeUtil$1 && nodeUtil$1.isTypedArray;
 
 /**
  * Checks if `value` is classified as a typed array.
@@ -47903,6 +48121,8 @@ var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
  */
 var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
 
+var isTypedArray$1 = isTypedArray;
+
 /** Used for built-in method references. */
 var objectProto$9 = Object.prototype;
 
@@ -47918,10 +48138,10 @@ var hasOwnProperty$8 = objectProto$9.hasOwnProperty;
  * @returns {Array} Returns the array of property names.
  */
 function arrayLikeKeys(value, inherited) {
-  var isArr = isArray(value),
-      isArg = !isArr && isArguments(value),
-      isBuff = !isArr && !isArg && isBuffer(value),
-      isType = !isArr && !isArg && !isBuff && isTypedArray(value),
+  var isArr = isArray$1(value),
+      isArg = !isArr && isArguments$1(value),
+      isBuff = !isArr && !isArg && isBuffer$1(value),
+      isType = !isArr && !isArg && !isBuff && isTypedArray$1(value),
       skipIndexes = isArr || isArg || isBuff || isType,
       result = skipIndexes ? baseTimes(value.length, String) : [],
       length = result.length;
@@ -47961,6 +48181,8 @@ function overArg(func, transform) {
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeKeys = overArg(Object.keys, Object);
 
+var nativeKeys$1 = nativeKeys;
+
 /** Used for built-in method references. */
 var objectProto$8 = Object.prototype;
 
@@ -47976,7 +48198,7 @@ var hasOwnProperty$7 = objectProto$8.hasOwnProperty;
  */
 function baseKeys(object) {
   if (!isPrototype(object)) {
-    return nativeKeys(object);
+    return nativeKeys$1(object);
   }
   var result = [];
   for (var key in Object(object)) {
@@ -48106,7 +48328,7 @@ var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
  * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
  */
 function isKey(value, object) {
-  if (isArray(value)) {
+  if (isArray$1(value)) {
     return false;
   }
   var type = typeof value;
@@ -48121,6 +48343,8 @@ function isKey(value, object) {
 /* Built-in method references that are verified to be native. */
 var nativeCreate = getNative(Object, 'create');
 
+var nativeCreate$1 = nativeCreate;
+
 /**
  * Removes all key-value entries from the hash.
  *
@@ -48129,7 +48353,7 @@ var nativeCreate = getNative(Object, 'create');
  * @memberOf Hash
  */
 function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
+  this.__data__ = nativeCreate$1 ? nativeCreate$1(null) : {};
   this.size = 0;
 }
 
@@ -48169,7 +48393,7 @@ var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
  */
 function hashGet(key) {
   var data = this.__data__;
-  if (nativeCreate) {
+  if (nativeCreate$1) {
     var result = data[key];
     return result === HASH_UNDEFINED$2 ? undefined : result;
   }
@@ -48193,7 +48417,7 @@ var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
  */
 function hashHas(key) {
   var data = this.__data__;
-  return nativeCreate ? (data[key] !== undefined) : hasOwnProperty$4.call(data, key);
+  return nativeCreate$1 ? (data[key] !== undefined) : hasOwnProperty$4.call(data, key);
 }
 
 /** Used to stand-in for `undefined` hash values. */
@@ -48212,7 +48436,7 @@ var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
 function hashSet(key, value) {
   var data = this.__data__;
   this.size += this.has(key) ? 0 : 1;
-  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED$1 : value;
+  data[key] = (nativeCreate$1 && value === undefined) ? HASH_UNDEFINED$1 : value;
   return this;
 }
 
@@ -48381,7 +48605,9 @@ ListCache.prototype.has = listCacheHas;
 ListCache.prototype.set = listCacheSet;
 
 /* Built-in method references that are verified to be native. */
-var Map$1 = getNative(root, 'Map');
+var Map$1 = getNative(root$1, 'Map');
+
+var Map$2 = Map$1;
 
 /**
  * Removes all key-value entries from the map.
@@ -48394,7 +48620,7 @@ function mapCacheClear() {
   this.size = 0;
   this.__data__ = {
     'hash': new Hash,
-    'map': new (Map$1 || ListCache),
+    'map': new (Map$2 || ListCache),
     'string': new Hash
   };
 }
@@ -48630,6 +48856,8 @@ var stringToPath = memoizeCapped(function(string) {
   return result;
 });
 
+var stringToPath$1 = stringToPath;
+
 /**
  * Converts `value` to a string. An empty string is returned for `null`
  * and `undefined` values. The sign of `-0` is preserved.
@@ -48664,10 +48892,10 @@ function toString(value) {
  * @returns {Array} Returns the cast property path array.
  */
 function castPath(value, object) {
-  if (isArray(value)) {
+  if (isArray$1(value)) {
     return value;
   }
-  return isKey(value, object) ? [value] : stringToPath(toString(value));
+  return isKey(value, object) ? [value] : stringToPath$1(toString(value));
 }
 
 /** Used as references for various `Number` constants. */
@@ -48758,7 +48986,7 @@ function arrayPush(array, values) {
 }
 
 /** Built-in value references. */
-var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : undefined;
+var spreadableSymbol = Symbol$2 ? Symbol$2.isConcatSpreadable : undefined;
 
 /**
  * Checks if `value` is a flattenable `arguments` object or array.
@@ -48768,7 +48996,7 @@ var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : undefined;
  * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
  */
 function isFlattenable(value) {
-  return isArray(value) || isArguments(value) ||
+  return isArray$1(value) || isArguments$1(value) ||
     !!(spreadableSymbol && value && value[spreadableSymbol]);
 }
 
@@ -48833,12 +49061,14 @@ function flatten(array) {
  * @returns {Function} Returns the new function.
  */
 function flatRest(func) {
-  return setToString(overRest(func, undefined, flatten), func + '');
+  return setToString$1(overRest(func, undefined, flatten), func + '');
 }
 
 /** Built-in value references. */
 var getPrototype = overArg(Object.getPrototypeOf, Object);
 
+var getPrototype$1 = getPrototype;
+
 /** `Object#toString` result references. */
 var objectTag$3 = '[object Object]';
 
@@ -48887,7 +49117,7 @@ function isPlainObject$1(value) {
   if (!isObjectLike(value) || baseGetTag(value) != objectTag$3) {
     return false;
   }
-  var proto = getPrototype(value);
+  var proto = getPrototype$1(value);
   if (proto === null) {
     return true;
   }
@@ -48998,7 +49228,7 @@ function stackSet(key, value) {
   var data = this.__data__;
   if (data instanceof ListCache) {
     var pairs = data.__data__;
-    if (!Map$1 || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
+    if (!Map$2 || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
       pairs.push([key, value]);
       this.size = ++data.size;
       return this;
@@ -49065,7 +49295,7 @@ var freeModule = freeExports && typeof module == 'object' && module && !module.n
 var moduleExports = freeModule && freeModule.exports === freeExports;
 
 /** Built-in value references. */
-var Buffer = moduleExports ? root.Buffer : undefined,
+var Buffer = moduleExports ? root$1.Buffer : undefined,
     allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined;
 
 /**
@@ -49187,7 +49417,7 @@ var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {
   var result = [];
   while (object) {
     arrayPush(result, getSymbols$1(object));
-    object = getPrototype(object);
+    object = getPrototype$1(object);
   }
   return result;
 };
@@ -49219,7 +49449,7 @@ function copySymbolsIn(source, object) {
  */
 function baseGetAllKeys(object, keysFunc, symbolsFunc) {
   var result = keysFunc(object);
-  return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
+  return isArray$1(object) ? result : arrayPush(result, symbolsFunc(object));
 }
 
 /**
@@ -49246,13 +49476,19 @@ function getAllKeysIn(object) {
 }
 
 /* Built-in method references that are verified to be native. */
-var DataView = getNative(root, 'DataView');
+var DataView = getNative(root$1, 'DataView');
+
+var DataView$1 = DataView;
 
 /* Built-in method references that are verified to be native. */
-var Promise$1 = getNative(root, 'Promise');
+var Promise$1 = getNative(root$1, 'Promise');
+
+var Promise$2 = Promise$1;
 
 /* Built-in method references that are verified to be native. */
-var Set$1 = getNative(root, 'Set');
+var Set$1 = getNative(root$1, 'Set');
+
+var Set$2 = Set$1;
 
 /** `Object#toString` result references. */
 var mapTag$4 = '[object Map]',
@@ -49264,11 +49500,11 @@ var mapTag$4 = '[object Map]',
 var dataViewTag$3 = '[object DataView]';
 
 /** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = toSource(DataView),
-    mapCtorString = toSource(Map$1),
-    promiseCtorString = toSource(Promise$1),
-    setCtorString = toSource(Set$1),
-    weakMapCtorString = toSource(WeakMap$1);
+var dataViewCtorString = toSource(DataView$1),
+    mapCtorString = toSource(Map$2),
+    promiseCtorString = toSource(Promise$2),
+    setCtorString = toSource(Set$2),
+    weakMapCtorString = toSource(WeakMap$2);
 
 /**
  * Gets the `toStringTag` of `value`.
@@ -49280,11 +49516,11 @@ var dataViewCtorString = toSource(DataView),
 var getTag = baseGetTag;
 
 // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
-if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3) ||
-    (Map$1 && getTag(new Map$1) != mapTag$4) ||
-    (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-    (Set$1 && getTag(new Set$1) != setTag$4) ||
-    (WeakMap$1 && getTag(new WeakMap$1) != weakMapTag$1)) {
+if ((DataView$1 && getTag(new DataView$1(new ArrayBuffer(1))) != dataViewTag$3) ||
+    (Map$2 && getTag(new Map$2) != mapTag$4) ||
+    (Promise$2 && getTag(Promise$2.resolve()) != promiseTag) ||
+    (Set$2 && getTag(new Set$2) != setTag$4) ||
+    (WeakMap$2 && getTag(new WeakMap$2) != weakMapTag$1)) {
   getTag = function(value) {
     var result = baseGetTag(value),
         Ctor = result == objectTag$2 ? value.constructor : undefined,
@@ -49331,7 +49567,7 @@ function initCloneArray(array) {
 }
 
 /** Built-in value references. */
-var Uint8Array$1 = root.Uint8Array;
+var Uint8Array$1 = root$1.Uint8Array;
 
 var Uint8Array$2 = Uint8Array$1;
 
@@ -49378,7 +49614,7 @@ function cloneRegExp(regexp) {
 }
 
 /** Used to convert symbols to primitives and strings. */
-var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : undefined,
+var symbolProto$1 = Symbol$2 ? Symbol$2.prototype : undefined,
     symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : undefined;
 
 /**
@@ -49484,7 +49720,7 @@ function initCloneByTag(object, tag, isDeep) {
  */
 function initCloneObject(object) {
   return (typeof object.constructor == 'function' && !isPrototype(object))
-    ? baseCreate(getPrototype(object))
+    ? baseCreate$1(getPrototype$1(object))
     : {};
 }
 
@@ -49503,7 +49739,7 @@ function baseIsMap(value) {
 }
 
 /* Node.js helper references. */
-var nodeIsMap = nodeUtil && nodeUtil.isMap;
+var nodeIsMap = nodeUtil$1 && nodeUtil$1.isMap;
 
 /**
  * Checks if `value` is classified as a `Map` object.
@@ -49524,6 +49760,8 @@ var nodeIsMap = nodeUtil && nodeUtil.isMap;
  */
 var isMap$1 = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
 
+var isMap$2 = isMap$1;
+
 /** `Object#toString` result references. */
 var setTag$2 = '[object Set]';
 
@@ -49539,7 +49777,7 @@ function baseIsSet(value) {
 }
 
 /* Node.js helper references. */
-var nodeIsSet = nodeUtil && nodeUtil.isSet;
+var nodeIsSet = nodeUtil$1 && nodeUtil$1.isSet;
 
 /**
  * Checks if `value` is classified as a `Set` object.
@@ -49560,6 +49798,8 @@ var nodeIsSet = nodeUtil && nodeUtil.isSet;
  */
 var isSet$1 = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
 
+var isSet$2 = isSet$1;
+
 /** Used to compose bitmasks for cloning. */
 var CLONE_DEEP_FLAG$1 = 1,
     CLONE_FLAT_FLAG$1 = 2,
@@ -49641,7 +49881,7 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
   if (!isObject(value)) {
     return value;
   }
-  var isArr = isArray(value);
+  var isArr = isArray$1(value);
   if (isArr) {
     result = initCloneArray(value);
     if (!isDeep) {
@@ -49651,7 +49891,7 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
     var tag = getTag$1(value),
         isFunc = tag == funcTag || tag == genTag;
 
-    if (isBuffer(value)) {
+    if (isBuffer$1(value)) {
       return cloneBuffer(value, isDeep);
     }
     if (tag == objectTag$1 || tag == argsTag$1 || (isFunc && !object)) {
@@ -49676,11 +49916,11 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
   }
   stack.set(value, result);
 
-  if (isSet$1(value)) {
+  if (isSet$2(value)) {
     value.forEach(function(subValue) {
       result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
     });
-  } else if (isMap$1(value)) {
+  } else if (isMap$2(value)) {
     value.forEach(function(subValue, key) {
       result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));
     });
@@ -49921,7 +50161,7 @@ var arrayBufferTag = '[object ArrayBuffer]',
     dataViewTag = '[object DataView]';
 
 /** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined,
+var symbolProto = Symbol$2 ? Symbol$2.prototype : undefined,
     symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
 
 /**
@@ -50122,8 +50362,8 @@ var hasOwnProperty = objectProto.hasOwnProperty;
  * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
  */
 function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
-  var objIsArr = isArray(object),
-      othIsArr = isArray(other),
+  var objIsArr = isArray$1(object),
+      othIsArr = isArray$1(other),
       objTag = objIsArr ? arrayTag : getTag$1(object),
       othTag = othIsArr ? arrayTag : getTag$1(other);
 
@@ -50134,8 +50374,8 @@ function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
       othIsObj = othTag == objectTag,
       isSameTag = objTag == othTag;
 
-  if (isSameTag && isBuffer(object)) {
-    if (!isBuffer(other)) {
+  if (isSameTag && isBuffer$1(object)) {
+    if (!isBuffer$1(other)) {
       return false;
     }
     objIsArr = true;
@@ -50143,7 +50383,7 @@ function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
   }
   if (isSameTag && !objIsObj) {
     stack || (stack = new Stack);
-    return (objIsArr || isTypedArray(object))
+    return (objIsArr || isTypedArray$1(object))
       ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
       : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
   }
@@ -50327,6 +50567,8 @@ var omit = flatRest(function(object, paths) {
   return result;
 });
 
+var omit$1 = omit;
+
 const useEditorStore = create((set, get) => ({
     dataSource: {},
     unboundValues: {},
@@ -50475,48 +50717,25 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 };
             }
             else if (variableMapping.type === 'BoundValue') {
-                if (!areEntitiesFetched) {
-                    console.debug(`[experiences-sdk-react::useComponentProps] Idle-cycle: as entities are not fetched(areEntitiesFetched=${areEntitiesFetched}), we cannot resolve bound values for ${variableName} so we just resolve them to default values.`);
-                    // Just forcing default value (if we're in idle-cycle, entities are missing)
-                    return {
-                        ...acc,
-                        [variableName]: transformContentValue(variableDefinition.defaultValue, variableDefinition),
-                    };
-                }
-                if (isDeepPath(variableMapping.path)) {
-                    const [, uuid] = variableMapping.path.split('/');
-                    const link = dataSource[uuid];
-                    const boundValue = entityStore?.getValueDeep(link, variableMapping.path);
-                    const value = boundValue || variableDefinition.defaultValue;
-                    return {
-                        ...acc,
-                        [variableName]: transformContentValue(value, variableDefinition),
-                    };
-                }
-                // // take value from the datasource for both bound and unbound value types
-                const [, uuid, ...path] = variableMapping.path.split('/');
+                const [, uuid, path] = variableMapping.path.split('/');
                 const binding = dataSource[uuid];
-                let boundValue = areEntitiesFetched
-                    ? entityStore.getValue(binding, path.slice(0, -1))
-                    : undefined;
+                const variableDefinition = definition.variables[variableName];
+                let boundValue = transformBoundContentValue(node.data.props, entityStore, binding, resolveDesignValue, variableName, variableDefinition, variableMapping.path);
                 // In some cases, there may be an asset linked in the path, so we need to consider this scenario:
                 // If no 'boundValue' is found, we also attempt to extract the value associated with the second-to-last item in the path.
                 // If successful, it means we have identified the linked asset.
                 if (!boundValue) {
                     const maybeBoundAsset = areEntitiesFetched
-                        ? entityStore.getValue(binding, path.slice(0, -2))
+                        ? entityStore.getValue(binding, path.split('/').slice(0, -2))
                         : undefined;
                     if (isLinkToAsset(maybeBoundAsset)) {
                         boundValue = maybeBoundAsset;
                     }
                 }
-                if (typeof boundValue === 'object' && boundValue.sys?.linkType === 'Asset') {
-                    boundValue = entityStore?.getValue(boundValue, ['fields', 'file']);
-                }
                 const value = boundValue || variableDefinition.defaultValue;
                 return {
                     ...acc,
-                    [variableName]: transformContentValue(value, variableDefinition),
+                    [variableName]: value,
                 };
             }
             else {
@@ -50589,12 +50808,15 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         'data-cf-node-block-id': node.data.blockId,
         'data-cf-node-block-type': node.type,
     };
+    //List explicit style props that will end up being passed to the component
+    const stylesToKeep = ['cfImageAsset'];
+    const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
     const componentProps = {
         className: componentClass,
         editorMode: true,
         node,
         renderDropzone,
-        ...omit(props, CF_STYLE_ATTRIBUTES, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...omit$1(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
         ...(definition.children ? { children: renderDropzone(node) } : {}),
     };
     return { componentProps, wrapperProps };
@@ -50720,6 +50942,7 @@ var richTextReactRenderer_es5 = {};
 
 	var marks = createCommonjsModule(function (module, exports) {
 	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.MARKS = void 0;
 	/**
 	 * Map of all Contentful marks.
 	 */
@@ -50731,12 +50954,12 @@ var richTextReactRenderer_es5 = {};
 	    MARKS["CODE"] = "code";
 	    MARKS["SUPERSCRIPT"] = "superscript";
 	    MARKS["SUBSCRIPT"] = "subscript";
-	})(MARKS || (MARKS = {}));
-	exports.default = MARKS;
+	})(MARKS || (exports.MARKS = MARKS = {}));
 
 	});
 
 	unwrapExports(marks);
+	marks.MARKS;
 
 	var schemaConstraints = createCommonjsModule(function (module, exports) {
 	var __spreadArray = (commonjsGlobal$1 && commonjsGlobal$1.__spreadArray) || function (to, from, pack) {
@@ -50748,15 +50971,12 @@ var richTextReactRenderer_es5 = {};
 	    }
 	    return to.concat(ar || Array.prototype.slice.call(from));
 	};
-	var __importDefault = (commonjsGlobal$1 && commonjsGlobal$1.__importDefault) || function (mod) {
-	    return (mod && mod.__esModule) ? mod : { "default": mod };
-	};
 	var _a;
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.V1_MARKS = exports.V1_NODE_TYPES = exports.TEXT_CONTAINERS = exports.HEADINGS = exports.CONTAINERS = exports.VOID_BLOCKS = exports.TABLE_BLOCKS = exports.LIST_ITEM_BLOCKS = exports.TOP_LEVEL_BLOCKS = void 0;
 
 
-	var marks_1 = __importDefault(marks);
+
 	/**
 	 * Array of all top level block types.
 	 * Only these block types can be the direct children of the document.
@@ -50870,7 +51090,7 @@ var richTextReactRenderer_es5 = {};
 	/**
 	 * Marks before `superscript` & `subscript` release.
 	 */
-	exports.V1_MARKS = [marks_1.default.BOLD, marks_1.default.CODE, marks_1.default.ITALIC, marks_1.default.UNDERLINE];
+	exports.V1_MARKS = [marks.MARKS.BOLD, marks.MARKS.CODE, marks.MARKS.ITALIC, marks.MARKS.UNDERLINE];
 
 	});
 
@@ -50901,12 +51121,13 @@ var richTextReactRenderer_es5 = {};
 
 	var emptyDocument = createCommonjsModule(function (module, exports) {
 	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.EMPTY_DOCUMENT = void 0;
 
 	/**
 	 * A rich text document considered to be empty.
 	 * Any other document structure than this is not considered empty.
 	 */
-	var EMPTY_DOCUMENT = {
+	exports.EMPTY_DOCUMENT = {
 	    nodeType: blocks.BLOCKS.DOCUMENT,
 	    data: {},
 	    content: [
@@ -50924,11 +51145,11 @@ var richTextReactRenderer_es5 = {};
 	        },
 	    ],
 	};
-	exports.default = EMPTY_DOCUMENT;
 
 	});
 
 	unwrapExports(emptyDocument);
+	emptyDocument.EMPTY_DOCUMENT;
 
 	var helpers = createCommonjsModule(function (module, exports) {
 	Object.defineProperty(exports, "__esModule", { value: true });
@@ -51004,9 +51225,6 @@ var richTextReactRenderer_es5 = {};
 	    __setModuleDefault(result, mod);
 	    return result;
 	};
-	var __importDefault = (commonjsGlobal$1 && commonjsGlobal$1.__importDefault) || function (mod) {
-	    return (mod && mod.__esModule) ? mod : { "default": mod };
-	};
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.helpers = exports.EMPTY_DOCUMENT = exports.MARKS = exports.INLINES = exports.BLOCKS = void 0;
 
@@ -51014,12 +51232,12 @@ var richTextReactRenderer_es5 = {};
 
 	Object.defineProperty(exports, "INLINES", { enumerable: true, get: function () { return inlines.INLINES; } });
 
-	Object.defineProperty(exports, "MARKS", { enumerable: true, get: function () { return __importDefault(marks).default; } });
+	Object.defineProperty(exports, "MARKS", { enumerable: true, get: function () { return marks.MARKS; } });
 	__exportStar(schemaConstraints, exports);
 	__exportStar(types, exports);
 	__exportStar(nodeTypes, exports);
 
-	Object.defineProperty(exports, "EMPTY_DOCUMENT", { enumerable: true, get: function () { return __importDefault(emptyDocument).default; } });
+	Object.defineProperty(exports, "EMPTY_DOCUMENT", { enumerable: true, get: function () { return emptyDocument.EMPTY_DOCUMENT; } });
 	var helpers$1 = __importStar(helpers);
 	exports.helpers = helpers$1;
 
@@ -51050,7 +51268,7 @@ var richTextReactRenderer_es5 = {};
 	        var nodeValue = renderText ? renderText(node.value) : node.value;
 	        if (preserveWhitespace) {
 	            // Preserve multiple spaces.
-	            nodeValue = nodeValue.replace(/ {2,}/g, function (match) { return '&nbsp;'.repeat(match.length); });
+	            nodeValue = nodeValue.replace(/ {2,}/g, function (match) { return '\u00A0'.repeat(match.length); });
 	            // Preserve line breaks.
 	            var lines_1 = nodeValue.split('\n');
 	            var jsxLines_1 = [];
@@ -51159,13 +51377,16 @@ var PostMessageMethods;
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
 })(PostMessageMethods || (PostMessageMethods = {}));
 
-var css_248z$4 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+var css_248z$5 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$5);
+
+var css_248z$4 = ".cf-richtext {\n  white-space: pre-line;\n}\n";
 styleInject(css_248z$4);
 
-var css_248z$3 = ".cf-richtext {\n  white-space: pre-line;\n}\n";
+var css_248z$3 = ".cf-text {\n  white-space: pre-line;\n}\n";
 styleInject(css_248z$3);
 
-var css_248z$2$1 = ".cf-text {\n  white-space: pre-line;\n}\n";
+var css_248z$2$1 = ".cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
 styleInject(css_248z$2$1);
 
 var css_248z$1$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.cf-container-label {\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 10;\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
@@ -51193,8 +51414,8 @@ const Flex = reactExports.forwardRef(({ id, children, onMouseEnter, onMouseUp, o
 });
 Flex.displayName = 'Flex';
 
-var css_248z$5 = ".Columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .Columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-label {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 100;\n}\n";
-styleInject(css_248z$5);
+var css_248z$6 = ".Columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .Columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-label {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 100;\n}\n";
+styleInject(css_248z$6);
 
 const ColumnWrapper = reactExports.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, ...props, style: {
@@ -51417,7 +51638,7 @@ const DraggableChildComponent = (props) => {
     })));
 };
 
-var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  transition: background-color 0.2s;\n  pointer-events: all !important;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -1px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
+var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  transition: background-color 0.2s;\n  pointer-events: all !important;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -1px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
 var styles$2 = {"container":"styles-module_container__te-1H","isRoot":"styles-module_isRoot__5cn-i","isEmptyCanvas":"styles-module_isEmptyCanvas__0XHZR","isEmptyZone":"styles-module_isEmptyZone__zVpnZ","isDragging":"styles-module_isDragging__Gm8v5","isDestination":"styles-module_isDestination__5sCQx","hitbox":"styles-module_hitbox__YQ-1Z"};
 styleInject(css_248z$2);