@builder.io/sdk-qwik 0.3.0 → 0.4.0

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, useComputedQrl, useLexicalScope, _jsxQ, _jsxBranch, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useVisibleTaskQrl, useTaskQrl, useSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, _jsxQ, _jsxBranch, useComputedQrl, useLexicalScope, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useSignal, useTaskQrl, useVisibleTaskQrl } 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"));
@@ -32,7 +32,7 @@ const STYLES$3 = `
   all: unset;
 }
 `;
-const builderContext = createContextId("Builder");
+const BuilderContext = createContextId("Builder");
 const TARGET = "qwik";
 function isBrowser() {
   return typeof window !== "undefined" && typeof document !== "undefined";
@@ -86,7 +86,7 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-function evaluate({ code, context, state, event, isExpression = true }) {
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
   if (code === "") {
     console.warn("Skipping evaluation of empty code block.");
     return;
@@ -99,11 +99,29 @@ function evaluate({ code, context, state, event, isExpression = true }) {
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState)
+    throw new Error("rootState === localState");
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState)
+        return localState[prop];
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState)
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      rootState[prop] = value;
+      rootSetState?.(rootState);
+      return true;
+    }
+  });
+}
 const set = (obj, _path, value) => {
   if (Object(obj) !== obj)
     return obj;
@@ -114,7 +132,7 @@ const set = (obj, _path, value) => {
 function transformBlock(block) {
   return block;
 }
-const evaluateBindings = ({ block, context, state }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
   if (!block.bindings)
     return block;
   const copy = fastClone(block);
@@ -131,19 +149,23 @@ const evaluateBindings = ({ block, context, state }) => {
     const expression = block.bindings[binding];
     const value = evaluate({
       code: expression,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
     set(copied, binding, value);
   }
   return copied;
 };
-function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
+function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings)
     return evaluateBindings({
       block: transformedBlock,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
   else
@@ -173,23 +195,14 @@ const createCssClass = ({ mediaQuery, className, styles }) => {
     return cssClass;
 };
 const RenderInlinedStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const tag = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    return "style";
-  }, "RenderInlinedStyles_component_tag_useComputed_S1nSc0C6qB4"));
-  useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, tag2] = useLexicalScope();
-    return `<${tag2.value}>${props2.styles}</${tag2.value}>`;
-  }, "RenderInlinedStyles_component_injectedStyleScript_useComputed_CVKinNBYTxE", [
-    props,
-    tag
-  ]));
-  return /* @__PURE__ */ _jsxC(Fragment, {
-    children: /* @__PURE__ */ _jsxQ("style", null, {
-      dangerouslySetInnerHTML: _fnSignal((p0) => p0.styles, [
-        props
-      ], "p0.styles")
-    }, null, 3, "zz_0")
-  }, 1, "zz_2");
+  return /* @__PURE__ */ _jsxQ("style", null, {
+    dangerouslySetInnerHTML: _fnSignal((p0) => p0.styles, [
+      props
+    ], "p0.styles"),
+    id: _fnSignal((p0) => p0.id, [
+      props
+    ], "p0.id")
+  }, null, 3, "zz_0");
 }, "RenderInlinedStyles_component_ejNQtXd1ahM"));
 const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
@@ -197,7 +210,9 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     const [props2] = useLexicalScope();
     return getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
@@ -271,7 +286,9 @@ function createEventHandler(value, options) {
     return evaluate({
       code: value2,
       context: options2.context,
-      state: options2.state,
+      localState: options2.localState,
+      rootState: options2.rootState,
+      rootSetState: options2.rootSetState,
       event
     });
   }, "createEventHandler_7wCAiJVliNE", [
@@ -358,7 +375,9 @@ const isEmptyHtmlElement = (tagName) => {
 const getComponent = ({ block, context }) => {
   const componentName = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component?.name;
@@ -379,7 +398,9 @@ const getRepeatItemData = ({ block, context }) => {
     return void 0;
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray))
@@ -389,8 +410,8 @@ const getRepeatItemData = ({ block, context }) => {
   const repeatArray = itemsArray.map((item, index) => ({
     context: {
       ...context,
-      state: {
-        ...context.state,
+      localState: {
+        ...context.localState,
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -401,20 +422,6 @@ const getRepeatItemData = ({ block, context }) => {
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      obj[prop] = value;
-      context.setState?.(obj);
-      return true;
-    }
-  });
-  return useState;
-};
 const RenderComponent = (props) => {
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: props.componentRef ? /* @__PURE__ */ _jsxC(props.componentRef, {
@@ -447,9 +454,11 @@ const RenderComponent = (props) => {
   }, 1, "R9_1");
 };
 const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  useContextProvider(builderContext, useStore({
+  useContextProvider(BuilderContext, useStore({
     content: props.repeatContext.content,
-    state: props.repeatContext.state,
+    localState: props.repeatContext.localState,
+    rootState: props.repeatContext.rootState,
+    rootSetState: props.repeatContext.rootSetState,
     context: props.repeatContext.context,
     apiKey: props.repeatContext.apiKey,
     registeredComponents: props.repeatContext.registeredComponents,
@@ -476,8 +485,7 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
 const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const state = useStore({
-    proxyState: getProxyState(props.context),
-    tag: props.block.tagName || "div"
+    Tag: props.block.tagName || "div"
   });
   const component = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
@@ -488,26 +496,28 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   }, "RenderBlock_component_component_useComputed_qb7DMTJ9XGY", [
     props
   ]));
-  const repeatItemData = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const repeatItem = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     return getRepeatItemData({
       block: props2.block,
       context: props2.context
     });
-  }, "RenderBlock_component_repeatItemData_useComputed_Q2wkGRsY3KE", [
+  }, "RenderBlock_component_repeatItem_useComputed_NslhinGDzrU", [
     props
   ]));
   const useBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, repeatItemData2] = useLexicalScope();
-    return repeatItemData2.value ? props2.block : getProcessedBlock({
+    const [props2, repeatItem2] = useLexicalScope();
+    return repeatItem2.value ? props2.block : getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
   }, "RenderBlock_component_useBlock_useComputed_4ZTSqMpaluI", [
     props,
-    repeatItemData
+    repeatItem
   ]));
   const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [useBlock2] = useLexicalScope();
@@ -520,15 +530,16 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     useBlock
   ]));
   const actions = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, state2, useBlock2] = useLexicalScope();
+    const [props2, useBlock2] = useLexicalScope();
     return getBlockActions({
       block: useBlock2.value,
-      state: props2.context.state,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
+      localState: props2.context.localState,
       context: props2.context.context
     });
   }, "RenderBlock_component_actions_useComputed_AOTwdXfwCqY", [
     props,
-    state,
     useBlock
   ]));
   const attributes = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -543,12 +554,12 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     useBlock
   ]));
   const childrenWithoutParentComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [component2, repeatItemData2, useBlock2] = useLexicalScope();
-    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItemData2.value;
+    const [component2, repeatItem2, useBlock2] = useLexicalScope();
+    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItem2.value;
     return shouldRenderChildrenOutsideRef ? useBlock2.value.children ?? [] : [];
   }, "RenderBlock_component_childrenWithoutParentComponent_useComputed_l4hT2V9liQc", [
     component,
-    repeatItemData,
+    repeatItem,
     useBlock
   ]));
   const childrenContext = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -559,10 +570,11 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     return {
       apiKey: props2.context.apiKey,
       apiVersion: props2.context.apiVersion,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       content: props2.context.content,
       context: props2.context.context,
-      setState: props2.context.setState,
       registeredComponents: props2.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles()
     };
@@ -597,11 +609,11 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: canShowBlock.value ? !component.value?.noWrap ? /* @__PURE__ */ _jsxC(Fragment, {
       children: [
-        isEmptyHtmlElement(state.tag) ? /* @__PURE__ */ _jsxC(state.tag, {
+        isEmptyHtmlElement(state.Tag) ? /* @__PURE__ */ _jsxC(state.Tag, {
           ...attributes.value,
           ...actions.value
         }, 0, "9d_0") : null,
-        !isEmptyHtmlElement(state.tag) && repeatItemData.value ? (repeatItemData.value || []).map(function(data, index) {
+        !isEmptyHtmlElement(state.Tag) && repeatItem.value ? (repeatItem.value || []).map(function(data, index) {
           return /* @__PURE__ */ _jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
@@ -615,7 +627,7 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(state.tag) && !repeatItemData.value ? /* @__PURE__ */ _jsxC(state.tag, {
+        !isEmptyHtmlElement(state.Tag) && !repeatItem.value ? /* @__PURE__ */ _jsxC(state.Tag, {
           ...attributes.value,
           ...actions.value,
           children: [
@@ -656,7 +668,7 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }, 0, "9d_4") : null
   }, 1, "9d_5");
 }, "RenderBlock_component_m0hg0zT573Q"));
-const onClick$1 = function onClick2(props, state, builderContext2) {
+const onClick$1 = function onClick2(props, state, builderContext) {
   if (isEditing() && !props.blocks?.length)
     window.parent?.postMessage({
       type: "builder.clickEmptyBlocks",
@@ -666,7 +678,7 @@ const onClick$1 = function onClick2(props, state, builderContext2) {
       }
     }, "*");
 };
-const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
+const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
   if (isEditing() && !props.blocks?.length)
     window.parent?.postMessage({
       type: "builder.hoverEmptyBlocks",
@@ -678,7 +690,7 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
 };
 const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
-  const builderContext$1 = useContext(builderContext);
+  const builderContext = useContext(BuilderContext);
   const state = {};
   const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
@@ -691,7 +703,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       const [builderContext2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
-      builderContext$1,
+      builderContext,
       props,
       state
     ]),
@@ -699,7 +711,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       const [builderContext2, props2, state2] = useLexicalScope();
       return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
-      builderContext$1,
+      builderContext,
       props,
       state
     ])
@@ -720,7 +732,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     props.blocks ? (props.blocks || []).map(function(block) {
       return /* @__PURE__ */ _jsxC(RenderBlock, {
         block,
-        context: builderContext$1,
+        context: builderContext,
         [_IMMUTABLE]: {
           context: _IMMUTABLE
         }
@@ -729,7 +741,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     props.blocks ? (props.blocks || []).map(function(block) {
       return /* @__PURE__ */ _jsxC(BlockStyles, {
         block,
-        context: builderContext$1,
+        context: builderContext,
         [_IMMUTABLE]: {
           context: _IMMUTABLE
         }
@@ -744,52 +756,54 @@ const STYLES$2 = `
   align-items: stretch;
 }
 `;
-const getWidth = function getWidth2(props, state, builderContext2, index) {
+const getWidth = function getWidth2(props, state, builderContext, index) {
   return state.cols[index]?.width || 100 / state.cols.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
+const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext, index) {
   const subtractWidth = state.gutterSize * (state.cols.length - 1) / state.cols.length;
-  return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(props, state, builderContext, index)}% - ${subtractWidth}px)`;
 };
-const getTabletStyle = function getTabletStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+const getTabletStyle = function getTabletStyle2(props, state, builderContext, { stackedStyle, desktopStyle }) {
   return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
 };
-const getMobileStyle = function getMobileStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+const getMobileStyle = function getMobileStyle2(props, state, builderContext, { stackedStyle, desktopStyle }) {
   return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
-const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
-  index === 0 ? 0 : state.gutterSize;
-  const width = getColumnCssWidth(props, state, builderContext2, index);
-  const gutterPixels = `${state.gutterSize}px`;
+const columnCssVars = function columnCssVars2(props, state, builderContext, index) {
+  const gutter = index === 0 ? 0 : state.gutterSize;
+  const width = getColumnCssWidth(props, state, builderContext, index);
+  const gutterPixels = `${gutter}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = 0;
   return {
     width,
     "margin-left": gutterPixels,
-    "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+    "--column-width-mobile": getMobileStyle(props, state, builderContext, {
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext, {
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     }),
-    "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+    "--column-width-tablet": getTabletStyle(props, state, builderContext, {
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+    "--column-margin-left-tablet": getTabletStyle(props, state, builderContext, {
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     })
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
-  const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext, size) {
+  const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
 const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
-  const builderContext$1 = useContext(builderContext);
+  const builderContext = useContext(BuilderContext);
   const state = useStore({
     cols: props.columns || [],
     flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
@@ -806,7 +820,7 @@ const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       })
     };
   }, "Columns_component_columnsCssVars_useComputed_adFEq2RWT9s", [
-    builderContext$1,
+    builderContext,
     props,
     state
   ]));
@@ -838,7 +852,7 @@ const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         },
       `;
   }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
-    builderContext$1,
+    builderContext,
     props,
     state
   ]));
@@ -862,7 +876,7 @@ const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     }, 3, "c0_0"),
     (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ _jsxQ("div", {
-        style: columnCssVars(props, state, builderContext$1, index)
+        style: columnCssVars(props, state, builderContext, index)
       }, {
         class: "builder-column div-Columns-2"
       }, /* @__PURE__ */ _jsxC(RenderBlocks, {
@@ -960,16 +974,17 @@ const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     const imageToUse = props2.image || props2.src;
-    if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
+    const url = imageToUse;
+    if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
       return props2.srcset;
     if (props2.srcset && props2.image?.includes("builder.io/api/v1/image")) {
       if (!props2.srcset.includes(props2.image.split("?")[0])) {
         console.debug("Removed given srcset");
-        return getSrcSet(imageToUse);
+        return getSrcSet(url);
       }
     } else if (props2.image && !props2.srcset)
-      return getSrcSet(imageToUse);
-    return getSrcSet(imageToUse);
+      return getSrcSet(url);
+    return getSrcSet(url);
   }, "Image_component_srcSetToUse_useComputed_TZMibf9Gpvw", [
     props
   ]));
@@ -1072,6 +1087,24 @@ const STYLES = `
   height: 100%;
 }
 `;
+const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("section", {
+    ...props.attributes,
+    style: {
+      width: "100%",
+      alignSelf: "stretch",
+      flexGrow: 1,
+      boxSizing: "border-box",
+      maxWidth: props.maxWidth || 1200,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      marginLeft: "auto",
+      marginRight: "auto"
+    },
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0")
+  }, null, 0, "2Y_1");
+}, "SectionComponent_component_ZWF9iD5WeLg"));
 const componentInfo$a = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -1386,6 +1419,7 @@ 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) {
@@ -1416,10 +1450,10 @@ const componentInfo$7 = {
           if (blob.type.includes("svg"))
             options.set("noWebp", true);
         });
-        if (value && (!aspectRatio || aspectRatio === 0.7041))
+        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
           return loadImage(value).then((img) => {
             const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7041)) {
+            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
               if (img.width && img.height) {
                 options.set("aspectRatio", round2(img.height / img.width));
                 options.set("height", img.height);
@@ -1553,24 +1587,6 @@ const componentInfo$6 = {
     }
   ]
 };
-const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxS("section", {
-    ...props.attributes,
-    style: {
-      width: "100%",
-      alignSelf: "stretch",
-      flexGrow: 1,
-      boxSizing: "border-box",
-      maxWidth: props.maxWidth || 1200,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      marginLeft: "auto",
-      marginRight: "auto"
-    },
-    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0")
-  }, null, 0, "2Y_1");
-}, "SectionComponent_component_ZWF9iD5WeLg"));
 const componentInfo$5 = {
   name: "Symbol",
   noWrap: true,
@@ -1610,431 +1626,30 @@ const componentInfo$5 = {
     }
   ]
 };
-const logger = {
-  log: (...message) => console.log("[Builder.io]: ", ...message),
-  error: (...message) => console.error("[Builder.io]: ", ...message),
-  warn: (...message) => console.warn("[Builder.io]: ", ...message)
-};
-function getGlobalThis() {
-  if (typeof globalThis !== "undefined")
-    return globalThis;
-  if (typeof window !== "undefined")
-    return window;
-  if (typeof global !== "undefined")
-    return global;
-  if (typeof self !== "undefined")
-    return self;
-  return globalThis;
-}
-function getFetch() {
-  const globalFetch = getGlobalThis().fetch;
-  if (typeof globalFetch === "undefined") {
-    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
-      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
-    throw new Error("Builder SDK could not find a global `fetch` function");
-  }
-  return globalFetch;
-}
-const fetch$1 = getFetch();
-const getTopLevelDomain = (host) => {
-  if (host === "localhost" || host === "127.0.0.1")
-    return host;
-  const parts = host.split(".");
-  if (parts.length > 2)
-    return parts.slice(1).join(".");
-  return host;
-};
-const getCookie = async ({ name, canTrack }) => {
-  try {
-    if (!canTrack)
-      return void 0;
-    return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
-  } catch (err) {
-    console.debug("[COOKIE] GET error: ", err);
-    return void 0;
-  }
-};
-const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
-const SECURE_CONFIG = [
-  [
-    "secure",
-    ""
+const componentInfo$4 = {
+  name: "Text",
+  static: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  inputs: [
+    {
+      name: "text",
+      type: "html",
+      required: true,
+      autoFocus: true,
+      bubble: true,
+      defaultValue: "Enter some text..."
+    }
   ],
-  [
-    "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 = async ({ name, value, expires, canTrack }) => {
-  try {
-    if (!canTrack)
-      return;
-    const cookie = createCookieString({
-      name,
-      value,
-      expires
-    });
-    document.cookie = cookie;
-  } catch (err) {
-    console.warn("[COOKIE] SET error: ", err);
-  }
-};
-const getContentTestKey = (id) => `${"builderio.variations"}.${id}`;
-const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
-  name: getContentTestKey(contentId),
-  canTrack
-});
-const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
-  name: getContentTestKey(contentId),
-  value,
-  canTrack
-});
-const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
-const getRandomVariationId = ({ id, variations }) => {
-  let n = 0;
-  const random = Math.random();
-  for (const id2 in variations) {
-    const testRatio = variations[id2]?.testRatio;
-    n += testRatio;
-    if (random < n)
-      return id2;
-  }
-  return id;
-};
-const getTestFields = ({ item, testGroupId }) => {
-  const variationValue = item.variations[testGroupId];
-  if (testGroupId === item.id || !variationValue)
-    return {
-      testVariationId: item.id,
-      testVariationName: "Default"
-    };
-  else
-    return {
-      data: variationValue.data,
-      testVariationId: variationValue.id,
-      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
-    };
-};
-const getContentVariation = async ({ item, canTrack }) => {
-  const testGroupId = await getContentVariationCookie({
-    canTrack,
-    contentId: item.id
-  });
-  const testFields = testGroupId ? getTestFields({
-    item,
-    testGroupId
-  }) : void 0;
-  if (testFields)
-    return testFields;
-  else {
-    const randomVariationId = getRandomVariationId({
-      variations: item.variations,
-      id: item.id
-    });
-    setContentVariationCookie({
-      contentId: item.id,
-      value: randomVariationId,
-      canTrack
-    }).catch((err) => {
-      console.error("could not store A/B test variation: ", err);
-    });
-    return getTestFields({
-      item,
-      testGroupId: randomVariationId
-    });
+  defaultStyles: {
+    lineHeight: "normal",
+    height: "auto",
+    textAlign: "center"
   }
 };
-const handleABTesting = async ({ item, canTrack }) => {
-  if (!checkIsBuilderContentWithVariations(item))
-    return;
-  const variationValue = await getContentVariation({
-    item,
-    canTrack
-  });
-  Object.assign(item, variationValue);
-};
-function flatten(object, path = null, separator = ".") {
-  return Object.keys(object).reduce((acc, key) => {
-    const value = object[key];
-    const newPath = [
-      path,
-      key
-    ].filter(Boolean).join(separator);
-    const isObject = [
-      typeof value === "object",
-      value !== null,
-      !(Array.isArray(value) && value.length === 0)
-    ].every(Boolean);
-    return isObject ? {
-      ...acc,
-      ...flatten(value, newPath, separator)
-    } : {
-      ...acc,
-      [newPath]: value
-    };
-  }, {});
-}
-const convertSearchParamsToQueryObject = (searchParams) => {
-  const options = {};
-  searchParams.forEach((value, key) => {
-    options[key] = value;
-  });
-  return options;
-};
-const getBuilderSearchParams = (_options) => {
-  if (!_options)
-    return {};
-  const options = normalizeSearchParams(_options);
-  const newOptions = {};
-  Object.keys(options).forEach((key) => {
-    if (key.startsWith("builder.")) {
-      const trimmedKey = key.replace("builder.", "").replace("options.", "");
-      newOptions[trimmedKey] = options[key];
-    }
-  });
-  return newOptions;
-};
-const getBuilderSearchParamsFromWindow = () => {
-  if (!isBrowser())
-    return {};
-  const searchParams = new URLSearchParams(window.location.search);
-  return getBuilderSearchParams(searchParams);
-};
-const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
-const DEFAULT_API_VERSION = "v3";
-const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION } = options;
-  if (!apiKey)
-    throw new Error("Missing API key");
-  if (![
-    "v2",
-    "v3"
-  ].includes(apiVersion))
-    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
-  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {})
-  };
-  const flattened = flatten(queryOptions);
-  for (const key in flattened)
-    url.searchParams.set(key, String(flattened[key]));
-  if (userAttributes)
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  if (query) {
-    const flattened2 = flatten({
-      query
-    });
-    for (const key in flattened2)
-      url.searchParams.set(key, JSON.stringify(flattened2[key]));
-  }
-  return url;
-};
-async function getContent(options) {
-  const allContent = await getAllContent({
-    ...options,
-    limit: 1
-  });
-  if (allContent && "results" in allContent)
-    return allContent?.results[0] || null;
-  return null;
-}
-async function getAllContent(options) {
-  try {
-    const url = generateContentUrl(options);
-    const res = await fetch$1(url.href);
-    const content = await res.json();
-    if ("status" in content && !("results" in content)) {
-      logger.error("Error fetching data. ", {
-        url,
-        content,
-        options
-      });
-      return content;
-    }
-    const canTrack = options.canTrack !== false;
-    try {
-      if (canTrack && Array.isArray(content.results))
-        for (const item of content.results)
-          await handleABTesting({
-            item,
-            canTrack
-          });
-    } catch (e) {
-      logger.error("Could not setup A/B testing. ", e);
-    }
-    return content;
-  } catch (error) {
-    logger.error("Error fetching data. ", error);
-    return null;
-  }
-}
-const fetchContent = function fetchContent2(props, state, builderContext2) {
-  if (!state.contentToUse && props.symbol?.model && builderContext2?.apiKey)
-    getContent({
-      model: props.symbol.model,
-      apiKey: builderContext2.apiKey,
-      apiVersion: builderContext2.apiVersion,
-      query: {
-        id: props.symbol.entry
-      }
-    }).then((response) => {
-      if (response)
-        state.contentToUse = response;
-    }).catch((err) => {
-      logger.error("Could not fetch symbol content: ", err);
-    });
-};
-const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const builderContext$1 = useContext(builderContext);
-  const state = useStore({
-    className: [
-      ...[
-        props.attributes.class
-      ],
-      "builder-symbol",
-      props.symbol?.inline ? "builder-inline-symbol" : void 0,
-      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-    ].filter(Boolean).join(" "),
-    contentToUse: props.symbol?.content
-  });
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [builderContext2, props2, state2] = useLexicalScope();
-    fetchContent(props2, state2, builderContext2);
-  }, "Symbol_component_useVisibleTask_oMPs8W5ZhwE", [
-    builderContext$1,
-    props,
-    state
-  ]));
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
-    const [builderContext2, props2, state2] = useLexicalScope();
-    track2(() => props2.symbol);
-    fetchContent(props2, state2, builderContext2);
-  }, "Symbol_component_useTask_NIAWAC1bMBo", [
-    builderContext$1,
-    props,
-    state
-  ]));
-  return /* @__PURE__ */ _jsxS("div", {
-    ...props.attributes,
-    children: /* @__PURE__ */ _jsxC(RenderContent, {
-      get apiVersion() {
-        return builderContext$1.apiVersion;
-      },
-      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
-        };
-      },
-      get model() {
-        return props.symbol?.model;
-      },
-      get content() {
-        return state.contentToUse;
-      },
-      [_IMMUTABLE]: {
-        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")
-  }, {
-    class: _fnSignal((p0) => p0.className, [
-      state
-    ], "p0.className")
-  }, 0, "Wt_1");
-}, "Symbol_component_WVvggdkUPdk"));
-const componentInfo$4 = {
-  name: "Text",
-  static: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-  inputs: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
-  ],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
-};
-const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxQ("span", {
-    style: {
-      outline: "none"
+const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("span", {
+    style: {
+      outline: "none"
     }
   }, {
     class: "builder-text",
@@ -2223,7 +1838,8 @@ const componentInfo$2 = {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${"ae0e60e78201a3f2b0de4b"}`).then((res) => res.json()).then((data) => {
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
             if (options.get("url") === url) {
               if (data.html)
                 options.set("content", data.html);
@@ -2424,52 +2040,383 @@ const componentInfo = {
     }
   ]
 };
-const getDefaultRegisteredComponents = () => [
-  {
-    component: Button,
-    ...componentInfo$a
-  },
-  {
-    component: Columns,
-    ...componentInfo$9
-  },
-  {
-    component: CustomCode,
-    ...componentInfo
-  },
-  {
-    component: Embed,
-    ...componentInfo$2
-  },
-  {
-    component: FragmentComponent,
-    ...componentInfo$8
-  },
-  {
-    component: Image,
-    ...componentInfo$7
-  },
-  {
-    component: ImgComponent,
-    ...componentInfo$1
-  },
-  {
-    component: SectionComponent,
-    ...componentInfo$6
-  },
-  {
-    component: Symbol$1,
-    ...componentInfo$5
-  },
-  {
-    component: Text,
-    ...componentInfo$4
-  },
-  {
-    component: Video,
-    ...componentInfo$3
+const getDefaultRegisteredComponents = () => [
+  {
+    component: Button,
+    ...componentInfo$a
+  },
+  {
+    component: Columns,
+    ...componentInfo$9
+  },
+  {
+    component: CustomCode,
+    ...componentInfo
+  },
+  {
+    component: Embed,
+    ...componentInfo$2
+  },
+  {
+    component: FragmentComponent,
+    ...componentInfo$8
+  },
+  {
+    component: Image,
+    ...componentInfo$7
+  },
+  {
+    component: ImgComponent,
+    ...componentInfo$1
+  },
+  {
+    component: SectionComponent,
+    ...componentInfo$6
+  },
+  {
+    component: Symbol$1,
+    ...componentInfo$5
+  },
+  {
+    component: Text,
+    ...componentInfo$4
+  },
+  {
+    component: Video,
+    ...componentInfo$3
+  }
+];
+const MSG_PREFIX = "[Builder.io]: ";
+const logger = {
+  log: (...message) => console.log(MSG_PREFIX, ...message),
+  error: (...message) => console.error(MSG_PREFIX, ...message),
+  warn: (...message) => console.warn(MSG_PREFIX, ...message),
+  debug: (...message) => console.debug(MSG_PREFIX, ...message)
+};
+const getTopLevelDomain = (host) => {
+  if (host === "localhost" || host === "127.0.0.1")
+    return host;
+  const parts = host.split(".");
+  if (parts.length > 2)
+    return parts.slice(1).join(".");
+  return host;
+};
+const getCookieSync = ({ name, canTrack }) => {
+  try {
+    if (!canTrack)
+      return void 0;
+    return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
+  } catch (err) {
+    logger.warn("[COOKIE] GET error: ", err?.message || err);
+    return void 0;
+  }
+};
+const getCookie = async (args) => getCookieSync(args);
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).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 = async ({ name, value, expires, canTrack }) => {
+  try {
+    if (!canTrack)
+      return;
+    const cookie = createCookieString({
+      name,
+      value,
+      expires
+    });
+    document.cookie = cookie;
+  } catch (err) {
+    logger.warn("[COOKIE] SET error: ", err?.message || err);
+  }
+};
+const BUILDER_STORE_PREFIX = "builder.tests";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId }) => getCookie({
+  name: getContentTestKey(contentId),
+  canTrack: true
+});
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({
+  name: getContentTestKey(contentId),
+  canTrack: true
+});
+const setContentVariationCookie = ({ contentId, value }) => setCookie({
+  name: getContentTestKey(contentId),
+  value,
+  canTrack: true
+});
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+  let n = 0;
+  const random = Math.random();
+  for (const id2 in variations) {
+    const testRatio = variations[id2]?.testRatio;
+    n += testRatio;
+    if (random < n)
+      return id2;
+  }
+  return id;
+};
+const getAndSetVariantId = (args) => {
+  const randomVariationId = getRandomVariationId(args);
+  setContentVariationCookie({
+    contentId: args.id,
+    value: randomVariationId
+  }).catch((err) => {
+    logger.error("could not store A/B test variation: ", err);
+  });
+  return randomVariationId;
+};
+const getTestFields = ({ item, testGroupId }) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue)
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  else
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+};
+const handleABTestingSync = ({ item, canTrack }) => {
+  if (!canTrack)
+    return item;
+  if (!item)
+    return void 0;
+  if (!checkIsBuilderContentWithVariations(item))
+    return item;
+  const testGroupId = getContentVariationCookieSync({
+    contentId: item.id
+  }) || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({
+    item,
+    testGroupId
+  });
+  return {
+    ...item,
+    ...variationValue
+  };
+};
+const handleABTesting = async ({ item, canTrack }) => {
+  if (!canTrack)
+    return item;
+  if (!checkIsBuilderContentWithVariations(item))
+    return item;
+  const cookieValue = await getContentVariationCookie({
+    contentId: item.id
+  });
+  const testGroupId = cookieValue || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({
+    item,
+    testGroupId
+  });
+  return {
+    ...item,
+    ...variationValue
+  };
+};
+const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+function getGlobalThis() {
+  if (typeof globalThis !== "undefined")
+    return globalThis;
+  if (typeof window !== "undefined")
+    return window;
+  if (typeof global !== "undefined")
+    return global;
+  if (typeof self !== "undefined")
+    return self;
+  return globalThis;
+}
+function getFetch() {
+  const globalFetch = getGlobalThis().fetch;
+  if (typeof globalFetch === "undefined") {
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+    throw new Error("Builder SDK could not find a global `fetch` function");
+  }
+  return globalFetch;
+}
+const fetch$1 = getFetch();
+function flatten(object, path = null, separator = ".") {
+  return Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    const newPath = [
+      path,
+      key
+    ].filter(Boolean).join(separator);
+    const isObject = [
+      typeof value === "object",
+      value !== null,
+      !(Array.isArray(value) && value.length === 0)
+    ].every(Boolean);
+    return isObject ? {
+      ...acc,
+      ...flatten(value, newPath, separator)
+    } : {
+      ...acc,
+      [newPath]: value
+    };
+  }, {});
+}
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
+const convertSearchParamsToQueryObject = (searchParams) => {
+  const options = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+const getBuilderSearchParams = (_options) => {
+  if (!_options)
+    return {};
+  const options = normalizeSearchParams(_options);
+  const newOptions = {};
+  Object.keys(options).forEach((key) => {
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
+      newOptions[trimmedKey] = options[key];
+    }
+  });
+  return newOptions;
+};
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser())
+    return {};
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(searchParams);
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+const DEFAULT_API_VERSION = "v3";
+const generateContentUrl = (options) => {
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION } = options;
+  if (!apiKey)
+    throw new Error("Missing API key");
+  if (![
+    "v2",
+    "v3"
+  ].includes(apiVersion))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}${enrich ? `&enrich=${enrich}` : ""}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened)
+    url.searchParams.set(key, String(flattened[key]));
+  if (userAttributes)
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  if (query) {
+    const flattened2 = flatten({
+      query
+    });
+    for (const key in flattened2)
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
+  }
+  return url;
+};
+const checkContentHasResults = (content) => "results" in content;
+async function getContent(options) {
+  const allContent = await getAllContent({
+    ...options,
+    limit: 1
+  });
+  if (allContent && checkContentHasResults(allContent))
+    return allContent.results[0] || null;
+  return null;
+}
+const fetchContent$1 = async (options) => {
+  const url = generateContentUrl(options);
+  const res = await fetch$1(url.href);
+  const content = await res.json();
+  return content;
+};
+const processContentResult = async (options, content) => {
+  const canTrack = getDefaultCanTrack(options.canTrack);
+  if (!canTrack)
+    return content;
+  if (!(isBrowser() || TARGET === "reactNative"))
+    return content;
+  try {
+    const newResults = [];
+    for (const item of content.results)
+      newResults.push(await handleABTesting({
+        item,
+        canTrack
+      }));
+    content.results = newResults;
+  } catch (e) {
+    logger.error("Could not process A/B tests. ", e);
+  }
+  return content;
+};
+async function getAllContent(options) {
+  try {
+    const url = generateContentUrl(options);
+    const content = await fetchContent$1(options);
+    if (!checkContentHasResults(content)) {
+      logger.error("Error fetching data. ", {
+        url,
+        content,
+        options
+      });
+      return content;
+    }
+    return processContentResult(options, content);
+  } catch (error) {
+    logger.error("Error fetching data. ", error);
+    return null;
   }
-];
+}
 function isPreviewing() {
   if (!isBrowser())
     return false;
@@ -2478,14 +2425,6 @@ function isPreviewing() {
   return Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
 const components = [];
-function registerComponent(component, info) {
-  components.push({
-    component,
-    ...info
-  });
-  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
-  return component;
-}
 const createRegisterComponentMessage = ({ component: _, ...info }) => ({
   type: "builder.registerComponent",
   data: prepareComponentInfoToSend(info)
@@ -2507,11 +2446,12 @@ 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: "builderSessionId",
+    name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(sessionId))
@@ -2527,7 +2467,7 @@ const getSessionId = async ({ canTrack }) => {
 };
 const createSessionId = () => uuid();
 const setSessionId = ({ id, canTrack }) => setCookie({
-  name: "builderSessionId",
+  name: SESSION_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2550,11 +2490,12 @@ 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: "builderVisitorId",
+    key: VISITOR_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(visitorId))
@@ -2570,7 +2511,7 @@ const getVisitorId = ({ canTrack }) => {
 };
 const createVisitorId = () => uuid();
 const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
-  key: "builderVisitorId",
+  key: VISITOR_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2728,6 +2669,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
+const SDK_VERSION = "0.4.0";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -2795,6 +2737,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true
@@ -2854,6 +2797,128 @@ const setupBrowserForEditing = (options = {}) => {
     });
   }
 };
+const getVariants = (content) => Object.values(content?.variations || {});
+const checkShouldRunVariants = ({ canTrack, content }) => {
+  const hasVariants = getVariants(content).length > 0;
+  if (!hasVariants)
+    return false;
+  if (!canTrack)
+    return false;
+  if (isBrowser())
+    return false;
+  return true;
+};
+function bldrAbTest(contentId, variants, isHydrationTarget2) {
+  function getAndSetVariantId2() {
+    function setCookie2(name, value, days) {
+      let expires = "";
+      if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 864e5);
+        expires = "; expires=" + date.toUTCString();
+      }
+      document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
+    }
+    function getCookie2(name) {
+      const nameEQ = name + "=";
+      const ca = document.cookie.split(";");
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === " ")
+          c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0)
+          return c.substring(nameEQ.length, c.length);
+      }
+      return null;
+    }
+    const cookieName = `builder.tests.${contentId}`;
+    const variantInCookie = getCookie2(cookieName);
+    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+    if (variantInCookie && availableIDs.includes(variantInCookie))
+      return variantInCookie;
+    let n = 0;
+    const random = Math.random();
+    for (let i = 0; i < variants.length; i++) {
+      const variant = variants[i];
+      const testRatio = variant.testRatio;
+      n += testRatio;
+      if (random < n) {
+        setCookie2(cookieName, variant.id);
+        return variant.id;
+      }
+    }
+    setCookie2(cookieName, contentId);
+    return contentId;
+  }
+  const winningVariantId = getAndSetVariantId2();
+  const styleEl = document.getElementById(`variants-styles-${contentId}`);
+  if (isHydrationTarget2) {
+    styleEl.remove();
+    const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+    thisScriptEl?.remove();
+  } else {
+    const newStyleStr = variants.concat({
+      id: contentId
+    }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+      return `.variant-${value.id} {  display: none; }
+        `;
+    }).join("");
+    styleEl.innerHTML = newStyleStr;
+  }
+}
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  if (!navigator.cookieEnabled)
+    return;
+  function getCookie2(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(";");
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === " ")
+        c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0)
+        return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const cookieName = `builder.tests.${defaultContentId}`;
+  const variantId = getCookie2(cookieName);
+  const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+  const variantIsDefaultContent = variantContentId === defaultContentId;
+  if (variantId === variantContentId) {
+    if (variantIsDefaultContent)
+      return;
+    parentDiv?.removeAttribute("hidden");
+    parentDiv?.removeAttribute("aria-hidden");
+  } else {
+    if (variantIsDefaultContent) {
+      if (isHydrationTarget2)
+        parentDiv?.remove();
+      else {
+        parentDiv?.setAttribute("hidden", "true");
+        parentDiv?.setAttribute("aria-hidden", "true");
+      }
+    }
+    return;
+  }
+  return;
+}
+const isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const AB_TEST_FN_NAME = "bldrAbTest";
+const CONTENT_FN_NAME = "bldrCntntScrpt";
+const getVariantsScriptString = (variants, contentId) => {
+  const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
+  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
+  return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  `;
+};
+const getRenderContentScriptString = ({ parentContentId, contentId }) => {
+  return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
 const getCssFromFont = (font) => {
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
   const name = family.split(",")[0];
@@ -2919,7 +2984,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`
+`.trim()
   });
   return /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
     get styles() {
@@ -2984,8 +3049,8 @@ const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakp
     }
   };
 };
-const setContextState = function setContextState2(props, state, elementRef, newState) {
-  state.contentState = newState;
+const contentSetState = function contentSetState2(props, state, elementRef, newRootState) {
+  state.contentState = newRootState;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
@@ -3019,7 +3084,9 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
     evaluate({
       code: jsCode,
       context: props.context || {},
-      state: state.contentState
+      localState: void 0,
+      rootState: state.contentState,
+      rootSetState: contentSetState.bind(null, props, state, elementRef)
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
@@ -3043,7 +3110,9 @@ const evalExpression = function evalExpression2(props, state, elementRef, expres
   return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
     code: group,
     context: props.context || {},
-    state: state.contentState
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: contentSetState.bind(null, props, state, elementRef)
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
@@ -3052,7 +3121,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
       ...state.contentState,
       [key]: json
     };
-    setContextState(props, state, elementRef, newState);
+    contentSetState(props, state, elementRef, newState);
   }).catch((err) => {
     console.error("error fetching dynamic data", url, err);
   });
@@ -3088,9 +3157,12 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       ...getDefaultRegisteredComponents(),
       ...components,
       ...props.customComponents || []
-    ].reduce((acc, curr) => ({
+    ].reduce((acc, { component, ...curr }) => ({
       ...acc,
-      [curr.name]: curr
+      [curr.name]: {
+        component,
+        ...curr
+      }
     }), {}),
     canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
     clicked: false,
@@ -3102,6 +3174,10 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     forceReRenderCount: 0,
     httpReqsData: {},
     overrideContent: null,
+    scriptStr: getRenderContentScriptString({
+      contentId: props.content?.id,
+      parentContentId: props.parentContentId
+    }),
     update: 0,
     useContent: getContentInitialValue({
       content: props.content,
@@ -3110,9 +3186,11 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   }, {
     deep: true
   });
-  useContextProvider(builderContext, useStore({
+  useContextProvider(BuilderContext, useStore({
     content: state.useContent,
-    state: state.contentState,
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: void 0,
     context: props.context || {},
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
@@ -3133,6 +3211,9 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
           } : {},
           ...props2.includeRefs ? {
             includeRefs: props2.includeRefs
+          } : {},
+          ...props2.enrich ? {
+            enrich: props2.enrich
           } : {}
         });
         Object.values(state2.allRegisteredComponents).forEach((registeredComponent) => {
@@ -3168,7 +3249,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
               mergeNewContent(props2, state2, elementRef2, content);
           });
       }
-      evaluateJsCode(props2, state2);
+      evaluateJsCode(props2, state2, elementRef2);
       runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
@@ -3191,7 +3272,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
-    evaluateJsCode(props2, state2);
+    evaluateJsCode(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
@@ -3216,15 +3297,52 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     state
   ]));
   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"),
+    children: state.useContent ? /* @__PURE__ */ _jsxS("div", {
+      ref: elementRef,
+      ...{},
+      ...props.hideContent ? {
+        hidden: true,
+        "aria-hidden": true
+      } : {},
+      children: [
+        props.isSsrAbTest ? /* @__PURE__ */ _jsxQ("script", null, {
+          dangerouslySetInnerHTML: _fnSignal((p0) => p0.scriptStr, [
+            state
+          ], "p0.scriptStr")
+        }, null, 3, "03_0") : null,
+        /* @__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_1"),
+        /* @__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)
+      ],
       onClick$: /* @__PURE__ */ inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
         return onClick(props2, state2, elementRef2, event);
@@ -3233,42 +3351,285 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
         props,
         state
       ])
-    }, [
-      /* @__PURE__ */ _jsxC(RenderContentStyles, {
-        get contentId() {
-          return state.useContent?.id;
+    }, {
+      "builder-content-id": _fnSignal((p0) => p0.useContent?.id, [
+        state
+      ], "p0.useContent?.id"),
+      "builder-model": _fnSignal((p0) => p0.model, [
+        props
+      ], "p0.model"),
+      class: _fnSignal((p0) => p0.classNameProp, [
+        props
+      ], "p0.classNameProp")
+    }, 0, "03_2") : null
+  }, 1, "03_3");
+}, "RenderContent_component_hEAI0ahViXM"));
+const fetchContent = function fetchContent2(props, state, builderContext) {
+  if (!state.contentToUse && props.symbol?.model && builderContext?.apiKey)
+    getContent({
+      model: props.symbol.model,
+      apiKey: builderContext.apiKey,
+      apiVersion: builderContext.apiVersion,
+      query: {
+        id: props.symbol.entry
+      }
+    }).then((response) => {
+      if (response)
+        state.contentToUse = response;
+    }).catch((err) => {
+      logger.error("Could not fetch symbol content: ", err);
+    });
+};
+const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const builderContext = useContext(BuilderContext);
+  const state = useStore({
+    className: [
+      ...[
+        props.attributes.class
+      ],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : void 0,
+      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" "),
+    contentToUse: props.symbol?.content
+  });
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useVisibleTask_oMPs8W5ZhwE", [
+    builderContext,
+    props,
+    state
+  ]));
+  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    track2(() => props2.symbol);
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useTask_NIAWAC1bMBo", [
+    builderContext,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ _jsxS("div", {
+    ...props.attributes,
+    children: /* @__PURE__ */ _jsxC(RenderContent, {
+      get apiVersion() {
+        return builderContext.apiVersion;
+      },
+      get apiKey() {
+        return builderContext.apiKey;
+      },
+      get context() {
+        return builderContext.context;
+      },
+      get customComponents() {
+        return Object.values(builderContext.registeredComponents);
+      },
+      get data() {
+        return {
+          ...props.symbol?.data,
+          ...builderContext.localState,
+          ...state.contentToUse?.data?.state
+        };
+      },
+      get model() {
+        return props.symbol?.model;
+      },
+      get content() {
+        return state.contentToUse;
+      },
+      [_IMMUTABLE]: {
+        apiVersion: _fnSignal((p0) => p0.apiVersion, [
+          builderContext
+        ], "p0.apiVersion"),
+        apiKey: _fnSignal((p0) => p0.apiKey, [
+          builderContext
+        ], "p0.apiKey"),
+        context: _fnSignal((p0) => p0.context, [
+          builderContext
+        ], "p0.context"),
+        customComponents: _fnSignal((p0) => Object.values(p0.registeredComponents), [
+          builderContext
+        ], "Object.values(p0.registeredComponents)"),
+        data: _fnSignal((p0, p1, p2) => ({
+          ...p1.symbol?.data,
+          ...p0.localState,
+          ...p2.contentToUse?.data?.state
+        }), [
+          builderContext,
+          props,
+          state
+        ], "{...p1.symbol?.data,...p0.localState,...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")
+  }, {
+    class: _fnSignal((p0) => p0.className, [
+      state
+    ], "p0.className")
+  }, 0, "Wt_1");
+}, "Symbol_component_WVvggdkUPdk"));
+const RenderContentVariants = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  const state = useStore({
+    contentToRender: checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content
+    }) ? props.content : handleABTestingSync({
+      item: props.content,
+      canTrack: getDefaultCanTrack(props.canTrack)
+    }),
+    hideVariantsStyleString: getVariants(props.content).map((value) => `.variant-${value.id} { display: none; } `).join(""),
+    shouldRenderVariants: checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content
+    }),
+    variantScriptStr: getVariantsScriptString(getVariants(props.content).map((value) => ({
+      id: value.id,
+      testRatio: value.testRatio
+    })), props.content?.id || "")
+  });
+  return /* @__PURE__ */ _jsxC(Fragment$1, {
+    children: [
+      state.shouldRenderVariants ? /* @__PURE__ */ _jsxC(Fragment, {
+        children: [
+          /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
+            get id() {
+              return `variants-styles-${props.content?.id}`;
+            },
+            get styles() {
+              return state.hideVariantsStyleString;
+            },
+            [_IMMUTABLE]: {
+              id: _fnSignal((p0) => `variants-styles-${p0.content?.id}`, [
+                props
+              ], "`variants-styles-${p0.content?.id}`"),
+              styles: _fnSignal((p0) => p0.hideVariantsStyleString, [
+                state
+              ], "p0.hideVariantsStyleString")
+            }
+          }, 3, "Bz_0"),
+          /* @__PURE__ */ _jsxQ("script", null, {
+            id: _fnSignal((p0) => `variants-script-${p0.content?.id}`, [
+              props
+            ], "`variants-script-${p0.content?.id}`"),
+            dangerouslySetInnerHTML: _fnSignal((p0) => p0.variantScriptStr, [
+              state
+            ], "p0.variantScriptStr")
+          }, null, 3, null),
+          (getVariants(props.content) || []).map(function(variant) {
+            return /* @__PURE__ */ _jsxC(RenderContent, {
+              content: variant,
+              get apiKey() {
+                return props.apiKey;
+              },
+              get apiVersion() {
+                return props.apiVersion;
+              },
+              get canTrack() {
+                return props.canTrack;
+              },
+              get customComponents() {
+                return props.customComponents;
+              },
+              hideContent: true,
+              get parentContentId() {
+                return props.content?.id;
+              },
+              get isSsrAbTest() {
+                return state.shouldRenderVariants;
+              },
+              [_IMMUTABLE]: {
+                apiKey: _fnSignal((p0) => p0.apiKey, [
+                  props
+                ], "p0.apiKey"),
+                apiVersion: _fnSignal((p0) => p0.apiVersion, [
+                  props
+                ], "p0.apiVersion"),
+                canTrack: _fnSignal((p0) => p0.canTrack, [
+                  props
+                ], "p0.canTrack"),
+                customComponents: _fnSignal((p0) => p0.customComponents, [
+                  props
+                ], "p0.customComponents"),
+                hideContent: _IMMUTABLE,
+                parentContentId: _fnSignal((p0) => p0.content?.id, [
+                  props
+                ], "p0.content?.id"),
+                isSsrAbTest: _fnSignal((p0) => p0.shouldRenderVariants, [
+                  state
+                ], "p0.shouldRenderVariants")
+              }
+            }, 3, variant.id);
+          })
+        ]
+      }, 1, "Bz_1") : null,
+      /* @__PURE__ */ _jsxC(RenderContent, {
+        get model() {
+          return props.model;
         },
-        get cssCode() {
-          return state.useContent?.data?.cssCode;
+        get content() {
+          return state.contentToRender;
         },
-        get customFonts() {
-          return state.useContent?.data?.customFonts;
+        get apiKey() {
+          return props.apiKey;
         },
-        [_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;
+        get apiVersion() {
+          return props.apiVersion;
+        },
+        get canTrack() {
+          return props.canTrack;
+        },
+        get customComponents() {
+          return props.customComponents;
+        },
+        get classNameProp() {
+          return `variant-${props.content?.id}`;
+        },
+        get parentContentId() {
+          return props.content?.id;
+        },
+        get isSsrAbTest() {
+          return state.shouldRenderVariants;
         },
         [_IMMUTABLE]: {
-          blocks: _fnSignal((p0) => p0.useContent?.data?.blocks, [
+          model: _fnSignal((p0) => p0.model, [
+            props
+          ], "p0.model"),
+          content: _fnSignal((p0) => p0.contentToRender, [
+            state
+          ], "p0.contentToRender"),
+          apiKey: _fnSignal((p0) => p0.apiKey, [
+            props
+          ], "p0.apiKey"),
+          apiVersion: _fnSignal((p0) => p0.apiVersion, [
+            props
+          ], "p0.apiVersion"),
+          canTrack: _fnSignal((p0) => p0.canTrack, [
+            props
+          ], "p0.canTrack"),
+          customComponents: _fnSignal((p0) => p0.customComponents, [
+            props
+          ], "p0.customComponents"),
+          classNameProp: _fnSignal((p0) => `variant-${p0.content?.id}`, [
+            props
+          ], "`variant-${p0.content?.id}`"),
+          parentContentId: _fnSignal((p0) => p0.content?.id, [
+            props
+          ], "p0.content?.id"),
+          isSsrAbTest: _fnSignal((p0) => p0.shouldRenderVariants, [
             state
-          ], "p0.useContent?.data?.blocks")
+          ], "p0.shouldRenderVariants")
         }
-      }, 3, state.forceReRenderCount)
-    ], 1, "03_1") : null
-  }, 1, "03_2");
-}, "RenderContent_component_hEAI0ahViXM"));
+      }, 3, "Bz_2")
+    ]
+  }, 1, "Bz_3");
+}, "RenderContentVariants_component_OMvvre8Ofjw"));
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {
@@ -3286,23 +3647,18 @@ export {
   FragmentComponent as Fragment,
   Image,
   RenderBlocks,
-  RenderContent,
+  RenderContentVariants as RenderContent,
   SectionComponent as Section,
   Symbol$1 as Symbol,
   Text,
   Video,
-  components,
-  convertSearchParamsToQueryObject,
   createRegisterComponentMessage,
   getAllContent,
-  getBuilderSearchParams,
-  getBuilderSearchParamsFromWindow,
   getContent,
   isEditing,
   isPreviewing,
-  normalizeSearchParams,
+  processContentResult,
   register,
-  registerComponent,
   setEditorSettings,
   track
 };