@contentful/experiences-core 1.28.0-dev-20250115T1128-04df9c2.0 → 1.28.0-prerelease-20250115T2332-646080a.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import md5 from 'md5';
 import { z, ZodIssueCode } from 'zod';
+import { omit, isArray, uniqBy } from 'lodash-es';
+import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { isArray, omit, uniqBy } from 'lodash-es';
 
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
@@ -193,243 +193,14 @@ const getElementCoordinates = (element) => {
     });
 };
 
-class ParseError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-const isValidJsonObject = (s) => {
-    try {
-        const result = JSON.parse(s);
-        if ('object' !== typeof result) {
-            return false;
-        }
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-};
-const doesMismatchMessageSchema = (event) => {
-    try {
-        tryParseMessage(event);
-        return false;
-    }
-    catch (e) {
-        if (e instanceof ParseError) {
-            return e.message;
-        }
-        throw e;
-    }
-};
-const tryParseMessage = (event) => {
-    if (!event.data) {
-        throw new ParseError('Field event.data is missing');
-    }
-    if ('string' !== typeof event.data) {
-        throw new ParseError(`Field event.data must be a string, instead of '${typeof event.data}'`);
-    }
-    if (!isValidJsonObject(event.data)) {
-        throw new ParseError('Field event.data must be a valid JSON object serialized as string');
-    }
-    const eventData = JSON.parse(event.data);
-    if (!eventData.source) {
-        throw new ParseError(`Field eventData.source must be equal to 'composability-app'`);
-    }
-    if ('composability-app' !== eventData.source) {
-        throw new ParseError(`Field eventData.source must be equal to 'composability-app', instead of '${eventData.source}'`);
-    }
-    // check eventData.eventType
-    const supportedEventTypes = Object.values(INCOMING_EVENTS);
-    if (!supportedEventTypes.includes(eventData.eventType)) {
-        // Expected message: This message is handled in the EntityStore to store fetched entities
-        if (eventData.eventType !== PostMessageMethods.REQUESTED_ENTITIES) {
-            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
-        }
-    }
-    return eventData;
-};
-const validateExperienceBuilderConfig = ({ locale, mode, }) => {
-    if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
-        return;
-    }
-    if (!locale) {
-        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
-    }
-};
-
-const transformVisibility = (value) => {
-    if (value === false) {
-        return {
-            display: 'none',
-        };
-    }
-    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
-    return {};
-};
-// Keep this for backwards compatibility - deleting this would be a breaking change
-// because existing components on a users experience will have the width value as fill
-// rather than 100%
-const transformFill = (value) => (value === 'fill' ? '100%' : value);
-const transformGridColumn = (span) => {
-    if (!span) {
-        return {};
-    }
-    return {
-        gridColumn: `span ${span}`,
-    };
-};
-const transformBorderStyle = (value) => {
-    if (!value)
-        return {};
-    const parts = value.split(' ');
-    // Just accept the passed value
-    if (parts.length < 3)
-        return { border: value };
-    const [borderSize, borderStyle, ...borderColorParts] = parts;
-    const borderColor = borderColorParts.join(' ');
-    return {
-        border: `${borderSize} ${borderStyle} ${borderColor}`,
-    };
-};
-const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection = 'column') => cfFlexDirection === 'row'
-    ? {
-        alignItems: cfHorizontalAlignment,
-        justifyContent: cfVerticalAlignment === 'center' ? `safe ${cfVerticalAlignment}` : cfVerticalAlignment,
-    }
-    : {
-        alignItems: cfVerticalAlignment,
-        justifyContent: cfHorizontalAlignment === 'center'
-            ? `safe ${cfHorizontalAlignment}`
-            : cfHorizontalAlignment,
-    };
-const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
-    const matchBackgroundSize = (scaling) => {
-        if ('fill' === scaling)
-            return 'cover';
-        if ('fit' === scaling)
-            return 'contain';
-    };
-    const matchBackgroundPosition = (alignment) => {
-        if (!alignment || 'string' !== typeof alignment) {
-            return;
-        }
-        let [horizontalAlignment, verticalAlignment] = alignment.trim().split(/\s+/, 2);
-        // Special case for handling single values
-        // for backwards compatibility with single values 'right','left', 'center', 'top','bottom'
-        if (horizontalAlignment && !verticalAlignment) {
-            const singleValue = horizontalAlignment;
-            switch (singleValue) {
-                case 'left':
-                    horizontalAlignment = 'left';
-                    verticalAlignment = 'center';
-                    break;
-                case 'right':
-                    horizontalAlignment = 'right';
-                    verticalAlignment = 'center';
-                    break;
-                case 'center':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'center';
-                    break;
-                case 'top':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'top';
-                    break;
-                case 'bottom':
-                    horizontalAlignment = 'center';
-                    verticalAlignment = 'bottom';
-                    break;
-                // just fall down to the normal validation logic for horiz and vert
-            }
-        }
-        const isHorizontalValid = ['left', 'right', 'center'].includes(horizontalAlignment);
-        const isVerticalValid = ['top', 'bottom', 'center'].includes(verticalAlignment);
-        horizontalAlignment = isHorizontalValid ? horizontalAlignment : 'left';
-        verticalAlignment = isVerticalValid ? verticalAlignment : 'top';
-        return `${horizontalAlignment} ${verticalAlignment}`;
-    };
-    if (!cfBackgroundImageUrl) {
-        return;
-    }
-    let backgroundImage;
-    let backgroundImageSet;
-    if (typeof cfBackgroundImageUrl === 'string') {
-        backgroundImage = `url(${cfBackgroundImageUrl})`;
-    }
-    else {
-        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
-        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
-        backgroundImageSet = `image-set(${imgSet})`;
-    }
-    return {
-        backgroundImage,
-        backgroundImage2: backgroundImageSet,
-        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
-        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
-        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
-    };
-};
-
-const toCSSAttribute = (key) => {
-    let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-    // Remove the number from the end of the key to allow for overrides on style properties
-    val = val.replace(/\d+$/, '');
-    return val;
-};
-const buildStyleTag = ({ styles, nodeId }) => {
-    const stylesStr = Object.entries(styles)
-        .filter(([, value]) => value !== undefined)
-        .reduce((acc, [key, value]) => `${acc}
-        ${toCSSAttribute(key)}: ${value};`, '');
-    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
-    const styleRule = `.${className}{ ${stylesStr} }`;
-    return [className, styleRule];
-};
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexReverse, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, cfVisibility, }) => {
-    return {
-        boxSizing: 'border-box',
-        ...transformVisibility(cfVisibility),
-        margin: cfMargin,
-        padding: cfPadding,
-        backgroundColor: cfBackgroundColor,
-        width: transformFill(cfWidth || cfImageOptions?.width),
-        height: transformFill(cfHeight || cfImageOptions?.height),
-        maxWidth: cfMaxWidth,
-        ...transformGridColumn(cfColumnSpan),
-        ...transformBorderStyle(cfBorder),
-        borderRadius: cfBorderRadius,
-        gap: cfGap,
-        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
-        flexDirection: cfFlexReverse && cfFlexDirection ? `${cfFlexDirection}-reverse` : cfFlexDirection,
-        flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
-        fontSize: cfFontSize,
-        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
-        fontStyle: cfTextItalic ? 'italic' : undefined,
-        textDecoration: cfTextUnderline ? 'underline' : undefined,
-        lineHeight: cfLineHeight,
-        letterSpacing: cfLetterSpacing,
-        color: cfTextColor,
-        textAlign: cfTextAlign,
-        textTransform: cfTextTransform,
-        objectFit: cfImageOptions?.objectFit,
-        objectPosition: cfImageOptions?.objectPosition,
-    };
-};
-/**
- * Container/section default behavior:
- * Default height => height: EMPTY_CONTAINER_HEIGHT
- * If a container component has children => height: 'fit-content'
- */
-const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
-    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
-        return value;
-    }
-    if (children.length) {
-        return '100%';
-    }
-    return EMPTY_CONTAINER_HEIGHT;
+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');
 };
 
 // These styles get added to every component, user custom or contentful provided
@@ -1509,478 +1280,553 @@ 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 MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
+const toCSSMediaQuery = ({ query }) => {
+    if (query === '*')
+        return undefined;
+    const match = query.match(MEDIA_QUERY_REGEXP);
+    if (!match)
+        return undefined;
+    const [, operator, value, unit] = match;
+    if (operator === '<') {
+        const maxScreenWidth = Number(value) - 1;
+        return `(max-width: ${maxScreenWidth}${unit})`;
+    }
+    else if (operator === '>') {
+        const minScreenWidth = Number(value) + 1;
+        return `(min-width: ${minScreenWidth}${unit})`;
+    }
+    return undefined;
+};
+// Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
+const findLast = (array, predicate) => {
+    return array.reverse().find(predicate);
+};
+// Initialise media query matchers. This won't include the always matching fallback breakpoint.
+const mediaQueryMatcher = (breakpoints) => {
+    const mediaQueryMatches = {};
+    const mediaQueryMatchers = breakpoints
+        .map((breakpoint) => {
+        const cssMediaQuery = toCSSMediaQuery(breakpoint);
+        if (!cssMediaQuery)
+            return undefined;
+        if (typeof window === 'undefined')
+            return undefined;
+        const mediaQueryMatcher = window.matchMedia(cssMediaQuery);
+        mediaQueryMatches[breakpoint.id] = mediaQueryMatcher.matches;
+        return { id: breakpoint.id, signal: mediaQueryMatcher };
+    })
+        .filter((matcher) => !!matcher);
+    return [mediaQueryMatchers, mediaQueryMatches];
+};
+const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
+    // The breakpoints are ordered (desktop-first: descending by screen width)
+    const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
+        id,
+        index,
+        // The fallback breakpoint with wildcard query will always match
+        isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
+    }));
+    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
+    const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
+    return mostSpecificIndex ?? fallbackBreakpointIndex;
+};
+const getFallbackBreakpointIndex = (breakpoints) => {
+    // We assume that there will be a single breakpoint which uses the wildcard query.
+    // If there is none, we just take the first one in the list.
+    return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
+};
+const builtInStylesWithDesignTokens = [
+    'cfMargin',
+    'cfPadding',
+    'cfGap',
+    'cfWidth',
+    'cfHeight',
+    'cfBackgroundColor',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfFontSize',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+    'cfMaxWidth',
+];
+const isValidBreakpointValue = (value) => {
+    return value !== undefined && value !== null && value !== '';
+};
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName, resolveDesignTokens = true) => {
+    const eventuallyResolveDesignTokens = (value) => {
+        // For some built-in design properties, we support design tokens
+        if (builtInStylesWithDesignTokens.includes(variableName)) {
+            return getDesignTokenRegistration(value, variableName);
         }
-      ]
-     */
-    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, patternWrapper, }) => {
-        // 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?.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,
-                    // pass top-level pattern node to store instance-specific child styles for rendering
-                    patternWrapper: currentNode,
-                });
-                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;
+        // For all other properties, we just return the breakpoint-specific value
+        return value;
+    };
+    if (valuesByBreakpoint instanceof Object) {
+        // Assume that the values are sorted by media query to apply the cascading CSS logic
+        for (let index = activeBreakpointIndex; index >= 0; index--) {
+            const breakpointId = breakpoints[index]?.id;
+            if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
+                // If the value is defined, we use it and stop the breakpoints cascade
+                if (resolveDesignTokens) {
+                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
                 }
-                // 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
-            if (patternWrapper) {
-                currentNode.id = currentNode.id ?? generateRandomId(15);
-                // @ts-expect-error -- valueByBreakpoint is not explicitly defined, but it's already defined in the patternWrapper styles
-                patternWrapper.variables.cfSsrClassName = {
-                    ...(patternWrapper.variables.cfSsrClassName ?? {}),
-                    type: 'DesignValue',
-                    [currentNode.id]: {
-                        valuesByBreakpoint: {
-                            [breakpointIds[0]]: currentNodeClassNames.join(' '),
-                        },
-                    },
-                };
+                return valuesByBreakpoint[breakpointId];
             }
-            else {
-                currentNode.variables.cfSsrClassName = {
-                    type: 'DesignValue',
-                    valuesByBreakpoint: {
-                        [breakpointIds[0]]: currentNodeClassNames.join(' '),
-                    },
-                };
+        }
+        // If no breakpoint matched, we search and apply the fallback breakpoint
+        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
+        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
+            if (resolveDesignTokens) {
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
             }
-            queue.push(...currentNode.children);
+            return valuesByBreakpoint[fallbackBreakpointId];
         }
+    }
+    else {
+        // Old design properties did not support breakpoints, keep for backward compatibility
+        return valuesByBreakpoint;
+    }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isLinkToAsset = (variable) => {
+    if (!variable)
+        return false;
+    if (typeof variable !== 'object')
+        return false;
+    return (variable.sys?.linkType === 'Asset' &&
+        typeof variable.sys?.id === 'string' &&
+        !!variable.sys?.id &&
+        variable.sys?.type === 'Link');
+};
+
+const isLink = (maybeLink) => {
+    if (maybeLink === null)
+        return false;
+    if (typeof maybeLink !== 'object')
+        return false;
+    const link = maybeLink;
+    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
+};
+
+/**
+ * This module encapsulates format of the path to a deep reference.
+ */
+const parseDataSourcePathIntoFieldset = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return parsedPath.fields.map((field) => [null, field, '~locale']);
+};
+/**
+ * Parse path into components, supports  L1 references (one reference follow) atm.
+ * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
+ *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
+ * @returns
+ */
+const parseDataSourcePathWithL1DeepBindings = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return {
+        key: parsedPath.key,
+        field: parsedPath.fields[0],
+        referentField: parsedPath.fields[1],
+    };
+};
+/**
+ * Detects if paths is valid deep-path, like:
+ *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+ * or regular, like:
+ *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
+ * @returns
+ */
+const isDeepPath = (deepPathCandidate) => {
+    const deepPathParsed = parseDeepPath(deepPathCandidate);
+    if (!deepPathParsed) {
+        return false;
+    }
+    return deepPathParsed.fields.length > 1;
+};
+const parseDeepPath = (deepPathCandidate) => {
+    // ALGORITHM:
+    // We start with deep path in form:
+    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+    // First turn string into array of segments
+    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
+    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
+    //      [
+    //        [ "", "uuid123" ],
+    //        [ "fields", "mainStory", "~locale" ],
+    //        [ "fields", "cover", "~locale" ],
+    //        [ "fields", "title", "~locale" ]
+    //      ]
+    // Then check "initial" chunk for corretness
+    // Then check all "field-leading" chunks for correctness
+    const isValidInitialChunk = (initialChunk) => {
+        // must have start with '' and have at least 2 segments, second non-empty
+        // eg. /-_432uuid123123
+        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
+    };
+    const isValidFieldChunk = (fieldChunk) => {
+        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
+        // eg. fields/-32234mainStory/~locale
+        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
     };
-    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;
+    const deepPathSegments = deepPathCandidate.split('/');
+    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
+    if (chunks.length <= 1) {
+        return null; // malformed path, even regular paths have at least 2 chunks
     }
-    if (!isCfStyleAttribute(variableName)) {
-        return variableValue;
+    else if (chunks.length === 2) {
+        return null; // deep paths have at least 3 chunks
     }
-    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';
+    // With 3+ chunks we can now check for deep path correctness
+    const [initialChunk, ...fieldChunks] = chunks;
+    if (!isValidInitialChunk(initialChunk)) {
+        return null;
+    }
+    if (!fieldChunks.every(isValidFieldChunk)) {
+        return null;
+    }
+    return {
+        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
+        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
+    };
+};
+const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
+    const chunks = [];
+    let currentChunk = [];
+    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
+    const excludeEmptyChunks = (chunk) => chunk.length > 0;
+    for (let i = 0; i < segments.length; i++) {
+        const isInitialElement = i === 0;
+        const segment = segments[i];
+        if (isInitialElement) {
+            currentChunk = [segment];
         }
-        if (variableName === 'cfBorder' || variableName.startsWith('cfBorder_')) {
-            if (typeof tokenValue === 'object') {
-                const { width, style, color } = tokenValue;
-                return `${width} ${style} ${color}`;
-            }
+        else if (isSegmentBeginningOfChunk(segment)) {
+            chunks.push(currentChunk);
+            currentChunk = [segment];
+        }
+        else {
+            currentChunk.push(segment);
         }
-        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();
+    chunks.push(currentChunk);
+    return chunks.filter(excludeEmptyChunks);
 };
-const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataSource = {}, unboundValues = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
-    if (variableData.type === 'UnboundValue') {
-        const uuid = variableData.key;
-        return unboundValues[uuid]?.value;
+const lastPathNamedSegmentEq = (path, expectedName) => {
+    // `/key123/fields/featureImage/~locale/fields/file/~locale`
+    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
+    const segments = path.split('/');
+    if (segments.length < 2) {
+        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
+        return false;
     }
-    if (variableData.type === 'ComponentValue') {
-        const variableDefinitionKey = variableData.key;
-        const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
-        // @ts-expect-error TODO: Types coming from validations erroneously assume that `defaultValue` can be a primitive value (e.g. string or number)
-        const defaultValueKey = variableDefinition.defaultValue?.key;
-        const defaultValue = unboundValues[defaultValueKey].value;
-        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
-        // userSetValue is a ComponentValue we can safely return the default value
-        if (!userSetValue || userSetValue.type === 'ComponentValue') {
-            return defaultValue;
+    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
+    return secondLast === expectedName;
+};
+
+const resolveHyperlinkPattern = (pattern, entry, locale) => {
+    if (!entry || !locale)
+        return null;
+    const variables = {
+        entry,
+        locale,
+    };
+    return buildTemplate({ template: pattern, context: variables });
+};
+function getValue(obj, path) {
+    return path
+        .replace(/\[/g, '.')
+        .replace(/\]/g, '')
+        .split('.')
+        .reduce((o, k) => (o || {})[k], obj);
+}
+function addLocale(str, locale) {
+    const fieldsIndicator = 'fields';
+    const fieldsIndex = str.indexOf(fieldsIndicator);
+    if (fieldsIndex !== -1) {
+        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
+        if (dotIndex !== -1) {
+            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
         }
-        // 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;
+    return str;
+}
+function getTemplateValue(ctx, path) {
+    const pathWithLocale = addLocale(path, ctx.locale);
+    const retrievedValue = getValue(ctx, pathWithLocale);
+    return typeof retrievedValue === 'object' && retrievedValue !== null
+        ? retrievedValue[ctx.locale]
+        : retrievedValue;
+}
+function buildTemplate({ template, context, }) {
+    const localeVariable = /{\s*locale\s*}/g;
+    // e.g. "{ page.sys.id }"
+    const variables = /{\s*([\S]+?)\s*}/g;
+    return (template
+        // first replace the locale pattern
+        .replace(localeVariable, context.locale)
+        // then resolve the remaining variables
+        .replace(variables, (_, path) => {
+        const fallback = path + '_NOT_FOUND';
+        const value = getTemplateValue(context, path) ?? fallback;
+        // using _.result didn't gave proper results so we run our own version of it
+        return String(typeof value === 'function' ? value() : value);
+    }));
+}
+
+const stylesToKeep = ['cfImageAsset'];
+const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
+const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
+const sanitizeNodeProps = (nodeProps) => {
+    return omit(nodeProps, stylesToRemove, propsToRemove);
+};
+
+class ParseError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}
+const isValidJsonObject = (s) => {
+    try {
+        const result = JSON.parse(s);
+        if ('object' !== typeof result) {
+            return false;
         }
-        if (boundEntity.sys.type === 'Asset') {
-            return boundEntity.fields.file?.url;
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+const doesMismatchMessageSchema = (event) => {
+    try {
+        tryParseMessage(event);
+        return false;
+    }
+    catch (e) {
+        if (e instanceof ParseError) {
+            return e.message;
         }
-        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;
-            }
+        throw e;
+    }
+};
+const tryParseMessage = (event) => {
+    if (!event.data) {
+        throw new ParseError('Field event.data is missing');
+    }
+    if ('string' !== typeof event.data) {
+        throw new ParseError(`Field event.data must be a string, instead of '${typeof event.data}'`);
+    }
+    if (!isValidJsonObject(event.data)) {
+        throw new ParseError('Field event.data must be a valid JSON object serialized as string');
+    }
+    const eventData = JSON.parse(event.data);
+    if (!eventData.source) {
+        throw new ParseError(`Field eventData.source must be equal to 'composability-app'`);
+    }
+    if ('composability-app' !== eventData.source) {
+        throw new ParseError(`Field eventData.source must be equal to 'composability-app', instead of '${eventData.source}'`);
+    }
+    // check eventData.eventType
+    const supportedEventTypes = Object.values(INCOMING_EVENTS);
+    if (!supportedEventTypes.includes(eventData.eventType)) {
+        // Expected message: This message is handled in the EntityStore to store fetched entities
+        if (eventData.eventType !== PostMessageMethods.REQUESTED_ENTITIES) {
+            throw new ParseError(`Field eventData.eventType must be one of the supported values: [${supportedEventTypes.join(', ')}]`);
         }
     }
+    return eventData;
 };
-const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unboundValues = {}, dataSource = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
-    const variableValuesByBreakpoints = breakpointIds.reduce((acc, breakpointId) => {
+const validateExperienceBuilderConfig = ({ locale, mode, }) => {
+    if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
+        return;
+    }
+    if (!locale) {
+        throw new Error('Parameter "locale" is required for experience builder initialization outside of editor mode');
+    }
+};
+
+const transformVisibility = (value) => {
+    if (value === false) {
         return {
-            ...acc,
-            [breakpointId]: {},
+            display: 'none',
         };
-    }, {});
-    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;
-        }
-        let resolvedVariableData = variableData;
-        if (variableData.type === 'ComponentValue') {
-            const variableDefinition = componentSettings?.variableDefinitions[variableData.key];
-            if (variableDefinition.group === 'style' && variableDefinition.defaultValue !== undefined) {
-                const overrideVariableData = componentVariablesOverwrites?.[variableData.key];
-                resolvedVariableData =
-                    overrideVariableData || variableDefinition.defaultValue;
-            }
-        }
-        if (resolvedVariableData.type !== 'DesignValue') {
-            continue;
+    }
+    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+    return {};
+};
+// Keep this for backwards compatibility - deleting this would be a breaking change
+// because existing components on a users experience will have the width value as fill
+// rather than 100%
+const transformFill = (value) => (value === 'fill' ? '100%' : value);
+const transformGridColumn = (span) => {
+    if (!span) {
+        return {};
+    }
+    return {
+        gridColumn: `span ${span}`,
+    };
+};
+const transformBorderStyle = (value) => {
+    if (!value)
+        return {};
+    const parts = value.split(' ');
+    // Just accept the passed value
+    if (parts.length < 3)
+        return { border: value };
+    const [borderSize, borderStyle, ...borderColorParts] = parts;
+    const borderColor = borderColorParts.join(' ');
+    return {
+        border: `${borderSize} ${borderStyle} ${borderColor}`,
+    };
+};
+const transformAlignment = (cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection = 'column') => cfFlexDirection === 'row'
+    ? {
+        alignItems: cfHorizontalAlignment,
+        justifyContent: cfVerticalAlignment === 'center' ? `safe ${cfVerticalAlignment}` : cfVerticalAlignment,
+    }
+    : {
+        alignItems: cfVerticalAlignment,
+        justifyContent: cfHorizontalAlignment === 'center'
+            ? `safe ${cfHorizontalAlignment}`
+            : cfHorizontalAlignment,
+    };
+const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions) => {
+    const matchBackgroundSize = (scaling) => {
+        if ('fill' === scaling)
+            return 'cover';
+        if ('fit' === scaling)
+            return 'contain';
+    };
+    const matchBackgroundPosition = (alignment) => {
+        if (!alignment || 'string' !== typeof alignment) {
+            return;
         }
-        for (const [breakpointId, variableValue] of Object.entries(resolvedVariableData.valuesByBreakpoint)) {
-            if (!isValidBreakpointValue(variableValue)) {
-                continue;
+        let [horizontalAlignment, verticalAlignment] = alignment.trim().split(/\s+/, 2);
+        // Special case for handling single values
+        // for backwards compatibility with single values 'right','left', 'center', 'top','bottom'
+        if (horizontalAlignment && !verticalAlignment) {
+            const singleValue = horizontalAlignment;
+            switch (singleValue) {
+                case 'left':
+                    horizontalAlignment = 'left';
+                    verticalAlignment = 'center';
+                    break;
+                case 'right':
+                    horizontalAlignment = 'right';
+                    verticalAlignment = 'center';
+                    break;
+                case 'center':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'center';
+                    break;
+                case 'top':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'top';
+                    break;
+                case 'bottom':
+                    horizontalAlignment = 'center';
+                    verticalAlignment = 'bottom';
+                    break;
+                // just fall down to the normal validation logic for horiz and vert
             }
-            variableValuesByBreakpoints[breakpointId] = {
-                ...variableValuesByBreakpoints[breakpointId],
-                [variableName]: variableValue,
-            };
         }
+        const isHorizontalValid = ['left', 'right', 'center'].includes(horizontalAlignment);
+        const isVerticalValid = ['top', 'bottom', 'center'].includes(verticalAlignment);
+        horizontalAlignment = isHorizontalValid ? horizontalAlignment : 'left';
+        verticalAlignment = isVerticalValid ? verticalAlignment : 'top';
+        return `${horizontalAlignment} ${verticalAlignment}`;
+    };
+    if (!cfBackgroundImageUrl) {
+        return;
     }
-    return variableValuesByBreakpoints;
+    let backgroundImage;
+    let backgroundImageSet;
+    if (typeof cfBackgroundImageUrl === 'string') {
+        backgroundImage = `url(${cfBackgroundImageUrl})`;
+    }
+    else {
+        const imgSet = cfBackgroundImageUrl.srcSet?.join(',');
+        backgroundImage = `url(${cfBackgroundImageUrl.url})`;
+        backgroundImageSet = `image-set(${imgSet})`;
+    }
+    return {
+        backgroundImage,
+        backgroundImage2: backgroundImageSet,
+        backgroundRepeat: cfBackgroundImageOptions?.scaling === 'tile' ? 'repeat' : 'no-repeat',
+        backgroundPosition: matchBackgroundPosition(cfBackgroundImageOptions?.alignment),
+        backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
+    };
 };
-/**
- * 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,
-        };
-    }, {});
+
+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;
 };
-// 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 buildStyleTag = ({ styles, nodeId }) => {
+    const stylesStr = Object.entries(styles)
+        .filter(([, value]) => value !== undefined)
+        .reduce((acc, [key, value]) => `${acc}
+        ${toCSSAttribute(key)}: ${value};`, '');
+    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
+    const styleRule = `.${className}{ ${stylesStr} }`;
+    return [className, styleRule];
 };
-const toMediaQuery = (breakpointPayload) => {
-    const mediaQueryStyles = Object.entries(breakpointPayload.cssByClassName).reduce((acc, [className, css]) => {
-        return `${acc}.${className}{${css}}`;
-    }, ``);
-    if (breakpointPayload.condition === '*') {
-        return mediaQueryStyles;
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexReverse, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, cfVisibility, }) => {
+    return {
+        boxSizing: 'border-box',
+        ...transformVisibility(cfVisibility),
+        margin: cfMargin,
+        padding: cfPadding,
+        backgroundColor: cfBackgroundColor,
+        width: transformFill(cfWidth || cfImageOptions?.width),
+        height: transformFill(cfHeight || cfImageOptions?.height),
+        maxWidth: cfMaxWidth,
+        ...transformGridColumn(cfColumnSpan),
+        ...transformBorderStyle(cfBorder),
+        borderRadius: cfBorderRadius,
+        gap: cfGap,
+        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
+        flexDirection: cfFlexReverse && cfFlexDirection ? `${cfFlexDirection}-reverse` : cfFlexDirection,
+        flexWrap: cfFlexWrap,
+        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
+        fontSize: cfFontSize,
+        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
+        fontStyle: cfTextItalic ? 'italic' : undefined,
+        textDecoration: cfTextUnderline ? 'underline' : undefined,
+        lineHeight: cfLineHeight,
+        letterSpacing: cfLetterSpacing,
+        color: cfTextColor,
+        textAlign: cfTextAlign,
+        textTransform: cfTextTransform,
+        objectFit: cfImageOptions?.objectFit,
+        objectPosition: cfImageOptions?.objectPosition,
+    };
+};
+/**
+ * Container/section default behavior:
+ * Default height => height: EMPTY_CONTAINER_HEIGHT
+ * If a container component has children => height: 'fit-content'
+ */
+const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
+    if (!blockId || !isContentfulStructureComponent(blockId) || value !== 'auto') {
+        return value;
     }
-    const [evaluation, pixelValue] = [
-        breakpointPayload.condition[0],
-        breakpointPayload.condition.substring(1),
-    ];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
+    if (children.length) {
+        return '100%';
+    }
+    return EMPTY_CONTAINER_HEIGHT;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2142,6 +1988,114 @@ const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format
     return optimizedImageAsset;
 };
 
+const getDataFromTree = (tree) => {
+    let dataSource = {};
+    let unboundValues = {};
+    const queue = [...tree.root.children];
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node) {
+            continue;
+        }
+        dataSource = { ...dataSource, ...node.data.dataSource };
+        unboundValues = { ...unboundValues, ...node.data.unboundValues };
+        if (node.children.length) {
+            queue.push(...node.children);
+        }
+    }
+    return {
+        dataSource,
+        unboundValues,
+    };
+};
+/**
+ * Gets calculates the index to drop the dragged component based on the mouse position
+ * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
+ */
+const getInsertionData = ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }) => {
+    const APPEND_INSIDE = dropReceiverNode.children.length;
+    const PREPEND_INSIDE = 0;
+    if (isMouseAtTopBorder || isMouseAtBottomBorder) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isMouseAtBottomBorder ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
+    }
+    // if over one of the section indicators
+    if (isOverTopIndicator || isOverBottomIndicator) {
+        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
+        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
+        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
+        return {
+            // when the mouse is around the border we want to drop the new component as a new section onto the root node
+            node: dropReceiverParentNode,
+            index: isOverBottomIndicator ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
+        };
+    }
+    if (flexDirection === undefined || flexDirection === 'row') {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInLeftHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
+    }
+    else {
+        return {
+            node: dropReceiverNode,
+            index: isMouseInUpperHalf ? PREPEND_INSIDE : APPEND_INSIDE,
+        };
+    }
+};
+const generateRandomId = (letterCount) => {
+    const LETTERS = 'abcdefghijklmnopqvwxyzABCDEFGHIJKLMNOPQVWXYZ';
+    const NUMS = '0123456789';
+    const ALNUM = NUMS + LETTERS;
+    const times = (n, callback) => Array.from({ length: n }, callback);
+    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+    return times(letterCount, () => ALNUM[random(0, ALNUM.length - 1)]).join('');
+};
+const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
+    if (!usedComponents?.length)
+        return false;
+    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
+};
+/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
+const checkIsAssembly = checkIsAssemblyNode;
+/**
+ * This check assumes that the entry is already ensured to be an experience, i.e. the
+ * content type of the entry is an experience type with the necessary annotations.
+ **/
+const checkIsAssemblyEntry = (entry) => {
+    return Boolean(entry.fields?.componentSettings);
+};
+const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
+function parseCSSValue(input) {
+    const regex = /^(\d+(\.\d+)?)(px|em|rem)$/;
+    const match = input.match(regex);
+    if (match) {
+        return {
+            value: parseFloat(match[1]),
+            unit: match[3],
+        };
+    }
+    return null;
+}
+function getTargetValueInPixels(targetWidthObject) {
+    switch (targetWidthObject.unit) {
+        case 'px':
+            return targetWidthObject.value;
+        case 'em':
+            return targetWidthObject.value * 16;
+        case 'rem':
+            return targetWidthObject.value * 16;
+        default:
+            return targetWidthObject.value;
+    }
+}
+
 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,
@@ -2273,462 +2227,508 @@ function getArrayValue(entryOrAsset, path, entityStore) {
             });
             return resolvedEntity;
         }
-        else {
-            console.warn(`Expected value to be a string or Link, but got: ${JSON.stringify(value)}`);
-            return undefined;
-        }
-    });
-    return result;
-}
-
-const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, 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 variable we just return the bound value
-            if (entityOrAsset.sys.type === 'Entry') {
-                return getBoundValue(entityOrAsset, path);
-            }
-            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
-        case 'RichText':
-            return transformRichText(entityOrAsset, entityStore, path);
-        case 'Array':
-            return getArrayValue(entityOrAsset, path, entityStore);
-        case 'Link':
-            return getResolvedEntryFromLink(entityOrAsset, path, entityStore);
-        default:
-            return getBoundValue(entityOrAsset, path);
-    }
-};
-
-const getDataFromTree = (tree) => {
-    let dataSource = {};
-    let unboundValues = {};
-    const queue = [...tree.root.children];
-    while (queue.length) {
-        const node = queue.shift();
-        if (!node) {
-            continue;
-        }
-        dataSource = { ...dataSource, ...node.data.dataSource };
-        unboundValues = { ...unboundValues, ...node.data.unboundValues };
-        if (node.children.length) {
-            queue.push(...node.children);
-        }
-    }
-    return {
-        dataSource,
-        unboundValues,
-    };
-};
-/**
- * Gets calculates the index to drop the dragged component based on the mouse position
- * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
- */
-const getInsertionData = ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }) => {
-    const APPEND_INSIDE = dropReceiverNode.children.length;
-    const PREPEND_INSIDE = 0;
-    if (isMouseAtTopBorder || isMouseAtBottomBorder) {
-        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
-        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
-        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
-        return {
-            // when the mouse is around the border we want to drop the new component as a new section onto the root node
-            node: dropReceiverParentNode,
-            index: isMouseAtBottomBorder ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
-        };
-    }
-    // if over one of the section indicators
-    if (isOverTopIndicator || isOverBottomIndicator) {
-        const indexOfSectionInParentChildren = dropReceiverParentNode.children.findIndex((n) => n.data.id === dropReceiverNode.data.id);
-        const APPEND_OUTSIDE = indexOfSectionInParentChildren + 1;
-        const PREPEND_OUTSIDE = indexOfSectionInParentChildren;
-        return {
-            // when the mouse is around the border we want to drop the new component as a new section onto the root node
-            node: dropReceiverParentNode,
-            index: isOverBottomIndicator ? APPEND_OUTSIDE : PREPEND_OUTSIDE,
-        };
-    }
-    if (flexDirection === undefined || flexDirection === 'row') {
-        return {
-            node: dropReceiverNode,
-            index: isMouseInLeftHalf ? PREPEND_INSIDE : APPEND_INSIDE,
-        };
-    }
-    else {
-        return {
-            node: dropReceiverNode,
-            index: isMouseInUpperHalf ? PREPEND_INSIDE : APPEND_INSIDE,
-        };
-    }
-};
-const generateRandomId = (letterCount) => {
-    const LETTERS = 'abcdefghijklmnopqvwxyzABCDEFGHIJKLMNOPQVWXYZ';
-    const NUMS = '0123456789';
-    const ALNUM = NUMS + LETTERS;
-    const times = (n, callback) => Array.from({ length: n }, callback);
-    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-    return times(letterCount, () => ALNUM[random(0, ALNUM.length - 1)]).join('');
-};
-const checkIsAssemblyNode = ({ componentId, usedComponents, }) => {
-    if (!usedComponents?.length)
-        return false;
-    return usedComponents.some((usedComponent) => usedComponent.sys.id === componentId);
-};
-/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
-const checkIsAssembly = checkIsAssemblyNode;
-/**
- * This check assumes that the entry is already ensured to be an experience, i.e. the
- * content type of the entry is an experience type with the necessary annotations.
- **/
-const checkIsAssemblyEntry = (entry) => {
-    return Boolean(entry.fields?.componentSettings);
-};
-const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
-function parseCSSValue(input) {
-    const regex = /^(\d+(\.\d+)?)(px|em|rem)$/;
-    const match = input.match(regex);
-    if (match) {
-        return {
-            value: parseFloat(match[1]),
-            unit: match[3],
-        };
-    }
-    return null;
-}
-function getTargetValueInPixels(targetWidthObject) {
-    switch (targetWidthObject.unit) {
-        case 'px':
-            return targetWidthObject.value;
-        case 'em':
-            return targetWidthObject.value * 16;
-        case 'rem':
-            return targetWidthObject.value * 16;
-        default:
-            return targetWidthObject.value;
-    }
+        else {
+            console.warn(`Expected value to be a string or Link, but got: ${JSON.stringify(value)}`);
+            return undefined;
+        }
+    });
+    return result;
 }
 
-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 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 variable we just return the bound value
+            if (entityOrAsset.sys.type === 'Entry') {
+                return getBoundValue(entityOrAsset, path);
+            }
+            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
+        case 'RichText':
+            return transformRichText(entityOrAsset, entityStore, path);
+        case 'Array':
+            return getArrayValue(entityOrAsset, path, entityStore);
+        case 'Link':
+            return getResolvedEntryFromLink(entityOrAsset, path, entityStore);
+        default:
+            return getBoundValue(entityOrAsset, path);
+    }
 };
 
-const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
-const toCSSMediaQuery = ({ query }) => {
-    if (query === '*')
-        return undefined;
-    const match = query.match(MEDIA_QUERY_REGEXP);
-    if (!match)
-        return undefined;
-    const [, operator, value, unit] = match;
-    if (operator === '<') {
-        const maxScreenWidth = Number(value) - 1;
-        return `(max-width: ${maxScreenWidth}${unit})`;
-    }
-    else if (operator === '>') {
-        const minScreenWidth = Number(value) + 1;
-        return `(min-width: ${minScreenWidth}${unit})`;
+const detachExperienceStyles = (experience) => {
+    const experienceTreeRoot = experience.entityStore?.experienceEntryFields
+        ?.componentTree;
+    if (!experienceTreeRoot) {
+        return;
     }
-    return undefined;
-};
-// Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
-const findLast = (array, predicate) => {
-    return array.reverse().find(predicate);
-};
-// Initialise media query matchers. This won't include the always matching fallback breakpoint.
-const mediaQueryMatcher = (breakpoints) => {
-    const mediaQueryMatches = {};
-    const mediaQueryMatchers = breakpoints
-        .map((breakpoint) => {
-        const cssMediaQuery = toCSSMediaQuery(breakpoint);
-        if (!cssMediaQuery)
-            return undefined;
-        if (typeof window === 'undefined')
-            return undefined;
-        const mediaQueryMatcher = window.matchMedia(cssMediaQuery);
-        mediaQueryMatches[breakpoint.id] = mediaQueryMatcher.matches;
-        return { id: breakpoint.id, signal: mediaQueryMatcher };
-    })
-        .filter((matcher) => !!matcher);
-    return [mediaQueryMatchers, mediaQueryMatches];
-};
-const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
-    // The breakpoints are ordered (desktop-first: descending by screen width)
-    const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
-        id,
-        index,
-        // The fallback breakpoint with wildcard query will always match
-        isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
-    }));
-    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
-    const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
-    return mostSpecificIndex ?? fallbackBreakpointIndex;
-};
-const getFallbackBreakpointIndex = (breakpoints) => {
-    // We assume that there will be a single breakpoint which uses the wildcard query.
-    // If there is none, we just take the first one in the list.
-    return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
-};
-const builtInStylesWithDesignTokens = [
-    'cfMargin',
-    'cfPadding',
-    'cfGap',
-    'cfWidth',
-    'cfHeight',
-    'cfBackgroundColor',
-    'cfBorder',
-    'cfBorderRadius',
-    'cfFontSize',
-    'cfLineHeight',
-    'cfLetterSpacing',
-    'cfTextColor',
-    'cfMaxWidth',
-];
-const isValidBreakpointValue = (value) => {
-    return value !== undefined && value !== null && value !== '';
-};
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName, resolveDesignTokens = true) => {
-    const eventuallyResolveDesignTokens = (value) => {
-        // For some built-in design properties, we support design tokens
-        if (builtInStylesWithDesignTokens.includes(variableName)) {
-            return getDesignTokenRegistration(value, variableName);
+    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'
         }
-        // For all other properties, we just return the breakpoint-specific value
-        return value;
-    };
-    if (valuesByBreakpoint instanceof Object) {
-        // Assume that the values are sorted by media query to apply the cascading CSS logic
-        for (let index = activeBreakpointIndex; index >= 0; index--) {
-            const breakpointId = breakpoints[index]?.id;
-            if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
-                // If the value is defined, we use it and stop the breakpoints cascade
-                if (resolveDesignTokens) {
-                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
+      ]
+     */
+    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, patternWrapper, }) => {
+        // 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?.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,
+                    // pass top-level pattern node to store instance-specific child styles for rendering
+                    patternWrapper: currentNode,
+                });
+                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'
                 }
-                return valuesByBreakpoint[breakpointId];
+               */
+                // 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);
             }
-        }
-        // If no breakpoint matched, we search and apply the fallback breakpoint
-        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
-        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
-        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
-            if (resolveDesignTokens) {
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+            // 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
+            if (patternWrapper) {
+                currentNode.id = currentNode.id ?? generateRandomId(15);
+                // @ts-expect-error -- valueByBreakpoint is not explicitly defined, but it's already defined in the patternWrapper styles
+                patternWrapper.variables.cfSsrClassName = {
+                    ...(patternWrapper.variables.cfSsrClassName ?? {}),
+                    type: 'DesignValue',
+                    [currentNode.id]: {
+                        valuesByBreakpoint: {
+                            [breakpointIds[0]]: currentNodeClassNames.join(' '),
+                        },
+                    },
+                };
             }
-            return valuesByBreakpoint[fallbackBreakpointId];
+            else {
+                currentNode.variables.cfSsrClassName = {
+                    type: 'DesignValue',
+                    valuesByBreakpoint: {
+                        [breakpointIds[0]]: currentNodeClassNames.join(' '),
+                    },
+                };
+            }
+            queue.push(...currentNode.children);
         }
-    }
-    else {
-        // Old design properties did not support breakpoints, keep for backward compatibility
-        return valuesByBreakpoint;
-    }
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isLinkToAsset = (variable) => {
-    if (!variable)
-        return false;
-    if (typeof variable !== 'object')
-        return false;
-    return (variable.sys?.linkType === 'Asset' &&
-        typeof variable.sys?.id === 'string' &&
-        !!variable.sys?.id &&
-        variable.sys?.type === 'Link');
-};
-
-const isLink = (maybeLink) => {
-    if (maybeLink === null)
-        return false;
-    if (typeof maybeLink !== 'object')
-        return false;
-    const link = maybeLink;
-    return Boolean(link.sys?.id) && link.sys?.type === 'Link';
-};
-
-/**
- * This module encapsulates format of the path to a deep reference.
- */
-const parseDataSourcePathIntoFieldset = (path) => {
-    const parsedPath = parseDeepPath(path);
-    if (null === parsedPath) {
-        throw new Error(`Cannot parse path '${path}' as deep path`);
-    }
-    return parsedPath.fields.map((field) => [null, field, '~locale']);
-};
-/**
- * Parse path into components, supports  L1 references (one reference follow) atm.
- * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
- *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
- * @returns
- */
-const parseDataSourcePathWithL1DeepBindings = (path) => {
-    const parsedPath = parseDeepPath(path);
-    if (null === parsedPath) {
-        throw new Error(`Cannot parse path '${path}' as deep path`);
-    }
-    return {
-        key: parsedPath.key,
-        field: parsedPath.fields[0],
-        referentField: parsedPath.fields[1],
     };
+    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;
 };
-/**
- * Detects if paths is valid deep-path, like:
- *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
- * or regular, like:
- *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
- * @returns
- */
-const isDeepPath = (deepPathCandidate) => {
-    const deepPathParsed = parseDeepPath(deepPathCandidate);
-    if (!deepPathParsed) {
-        return false;
-    }
-    return deepPathParsed.fields.length > 1;
+const isCfStyleAttribute = (variableName) => {
+    return CF_STYLE_ATTRIBUTES.includes(variableName);
 };
-const parseDeepPath = (deepPathCandidate) => {
-    // ALGORITHM:
-    // We start with deep path in form:
-    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
-    // First turn string into array of segments
-    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
-    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
-    //      [
-    //        [ "", "uuid123" ],
-    //        [ "fields", "mainStory", "~locale" ],
-    //        [ "fields", "cover", "~locale" ],
-    //        [ "fields", "title", "~locale" ]
-    //      ]
-    // Then check "initial" chunk for corretness
-    // Then check all "field-leading" chunks for correctness
-    const isValidInitialChunk = (initialChunk) => {
-        // must have start with '' and have at least 2 segments, second non-empty
-        // eg. /-_432uuid123123
-        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
-    };
-    const isValidFieldChunk = (fieldChunk) => {
-        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
-        // eg. fields/-32234mainStory/~locale
-        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
-    };
-    const deepPathSegments = deepPathCandidate.split('/');
-    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
-    if (chunks.length <= 1) {
-        return null; // malformed path, even regular paths have at least 2 chunks
+const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignVariableKeys) => {
+    // TODO: refactor to reuse fn from core package
+    if (typeof variableValue !== 'string') {
+        return variableValue;
     }
-    else if (chunks.length === 2) {
-        return null; // deep paths have at least 3 chunks
+    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} `;
     }
-    // With 3+ chunks we can now check for deep path correctness
-    const [initialChunk, ...fieldChunks] = chunks;
-    if (!isValidInitialChunk(initialChunk)) {
-        return null;
+    // 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 (!fieldChunks.every(isValidFieldChunk)) {
-        return null;
+    if (variableData.type === 'ComponentValue') {
+        const variableDefinitionKey = variableData.key;
+        const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
+        // @ts-expect-error TODO: Types coming from validations erroneously assume that `defaultValue` can be a primitive value (e.g. string or number)
+        const defaultValueKey = variableDefinition.defaultValue?.key;
+        const defaultValue = unboundValues[defaultValueKey].value;
+        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
+        // userSetValue is a ComponentValue we can safely return the default value
+        if (!userSetValue || userSetValue.type === 'ComponentValue') {
+            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;
     }
-    return {
-        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
-        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
-    };
-};
-const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
-    const chunks = [];
-    let currentChunk = [];
-    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
-    const excludeEmptyChunks = (chunk) => chunk.length > 0;
-    for (let i = 0; i < segments.length; i++) {
-        const isInitialElement = i === 0;
-        const segment = segments[i];
-        if (isInitialElement) {
-            currentChunk = [segment];
+    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;
         }
-        else if (isSegmentBeginningOfChunk(segment)) {
-            chunks.push(currentChunk);
-            currentChunk = [segment];
+        if (boundEntity.sys.type === 'Asset') {
+            return boundEntity.fields.file?.url;
         }
         else {
-            currentChunk.push(segment);
+            // '/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;
+            }
         }
     }
-    chunks.push(currentChunk);
-    return chunks.filter(excludeEmptyChunks);
 };
-const lastPathNamedSegmentEq = (path, expectedName) => {
-    // `/key123/fields/featureImage/~locale/fields/file/~locale`
-    // ['', 'key123', 'fields', 'featureImage', '~locale', 'fields', 'file', '~locale']
-    const segments = path.split('/');
-    if (segments.length < 2) {
-        console.warn(`[experiences-sdk-react] Attempting to check whether last named segment of the path (${path}) equals to '${expectedName}', but the path doesn't have enough segments.`);
-        return false;
+const 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;
+        }
+        let resolvedVariableData = variableData;
+        if (variableData.type === 'ComponentValue') {
+            const variableDefinition = componentSettings?.variableDefinitions[variableData.key];
+            if (variableDefinition.group === 'style' && variableDefinition.defaultValue !== undefined) {
+                const overrideVariableData = componentVariablesOverwrites?.[variableData.key];
+                resolvedVariableData =
+                    overrideVariableData || variableDefinition.defaultValue;
+            }
+        }
+        if (resolvedVariableData.type !== 'DesignValue') {
+            continue;
+        }
+        for (const [breakpointId, variableValue] of Object.entries(resolvedVariableData.valuesByBreakpoint)) {
+            if (!isValidBreakpointValue(variableValue)) {
+                continue;
+            }
+            variableValuesByBreakpoints[breakpointId] = {
+                ...variableValuesByBreakpoints[breakpointId],
+                [variableName]: variableValue,
+            };
+        }
     }
-    const secondLast = segments[segments.length - 2]; // skipping trailing '~locale'
-    return secondLast === expectedName;
+    return variableValuesByBreakpoints;
 };
-
-const resolveHyperlinkPattern = (pattern, entry, locale) => {
-    if (!entry || !locale)
-        return null;
-    const variables = {
-        entry,
-        locale,
-    };
-    return buildTemplate({ template: pattern, context: variables });
+/**
+ * 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,
+        };
+    }, {});
 };
-function getValue(obj, path) {
-    return path
-        .replace(/\[/g, '.')
-        .replace(/\]/g, '')
-        .split('.')
-        .reduce((o, k) => (o || {})[k], obj);
-}
-function addLocale(str, locale) {
-    const fieldsIndicator = 'fields';
-    const fieldsIndex = str.indexOf(fieldsIndicator);
-    if (fieldsIndex !== -1) {
-        const dotIndex = str.indexOf('.', fieldsIndex + fieldsIndicator.length + 1); // +1 for '.'
-        if (dotIndex !== -1) {
-            return str.slice(0, dotIndex + 1) + locale + '.' + str.slice(dotIndex + 1);
-        }
+// 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;
     }
-    return str;
-}
-function getTemplateValue(ctx, path) {
-    const pathWithLocale = addLocale(path, ctx.locale);
-    const retrievedValue = getValue(ctx, pathWithLocale);
-    return typeof retrievedValue === 'object' && retrievedValue !== null
-        ? retrievedValue[ctx.locale]
-        : retrievedValue;
-}
-function buildTemplate({ template, context, }) {
-    const localeVariable = /{\s*locale\s*}/g;
-    // e.g. "{ page.sys.id }"
-    const variables = /{\s*([\S]+?)\s*}/g;
-    return (template
-        // first replace the locale pattern
-        .replace(localeVariable, context.locale)
-        // then resolve the remaining variables
-        .replace(variables, (_, path) => {
-        const fallback = path + '_NOT_FOUND';
-        const value = getTemplateValue(context, path) ?? fallback;
-        // using _.result didn't gave proper results so we run our own version of it
-        return String(typeof value === 'function' ? value() : value);
-    }));
-}
-
-const stylesToKeep = ['cfImageAsset'];
-const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
-const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
-const sanitizeNodeProps = (nodeProps) => {
-    return omit(nodeProps, stylesToRemove, propsToRemove);
+    const [evaluation, pixelValue] = [
+        breakpointPayload.condition[0],
+        breakpointPayload.condition.substring(1),
+    ];
+    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
+    return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
 };
 
 const sendMessage = (eventType, data) => {
@@ -3228,6 +3228,8 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
+// export function createExperience(args: createExperienceArgs): Experience<EntityStore>;
+// export function createExperience(options: string | createExperienceArgs): Experience<EntityStore> {
 function createExperience(options) {
     if (typeof options === 'string') {
         const entityStore = new EntityStore(options);