@builder.io/sdk-qwik 0.0.9 → 0.0.12

package/lib/index.qwik.cjs

@@ -169,10 +169,7 @@ 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;
+  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;
 };
 function transformBlock(block) {
@@ -490,7 +487,7 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$9 = function componentInfo(props, state) {
+const componentInfo$a = function componentInfo(props, state) {
   if (component(props)) {
     const { component: _, ...info } = component(props);
     return info;
@@ -523,7 +520,7 @@ const attributes = function attributes2(props, state) {
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$9(props)?.noWrap;
+  return !componentInfo$a(props)?.noWrap;
 };
 const componentOptions = function componentOptions2(props, state) {
   return {
@@ -537,7 +534,8 @@ const renderComponentProps = function renderComponentProps2(props, state) {
   return {
     blockChildren: children(props),
     componentRef: componentRef(props),
-    componentOptions: componentOptions(props)
+    componentOptions: componentOptions(props),
+    context: props.context
   };
 };
 const children = function children2(props, state) {
@@ -560,21 +558,19 @@ const repeatItemData = function repeatItemData2(props, state) {
     return void 0;
   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
-    })
-  );
+  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 RenderBlock = (props) => {
@@ -587,7 +583,8 @@ const RenderBlock = (props) => {
         repeatItemData(props) ? (repeatItemData(props) || []).map((data, index) => {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
-            block: data.block
+            block: data.block,
+            context: props.context
           }, index);
         }) : null,
         !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
@@ -642,7 +639,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_QNti2s7juQc"));
   const builderContext = qwik.useContext(stdin_default);
   const state = {};
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: className(props) + " div-RenderBlocks",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
@@ -652,7 +649,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
     onClick$: qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
       return onClick$1(props2);
-    }, "RenderBlocks_component_Host_onClick_81ErKSpyspw", [
+    }, "RenderBlocks_component_div_onClick_IHSfVTIKyxE", [
       builderContext,
       props,
       state
@@ -660,31 +657,27 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
     onMouseEnter$: qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
       return onMouseEnter(props2);
-    }, "RenderBlocks_component_Host_onMouseEnter_h6rWG6KLkHE", [
+    }, "RenderBlocks_component_div_onMouseEnter_qLiEh4n9ugw", [
       builderContext,
       props,
       state
     ]),
-    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        props.blocks ? (props.blocks || []).map((block) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
-            block,
-            context: builderContext
-          }, "render-block-" + block.id);
-        }) : null,
-        props.blocks ? (props.blocks || []).map((block) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
-            block,
-            context: builderContext
-          }, "block-style-" + block.id);
-        }) : null
-      ]
-    })
+    children: [
+      props.blocks ? (props.blocks || []).map((block) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
+          block,
+          context: builderContext
+        }, "render-block-" + block.id);
+      }) : null,
+      props.blocks ? (props.blocks || []).map((block) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
+          block,
+          context: builderContext
+        }, "block-style-" + block.id);
+      }) : null
+    ]
   });
-}, "RenderBlocks_component_SXGwmVyEM0s"), {
-  tagName: "div"
-});
+}, "RenderBlocks_component_SXGwmVyEM0s"));
 const RenderBlocks$1 = RenderBlocks;
 const STYLES$2 = `.div-RenderBlocks { 
 display: flex;
@@ -730,7 +723,7 @@ const columnCssVars = function columnCssVars2(props, state) {
 const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_704fWXyHORo"));
   const state = {};
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
     children: (props.columns || []).map((column, index) => {
@@ -747,9 +740,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
       }, index);
     })
   });
-}, "Columns_component_0PeVQGTMczc"), {
-  tagName: "div"
-});
+}, "Columns_component_0PeVQGTMczc"));
 const Columns$1 = Columns;
 const STYLES$1 = `.div-Columns { 
 display: flex;
@@ -803,25 +794,15 @@ function getSrcSet(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([
+    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([
+    return sizes.map((size) => [
+      getShopifyImageUrl(url, `${size}x${size}`),
+      size
+    ]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([
       url
     ]).join(", ");
   return url;
@@ -848,51 +829,47 @@ const webpSrcSet = function webpSrcSet2(props, state) {
 };
 const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Image_component_useStylesScoped_gRbO7w7SeZA"));
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "div-Image",
-    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("picture", {
-          children: [
-            webpSrcSet(props) ? /* @__PURE__ */ jsxRuntime.jsx("source", {
-              type: "image/webp",
-              srcset: webpSrcSet(props)
-            }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("img", {
-              loading: "lazy",
-              alt: props.altText,
-              role: props.altText ? "presentation" : void 0,
-              style: {
-                objectPosition: props.backgroundSize || "center",
-                objectFit: props.backgroundSize || "cover"
-              },
-              class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
-              src: props.image,
-              srcset: srcSetToUse(props),
-              sizes: props.sizes
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx("source", {
-              srcset: srcSetToUse(props)
-            })
-          ]
-        }),
-        props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "builder-image-sizer div-Image-2",
-          style: {
-            paddingTop: props.aspectRatio * 100 + "%"
-          }
-        }) : null,
-        props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) : null,
-        !props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "div-Image-3",
-          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
-        }) : null
-      ]
-    })
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("picture", {
+        children: [
+          webpSrcSet(props) ? /* @__PURE__ */ jsxRuntime.jsx("source", {
+            type: "image/webp",
+            srcset: webpSrcSet(props)
+          }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("img", {
+            loading: "lazy",
+            alt: props.altText,
+            role: props.altText ? "presentation" : void 0,
+            style: {
+              objectPosition: props.backgroundSize || "center",
+              objectFit: props.backgroundSize || "cover"
+            },
+            class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
+            src: props.image,
+            srcset: srcSetToUse(props),
+            sizes: props.sizes
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("source", {
+            srcset: srcSetToUse(props)
+          })
+        ]
+      }),
+      props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "builder-image-sizer div-Image-2",
+        style: {
+          paddingTop: props.aspectRatio * 100 + "%"
+        }
+      }) : null,
+      props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) : null,
+      !props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "div-Image-3",
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      }) : null
+    ]
   });
-}, "Image_component_y3S3Zox9wEo"), {
-  tagName: "div"
-});
+}, "Image_component_y3S3Zox9wEo"));
 const Image$1 = Image;
 const STYLES = `.div-Image { 
 position: relative; }.img-Image { 
@@ -915,13 +892,11 @@ left: 0;
 width: 100%;
 height: 100%; }`;
 const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: "builder-text",
     dangerouslySetInnerHTML: props.text
   });
-}, "Text_component_ci0NVEdoK0Q"), {
-  tagName: "div"
-});
+}, "Text_component_ci0NVEdoK0Q"));
 const Text$1 = Text;
 const videoProps = function videoProps2(props, state) {
   return {
@@ -943,7 +918,7 @@ const videoProps = function videoProps2(props, state) {
   };
 };
 const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("video", {
     ...videoProps(props),
     style: {
       width: "100%",
@@ -956,9 +931,7 @@ const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
     src: props.video || "no-src",
     poster: props.posterImage
   });
-}, "Video_component_O5sPuWlrTvk"), {
-  tagName: "video"
-});
+}, "Video_component_O5sPuWlrTvk"));
 const Video$1 = Video;
 const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(qwik.Fragment, {
@@ -975,7 +948,7 @@ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   });
 }, "Button_component_FtjCELjtKF4"));
 const Button$1 = Button;
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -1017,7 +990,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1213,13 +1186,9 @@ const componentInfo$7 = {
         }
         const columns = options.get("columns");
         if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find(
-            (col) => col.get("width")
-          );
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
           if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find(
-              (col) => !col.get("width")
-            );
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
             if (containsColumnWithoutWidth)
               clearWidths();
             else {
@@ -1262,7 +1231,7 @@ const componentInfo$7 = {
     }
   ]
 };
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1271,14 +1240,12 @@ const componentInfo$6 = {
   noWrap: true
 };
 const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
-}, "FragmentComponent_component_FJmqlA66Rjg"), {
-  tagName: "span"
-});
+}, "FragmentComponent_component_FJmqlA66Rjg"));
 const Fragment = FragmentComponent;
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1331,9 +1298,7 @@ const componentInfo$5 = {
         }
         const value = options.get("image");
         const aspectRatio = options.get("aspectRatio");
-        fetch(value).then(
-          (res) => res.blob()
-        ).then((blob) => {
+        fetch(value).then((res) => res.blob()).then((blob) => {
           if (blob.type.includes("svg"))
             options.set("noWebp", true);
         });
@@ -1429,7 +1394,7 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1476,18 +1441,16 @@ const componentInfo$4 = {
   ]
 };
 const SectionComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", {
     ...props.attributes,
     style: (() => {
       props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : void 0;
     })(),
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
-}, "SectionComponent_component_m1CcjCwgHug"), {
-  tagName: "section"
-});
+}, "SectionComponent_component_m1CcjCwgHug"));
 const Section = SectionComponent;
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1527,7 +1490,7 @@ const componentInfo$3 = {
     }
   ]
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1548,7 +1511,7 @@ const componentInfo$2 = {
     textAlign: "center"
   }
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1661,7 +1624,7 @@ const componentInfo$1 = {
     }
   ]
 };
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1677,9 +1640,7 @@ const componentInfo2 = {
         if (url) {
           options.set("content", "Loading...");
           const apiKey = "ae0e60e78201a3f2b0de4b";
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(
-            (res) => res.json()
-          ).then((data) => {
+          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);
@@ -1745,15 +1706,47 @@ const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: "builder-embed",
     ref: elem,
     dangerouslySetInnerHTML: props.content
   });
-}, "Embed_component_CP6B8Y76ylw"), {
-  tagName: "div"
-});
+}, "Embed_component_CP6B8Y76ylw"));
 const embed = Embed;
+const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", {
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center"
+    },
+    alt: props.altText,
+    src: props.imgSrc || props.image,
+    ...props.attributes
+  }, isEditing() && props.imgSrc || "default-key");
+}, "ImgComponent_component_b8FkE9OcVN8"));
+const Img = ImgComponent;
+const componentInfo2 = {
+  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
+};
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
@@ -1778,31 +1771,34 @@ var __spreadValues$3 = (a, b) => {
 const getDefaultRegisteredComponents = () => [
   __spreadValues$3({
     component: Columns$1
-  }, componentInfo$7),
+  }, componentInfo$8),
   __spreadValues$3({
     component: Image$1
-  }, componentInfo$5),
+  }, componentInfo$6),
+  __spreadValues$3({
+    component: Img
+  }, componentInfo2),
   __spreadValues$3({
     component: Text$1
-  }, componentInfo$2),
+  }, componentInfo$3),
   __spreadValues$3({
     component: Video$1
-  }, componentInfo$1),
+  }, componentInfo$2),
   __spreadValues$3({
     component: Symbol$2
-  }, componentInfo$3),
+  }, componentInfo$4),
   __spreadValues$3({
     component: Button$1
-  }, componentInfo$8),
+  }, componentInfo$9),
   __spreadValues$3({
     component: Section
-  }, componentInfo$4),
+  }, componentInfo$5),
   __spreadValues$3({
     component: Fragment
-  }, componentInfo$6),
+  }, componentInfo$7),
   __spreadValues$3({
     component: embed
-  }, componentInfo2)
+  }, componentInfo$1)
 ];
 var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
@@ -1905,9 +1901,7 @@ function getFetch() {
   return __async$1(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      const nodeFetch = Promise.resolve().then(() => require("./index.d8c1e37f.cjs")).then(
-        (d) => d.default
-      );
+      const nodeFetch = Promise.resolve().then(() => require("./index.d8c1e37f.cjs")).then((d) => d.default);
       return nodeFetch.default || nodeFetch;
     }
     return globalFetch.default || globalFetch;
@@ -2012,8 +2006,8 @@ const generateContentUrl = (options) => {
     const flattened2 = flatten({
       query
     });
-    for (const key in flattened2)
-      url.searchParams.set(key, JSON.stringify(flattened2[key]));
+    for (const key1 in flattened2)
+      url.searchParams.set(key1, JSON.stringify(flattened2[key1]));
   }
   return url;
 };
@@ -2021,9 +2015,7 @@ function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
     const fetch2 = yield fetch$;
-    const content = yield fetch2(url.href).then(
-      (res) => res.json()
-    );
+    const content = yield fetch2(url.href).then((res) => res.json());
     if (options.testGroups)
       for (const item of content.results)
         handleABTesting(item, options.testGroups);
@@ -2102,14 +2094,9 @@ const prepareComponentInfoToSend = (_c) => {
     "inputs"
   ]);
   return __spreadProps(__spreadValues({}, fastClone(info)), {
-    inputs: inputs == null ? void 0 : inputs.map(
-      (input) => Object.entries(input).reduce(
-        (acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
-          [key]: serializeValue(value)
-        }),
-        {}
-      )
-    )
+    inputs: inputs == null ? void 0 : inputs.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: serializeValue(value)
+    }), {}))
   });
 };
 function track(event, properties) {
@@ -2166,9 +2153,7 @@ const getCssFromFont = function getCssFromFont2(props, state, font) {
   return str;
 };
 const getFontCss = function getFontCss2(props, state, { customFonts }) {
-  return customFonts?.map(
-    (font) => getCssFromFont(props, state, font)
-  )?.join(" ") || "";
+  return customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") || "";
 };
 const injectedStyles = function injectedStyles2(props, state) {
   return `
@@ -2184,7 +2169,7 @@ const RenderContentStyles = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((p
   });
 }, "RenderContentStyles_component_32XAr483K2o"));
 const RenderContentStyles$1 = RenderContentStyles;
-const useContent = function useContent2(props, state) {
+const useContent = function useContent2(props, state, elementRef) {
   const mergedContent = {
     ...props.content,
     ...state.overrideContent,
@@ -2196,32 +2181,29 @@ const useContent = function useContent2(props, state) {
   };
   return mergedContent;
 };
-const contentState = function contentState2(props, state) {
+const contentState = function contentState2(props, state, elementRef) {
   return {
     ...props.content?.data?.state,
     ...props.data,
     ...state.overrideState
   };
 };
-const contextContext = function contextContext2(props, state) {
+const contextContext = function contextContext2(props, state, elementRef) {
   return props.context || {};
 };
-const allRegisteredComponents = function allRegisteredComponents2(props, state) {
+const allRegisteredComponents = function allRegisteredComponents2(props, state, elementRef) {
   const allComponentsArray = [
     ...getDefaultRegisteredComponents(),
     ...components,
     ...props.customComponents || []
   ];
-  const allComponents = allComponentsArray.reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr.name]: curr
-    }),
-    {}
-  );
+  const allComponents = allComponentsArray.reduce((acc, curr) => ({
+    ...acc,
+    [curr.name]: curr
+  }), {});
   return allComponents;
 };
-const processMessage = function processMessage2(props, state, event) {
+const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
   if (data)
     switch (data.type) {
@@ -2235,7 +2217,7 @@ const processMessage = function processMessage2(props, state, event) {
       }
     }
 };
-const evaluateJsCode = function evaluateJsCode2(props, state) {
+const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
   const jsCode = useContent(props, state)?.data?.jsCode;
   if (jsCode)
     evaluate({
@@ -2244,26 +2226,23 @@ const evaluateJsCode = function evaluateJsCode2(props, state) {
       state: contentState(props, state)
     });
 };
-const httpReqsData = function httpReqsData2(props, state) {
+const httpReqsData = function httpReqsData2(props, state, elementRef) {
   return {};
 };
-const onClick2 = function onClick3(props, state, _event) {
+const onClick2 = function onClick3(props, state, elementRef, _event) {
   if (useContent(props, state) && props.canTrack !== false)
     track("click", {
       contentId: useContent(props, state).id
     });
 };
-const evalExpression = function evalExpression2(props, state, expression) {
-  return expression.replace(
-    /{{([^}]+)}}/g,
-    (_match, group) => evaluate({
-      code: group,
-      context: contextContext(props),
-      state: contentState(props, state)
-    })
-  );
+const evalExpression = function evalExpression2(props, state, elementRef, expression) {
+  return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+    code: group,
+    context: contextContext(props),
+    state: contentState(props, state)
+  }));
 };
-const handleRequest = function handleRequest2(props, state, { url, key }) {
+const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   const fetchAndSetState = async () => {
     const fetch2 = await getFetch();
     const response = await fetch2(url);
@@ -2276,19 +2255,19 @@ const handleRequest = function handleRequest2(props, state, { url, key }) {
   };
   fetchAndSetState();
 };
-const runHttpRequests = function runHttpRequests2(props, state) {
+const runHttpRequests = function runHttpRequests2(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, url);
-      handleRequest(props, state, {
+      const evaluatedUrl = evalExpression(props, state, elementRef, url);
+      handleRequest(props, state, elementRef, {
         url: evaluatedUrl,
         key
       });
     }
   });
 };
-const emitStateUpdate = function emitStateUpdate2(props, state) {
+const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
   if (isEditing())
     window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
       detail: {
@@ -2299,11 +2278,11 @@ const emitStateUpdate = function emitStateUpdate2(props, state) {
       }
     }));
 };
-const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state) {
+const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state, elementRef) {
   return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
 };
 const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  const hostElement = qwik.useHostElement();
+  const elementRef = qwik.useRef();
   const state = qwik.useStore({
     forceReRenderCount: 0,
     overrideContent: null,
@@ -2328,19 +2307,19 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     })()
   }));
   qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
-    const [hostElement2, props2, state2] = qwik.useLexicalScope();
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount++;
-        qwik._useMutableProps(hostElement2, true);
+        qwik._useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
-        window.addEventListener("message", processMessage.bind(null, props2, state2));
-        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2));
+        window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
       }
       if (useContent(props2, state2) && props2.canTrack !== false)
         track("impression", {
@@ -2361,54 +2340,60 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         }
       }
       evaluateJsCode(props2, state2);
-      runHttpRequests(props2, state2);
+      runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
   }, "RenderContent_component_useClientEffect_ntruwSC9lSo", [
-    hostElement,
+    elementRef,
     props,
     state
   ]));
-  qwik.useWatchQrl(qwik.inlinedQrl(({ track: track1 }) => {
-    const [props2, state2] = qwik.useLexicalScope();
-    state2.useContent?.data && track1(state2.useContent?.data, "jsCode");
+  qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
+    state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
     evaluateJsCode(props2, state2);
   }, "RenderContent_component_useWatch_1P0ujLQOmzc", [
+    elementRef,
     props,
     state
   ]));
   qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
-    const [props2, state2] = qwik.useLexicalScope();
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
     state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
-    runHttpRequests(props2, state2);
+    runHttpRequests(props2, state2, elementRef2);
   }, "RenderContent_component_useWatch_1_0hAcn4V2AZw", [
+    elementRef,
     props,
     state
   ]));
-  qwik.useWatchQrl(qwik.inlinedQrl(({ track: track3 }) => {
-    const [props2, state2] = qwik.useLexicalScope();
-    state2 && track3(state2, "contentState");
+  qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
+    state2 && track2(state2, "contentState");
     emitStateUpdate(props2, state2);
   }, "RenderContent_component_useWatch_2_t2n8zpl4mRs", [
+    elementRef,
     props,
     state
   ]));
   qwik.useCleanupQrl(qwik.inlinedQrl(() => {
-    const [props2, state2] = qwik.useLexicalScope();
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
     if (isBrowser()) {
-      window.removeEventListener("message", processMessage.bind(null, props2, state2));
-      window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2));
+      window.removeEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
+      window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
     }
   }, "RenderContent_component_useCleanup_sGf1npb03WA", [
+    elementRef,
     props,
     state
   ]));
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: useContent(props, state) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref: elementRef,
       onClick$: qwik.inlinedQrl((event) => {
-        const [props2, state2] = qwik.useLexicalScope();
+        const [elementRef2, props2, state2] = qwik.useLexicalScope();
         return onClick2(props2, state2);
       }, "RenderContent_component__Fragment_div_onClick_76e3rL00UYE", [
+        elementRef,
         props,
         state
       ]),
@@ -2461,7 +2446,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsxRuntime.jsx(qwik.Host, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props.attributes,
     dataSet: {
       class: state.className
@@ -2480,9 +2465,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
       content: state.content
     })
   });
-}, "Symbol_component_Dn8mGpai87I"), {
-  tagName: "div"
-});
+}, "Symbol_component_Dn8mGpai87I"));
 const Symbol$2 = Symbol$1;
 const settings = {};
 function setEditorSettings(newSettings) {