@contentful/experiences-sdk-react 1.40.2-beta.0 → 1.40.2-dev-20250610T1340-ebbee81.0

package/dist/hooks/useMediaQuery.js

@@ -1,4 +1,4 @@
-import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, addMinHeightForEmptyStructures, buildCfStyles, stringifyCssProperties, toMediaQuery } from '@contentful/experiences-core';
+import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, transformVisibility, stringifyCssProperties, addMinHeightForEmptyStructures, buildCfStyles, toMediaQuery } from '@contentful/experiences-core';
 import md5 from 'md5';
 import { useMemo } from 'react';
 
@@ -15,7 +15,7 @@ import { useMemo } from 'react';
  */
 const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }) => {
     const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);
-    // When the node is hidden  for any breakpoint, we need to handle this separately with a disjunct media query.
+    // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.
     const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some((designProperties) => designProperties.cfVisibility === false);
     // We always need an explicit value when using disjunct media queries
     // Example: desktop uses "false" and tablet is undefined -> we need to set `display: none` for tablet as well.
@@ -42,12 +42,8 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
             const visibilityValue = designPropertiesWithResolvedDesignTokens.cfVisibility ??
                 previousVisibilityValue;
             previousVisibilityValue = visibilityValue;
-            if (visibilityValue === false) {
-                visibilityCss = 'display:none !important;';
-            }
-            else {
-                visibilityCss = '';
-            }
+            const visibilityStyles = transformVisibility(visibilityValue);
+            visibilityCss = stringifyCssProperties(visibilityStyles);
         }
         // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`
         const cfStyles = addMinHeightForEmptyStructures(buildCfStyles(designPropertiesWithResolvedDesignTokens), node);
@@ -77,32 +73,6 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
     }
     return result;
 };
-/**
- * Turns a condition like `<768px` or `>1024px` into a media query rule.
- * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.
- */
-const toMediaQueryRule = (condition) => {
-    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `(${mediaQueryRule}:${pixelValue})`;
-};
-const toDisjunctMediaQuery = ({ className, condition, nextCondition, css, }) => {
-    if (!css) {
-        return '';
-    }
-    if (!nextCondition) {
-        return toMediaQuery({
-            condition,
-            cssByClassName: { [className]: css },
-        });
-    }
-    const nextRule = toMediaQueryRule(nextCondition);
-    if (condition === '*') {
-        return `@media not ${nextRule}{.${className}{${css}}}`;
-    }
-    const currentRule = toMediaQueryRule(condition);
-    return `@media ${currentRule} and (not ${nextRule}){.${className}{${css}}}`;
-};
 /**
  * Takes the CSS code for each breakpoint and merges them into a single CSS string.
  * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
@@ -122,26 +92,22 @@ const toDisjunctMediaQuery = ({ className, condition, nextCondition, css, }) =>
  */
 const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
     const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css, visibilityCss }, index) => {
-        const wrapperMediaQueryCss = toDisjunctMediaQuery({
-            condition: breakpointCondition,
-            className,
-            css: visibilityCss,
-            // Validation ensures that it starts with the '*' breakpoint
-            nextCondition: stylesheetData[index + 1]?.breakpointCondition,
-        });
         if (acc.classNames.includes(className)) {
-            return {
-                classNames: acc.classNames,
-                css: `${acc.css}${wrapperMediaQueryCss}`,
-            };
+            return acc;
         }
         const mediaQueryCss = toMediaQuery({
             condition: breakpointCondition,
             cssByClassName: { [className]: css },
         });
+        const visibilityMediaQueryCss = toMediaQuery({
+            condition: breakpointCondition,
+            cssByClassName: { [className]: visibilityCss ?? '' },
+            // Validation ensures that it starts with the '*' breakpoint
+            nextCondition: stylesheetData[index + 1]?.breakpointCondition,
+        });
         return {
             classNames: [...acc.classNames, className],
-            css: `${acc.css}${mediaQueryCss}${wrapperMediaQueryCss}`,
+            css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,
         };
     }, {
         classNames: [],

package/dist/hooks/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n  addMinHeightForEmptyStructures,\n  designTokensRegistry,\n  flattenDesignTokenRegistry,\n  maybePopulateDesignTokenValue,\n  stringifyCssProperties,\n  toMediaQuery,\n  buildCfStyles,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype ResolvedStylesheetData = Array<{\n  className: string;\n  breakpointCondition: string;\n  css: string;\n  visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n *   { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n *   { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: string;\n}): ResolvedStylesheetData => {\n  const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n  // When the node is hidden  for any breakpoint, we need to handle this separately with a disjunct media query.\n  const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n    (designProperties) => designProperties.cfVisibility === false,\n  );\n  // We always need an explicit value when using disjunct media queries\n  // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n  let previousVisibilityValue: boolean | undefined;\n\n  const result: Array<{\n    className: string;\n    breakpointCondition: string;\n    css: string;\n    visibilityCss?: string;\n  }> = [];\n\n  for (const breakpoint of breakpoints) {\n    let visibilityCss: string | undefined;\n    const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n    if (!designProperties) {\n      continue;\n    }\n\n    const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n      (acc, [propertyName, value]) => ({\n        ...acc,\n        [propertyName]: maybePopulateDesignTokenValue(\n          propertyName,\n          value,\n          flattenedDesignTokens,\n        ) as string,\n      }),\n      {} as Record<string, PrimitiveValue>,\n    );\n    /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n     * designPropertiesWithResolvedDesignTokens = {\n     *   cfMargin: '42px',\n     *   cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n    if (isAnyVisibilityValueHidden) {\n      const visibilityValue =\n        (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n        previousVisibilityValue;\n      previousVisibilityValue = visibilityValue;\n      if (visibilityValue === false) {\n        visibilityCss = 'display:none !important;';\n      } else {\n        visibilityCss = '';\n      }\n    }\n\n    // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n    const cfStyles = addMinHeightForEmptyStructures(\n      buildCfStyles(designPropertiesWithResolvedDesignTokens),\n      node,\n    );\n    /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n     * cfStyles = {\n     *   margin: '42px',\n     *   backgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n    const breakpointCss = stringifyCssProperties(cfStyles);\n    /* [Data Format] `breakpointCss`:\n     * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n     */\n\n    // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n    const styleHash = patternRootNodeIdsChain\n      ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)\n      : md5(`${node.id}-${breakpointCss}`);\n\n    // Create a CSS className with internal prefix to make sure the value can be processed\n    const className = `cfstyles-${styleHash}`;\n\n    result.push({\n      className,\n      breakpointCondition: breakpoint.query,\n      css: breakpointCss,\n      visibilityCss,\n    });\n  }\n\n  return result;\n};\n\n/**\n * Turns a condition like `<768px` or `>1024px` into a media query rule.\n * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.\n */\nconst toMediaQueryRule = (condition: string) => {\n  const [evaluation, pixelValue] = [condition[0], condition.substring(1)];\n  const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';\n  return `(${mediaQueryRule}:${pixelValue})`;\n};\n\nconst toDisjunctMediaQuery = ({\n  className,\n  condition,\n  nextCondition,\n  css,\n}: {\n  className: string;\n  condition: string;\n  nextCondition?: string;\n  css?: string;\n}) => {\n  if (!css) {\n    return '';\n  }\n  if (!nextCondition) {\n    return toMediaQuery({\n      condition,\n      cssByClassName: { [className]: css },\n    });\n  }\n  const nextRule = toMediaQueryRule(nextCondition);\n  if (condition === '*') {\n    return `@media not ${nextRule}{.${className}{${css}}}`;\n  }\n\n  const currentRule = toMediaQueryRule(condition);\n  return `@media ${currentRule} and (not ${nextRule}){.${className}{${css}}}`;\n};\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },\n *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n  const stylesheet = stylesheetData.reduce(\n    (acc, { breakpointCondition, className, css, visibilityCss }, index) => {\n      const wrapperMediaQueryCss = toDisjunctMediaQuery({\n        condition: breakpointCondition,\n        className,\n        css: visibilityCss,\n        // Validation ensures that it starts with the '*' breakpoint\n        nextCondition: stylesheetData[index + 1]?.breakpointCondition,\n      });\n\n      if (acc.classNames.includes(className)) {\n        return {\n          classNames: acc.classNames,\n          css: `${acc.css}${wrapperMediaQueryCss}`,\n        };\n      }\n\n      const mediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: css },\n      });\n      return {\n        classNames: [...acc.classNames, className],\n        css: `${acc.css}${mediaQueryCss}${wrapperMediaQueryCss}`,\n      };\n    },\n    {\n      classNames: [] as string[],\n      css: '',\n    },\n  );\n\n  return {\n    css: stylesheet.css,\n    className: stylesheet.classNames.join(' '),\n  };\n};\n\nexport const useMediaQuery = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, any>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: string;\n}) => {\n  return useMemo(() => {\n    const stylesheetData = createStylesheetsForBuiltInStyles({\n      designPropertiesByBreakpoint,\n      breakpoints,\n      node,\n      patternRootNodeIdsChain,\n    });\n\n    return convertResolvedDesignValuesToMediaQuery(stylesheetData);\n  }, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n  addMinHeightForEmptyStructures,\n  designTokensRegistry,\n  flattenDesignTokenRegistry,\n  maybePopulateDesignTokenValue,\n  stringifyCssProperties,\n  toMediaQuery,\n  buildCfStyles,\n  transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype ResolvedStylesheetData = Array<{\n  className: string;\n  breakpointCondition: string;\n  css: string;\n  visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n *   { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n *   { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: string;\n}): ResolvedStylesheetData => {\n  const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n  // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n  const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n    (designProperties) => designProperties.cfVisibility === false,\n  );\n  // We always need an explicit value when using disjunct media queries\n  // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n  let previousVisibilityValue: boolean | undefined;\n\n  const result: Array<{\n    className: string;\n    breakpointCondition: string;\n    css: string;\n    visibilityCss?: string;\n  }> = [];\n\n  for (const breakpoint of breakpoints) {\n    let visibilityCss: string | undefined;\n    const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n    if (!designProperties) {\n      continue;\n    }\n\n    const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n      (acc, [propertyName, value]) => ({\n        ...acc,\n        [propertyName]: maybePopulateDesignTokenValue(\n          propertyName,\n          value,\n          flattenedDesignTokens,\n        ) as string,\n      }),\n      {} as Record<string, PrimitiveValue>,\n    );\n    /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n     * designPropertiesWithResolvedDesignTokens = {\n     *   cfMargin: '42px',\n     *   cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n    if (isAnyVisibilityValueHidden) {\n      const visibilityValue =\n        (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n        previousVisibilityValue;\n      previousVisibilityValue = visibilityValue;\n      const visibilityStyles = transformVisibility(visibilityValue);\n      visibilityCss = stringifyCssProperties(visibilityStyles);\n    }\n\n    // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n    const cfStyles = addMinHeightForEmptyStructures(\n      buildCfStyles(designPropertiesWithResolvedDesignTokens),\n      node,\n    );\n    /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n     * cfStyles = {\n     *   margin: '42px',\n     *   backgroundColor: 'rgba(246, 246, 246, 1)',\n     * }\n     */\n\n    // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n    const breakpointCss = stringifyCssProperties(cfStyles);\n    /* [Data Format] `breakpointCss`:\n     * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n     */\n\n    // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n    const styleHash = patternRootNodeIdsChain\n      ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)\n      : md5(`${node.id}-${breakpointCss}`);\n\n    // Create a CSS className with internal prefix to make sure the value can be processed\n    const className = `cfstyles-${styleHash}`;\n\n    result.push({\n      className,\n      breakpointCondition: breakpoint.query,\n      css: breakpointCss,\n      visibilityCss,\n    });\n  }\n\n  return result;\n};\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },\n *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n  const stylesheet = stylesheetData.reduce(\n    (acc, { breakpointCondition, className, css, visibilityCss }, index) => {\n      if (acc.classNames.includes(className)) {\n        return acc;\n      }\n\n      const mediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: css },\n      });\n      const visibilityMediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: visibilityCss ?? '' },\n        // Validation ensures that it starts with the '*' breakpoint\n        nextCondition: stylesheetData[index + 1]?.breakpointCondition,\n      });\n      return {\n        classNames: [...acc.classNames, className],\n        css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,\n      };\n    },\n    {\n      classNames: [] as string[],\n      css: '',\n    },\n  );\n\n  return {\n    css: stylesheet.css,\n    className: stylesheet.classNames.join(' '),\n  };\n};\n\nexport const useMediaQuery = ({\n  designPropertiesByBreakpoint,\n  breakpoints,\n  node,\n  patternRootNodeIdsChain,\n}: {\n  designPropertiesByBreakpoint: Record<string, Record<string, any>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  patternRootNodeIdsChain?: string;\n}) => {\n  return useMemo(() => {\n    const stylesheetData = createStylesheetsForBuiltInStyles({\n      designPropertiesByBreakpoint,\n      breakpoints,\n      node,\n      patternRootNodeIdsChain,\n    });\n\n    return convertResolvedDesignValuesToMediaQuery(stylesheetData);\n  }, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "1.40.2-beta.0";
+declare const SDK_VERSION = "1.40.2-dev-20250610T1340-ebbee81.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '1.40.2-beta.0';
+const SDK_VERSION = '1.40.2-dev-20250610T1340-ebbee81.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.40.2-beta.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.40.2-dev-20250610T1340-ebbee81.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.40.2-beta.0";
+export declare const SDK_VERSION = "1.40.2-dev-20250610T1340-ebbee81.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.40.2-beta.0",
+  "version": "1.40.2-dev-20250610T1340-ebbee81.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "1.40.2-beta.0",
-    "@contentful/experiences-core": "1.40.2-beta.0",
-    "@contentful/experiences-validators": "1.40.2-beta.0",
-    "@contentful/experiences-visual-editor-react": "1.40.2-beta.0",
+    "@contentful/experiences-components-react": "1.40.2-dev-20250610T1340-ebbee81.0",
+    "@contentful/experiences-core": "1.40.2-dev-20250610T1340-ebbee81.0",
+    "@contentful/experiences-validators": "1.40.2-dev-20250610T1340-ebbee81.0",
+    "@contentful/experiences-visual-editor-react": "1.40.2-dev-20250610T1340-ebbee81.0",
     "@contentful/rich-text-types": "^17.0.0",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
@@ -102,5 +102,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "179d28e4e3ed662c36f20cd45c449ac2f8598312"
+  "gitHead": "13765bab48b36b9b1aa162d8ee812d646450468f"
 }