@builder.io/sdk-qwik 0.0.9 → 0.0.12

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Host, useLexicalScope, Slot, Fragment as Fragment$2, useRef, useWatchQrl, useHostElement, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
+import { createContext, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, useLexicalScope, Slot, Fragment as Fragment$2, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment as Fragment$1, jsxs } from "@builder.io/qwik/jsx-runtime";
 const TARGET = "qwik";
 function isBrowser() {
@@ -167,10 +167,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) {
@@ -488,7 +485,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;
@@ -521,7 +518,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 {
@@ -535,7 +532,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) {
@@ -558,21 +556,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) => {
@@ -585,7 +581,8 @@ const RenderBlock = (props) => {
         repeatItemData(props) ? (repeatItemData(props) || []).map((data, index) => {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
-            block: data.block
+            block: data.block,
+            context: props.context
           }, index);
         }) : null,
         !repeatItemData(props) ? /* @__PURE__ */ jsx(RenderComponent$1, {
@@ -640,7 +637,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_QNti2s7juQc"));
   const builderContext = useContext(stdin_default);
   const state = {};
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsxs("div", {
     class: className(props) + " div-RenderBlocks",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
@@ -650,7 +647,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     onClick$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
-    }, "RenderBlocks_component_Host_onClick_81ErKSpyspw", [
+    }, "RenderBlocks_component_div_onClick_IHSfVTIKyxE", [
       builderContext,
       props,
       state
@@ -658,31 +655,27 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     onMouseEnter$: inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onMouseEnter(props2);
-    }, "RenderBlocks_component_Host_onMouseEnter_h6rWG6KLkHE", [
+    }, "RenderBlocks_component_div_onMouseEnter_qLiEh4n9ugw", [
       builderContext,
       props,
       state
     ]),
-    children: /* @__PURE__ */ jsxs(Fragment$1, {
-      children: [
-        props.blocks ? (props.blocks || []).map((block) => {
-          return /* @__PURE__ */ jsx(RenderBlock$1, {
-            block,
-            context: builderContext
-          }, "render-block-" + block.id);
-        }) : null,
-        props.blocks ? (props.blocks || []).map((block) => {
-          return /* @__PURE__ */ jsx(BlockStyles$1, {
-            block,
-            context: builderContext
-          }, "block-style-" + block.id);
-        }) : null
-      ]
-    })
+    children: [
+      props.blocks ? (props.blocks || []).map((block) => {
+        return /* @__PURE__ */ jsx(RenderBlock$1, {
+          block,
+          context: builderContext
+        }, "render-block-" + block.id);
+      }) : null,
+      props.blocks ? (props.blocks || []).map((block) => {
+        return /* @__PURE__ */ 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;
@@ -728,7 +721,7 @@ const columnCssVars = function columnCssVars2(props, state) {
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_704fWXyHORo"));
   const state = {};
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
     children: (props.columns || []).map((column, index) => {
@@ -745,9 +738,7 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       }, index);
     })
   });
-}, "Columns_component_0PeVQGTMczc"), {
-  tagName: "div"
-});
+}, "Columns_component_0PeVQGTMczc"));
 const Columns$1 = Columns;
 const STYLES$1 = `.div-Columns { 
 display: flex;
@@ -801,25 +792,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;
@@ -846,51 +827,47 @@ const webpSrcSet = function webpSrcSet2(props, state) {
 };
 const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES, "Image_component_useStylesScoped_gRbO7w7SeZA"));
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsxs("div", {
     class: "div-Image",
-    children: /* @__PURE__ */ jsxs(Fragment$1, {
-      children: [
-        /* @__PURE__ */ jsxs("picture", {
-          children: [
-            webpSrcSet(props) ? /* @__PURE__ */ jsx("source", {
-              type: "image/webp",
-              srcset: webpSrcSet(props)
-            }) : null,
-            /* @__PURE__ */ 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__ */ jsx("source", {
-              srcset: srcSetToUse(props)
-            })
-          ]
-        }),
-        props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsx("div", {
-          class: "builder-image-sizer div-Image-2",
-          style: {
-            paddingTop: props.aspectRatio * 100 + "%"
-          }
-        }) : null,
-        props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsx(Slot, {}) : null,
-        !props.fitContent ? /* @__PURE__ */ jsx("div", {
-          class: "div-Image-3",
-          children: /* @__PURE__ */ jsx(Slot, {})
-        }) : null
-      ]
-    })
+    children: [
+      /* @__PURE__ */ jsxs("picture", {
+        children: [
+          webpSrcSet(props) ? /* @__PURE__ */ jsx("source", {
+            type: "image/webp",
+            srcset: webpSrcSet(props)
+          }) : null,
+          /* @__PURE__ */ 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__ */ jsx("source", {
+            srcset: srcSetToUse(props)
+          })
+        ]
+      }),
+      props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsx("div", {
+        class: "builder-image-sizer div-Image-2",
+        style: {
+          paddingTop: props.aspectRatio * 100 + "%"
+        }
+      }) : null,
+      props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsx(Slot, {}) : null,
+      !props.fitContent ? /* @__PURE__ */ jsx("div", {
+        class: "div-Image-3",
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }) : null
+    ]
   });
-}, "Image_component_y3S3Zox9wEo"), {
-  tagName: "div"
-});
+}, "Image_component_y3S3Zox9wEo"));
 const Image$1 = Image;
 const STYLES = `.div-Image { 
 position: relative; }.img-Image { 
@@ -913,13 +890,11 @@ left: 0;
 width: 100%;
 height: 100%; }`;
 const Text = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ 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 {
@@ -941,7 +916,7 @@ const videoProps = function videoProps2(props, state) {
   };
 };
 const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("video", {
     ...videoProps(props),
     style: {
       width: "100%",
@@ -954,9 +929,7 @@ const Video = /* @__PURE__ */ componentQrl(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__ */ componentQrl(inlinedQrl((props) => {
   return /* @__PURE__ */ jsx(Fragment$2, {
@@ -973,7 +946,7 @@ const Button = /* @__PURE__ */ componentQrl(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",
@@ -1015,7 +988,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1211,13 +1184,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 {
@@ -1260,7 +1229,7 @@ const componentInfo$7 = {
     }
   ]
 };
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1269,14 +1238,12 @@ const componentInfo$6 = {
   noWrap: true
 };
 const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("span", {
     children: /* @__PURE__ */ jsx(Slot, {})
   });
-}, "FragmentComponent_component_FJmqlA66Rjg"), {
-  tagName: "span"
-});
+}, "FragmentComponent_component_FJmqlA66Rjg"));
 const Fragment = FragmentComponent;
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1329,9 +1296,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);
         });
@@ -1427,7 +1392,7 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1474,18 +1439,16 @@ const componentInfo$4 = {
   ]
 };
 const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("section", {
     ...props.attributes,
     style: (() => {
       props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : void 0;
     })(),
     children: /* @__PURE__ */ jsx(Slot, {})
   });
-}, "SectionComponent_component_m1CcjCwgHug"), {
-  tagName: "section"
-});
+}, "SectionComponent_component_m1CcjCwgHug"));
 const Section = SectionComponent;
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1525,7 +1488,7 @@ const componentInfo$3 = {
     }
   ]
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1546,7 +1509,7 @@ const componentInfo$2 = {
     textAlign: "center"
   }
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1659,7 +1622,7 @@ const componentInfo$1 = {
     }
   ]
 };
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1675,9 +1638,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);
@@ -1743,15 +1704,47 @@ const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("div", {
     class: "builder-embed",
     ref: elem,
     dangerouslySetInnerHTML: props.content
   });
-}, "Embed_component_CP6B8Y76ylw"), {
-  tagName: "div"
-});
+}, "Embed_component_CP6B8Y76ylw"));
 const embed = Embed;
+const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ 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;
@@ -1776,31 +1769,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;
@@ -1903,9 +1899,7 @@ function getFetch() {
   return __async$1(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
-      const nodeFetch = import("./index.97024df8.js").then(
-        (d) => d.default
-      );
+      const nodeFetch = import("./index.97024df8.js").then((d) => d.default);
       return nodeFetch.default || nodeFetch;
     }
     return globalFetch.default || globalFetch;
@@ -2010,8 +2004,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;
 };
@@ -2019,9 +2013,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);
@@ -2100,14 +2092,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) {
@@ -2164,9 +2151,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 `
@@ -2182,7 +2167,7 @@ const RenderContentStyles = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "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,
@@ -2194,32 +2179,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) {
@@ -2233,7 +2215,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({
@@ -2242,26 +2224,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);
@@ -2274,19 +2253,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: {
@@ -2297,11 +2276,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__ */ componentQrl(inlinedQrl((props) => {
-  const hostElement = useHostElement();
+  const elementRef = useRef();
   const state = useStore({
     forceReRenderCount: 0,
     overrideContent: null,
@@ -2326,19 +2305,19 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     })()
   }));
   useClientEffectQrl(inlinedQrl(() => {
-    const [hostElement2, props2, state2] = useLexicalScope();
+    const [elementRef2, props2, state2] = useLexicalScope();
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount++;
-        _useMutableProps(hostElement2, true);
+        _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", {
@@ -2359,54 +2338,60 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         }
       }
       evaluateJsCode(props2, state2);
-      runHttpRequests(props2, state2);
+      runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
   }, "RenderContent_component_useClientEffect_ntruwSC9lSo", [
-    hostElement,
+    elementRef,
     props,
     state
   ]));
-  useWatchQrl(inlinedQrl(({ track: track1 }) => {
-    const [props2, state2] = useLexicalScope();
-    state2.useContent?.data && track1(state2.useContent?.data, "jsCode");
+  useWatchQrl(inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = useLexicalScope();
+    state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
     evaluateJsCode(props2, state2);
   }, "RenderContent_component_useWatch_1P0ujLQOmzc", [
+    elementRef,
     props,
     state
   ]));
   useWatchQrl(inlinedQrl(({ track: track2 }) => {
-    const [props2, state2] = useLexicalScope();
+    const [elementRef2, props2, state2] = useLexicalScope();
     state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
-    runHttpRequests(props2, state2);
+    runHttpRequests(props2, state2, elementRef2);
   }, "RenderContent_component_useWatch_1_0hAcn4V2AZw", [
+    elementRef,
     props,
     state
   ]));
-  useWatchQrl(inlinedQrl(({ track: track3 }) => {
-    const [props2, state2] = useLexicalScope();
-    state2 && track3(state2, "contentState");
+  useWatchQrl(inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = useLexicalScope();
+    state2 && track2(state2, "contentState");
     emitStateUpdate(props2, state2);
   }, "RenderContent_component_useWatch_2_t2n8zpl4mRs", [
+    elementRef,
     props,
     state
   ]));
   useCleanupQrl(inlinedQrl(() => {
-    const [props2, state2] = useLexicalScope();
+    const [elementRef2, props2, state2] = 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__ */ jsx(Fragment$1, {
     children: useContent(props, state) ? /* @__PURE__ */ jsxs("div", {
+      ref: elementRef,
       onClick$: inlinedQrl((event) => {
-        const [props2, state2] = useLexicalScope();
+        const [elementRef2, props2, state2] = useLexicalScope();
         return onClick2(props2, state2);
       }, "RenderContent_component__Fragment_div_onClick_76e3rL00UYE", [
+        elementRef,
         props,
         state
       ]),
@@ -2459,7 +2444,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsx(Host, {
+  return /* @__PURE__ */ jsx("div", {
     ...props.attributes,
     dataSet: {
       class: state.className
@@ -2478,9 +2463,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       content: state.content
     })
   });
-}, "Symbol_component_Dn8mGpai87I"), {
-  tagName: "div"
-});
+}, "Symbol_component_Dn8mGpai87I"));
 const Symbol$2 = Symbol$1;
 const settings = {};
 function setEditorSettings(newSettings) {