@builder.io/sdk-solid 4.0.8 → 4.0.9

package/lib/browser/dev.jsx

@@ -1590,7 +1590,7 @@ function BlocksWrapper(props) {
   createEffect5(on5(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return <>
     <Dynamic4
-      class={className() + " dynamic-023c60f2"}
+      class={className() + " dynamic-450facf4"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -1602,7 +1602,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-023c60f2 {
+    <style>{`.dynamic-450facf4 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1620,19 +1620,22 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
+    BlocksWrapperProps={props.BlocksWrapperProps || props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
     classNameProp={props.className}
     BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
-  ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
-    const index = _index();
-    return <Block_default
-      key={block.id}
-      block={block}
-      linkComponent={props.linkComponent}
-      context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
-    />;
-  }}</For3></Show6></Blocks_wrapper_default></>;
+  >
+    {props.children}
+    <Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
+      const index = _index();
+      return <Block_default
+        key={block.id}
+        block={block}
+        linkComponent={props.linkComponent}
+        context={props.context || builderContext}
+        registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
+      />;
+    }}</For3></Show6>
+  </Blocks_wrapper_default></>;
 }
 var Blocks_default = Blocks;
 
@@ -1984,6 +1987,166 @@ import { onMount as onMount10, on as on9, createEffect as createEffect9, createM
 // src/components/content-variants/content-variants.tsx
 import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
+// src/blocks/personalization-container/helpers/inlined-fns.ts
+function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+  function isString(val) {
+    return typeof val === "string";
+  }
+  function isNumber(val) {
+    return typeof val === "number";
+  }
+  function objectMatchesQuery(userattr, query2) {
+    const result = (() => {
+      const property = query2.property;
+      const operator = query2.operator;
+      let testValue = query2.value;
+      if (query2 && query2.property === "urlPath" && query2.value && typeof query2.value === "string" && query2.value !== "/" && query2.value.endsWith("/")) {
+        testValue = query2.value.slice(0, -1);
+      }
+      if (!(property && operator)) {
+        return true;
+      }
+      if (Array.isArray(testValue)) {
+        if (operator === "isNot") {
+          return testValue.every((val) => objectMatchesQuery(userattr, {
+            property,
+            operator,
+            value: val
+          }));
+        }
+        return !!testValue.find((val) => objectMatchesQuery(userattr, {
+          property,
+          operator,
+          value: val
+        }));
+      }
+      const value = userattr[property];
+      if (Array.isArray(value)) {
+        return value.includes(testValue);
+      }
+      switch (operator) {
+        case "is":
+          return value === testValue;
+        case "isNot":
+          return value !== testValue;
+        case "contains":
+          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+        case "startsWith":
+          return isString(value) && value.startsWith(String(testValue));
+        case "endsWith":
+          return isString(value) && value.endsWith(String(testValue));
+        case "greaterThan":
+          return isNumber(value) && isNumber(testValue) && value > testValue;
+        case "lessThan":
+          return isNumber(value) && isNumber(testValue) && value < testValue;
+        case "greaterThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value >= testValue;
+        case "lessThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value <= testValue;
+        default:
+          return false;
+      }
+    })();
+    return result;
+  }
+  const item = {
+    query,
+    startDate,
+    endDate
+  };
+  const now = userAttributes.date && new Date(userAttributes.date) || /* @__PURE__ */ new Date();
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+  return item.query.every((filter) => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}
+var PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+var FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+var UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+
+// src/blocks/personalization-container/helpers.ts
+var DEFAULT_INDEX = "default";
+var FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = "filterWithCustomTargeting";
+var BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = "builderIoPersonalization";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "updateVisibilityStylesScript";
+var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte"];
+var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte"];
+function checkShouldRenderVariants(variants, canTrack) {
+  const hasVariants = variants && variants.length > 0;
+  if (TARGET === "reactNative")
+    return false;
+  if (!hasVariants)
+    return false;
+  if (!canTrack)
+    return false;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET))
+    return true;
+  if (isBrowser())
+    return false;
+  return true;
+}
+function getBlocksToRender({
+  variants,
+  previewingIndex,
+  isHydrated,
+  filteredVariants,
+  fallbackBlocks
+}) {
+  const fallback = {
+    blocks: fallbackBlocks ?? [],
+    path: "this.children",
+    index: DEFAULT_INDEX
+  };
+  if (isHydrated && isEditing()) {
+    if (typeof previewingIndex === "number" && previewingIndex < (variants?.length ?? 0)) {
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
+    }
+    return fallback;
+  }
+  if (isBrowser()) {
+    const winningVariant = filteredVariants?.[0];
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
+    }
+  }
+  return fallback;
+}
+var getInitPersonalizationVariantsFnsScriptString = () => {
+  return `
+  window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT}
+  `;
+};
+var isHydrationTarget = TARGET === "react";
+var getPersonalizationScript = (variants, blockId, locale) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ""})`;
+};
+var getUpdateVisibilityStylesScript = (variants, blockId, locale) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ""})`;
+};
+
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
   if (host === "localhost" || host === "127.0.0.1") {
@@ -2930,7 +3093,8 @@ var componentInfo6 = {
   name: "PersonalizationContainer",
   shouldReceiveBuilderProps: {
     builderBlock: true,
-    builderContext: true
+    builderContext: true,
+    builderComponents: true
   },
   noWrap: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",
@@ -2986,199 +3150,6 @@ function isPreviewing(_search) {
   return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
 }
 
-// src/blocks/personalization-container/helpers/inlined-fns.ts
-function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
-  function isString(val) {
-    return typeof val === "string";
-  }
-  function isNumber(val) {
-    return typeof val === "number";
-  }
-  function objectMatchesQuery(userattr, query2) {
-    const result = (() => {
-      const property = query2.property;
-      const operator = query2.operator;
-      let testValue = query2.value;
-      if (query2 && query2.property === "urlPath" && query2.value && typeof query2.value === "string" && query2.value !== "/" && query2.value.endsWith("/")) {
-        testValue = query2.value.slice(0, -1);
-      }
-      if (!(property && operator)) {
-        return true;
-      }
-      if (Array.isArray(testValue)) {
-        if (operator === "isNot") {
-          return testValue.every((val) => objectMatchesQuery(userattr, {
-            property,
-            operator,
-            value: val
-          }));
-        }
-        return !!testValue.find((val) => objectMatchesQuery(userattr, {
-          property,
-          operator,
-          value: val
-        }));
-      }
-      const value = userattr[property];
-      if (Array.isArray(value)) {
-        return value.includes(testValue);
-      }
-      switch (operator) {
-        case "is":
-          return value === testValue;
-        case "isNot":
-          return value !== testValue;
-        case "contains":
-          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
-        case "startsWith":
-          return isString(value) && value.startsWith(String(testValue));
-        case "endsWith":
-          return isString(value) && value.endsWith(String(testValue));
-        case "greaterThan":
-          return isNumber(value) && isNumber(testValue) && value > testValue;
-        case "lessThan":
-          return isNumber(value) && isNumber(testValue) && value < testValue;
-        case "greaterThanOrEqualTo":
-          return isNumber(value) && isNumber(testValue) && value >= testValue;
-        case "lessThanOrEqualTo":
-          return isNumber(value) && isNumber(testValue) && value <= testValue;
-        default:
-          return false;
-      }
-    })();
-    return result;
-  }
-  const item = {
-    query,
-    startDate,
-    endDate
-  };
-  const now = userAttributes.date && new Date(userAttributes.date) || /* @__PURE__ */ new Date();
-  if (item.startDate && new Date(item.startDate) > now) {
-    return false;
-  } else if (item.endDate && new Date(item.endDate) < now) {
-    return false;
-  }
-  if (!item.query || !item.query.length) {
-    return true;
-  }
-  return item.query.every((filter) => {
-    return objectMatchesQuery(userAttributes, filter);
-  });
-}
-var PERSONALIZATION_SCRIPT = `function getPersonalizedVariant(variants, blockId, locale) {
-  if (!navigator.cookieEnabled) {
-    return;
-  }
-  function getCookie(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;
-  }
-  function removeVariants() {
-    variants?.forEach(function (_, index) {
-      document.querySelector('template[data-variant-id="' + blockId + '-' + index + '"]')?.remove();
-    });
-    document.querySelector('script[data-id="variants-script-' + blockId + '"]')?.remove();
-    document.querySelector('style[data-id="variants-styles-' + blockId + '"]')?.remove();
-  }
-  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
-  if (locale) {
-    attributes.locale = locale;
-  }
-  const winningVariantIndex = variants?.findIndex(function (variant) {
-    return filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
-  });
-  const isDebug = location.href.includes('builder.debug=true');
-  if (isDebug) {
-    console.debug('PersonalizationContainer', {
-      attributes,
-      variants,
-      winningVariantIndex
-    });
-  }
-  if (winningVariantIndex !== -1) {
-    const winningVariant = document.querySelector('template[data-variant-id="' + blockId + '-' + winningVariantIndex + '"]');
-    if (winningVariant) {
-      const parentNode = winningVariant.parentNode;
-      if (parentNode) {
-        const newParent = parentNode.cloneNode(false);
-        newParent.appendChild(winningVariant.content.firstChild);
-        newParent.appendChild(winningVariant.content.lastChild);
-        parentNode.parentNode?.replaceChild(newParent, parentNode);
-      }
-      if (isDebug) {
-        console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);
-      }
-    }
-  } else if (variants && variants.length > 0) {
-    removeVariants();
-  }
-}`;
-var FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
-
-// src/blocks/personalization-container/helpers.ts
-function checkShouldRenderVariants(variants, canTrack) {
-  const hasVariants = variants && variants.length > 0;
-  if (TARGET === "reactNative")
-    return false;
-  if (!hasVariants)
-    return false;
-  if (!canTrack)
-    return false;
-  if (TARGET === "vue" || TARGET === "svelte")
-    return true;
-  if (isBrowser())
-    return false;
-  return true;
-}
-function getBlocksToRender({
-  variants,
-  previewingIndex,
-  isHydrated,
-  filteredVariants,
-  fallbackBlocks
-}) {
-  const fallback = {
-    blocks: fallbackBlocks ?? [],
-    path: "this.children"
-  };
-  if (isHydrated && isEditing()) {
-    if (typeof previewingIndex === "number" && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants[previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
-    }
-    return fallback;
-  }
-  if (isBrowser()) {
-    const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
-    }
-  }
-  return fallback;
-}
-var getPersonalizationScript = (variants, blockId, locale) => {
-  return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ""})
-  })();
-  `;
-};
-
 // src/blocks/personalization-container/personalization-container.tsx
 function PersonalizationContainer(props) {
   const [userAttributes, setUserAttributes] = createSignal10(
@@ -3191,6 +3162,13 @@ function PersonalizationContainer(props) {
       props.builderContext?.rootState?.locale
     )
   );
+  const [updateVisibilityStylesScript, setUpdateVisibilityStylesScript] = createSignal10(
+    getUpdateVisibilityStylesScript(
+      props.variants,
+      props.builderBlock?.id || "none",
+      props.builderContext?.rootState?.locale
+    )
+  );
   const [unsubscribers, setUnsubscribers] = createSignal10([]);
   const [shouldRenderVariants, setShouldRenderVariants] = createSignal10(
     checkShouldRenderVariants(
@@ -3198,7 +3176,14 @@ function PersonalizationContainer(props) {
       getDefaultCanTrack(props.builderContext?.canTrack)
     )
   );
-  const [isHydrated, setIsHydrated] = createSignal10(false);
+  const [shouldResetVariants, setShouldResetVariants] = createSignal10(false);
+  const attrs = createMemo10(() => {
+    return {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-personalization-container ${props.attributes[getClassPropName()] || ""}`
+    };
+  });
   const filteredVariants = createMemo10(() => {
     return (props.variants || []).filter((variant) => {
       return filterWithCustomTargeting(
@@ -3218,22 +3203,22 @@ function PersonalizationContainer(props) {
     return getBlocksToRender({
       variants: props.variants,
       fallbackBlocks: props.builderBlock?.children,
-      isHydrated: isHydrated(),
+      isHydrated: shouldResetVariants(),
       filteredVariants: filteredVariants(),
       previewingIndex: props.previewingIndex
     });
   });
   const hideVariantsStyleString = createMemo10(() => {
     return (props.variants || []).map(
-      (_, index) => `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+      (_, index) => `div[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none !important; } `
     ).join("");
   });
   let rootRef;
   onMount5(() => {
-    setIsHydrated(true);
+    setShouldResetVariants(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
-      (attrs) => {
-        setUserAttributes(attrs);
+      (attrs2) => {
+        setUserAttributes(attrs2);
       }
     );
     if (!(isEditing() || isPreviewing())) {
@@ -3242,7 +3227,7 @@ function PersonalizationContainer(props) {
         rootRef.dispatchEvent(
           new CustomEvent("builder.variantLoaded", {
             detail: {
-              variant: variant || "default",
+              variant: variant || DEFAULT_INDEX,
               content: props.builderContext?.content
             },
             bubbles: true
@@ -3254,7 +3239,7 @@ function PersonalizationContainer(props) {
               rootRef.dispatchEvent(
                 new CustomEvent("builder.variantDisplayed", {
                   detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: props.builderContext?.content
                   },
                   bubbles: true
@@ -3268,39 +3253,72 @@ function PersonalizationContainer(props) {
     }
     unsubscribers().push(unsub);
   });
-  return <><div
-    class={`builder-personalization-container ${props.attributes?.className || ""}`}
-    ref={rootRef}
-    {...props.attributes}
-  >
-    <Show10 when={shouldRenderVariants()}>
-      <For6 each={props.variants}>{(variant, _index) => {
-        const index = _index();
-        return <template
-          key={index}
-          data-variant-id={`${props.builderBlock?.id}-${index}`}
-        ><Blocks_default
-          blocks={variant.blocks}
-          parent={props.builderBlock?.id}
-          path={`component.options.variants.${index}.blocks`}
-        /></template>;
-      }}</For6>
-      <Inlined_styles_default
-        nonce={props.builderContext?.nonce || ""}
-        styles={hideVariantsStyleString()}
-        id={`variants-styles-${props.builderBlock?.id}`}
-      />
-      <Inlined_script_default
-        nonce={props.builderContext?.nonce || ""}
-        scriptStr={scriptStr()}
-        id={`variants-script-${props.builderBlock?.id}`}
-      />
-    </Show10>
-    <Blocks_default
+  return <><div ref={rootRef} {...attrs()}>
+    <Show10
+      when={shouldResetVariants() && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    ><Blocks_default
       blocks={blocksToRender().blocks}
       parent={props.builderBlock?.id}
       path={blocksToRender().path}
-    />
+      context={props.builderContext}
+      registeredComponents={props.builderComponents}
+      BlocksWrapperProps={{
+        ...props.builderContext?.BlocksWrapperProps,
+        "data-variant-id": `${props.builderBlock?.id}-${blocksToRender().index}`
+      }}
+    /></Show10>
+    <Show10
+      when={!shouldResetVariants() && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) || !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    >
+      <Show10 when={shouldRenderVariants()}>
+        <Inlined_styles_default
+          nonce={props.builderContext?.nonce || ""}
+          styles={hideVariantsStyleString()}
+          id={`variants-styles-${props.builderBlock?.id}`}
+        />
+        <Inlined_script_default
+          nonce={props.builderContext?.nonce || ""}
+          scriptStr={updateVisibilityStylesScript()}
+          id={`variants-visibility-script-${props.builderBlock?.id}`}
+        />
+        <For6 each={props.variants}>{(variant, _index) => {
+          const index = _index();
+          return <Blocks_default
+            key={`${props.builderBlock?.id}-${index}`}
+            BlocksWrapperProps={{
+              ...props.builderContext?.BlocksWrapperProps,
+              "aria-hidden": true,
+              hidden: true,
+              "data-variant-id": `${props.builderBlock?.id}-${index}`
+            }}
+            blocks={variant.blocks}
+            parent={props.builderBlock?.id}
+            path={`component.options.variants.${index}.blocks`}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+          ><Inlined_script_default
+            nonce={props.builderContext?.nonce || ""}
+            scriptStr={scriptStr()}
+            id={`variants-script-${props.builderBlock?.id}-${index}`}
+          /></Blocks_default>;
+        }}</For6>
+      </Show10>
+      <Blocks_default
+        blocks={blocksToRender().blocks}
+        parent={props.builderBlock?.id}
+        path={blocksToRender().path}
+        context={props.builderContext}
+        registeredComponents={props.builderComponents}
+        BlocksWrapperProps={{
+          ...props.builderContext?.BlocksWrapperProps,
+          "data-variant-id": `${props.builderBlock?.id}-${blocksToRender().index}`
+        }}
+      ><Show10 when={shouldRenderVariants()}><Inlined_script_default
+        nonce={props.builderContext?.nonce || ""}
+        scriptStr={scriptStr()}
+        id={`variants-script-${props.builderBlock?.id}-${DEFAULT_INDEX}`}
+      /></Show10></Blocks_default>
+    </Show10>
   </div></>;
 }
 var personalization_container_default = PersonalizationContainer;
@@ -4823,7 +4841,7 @@ var getDefaultRegisteredComponents = () => [{
 }, {
   component: text_default,
   ...componentInfo11
-}, ...TARGET === "react" ? [{
+}, ...SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
   component: personalization_container_default,
   ...componentInfo6
 }] : [], ...TARGET === "rsc" ? [] : [{
@@ -4860,7 +4878,7 @@ var UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variant
 
 // src/components/content-variants/helpers.ts
 var UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = "builderIoAbTest";
-var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "builderIoRenderContent";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2 = "builderIoRenderContent";
 var getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
   ...variant,
   testVariationId: variant.id,
@@ -4885,20 +4903,20 @@ var checkShouldRenderVariants2 = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isAngularSDK = TARGET === "angular";
-var isHydrationTarget = getIsHydrationTarget(TARGET);
+var isHydrationTarget2 = getIsHydrationTarget(TARGET);
 var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
-  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
 var getUpdateCookieAndStylesScript = (variants, contentId) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget2}, ${isAngularSDK}
   )`;
 var getUpdateVariantVisibilityScript = ({
   contentId,
   variationId
-}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
-    "${variationId}", "${contentId}", ${isHydrationTarget}
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2}(
+    "${variationId}", "${contentId}", ${isHydrationTarget2}
   )`;
 
 // src/components/content/components/enable-editor.tsx
@@ -4918,7 +4936,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.8";
+var SDK_VERSION = "4.0.9";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6284,11 +6302,18 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <><>
-    <Show16 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
-      id="builderio-init-variants-fns"
-      scriptStr={getInitVariantsFnsScriptString()}
-      nonce={props.nonce || ""}
-    /></Show16>
+    <Show16 when={!props.isNestedRender && TARGET !== "reactNative"}>
+      <Inlined_script_default
+        id="builderio-init-variants-fns"
+        scriptStr={getInitVariantsFnsScriptString()}
+        nonce={props.nonce || ""}
+      />
+      <Show16 when={SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}><Inlined_script_default
+        id="builderio-init-personalization-variants-fns"
+        nonce={props.nonce || ""}
+        scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+      /></Show16>
+    </Show16>
     <Show16 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"