@contentful/experiences-core 3.8.3 → 3.8.4-beta.1

package/dist/esm/index.js

@@ -2838,37 +2838,32 @@ const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignV
     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;
+    // matches ${...} and captures the content between ${ and }
+    // ${color.Blue}, ${spacing.Sizes.Large} or ${border.Text Heading.Small}
+    const templateStringRegex = /\$\{(\w[^}]*)}/g;
+    const result = variableValue
+        .replace(templateStringRegex, (_, rawKey) => {
+        const value = mapOfDesignVariableKeys[rawKey];
+        if (!value) {
+            if (builtInStyles[variableName]?.defaultValue) {
+                return String(builtInStyles[variableName].defaultValue);
             }
-            if (optionalBuiltInStyles[variableName]) {
-                return optionalBuiltInStyles[variableName].defaultValue;
+            if (optionalBuiltInStyles[variableName]?.defaultValue) {
+                return String(optionalBuiltInStyles[variableName].defaultValue);
             }
             return '0px';
         }
         if (variableName === 'cfBorder' || variableName.startsWith('cfBorder_')) {
-            if (typeof tokenValue === 'object') {
-                const { width, style, color } = tokenValue;
+            if (typeof value === 'object') {
+                const { width, style, color } = value;
                 return `${width} ${style} ${color}`;
             }
         }
-        return tokenValue;
-    };
-    const templateStringRegex = /\${(.+?)}/g;
-    const parts = variableValue.split(' ');
-    let resolvedValue = '';
-    for (const part of parts) {
-        const tokenValue = templateStringRegex.test(part)
-            ? resolveSimpleDesignToken(variableName, part)
-            : part;
-        resolvedValue += `${tokenValue} `;
-    }
-    // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
-    return resolvedValue.trim();
+        return String(value);
+    })
+        // Replace all multiple spaces with a single space
+        .replace(/  +/g, ' ');
+    return result;
 };
 const transformMedia$1 = (boundAsset, width, options) => {
     try {
@@ -2924,6 +2919,11 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
         // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
         const [, uuid] = variableData.path.split('/');
         const binding = dataSource[uuid];
+        // Safeguard against edge cases - we should not have bound style values that do not have a data source entry.
+        // However, just in case, we handle it here as empty and allow the user to replace without errors.
+        if (!binding) {
+            return;
+        }
         const boundEntity = getBoundEntityById(binding.sys.id);
         if (!boundEntity) {
             return;
@@ -3090,18 +3090,30 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
  * `{ '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,
-            };
+    const flattenObject = (obj, prefix = '') => {
+        return Object.entries(obj).reduce((acc, [key, value]) => {
+            const newKey = prefix ? `${prefix}.${key}` : key;
+            if (value &&
+                typeof value === 'object' &&
+                !Array.isArray(value) &&
+                // handle border types
+                !(typeof value === 'object' && ('width' in value || 'style' in value || 'color' in value))) {
+                // Recursively flatten nested objects, but skip objects that look like border definitions
+                return {
+                    ...acc,
+                    ...flattenObject(value, newKey),
+                };
+            }
+            else {
+                // This is a leaf value (string, number, or border object)
+                return {
+                    ...acc,
+                    [newKey]: value,
+                };
+            }
         }, {});
-        return {
-            ...acc,
-            ...tokensWithCategory,
-        };
-    }, {});
+    };
+    return flattenObject(designTokenRegistry);
 };
 function mergeDefaultAndOverwriteValues(defaultValue, overwriteValue) {
     if (defaultValue?.type === 'DesignValue' && overwriteValue?.type === 'DesignValue') {