Release@main

lerna.json

@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "npmClient": "npm",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "command": {
     "version": {
       "allowBranch": ["main", "next", "development"],

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-components-react",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "description": "A basic set of components to use with Studio Experiences",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
   "repository": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-core",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/create-contentful-studio-experiences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-contentful-studio-experiences",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "description": "A CLI tool to get up and running with Contentful Studio Experiences quickly",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/create-contentful-studio-experiences#readme",
   "repository": {

packages/experience-builder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",

packages/experience-builder-sdk/src/hooks/useBreakpoints.ts

@@ -17,7 +17,7 @@ import { useCallback, useEffect, useState } from 'react';
  * and then decending by screen width. For mobile-first designs, the order would be ascending
  */
 export const useBreakpoints = (breakpoints: Breakpoint[]) => {
-  const [mediaQueryMatchers, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
+  const [, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
 
   const [mediaQueryMatches, setMediaQueryMatches] =
     useState<Record<string, boolean>>(initialMediaQueryMatches);
@@ -26,12 +26,14 @@ export const useBreakpoints = (breakpoints: Breakpoint[]) => {
 
   // Register event listeners to update the media query states
   useEffect(() => {
+    const [mediaQueryMatchers] = mediaQueryMatcher(breakpoints);
     const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
       const onChange = () =>
         setMediaQueryMatches((prev) => ({
           ...prev,
           [id]: signal.matches,
         }));
+
       signal.addEventListener('change', onChange);
       return onChange;
     });
@@ -41,7 +43,7 @@ export const useBreakpoints = (breakpoints: Breakpoint[]) => {
         mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);
       });
     };
-  }, [mediaQueryMatchers]);
+  }, [breakpoints]);
 
   const activeBreakpointIndex = getActiveBreakpointIndex(
     breakpoints,

packages/validators/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-validators",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/visual-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-visual-editor-react",
-  "version": "1.30.0",
+  "version": "1.30.1-beta.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",