@builder.io/sdk-react 0.0.2 → 0.0.4

package/packages/_rsc/src/helpers/url.test.js

@@ -0,0 +1,15 @@
+import { getTopLevelDomain } from "./url.js";
+describe("getTopLevelDomain", () => {
+  test("handles root domain", () => {
+    const output = getTopLevelDomain("example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain", () => {
+    const output = getTopLevelDomain("wwww.example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain with long suffix", () => {
+    const output = getTopLevelDomain("www.example.co.uk");
+    expect(output).toBe("example.co.uk");
+  });
+});

package/packages/_rsc/src/helpers/uuid.js

@@ -0,0 +1,13 @@
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function uuid() {
+  return uuidv4().replace(/-/g, "");
+}
+export {
+  uuid,
+  uuidv4
+};

package/packages/_rsc/src/helpers/visitorId.js

@@ -0,0 +1,33 @@
+import { getLocalStorageItem, setLocalStorageItem } from "./localStorage.js";
+import { checkIsDefined } from "./nullable.js";
+import { uuid } from "./uuid.js";
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
+const getVisitorId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const visitorId = getLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    canTrack
+  });
+  if (checkIsDefined(visitorId)) {
+    return visitorId;
+  } else {
+    const newVisitorId = createVisitorId();
+    setVisitorId({ id: newVisitorId, canTrack });
+  }
+};
+const createVisitorId = () => uuid();
+const setVisitorId = ({
+  id,
+  canTrack
+}) => setLocalStorageItem({
+  key: VISITOR_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+});
+export {
+  createVisitorId,
+  getVisitorId,
+  setVisitorId
+};

package/packages/_rsc/src/index-helpers/blocks-exports.js

@@ -0,0 +1,22 @@
+import { default as default2 } from "../blocks/columns/columns.js";
+import { default as default3 } from "../blocks/image/image.js";
+import { default as default4 } from "../blocks/text/text.js";
+import { default as default5 } from "../blocks/video/video.js";
+import { default as default6 } from "../blocks/symbol/symbol.js";
+import { default as default7 } from "../blocks/button/button.js";
+import { default as default8 } from "../blocks/section/section.js";
+import { default as default9 } from "../blocks/fragment/fragment.js";
+import { default as default10 } from "../components/render-content/render-content.js";
+import { default as default11 } from "../components/render-blocks.js";
+export {
+  default7 as Button,
+  default2 as Columns,
+  default9 as Fragment,
+  default3 as Image,
+  default11 as RenderBlocks,
+  default10 as RenderContent,
+  default8 as Section,
+  default6 as Symbol,
+  default4 as Text,
+  default5 as Video
+};

package/packages/_rsc/src/index-helpers/top-of-file.js

@@ -0,0 +1,2 @@
+export * from "../components/render-content/builder-editing";
+export * from "../constants/builder-registered-components";

package/packages/_rsc/src/index.js

@@ -0,0 +1,14 @@
+export * from "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track";
+export {
+  track
+};

package/packages/_rsc/src/scripts/init-editing.js

@@ -0,0 +1,93 @@
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { register } from "../functions/register.js";
+const registerInsertMenu = () => {
+  register("insertMenu", {
+    name: "_default",
+    default: true,
+    items: [
+      { name: "Box" },
+      { name: "Text" },
+      { name: "Image" },
+      { name: "Columns" },
+      ...TARGET === "reactNative" ? [] : [
+        { name: "Core:Section" },
+        { name: "Core:Button" },
+        { name: "Embed" },
+        { name: "Custom Code" }
+      ]
+    ]
+  });
+};
+let isSetupForEditing = false;
+const setupBrowserForEditing = (options = {}) => {
+  var _a, _b;
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
+  if (isBrowser()) {
+    (_a = window.parent) == null ? void 0 : _a.postMessage({
+      type: "builder.sdkInfo",
+      data: {
+        target: TARGET,
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
+      }
+    }, "*");
+    (_b = window.parent) == null ? void 0 : _b.postMessage({
+      type: "builder.updateContent",
+      data: {
+        options
+      }
+    }, "*");
+    window.addEventListener("message", ({ data }) => {
+      var _a2, _b2;
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+                  type: "builder.evaluateResult",
+                  data: { id, result: finalResult }
+                }, "*");
+              }).catch(console.error);
+            } else {
+              (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
+            }
+          }
+          break;
+        }
+      }
+    });
+  }
+};
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};

package/src/blocks/button/button.jsx

@@ -19,13 +19,14 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 function Button(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({}, props.attributes), {
-    role: "button",
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
+    role: "button"
+  }, props.attributes), {
     href: props.link,
     target: props.openLinkInNewTab ? "_blank" : void 0
-  }), props.text)) : /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props.attributes), {
-    className: "button-31efdaa8"
-  }), props.text), /* @__PURE__ */ React.createElement("style", null, `.button-31efdaa8 { 
+  }), props.text)) : /* @__PURE__ */ React.createElement("button", __spreadValues({
+    className: "button-7028b0a4"
+  }, props.attributes), props.text), /* @__PURE__ */ React.createElement("style", null, `.button-7028b0a4 { 
 all: unset; }`));
 }
 export {

package/src/blocks/columns/columns.jsx

@@ -16,7 +16,6 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import RenderBlocks from "../../components/render-blocks.jsx";
-import { markMutable } from "../../functions/mark-mutable";
 function Columns(props) {
   var _a;
   function getGutterSize() {
@@ -58,33 +57,33 @@ function Columns(props) {
     };
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div-4fe0d43b",
+    className: "builder-columns div-48253552",
     style: columnsCssVars()
   }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-4fe0d43b-2",
+    className: "builder-column div-48253552-2",
     style: __spreadValues({
       width: getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
     }, columnCssVars()),
     key: index
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: markMutable(column.blocks),
+    blocks: column.blocks,
     path: `component.options.columns.${index}.blocks`,
     parent: props.builderBlock.id,
     styleProp: {
       flexGrow: "1"
     }
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-4fe0d43b { 
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-48253552 { 
 display: flex;
 align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-4fe0d43b { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-4fe0d43b { 
-flex-direction: var(--flex-dir); } }.div-4fe0d43b-2 { 
+line-height: normal; }@media (max-width: 991px) { .div-48253552 { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-48253552 { 
+flex-direction: var(--flex-dir); } }.div-48253552-2 { 
 display: flex;
 flex-direction: column;
-align-items: stretch; }@media (max-width: 991px) { .div-4fe0d43b-2 { 
+align-items: stretch; }@media (max-width: 991px) { .div-48253552-2 { 
 width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-4fe0d43b-2 { 
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-48253552-2 { 
 width: var(--column-width) !important;
 margin-left: var(--column-margin-left) !important; } }`));
 }

package/src/blocks/columns/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -187,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");

package/src/blocks/embed/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -10,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");

package/src/blocks/form/form.jsx

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -192,14 +189,14 @@ function FormComponent(props) {
     }
   }
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("form", __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("form", __spreadValues({
     validate: props.validate,
     ref: formRef,
     action: !props.sendWithJs && props.action,
     method: props.method,
     name: props.name,
     onSubmit: (event) => onSubmit(event)
-  }), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }, props.attributes), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
     block,
     context: builderContext
   }))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
@@ -209,11 +206,11 @@ function FormComponent(props) {
     dataPath: "sendingMessage",
     blocks: props.sendingMessage
   })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("pre", {
-    className: "builder-form-error-text pre-928514ea"
+    className: "builder-form-error-text pre-bdd3175a"
   }, " ", JSON.stringify(responseData, null, 2), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
     dataPath: "successMessage",
     blocks: props.successMessage
-  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-928514ea {  padding: 10px; color: red; text-align: center; }`), " ");
+  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-bdd3175a {  padding: 10px; color: red; text-align: center; }`), " ");
 }
 export {
   FormComponent as default

package/src/blocks/image/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -19,7 +19,7 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");

package/src/blocks/image/image.jsx

@@ -1,3 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
 function Image(props) {
@@ -27,6 +43,17 @@ function Image(props) {
       return "";
     }
   }
+  function aspectRatioCss() {
+    const aspectRatioStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      left: "0px",
+      top: "0px"
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : void 0;
+    return out;
+  }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
     type: "image/webp",
     srcSet: webpSrcSet()
@@ -34,34 +61,29 @@ function Image(props) {
     loading: "lazy",
     alt: props.altText,
     role: props.altText ? "presentation" : void 0,
-    style: {
-      objectPosition: props.backgroundSize || "center",
+    style: __spreadValues({
+      objectPosition: props.backgroundPosition || "center",
       objectFit: props.backgroundSize || "cover"
-    },
-    className: "builder-image" + (props.className ? " " + props.className : "") + " img-6cfc0cdc",
+    }, aspectRatioCss()),
+    className: "builder-image" + (props.className ? " " + props.className : "") + " img-35d6dc22",
     src: props.image,
     srcSet: srcSetToUse(),
     sizes: props.sizes
   }), /* @__PURE__ */ React.createElement("source", {
     srcSet: srcSetToUse()
   })), props.aspectRatio && !(((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && props.fitContent) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer div-6cfc0cdc",
+    className: "builder-image-sizer div-35d6dc22",
     style: {
       paddingTop: props.aspectRatio * 100 + "%"
     }
   })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent && props.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-6cfc0cdc-2"
-  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-6cfc0cdc { 
+    className: "div-35d6dc22-2"
+  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-35d6dc22 { 
 opacity: 1;
-transition: opacity 0.2s ease-in-out;
-position: absolute;
-height: 100%;
-width: 100%;
-top: 0px;
-left: 0px; }.div-6cfc0cdc { 
+transition: opacity 0.2s ease-in-out; }.div-35d6dc22 { 
 width: 100%;
 pointer-events: none;
-font-size: 0; }.div-6cfc0cdc-2 { 
+font-size: 0; }.div-35d6dc22-2 { 
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/src/blocks/img/img.jsx

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,11 +14,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 function ImgComponent(props) {
-  return /* @__PURE__ */ React.createElement("img", __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement("img", __spreadValues({
     style: {
       objectFit: props.backgroundSize || "cover",
       objectPosition: props.backgroundPosition || "center"
@@ -28,7 +25,7 @@ function ImgComponent(props) {
     key: isEditing() && props.imgSrc || "default-key",
     alt: props.altText,
     src: props.imgSrc || props.image
-  }));
+  }, props.attributes));
 }
 export {
   ImgComponent as default

package/src/blocks/submit-button/submit-button.jsx

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,12 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 function SubmitButton(props) {
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement("button", __spreadValues({
     type: "submit"
-  }), props.text);
+  }, props.attributes), props.text);
 }
 export {
   SubmitButton as default

package/src/blocks/symbol/symbol.jsx

@@ -22,7 +22,6 @@ import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import { markMutable } from "../../functions/mark-mutable";
 function Symbol(props) {
   var _a, _b, _c, _d, _e;
   const [className, setClassName] = useState(() => "builder-symbol");
@@ -54,10 +53,10 @@ function Symbol(props) {
   }), /* @__PURE__ */ React.createElement(RenderContent, {
     apiKey: builderContext.apiKey,
     context: builderContext.context,
-    customComponents: markMutable(Object.values(builderContext.registeredComponents)),
-    data: markMutable(__spreadValues(__spreadValues(__spreadValues({}, (_a = props.symbol) == null ? void 0 : _a.data), builderContext.state), (_d = (_c = (_b = props.symbol) == null ? void 0 : _b.content) == null ? void 0 : _c.data) == null ? void 0 : _d.state)),
+    customComponents: Object.values(builderContext.registeredComponents),
+    data: __spreadValues(__spreadValues(__spreadValues({}, (_a = props.symbol) == null ? void 0 : _a.data), builderContext.state), (_d = (_c = (_b = props.symbol) == null ? void 0 : _b.content) == null ? void 0 : _c.data) == null ? void 0 : _d.state),
     model: (_e = props.symbol) == null ? void 0 : _e.model,
-    content: markMutable(contentToUse())
+    content: contentToUse()
   }));
 }
 export {

package/src/blocks/util.js

@@ -1,7 +1,8 @@
-function markSerializable(fn) {
-  fn.__qwik_serializable__ = true;
-  return fn;
-}
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
 export {
-  markSerializable
+  serializeFn
 };

package/src/components/render-block/block-styles.jsx

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
+} from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
@@ -14,7 +17,10 @@ function BlockStyles(props) {
     });
   }
   function css() {
+    var _a;
     const styles = useBlock().responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
@@ -26,12 +32,12 @@ function BlockStyles(props) {
     const mediumStylesClass = mediumStyles ? createCssClass({
       className,
       styles: mediumStyles,
-      mediaQuery: getMaxWidthQueryForSize("medium")
+      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
     }) : "";
     const smallStylesClass = smallStyles ? createCssClass({
       className,
       styles: smallStyles,
-      mediaQuery: getMaxWidthQueryForSize("small")
+      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }