@builder.io/sdk-qwik 0.0.37 → 0.0.39-0

package/README.md

@@ -9,6 +9,10 @@ Installing the Qwik SDK is done in two steps:
 1. Set up Qwik-city project.
 2. Install the Qwik SDK into your Qwik-city project.
 
+### Fetch
+
+This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.
+
 ### Set up Qwik-city project
 
 1. Follow the instructions on [Qwik-city](https://qwik.builder.io/qwikcity/overview)

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"));
@@ -2116,73 +2168,24 @@ const componentInfo = {
         }
     ];
 
-/**
- * Convert deep object to a flat object with dots
- *
- * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
- */ function flatten(object, path = null, separator = '.') {
-    return Object.keys(object).reduce((acc, key)=>{
-        const value = object[key];
-        const newPath = [
-            path,
-            key
-        ].filter(Boolean).join(separator);
-        const isObject = [
-            typeof value === 'object',
-            value !== null,
-            !(Array.isArray(value) && value.length === 0)
-        ].every(Boolean);
-        return isObject ? {
-            ...acc,
-            ...flatten(value, newPath, separator)
-        } : {
-            ...acc,
-            [newPath]: value
-        };
-    }, {});
-}
-
-const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
-const BUILDER_OPTIONS_PREFIX = 'options.';
-const convertSearchParamsToQueryObject = (searchParams)=>{
-    const options = {};
-    searchParams.forEach((value, key)=>{
-        options[key] = value;
-    });
-    return options;
-};
-const getBuilderSearchParams = (_options)=>{
-    if (!_options) return {};
-    const options = normalizeSearchParams(_options);
-    const newOptions = {};
-    Object.keys(options).forEach((key)=>{
-        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
-            newOptions[trimmedKey] = options[key];
-        }
-    });
-    return newOptions;
-};
-const getBuilderSearchParamsFromWindow = ()=>{
-    if (!isBrowser()) return {};
-    const searchParams = new URLSearchParams(window.location.search);
-    return getBuilderSearchParams(searchParams);
-};
-const normalizeSearchParams = (searchParams)=>searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
-
 function getGlobalThis() {
     if (typeof globalThis !== 'undefined') return globalThis;
     if (typeof window !== 'undefined') return window;
     if (typeof global !== 'undefined') return global;
     if (typeof self !== 'undefined') return self;
-    return null;
+    return globalThis;
 }
 
-async function getFetch() {
+function getFetch() {
     const globalFetch = getGlobalThis().fetch;
-    if (typeof globalFetch === 'undefined' && typeof global !== 'undefined') throw new Error('`fetch()` not found, ensure you have it as part of your polyfills.');
-    return globalFetch.default || globalFetch;
+    if (typeof globalFetch === 'undefined') {
+        console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+        throw new Error('Builder SDK could not find a global `fetch` function');
+    }
+    return globalFetch;
 }
+const fetch$1 = getFetch();
 
 /**
  * Only gets one level up from hostname
@@ -2279,8 +2282,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
@@ -2351,12 +2352,60 @@ const handleABTesting = async ({ item , canTrack  })=>{
     Object.assign(item, variationValue);
 };
 
-async function getContent(options) {
-    return (await getAllContent({
-        ...options,
-        limit: 1
-    })).results[0] || null;
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */ function flatten(object, path = null, separator = '.') {
+    return Object.keys(object).reduce((acc, key)=>{
+        const value = object[key];
+        const newPath = [
+            path,
+            key
+        ].filter(Boolean).join(separator);
+        const isObject = [
+            typeof value === 'object',
+            value !== null,
+            !(Array.isArray(value) && value.length === 0)
+        ].every(Boolean);
+        return isObject ? {
+            ...acc,
+            ...flatten(value, newPath, separator)
+        } : {
+            ...acc,
+            [newPath]: value
+        };
+    }, {});
 }
+
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
+const convertSearchParamsToQueryObject = (searchParams)=>{
+    const options = {};
+    searchParams.forEach((value, key)=>{
+        options[key] = value;
+    });
+    return options;
+};
+const getBuilderSearchParams = (_options)=>{
+    if (!_options) return {};
+    const options = normalizeSearchParams(_options);
+    const newOptions = {};
+    Object.keys(options).forEach((key)=>{
+        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
+            newOptions[trimmedKey] = options[key];
+        }
+    });
+    return newOptions;
+};
+const getBuilderSearchParamsFromWindow = ()=>{
+    if (!isBrowser()) return {};
+    const searchParams = new URLSearchParams(window.location.search);
+    return getBuilderSearchParams(searchParams);
+};
+const normalizeSearchParams = (searchParams)=>searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+
 const generateContentUrl = (options)=>{
     const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true , locale ,  } = options;
     if (!apiKey) throw new Error('Missing API key');
@@ -2376,10 +2425,17 @@ const generateContentUrl = (options)=>{
     }
     return url;
 };
+
+async function getContent(options) {
+    return (await getAllContent({
+        ...options,
+        limit: 1
+    })).results[0] || null;
+}
 async function getAllContent(options) {
     const url = generateContentUrl(options);
-    const fetch = await getFetch();
-    const content = await fetch(url.href).then((res)=>res.json());
+    const res = await fetch$1(url.href);
+    const content = await res.json();
     const canTrack = options.canTrack !== false;
     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({
@@ -2617,6 +2673,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 +2718,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.
@@ -2703,7 +2773,7 @@ const evalExpression = function evalExpression(props, state, elementRef, express
         }));
 };
 const handleRequest = function handleRequest(props, state, elementRef, { url , key  }) {
-    getFetch().then((fetch)=>fetch(url)).then((response)=>response.json()).then((json)=>{
+    fetch$1(url).then((response)=>response.json()).then((json)=>{
         const newOverrideState = {
             ...state.overrideState,
             [key]: json
@@ -2744,7 +2814,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 +2961,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 +3008,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 +3028,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;
@@ -2983,7 +3058,6 @@ exports.Video = Video$1;
 exports.components = components;
 exports.convertSearchParamsToQueryObject = convertSearchParamsToQueryObject;
 exports.createRegisterComponentMessage = createRegisterComponentMessage;
-exports.generateContentUrl = generateContentUrl;
 exports.getAllContent = getAllContent;
 exports.getBuilderSearchParams = getBuilderSearchParams;
 exports.getBuilderSearchParamsFromWindow = getBuilderSearchParamsFromWindow;