@builder.io/sdk-qwik 0.0.37 → 0.0.38

package/lib/index.qwik.cjs

@@ -50,7 +50,7 @@ const registerInsertMenu = ()=>{
             {
                 name: 'Columns'
             },
-            ...TARGET === 'reactNative' ? [] : [
+            ...[
                 {
                     name: 'Core:Section'
                 },
@@ -270,15 +270,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}
@@ -342,7 +346,7 @@ const css = function css(props, state) {
 };
 const BlockStyles = (props)=>{
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: TARGET !== "reactNative" && css(props) ? /*#__PURE__*/ jsxRuntime.jsx(RenderInlinedStyles$1, {
+        children: css(props) ? /*#__PURE__*/ jsxRuntime.jsx(RenderInlinedStyles$1, {
             styles: css(props)
         }) : null
     });
@@ -391,10 +395,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',
@@ -402,6 +411,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) {
@@ -465,51 +493,6 @@ const RenderComponent = (props)=>{
 };
 const RenderComponent$1 = RenderComponent;
 
-// GENERATED BY MITOSIS
-const RenderComponentWithContext = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
-    qwik.useContextProvider(BuilderContext, qwik.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__*/ jsxRuntime.jsx(RenderComponent$1, {
-        get componentRef () {
-            return props.componentRef;
-        },
-        get componentOptions () {
-            return props.componentOptions;
-        },
-        get blockChildren () {
-            return props.blockChildren;
-        },
-        get context () {
-            return props.context;
-        },
-        [qwik._IMMUTABLE]: {
-            componentRef: qwik._wrapSignal(props, "componentRef"),
-            componentOptions: qwik._wrapSignal(props, "componentOptions"),
-            blockChildren: qwik._wrapSignal(props, "blockChildren"),
-            context: qwik._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.
@@ -592,8 +575,9 @@ const actions = function actions(props, state) {
     });
 };
 const attributes = function attributes(props, state) {
+    const blockProperties = getBlockProperties(useBlock(props));
     return {
-        ...getBlockProperties(useBlock(props)),
+        ...blockProperties,
         ...{}
     };
 };
@@ -614,7 +598,8 @@ const renderComponentProps = function renderComponentProps(props, state) {
                     ...attributes(props),
                     ...actions(props)
                 }
-            }
+            },
+            customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
         },
         context: childrenContext(props)
     };
@@ -678,8 +663,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 = {};
@@ -736,7 +720,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) {
@@ -762,7 +746,7 @@ const RenderBlocks = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     const builderContext = qwik.useContext(BuilderContext);
     const state = {};
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        class: className(props) + " div-RenderBlocks",
+        class: className$1(props) + " div-RenderBlocks",
         get "builder-path" () {
             return props.path;
         },
@@ -853,54 +837,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__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
     const state = {};
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        class: "builder-columns div-Columns",
-        style: columnsCssVars(props, state),
-        children: (props.columns || []).map(function(column, index) {
-            return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.jsxs("div", {
+        class: `builder-columns ${props.builderBlock.id}-breakpoints` + " div-Columns",
+        style: {
+            ...TARGET === "reactNative" ? reactNativeColumnsStyles() : {},
+            ...columnsCssVars(props, state)
+        },
+        children: [
+            TARGET !== "reactNative" ? /*#__PURE__*/ jsxRuntime.jsx(RenderInlinedStyles$1, {
+                styles: columnsStyles(props, state)
+            }) : null,
+            (props.columns || []).map(function(column, index) {
+                return /*#__PURE__*/ jsxRuntime.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)
                     },
-                    [qwik._IMMUTABLE]: {
-                        blocks: qwik._wrapSignal(column, "blocks"),
-                        parent: qwik._wrapSignal(props.builderBlock, "id")
-                    }
-                })
-            }, index);
-        })
+                    children: /*#__PURE__*/ jsxRuntime.jsx(RenderBlocks$1, {
+                        get blocks () {
+                            return column.blocks;
+                        },
+                        path: `component.options.columns.${index}.blocks`,
+                        get parent () {
+                            return props.builderBlock.id;
+                        },
+                        styleProp: {
+                            flexGrow: "1"
+                        },
+                        [qwik._IMMUTABLE]: {
+                            blocks: qwik._wrapSignal(column, "blocks"),
+                            parent: qwik._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
@@ -1654,9 +1697,18 @@ const componentInfo$6 = {
 const SectionComponent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     return /*#__PURE__*/ jsxRuntime.jsx("section", {
         ...props.attributes,
-        style: (()=>{
-            props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : undefined;
-        })(),
+        style: {
+            width: "100%",
+            alignSelf: "stretch",
+            flexGrow: "1",
+            boxSizing: "border-box",
+            maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            marginLeft: "auto",
+            marginRight: "auto"
+        },
         children: /*#__PURE__*/ jsxRuntime.jsx(qwik.Slot, {})
     });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
@@ -2279,8 +2331,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
@@ -2617,6 +2667,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;
@@ -2657,11 +2712,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.
@@ -2744,7 +2808,8 @@ const RenderContent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
         forceReRenderCount: 0,
         overrideContent: null,
         overrideState: {},
-        update: 0
+        update: 0,
+        useBreakpoints: null
     });
     qwik.useContextProvider(BuilderContext, qwik.useStore({
         content: (()=>{
@@ -2890,13 +2955,22 @@ const RenderContent = /*#__PURE__*/ qwik.componentQrl(qwik.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__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     const builderContext = qwik.useContext(BuilderContext);
     const state = qwik.useStore({
-        className: "builder-symbol",
         fetchedContent: null
     });
     qwik.useWatchQrl(qwik.inlinedQrl(({ track  })=>{
@@ -2928,9 +3002,7 @@ const Symbol$1 = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     ]));
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         ...props.attributes,
-        get class () {
-            return state.className;
-        },
+        class: className(props),
         children: /*#__PURE__*/ jsxRuntime.jsx(RenderContent$1, {
             get apiKey () {
                 return builderContext.apiKey;
@@ -2950,10 +3022,7 @@ const Symbol$1 = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
                 apiKey: qwik._wrapSignal(builderContext, "apiKey"),
                 context: qwik._wrapSignal(builderContext, "context")
             }
-        }),
-        [qwik._IMMUTABLE]: {
-            class: qwik._wrapSignal(state, "className")
-        }
+        })
     });
 }, "Symbol_component_WVvggdkUPdk"));
 const Symbol$2 = Symbol$1;

package/lib/index.qwik.mjs

@@ -46,7 +46,7 @@ const registerInsertMenu = ()=>{
             {
                 name: 'Columns'
             },
-            ...TARGET === 'reactNative' ? [] : [
+            ...[
                 {
                     name: 'Core:Section'
                 },
@@ -266,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}
@@ -338,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
     });
@@ -387,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',
@@ -398,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) {
@@ -461,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.
@@ -588,8 +571,9 @@ const actions = function actions(props, state) {
     });
 };
 const attributes = function attributes(props, state) {
+    const blockProperties = getBlockProperties(useBlock(props));
     return {
-        ...getBlockProperties(useBlock(props)),
+        ...blockProperties,
         ...{}
     };
 };
@@ -610,7 +594,8 @@ const renderComponentProps = function renderComponentProps(props, state) {
                     ...attributes(props),
                     ...actions(props)
                 }
-            }
+            },
+            customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
         },
         context: childrenContext(props)
     };
@@ -674,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 = {};
@@ -732,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) {
@@ -758,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;
         },
@@ -849,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
@@ -1650,9 +1693,18 @@ const componentInfo$6 = {
 const SectionComponent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     return /*#__PURE__*/ jsx("section", {
         ...props.attributes,
-        style: (()=>{
-            props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : undefined;
-        })(),
+        style: {
+            width: "100%",
+            alignSelf: "stretch",
+            flexGrow: "1",
+            boxSizing: "border-box",
+            maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            marginLeft: "auto",
+            marginRight: "auto"
+        },
         children: /*#__PURE__*/ jsx(Slot, {})
     });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
@@ -2275,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
@@ -2613,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;
@@ -2653,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.
@@ -2740,7 +2804,8 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
         forceReRenderCount: 0,
         overrideContent: null,
         overrideState: {},
-        update: 0
+        update: 0,
+        useBreakpoints: null
     });
     useContextProvider(BuilderContext, useStore({
         content: (()=>{
@@ -2886,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  })=>{
@@ -2924,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;
@@ -2946,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;

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
   "module": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
   "types": "./types/index.d.ts",
+  "files": [
+    "README.md",
+    "package.json",
+    "types-hacks.d.ts",
+    "types",
+    "lib"
+  ],
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs",
@@ -16,8 +23,8 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "tsc && vite build --mode lib",
-    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
-    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
+    "release:patch": "yarn run build && yarn version patch && npm publish --access public",
+    "release:dev": "yarn run build && npm version prerelease && npm publish --tag latest --access public"
   },
   "devDependencies": {
     "@types/node": "latest",
@@ -25,6 +32,6 @@
     "vite": "^3.0.4"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.0.108"
+    "@builder.io/qwik": ">=0.13.3"
   }
 }

package/types/blocks/columns/columns.d.ts

@@ -1,4 +1,6 @@
 import type { BuilderBlock } from "../../types/builder-block";
+import type { SizeName } from "../../constants/device-sizes";
+import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -10,6 +12,7 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
+    customBreakpoints?: Breakpoints;
 }
 export declare const getGutterSize: (props: any, state: any) => any;
 export declare const getColumns: (props: any, state: any) => any;
@@ -26,6 +29,38 @@ export declare const columnCssVars: (props: any, state: any) => {
     "--column-width-tablet": string | undefined;
     "--column-margin-left-tablet": string | undefined;
 };
+export declare const getWidthForBreakpointSize: (props: any, state: any, size: SizeName) => number;
+export declare const columnStyleObjects: (props: any, state: any) => {
+    columns: {
+        small: {
+            flexDirection: string;
+            alignItems: string;
+        };
+        medium: {
+            flexDirection: string;
+            alignItems: string;
+        };
+    };
+    column: {
+        small: {
+            width: string;
+            marginLeft: string;
+        };
+        medium: {
+            width: string;
+            marginLeft: string;
+        };
+    };
+};
+export declare const columnsStyles: (props: any, state: any) => string;
+export declare const reactNativeColumnsStyles: (props: any, state: any) => {
+    flexDirection: string;
+    alignItems: string;
+};
+export declare const reactNativeColumnStyles: (props: any, state: any) => {
+    width: string;
+    marginLeft: string;
+};
 export declare const Columns: import("@builder.io/qwik").Component<ColumnProps>;
 export default Columns;
-export declare const STYLES = ".div-Columns { \ndisplay: flex;\nalign-items: stretch;\nline-height: normal; }@media (max-width: 991px) { .div-Columns { \nflex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { \nflex-direction: var(--flex-dir); } }.div-Columns-2 { \ndisplay: flex;\nflex-direction: column;\nalign-items: stretch; }@media (max-width: 991px) { .div-Columns-2 { \nwidth: var(--column-width-tablet) !important;\nmargin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { \nwidth: var(--column-width) !important;\nmargin-left: var(--column-margin-left) !important; } }";
+export declare const STYLES = ".div-Columns { \ndisplay: flex;\nline-height: normal; }.div-Columns-2 { \ndisplay: flex;\nflex-direction: column;\nalign-items: stretch; }";

package/types/blocks/symbol/symbol.d.ts

@@ -16,6 +16,7 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
+export declare const className: (props: any, state: any, builderContext: any) => string;
 export declare const contentToUse: (props: any, state: any, builderContext: any) => any;
 export declare const Symbol: import("@builder.io/qwik").Component<SymbolProps>;
 export default Symbol;

package/types/components/render-block/render-block.d.ts

@@ -13,7 +13,7 @@ export declare const actions: (props: any, state: any) => {
     [index: string]: (event: Event) => any;
 };
 export declare const attributes: (props: any, state: any) => {
-    style?: CSSStyleDeclaration | Record<string, string | undefined> | undefined;
+    style: string | Partial<CSSStyleDeclaration> | Record<string, string | undefined> | undefined;
     'builder-id': string | undefined;
     class: string;
 };

package/types/components/render-block/render-component.d.ts

@@ -1,10 +1,12 @@
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
+import type { Breakpoints } from "../../types/builder-content.js";
 export interface RenderComponentProps {
     componentRef: any;
     componentOptions: any;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
+    customBreakpoints?: Breakpoints;
 }
 export declare const RenderComponent: (props: RenderComponentProps & {
     key?: any;

package/types/functions/get-block-properties.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
+    style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;
 };

package/types/functions/get-react-native-block-styles.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, }: {
+export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
+    blockStyles: any;
 }): CSSStyleDeclaration | Record<string, string | undefined>;

package/types/functions/transform-block-properties.d.ts

@@ -0,0 +1 @@
+export declare function transformBlockProperties<T>(properties: T): T;

package/types/helpers/css.d.ts

@@ -1,3 +1,5 @@
+export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
+export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles, }: {
     mediaQuery?: string | undefined;
     className: string;

package/types/types/builder-block.d.ts

@@ -53,5 +53,6 @@ export interface BuilderBlock {
         itemName?: string;
     } | null;
     animations?: any[];
+    style?: Partial<CSSStyleDeclaration>;
 }
 export {};

package/types/types/builder-content.d.ts

@@ -1,5 +1,10 @@
 import type { BuilderBlock } from './builder-block.js';
+import type { Nullable } from './typescript.js';
 declare type Input = any;
+export interface Breakpoints {
+    small: number;
+    medium: number;
+}
 export interface BuilderContentVariation {
     data?: {
         title?: string;
@@ -19,10 +24,7 @@ export interface BuilderContentVariation {
     testRatio?: number;
     id?: string;
     meta?: {
-        breakpoints?: {
-            small: number;
-            medium: number;
-        };
+        breakpoints?: Nullable<Breakpoints>;
         [key: string]: any;
     };
 }

package/types/types/targets.d.ts

@@ -1,3 +1,3 @@
 declare type MitosisTargets = import('@builder.io/mitosis').Target;
-export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik'>;
+export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid'>;
 export {};