@contentful/experiences-core 1.37.3-dev-20250519T0822-4378dab.0 → 1.37.3-dev-20250523T0645-49fc5b0.0

package/dist/index.js

@@ -1378,11 +1378,21 @@ const builtInStylesWithDesignTokens = [
 const isValidBreakpointValue = (value) => {
     return value !== undefined && value !== null && value !== '';
 };
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName, resolveDesignTokens = true) => {
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, 
+/** Provide the name for built-in styles to replace design tokens. Supported properties are:
+ * cfMargin, cfPadding, cfGap, cfWidth, cfHeight, cfBackgroundColor,
+ * cfBorder, cfBorderRadius, cfFontSize, cfLineHeight, cfLetterSpacing,
+ * cfTextColor, cfMaxWidth
+ */
+propertyName, resolveDesignTokens = true) => {
     const eventuallyResolveDesignTokens = (value) => {
+        // This is used externally in the web app to determine the original persisted value
+        if (!resolveDesignTokens) {
+            return value;
+        }
         // For some built-in design properties, we support design tokens
-        if (builtInStylesWithDesignTokens.includes(variableName)) {
-            return getDesignTokenRegistration(value, variableName);
+        if (propertyName && builtInStylesWithDesignTokens.includes(propertyName)) {
+            return getDesignTokenRegistration(value, propertyName);
         }
         // For all other properties, we just return the breakpoint-specific value
         return value;
@@ -1393,18 +1403,12 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
             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]);
-                }
-                return valuesByBreakpoint[breakpointId];
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
             }
         }
         const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
         if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
-            if (resolveDesignTokens) {
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
-            }
-            return valuesByBreakpoint[fallbackBreakpointId];
+            return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
         }
     }
     else {
@@ -2703,7 +2707,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         const optionsVariableName = 'cfImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
+            : {});
         if (!options) {
             console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
             return;
@@ -2728,7 +2732,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         const optionsVariableName = 'cfBackgroundImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
+            : {});
         if (!options) {
             console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
             return;