@builder.io/sdk-qwik 0.1.15 → 0.1.16

package/lib/index.qwik.mjs

@@ -1,35 +1,36 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useClientEffectQrl, useTaskQrl, useRef, useCleanupQrl } from "@builder.io/qwik";
-import { jsx, Fragment, jsxs } from "@builder.io/qwik/jsx-runtime";
-const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: props.link ? /* @__PURE__ */ jsx("a", {
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxQ, _fnSignal, createContextId, _wrapSignal, _jsxBranch, useLexicalScope, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useVisibleTaskQrl, useTaskQrl, useSignal } from "@builder.io/qwik";
+import { Fragment } from "@builder.io/qwik/jsx-runtime";
+const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: props.link ? /* @__PURE__ */ _jsxQ("a", {
+      ...props.attributes
+    }, {
       role: "button",
-      ...props.attributes,
-      get href() {
-        return props.link;
-      },
-      target: props.openLinkInNewTab ? "_blank" : void 0,
-      children: _wrapSignal(props, "text"),
-      [_IMMUTABLE]: {
-        href: _wrapSignal(props, "link")
-      }
-    }) : /* @__PURE__ */ jsx("button", {
-      class: "button-Button",
-      ...props.attributes,
-      children: _wrapSignal(props, "text")
-    }),
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "jc_0");
+      href: _fnSignal((p0) => p0.link, [
+        props
+      ], "p0.link"),
+      target: _fnSignal((p0) => p0.openLinkInNewTab ? "_blank" : void 0, [
+        props
+      ], 'p0.openLinkInNewTab?"_blank":undefined')
+    }, _fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"), 2, "jc_0") : /* @__PURE__ */ _jsxQ("button", {
+      class: (() => {
+        props.attributes.class;
+      })(),
+      ...props.attributes
+    }, null, _fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"), 2, null)
+  }, 1, "jc_1");
 }, "Button_component_gJoMUICXoUQ"));
 const STYLES$3 = `
 .button-Button {
   all: unset;
 }
 `;
-const builderContext = createContext("Builder");
+const builderContext = createContextId("Builder");
 const TARGET = "qwik";
 function isBrowser() {
   return typeof window !== "undefined" && typeof document !== "undefined";
@@ -175,19 +176,11 @@ const tag$1 = function tag2(props, state) {
 const RenderInlinedStyles = (props) => {
   const state = {};
   state.tag = tag$1();
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx("style", {
-      get dangerouslySetInnerHTML() {
-        return props.styles;
-      },
-      [_IMMUTABLE]: {
-        dangerouslySetInnerHTML: _wrapSignal(props, "styles")
-      }
-    }),
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "zz_0");
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: /* @__PURE__ */ _jsxQ("style", {
+      dangerouslySetInnerHTML: _wrapSignal(props, "styles")
+    }, null, null, 3, "zz_0")
+  }, 1, "zz_2");
 };
 const useBlock$1 = function useBlock2(props, state) {
   return getProcessedBlock({
@@ -233,21 +226,19 @@ const css = function css2(props, state) {
   ].join(" ");
 };
 const BlockStyles = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ jsx(RenderInlinedStyles, {
+  _jsxBranch();
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
       styles: css(props)
-    }, "LQ_0") : null,
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "LQ_1");
+    }, 3, "LQ_0") : null
+  }, 1, "LQ_1");
 };
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}$`;
 function createEventHandler(value, options) {
-  return inlinedQrl((event) => {
+  return /* @__PURE__ */ inlinedQrl((event) => {
     const [options2, value2] = useLexicalScope();
     return evaluate({
       code: value2,
@@ -380,40 +371,37 @@ const getRepeatItemData = ({ block, context }) => {
   return repeatArray;
 };
 const RenderComponent = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: props.componentRef ? /* @__PURE__ */ jsxs(props.componentRef, {
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: props.componentRef ? /* @__PURE__ */ _jsxC(props.componentRef, {
       ...props.componentOptions,
       children: [
         (props.blockChildren || []).map(function(child) {
-          return /* @__PURE__ */ jsx(RenderBlock$1, {
+          return /* @__PURE__ */ _jsxC(RenderBlock, {
             block: child,
             get context() {
               return props.context;
             },
             [_IMMUTABLE]: {
-              context: _wrapSignal(props, "context")
+              context: _wrapProp(props, "context")
             }
-          }, "render-block-" + child.id);
+          }, 3, "render-block-" + child.id);
         }),
         (props.blockChildren || []).map(function(child) {
-          return /* @__PURE__ */ jsx(BlockStyles, {
+          return /* @__PURE__ */ _jsxC(BlockStyles, {
             block: child,
             get context() {
               return props.context;
             },
             [_IMMUTABLE]: {
-              context: _wrapSignal(props, "context")
+              context: _wrapProp(props, "context")
             }
-          }, "block-style-" + child.id);
+          }, 3, "block-style-" + child.id);
         })
       ]
-    }) : null,
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "R9_0");
+    }, 0, "R9_0") : null
+  }, 1, "R9_1");
 };
-const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   useContextProvider(builderContext, useStore({
     content: props.repeatContext.content,
     state: props.repeatContext.state,
@@ -422,7 +410,7 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     registeredComponents: props.repeatContext.registeredComponents,
     inheritedStyles: props.repeatContext.inheritedStyles
   }));
-  return /* @__PURE__ */ jsx(RenderBlock$1, {
+  return /* @__PURE__ */ _jsxC(RenderBlock, {
     get block() {
       return props.block;
     },
@@ -430,10 +418,14 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       return props.repeatContext;
     },
     [_IMMUTABLE]: {
-      block: _wrapSignal(props, "block"),
-      context: _wrapSignal(props, "repeatContext")
+      block: _fnSignal((p0) => p0.block, [
+        props
+      ], "p0.block"),
+      context: _fnSignal((p0) => p0.repeatContext, [
+        props
+      ], "p0.repeatContext")
     }
-  }, "K5_0");
+  }, 3, "K5_0");
 }, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
 const component = function component2(props, state) {
   return getComponent({
@@ -519,6 +511,7 @@ const childrenContext = function childrenContext2(props, state) {
   };
   return {
     apiKey: props.context.apiKey,
+    apiVersion: props.context.apiVersion,
     state: props.context.state,
     content: props.context.content,
     context: props.context.context,
@@ -528,17 +521,18 @@ const childrenContext = function childrenContext2(props, state) {
   };
 };
 const RenderBlock = (props) => {
+  _jsxBranch();
   const state = {};
   state.tag = tag(props);
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ _jsxC(Fragment, {
       children: [
-        isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ jsx(state.tag, {
+        isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ _jsxC(state.tag, {
           ...attributes(props),
           ...actions(props)
-        }) : null,
+        }, 2, "9d_0") : null,
         !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
-          return /* @__PURE__ */ jsx(RenderRepeatedBlock, {
+          return /* @__PURE__ */ _jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
             },
@@ -546,45 +540,38 @@ const RenderBlock = (props) => {
               return data.block;
             },
             [_IMMUTABLE]: {
-              repeatContext: _wrapSignal(data, "context"),
-              block: _wrapSignal(data, "block")
+              repeatContext: _wrapProp(data, "context"),
+              block: _wrapProp(data, "block")
             }
-          }, index);
+          }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxs(state.tag, {
+        !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /* @__PURE__ */ _jsxC(state.tag, {
           ...attributes(props),
           ...actions(props),
           children: [
-            /* @__PURE__ */ jsx(RenderComponent, {
+            /* @__PURE__ */ _jsxC(RenderComponent, {
               ...renderComponentProps(props)
-            }, "9d_0"),
+            }, 2, "9d_1"),
             (childrenWithoutParentComponent(props) || []).map(function(child) {
-              return /* @__PURE__ */ jsx(RenderBlock, {
+              return /* @__PURE__ */ _jsxC(RenderBlock, {
                 block: child,
                 context: childrenContext(props)
-              }, "render-block-" + child.id);
+              }, 3, "render-block-" + child.id);
             }),
             (childrenWithoutParentComponent(props) || []).map(function(child) {
-              return /* @__PURE__ */ jsx(BlockStyles, {
+              return /* @__PURE__ */ _jsxC(BlockStyles, {
                 block: child,
                 context: childrenContext(props)
-              }, "block-style-" + child.id);
+              }, 3, "block-style-" + child.id);
             })
           ]
-        }) : null
-      ],
-      [_IMMUTABLE]: {
-        children: false
-      }
-    }, "9d_1") : /* @__PURE__ */ jsx(RenderComponent, {
+        }, 0, "9d_2") : null
+      ]
+    }, 1, "9d_3") : /* @__PURE__ */ _jsxC(RenderComponent, {
       ...renderComponentProps(props)
-    }, "9d_2") : null,
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "9d_3");
+    }, 2, "9d_4") : null
+  }, 1, "9d_5");
 };
-const RenderBlock$1 = RenderBlock;
 const className = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
@@ -608,22 +595,13 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
       }
     }, "*");
 };
-const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
+const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
   const builderContext$1 = useContext(builderContext);
   const state = {};
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ _jsxQ("div", {
     class: className(props) + " div-RenderBlocks",
-    get "builder-path"() {
-      return props.path;
-    },
-    get "builder-parent-id"() {
-      return props.parent;
-    },
-    get style() {
-      return props.styleProp;
-    },
-    onClick$: inlinedQrl((event) => {
+    onClick$: /* @__PURE__ */ inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
@@ -631,35 +609,44 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       props,
       state
     ]),
-    onMouseEnter$: inlinedQrl((event) => {
+    onMouseEnter$: /* @__PURE__ */ inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
       builderContext$1,
       props,
       state
-    ]),
-    children: [
-      props.blocks ? (props.blocks || []).map(function(block) {
-        return /* @__PURE__ */ jsx(RenderBlock$1, {
-          block,
-          context: builderContext$1
-        }, "render-block-" + block.id);
-      }) : null,
-      props.blocks ? (props.blocks || []).map(function(block) {
-        return /* @__PURE__ */ jsx(BlockStyles, {
-          block,
-          context: builderContext$1
-        }, "block-style-" + block.id);
-      }) : null
-    ],
-    [_IMMUTABLE]: {
-      "builder-path": _wrapSignal(props, "path"),
-      "builder-parent-id": _wrapSignal(props, "parent"),
-      style: _wrapSignal(props, "styleProp"),
-      children: false
-    }
-  });
+    ])
+  }, {
+    "builder-path": _fnSignal((p0) => p0.path, [
+      props
+    ], "p0.path"),
+    "builder-parent-id": _fnSignal((p0) => p0.parent, [
+      props
+    ], "p0.parent"),
+    style: _fnSignal((p0) => p0.styleProp, [
+      props
+    ], "p0.styleProp")
+  }, [
+    props.blocks ? (props.blocks || []).map(function(block) {
+      return /* @__PURE__ */ _jsxC(RenderBlock, {
+        block,
+        context: builderContext$1,
+        [_IMMUTABLE]: {
+          context: _IMMUTABLE
+        }
+      }, 3, "render-block-" + block.id);
+    }) : null,
+    props.blocks ? (props.blocks || []).map(function(block) {
+      return /* @__PURE__ */ _jsxC(BlockStyles, {
+        block,
+        context: builderContext$1,
+        [_IMMUTABLE]: {
+          context: _IMMUTABLE
+        }
+      }, 3, "block-style-" + block.id);
+    }) : null
+  ], 0, "9R_0");
 }, "RenderBlocks_component_MYUZ0j1uLsw"));
 const STYLES$2 = `
 .div-RenderBlocks {
@@ -694,25 +681,23 @@ const columnCssVars = function columnCssVars2(props, state, builderContext2, ind
   index === 0 ? 0 : state.gutterSize;
   const width = getColumnCssWidth(props, state, builderContext2, index);
   const gutterPixels = `${state.gutterSize}px`;
-  const mobileWidth = "100%";
-  const mobileMarginLeft = 0;
   return {
     width,
     "margin-left": gutterPixels,
     "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: mobileWidth,
+      stackedStyle: "100%",
       desktopStyle: width
     }),
     "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: mobileMarginLeft,
+      stackedStyle: 0,
       desktopStyle: gutterPixels
     }),
     "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: mobileWidth,
+      stackedStyle: "100%",
       desktopStyle: width
     }),
     "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: mobileMarginLeft,
+      stackedStyle: 0,
       desktopStyle: gutterPixels
     })
   };
@@ -748,8 +733,9 @@ const columnsStyles = function columnsStyles2(props, state, builderContext2) {
         },
       `;
 };
-const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
   const builderContext$1 = useContext(builderContext);
   const state = useStore({
     cols: props.columns || [],
@@ -757,40 +743,41 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
     stackAt: props.stackColumnsAt || "tablet"
   });
-  return /* @__PURE__ */ jsxs("div", {
-    class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
-    style: columnsCssVars(props, state, builderContext$1),
-    children: [
-      /* @__PURE__ */ jsx(RenderInlinedStyles, {
-        styles: columnsStyles(props, state, builderContext$1)
-      }, "c0_0"),
-      (props.columns || []).map(function(column, index) {
-        return /* @__PURE__ */ jsx("div", {
-          class: "builder-column div-Columns-2",
-          style: columnCssVars(props, state, builderContext$1, index),
-          children: /* @__PURE__ */ jsx(RenderBlocks, {
-            get blocks() {
-              return column.blocks;
-            },
-            path: `component.options.columns.${index}.blocks`,
-            get parent() {
-              return props.builderBlock.id;
-            },
-            styleProp: {
-              flexGrow: "1"
-            },
-            [_IMMUTABLE]: {
-              blocks: _wrapSignal(column, "blocks"),
-              parent: _wrapSignal(props.builderBlock, "id")
-            }
-          }, "c0_1")
-        }, index);
-      })
-    ],
-    [_IMMUTABLE]: {
-      children: false
-    }
-  });
+  return /* @__PURE__ */ _jsxQ("div", {
+    style: columnsCssVars(props, state, builderContext$1)
+  }, {
+    class: _fnSignal((p0) => `builder-columns ${p0.builderBlock.id}-breakpoints div-Columns`, [
+      props
+    ], '`builder-columns ${p0.builderBlock.id}-breakpoints`+" div-Columns"')
+  }, [
+    /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
+      styles: columnsStyles(props, state, builderContext$1)
+    }, 3, "c0_0"),
+    (props.columns || []).map(function(column, index) {
+      return /* @__PURE__ */ _jsxQ("div", {
+        style: columnCssVars(props, state, builderContext$1, index)
+      }, {
+        class: "builder-column div-Columns-2"
+      }, /* @__PURE__ */ _jsxC(RenderBlocks, {
+        get blocks() {
+          return column.blocks;
+        },
+        path: `component.options.columns.${index}.blocks`,
+        get parent() {
+          return props.builderBlock.id;
+        },
+        styleProp: {
+          flexGrow: "1"
+        },
+        [_IMMUTABLE]: {
+          blocks: _wrapProp(column, "blocks"),
+          parent: _fnSignal((p0) => p0.builderBlock.id, [
+            props
+          ], "p0.builderBlock.id")
+        }
+      }, 3, "c0_1"), 1, index);
+    })
+  ], 1, "c0_2");
 }, "Columns_component_7yLj4bxdI6c"));
 const STYLES$1 = `
 .div-Columns {
@@ -803,10 +790,8 @@ const STYLES$1 = `
   align-items: stretch;
 }
 `;
-const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("span", {
-    children: /* @__PURE__ */ jsx(Slot, {}, "oj_0")
-  });
+const FragmentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("span", null, null, /* @__PURE__ */ _jsxC(Slot, null, 3, "oj_0"), 1, "oj_1");
 }, "FragmentComponent_component_T0AypnadAK0"));
 function removeProtocol(path) {
   return path.replace(/http(s)?:/, "");
@@ -864,17 +849,16 @@ function getSrcSet(url) {
 }
 const srcSetToUse = function srcSetToUse2(props, state) {
   const imageToUse = props.image || props.src;
-  const url = imageToUse;
-  if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
+  if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
     return props.srcset;
   if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
     if (!props.srcset.includes(props.image.split("?")[0])) {
       console.debug("Removed given srcset");
-      return getSrcSet(url);
+      return getSrcSet(imageToUse);
     }
   } else if (props.image && !props.srcset)
-    return getSrcSet(url);
-  return getSrcSet(url);
+    return getSrcSet(imageToUse);
+  return getSrcSet(imageToUse);
 };
 const webpSrcSet = function webpSrcSet2(props, state) {
   if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp)
@@ -893,62 +877,57 @@ const aspectRatioCss = function aspectRatioCss2(props, state) {
   const out = props.aspectRatio ? aspectRatioStyles : void 0;
   return out;
 };
-const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
-  return /* @__PURE__ */ jsxs(Fragment$1, {
+const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
+  return /* @__PURE__ */ _jsxC(Fragment$1, {
     children: [
-      /* @__PURE__ */ jsxs("picture", {
-        children: [
-          webpSrcSet(props) ? /* @__PURE__ */ jsx("source", {
-            type: "image/webp",
-            srcSet: webpSrcSet(props)
-          }) : null,
-          /* @__PURE__ */ jsx("img", {
-            loading: "lazy",
-            get alt() {
-              return props.altText;
-            },
-            role: props.altText ? "presentation" : void 0,
-            style: {
-              objectPosition: props.backgroundPosition || "center",
-              objectFit: props.backgroundSize || "cover",
-              ...aspectRatioCss(props)
-            },
-            class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
-            get src() {
-              return props.image;
-            },
-            srcSet: srcSetToUse(props),
-            get sizes() {
-              return props.sizes;
-            },
-            [_IMMUTABLE]: {
-              alt: _wrapSignal(props, "altText"),
-              src: _wrapSignal(props, "image"),
-              sizes: _wrapSignal(props, "sizes")
-            }
-          })
-        ],
-        [_IMMUTABLE]: {
-          children: false
-        }
-      }),
-      props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ _jsxQ("picture", null, null, [
+        webpSrcSet(props) ? /* @__PURE__ */ _jsxQ("source", {
+          srcSet: webpSrcSet(props)
+        }, {
+          type: "image/webp"
+        }, null, 3, "0A_0") : null,
+        /* @__PURE__ */ _jsxQ("img", {
+          style: {
+            objectPosition: props.backgroundPosition || "center",
+            objectFit: props.backgroundSize || "cover",
+            ...aspectRatioCss(props)
+          },
+          srcSet: srcSetToUse(props)
+        }, {
+          loading: "lazy",
+          alt: _fnSignal((p0) => p0.altText, [
+            props
+          ], "p0.altText"),
+          role: _fnSignal((p0) => p0.altText ? "presentation" : void 0, [
+            props
+          ], 'p0.altText?"presentation":undefined'),
+          class: _fnSignal((p0) => "builder-image" + (p0.className ? " " + p0.className : "") + " img-Image", [
+            props
+          ], '"builder-image"+(p0.className?" "+p0.className:"")+" img-Image"'),
+          src: _fnSignal((p0) => p0.image, [
+            props
+          ], "p0.image"),
+          sizes: _fnSignal((p0) => p0.sizes, [
+            props
+          ], "p0.sizes")
+        }, null, 3, null)
+      ], 1, null),
+      props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /* @__PURE__ */ _jsxQ("div", null, {
         class: "builder-image-sizer div-Image",
-        style: {
-          paddingTop: props.aspectRatio * 100 + "%"
-        }
-      }) : null,
-      props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsx(Slot, {}, "0A_0") : null,
-      !props.fitContent && props.children ? /* @__PURE__ */ jsx("div", {
-        class: "div-Image-2",
-        children: /* @__PURE__ */ jsx(Slot, {}, "0A_1")
-      }) : null
-    ],
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "0A_2");
+        style: _fnSignal((p0) => ({
+          paddingTop: p0.aspectRatio * 100 + "%"
+        }), [
+          props
+        ], '{paddingTop:p0.aspectRatio*100+"%"}')
+      }, null, 3, "0A_1") : null,
+      props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ _jsxC(Slot, null, 3, "0A_2") : null,
+      !props.fitContent && props.children ? /* @__PURE__ */ _jsxQ("div", null, {
+        class: "div-Image-2"
+      }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0A_3"), 1, "0A_4") : null
+    ]
+  }, 1, "0A_5");
 }, "Image_component_LRxDkFa1EfU"));
 const STYLES = `
 .img-Image {
@@ -1285,7 +1264,6 @@ const componentInfo$7 = {
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: serializeFn((options) => {
-        const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
         function loadImage(url, timeout = 6e4) {
@@ -1316,10 +1294,10 @@ const componentInfo$7 = {
           if (blob.type.includes("svg"))
             options.set("noWebp", true);
         });
-        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
+        if (value && (!aspectRatio || aspectRatio === 0.7041))
           return loadImage(value).then((img) => {
             const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7041)) {
               if (img.width && img.height) {
                 options.set("aspectRatio", round2(img.height / img.width));
                 options.set("height", img.height);
@@ -1453,8 +1431,8 @@ const componentInfo$6 = {
     }
   ]
 };
-const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("section", {
+const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("section", {
     ...props.attributes,
     style: {
       width: "100%",
@@ -1467,9 +1445,8 @@ const SectionComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       alignItems: "stretch",
       marginLeft: "auto",
       marginRight: "auto"
-    },
-    children: /* @__PURE__ */ jsx(Slot, {}, "2Y_0")
-  });
+    }
+  }, null, /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0"), 0, "2Y_1");
 }, "SectionComponent_component_ZWF9iD5WeLg"));
 const componentInfo$5 = {
   name: "Symbol",
@@ -1606,8 +1583,7 @@ const setCookie = async ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
-const BUILDER_STORE_PREFIX = "builderio.variations";
-const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentTestKey = (id) => `${"builderio.variations"}.${id}`;
 const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
   name: getContentTestKey(contentId),
   canTrack
@@ -1621,11 +1597,11 @@ const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
 const getRandomVariationId = ({ id, variations }) => {
   let n = 0;
   const random = Math.random();
-  for (const id1 in variations) {
-    const testRatio = variations[id1]?.testRatio;
+  for (const id2 in variations) {
+    const testRatio = variations[id2]?.testRatio;
     n += testRatio;
     if (random < n)
-      return id1;
+      return id2;
   }
   return id;
 };
@@ -1702,8 +1678,6 @@ function flatten(object, path = null, separator = ".") {
     };
   }, {});
 }
-const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
-const BUILDER_OPTIONS_PREFIX = "options.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
   searchParams.forEach((value, key) => {
@@ -1717,8 +1691,8 @@ const getBuilderSearchParams = (_options) => {
   const options = normalizeSearchParams(_options);
   const newOptions = {};
   Object.keys(options).forEach((key) => {
-    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
+    if (key.startsWith("builder.")) {
+      const trimmedKey = key.replace("builder.", "").replace("options.", "");
       newOptions[trimmedKey] = options[key];
     }
   });
@@ -1751,31 +1725,42 @@ const generateContentUrl = (options) => {
   if (userAttributes)
     url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
   if (query) {
-    const flattened1 = flatten({
+    const flattened2 = flatten({
       query
     });
-    for (const key1 in flattened1)
-      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+    for (const key in flattened2)
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
   }
   return url;
 };
 async function getContent(options) {
-  return (await getAllContent({
+  const allContent = await getAllContent({
     ...options,
     limit: 1
-  })).results[0] || null;
+  });
+  if ("results" in allContent)
+    return allContent?.results[0] || null;
+  return null;
 }
 async function getAllContent(options) {
   const url = generateContentUrl(options);
   const res = await fetch$1(url.href);
   const content = await res.json();
+  if ("status" in content && !("results" in content)) {
+    console.error("[Builder.io]: Error fetching data. ", content, options);
+    return content;
+  }
   const canTrack = options.canTrack !== false;
-  if (canTrack && Array.isArray(content.results))
-    for (const item of content.results)
-      await handleABTesting({
-        item,
-        canTrack
-      });
+  try {
+    if (canTrack && Array.isArray(content.results))
+      for (const item of content.results)
+        await handleABTesting({
+          item,
+          canTrack
+        });
+  } catch (e) {
+    console.error("[Builder.io]: Could not setup A/B testing. ", e);
+  }
   return content;
 }
 const fetchContent = function fetchContent2(props, state, builderContext2) {
@@ -1794,7 +1779,7 @@ const fetchContent = function fetchContent2(props, state, builderContext2) {
       console.error("[Builder.io]: Could not fetch symbol content: ", err);
     });
 };
-const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const builderContext$1 = useContext(builderContext);
   const state = useStore({
     className: [
@@ -1807,15 +1792,15 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     ].filter(Boolean).join(" "),
     contentToUse: props.symbol?.content
   });
-  useClientEffectQrl(inlinedQrl(() => {
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [builderContext2, props2, state2] = useLexicalScope();
     fetchContent(props2, state2, builderContext2);
-  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
+  }, "Symbol_component_useVisibleTask_oMPs8W5ZhwE", [
     builderContext$1,
     props,
     state
   ]));
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = useLexicalScope();
     track2(() => props2.symbol);
     fetchContent(props2, state2, builderContext2);
@@ -1824,42 +1809,68 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsx("div", {
-    ...props.attributes,
-    get class() {
-      return state.className;
+  return /* @__PURE__ */ _jsxQ("div", {
+    ...props.attributes
+  }, {
+    class: _fnSignal((p0) => p0.className, [
+      state
+    ], "p0.className")
+  }, /* @__PURE__ */ _jsxC(RenderContent, {
+    get apiVersion() {
+      return builderContext$1.apiVersion;
     },
-    children: /* @__PURE__ */ jsx(RenderContent$1, {
-      get apiVersion() {
-        return builderContext$1.apiVersion;
-      },
-      get apiKey() {
-        return builderContext$1.apiKey;
-      },
-      get context() {
-        return builderContext$1.context;
-      },
-      customComponents: Object.values(builderContext$1.registeredComponents),
-      data: {
+    get apiKey() {
+      return builderContext$1.apiKey;
+    },
+    get context() {
+      return builderContext$1.context;
+    },
+    get customComponents() {
+      return Object.values(builderContext$1.registeredComponents);
+    },
+    get data() {
+      return {
         ...props.symbol?.data,
         ...builderContext$1.state,
         ...state.contentToUse?.data?.state
-      },
-      model: props.symbol?.model,
-      get content() {
-        return state.contentToUse;
-      },
-      [_IMMUTABLE]: {
-        apiVersion: _wrapSignal(builderContext$1, "apiVersion"),
-        apiKey: _wrapSignal(builderContext$1, "apiKey"),
-        context: _wrapSignal(builderContext$1, "context"),
-        content: _wrapSignal(state, "contentToUse")
-      }
-    }, "Wt_0"),
+      };
+    },
+    get model() {
+      return props.symbol?.model;
+    },
+    get content() {
+      return state.contentToUse;
+    },
     [_IMMUTABLE]: {
-      class: _wrapSignal(state, "className")
+      apiVersion: _fnSignal((p0) => p0.apiVersion, [
+        builderContext$1
+      ], "p0.apiVersion"),
+      apiKey: _fnSignal((p0) => p0.apiKey, [
+        builderContext$1
+      ], "p0.apiKey"),
+      context: _fnSignal((p0) => p0.context, [
+        builderContext$1
+      ], "p0.context"),
+      customComponents: _fnSignal((p0) => Object.values(p0.registeredComponents), [
+        builderContext$1
+      ], "Object.values(p0.registeredComponents)"),
+      data: _fnSignal((p0, p1, p2) => ({
+        ...p1.symbol?.data,
+        ...p0.state,
+        ...p2.contentToUse?.data?.state
+      }), [
+        builderContext$1,
+        props,
+        state
+      ], "{...p1.symbol?.data,...p0.state,...p2.contentToUse?.data?.state}"),
+      model: _fnSignal((p0) => p0.symbol?.model, [
+        props
+      ], "p0.symbol?.model"),
+      content: _fnSignal((p0) => p0.contentToUse, [
+        state
+      ], "p0.contentToUse")
     }
-  });
+  }, 3, "Wt_0"), 0, "Wt_1");
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
   name: "Text",
@@ -1881,19 +1892,17 @@ const componentInfo$4 = {
     textAlign: "center"
   }
 };
-const Text = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("span", {
-    class: "builder-text",
-    get dangerouslySetInnerHTML() {
-      return props.text;
-    },
+const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("span", {
     style: {
       outline: "none"
-    },
-    [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "text")
     }
-  });
+  }, {
+    class: "builder-text",
+    dangerouslySetInnerHTML: _fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text")
+  }, null, 3, "yO_0");
 }, "Text_component_15p0cKUxgIE"));
 const componentInfo$3 = {
   name: "Video",
@@ -2032,25 +2041,27 @@ const spreadProps = function spreadProps2(props, state) {
     ...videoProps(props)
   };
 };
-const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("video", {
-    ...spreadProps(props),
-    style: {
+const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("video", {
+    ...spreadProps(props)
+  }, {
+    style: _fnSignal((p0) => ({
       width: "100%",
       height: "100%",
-      ...props.attributes?.style,
-      objectFit: props.fit,
-      objectPosition: props.position,
+      ...p0.attributes?.style,
+      objectFit: p0.fit,
+      objectPosition: p0.position,
       borderRadius: 1
-    },
-    src: props.video || "no-src",
-    get poster() {
-      return props.posterImage;
-    },
-    [_IMMUTABLE]: {
-      poster: _wrapSignal(props, "posterImage")
-    }
-  });
+    }), [
+      props
+    ], '{width:"100%",height:"100%",...p0.attributes?.style,objectFit:p0.fit,objectPosition:p0.position,borderRadius:1}'),
+    src: _fnSignal((p0) => p0.video || "no-src", [
+      props
+    ], 'p0.video||"no-src"'),
+    poster: _fnSignal((p0) => p0.posterImage, [
+      props
+    ], "p0.posterImage")
+  }, null, 2, "j7_0");
 }, "Video_component_qdcTZflYyoQ"));
 const componentInfo$2 = {
   name: "Embed",
@@ -2066,8 +2077,7 @@ const componentInfo$2 = {
         const url = options.get("url");
         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=${"ae0e60e78201a3f2b0de4b"}`).then((res) => res.json()).then((data) => {
             if (options.get("url") === url) {
               if (data.html)
                 options.set("content", data.html);
@@ -2096,9 +2106,9 @@ const SCRIPT_MIME_TYPES = [
 ];
 const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
-  if (!elem || !elem.getElementsByTagName)
+  if (!elem.value || !elem.value.getElementsByTagName)
     return;
-  const scripts = elem.getElementsByTagName("script");
+  const scripts = elem.value.getElementsByTagName("script");
   for (let i = 0; i < scripts.length; i++) {
     const script = scripts[i];
     if (script.src && !state.scriptsInserted.includes(script.src)) {
@@ -2116,18 +2126,18 @@ const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
       }
   }
 };
-const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const elem = useRef();
+const Embed = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const elem = useSignal();
   const state = useStore({
     ranInitFn: false,
     scriptsInserted: [],
     scriptsRun: []
   });
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elem2, props2, state2] = useLexicalScope();
-    track2(() => elem2);
+    track2(() => elem2.value);
     track2(() => state2.ranInitFn);
-    if (elem2 && !state2.ranInitFn) {
+    if (elem2.value && !state2.ranInitFn) {
       state2.ranInitFn = true;
       findAndRunScripts$1(props2, state2, elem2);
     }
@@ -2136,32 +2146,32 @@ const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  return /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ _jsxQ("div", {
+    ref: elem
+  }, {
     class: "builder-embed",
-    ref: elem,
-    get dangerouslySetInnerHTML() {
-      return props.content;
-    },
-    [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "content")
-    }
-  });
+    dangerouslySetInnerHTML: _fnSignal((p0) => p0.content, [
+      props
+    ], "p0.content")
+  }, null, 3, "9r_0");
 }, "Embed_component_Uji08ORjXbE"));
-const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("img", {
-    style: {
-      objectFit: props.backgroundSize || "cover",
-      objectPosition: props.backgroundPosition || "center"
-    },
-    get alt() {
-      return props.altText;
-    },
-    src: props.imgSrc || props.image,
-    ...props.attributes,
-    [_IMMUTABLE]: {
-      alt: _wrapSignal(props, "altText")
-    }
-  }, isEditing() && props.imgSrc || "default-key");
+const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("img", {
+    ...props.attributes
+  }, {
+    style: _fnSignal((p0) => ({
+      objectFit: p0.backgroundSize || "cover",
+      objectPosition: p0.backgroundPosition || "center"
+    }), [
+      props
+    ], '{objectFit:p0.backgroundSize||"cover",objectPosition:p0.backgroundPosition||"center"}'),
+    alt: _fnSignal((p0) => p0.altText, [
+      props
+    ], "p0.altText"),
+    src: _fnSignal((p0) => p0.imgSrc || p0.image, [
+      props
+    ], "p0.imgSrc||p0.image")
+  }, null, 2, isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 const componentInfo$1 = {
   name: "Raw:Img",
@@ -2185,8 +2195,8 @@ const componentInfo$1 = {
   static: true
 };
 const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
-  if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
-    const scripts = elem.getElementsByTagName("script");
+  if (elem.value && elem.value.getElementsByTagName && typeof window !== "undefined") {
+    const scripts = elem.value.getElementsByTagName("script");
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
       if (script.src) {
@@ -2214,30 +2224,30 @@ const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
     }
   }
 };
-const CustomCode = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const elem = useRef();
+const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const elem = useSignal();
   const state = useStore({
     scriptsInserted: [],
     scriptsRun: []
   });
-  useClientEffectQrl(inlinedQrl(() => {
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [elem2, props2, state2] = useLexicalScope();
     findAndRunScripts(props2, state2, elem2);
-  }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
+  }, "CustomCode_component_useVisibleTask_S5QgEQZj6YE", [
     elem,
     props,
     state
   ]));
-  return /* @__PURE__ */ jsx("div", {
-    ref: elem,
-    class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
-    get dangerouslySetInnerHTML() {
-      return props.code;
-    },
-    [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "code")
-    }
-  });
+  return /* @__PURE__ */ _jsxQ("div", {
+    ref: elem
+  }, {
+    class: _fnSignal((p0) => "builder-custom-code" + (p0.replaceNodes ? " replace-nodes" : ""), [
+      props
+    ], '"builder-custom-code"+(p0.replaceNodes?" replace-nodes":"")'),
+    dangerouslySetInnerHTML: _fnSignal((p0) => p0.code, [
+      props
+    ], "p0.code")
+  }, null, 3, "bY_0");
 }, "CustomCode_component_uYOSy7w7Zqw"));
 const componentInfo = {
   name: "Custom Code",
@@ -2351,12 +2361,11 @@ function uuidv4() {
 function uuid() {
   return uuidv4().replace(/-/g, "");
 }
-const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
 const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
   const sessionId = await getCookie({
-    name: SESSION_LOCAL_STORAGE_KEY,
+    name: "builderSessionId",
     canTrack
   });
   if (checkIsDefined(sessionId))
@@ -2372,7 +2381,7 @@ const getSessionId = async ({ canTrack }) => {
 };
 const createSessionId = () => uuid();
 const setSessionId = ({ id, canTrack }) => setCookie({
-  name: SESSION_LOCAL_STORAGE_KEY,
+  name: "builderSessionId",
   value: id,
   canTrack
 });
@@ -2395,12 +2404,11 @@ const setLocalStorageItem = ({ key, canTrack, value }) => {
     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,
+    key: "builderVisitorId",
     canTrack
   });
   if (checkIsDefined(visitorId))
@@ -2416,7 +2424,7 @@ const getVisitorId = ({ canTrack }) => {
 };
 const createVisitorId = () => uuid();
 const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
-  key: VISITOR_LOCAL_STORAGE_KEY,
+  key: "builderVisitorId",
   value: id,
   canTrack
 });
@@ -2742,7 +2750,7 @@ const getCss = ({ cssCode, contentId }) => {
     return cssCode;
   return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
 };
-const RenderContentStyles = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+const RenderContentStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const state = useStore({
     injectedStyles: `
 ${getCss({
@@ -2767,14 +2775,16 @@ ${getFontCss({
 }
 `
   });
-  return /* @__PURE__ */ jsx(RenderInlinedStyles, {
+  return /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
     get styles() {
       return state.injectedStyles;
     },
     [_IMMUTABLE]: {
-      styles: _wrapSignal(state, "injectedStyles")
+      styles: _fnSignal((p0) => p0.injectedStyles, [
+        state
+      ], "p0.injectedStyles")
     }
-  }, "V0_0");
+  }, 3, "V0_0");
 }, "RenderContentStyles_component_Og0xL34Zbvc"));
 const getContextStateInitialValue = ({ content, data, locale }) => {
   const defaultValues = {};
@@ -2846,9 +2856,9 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         break;
       }
       case "builder.contentUpdate": {
-        const messageContent1 = data.data;
-        const key = messageContent1.key || messageContent1.alias || messageContent1.entry || messageContent1.modelName;
-        const contentData = messageContent1.data;
+        const messageContent = data.data;
+        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+        const contentData = messageContent.data;
         if (key === props.model) {
           mergeNewContent(props, state, elementRef, contentData);
           state.forceReRenderCount = state.forceReRenderCount + 1;
@@ -2898,7 +2908,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
     };
     setContextState(props, state, elementRef, newState);
   }).catch((err) => {
-    console.log("error fetching dynamic data", url, err);
+    console.error("error fetching dynamic data", url, err);
   });
 };
 const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
@@ -2924,8 +2934,9 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
       }
     }));
 };
-const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const elementRef = useRef();
+const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  const elementRef = useSignal();
   const state = useStore({
     allRegisteredComponents: [
       ...getDefaultRegisteredComponents(),
@@ -2959,7 +2970,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents
   }));
-  useClientEffectQrl(inlinedQrl(() => {
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [elementRef2, props2, state2] = useLexicalScope();
     if (!props2.apiKey)
       console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -3011,12 +3022,12 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
-  }, "RenderContent_component_useClientEffect_cA0sVHIkr5g", [
+  }, "RenderContent_component_useVisibleTask_n50dgqWW6pY", [
     elementRef,
     props,
     state
   ]));
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => props2.content);
     if (props2.content)
@@ -3026,7 +3037,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
@@ -3036,7 +3047,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
@@ -3045,7 +3056,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
@@ -3054,53 +3065,60 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  useCleanupQrl(inlinedQrl(() => {
-    const [elementRef2, props2, state2] = useLexicalScope();
-    if (isBrowser()) {
-      window.removeEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
-      window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
-    }
-  }, "RenderContent_component_useCleanup_FwcO310HVAI", [
-    elementRef,
-    props,
-    state
-  ]));
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: state.useContent ? /* @__PURE__ */ jsxs("div", {
-      ref: elementRef,
-      onClick$: inlinedQrl((event) => {
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: state.useContent ? /* @__PURE__ */ _jsxQ("div", {
+      ref: elementRef
+    }, {
+      "builder-content-id": _fnSignal((p0) => p0.useContent?.id, [
+        state
+      ], "p0.useContent?.id"),
+      "builder-model": _fnSignal((p0) => p0.model, [
+        props
+      ], "p0.model"),
+      onClick$: /* @__PURE__ */ inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
         return onClick(props2, state2, elementRef2, event);
       }, "RenderContent_component__Fragment_div_onClick_wLg5o3ZkpC0", [
         elementRef,
         props,
         state
-      ]),
-      "builder-content-id": state.useContent?.id,
-      get "builder-model"() {
-        return props.model;
-      },
-      children: [
-        /* @__PURE__ */ jsx(RenderContentStyles, {
-          contentId: state.useContent?.id,
-          cssCode: state.useContent?.data?.cssCode,
-          customFonts: state.useContent?.data?.customFonts
-        }, "03_0"),
-        /* @__PURE__ */ jsx(RenderBlocks, {
-          blocks: state.useContent?.data?.blocks
-        }, state.forceReRenderCount)
-      ],
-      [_IMMUTABLE]: {
-        "builder-model": _wrapSignal(props, "model"),
-        children: false
-      }
-    }) : null,
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "03_1");
+      ])
+    }, [
+      /* @__PURE__ */ _jsxC(RenderContentStyles, {
+        get contentId() {
+          return state.useContent?.id;
+        },
+        get cssCode() {
+          return state.useContent?.data?.cssCode;
+        },
+        get customFonts() {
+          return state.useContent?.data?.customFonts;
+        },
+        [_IMMUTABLE]: {
+          contentId: _fnSignal((p0) => p0.useContent?.id, [
+            state
+          ], "p0.useContent?.id"),
+          cssCode: _fnSignal((p0) => p0.useContent?.data?.cssCode, [
+            state
+          ], "p0.useContent?.data?.cssCode"),
+          customFonts: _fnSignal((p0) => p0.useContent?.data?.customFonts, [
+            state
+          ], "p0.useContent?.data?.customFonts")
+        }
+      }, 3, "03_0"),
+      /* @__PURE__ */ _jsxC(RenderBlocks, {
+        get blocks() {
+          return state.useContent?.data?.blocks;
+        },
+        [_IMMUTABLE]: {
+          blocks: _fnSignal((p0) => p0.useContent?.data?.blocks, [
+            state
+          ], "p0.useContent?.data?.blocks")
+        }
+      }, 3, state.forceReRenderCount)
+    ], 1, "03_1") : null
+  }, 1, "03_2");
 }, "RenderContent_component_hEAI0ahViXM"));
-const RenderContent$1 = RenderContent;
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {
@@ -3118,7 +3136,7 @@ export {
   FragmentComponent as Fragment,
   Image,
   RenderBlocks,
-  RenderContent$1 as RenderContent,
+  RenderContent,
   SectionComponent as Section,
   Symbol$1 as Symbol,
   Text,