@builder.io/sdk-qwik 0.3.1 → 0.4.1

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";
@@ -195,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();
@@ -463,7 +454,7 @@ const RenderComponent = (props) => {
   }, 1, "R9_1");
 };
 const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  useContextProvider(builderContext, useStore({
+  useContextProvider(BuilderContext, useStore({
     content: props.repeatContext.content,
     localState: props.repeatContext.localState,
     rootState: props.repeatContext.rootState,
@@ -494,7 +485,7 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
 const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const state = useStore({
-    tag: props.block.tagName || "div"
+    Tag: props.block.tagName || "div"
   });
   const component = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
@@ -618,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) && repeatItem.value ? (repeatItem.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;
@@ -636,7 +627,7 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(state.tag) && !repeatItem.value ? /* @__PURE__ */ _jsxC(state.tag, {
+        !isEmptyHtmlElement(state.Tag) && !repeatItem.value ? /* @__PURE__ */ _jsxC(state.Tag, {
           ...attributes.value,
           ...actions.value,
           children: [
@@ -677,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",
@@ -687,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",
@@ -699,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();
@@ -712,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
     ]),
@@ -720,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
     ])
@@ -741,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
         }
@@ -750,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
         }
@@ -765,54 +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) {
+const columnCssVars = function columnCssVars2(props, state, builderContext, index) {
   const gutter = index === 0 ? 0 : state.gutterSize;
-  const width = getColumnCssWidth(props, state, builderContext2, index);
+  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, {
+    "--column-width-mobile": getMobileStyle(props, state, builderContext, {
       stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
+    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext, {
       stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     }),
-    "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
+    "--column-width-tablet": getTabletStyle(props, state, builderContext, {
       stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
+    "--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",
@@ -829,7 +820,7 @@ const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       })
     };
   }, "Columns_component_columnsCssVars_useComputed_adFEq2RWT9s", [
-    builderContext$1,
+    builderContext,
     props,
     state
   ]));
@@ -861,7 +852,7 @@ const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         },
       `;
   }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
-    builderContext$1,
+    builderContext,
     props,
     state
   ]));
@@ -885,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, {
@@ -1096,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",
@@ -1578,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,
@@ -1635,435 +1626,30 @@ const componentInfo$5 = {
     }
   ]
 };
-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)
-};
-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 BUILDER_STORE_PREFIX = "builderio.variations";
-const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${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 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, 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.localState,
-          ...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.localState,
-          ...p2.contentToUse?.data?.state
-        }), [
-          builderContext$1,
-          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 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",
@@ -2454,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;
@@ -2508,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)
@@ -2760,7 +2669,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.3.1";
+const SDK_VERSION = "0.4.1";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -2888,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];
@@ -2953,7 +2984,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`
+`.trim()
   });
   return /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
     get styles() {
@@ -3126,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,
@@ -3140,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,
@@ -3148,7 +3186,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   }, {
     deep: true
   });
-  useContextProvider(builderContext, useStore({
+  useContextProvider(BuilderContext, useStore({
     content: state.useContent,
     localState: void 0,
     rootState: state.contentState,
@@ -3173,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) => {
@@ -3256,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);
@@ -3273,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()) {
@@ -3326,23 +3647,19 @@ 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
 };