@builder.io/sdk-qwik 0.0.36 → 0.0.38

package/lib/index.qwik.mjs

@@ -46,7 +46,7 @@ const registerInsertMenu = ()=>{
             {
                 name: 'Columns'
             },
-            ...TARGET === 'reactNative' ? [] : [
+            ...[
                 {
                     name: 'Core:Section'
                 },
@@ -64,7 +64,7 @@ const registerInsertMenu = ()=>{
     });
 };
 let isSetupForEditing = false;
-const setupBrowserForEditing = ()=>{
+const setupBrowserForEditing = (options = {})=>{
     if (isSetupForEditing) return;
     isSetupForEditing = true;
     if (isBrowser()) {
@@ -82,6 +82,12 @@ const setupBrowserForEditing = ()=>{
                 supportsCustomBreakpoints: true
             }
         }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options
+            }
+        }, '*');
         window.addEventListener('message', ({ data  })=>{
             if (!data?.type) return;
             switch(data.type){
@@ -186,7 +192,7 @@ const getSizesForBreakpoints = ({ small , medium  })=>{
     return newSizes;
 };
 
-function evaluate({ code , context , state , event  }) {
+function evaluate({ code , context , state , event , isExpression =true  }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -198,12 +204,13 @@ function evaluate({ code , context , state , event  }) {
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
+    const useReturn = // we disable this for cases where we definitely don't want a return
+    isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
         return new Function('builder', 'Builder' /* <- legacy */ , 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
     } catch (e) {
-        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }
 
@@ -259,15 +266,19 @@ function getProcessedBlock({ block , context , shouldEvaluateBindings , state  }
 
 const camelToKebabCase = (string)=>string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
 
-const convertStyleMaptoCSS = (style)=>{
+const checkIsDefined = (maybeT)=>maybeT !== null && maybeT !== undefined;
+
+const convertStyleMapToCSSArray = (style)=>{
     const cssProps = Object.entries(style).map(([key, value])=>{
         if (typeof value === 'string') return `${camelToKebabCase(key)}: ${value};`;
+        else return undefined;
     });
-    return cssProps.join('\n');
+    return cssProps.filter(checkIsDefined);
 };
+const convertStyleMapToCSS = (style)=>convertStyleMapToCSSArray(style).join('\n');
 const createCssClass = ({ mediaQuery , className , styles  })=>{
     const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
     if (mediaQuery) return `${mediaQuery} {
       ${cssClass}
@@ -331,7 +342,7 @@ const css = function css(props, state) {
 };
 const BlockStyles = (props)=>{
     return /*#__PURE__*/ jsx(Fragment$1, {
-        children: TARGET !== "reactNative" && css(props) ? /*#__PURE__*/ jsx(RenderInlinedStyles$1, {
+        children: css(props) ? /*#__PURE__*/ jsx(RenderInlinedStyles$1, {
             styles: css(props)
         }) : null
     });
@@ -343,7 +354,7 @@ function capitalizeFirstLetter(string) {
 }
 const getEventHandlerName = (key)=>`on${capitalizeFirstLetter(key)}$`;
 
-function crateEventHandler(value, options) {
+function createEventHandler(value, options) {
     return inlinedQrl((event)=>{
         const [options, value] = useLexicalScope();
         return evaluate({
@@ -352,7 +363,7 @@ function crateEventHandler(value, options) {
             state: options.state,
             event
         });
-    }, "crateEventHandler_wgxT8Hlq4s8", [
+    }, "createEventHandler_7wCAiJVliNE", [
         options,
         value
     ]);
@@ -365,33 +376,11 @@ function getBlockActions(options) {
         // eslint-disable-next-line no-prototype-builtins
         if (!optionActions.hasOwnProperty(key)) continue;
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
     }
     return obj;
 }
 
-function getBlockBindings(state, block) {
-    const props = {};
-    const bindings = block.bindings;
-    if (bindings) for(const key in bindings){
-        if (key.startsWith('component.')) ;
-        else if (key.startsWith('style.')) {
-            const styleKey = key.substring(6);
-            const style = props.style || (props.style = {});
-            style[styleKey] = evaluate({
-                code: bindings[key],
-                state,
-                context: {}
-            });
-        } else props[key] = evaluate({
-            code: bindings[key],
-            state,
-            context: {}
-        });
-    }
-    return props;
-}
-
 function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
@@ -402,10 +391,15 @@ function getBlockComponentOptions(block) {
     };
 }
 
+function transformBlockProperties(properties) {
+    return properties;
+}
+
 function getBlockProperties(block) {
-    return {
+    const properties = {
         ...block.properties,
         'builder-id': block.id,
+        style: getStyleAttribute(block.style),
         class: [
             block.id,
             'builder-block',
@@ -413,6 +407,25 @@ function getBlockProperties(block) {
             block.properties?.class
         ].filter(Boolean).join(' ')
     };
+    return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */ function getStyleAttribute(style) {
+    if (!style) return undefined;
+    switch(TARGET){
+        case 'svelte':
+        case 'vue2':
+        case 'vue3':
+        case 'solid':
+            return convertStyleMapToCSSArray(style).join(' ');
+        case 'qwik':
+        case 'reactNative':
+        case 'react':
+            return style;
+    }
 }
 
 function getBlockTag(block) {
@@ -476,51 +489,6 @@ const RenderComponent = (props)=>{
 };
 const RenderComponent$1 = RenderComponent;
 
-// GENERATED BY MITOSIS
-const RenderComponentWithContext = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
-    useContextProvider(BuilderContext, useStore({
-        content: (()=>{
-            return props.context.content;
-        })(),
-        state: (()=>{
-            return props.context.state;
-        })(),
-        context: (()=>{
-            return props.context.context;
-        })(),
-        apiKey: (()=>{
-            return props.context.apiKey;
-        })(),
-        registeredComponents: (()=>{
-            return props.context.registeredComponents;
-        })(),
-        inheritedStyles: (()=>{
-            return props.context.inheritedStyles;
-        })()
-    }));
-    return /*#__PURE__*/ jsx(RenderComponent$1, {
-        get componentRef () {
-            return props.componentRef;
-        },
-        get componentOptions () {
-            return props.componentOptions;
-        },
-        get blockChildren () {
-            return props.blockChildren;
-        },
-        get context () {
-            return props.context;
-        },
-        [_IMMUTABLE]: {
-            componentRef: _wrapSignal(props, "componentRef"),
-            componentOptions: _wrapSignal(props, "componentOptions"),
-            blockChildren: _wrapSignal(props, "blockChildren"),
-            context: _wrapSignal(props, "context")
-        }
-    });
-}, "RenderComponentWithContext_component_nXOUbUnjTAo"));
-const RenderComponentWithContext$1 = RenderComponentWithContext;
-
 // GENERATED BY MITOSIS
 /**
  * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
@@ -595,15 +563,17 @@ const useBlock = function useBlock(props, state) {
         shouldEvaluateBindings: true
     });
 };
+const actions = function actions(props, state) {
+    return getBlockActions({
+        block: useBlock(props),
+        state: props.context.state,
+        context: props.context.context
+    });
+};
 const attributes = function attributes(props, state) {
+    const blockProperties = getBlockProperties(useBlock(props));
     return {
-        ...getBlockProperties(useBlock(props)),
-        ...getBlockBindings(props.context.state, useBlock(props)),
-        ...getBlockActions({
-            block: useBlock(props),
-            state: props.context.state,
-            context: props.context.context
-        }),
+        ...blockProperties,
         ...{}
     };
 };
@@ -620,8 +590,12 @@ const renderComponentProps = function renderComponentProps(props, state) {
        * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
        * they are provided to the component itself directly.
        */ ...shouldWrap(props) ? {} : {
-                attributes: attributes(props)
-            }
+                attributes: {
+                    ...attributes(props),
+                    ...actions(props)
+                }
+            },
+            customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
         },
         context: childrenContext(props)
     };
@@ -685,8 +659,7 @@ const childrenContext = function childrenContext(props, state) {
     };
 };
 const renderComponentTag = function renderComponentTag(props, state) {
-    if (TARGET === "reactNative") return RenderComponentWithContext$1;
-    else return RenderComponent$1;
+    return RenderComponent$1;
 };
 const RenderBlock = (props)=>{
     const state = {};
@@ -696,7 +669,8 @@ const RenderBlock = (props)=>{
         children: shouldWrap(props) ? /*#__PURE__*/ jsxs(Fragment$1, {
             children: [
                 isEmptyHtmlElement(tag(props)) ? /*#__PURE__*/ jsx(state.tag, {
-                    ...attributes(props)
+                    ...attributes(props),
+                    ...actions(props)
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
                     return /*#__PURE__*/ jsx(RenderRepeatedBlock$1, {
@@ -714,6 +688,7 @@ const RenderBlock = (props)=>{
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /*#__PURE__*/ jsxs(state.tag, {
                     ...attributes(props),
+                    ...actions(props),
                     children: [
                         /*#__PURE__*/ jsx(state.renderComponentTag, {
                             ...renderComponentProps(props)
@@ -741,7 +716,7 @@ const RenderBlock = (props)=>{
 const RenderBlock$1 = RenderBlock;
 
 // GENERATED BY MITOSIS
-const className = function className(props, state, builderContext) {
+const className$1 = function className(props, state, builderContext) {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
 const onClick$1 = function onClick(props, state, builderContext) {
@@ -767,7 +742,7 @@ const RenderBlocks = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     const builderContext = useContext(BuilderContext);
     const state = {};
     return /*#__PURE__*/ jsxs("div", {
-        class: className(props) + " div-RenderBlocks",
+        class: className$1(props) + " div-RenderBlocks",
         get "builder-path" () {
             return props.path;
         },
@@ -858,54 +833,113 @@ const columnCssVars = function columnCssVars(props, state) {
         "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
     };
 };
+const getWidthForBreakpointSize = function getWidthForBreakpointSize(props, state, size) {
+    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    return breakpointSizes[size].max;
+};
+const columnStyleObjects = function columnStyleObjects(props, state) {
+    return {
+        columns: {
+            small: {
+                flexDirection: "var(--flex-dir)",
+                alignItems: "stretch"
+            },
+            medium: {
+                flexDirection: "var(--flex-dir-tablet)",
+                alignItems: "stretch"
+            }
+        },
+        column: {
+            small: {
+                width: "var(--column-width) !important",
+                marginLeft: "var(--column-margin-left) !important"
+            },
+            medium: {
+                width: "var(--column-width-tablet) !important",
+                marginLeft: "var(--column-margin-left-tablet) !important"
+            }
+        }
+    };
+};
+const columnsStyles = function columnsStyles(props, state) {
+    return `
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+          }
+        },
+      `;
+};
+const reactNativeColumnsStyles = function reactNativeColumnsStyles(props, state) {
+    return columnStyleObjects().columns.small;
+};
+const reactNativeColumnStyles = function reactNativeColumnStyles(props, state) {
+    return columnStyleObjects().column.small;
+};
 const Columns = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     useStylesScopedQrl(inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
     const state = {};
-    return /*#__PURE__*/ jsx("div", {
-        class: "builder-columns div-Columns",
-        style: columnsCssVars(props, state),
-        children: (props.columns || []).map(function(column, index) {
-            return /*#__PURE__*/ jsx("div", {
-                class: "builder-column div-Columns-2",
-                style: {
-                    width: getColumnCssWidth(props, state, index),
-                    marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
-                    ...columnCssVars(props, state)
-                },
-                children: /*#__PURE__*/ jsx(RenderBlocks$1, {
-                    get blocks () {
-                        return column.blocks;
-                    },
-                    path: `component.options.columns.${index}.blocks`,
-                    get parent () {
-                        return props.builderBlock.id;
-                    },
-                    styleProp: {
-                        flexGrow: "1"
+    return /*#__PURE__*/ jsxs("div", {
+        class: `builder-columns ${props.builderBlock.id}-breakpoints` + " div-Columns",
+        style: {
+            ...TARGET === "reactNative" ? reactNativeColumnsStyles() : {},
+            ...columnsCssVars(props, state)
+        },
+        children: [
+            TARGET !== "reactNative" ? /*#__PURE__*/ jsx(RenderInlinedStyles$1, {
+                styles: columnsStyles(props, state)
+            }) : null,
+            (props.columns || []).map(function(column, index) {
+                return /*#__PURE__*/ jsx("div", {
+                    class: "builder-column div-Columns-2",
+                    style: {
+                        width: getColumnCssWidth(props, state, index),
+                        marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
+                        ...TARGET === "reactNative" ? reactNativeColumnStyles() : {},
+                        ...columnCssVars(props, state)
                     },
-                    [_IMMUTABLE]: {
-                        blocks: _wrapSignal(column, "blocks"),
-                        parent: _wrapSignal(props.builderBlock, "id")
-                    }
-                })
-            }, index);
-        })
+                    children: /*#__PURE__*/ jsx(RenderBlocks$1, {
+                        get blocks () {
+                            return column.blocks;
+                        },
+                        path: `component.options.columns.${index}.blocks`,
+                        get parent () {
+                            return props.builderBlock.id;
+                        },
+                        styleProp: {
+                            flexGrow: "1"
+                        },
+                        [_IMMUTABLE]: {
+                            blocks: _wrapSignal(column, "blocks"),
+                            parent: _wrapSignal(props.builderBlock, "id")
+                        }
+                    })
+                }, index);
+            })
+        ]
     });
 }, "Columns_component_7yLj4bxdI6c"));
 const Columns$1 = Columns;
 const STYLES$2 = `.div-Columns { 
 display: flex;
-align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-Columns { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { 
-flex-direction: var(--flex-dir); } }.div-Columns-2 { 
+line-height: normal; }.div-Columns-2 { 
 display: flex;
 flex-direction: column;
-align-items: stretch; }@media (max-width: 991px) { .div-Columns-2 { 
-width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { 
-width: var(--column-width) !important;
-margin-left: var(--column-margin-left) !important; } }`;
+align-items: stretch; }`;
 
 // Taken from (and modified) the shopify theme script repo
 // https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
@@ -977,6 +1011,17 @@ const webpSrcSet = function webpSrcSet(props, state) {
     if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp) return srcSetToUse(props).replace(/\?/g, "?format=webp&");
     else return "";
 };
+const aspectRatioCss = function aspectRatioCss(props, state) {
+    const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px"
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+};
 const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     useStylesScopedQrl(inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
     return /*#__PURE__*/ jsxs(Fragment$2, {
@@ -994,8 +1039,9 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
                         },
                         role: props.altText ? "presentation" : undefined,
                         style: {
-                            objectPosition: props.backgroundSize || "center",
-                            objectFit: props.backgroundSize || "cover"
+                            objectPosition: props.backgroundPosition || "center",
+                            objectFit: props.backgroundSize || "cover",
+                            ...aspectRatioCss(props)
                         },
                         class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
                         get src () {
@@ -1019,8 +1065,8 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
             props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /*#__PURE__*/ jsx("div", {
                 class: "builder-image-sizer div-Image",
                 style: {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    paddingTop: props.aspectRatio * 100 + "%"
+                    paddingTop: // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    props.aspectRatio * 100 + "%"
                 }
             }) : null,
             props.builderBlock?.children?.length && props.fitContent ? /*#__PURE__*/ jsx(Slot, {}) : null,
@@ -1034,12 +1080,7 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
 const Image$1 = Image;
 const STYLES$1 = `.img-Image { 
 opacity: 1;
-transition: opacity 0.2s ease-in-out;
-position: absolute;
-height: 100%;
-width: 100%;
-top: 0px;
-left: 0px; }.div-Image { 
+transition: opacity 0.2s ease-in-out; }.div-Image { 
 width: 100%;
 pointer-events: none;
 font-size: 0; }.div-Image-2 { 
@@ -2150,6 +2191,7 @@ const componentInfo = {
 }
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
 const convertSearchParamsToQueryObject = (searchParams)=>{
     const options = {};
     searchParams.forEach((value, key)=>{
@@ -2163,7 +2205,7 @@ const getBuilderSearchParams = (_options)=>{
     const newOptions = {};
     Object.keys(options).forEach((key)=>{
         if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
             newOptions[trimmedKey] = options[key];
         }
     });
@@ -2285,8 +2327,6 @@ const setContentVariationCookie = ({ contentId , canTrack , value  })=>setCookie
         canTrack
     });
 
-const checkIsDefined = (maybeT)=>maybeT !== null && maybeT !== undefined;
-
 const checkIsBuilderContentWithVariations = (item)=>checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
 /**
  * Randomly assign a variation to this user and store it in cookies/storage
@@ -2364,9 +2404,9 @@ async function getContent(options) {
     })).results[0] || null;
 }
 const generateContentUrl = (options)=>{
-    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true ,  } = options;
+    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true , locale ,  } = options;
     if (!apiKey) throw new Error('Missing API key');
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})
@@ -2387,7 +2427,8 @@ async function getAllContent(options) {
     const fetch = await getFetch();
     const content = await fetch(url.href).then((res)=>res.json());
     const canTrack = options.canTrack !== false;
-    if (canTrack) for (const item of content.results)await handleABTesting({
+    if (canTrack && // This makes sure we have a non-error response with the results array.
+    Array.isArray(content.results)) for (const item of content.results)await handleABTesting({
         item,
         canTrack
     });
@@ -2531,6 +2572,10 @@ const createEvent = async ({ type: eventType , canTrack , apiKey , metadata , ..
         }
     });
 async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        return;
+    }
     if (!eventProps.canTrack) return;
     if (isEditing()) return;
     if (!(isBrowser() || TARGET === 'reactNative')) return;
@@ -2572,7 +2617,7 @@ const getCssFromFont = function getCssFromFont(props, state, font) {
     if (font.files) for(const weight in font.files){
         const isNumber = String(Number(weight)) === weight;
         if (!isNumber) continue;
-         // TODO: maybe limit number loaded
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) str += `
   @font-face {
@@ -2618,6 +2663,11 @@ const useContent = function useContent(props, state, elementRef) {
             ...props.content?.data,
             ...props.data,
             ...state.overrideContent?.data
+        },
+        meta: {
+            ...props.content?.meta,
+            ...state.overrideContent?.meta,
+            breakpoints: state.useBreakpoints || state.overrideContent?.meta?.breakpoints || props.content?.meta?.breakpoints
         }
     };
     return mergedContent;
@@ -2629,6 +2679,9 @@ const contentState = function contentState(props, state, elementRef) {
     return {
         ...props.content?.data?.state,
         ...props.data,
+        ...props.locale ? {
+            locale: props.locale
+        } : {},
         ...state.overrideState
     };
 };
@@ -2638,6 +2691,7 @@ const contextContext = function contextContext(props, state, elementRef) {
 const allRegisteredComponents = function allRegisteredComponents(props, state, elementRef) {
     const allComponentsArray = [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
@@ -2654,11 +2708,20 @@ const allRegisteredComponents = function allRegisteredComponents(props, state, e
 const processMessage = function processMessage(props, state, elementRef, event) {
     const { data  } = event;
     if (data) switch(data.type){
-        case "builder.contentUpdate":
+        case "builder.configureSdk":
             {
                 const messageContent = data.data;
-                const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
-                const contentData = messageContent.data;
+                const { breakpoints , contentId  } = messageContent;
+                if (!contentId || contentId !== useContent(props, state)?.id) return;
+                state.useBreakpoints = breakpoints;
+                state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                break;
+            }
+        case "builder.contentUpdate":
+            {
+                const messageContent1 = data.data;
+                const key = messageContent1.key || messageContent1.alias || messageContent1.entry || messageContent1.modelName;
+                const contentData = messageContent1.data;
                 if (key === props.model) {
                     state.overrideContent = contentData;
                     state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
@@ -2741,7 +2804,8 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
         forceReRenderCount: 0,
         overrideContent: null,
         overrideState: {},
-        update: 0
+        update: 0,
+        useBreakpoints: null
     });
     useContextProvider(BuilderContext, useStore({
         content: (()=>{
@@ -2762,11 +2826,19 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     }));
     useClientEffectQrl(inlinedQrl(()=>{
         const [elementRef, props, state] = useLexicalScope();
+        if (!props.apiKey) console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
         if (isBrowser()) {
             if (isEditing()) {
                 state.forceReRenderCount = state.forceReRenderCount + 1;
                 registerInsertMenu();
-                setupBrowserForEditing();
+                setupBrowserForEditing({
+                    ...props.locale ? {
+                        locale: props.locale
+                    } : {},
+                    ...props.includeRefs ? {
+                        includeRefs: props.includeRefs
+                    } : {}
+                });
                 Object.values(allRegisteredComponents(props)).forEach((registeredComponent)=>{
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
@@ -2784,7 +2856,8 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
                     apiKey: props.apiKey,
                     variationId: variationId !== contentId ? variationId : undefined
                 });
-            } // override normal content in preview mode
+            }
+            // override normal content in preview mode
             if (isPreviewing()) {
                 const searchParams = new URL(location.href).searchParams;
                 if (props.model && searchParams.get("builder.preview") === props.model) {
@@ -2809,6 +2882,7 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     useWatchQrl(inlinedQrl(({ track  })=>{
         const [elementRef, props, state] = useLexicalScope();
         state.useContent?.data && track(state.useContent?.data, "jsCode");
+        state && track(state, "contentState");
         evaluateJsCode(props, state);
     }, "RenderContent_component_useWatch_OIBatobA0hE", [
         elementRef,
@@ -2877,13 +2951,22 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
 const RenderContent$1 = RenderContent;
 
 // GENERATED BY MITOSIS
+const className = function className(props, state, builderContext) {
+    return [
+        ...[
+            props.attributes.class
+        ],
+        "builder-symbol",
+        props.symbol?.inline ? "builder-inline-symbol" : undefined,
+        props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : undefined
+    ].filter(Boolean).join(" ");
+};
 const contentToUse = function contentToUse(props, state, builderContext) {
     return props.symbol?.content || state.fetchedContent;
 };
 const Symbol$1 = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     const builderContext = useContext(BuilderContext);
     const state = useStore({
-        className: "builder-symbol",
         fetchedContent: null
     });
     useWatchQrl(inlinedQrl(({ track  })=>{
@@ -2915,9 +2998,7 @@ const Symbol$1 = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     ]));
     return /*#__PURE__*/ jsx("div", {
         ...props.attributes,
-        get class () {
-            return state.className;
-        },
+        class: className(props),
         children: /*#__PURE__*/ jsx(RenderContent$1, {
             get apiKey () {
                 return builderContext.apiKey;
@@ -2937,10 +3018,7 @@ const Symbol$1 = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
                 apiKey: _wrapSignal(builderContext, "apiKey"),
                 context: _wrapSignal(builderContext, "context")
             }
-        }),
-        [_IMMUTABLE]: {
-            class: _wrapSignal(state, "className")
-        }
+        })
     });
 }, "Symbol_component_WVvggdkUPdk"));
 const Symbol$2 = Symbol$1;