@builder.io/sdk-qwik 0.0.28 → 0.0.30

package/lib/index.qwik.mjs

@@ -0,0 +1,2928 @@
+import { createContext, _wrapSignal, inlinedQrl, useLexicalScope, _IMMUTABLE, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Fragment as Fragment$2, Slot, useRef, useWatchQrl, useClientEffectQrl, useCleanupQrl } from '@builder.io/qwik';
+import { jsx, Fragment as Fragment$1, jsxs } from '@builder.io/qwik/jsx-runtime';
+
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */ const TARGET = 'qwik';
+
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
+const registry = {};
+function register(type, info) {
+    let typeList = registry[type];
+    if (!typeList) typeList = registry[type] = [];
+    typeList.push(info);
+    if (isBrowser()) {
+        const message = {
+            type: 'builder.register',
+            data: {
+                type,
+                info
+            }
+        };
+        try {
+            parent.postMessage(message, '*');
+            if (parent !== window) window.postMessage(message, '*');
+        } catch (err) {
+            console.debug('Could not postmessage', err);
+        }
+    }
+}
+
+const registerInsertMenu = ()=>{
+    register('insertMenu', {
+        name: '_default',
+        default: true,
+        items: [
+            {
+                name: 'Box'
+            },
+            {
+                name: 'Text'
+            },
+            {
+                name: 'Image'
+            },
+            {
+                name: 'Columns'
+            },
+            ...TARGET === 'reactNative' ? [] : [
+                {
+                    name: 'Core:Section'
+                },
+                {
+                    name: 'Core:Button'
+                },
+                {
+                    name: 'Embed'
+                },
+                {
+                    name: 'Custom Code'
+                }
+            ]
+        ]
+    });
+};
+let isSetupForEditing = false;
+const setupBrowserForEditing = ()=>{
+    if (isSetupForEditing) return;
+    isSetupForEditing = true;
+    if (isBrowser()) {
+        window.parent?.postMessage({
+            type: 'builder.sdkInfo',
+            data: {
+                target: TARGET,
+                // TODO: compile these in
+                // type: process.env.SDK_TYPE,
+                // version: process.env.SDK_VERSION,
+                supportsPatchUpdates: false,
+                // Supports builder-model="..." attribute which is needed to
+                // scope our '+ add block' button styling
+                supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true
+            }
+        }, '*');
+        window.addEventListener('message', ({ data  })=>{
+            if (!data?.type) return;
+            switch(data.type){
+                case 'builder.evaluate':
+                    {
+                        const text = data.data.text;
+                        const args = data.data.arguments || [];
+                        const id = data.data.id;
+                        // tslint:disable-next-line:no-function-constructor-with-string-args
+                        const fn = new Function(text);
+                        let result;
+                        let error = null;
+                        try {
+                            // eslint-disable-next-line prefer-spread
+                            result = fn.apply(null, args);
+                        } catch (err) {
+                            error = err;
+                        }
+                        if (error) window.parent?.postMessage({
+                            type: 'builder.evaluateError',
+                            data: {
+                                id,
+                                error: error.message
+                            }
+                        }, '*');
+                        else if (result && typeof result.then === 'function') result.then((finalResult)=>{
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateResult',
+                                data: {
+                                    id,
+                                    result: finalResult
+                                }
+                            }, '*');
+                        }).catch(console.error);
+                        else window.parent?.postMessage({
+                            type: 'builder.evaluateResult',
+                            data: {
+                                result,
+                                id
+                            }
+                        }, '*');
+                        break;
+                    }
+            }
+        });
+    }
+};
+
+const BuilderContext = createContext("Builder");
+
+function isIframe() {
+    return isBrowser() && window.self !== window.top;
+}
+
+function isEditing() {
+    return isIframe() && window.location.search.indexOf('builder.frameEditing=') !== -1;
+}
+
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */ const fastClone = (obj)=>JSON.parse(JSON.stringify(obj));
+
+const SIZES = {
+    small: {
+        min: 320,
+        default: 321,
+        max: 640
+    },
+    medium: {
+        min: 641,
+        default: 642,
+        max: 991
+    },
+    large: {
+        min: 990,
+        default: 991,
+        max: 1200
+    }
+};
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES)=>`@media (max-width: ${sizeValues[size].max}px)`;
+const getSizesForBreakpoints = ({ small , medium  })=>{
+    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!small || !medium) return newSizes;
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2000,
+        min: largeMin,
+        default: largeMin + 1
+    };
+    return newSizes;
+};
+
+function evaluate({ code , context , state , event  }) {
+    if (code === '') {
+        console.warn('Skipping evaluation of empty code block.');
+        return;
+    }
+    const builder = {
+        isEditing: isEditing(),
+        isBrowser: isBrowser(),
+        isServer: !isBrowser()
+    };
+    // 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 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);
+    }
+}
+
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */ const set = (obj, _path, value)=>{
+    if (Object(obj) !== obj) return obj;
+    const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+    path.slice(0, -1).reduce((a, c, i)=>Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+    return obj;
+};
+
+// Noope way for targets to make modifications to the block object if/as needed
+function transformBlock(block) {
+    return block;
+}
+
+const evaluateBindings = ({ block , context , state  })=>{
+    if (!block.bindings) return block;
+    const copy = fastClone(block);
+    const copied = {
+        ...copy,
+        properties: {
+            ...copy.properties
+        },
+        actions: {
+            ...copy.actions
+        }
+    };
+    for(const binding in block.bindings){
+        const expression = block.bindings[binding];
+        const value = evaluate({
+            code: expression,
+            state,
+            context
+        });
+        set(copied, binding, value);
+    }
+    return copied;
+};
+function getProcessedBlock({ block , context , shouldEvaluateBindings , state  }) {
+    const transformedBlock = transformBlock(block);
+    if (shouldEvaluateBindings) return evaluateBindings({
+        block: transformedBlock,
+        state,
+        context
+    });
+    else return transformedBlock;
+}
+
+const camelToKebabCase = (string)=>string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+
+const convertStyleMaptoCSS = (style)=>{
+    const cssProps = Object.entries(style).map(([key, value])=>{
+        if (typeof value === 'string') return `${camelToKebabCase(key)}: ${value};`;
+    });
+    return cssProps.join('\n');
+};
+const createCssClass = ({ mediaQuery , className , styles  })=>{
+    const cssClass = `.${className} {
+    ${convertStyleMaptoCSS(styles)}
+  }`;
+    if (mediaQuery) return `${mediaQuery} {
+      ${cssClass}
+    }`;
+    else return cssClass;
+};
+
+// GENERATED BY MITOSIS
+const tag$1 = function tag(props, state) {
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "style";
+};
+const RenderInlinedStyles = (props)=>{
+    const state = {};
+    state.tag = tag$1();
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: /*#__PURE__*/ jsx(state.tag, {
+            children: _wrapSignal(props, "styles")
+        })
+    });
+};
+const RenderInlinedStyles$1 = RenderInlinedStyles;
+
+// GENERATED BY MITOSIS
+const useBlock$1 = function useBlock(props, state) {
+    return getProcessedBlock({
+        block: props.block,
+        state: props.context.state,
+        context: props.context.context,
+        shouldEvaluateBindings: true
+    });
+};
+const css = function css(props, state) {
+    const styles = useBlock$1(props).responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = useBlock$1(props).id;
+    const largeStylesClass = largeStyles ? createCssClass({
+        className,
+        styles: largeStyles
+    }) : "";
+    const mediumStylesClass = mediumStyles ? createCssClass({
+        className,
+        styles: mediumStyles,
+        mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
+    }) : "";
+    const smallStylesClass = smallStyles ? createCssClass({
+        className,
+        styles: smallStyles,
+        mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
+    }) : "";
+    return [
+        largeStylesClass,
+        mediumStylesClass,
+        smallStylesClass
+    ].join(" ");
+};
+const BlockStyles = (props)=>{
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: TARGET !== "reactNative" && css(props) ? /*#__PURE__*/ jsx(RenderInlinedStyles$1, {
+            styles: css(props)
+        }) : null
+    });
+};
+const BlockStyles$1 = BlockStyles;
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const getEventHandlerName = (key)=>`on${capitalizeFirstLetter(key)}$`;
+
+function crateEventHandler(value, options) {
+    return inlinedQrl((event)=>{
+        const [options, value] = useLexicalScope();
+        return evaluate({
+            code: value,
+            context: options.context,
+            state: options.state,
+            event
+        });
+    }, "crateEventHandler_wgxT8Hlq4s8", [
+        options,
+        value
+    ]);
+}
+
+function getBlockActions(options) {
+    const obj = {};
+    const optionActions = options.block.actions ?? {};
+    for(const key in optionActions){
+        // eslint-disable-next-line no-prototype-builtins
+        if (!optionActions.hasOwnProperty(key)) continue;
+        const value = optionActions[key];
+        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+    }
+    return obj;
+}
+
+function getBlockComponentOptions(block) {
+    return {
+        ...block.component?.options,
+        ...block.options,
+        /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */ builderBlock: block
+    };
+}
+
+function getBlockProperties(block) {
+    return {
+        ...block.properties,
+        'builder-id': block.id,
+        class: [
+            block.id,
+            'builder-block',
+            block.class,
+            block.properties?.class
+        ].filter(Boolean).join(' ')
+    };
+}
+
+function getBlockTag(block) {
+    return block.tagName || 'div';
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */ const EMPTY_HTML_ELEMENTS = [
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+];
+const isEmptyHtmlElement = (tagName)=>{
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+
+// GENERATED BY MITOSIS
+const RenderComponent = (props)=>{
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: props.componentRef ? /*#__PURE__*/ jsxs(props.componentRef, {
+            ...props.componentOptions,
+            children: [
+                (props.blockChildren || []).map(function(child) {
+                    return /*#__PURE__*/ jsx(RenderBlock$1, {
+                        block: child,
+                        get context () {
+                            return props.context;
+                        },
+                        [_IMMUTABLE]: {
+                            context: _wrapSignal(props, "context")
+                        }
+                    }, "render-block-" + child.id);
+                }),
+                (props.blockChildren || []).map(function(child) {
+                    return /*#__PURE__*/ jsx(BlockStyles$1, {
+                        block: child,
+                        get context () {
+                            return props.context;
+                        },
+                        [_IMMUTABLE]: {
+                            context: _wrapSignal(props, "context")
+                        }
+                    }, "block-style-" + child.id);
+                })
+            ]
+        }) : null
+    });
+};
+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.
+ *
+ * ```vue
+ * <template>
+ *  <slot></slot>
+ * </template>
+ * ```
+ */ const RenderRepeatedBlock = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    useContextProvider(BuilderContext, useStore({
+        content: (()=>{
+            return props.repeatContext.content;
+        })(),
+        state: (()=>{
+            return props.repeatContext.state;
+        })(),
+        context: (()=>{
+            return props.repeatContext.context;
+        })(),
+        apiKey: (()=>{
+            return props.repeatContext.apiKey;
+        })(),
+        registeredComponents: (()=>{
+            return props.repeatContext.registeredComponents;
+        })(),
+        inheritedStyles: (()=>{
+            return props.repeatContext.inheritedStyles;
+        })()
+    }));
+    return /*#__PURE__*/ jsx(RenderBlock$1, {
+        get block () {
+            return props.block;
+        },
+        get context () {
+            return props.repeatContext;
+        },
+        [_IMMUTABLE]: {
+            block: _wrapSignal(props, "block"),
+            context: _wrapSignal(props, "repeatContext")
+        }
+    });
+}, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
+const RenderRepeatedBlock$1 = RenderRepeatedBlock;
+
+// GENERATED BY MITOSIS
+const component = function component(props, state) {
+    const componentName = getProcessedBlock({
+        block: props.block,
+        state: props.context.state,
+        context: props.context.context,
+        shouldEvaluateBindings: false
+    }).component?.name;
+    if (!componentName) return null;
+    const ref = props.context.registeredComponents[componentName];
+    if (!ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+          Could not find a registered component named "${componentName}". 
+          If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+    } else return ref;
+};
+const tag = function tag(props, state) {
+    return getBlockTag(useBlock(props));
+};
+const useBlock = function useBlock(props, state) {
+    return repeatItemData(props) ? props.block : getProcessedBlock({
+        block: props.block,
+        state: props.context.state,
+        context: props.context.context,
+        shouldEvaluateBindings: true
+    });
+};
+const attributes = function attributes(props, state) {
+    return {
+        ...getBlockProperties(useBlock(props)),
+        ...getBlockActions({
+            block: useBlock(props),
+            state: props.context.state,
+            context: props.context.context
+        }),
+        ...{}
+    };
+};
+const shouldWrap = function shouldWrap(props, state) {
+    return !component(props)?.noWrap;
+};
+const renderComponentProps = function renderComponentProps(props, state) {
+    return {
+        blockChildren: useChildren(props),
+        componentRef: component(props)?.component,
+        componentOptions: {
+            ...getBlockComponentOptions(useBlock(props)),
+            /**
+       * 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)
+            }
+        },
+        context: childrenContext(props)
+    };
+};
+const useChildren = function useChildren(props, state) {
+    // TO-DO: When should `canHaveChildren` dictate rendering?
+    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+    // but still receive and need to render children.
+    // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
+    return useBlock(props).children ?? [];
+};
+const childrenWithoutParentComponent = function childrenWithoutParentComponent(props, state) {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */ const shouldRenderChildrenOutsideRef = !component(props)?.component && !repeatItemData(props);
+    return shouldRenderChildrenOutsideRef ? useChildren(props) : [];
+};
+const repeatItemData = function repeatItemData(props, state) {
+    /**
+   * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+   * which will not work if there is a repeat.
+   */ const { repeat , ...blockWithoutRepeat } = props.block;
+    if (!repeat?.collection) return undefined;
+    const itemsArray = evaluate({
+        code: repeat.collection,
+        state: props.context.state,
+        context: props.context.context
+    });
+    if (!Array.isArray(itemsArray)) return undefined;
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index)=>({
+            context: {
+                ...props.context,
+                state: {
+                    ...props.context.state,
+                    $index: index,
+                    $item: item,
+                    [itemNameToUse]: item,
+                    [`$${itemNameToUse}Index`]: index
+                }
+            },
+            block: blockWithoutRepeat
+        }));
+    return repeatArray;
+};
+const inheritedTextStyles = function inheritedTextStyles(props, state) {
+    return {};
+};
+const childrenContext = function childrenContext(props, state) {
+    return {
+        apiKey: props.context.apiKey,
+        state: props.context.state,
+        content: props.context.content,
+        context: props.context.context,
+        registeredComponents: props.context.registeredComponents,
+        inheritedStyles: inheritedTextStyles()
+    };
+};
+const renderComponentTag = function renderComponentTag(props, state) {
+    if (TARGET === "reactNative") return RenderComponentWithContext$1;
+    else return RenderComponent$1;
+};
+const RenderBlock = (props)=>{
+    const state = {};
+    state.tag = tag(props);
+    state.renderComponentTag = renderComponentTag();
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: shouldWrap(props) ? /*#__PURE__*/ jsxs(Fragment$1, {
+            children: [
+                isEmptyHtmlElement(tag(props)) ? /*#__PURE__*/ jsx(state.tag, {
+                    ...attributes(props)
+                }) : null,
+                !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+                    return /*#__PURE__*/ jsx(RenderRepeatedBlock$1, {
+                        get repeatContext () {
+                            return data.context;
+                        },
+                        get block () {
+                            return data.block;
+                        },
+                        [_IMMUTABLE]: {
+                            repeatContext: _wrapSignal(data, "context"),
+                            block: _wrapSignal(data, "block")
+                        }
+                    }, index);
+                }) : null,
+                !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /*#__PURE__*/ jsxs(state.tag, {
+                    ...attributes(props),
+                    children: [
+                        /*#__PURE__*/ jsx(state.renderComponentTag, {
+                            ...renderComponentProps(props)
+                        }),
+                        (childrenWithoutParentComponent(props) || []).map(function(child) {
+                            return /*#__PURE__*/ jsx(RenderBlock, {
+                                block: child,
+                                context: childrenContext(props)
+                            }, "render-block-" + child.id);
+                        }),
+                        (childrenWithoutParentComponent(props) || []).map(function(child) {
+                            return /*#__PURE__*/ jsx(BlockStyles$1, {
+                                block: child,
+                                context: childrenContext(props)
+                            }, "block-style-" + child.id);
+                        })
+                    ]
+                }) : null
+            ]
+        }) : /*#__PURE__*/ jsx(state.renderComponentTag, {
+            ...renderComponentProps(props)
+        })
+    });
+};
+const RenderBlock$1 = RenderBlock;
+
+// GENERATED BY MITOSIS
+const className = function className(props, state, builderContext) {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+};
+const onClick$1 = function onClick(props, state, builderContext) {
+    if (isEditing() && !props.blocks?.length) window.parent?.postMessage({
+        type: "builder.clickEmptyBlocks",
+        data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+        }
+    }, "*");
+};
+const onMouseEnter = function onMouseEnter(props, state, builderContext) {
+    if (isEditing() && !props.blocks?.length) window.parent?.postMessage({
+        type: "builder.hoverEmptyBlocks",
+        data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+        }
+    }, "*");
+};
+const RenderBlocks = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    useStylesScopedQrl(inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
+    const builderContext = useContext(BuilderContext);
+    const state = {};
+    return /*#__PURE__*/ jsxs("div", {
+        class: className(props) + " div-RenderBlocks",
+        get "builder-path" () {
+            return props.path;
+        },
+        get "builder-parent-id" () {
+            return props.parent;
+        },
+        get style () {
+            return props.styleProp;
+        },
+        onClick$: inlinedQrl((event)=>{
+            const [builderContext, props, state] = useLexicalScope();
+            return onClick$1(props);
+        }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
+            builderContext,
+            props,
+            state
+        ]),
+        onMouseEnter$: inlinedQrl((event)=>{
+            const [builderContext, props, state] = useLexicalScope();
+            return onMouseEnter(props);
+        }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
+            builderContext,
+            props,
+            state
+        ]),
+        children: [
+            props.blocks ? (props.blocks || []).map(function(block) {
+                return /*#__PURE__*/ jsx(RenderBlock$1, {
+                    block: block,
+                    context: builderContext
+                }, "render-block-" + block.id);
+            }) : null,
+            props.blocks ? (props.blocks || []).map(function(block) {
+                return /*#__PURE__*/ jsx(BlockStyles$1, {
+                    block: block,
+                    context: builderContext
+                }, "block-style-" + block.id);
+            }) : null
+        ],
+        [_IMMUTABLE]: {
+            "builder-path": _wrapSignal(props, "path"),
+            "builder-parent-id": _wrapSignal(props, "parent"),
+            style: _wrapSignal(props, "styleProp")
+        }
+    });
+}, "RenderBlocks_component_MYUZ0j1uLsw"));
+const RenderBlocks$1 = RenderBlocks;
+const STYLES$3 = `.div-RenderBlocks { 
+display: flex;
+flex-direction: column;
+align-items: stretch; }`;
+
+// GENERATED BY MITOSIS
+const getGutterSize = function getGutterSize(props, state) {
+    return typeof props.space === "number" ? props.space || 0 : 20;
+};
+const getColumns = function getColumns(props, state) {
+    return props.columns || [];
+};
+const getWidth = function getWidth(props, state, index) {
+    const columns = getColumns(props);
+    return columns[index]?.width || 100 / columns.length;
+};
+const getColumnCssWidth = function getColumnCssWidth(props, state, index) {
+    const columns = getColumns(props);
+    const gutterSize = getGutterSize(props);
+    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+};
+const maybeApplyForTablet = function maybeApplyForTablet(props, state, prop) {
+    const _stackColumnsAt = props.stackColumnsAt || "tablet";
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+};
+const columnsCssVars = function columnsCssVars(props, state) {
+    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
+    };
+};
+const columnCssVars = function columnCssVars(props, state) {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+        "--column-width": width,
+        "--column-margin-left": marginLeft,
+        "--column-width-tablet": maybeApplyForTablet(props, state, width),
+        "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
+    };
+};
+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"
+                    },
+                    [_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 { 
+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; } }`;
+
+// Taken from (and modified) the shopify theme script repo
+// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
+function removeProtocol(path) {
+    return path.replace(/http(s)?:/, '');
+}
+function updateQueryParam(uri = '', key, value) {
+    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+    const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+    if (uri.match(re)) return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
+    return uri + separator + key + '=' + encodeURIComponent(value);
+}
+function getShopifyImageUrl(src, size) {
+    if (!src || !src?.match(/cdn\.shopify\.com/) || !size) return src;
+    if (size === 'master') return removeProtocol(src);
+    const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
+    if (match) {
+        const prefix = src.split(match[0]);
+        const suffix = match[3];
+        const useSize = size.match('x') ? size : `${size}x`;
+        return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+    }
+    return null;
+}
+function getSrcSet(url) {
+    if (!url) return url;
+    const sizes = [
+        100,
+        200,
+        400,
+        800,
+        1200,
+        1600,
+        2000
+    ];
+    if (url.match(/builder\.io/)) {
+        let srcUrl = url;
+        const widthInSrc = Number(url.split('?width=')[1]);
+        if (!isNaN(widthInSrc)) srcUrl = `${srcUrl} ${widthInSrc}w`;
+        return sizes.filter((size)=>size !== widthInSrc).map((size)=>`${updateQueryParam(url, 'width', size)} ${size}w`).concat([
+            srcUrl
+        ]).join(', ');
+    }
+    if (url.match(/cdn\.shopify\.com/)) return sizes.map((size)=>[
+            getShopifyImageUrl(url, `${size}x${size}`),
+            size
+        ]).filter(([sizeUrl])=>!!sizeUrl).map(([sizeUrl, size])=>`${sizeUrl} ${size}w`).concat([
+        url
+    ]).join(', ');
+    return url;
+}
+
+// GENERATED BY MITOSIS
+const srcSetToUse = function srcSetToUse(props, state) {
+    const imageToUse = props.image || props.src;
+    const url = imageToUse;
+    if (!url || // We can auto add srcset for cdn.builder.io and shopify
+    // images, otherwise you can supply this prop manually
+    !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) return props.srcset;
+    if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
+        if (!props.srcset.includes(props.image.split("?")[0])) {
+            console.debug("Removed given srcset");
+            return getSrcSet(url);
+        }
+    } else if (props.image && !props.srcset) return getSrcSet(url);
+    return getSrcSet(url);
+};
+const webpSrcSet = function webpSrcSet(props, state) {
+    if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp) return srcSetToUse(props).replace(/\?/g, "?format=webp&");
+    else return "";
+};
+const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    useStylesScopedQrl(inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
+    return /*#__PURE__*/ jsxs(Fragment$2, {
+        children: [
+            /*#__PURE__*/ jsxs("picture", {
+                children: [
+                    webpSrcSet(props) ? /*#__PURE__*/ jsx("source", {
+                        type: "image/webp",
+                        srcSet: webpSrcSet(props)
+                    }) : null,
+                    /*#__PURE__*/ jsx("img", {
+                        loading: "lazy",
+                        get alt () {
+                            return props.altText;
+                        },
+                        role: props.altText ? "presentation" : undefined,
+                        style: {
+                            objectPosition: props.backgroundSize || "center",
+                            objectFit: props.backgroundSize || "cover"
+                        },
+                        class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
+                        get src () {
+                            return props.image;
+                        },
+                        srcSet: srcSetToUse(props),
+                        get sizes () {
+                            return props.sizes;
+                        },
+                        [_IMMUTABLE]: {
+                            alt: _wrapSignal(props, "altText"),
+                            src: _wrapSignal(props, "image"),
+                            sizes: _wrapSignal(props, "sizes")
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("source", {
+                        srcSet: srcSetToUse(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 + "%"
+                }
+            }) : null,
+            props.builderBlock?.children?.length && props.fitContent ? /*#__PURE__*/ jsx(Slot, {}) : null,
+            !props.fitContent && props.children ? /*#__PURE__*/ jsx("div", {
+                class: "div-Image-2",
+                children: /*#__PURE__*/ jsx(Slot, {})
+            }) : null
+        ]
+    });
+}, "Image_component_LRxDkFa1EfU"));
+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 { 
+width: 100%;
+pointer-events: none;
+font-size: 0; }.div-Image-2 { 
+display: flex;
+flex-direction: column;
+align-items: stretch;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%; }`;
+
+// GENERATED BY MITOSIS
+const Text = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    return /*#__PURE__*/ jsx("span", {
+        class: "builder-text",
+        get dangerouslySetInnerHTML () {
+            return props.text;
+        },
+        [_IMMUTABLE]: {
+            dangerouslySetInnerHTML: _wrapSignal(props, "text")
+        }
+    });
+}, "Text_component_15p0cKUxgIE"));
+const Text$1 = Text;
+
+// GENERATED BY MITOSIS
+const videoProps = function videoProps(props, state) {
+    return {
+        ...props.autoPlay === true ? {
+            autoPlay: true
+        } : {},
+        ...props.muted === true ? {
+            muted: true
+        } : {},
+        ...props.controls === true ? {
+            controls: true
+        } : {},
+        ...props.loop === true ? {
+            loop: true
+        } : {},
+        ...props.playsInline === true ? {
+            playsInline: true
+        } : {}
+    };
+};
+const spreadProps = function spreadProps(props, state) {
+    return {
+        ...props.attributes,
+        ...videoProps(props)
+    };
+};
+const Video = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    return /*#__PURE__*/ jsx("video", {
+        ...spreadProps(props),
+        style: {
+            width: "100%",
+            height: "100%",
+            ...props.attributes?.style,
+            objectFit: props.fit,
+            objectPosition: props.position,
+            // Hack to get object fit to work as expected and
+            // not have the video overflow
+            borderRadius: 1
+        },
+        src: props.video || "no-src",
+        get poster () {
+            return props.posterImage;
+        },
+        [_IMMUTABLE]: {
+            poster: _wrapSignal(props, "posterImage")
+        }
+    });
+}, "Video_component_qdcTZflYyoQ"));
+const Video$1 = Video;
+
+// GENERATED BY MITOSIS
+const Button = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    useStylesScopedQrl(inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: props.link ? /*#__PURE__*/ jsx("a", {
+            role: "button",
+            ...props.attributes,
+            get href () {
+                return props.link;
+            },
+            target: props.openLinkInNewTab ? "_blank" : undefined,
+            children: _wrapSignal(props, "text"),
+            [_IMMUTABLE]: {
+                href: _wrapSignal(props, "link")
+            }
+        }) : /*#__PURE__*/ jsx("button", {
+            class: "button-Button",
+            ...props.attributes,
+            children: _wrapSignal(props, "text")
+        })
+    });
+}, "Button_component_gJoMUICXoUQ"));
+const Button$1 = Button;
+const STYLES = `.button-Button { 
+all: unset; }`;
+
+const componentInfo$a = {
+    name: 'Core:Button',
+    builtIn: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+    defaultStyles: {
+        // TODO: make min width more intuitive and set one
+        appearance: 'none',
+        paddingTop: '15px',
+        paddingBottom: '15px',
+        paddingLeft: '25px',
+        paddingRight: '25px',
+        backgroundColor: '#000000',
+        color: 'white',
+        borderRadius: '4px',
+        textAlign: 'center',
+        cursor: 'pointer'
+    },
+    inputs: [
+        {
+            name: 'text',
+            type: 'text',
+            defaultValue: 'Click me!',
+            bubble: true
+        },
+        {
+            name: 'link',
+            type: 'url',
+            bubble: true
+        },
+        {
+            name: 'openLinkInNewTab',
+            type: 'boolean',
+            defaultValue: false,
+            friendlyName: 'Open link in new tab'
+        }
+    ],
+    static: true,
+    noWrap: true
+};
+
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */ // eslint-disable-next-line @typescript-eslint/ban-types
+const serializeFn = (fnValue)=>{
+    const fnStr = fnValue.toString().trim();
+    // we need to account for a few different fn syntaxes:
+    // 1. `function name(args) => {code}`
+    // 2. `name(args) => {code}`
+    // 3. `(args) => {}`
+    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
+    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
+};
+
+const componentInfo$9 = {
+    // TODO: ways to statically preprocess JSON for references, functions, etc
+    name: 'Columns',
+    builtIn: true,
+    inputs: [
+        {
+            name: 'columns',
+            type: 'array',
+            broadcast: true,
+            subFields: [
+                {
+                    name: 'blocks',
+                    type: 'array',
+                    hideFromUI: true,
+                    defaultValue: [
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    name: 'width',
+                    type: 'number',
+                    hideFromUI: true,
+                    helperText: 'Width %, e.g. set to 50 to fill half of the space'
+                },
+                {
+                    name: 'link',
+                    type: 'url',
+                    helperText: 'Optionally set a url that clicking this column will link to'
+                }
+            ],
+            defaultValue: [
+                {
+                    blocks: [
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    blocks: [
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }
+                    ]
+                }
+            ],
+            onChange: serializeFn((options)=>{
+                function clearWidths() {
+                    columns.forEach((col)=>{
+                        col.delete('width');
+                    });
+                }
+                const columns = options.get('columns');
+                if (Array.isArray(columns)) {
+                    const containsColumnWithWidth = !!columns.find((col)=>col.get('width'));
+                    if (containsColumnWithWidth) {
+                        const containsColumnWithoutWidth = !!columns.find((col)=>!col.get('width'));
+                        if (containsColumnWithoutWidth) clearWidths();
+                        else {
+                            const sumWidths = columns.reduce((memo, col)=>{
+                                return memo + col.get('width');
+                            }, 0);
+                            const widthsDontAddUp = sumWidths !== 100;
+                            if (widthsDontAddUp) clearWidths();
+                        }
+                    }
+                }
+            })
+        },
+        {
+            name: 'space',
+            type: 'number',
+            defaultValue: 20,
+            helperText: 'Size of gap between columns',
+            advanced: true
+        },
+        {
+            name: 'stackColumnsAt',
+            type: 'string',
+            defaultValue: 'tablet',
+            helperText: 'Convert horizontal columns to vertical at what device size',
+            enum: [
+                'tablet',
+                'mobile',
+                'never'
+            ],
+            advanced: true
+        },
+        {
+            name: 'reverseColumnsWhenStacked',
+            type: 'boolean',
+            defaultValue: false,
+            helperText: 'When stacking columns for mobile devices, reverse the ordering',
+            advanced: true
+        }
+    ]
+};
+
+const componentInfo$8 = {
+    name: 'Fragment',
+    static: true,
+    hidden: true,
+    builtIn: true,
+    canHaveChildren: true,
+    noWrap: true
+};
+
+// GENERATED BY MITOSIS
+const FragmentComponent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    return /*#__PURE__*/ jsx("span", {
+        children: /*#__PURE__*/ jsx(Slot, {})
+    });
+}, "FragmentComponent_component_T0AypnadAK0"));
+const Fragment = FragmentComponent;
+
+const componentInfo$7 = {
+    name: 'Image',
+    static: true,
+    builtIn: true,
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+    defaultStyles: {
+        position: 'relative',
+        minHeight: '20px',
+        minWidth: '20px',
+        overflow: 'hidden'
+    },
+    canHaveChildren: true,
+    inputs: [
+        {
+            name: 'image',
+            type: 'file',
+            bubble: true,
+            allowedFileTypes: [
+                'jpeg',
+                'jpg',
+                'png',
+                'svg'
+            ],
+            required: true,
+            defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            onChange: serializeFn((options)=>{
+                const DEFAULT_ASPECT_RATIO = 0.7041;
+                options.delete('srcset');
+                options.delete('noWebp');
+                function loadImage(url, timeout = 60000) {
+                    return new Promise((resolve, reject)=>{
+                        const img = document.createElement('img');
+                        let loaded = false;
+                        img.onload = ()=>{
+                            loaded = true;
+                            resolve(img);
+                        };
+                        img.addEventListener('error', (event)=>{
+                            console.warn('Image load failed', event.error);
+                            reject(event.error);
+                        });
+                        img.src = url;
+                        setTimeout(()=>{
+                            if (!loaded) reject(new Error('Image load timed out'));
+                        }, timeout);
+                    });
+                }
+                function round(num) {
+                    return Math.round(num * 1000) / 1000;
+                }
+                const value = options.get('image');
+                const aspectRatio = options.get('aspectRatio');
+                // For SVG images - don't render as webp, keep them as SVG
+                fetch(value).then((res)=>res.blob()).then((blob)=>{
+                    if (blob.type.includes('svg')) options.set('noWebp', true);
+                });
+                if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) return loadImage(value).then((img)=>{
+                    const possiblyUpdatedAspectRatio = options.get('aspectRatio');
+                    if (options.get('image') === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+                        if (img.width && img.height) {
+                            options.set('aspectRatio', round(img.height / img.width));
+                            options.set('height', img.height);
+                            options.set('width', img.width);
+                        }
+                    }
+                });
+            })
+        },
+        {
+            name: 'backgroundSize',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: [
+                {
+                    label: 'contain',
+                    value: 'contain',
+                    helperText: 'The image should never get cropped'
+                },
+                {
+                    label: 'cover',
+                    value: 'cover',
+                    helperText: "The image should fill it's box, cropping when needed"
+                }
+            ]
+        },
+        {
+            name: 'backgroundPosition',
+            type: 'text',
+            defaultValue: 'center',
+            enum: [
+                'center',
+                'top',
+                'left',
+                'right',
+                'bottom',
+                'top left',
+                'top right',
+                'bottom left',
+                'bottom right'
+            ]
+        },
+        {
+            name: 'altText',
+            type: 'string',
+            helperText: 'Text to display when the user has images off'
+        },
+        {
+            name: 'height',
+            type: 'number',
+            hideFromUI: true
+        },
+        {
+            name: 'width',
+            type: 'number',
+            hideFromUI: true
+        },
+        {
+            name: 'sizes',
+            type: 'string',
+            hideFromUI: true
+        },
+        {
+            name: 'srcset',
+            type: 'string',
+            hideFromUI: true
+        },
+        {
+            name: 'lazy',
+            type: 'boolean',
+            defaultValue: true,
+            hideFromUI: true
+        },
+        {
+            name: 'fitContent',
+            type: 'boolean',
+            helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+            defaultValue: true
+        },
+        {
+            name: 'aspectRatio',
+            type: 'number',
+            helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+            advanced: true,
+            defaultValue: 0.7041
+        }
+    ]
+};
+
+const componentInfo$6 = {
+    name: 'Core:Section',
+    static: true,
+    builtIn: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',
+    inputs: [
+        {
+            name: 'maxWidth',
+            type: 'number',
+            defaultValue: 1200
+        },
+        {
+            name: 'lazyLoad',
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true,
+            description: 'Only render this section when in view'
+        }
+    ],
+    defaultStyles: {
+        paddingLeft: '20px',
+        paddingRight: '20px',
+        paddingTop: '50px',
+        paddingBottom: '50px',
+        marginTop: '0px',
+        width: '100vw',
+        marginLeft: 'calc(50% - 50vw)'
+    },
+    canHaveChildren: true,
+    defaultChildren: [
+        {
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    textAlign: 'center'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>"
+                }
+            }
+        }
+    ]
+};
+
+// GENERATED BY MITOSIS
+const SectionComponent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    return /*#__PURE__*/ jsx("section", {
+        ...props.attributes,
+        style: (()=>{
+            props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : undefined;
+        })(),
+        children: /*#__PURE__*/ jsx(Slot, {})
+    });
+}, "SectionComponent_component_ZWF9iD5WeLg"));
+const Section = SectionComponent;
+
+const componentInfo$5 = {
+    name: 'Symbol',
+    noWrap: true,
+    static: true,
+    builtIn: true,
+    inputs: [
+        {
+            name: 'symbol',
+            type: 'uiSymbol'
+        },
+        {
+            name: 'dataOnly',
+            helperText: "Make this a data symbol that doesn't display any UI",
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        },
+        {
+            name: 'inheritState',
+            helperText: 'Inherit the parent component state and data',
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true
+        },
+        {
+            name: 'renderToLiquid',
+            helperText: 'Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting',
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        },
+        {
+            name: 'useChildren',
+            hideFromUI: true,
+            type: 'boolean'
+        }
+    ]
+};
+
+const componentInfo$4 = {
+    name: 'Text',
+    static: true,
+    builtIn: true,
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+    inputs: [
+        {
+            name: 'text',
+            type: 'html',
+            required: true,
+            autoFocus: true,
+            bubble: true,
+            defaultValue: 'Enter some text...'
+        }
+    ],
+    defaultStyles: {
+        lineHeight: 'normal',
+        height: 'auto',
+        textAlign: 'center'
+    }
+};
+
+const componentInfo$3 = {
+    name: 'Video',
+    canHaveChildren: true,
+    builtIn: true,
+    defaultStyles: {
+        minHeight: '20px',
+        minWidth: '20px'
+    },
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+    inputs: [
+        {
+            name: 'video',
+            type: 'file',
+            allowedFileTypes: [
+                'mp4'
+            ],
+            bubble: true,
+            defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+            required: true
+        },
+        {
+            name: 'posterImage',
+            type: 'file',
+            allowedFileTypes: [
+                'jpeg',
+                'png'
+            ],
+            helperText: 'Image to show before the video plays'
+        },
+        {
+            name: 'autoPlay',
+            type: 'boolean',
+            defaultValue: true
+        },
+        {
+            name: 'controls',
+            type: 'boolean',
+            defaultValue: false
+        },
+        {
+            name: 'muted',
+            type: 'boolean',
+            defaultValue: true
+        },
+        {
+            name: 'loop',
+            type: 'boolean',
+            defaultValue: true
+        },
+        {
+            name: 'playsInline',
+            type: 'boolean',
+            defaultValue: true
+        },
+        {
+            name: 'fit',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: [
+                'contain',
+                'cover',
+                'fill',
+                'auto'
+            ]
+        },
+        {
+            name: 'fitContent',
+            type: 'boolean',
+            helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+            defaultValue: true,
+            advanced: true
+        },
+        {
+            name: 'position',
+            type: 'text',
+            defaultValue: 'center',
+            enum: [
+                'center',
+                'top',
+                'left',
+                'right',
+                'bottom',
+                'top left',
+                'top right',
+                'bottom left',
+                'bottom right'
+            ]
+        },
+        {
+            name: 'height',
+            type: 'number',
+            advanced: true
+        },
+        {
+            name: 'width',
+            type: 'number',
+            advanced: true
+        },
+        {
+            name: 'aspectRatio',
+            type: 'number',
+            advanced: true,
+            defaultValue: 0.7004048582995948
+        },
+        {
+            name: 'lazyLoad',
+            type: 'boolean',
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true
+        }
+    ]
+};
+
+const componentInfo$2 = {
+    name: 'Embed',
+    static: true,
+    builtIn: true,
+    inputs: [
+        {
+            name: 'url',
+            type: 'url',
+            required: true,
+            defaultValue: '',
+            helperText: 'e.g. enter a youtube url, google map, etc',
+            onChange: serializeFn((options)=>{
+                const url = options.get('url');
+                if (url) {
+                    options.set('content', 'Loading...');
+                    // TODO: get this out of here!
+                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res)=>res.json()).then((data)=>{
+                        if (options.get('url') === url) {
+                            if (data.html) options.set('content', data.html);
+                            else options.set('content', 'Invalid url, please try another');
+                        }
+                    }).catch((_err)=>{
+                        options.set('content', 'There was an error embedding this URL, please try again or another URL');
+                    });
+                } else options.delete('content');
+            })
+        },
+        {
+            name: 'content',
+            type: 'html',
+            defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+            hideFromUI: true
+        }
+    ]
+};
+
+const SCRIPT_MIME_TYPES = [
+    'text/javascript',
+    'application/javascript',
+    'application/ecmascript'
+];
+const isJsScript = (script)=>SCRIPT_MIME_TYPES.includes(script.type);
+
+// GENERATED BY MITOSIS
+const findAndRunScripts$1 = function findAndRunScripts(props, state, elem) {
+    if (!elem || !elem.getElementsByTagName) return;
+    const scripts = elem.getElementsByTagName("script");
+    for(let i = 0; i < scripts.length; i++){
+        const script = scripts[i];
+        if (script.src && !state.scriptsInserted.includes(script.src)) {
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+        } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText)) try {
+            state.scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+        } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
+        }
+    }
+};
+const Embed = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    const elem = useRef();
+    const state = useStore({
+        ranInitFn: false,
+        scriptsInserted: [],
+        scriptsRun: []
+    });
+    useWatchQrl(inlinedQrl(({ track  })=>{
+        const [elem, props, state] = useLexicalScope();
+        state && track(state, "ranInitFn");
+        if (elem && !state.ranInitFn) {
+            state.ranInitFn = true;
+            findAndRunScripts$1(props, state, elem);
+        }
+    }, "Embed_component_useWatch_AxgWjrHdlAI", [
+        elem,
+        props,
+        state
+    ]));
+    return /*#__PURE__*/ jsx("div", {
+        class: "builder-embed",
+        ref: elem,
+        get dangerouslySetInnerHTML () {
+            return props.content;
+        },
+        [_IMMUTABLE]: {
+            dangerouslySetInnerHTML: _wrapSignal(props, "content")
+        }
+    });
+}, "Embed_component_Uji08ORjXbE"));
+const embed = Embed;
+
+// GENERATED BY MITOSIS
+const ImgComponent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    return /*#__PURE__*/ jsx("img", {
+        style: {
+            objectFit: props.backgroundSize || "cover",
+            objectPosition: props.backgroundPosition || "center"
+        },
+        get alt () {
+            return props.altText;
+        },
+        src: props.imgSrc || props.image,
+        ...props.attributes,
+        [_IMMUTABLE]: {
+            alt: _wrapSignal(props, "altText")
+        }
+    }, isEditing() && props.imgSrc || "default-key");
+}, "ImgComponent_component_FXvIDBSffO8"));
+const Img = ImgComponent;
+
+const componentInfo$1 = {
+    // friendlyName?
+    name: 'Raw:Img',
+    hideFromInsertMenu: true,
+    builtIn: true,
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+    inputs: [
+        {
+            name: 'image',
+            bubble: true,
+            type: 'file',
+            allowedFileTypes: [
+                'jpeg',
+                'jpg',
+                'png',
+                'svg'
+            ],
+            required: true
+        }
+    ],
+    noWrap: true,
+    static: true
+};
+
+// GENERATED BY MITOSIS
+const findAndRunScripts = function findAndRunScripts(props, state, elem) {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+        const scripts = elem.getElementsByTagName("script");
+        for(let i = 0; i < scripts.length; i++){
+            const script = scripts[i];
+            if (script.src) {
+                if (state.scriptsInserted.includes(script.src)) continue;
+                state.scriptsInserted.push(script.src);
+                const newScript = document.createElement("script");
+                newScript.async = true;
+                newScript.src = script.src;
+                document.head.appendChild(newScript);
+            } else if (!script.type || [
+                "text/javascript",
+                "application/javascript",
+                "application/ecmascript"
+            ].includes(script.type)) {
+                if (state.scriptsRun.includes(script.innerText)) continue;
+                try {
+                    state.scriptsRun.push(script.innerText);
+                    new Function(script.innerText)();
+                } catch (error) {
+                    console.warn("`CustomCode`: Error running script:", error);
+                }
+            }
+        }
+    }
+};
+const CustomCode = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    const elem = useRef();
+    const state = useStore({
+        scriptsInserted: [],
+        scriptsRun: []
+    });
+    useClientEffectQrl(inlinedQrl(()=>{
+        const [elem, props, state] = useLexicalScope();
+        findAndRunScripts(props, state, elem);
+    }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
+        elem,
+        props,
+        state
+    ]));
+    return /*#__PURE__*/ jsx("div", {
+        ref: elem,
+        class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
+        get dangerouslySetInnerHTML () {
+            return props.code;
+        },
+        [_IMMUTABLE]: {
+            dangerouslySetInnerHTML: _wrapSignal(props, "code")
+        }
+    });
+}, "CustomCode_component_uYOSy7w7Zqw"));
+const customCode = CustomCode;
+
+const componentInfo = {
+    name: 'Custom Code',
+    static: true,
+    builtIn: true,
+    requiredPermissions: [
+        'editCode'
+    ],
+    inputs: [
+        {
+            name: 'code',
+            type: 'html',
+            required: true,
+            defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+            code: true
+        },
+        {
+            name: 'replaceNodes',
+            type: 'boolean',
+            helperText: 'Preserve server rendered dom nodes',
+            advanced: true
+        },
+        {
+            name: 'scriptsClientOnly',
+            type: 'boolean',
+            defaultValue: false,
+            helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+            advanced: true
+        }
+    ]
+};
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */ const getDefaultRegisteredComponents = ()=>[
+        {
+            component: Columns$1,
+            ...componentInfo$9
+        },
+        {
+            component: Image$1,
+            ...componentInfo$7
+        },
+        {
+            component: Img,
+            ...componentInfo$1
+        },
+        {
+            component: Text$1,
+            ...componentInfo$4
+        },
+        {
+            component: Video$1,
+            ...componentInfo$3
+        },
+        {
+            component: Symbol$2,
+            ...componentInfo$5
+        },
+        {
+            component: Button$1,
+            ...componentInfo$a
+        },
+        {
+            component: Section,
+            ...componentInfo$6
+        },
+        {
+            component: Fragment,
+            ...componentInfo$8
+        },
+        {
+            component: embed,
+            ...componentInfo$2
+        },
+        {
+            component: customCode,
+            ...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 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, '');
+            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;
+}
+
+async 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;
+}
+
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */ const getTopLevelDomain = (host)=>{
+    const parts = host.split('.');
+    if (parts.length > 2) return parts.slice(1).join('.');
+    return host;
+};
+
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */ const getCookie = async ({ name , canTrack  })=>{
+    try {
+        if (!canTrack) return undefined;
+        /**
+     * Extracted from MDN docs
+     * https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
+     */ return document.cookie.split('; ').find((row)=>row.startsWith(`${name}=`))?.split('=')[1];
+    } catch (err) {
+        console.debug('[COOKIE] GET error: ', err);
+    }
+};
+const stringifyCookie = (cookie)=>cookie.map(([key, value])=>value ? `${key}=${value}` : key).join('; ');
+const SECURE_CONFIG = [
+    [
+        'secure',
+        ''
+    ],
+    [
+        'SameSite',
+        'None'
+    ]
+];
+const createCookieString = ({ name , value , expires  })=>{
+    const secure = isBrowser() ? location.protocol === 'https:' : true;
+    const secureObj = secure ? SECURE_CONFIG : [
+        []
+    ];
+    // TODO: need to know if secure server side
+    const expiresObj = expires ? [
+        [
+            'expires',
+            expires.toUTCString()
+        ]
+    ] : [
+        []
+    ];
+    const cookieValue = [
+        [
+            name,
+            value
+        ],
+        ...expiresObj,
+        [
+            'path',
+            '/'
+        ],
+        [
+            'domain',
+            getTopLevelDomain(window.location.hostname)
+        ],
+        ...secureObj
+    ];
+    const cookie = stringifyCookie(cookieValue);
+    return cookie;
+};
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */ const setCookie = async ({ name , value , expires , canTrack  })=>{
+    try {
+        if (!canTrack) return undefined;
+        const cookie = createCookieString({
+            name,
+            value,
+            expires
+        });
+        document.cookie = cookie;
+    } catch (err) {
+        console.warn('[COOKIE] SET error: ', err);
+    }
+};
+
+const BUILDER_STORE_PREFIX = 'builderio.variations';
+const getContentTestKey = (id)=>`${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId , canTrack  })=>getCookie({
+        name: getContentTestKey(contentId),
+        canTrack
+    });
+const setContentVariationCookie = ({ contentId , canTrack , value  })=>setCookie({
+        name: getContentTestKey(contentId),
+        value,
+        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
+ */ const getRandomVariationId = ({ id , variations  })=>{
+    let n = 0;
+    const random = Math.random();
+    // loop over variations test ratios, incrementing a counter,
+    // until we find the variation that this user should be assigned to
+    for(const id1 in variations){
+        const testRatio = variations[id1]?.testRatio;
+        n += testRatio;
+        if (random < n) return id1;
+    }
+    // `item.variations` does not include the default variation
+    // if we arrive here, then it means that the random number fits in the default variation bucket
+    return id;
+};
+const getTestFields = ({ item , testGroupId  })=>{
+    const variationValue = item.variations[testGroupId];
+    if (testGroupId === item.id || // handle edge-case where `testGroupId` points to non-existing variation
+    !variationValue) return {
+        testVariationId: item.id,
+        testVariationName: 'Default'
+    };
+    else return {
+        data: variationValue.data,
+        testVariationId: variationValue.id,
+        testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : '')
+    };
+};
+const getContentVariation = async ({ item , canTrack  })=>{
+    // try to find test variation in cookies/storage
+    const testGroupId = await getContentVariationCookie({
+        canTrack,
+        contentId: item.id
+    });
+    const testFields = testGroupId ? getTestFields({
+        item,
+        testGroupId
+    }) : undefined;
+    if (testFields) return testFields;
+    else {
+        // if variation not found in storage, assign a random variation to this user
+        const randomVariationId = getRandomVariationId({
+            variations: item.variations,
+            id: item.id
+        });
+        // store variation in cookies/storage
+        setContentVariationCookie({
+            contentId: item.id,
+            value: randomVariationId,
+            canTrack
+        }).catch((err)=>{
+            console.error('could not store A/B test variation: ', err);
+        });
+        return getTestFields({
+            item,
+            testGroupId: randomVariationId
+        });
+    }
+};
+const handleABTesting = async ({ item , canTrack  })=>{
+    if (!checkIsBuilderContentWithVariations(item)) return;
+    const variationValue = await getContentVariation({
+        item,
+        canTrack
+    });
+    Object.assign(item, variationValue);
+};
+
+async function getContent(options) {
+    return (await getAllContent({
+        ...options,
+        limit: 1
+    })).results[0] || null;
+}
+const generateContentUrl = (options)=>{
+    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true ,  } = 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 queryOptions = {
+        ...getBuilderSearchParamsFromWindow(),
+        ...normalizeSearchParams(options.options || {})
+    };
+    const flattened = flatten(queryOptions);
+    for(const key in flattened)url.searchParams.set(key, String(flattened[key]));
+    if (userAttributes) url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+    if (query) {
+        const flattened1 = flatten({
+            query
+        });
+        for(const key1 in flattened1)url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+    }
+    return url;
+};
+async function getAllContent(options) {
+    const url = generateContentUrl(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({
+        item,
+        canTrack
+    });
+    return content;
+}
+
+function isPreviewing() {
+    if (!isBrowser()) return false;
+    if (isEditing()) return false;
+    return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */ const components = [];
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */ function registerComponent(component, info) {
+    components.push({
+        component,
+        ...info
+    });
+    console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
+    return component;
+}
+const createRegisterComponentMessage = ({ component: _ , ...info })=>({
+        type: 'builder.registerComponent',
+        data: prepareComponentInfoToSend(info)
+    });
+const serializeValue = (value)=>typeof value === 'function' ? serializeFn(value) : fastClone(value);
+const prepareComponentInfoToSend = ({ inputs , ...info })=>({
+        ...fastClone(info),
+        inputs: inputs?.map((input)=>Object.entries(input).reduce((acc, [key, value])=>({
+                    ...acc,
+                    [key]: serializeValue(value)
+                }), {}))
+    });
+
+/**
+ * @credit https://stackoverflow.com/a/2117523
+ */ function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0, v = c == 'x' ? r : r & 0x3 | 0x8;
+        return v.toString(16);
+    });
+}
+/**
+ * Slightly cleaner and smaller UUIDs
+ */ function uuid() {
+    return uuidv4().replace(/-/g, '');
+}
+
+const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
+const getSessionId = async ({ canTrack  })=>{
+    if (!canTrack) return undefined;
+    const sessionId = await getCookie({
+        name: SESSION_LOCAL_STORAGE_KEY,
+        canTrack
+    });
+    if (checkIsDefined(sessionId)) return sessionId;
+    else {
+        const newSessionId = createSessionId();
+        setSessionId({
+            id: newSessionId,
+            canTrack
+        });
+    }
+};
+const createSessionId = ()=>uuid();
+const setSessionId = ({ id , canTrack  })=>setCookie({
+        name: SESSION_LOCAL_STORAGE_KEY,
+        value: id,
+        canTrack
+    });
+
+const getLocalStorage = ()=>isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
+const getLocalStorageItem = ({ key , canTrack  })=>{
+    try {
+        if (canTrack) return getLocalStorage()?.getItem(key);
+        return undefined;
+    } catch (err) {
+        console.debug('[LocalStorage] GET error: ', err);
+    }
+};
+const setLocalStorageItem = ({ key , canTrack , value  })=>{
+    try {
+        if (canTrack) getLocalStorage()?.setItem(key, value);
+    } catch (err) {
+        console.debug('[LocalStorage] SET error: ', err);
+    }
+};
+
+const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
+const getVisitorId = ({ canTrack  })=>{
+    if (!canTrack) return undefined;
+    const visitorId = getLocalStorageItem({
+        key: VISITOR_LOCAL_STORAGE_KEY,
+        canTrack
+    });
+    if (checkIsDefined(visitorId)) return visitorId;
+    else {
+        const newVisitorId = createVisitorId();
+        setVisitorId({
+            id: newVisitorId,
+            canTrack
+        });
+    }
+};
+const createVisitorId = ()=>uuid();
+const setVisitorId = ({ id , canTrack  })=>setLocalStorageItem({
+        key: VISITOR_LOCAL_STORAGE_KEY,
+        value: id,
+        canTrack
+    });
+
+const getTrackingEventData = async ({ canTrack  })=>{
+    if (!canTrack) return {
+        visitorId: undefined,
+        sessionId: undefined
+    };
+    const sessionId = await getSessionId({
+        canTrack
+    });
+    const visitorId = getVisitorId({
+        canTrack
+    });
+    return {
+        sessionId,
+        visitorId
+    };
+};
+const createEvent = async ({ type: eventType , canTrack , apiKey , metadata , ...properties })=>({
+        type: eventType,
+        data: {
+            ...properties,
+            metadata: JSON.stringify(metadata),
+            ...await getTrackingEventData({
+                canTrack
+            }),
+            ownerId: apiKey
+        }
+    });
+async function _track(eventProps) {
+    if (!eventProps.canTrack) return;
+    if (isEditing()) return;
+    if (!(isBrowser() || TARGET === 'reactNative')) return;
+    return fetch(`https://builder.io/api/v1/track`, {
+        method: 'POST',
+        body: JSON.stringify({
+            events: [
+                await createEvent(eventProps)
+            ]
+        }),
+        headers: {
+            'content-type': 'application/json'
+        },
+        mode: 'cors'
+    }).catch((err)=>{
+        console.error('Failed to track: ', err);
+    });
+}
+const track = (args)=>_track({
+        ...args,
+        canTrack: true
+    });
+
+// GENERATED BY MITOSIS
+const getCssFromFont = function getCssFromFont(props, state, font) {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = "";
+    if (url && family && name) str += `
+  @font-face {
+    font-family: "${family}";
+    src: local("${name}"), url('${url}') format('woff2');
+    font-display: fallback;
+    font-weight: 400;
+  }
+          `.trim();
+    if (font.files) for(const weight in font.files){
+        const isNumber = String(Number(weight)) === weight;
+        if (!isNumber) continue;
+         // TODO: maybe limit number loaded
+        const weightUrl = font.files[weight];
+        if (weightUrl && weightUrl !== url) str += `
+  @font-face {
+    font-family: "${family}";
+    src: url('${weightUrl}') format('woff2');
+    font-display: fallback;
+    font-weight: ${weight};
+  }
+            `.trim();
+    }
+    return str;
+};
+const getFontCss = function getFontCss(props, state, { customFonts  }) {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font)=>getCssFromFont(props, state, font))?.join(" ") || "";
+};
+const injectedStyles = function injectedStyles(props, state) {
+    return `
+${props.cssCode || ""}
+${getFontCss(props, state, {
+        customFonts: props.customFonts
+    })}`;
+};
+const RenderContentStyles = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    const state = {};
+    return /*#__PURE__*/ jsx(RenderInlinedStyles$1, {
+        styles: injectedStyles(props, state)
+    });
+}, "RenderContentStyles_component_Og0xL34Zbvc"));
+const RenderContentStyles$1 = RenderContentStyles;
+
+// GENERATED BY MITOSIS
+const useContent = function useContent(props, state, elementRef) {
+    if (!props.content && !state.overrideContent) return undefined;
+    const mergedContent = {
+        ...props.content,
+        ...state.overrideContent,
+        data: {
+            ...props.content?.data,
+            ...props.data,
+            ...state.overrideContent?.data
+        }
+    };
+    return mergedContent;
+};
+const canTrackToUse = function canTrackToUse(props, state, elementRef) {
+    return props.canTrack || true;
+};
+const contentState = function contentState(props, state, elementRef) {
+    return {
+        ...props.content?.data?.state,
+        ...props.data,
+        ...state.overrideState
+    };
+};
+const contextContext = function contextContext(props, state, elementRef) {
+    return props.context || {};
+};
+const allRegisteredComponents = function allRegisteredComponents(props, state, elementRef) {
+    const allComponentsArray = [
+        ...getDefaultRegisteredComponents(),
+        // 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`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...props.customComponents || []
+    ];
+    const allComponents = allComponentsArray.reduce((acc, curr)=>({
+            ...acc,
+            [curr.name]: curr
+        }), {});
+    return allComponents;
+};
+const processMessage = function processMessage(props, state, elementRef, event) {
+    const { data  } = event;
+    if (data) switch(data.type){
+        case "builder.contentUpdate":
+            {
+                const messageContent = data.data;
+                const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+                const contentData = messageContent.data;
+                if (key === props.model) {
+                    state.overrideContent = contentData;
+                    state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                }
+                break;
+            }
+    }
+};
+const evaluateJsCode = function evaluateJsCode(props, state, elementRef) {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent(props, state)?.data?.jsCode;
+    if (jsCode) evaluate({
+        code: jsCode,
+        context: contextContext(props),
+        state: contentState(props, state)
+    });
+};
+const httpReqsData = function httpReqsData(props, state, elementRef) {
+    return {};
+};
+const onClick = function onClick(props, state, elementRef, _event) {
+    if (useContent(props, state)) {
+        const variationId = useContent(props, state)?.testVariationId;
+        const contentId = useContent(props, state)?.id;
+        _track({
+            type: "click",
+            canTrack: canTrackToUse(props),
+            contentId,
+            apiKey: props.apiKey,
+            variationId: variationId !== contentId ? variationId : undefined
+        });
+    }
+};
+const evalExpression = function evalExpression(props, state, elementRef, expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group)=>evaluate({
+            code: group,
+            context: contextContext(props),
+            state: contentState(props, state)
+        }));
+};
+const handleRequest = function handleRequest(props, state, elementRef, { url , key  }) {
+    getFetch().then((fetch)=>fetch(url)).then((response)=>response.json()).then((json)=>{
+        const newOverrideState = {
+            ...state.overrideState,
+            [key]: json
+        };
+        state.overrideState = newOverrideState;
+    }).catch((err)=>{
+        console.log("error fetching dynamic data", url, err);
+    });
+};
+const runHttpRequests = function runHttpRequests(props, state, elementRef) {
+    const requests = useContent(props, state)?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url])=>{
+        if (url && (!httpReqsData()[key] || isEditing())) {
+            const evaluatedUrl = evalExpression(props, state, elementRef, url);
+            handleRequest(props, state, elementRef, {
+                url: evaluatedUrl,
+                key
+            });
+        }
+    });
+};
+const emitStateUpdate = function emitStateUpdate(props, state, elementRef) {
+    if (isEditing()) window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+        detail: {
+            state: contentState(props, state),
+            ref: {
+                name: props.model
+            }
+        }
+    }));
+};
+const shouldRenderContentStyles = function shouldRenderContentStyles(props, state, elementRef) {
+    return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
+};
+const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
+    const elementRef = useRef();
+    const state = useStore({
+        forceReRenderCount: 0,
+        overrideContent: null,
+        overrideState: {},
+        update: 0
+    });
+    useContextProvider(BuilderContext, useStore({
+        content: (()=>{
+            return useContent(props, state);
+        })(),
+        state: (()=>{
+            return contentState(props, state);
+        })(),
+        context: (()=>{
+            return contextContext(props);
+        })(),
+        apiKey: (()=>{
+            return props.apiKey;
+        })(),
+        registeredComponents: (()=>{
+            return allRegisteredComponents(props);
+        })()
+    }));
+    useClientEffectQrl(inlinedQrl(()=>{
+        const [elementRef, props, state] = useLexicalScope();
+        if (isBrowser()) {
+            if (isEditing()) {
+                state.forceReRenderCount = state.forceReRenderCount + 1;
+                registerInsertMenu();
+                setupBrowserForEditing();
+                Object.values(allRegisteredComponents(props)).forEach((registeredComponent)=>{
+                    const message = createRegisterComponentMessage(registeredComponent);
+                    window.parent?.postMessage(message, "*");
+                });
+                window.addEventListener("message", processMessage.bind(null, props, state, elementRef));
+                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props, state, elementRef));
+            }
+            if (useContent(props, state)) {
+                const variationId = useContent(props, state)?.testVariationId;
+                const contentId = useContent(props, state)?.id;
+                _track({
+                    type: "impression",
+                    canTrack: canTrackToUse(props),
+                    contentId,
+                    apiKey: props.apiKey,
+                    variationId: variationId !== contentId ? variationId : undefined
+                });
+            } // override normal content in preview mode
+            if (isPreviewing()) {
+                const searchParams = new URL(location.href).searchParams;
+                if (props.model && searchParams.get("builder.preview") === props.model) {
+                    const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+                    if (previewApiKey) getContent({
+                        model: props.model,
+                        apiKey: previewApiKey
+                    }).then((content)=>{
+                        if (content) state.overrideContent = content;
+                    });
+                }
+            }
+            evaluateJsCode(props, state);
+            runHttpRequests(props, state, elementRef);
+            emitStateUpdate(props, state);
+        }
+    }, "RenderContent_component_useClientEffect_cA0sVHIkr5g", [
+        elementRef,
+        props,
+        state
+    ]));
+    useWatchQrl(inlinedQrl(({ track  })=>{
+        const [elementRef, props, state] = useLexicalScope();
+        state.useContent?.data && track(state.useContent?.data, "jsCode");
+        evaluateJsCode(props, state);
+    }, "RenderContent_component_useWatch_OIBatobA0hE", [
+        elementRef,
+        props,
+        state
+    ]));
+    useWatchQrl(inlinedQrl(({ track  })=>{
+        const [elementRef, props, state] = useLexicalScope();
+        state.useContent?.data && track(state.useContent?.data, "httpRequests");
+        runHttpRequests(props, state, elementRef);
+    }, "RenderContent_component_useWatch_1_LQM67VNl14k", [
+        elementRef,
+        props,
+        state
+    ]));
+    useWatchQrl(inlinedQrl(({ track  })=>{
+        const [elementRef, props, state] = useLexicalScope();
+        state && track(state, "contentState");
+        emitStateUpdate(props, state);
+    }, "RenderContent_component_useWatch_2_aGi0RpYNBO0", [
+        elementRef,
+        props,
+        state
+    ]));
+    useCleanupQrl(inlinedQrl(()=>{
+        const [elementRef, props, state] = useLexicalScope();
+        if (isBrowser()) {
+            window.removeEventListener("message", processMessage.bind(null, props, state, elementRef));
+            window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props, state, elementRef));
+        }
+    }, "RenderContent_component_useCleanup_FwcO310HVAI", [
+        elementRef,
+        props,
+        state
+    ]));
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: useContent(props, state) ? /*#__PURE__*/ jsxs("div", {
+            ref: elementRef,
+            onClick$: inlinedQrl((event)=>{
+                const [elementRef, props, state] = useLexicalScope();
+                return onClick(props, state);
+            }, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
+                elementRef,
+                props,
+                state
+            ]),
+            "builder-content-id": useContent(props, state)?.id,
+            get "builder-model" () {
+                return props.model;
+            },
+            children: [
+                shouldRenderContentStyles(props, state) ? /*#__PURE__*/ jsx(RenderContentStyles$1, {
+                    cssCode: useContent(props, state)?.data?.cssCode,
+                    customFonts: useContent(props, state)?.data?.customFonts
+                }) : null,
+                /*#__PURE__*/ jsx(RenderBlocks$1, {
+                    blocks: useContent(props, state)?.data?.blocks
+                }, state.forceReRenderCount)
+            ],
+            [_IMMUTABLE]: {
+                "builder-model": _wrapSignal(props, "model")
+            }
+        }) : null
+    });
+}, "RenderContent_component_hEAI0ahViXM"));
+const RenderContent$1 = RenderContent;
+
+// GENERATED BY MITOSIS
+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  })=>{
+        const [builderContext, props, state] = useLexicalScope();
+        props && track(props, "symbol");
+        state && track(state, "fetchedContent");
+        const symbolToUse = props.symbol;
+        /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */ if (symbolToUse && !symbolToUse.content && !state.fetchedContent && symbolToUse.model) getContent({
+            model: symbolToUse.model,
+            apiKey: builderContext.apiKey,
+            query: {
+                id: symbolToUse.entry
+            }
+        }).then((response)=>{
+            state.fetchedContent = response;
+        });
+    }, "Symbol_component_useWatch_9HNT04zd0Dk", [
+        builderContext,
+        props,
+        state
+    ]));
+    return /*#__PURE__*/ jsx("div", {
+        ...props.attributes,
+        get class () {
+            return state.className;
+        },
+        children: /*#__PURE__*/ jsx(RenderContent$1, {
+            get apiKey () {
+                return builderContext.apiKey;
+            },
+            get context () {
+                return builderContext.context;
+            },
+            customComponents: Object.values(builderContext.registeredComponents),
+            data: {
+                ...props.symbol?.data,
+                ...builderContext.state,
+                ...props.symbol?.content?.data?.state
+            },
+            model: props.symbol?.model,
+            content: contentToUse(props, state),
+            [_IMMUTABLE]: {
+                apiKey: _wrapSignal(builderContext, "apiKey"),
+                context: _wrapSignal(builderContext, "context")
+            }
+        }),
+        [_IMMUTABLE]: {
+            class: _wrapSignal(state, "className")
+        }
+    });
+}, "Symbol_component_WVvggdkUPdk"));
+const Symbol$2 = Symbol$1;
+
+const settings = {};
+function setEditorSettings(newSettings) {
+    if (isBrowser()) {
+        Object.assign(settings, newSettings);
+        const message = {
+            type: 'builder.settingsChange',
+            data: settings
+        };
+        parent.postMessage(message, '*');
+    }
+}
+
+export { Button$1 as Button, Columns$1 as Columns, Fragment, Image$1 as Image, RenderBlocks$1 as RenderBlocks, RenderContent$1 as RenderContent, Section, Symbol$2 as Symbol, Text$1 as Text, Video$1 as Video, components, convertSearchParamsToQueryObject, createRegisterComponentMessage, generateContentUrl, getAllContent, getBuilderSearchParams, getBuilderSearchParamsFromWindow, getContent, isEditing, isPreviewing, normalizeSearchParams, register, registerComponent, setEditorSettings, track };