@builder.io/sdk-qwik 0.0.11 → 0.0.14

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, componentQrl, inlinedQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, useLexicalScope, Slot, Fragment as Fragment$2, useRef, useWatchQrl, useClientEffectQrl, _useMutableProps, useCleanupQrl } from "@builder.io/qwik";
+import { createContext, mutable, 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() {
@@ -160,7 +160,7 @@ function evaluate({ code, context, state, event }) {
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 const set = (obj, _path, value) => {
@@ -173,36 +173,36 @@ const set = (obj, _path, value) => {
 function transformBlock(block) {
   return block;
 }
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, {
+var __defProp$8 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7) {
-    for (var prop of __getOwnPropSymbols$7(b))
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8) {
+    for (var prop of __getOwnPropSymbols$8(b))
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
   }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const evaluateBindings = ({ block, context, state }) => {
   if (!block.bindings)
     return block;
-  const copied = __spreadProps$5(__spreadValues$7({}, block), {
-    properties: __spreadValues$7({}, block.properties),
-    actions: __spreadValues$7({}, block.actions)
+  const copied = __spreadProps$6(__spreadValues$8({}, block), {
+    properties: __spreadValues$8({}, block.properties),
+    actions: __spreadValues$8({}, block.actions)
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
@@ -215,17 +215,16 @@ const evaluateBindings = ({ block, context, state }) => {
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings)
+function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings)
     return evaluateBindings({
-      block,
+      block: transformedBlock,
       state,
       context
     });
   else
-    return block;
+    return transformedBlock;
 }
 const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 const convertStyleMaptoCSS = (style) => {
@@ -235,21 +234,25 @@ const convertStyleMaptoCSS = (style) => {
   });
   return cssProps.join("\n");
 };
-const RenderInlinedStyles = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+const tagName$1 = function tagName(props, state) {
+  return "style";
+};
+const RenderInlinedStyles = (props) => {
   const state = {};
+  state.tagName = tagName$1();
   return /* @__PURE__ */ jsx(Fragment$1, {
     children: /* @__PURE__ */ jsx(state.tagName, {
       children: props.styles
     })
   });
-}, "RenderInlinedStyles_component_0sD5UmyM3Rg"));
+};
 const RenderInlinedStyles$1 = RenderInlinedStyles;
 const useBlock$1 = function useBlock(props, state) {
   return getProcessedBlock({
     block: props.block,
     state: props.context.state,
     context: props.context.context,
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
 };
 const css = function css2(props, state) {
@@ -296,6 +299,36 @@ function getBlockActions(options) {
   }
   return obj;
 }
+var __defProp$7 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7) {
+    for (var prop of __getOwnPropSymbols$7(b))
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+  }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+function getBlockComponentOptions(block) {
+  var _a;
+  return __spreadProps$5(__spreadValues$7(__spreadValues$7({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
+}
 var __defProp$6 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -320,39 +353,9 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-function getBlockComponentOptions(block) {
-  var _a;
-  return __spreadProps$4(__spreadValues$6(__spreadValues$6({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
-    builderBlock: block
-  });
-}
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5) {
-    for (var prop of __getOwnPropSymbols$5(b))
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-  }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function getBlockProperties(block) {
   var _a;
-  return __spreadProps$3(__spreadValues$5({}, block.properties), {
+  return __spreadProps$4(__spreadValues$6({}, block.properties), {
     "builder-id": block.id,
     class: [
       block.id,
@@ -367,30 +370,30 @@ const convertStyleObject = (obj) => {
 };
 const sanitizeBlockStyles = (_styles) => {
 };
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4) {
-    for (var prop of __getOwnPropSymbols$4(b))
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5) {
+    for (var prop of __getOwnPropSymbols$5(b))
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
   }
   return a;
 };
 function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
-  const styles = __spreadValues$4(__spreadValues$4({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
+  const styles = __spreadValues$5(__spreadValues$5({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium)
     styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   if ((_d = block.responsiveStyles) == null ? void 0 : _d.small)
@@ -418,21 +421,30 @@ const EMPTY_HTML_ELEMENTS = [
   "track",
   "wbr"
 ];
-const isEmptyHtmlElement = (tagName3) => {
-  return typeof tagName3 === "string" && EMPTY_HTML_ELEMENTS.includes(tagName3.toLowerCase());
+const isEmptyHtmlElement = (tagName4) => {
+  return typeof tagName4 === "string" && EMPTY_HTML_ELEMENTS.includes(tagName4.toLowerCase());
 };
+function markMutable(value) {
+  return mutable(value);
+}
+function markPropsMutable(props) {
+  Object.keys(props).forEach((key) => {
+    props[key] = mutable(props[key]);
+  });
+  return props;
+}
 const RenderComponent = (props) => {
   return /* @__PURE__ */ jsx(Fragment$1, {
     children: props.componentRef ? /* @__PURE__ */ jsxs(props.componentRef, {
-      ...props.componentOptions,
+      ...markPropsMutable(props.componentOptions),
       children: [
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsx(RenderBlock$1, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (props.blockChildren || []).map((child) => {
+        (props.blockChildren || []).map(function(child) {
           return /* @__PURE__ */ jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -463,7 +475,7 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   }));
   return /* @__PURE__ */ jsx(RenderBlock$1, {
     block: props.block,
-    context: props.context
+    context: props.repeatContext
   });
 }, "RenderRepeatedBlock_component_fV0PdmPN990"));
 const RenderRepeatedBlock$1 = RenderRepeatedBlock;
@@ -472,7 +484,7 @@ const component = function component2(props, state) {
     block: props.block,
     state: props.context.state,
     context: props.context.context,
-    evaluateBindings: false
+    shouldEvaluateBindings: false
   }).component?.name;
   if (!componentName)
     return null;
@@ -485,7 +497,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;
@@ -495,7 +507,7 @@ const componentInfo$9 = function componentInfo(props, state) {
 const componentRef = function componentRef2(props, state) {
   return component(props)?.component;
 };
-const tagName = function tagName2(props, state) {
+const tagName2 = function tagName3(props, state) {
   return getBlockTag(useBlock2(props));
 };
 const useBlock2 = function useBlock3(props, state) {
@@ -503,7 +515,7 @@ const useBlock2 = function useBlock3(props, state) {
     block: props.block,
     state: props.context.state,
     context: props.context.context,
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
 };
 const attributes = function attributes2(props, state) {
@@ -518,7 +530,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 {
@@ -573,28 +585,27 @@ const repeatItemData = function repeatItemData2(props, state) {
 };
 const RenderBlock = (props) => {
   const state = {};
-  state.tagName = tagName(props);
+  state.tagName = tagName2(props);
   return /* @__PURE__ */ jsx(Fragment$1, {
-    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName(props)) ? /* @__PURE__ */ jsxs(state.tagName, {
+    children: shouldWrap(props) ? !isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxs(state.tagName, {
       ...attributes(props),
       children: [
-        repeatItemData(props) ? (repeatItemData(props) || []).map((data, index) => {
+        repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
-            block: data.block,
-            context: props.context
+            block: data.block
           }, index);
         }) : null,
         !repeatItemData(props) ? /* @__PURE__ */ jsx(RenderComponent$1, {
           ...renderComponentProps(props)
         }) : null,
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsx(RenderBlock, {
             block: child,
             context: props.context
           }, "render-block-" + child.id);
         }),
-        (childrenWithoutParentComponent(props) || []).map((child) => {
+        (childrenWithoutParentComponent(props) || []).map(function(child) {
           return /* @__PURE__ */ jsx(BlockStyles$1, {
             block: child,
             context: props.context
@@ -634,7 +645,7 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
     }, "*");
 };
 const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_QNti2s7juQc"));
+  useStylesScopedQrl(inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_QNti2s7juQc"));
   const builderContext = useContext(stdin_default);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
@@ -661,13 +672,13 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       state
     ]),
     children: [
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(RenderBlock$1, {
           block,
           context: builderContext
         }, "render-block-" + block.id);
       }) : null,
-      props.blocks ? (props.blocks || []).map((block) => {
+      props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(BlockStyles$1, {
           block,
           context: builderContext
@@ -677,7 +688,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "RenderBlocks_component_SXGwmVyEM0s"));
 const RenderBlocks$1 = RenderBlocks;
-const STYLES$2 = `.div-RenderBlocks { 
+const STYLES$3 = `.div-RenderBlocks { 
 display: flex;
 flex-direction: column;
 align-items: stretch; }`;
@@ -719,12 +730,12 @@ const columnCssVars = function columnCssVars2(props, state) {
   };
 };
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_704fWXyHORo"));
+  useStylesScopedQrl(inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_704fWXyHORo"));
   const state = {};
   return /* @__PURE__ */ jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
-    children: (props.columns || []).map((column, index) => {
+    children: (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ jsx("div", {
         class: "builder-column div-Columns-2",
         style: {
@@ -733,20 +744,22 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
           ...columnCssVars(props, state)
         },
         children: /* @__PURE__ */ jsx(RenderBlocks$1, {
-          blocks: column.blocks
+          blocks: markMutable(column.blocks),
+          path: `component.options.columns.${index}.blocks`,
+          parent: props.builderBlock.id
         })
       }, index);
     })
   });
 }, "Columns_component_0PeVQGTMczc"));
 const Columns$1 = Columns;
-const STYLES$1 = `.div-Columns { 
+const STYLES$2 = `.div-Columns { 
 display: flex;
 align-items: stretch;
-line-height: normal; }@media (max-width: 999px) { .div-Columns { 
+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 { 
-flex-grow: 1; }@media (max-width: 999px) { .div-Columns-2 { 
+flex-grow: 1; }@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;
@@ -826,7 +839,7 @@ const webpSrcSet = function webpSrcSet2(props, state) {
     return "";
 };
 const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES, "Image_component_useStylesScoped_gRbO7w7SeZA"));
+  useStylesScopedQrl(inlinedQrl(STYLES$1, "Image_component_useStylesScoped_gRbO7w7SeZA"));
   return /* @__PURE__ */ jsxs("div", {
     class: "div-Image",
     children: [
@@ -869,7 +882,7 @@ const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "Image_component_y3S3Zox9wEo"));
 const Image$1 = Image;
-const STYLES = `.div-Image { 
+const STYLES$1 = `.div-Image { 
 position: relative; }.img-Image { 
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
@@ -932,6 +945,7 @@ const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 }, "Video_component_O5sPuWlrTvk"));
 const Video$1 = Video;
 const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  useStylesScopedQrl(inlinedQrl(STYLES, "Button_component_useStylesScoped_vN61mfeURXY"));
   return /* @__PURE__ */ jsx(Fragment$2, {
     children: props.link ? /* @__PURE__ */ jsx("a", {
       role: "button",
@@ -939,14 +953,17 @@ const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       href: props.link,
       target: props.openLinkInNewTab ? "_blank" : void 0,
       children: props.text
-    }) : /* @__PURE__ */ jsx("span", {
+    }) : /* @__PURE__ */ jsx("button", {
+      class: "button-Button",
       ...props.attributes,
       children: props.text
     })
   });
 }, "Button_component_FtjCELjtKF4"));
 const Button$1 = Button;
-const componentInfo$8 = {
+const STYLES = `.button-Button { 
+all: unset; }`;
+const componentInfo$9 = {
   name: "Core:Button",
   builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -988,7 +1005,7 @@ function markSerializable(fn) {
   fn.__qwik_serializable__ = true;
   return fn;
 }
-const componentInfo$7 = {
+const componentInfo$8 = {
   name: "Columns",
   builtIn: true,
   inputs: [
@@ -1229,7 +1246,7 @@ const componentInfo$7 = {
     }
   ]
 };
-const componentInfo$6 = {
+const componentInfo$7 = {
   name: "Fragment",
   static: true,
   hidden: true,
@@ -1243,7 +1260,7 @@ const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "FragmentComponent_component_FJmqlA66Rjg"));
 const Fragment = FragmentComponent;
-const componentInfo$5 = {
+const componentInfo$6 = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -1392,7 +1409,7 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
+const componentInfo$5 = {
   name: "Core:Section",
   static: true,
   builtIn: true,
@@ -1448,7 +1465,7 @@ const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "SectionComponent_component_m1CcjCwgHug"));
 const Section = SectionComponent;
-const componentInfo$3 = {
+const componentInfo$4 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -1488,7 +1505,7 @@ const componentInfo$3 = {
     }
   ]
 };
-const componentInfo$2 = {
+const componentInfo$3 = {
   name: "Text",
   static: true,
   builtIn: true,
@@ -1509,7 +1526,7 @@ const componentInfo$2 = {
     textAlign: "center"
   }
 };
-const componentInfo$1 = {
+const componentInfo$2 = {
   name: "Video",
   canHaveChildren: true,
   builtIn: true,
@@ -1622,7 +1639,7 @@ const componentInfo$1 = {
     }
   ]
 };
-const componentInfo2 = {
+const componentInfo$1 = {
   name: "Embed",
   static: true,
   builtIn: true,
@@ -1688,9 +1705,9 @@ const findAndRunScripts = function findAndRunScripts2(props, state, elem) {
 const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const elem = useRef();
   const state = useStore({
+    ranInitFn: false,
     scriptsInserted: [],
-    scriptsRun: [],
-    ranInitFn: false
+    scriptsRun: []
   });
   useWatchQrl(inlinedQrl(({ track: track2 }) => {
     const [elem2, props2, state2] = useLexicalScope();
@@ -1711,80 +1728,117 @@ const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   });
 }, "Embed_component_CP6B8Y76ylw"));
 const embed = Embed;
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, {
+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$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3) {
-    for (var prop of __getOwnPropSymbols$3(b))
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4) {
+    for (var prop of __getOwnPropSymbols$4(b))
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
   }
   return a;
 };
 const getDefaultRegisteredComponents = () => [
-  __spreadValues$3({
+  __spreadValues$4({
     component: Columns$1
-  }, componentInfo$7),
-  __spreadValues$3({
+  }, componentInfo$8),
+  __spreadValues$4({
     component: Image$1
-  }, componentInfo$5),
-  __spreadValues$3({
+  }, componentInfo$6),
+  __spreadValues$4({
+    component: Img
+  }, componentInfo2),
+  __spreadValues$4({
     component: Text$1
-  }, componentInfo$2),
-  __spreadValues$3({
+  }, componentInfo$3),
+  __spreadValues$4({
     component: Video$1
-  }, componentInfo$1),
-  __spreadValues$3({
+  }, componentInfo$2),
+  __spreadValues$4({
     component: Symbol$2
-  }, componentInfo$3),
-  __spreadValues$3({
+  }, componentInfo$4),
+  __spreadValues$4({
     component: Button$1
-  }, componentInfo$8),
-  __spreadValues$3({
+  }, componentInfo$9),
+  __spreadValues$4({
     component: Section
-  }, componentInfo$4),
-  __spreadValues$3({
+  }, componentInfo$5),
+  __spreadValues$4({
     component: Fragment
-  }, componentInfo$6),
-  __spreadValues$3({
+  }, componentInfo$7),
+  __spreadValues$4({
     component: embed
-  }, componentInfo2)
+  }, componentInfo$1)
 ];
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2) {
-    for (var prop of __getOwnPropSymbols$2(b))
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3) {
+    for (var prop of __getOwnPropSymbols$3(b))
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
   }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
@@ -1797,7 +1851,7 @@ function flatten(object, path = null, separator = ".") {
       value !== null,
       !(Array.isArray(value) && value.length === 0)
     ].every(Boolean);
-    return isObject ? __spreadValues$2(__spreadValues$2({}, acc), flatten(value, newPath, separator)) : __spreadProps$2(__spreadValues$2({}, acc), {
+    return isObject ? __spreadValues$3(__spreadValues$3({}, acc), flatten(value, newPath, separator)) : __spreadProps$3(__spreadValues$3({}, acc), {
       [newPath]: value
     });
   }, {});
@@ -1902,30 +1956,30 @@ const handleABTesting = (item, testGroups) => {
     }
   }
 };
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1) {
-    for (var prop of __getOwnPropSymbols$1(b))
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2) {
+    for (var prop of __getOwnPropSymbols$2(b))
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
   }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -1949,7 +2003,7 @@ var __async = (__this, __arguments, generator) => {
 const fetch$ = getFetch();
 function getContent(options) {
   return __async(this, null, function* () {
-    return (yield getAllContent(__spreadProps$1(__spreadValues$1({}, options), {
+    return (yield getAllContent(__spreadProps$2(__spreadValues$2({}, options), {
       limit: 1
     }))).results[0] || null;
   });
@@ -1957,7 +2011,7 @@ function getContent(options) {
 const generateContentUrl = (options) => {
   const { limit = 1, userAttributes, query, noTraverse = false, model, apiKey } = options;
   const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  const queryOptions = __spreadValues$1(__spreadValues$1({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const queryOptions = __spreadValues$2(__spreadValues$2({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened)
     url.searchParams.set(key, String(flattened[key]));
@@ -1990,52 +2044,52 @@ function isPreviewing() {
     return false;
   return Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
   value
 }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols) {
-    for (var prop of __getOwnPropSymbols(b))
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1) {
+    for (var prop of __getOwnPropSymbols$1(b))
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
   }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols) {
-    for (var prop of __getOwnPropSymbols(source))
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1) {
+    for (var prop of __getOwnPropSymbols$1(source))
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
         target[prop] = source[prop];
   }
   return target;
 };
 const components = [];
 function registerComponent(component3, info) {
-  components.push(__spreadValues({
+  components.push(__spreadValues$1({
     component: component3
   }, info));
   console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component3;
 }
 const createRegisterComponentMessage = (_a) => {
-  var info = __objRest(_a, [
+  var info = __objRest$1(_a, [
     "component"
   ]);
   return {
@@ -2051,16 +2105,239 @@ const serializeFn = (fnValue) => {
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
 const prepareComponentInfoToSend = (_c) => {
-  var { inputs } = _c, info = __objRest(_c, [
+  var { inputs } = _c, info = __objRest$1(_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), {
+  return __spreadProps$1(__spreadValues$1({}, fastClone(info)), {
+    inputs: inputs == null ? void 0 : inputs.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps$1(__spreadValues$1({}, acc), {
       [key]: serializeValue(value)
     }), {}))
   });
 };
-function track(event, properties) {
+const getTopLevelDomain = (host) => {
+  const parts = host.split(".");
+  if (parts.length > 2)
+    return parts.slice(1).join(".");
+  return host;
+};
+const getCookie = ({ name, canTrack }) => {
+  var _a;
+  try {
+    if (!canTrack)
+      return void 0;
+    return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.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 : [
+    []
+  ];
+  const expiresObj = expires ? [
+    [
+      "expires",
+      expires.toUTCString()
+    ]
+  ] : [
+    []
+  ];
+  const cookieValue = [
+    [
+      name,
+      value
+    ],
+    ...expiresObj,
+    [
+      "path",
+      "/"
+    ],
+    [
+      "domain",
+      getTopLevelDomain(window.location.hostname)
+    ],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = ({ name, value, expires, canTrack }) => {
+  try {
+    if (!canTrack)
+      return void 0;
+    const cookie = createCookieString({
+      name,
+      value,
+      expires
+    });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+};
+const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function uuid() {
+  return uuidv4().replace(/-/g, "");
+}
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
+const getSessionId = ({ canTrack }) => {
+  if (!canTrack)
+    return void 0;
+  const sessionId = 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 : void 0;
+const getLocalStorageItem = ({ key, canTrack }) => {
+  var _a;
+  try {
+    if (canTrack)
+      return (_a = getLocalStorage()) == null ? void 0 : _a.getItem(key);
+    return void 0;
+  } catch (err) {
+    console.debug("[LocalStorage] GET error: ", err);
+  }
+};
+const setLocalStorageItem = ({ key, canTrack, value }) => {
+  var _a;
+  try {
+    if (canTrack)
+      (_a = getLocalStorage()) == null || _a.setItem(key, value);
+  } catch (err) {
+    console.debug("[LocalStorage] SET error: ", err);
+  }
+};
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
+const getVisitorId = ({ canTrack }) => {
+  if (!canTrack)
+    return void 0;
+  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
+});
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) {
+    for (var prop of __getOwnPropSymbols(b))
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols) {
+    for (var prop of __getOwnPropSymbols(source))
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+  }
+  return target;
+};
+const getTrackingEventData = ({ canTrack }) => {
+  if (!canTrack)
+    return {
+      visitorId: void 0,
+      sessionId: void 0
+    };
+  const sessionId = getSessionId({
+    canTrack
+  });
+  const visitorId = getVisitorId({
+    canTrack
+  });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+const createEvent = (_a) => {
+  var { type: eventType, canTrack, orgId, contentId } = _a, properties = __objRest(_a, [
+    "type",
+    "canTrack",
+    "orgId",
+    "contentId"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadValues({}, properties), getTrackingEventData({
+      canTrack
+    })), {
+      ownerId: orgId,
+      contentId
+    })
+  };
+};
+function track(eventProps) {
+  if (!eventProps.canTrack)
+    return;
   if (isEditing())
     return;
   if (!(isBrowser() || TARGET === "reactNative"))
@@ -2069,10 +2346,7 @@ function track(event, properties) {
     method: "POST",
     body: JSON.stringify({
       events: [
-        {
-          type: event,
-          data: properties
-        }
+        createEvent(eventProps)
       ]
     }),
     headers: {
@@ -2142,6 +2416,9 @@ const useContent = function useContent2(props, state, elementRef) {
   };
   return mergedContent;
 };
+const canTrackToUse = function canTrackToUse2(props, state, elementRef) {
+  return props.canTrack || true;
+};
 const contentState = function contentState2(props, state, elementRef) {
   return {
     ...props.content?.data?.state,
@@ -2191,9 +2468,12 @@ const httpReqsData = function httpReqsData2(props, state, elementRef) {
   return {};
 };
 const onClick2 = function onClick3(props, state, elementRef, _event) {
-  if (useContent(props, state) && props.canTrack !== false)
-    track("click", {
-      contentId: useContent(props, state).id
+  if (useContent(props, state))
+    track({
+      type: "click",
+      canTrack: canTrackToUse(props),
+      contentId: useContent(props, state).id,
+      orgId: props.apiKey
     });
 };
 const evalExpression = function evalExpression2(props, state, elementRef, expression) {
@@ -2247,8 +2527,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const state = useStore({
     forceReRenderCount: 0,
     overrideContent: null,
-    update: 0,
-    overrideState: {}
+    overrideState: {},
+    update: 0
   });
   useContextProvider(stdin_default, useStore({
     content: (() => {
@@ -2271,7 +2551,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     if (isBrowser()) {
       if (isEditing()) {
-        state2.forceReRenderCount++;
+        state2.forceReRenderCount = state2.forceReRenderCount + 1;
         _useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
@@ -2282,9 +2562,12 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         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", {
-          contentId: useContent(props2, state2).id
+      if (useContent(props2, state2))
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(props2),
+          contentId: useContent(props2, state2).id,
+          orgId: props2.apiKey
         });
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
@@ -2365,7 +2648,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
           customFonts: useContent(props, state)?.data?.customFonts
         }) : null,
         /* @__PURE__ */ jsx(RenderBlocks$1, {
-          blocks: useContent(props, state)?.data?.blocks
+          blocks: markMutable(useContent(props, state)?.data?.blocks)
         }, state.forceReRenderCount)
       ]
     }) : null
@@ -2387,9 +2670,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   ]));
   useWatchQrl(inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = useLexicalScope();
-    props2.symbol && track2(props2.symbol, "content");
-    props2.symbol && track2(props2.symbol, "model");
-    props2.symbol && track2(props2.symbol, "entry");
+    props2 && track2(props2, "symbol");
     state2 && track2(state2, "content");
     const symbolToUse = props2.symbol;
     if (symbolToUse && !symbolToUse.content && !state2.content && symbolToUse.model)
@@ -2416,14 +2697,14 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     children: /* @__PURE__ */ jsx(RenderContent$1, {
       apiKey: builderContext.apiKey,
       context: builderContext.context,
-      customComponents: Object.values(builderContext.registeredComponents),
-      data: {
+      customComponents: markMutable(Object.values(builderContext.registeredComponents)),
+      data: markMutable({
         ...props.symbol?.data,
         ...builderContext.state,
         ...props.symbol?.content?.data?.state
-      },
+      }),
       model: props.symbol?.model,
-      content: state.content
+      content: markMutable(state.content)
     })
   });
 }, "Symbol_component_Dn8mGpai87I"));