@builder.io/sdk-solid 3.0.5 → 3.0.7

package/lib/browser/index.js

@@ -930,8 +930,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -947,15 +952,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1013,9 +1031,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1034,6 +1054,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1047,7 +1072,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -1607,7 +1632,7 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-3c4beb0c {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-3d7ff108 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1620,8 +1645,9 @@ function BlocksWrapper(props) {
     if (!props.path) {
       return void 0;
     }
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props.path.startsWith(pathPrefix) ? props.path : `${pathPrefix}${props.path || ""}`;
+    return props.path.startsWith(thisPrefix) ? props.path.replace(thisPrefix, "") : props.path.startsWith(pathPrefix) ? props.path : `${pathPrefix}${props.path || ""}`;
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1650,7 +1676,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-3c4beb0c";
+      return className() + " dynamic-3d7ff108";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -2343,8 +2369,58 @@ var handleABTesting = async ({
   };
 };
 
+// src/helpers/user-attributes.ts
+var USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
+function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = /* @__PURE__ */ new Set();
+  return {
+    setUserAttributes(newAttrs) {
+      if (!isBrowser()) {
+        return;
+      }
+      const userAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach((callback) => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser()) {
+        return {};
+      }
+      return JSON.parse(getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || "{}");
+    },
+    subscribeOnUserAttributesChange(callback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value) {
+      canTrack = value;
+    }
+  };
+}
+var userAttributesService = createUserAttributesService();
+var setClientUserAttributes = (attributes) => {
+  userAttributesService.setUserAttributes(attributes);
+};
+
 // src/helpers/canTrack.ts
-var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+var getDefaultCanTrack = (canTrack) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+};
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -3074,8 +3150,408 @@ var componentInfo5 = {
   }
 };
 
-// src/blocks/section/component-info.ts
+// src/blocks/personalization-container/component-info.ts
 var componentInfo6 = {
+  name: "PersonalizationContainer",
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true
+  },
+  noWrap: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",
+  canHaveChildren: true,
+  inputs: [{
+    name: "variants",
+    defaultValue: [],
+    behavior: "personalizationVariantList",
+    type: "list",
+    subFields: [{
+      name: "name",
+      type: "text"
+    }, {
+      name: "query",
+      friendlyName: "Targeting rules",
+      type: "BuilderQuery",
+      defaultValue: []
+    }, {
+      name: "startDate",
+      type: "date"
+    }, {
+      name: "endDate",
+      type: "date"
+    }, {
+      name: "blocks",
+      type: "uiBlocks",
+      hideFromUI: true,
+      defaultValue: []
+    }]
+  }]
+};
+var _tmpl$8 = /* @__PURE__ */ template(`<script>`);
+function InlinedScript(props) {
+  return (() => {
+    const _el$ = _tmpl$8();
+    effect((_p$) => {
+      const _v$ = props.scriptStr, _v$2 = props.id, _v$3 = props.nonce || "";
+      _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "nonce", _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$;
+  })();
+}
+var inlined_script_default = InlinedScript;
+
+// src/functions/is-previewing.ts
+function isPreviewing(_search) {
+  const search = _search || (isBrowser() ? window.location.search : void 0);
+  if (!search) {
+    return false;
+  }
+  const normalizedSearch = getSearchString(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
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<template>`);
+function PersonalizationContainer(props) {
+  const [userAttributes, setUserAttributes] = createSignal(userAttributesService.getUserAttributes());
+  const [scriptStr, setScriptStr] = createSignal(getPersonalizationScript(props.variants, props.builderBlock?.id || "none", props.builderContext?.rootState?.locale));
+  const [unsubscribers, setUnsubscribers] = createSignal([]);
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRenderVariants(props.variants, getDefaultCanTrack(props.builderContext?.canTrack)));
+  const [isHydrated, setIsHydrated] = createSignal(false);
+  const filteredVariants = createMemo(() => {
+    return (props.variants || []).filter((variant) => {
+      return filterWithCustomTargeting({
+        ...props.builderContext?.rootState?.locale ? {
+          locale: props.builderContext?.rootState?.locale
+        } : {},
+        ...userAttributes()
+      }, variant.query, variant.startDate, variant.endDate);
+    });
+  });
+  const blocksToRender = createMemo(() => {
+    return getBlocksToRender({
+      variants: props.variants,
+      fallbackBlocks: props.builderBlock?.children,
+      isHydrated: isHydrated(),
+      filteredVariants: filteredVariants(),
+      previewingIndex: props.previewingIndex
+    });
+  });
+  const hideVariantsStyleString = createMemo(() => {
+    return (props.variants || []).map((_, index) => `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `).join("");
+  });
+  let rootRef;
+  onMount(() => {
+    setIsHydrated(true);
+    const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
+      setUserAttributes(attrs);
+    });
+    if (!(isEditing() || isPreviewing())) {
+      const variant = filteredVariants()[0];
+      if (rootRef) {
+        rootRef.dispatchEvent(new CustomEvent("builder.variantLoaded", {
+          detail: {
+            variant: variant || "default",
+            content: props.builderContext?.content
+          },
+          bubbles: true
+        }));
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && rootRef) {
+              rootRef.dispatchEvent(new CustomEvent("builder.variantDisplayed", {
+                detail: {
+                  variant: variant || "default",
+                  content: props.builderContext?.content
+                },
+                bubbles: true
+              }));
+            }
+          });
+        });
+        observer.observe(rootRef);
+      }
+    }
+    unsubscribers().push(unsub);
+  });
+  return (() => {
+    const _el$ = _tmpl$9();
+    const _ref$ = rootRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : rootRef = _el$;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return `builder-personalization-container ${props.attributes?.className || ""}`;
+      }
+    }, () => props.attributes), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return shouldRenderVariants();
+      },
+      get children() {
+        return [createComponent(For, {
+          get each() {
+            return props.variants;
+          },
+          children: (variant, _index) => {
+            const index = _index();
+            return (() => {
+              const _el$2 = _tmpl$25();
+              setAttribute(_el$2, "key", index);
+              insert(_el$2, createComponent(blocks_default, {
+                get blocks() {
+                  return variant.blocks;
+                },
+                get parent() {
+                  return props.builderBlock?.id;
+                },
+                path: `component.options.variants.${index}.blocks`
+              }));
+              effect(() => setAttribute(_el$2, "data-variant-id", `${props.builderBlock?.id}-${index}`));
+              return _el$2;
+            })();
+          }
+        }), createComponent(inlined_styles_default, {
+          get nonce() {
+            return props.builderContext?.nonce || "";
+          },
+          get styles() {
+            return hideVariantsStyleString();
+          },
+          get id() {
+            return `variants-styles-${props.builderBlock?.id}`;
+          }
+        }), createComponent(inlined_script_default, {
+          get nonce() {
+            return props.builderContext?.nonce || "";
+          },
+          get scriptStr() {
+            return scriptStr();
+          },
+          get id() {
+            return `variants-script-${props.builderBlock?.id}`;
+          }
+        })];
+      }
+    }), null);
+    insert(_el$, createComponent(blocks_default, {
+      get blocks() {
+        return blocksToRender().blocks;
+      },
+      get parent() {
+        return props.builderBlock?.id;
+      },
+      get path() {
+        return blocksToRender().path;
+      }
+    }), null);
+    return _el$;
+  })();
+}
+var personalization_container_default = PersonalizationContainer;
+
+// src/blocks/section/component-info.ts
+var componentInfo7 = {
   name: "Core:Section",
   static: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -3117,7 +3593,7 @@ var componentInfo6 = {
 };
 
 // src/blocks/slot/component-info.ts
-var componentInfo7 = {
+var componentInfo8 = {
   name: "Slot",
   isRSC: true,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -3135,10 +3611,10 @@ var componentInfo7 = {
     builderComponents: true
   }
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div>`);
 function Slot(props) {
   return (() => {
-    const _el$ = _tmpl$8();
+    const _el$ = _tmpl$10();
     _el$.style.setProperty("pointer-events", "auto");
     spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
       "builder-slot": props.name
@@ -3166,7 +3642,7 @@ function Slot(props) {
 var slot_default = Slot;
 
 // src/blocks/symbol/component-info.ts
-var componentInfo8 = {
+var componentInfo9 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -3248,7 +3724,7 @@ var defaultElement = {
     }
   }
 };
-var componentInfo9 = {
+var componentInfo10 = {
   name: "Builder: Tabs",
   inputs: [{
     name: "tabs",
@@ -3352,8 +3828,8 @@ var componentInfo9 = {
     builderLinkComponent: true
   }
 };
-var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 function Tabs(props) {
   const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
@@ -3368,7 +3844,7 @@ function Tabs(props) {
     }
   }
   return (() => {
-    const _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$26(), _el$2 = _el$.firstChild;
     _el$2.style.setProperty("display", "flex");
     _el$2.style.setProperty("flex-direction", "row");
     _el$2.style.setProperty("overflow", "auto");
@@ -3420,7 +3896,7 @@ function Tabs(props) {
         return activeTabContent(activeTab());
       },
       get children() {
-        const _el$3 = _tmpl$9();
+        const _el$3 = _tmpl$11();
         insert(_el$3, createComponent(blocks_default, {
           get parent() {
             return props.builderBlock.id;
@@ -3452,7 +3928,7 @@ var tabs_default = Tabs;
 delegateEvents(["click"]);
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   shouldReceiveBuilderProps: {
     builderBlock: TARGET === "reactNative" ? true : false,
     builderContext: true
@@ -3475,10 +3951,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$10();
+    const _el$ = _tmpl$12();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -3487,7 +3963,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/custom-code/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Custom Code",
   static: true,
   requiredPermissions: ["editCode"],
@@ -3510,7 +3986,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -3544,7 +4020,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$13();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -3562,7 +4038,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo12 = {
+var componentInfo13 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -3584,7 +4060,7 @@ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "applicati
 var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
-var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -3621,7 +4097,7 @@ function Embed(props) {
   }
   createEffect(on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$12();
+    const _el$ = _tmpl$14();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -3631,7 +4107,7 @@ function Embed(props) {
 var embed_default = Embed;
 
 // src/blocks/form/form/component-info.ts
-var componentInfo13 = {
+var componentInfo14 = {
   name: "Form:Form",
   // editableTags: ['builder-form-error']
   defaults: {
@@ -3887,8 +4363,8 @@ function logFetch(url) {
 }
 
 // src/blocks/form/form/form.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
-var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
+var _tmpl$27 = /* @__PURE__ */ template(`<form>`);
 var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-04a43b72 {
   padding: 10px;
   color: red;
@@ -4081,7 +4557,7 @@ function FormComponent(props) {
   }
   let formRef;
   return [(() => {
-    const _el$ = _tmpl$26();
+    const _el$ = _tmpl$27();
     _el$.addEventListener("submit", (event) => onSubmit(event));
     const _ref$ = formRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
@@ -4137,7 +4613,7 @@ function FormComponent(props) {
         return memo(() => submissionState() === "error")() && responseData();
       },
       get children() {
-        const _el$2 = _tmpl$13();
+        const _el$2 = _tmpl$15();
         insert(_el$2, () => JSON.stringify(responseData(), null, 2));
         return _el$2;
       }
@@ -4164,7 +4640,7 @@ function FormComponent(props) {
 var form_default = FormComponent;
 
 // src/blocks/form/input/component-info.ts
-var componentInfo14 = {
+var componentInfo15 = {
   name: "Form:Input",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
@@ -4216,10 +4692,10 @@ var componentInfo14 = {
     borderColor: "#ccc"
   }
 };
-var _tmpl$14 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<input>`);
 function FormInputComponent(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$16();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get key() {
         return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
@@ -4249,7 +4725,7 @@ function FormInputComponent(props) {
 var input_default = FormInputComponent;
 
 // src/blocks/form/select/component-info.ts
-var componentInfo15 = {
+var componentInfo16 = {
   name: "Form:Select",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
   defaultStyles: {
@@ -4292,11 +4768,11 @@ var componentInfo15 = {
   static: true,
   noWrap: true
 };
-var _tmpl$15 = /* @__PURE__ */ template(`<select>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<option>`);
 function SelectComponent(props) {
   return (() => {
-    const _el$ = _tmpl$15();
+    const _el$ = _tmpl$17();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get value() {
         return props.value;
@@ -4321,7 +4797,7 @@ function SelectComponent(props) {
       children: (option, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$27();
+          const _el$2 = _tmpl$28();
           insert(_el$2, () => option.name || option.value);
           effect(() => setAttribute(_el$2, "key", `${option.name}-${index}`));
           effect(() => _el$2.value = option.value);
@@ -4335,7 +4811,7 @@ function SelectComponent(props) {
 var select_default = SelectComponent;
 
 // src/blocks/form/submit-button/component-info.ts
-var componentInfo16 = {
+var componentInfo17 = {
   name: "Form:SubmitButton",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
   defaultStyles: {
@@ -4361,10 +4837,10 @@ var componentInfo16 = {
   // TODO: defaultChildren
   // canHaveChildren: true,
 };
-var _tmpl$16 = /* @__PURE__ */ template(`<button type=submit>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<button type=submit>`);
 function SubmitButton(props) {
   return (() => {
-    const _el$ = _tmpl$16();
+    const _el$ = _tmpl$18();
     spread(_el$, mergeProps({}, () => props.attributes), false, true);
     insert(_el$, () => props.text);
     return _el$;
@@ -4373,7 +4849,7 @@ function SubmitButton(props) {
 var submit_button_default = SubmitButton;
 
 // src/blocks/form/textarea/component-info.ts
-var componentInfo17 = {
+var componentInfo18 = {
   name: "Form:TextArea",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
   inputs: [{
@@ -4410,10 +4886,10 @@ var componentInfo17 = {
   static: true,
   noWrap: true
 };
-var _tmpl$17 = /* @__PURE__ */ template(`<textarea>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<textarea>`);
 function Textarea(props) {
   return (() => {
-    const _el$ = _tmpl$17();
+    const _el$ = _tmpl$19();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get placeholder() {
         return props.placeholder;
@@ -4437,7 +4913,7 @@ function Textarea(props) {
 var textarea_default = Textarea;
 
 // src/blocks/img/component-info.ts
-var componentInfo18 = {
+var componentInfo19 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -4452,10 +4928,10 @@ var componentInfo18 = {
   noWrap: true,
   static: true
 };
-var _tmpl$18 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$18();
+    const _el$ = _tmpl$20();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -4479,7 +4955,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo19 = {
+var componentInfo20 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -4564,8 +5040,8 @@ var componentInfo19 = {
     builderBlock: true
   }
 };
-var _tmpl$19 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$35 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   const videoProps = createMemo(() => {
@@ -4626,7 +5102,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$19();
+        const _el$3 = _tmpl$21();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -4636,7 +5112,7 @@ function Video(props) {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$28();
+        const _el$4 = _tmpl$29();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -4649,7 +5125,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$28();
+        const _el$5 = _tmpl$29();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -4662,7 +5138,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$28();
+        const _el$6 = _tmpl$29();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -4684,31 +5160,31 @@ var video_default = Video;
 // src/constants/extra-components.ts
 var getExtraComponents = () => [{
   component: custom_code_default,
-  ...componentInfo11
+  ...componentInfo12
 }, {
   component: embed_default,
-  ...componentInfo12
+  ...componentInfo13
 }, ...TARGET === "rsc" ? [] : [{
   component: form_default,
-  ...componentInfo13
+  ...componentInfo14
 }, {
   component: input_default,
-  ...componentInfo14
+  ...componentInfo15
 }, {
   component: submit_button_default,
-  ...componentInfo16
+  ...componentInfo17
 }, {
   component: select_default,
-  ...componentInfo15
+  ...componentInfo16
 }, {
   component: textarea_default,
-  ...componentInfo17
+  ...componentInfo18
 }], {
   component: img_default,
-  ...componentInfo18
+  ...componentInfo19
 }, {
   component: video_default,
-  ...componentInfo19
+  ...componentInfo20
 }];
 
 // src/constants/builder-registered-components.ts
@@ -4726,19 +5202,22 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo5
 }, {
   component: section_default,
-  ...componentInfo6
+  ...componentInfo7
 }, {
   component: slot_default,
-  ...componentInfo7
+  ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo8
+  ...componentInfo9
 }, {
   component: text_default,
-  ...componentInfo10
-}, ...TARGET === "rsc" ? [] : [{
+  ...componentInfo11
+}, ...TARGET === "react" ? [{
+  component: personalization_container_default,
+  ...componentInfo6
+}] : [], ...TARGET === "rsc" ? [] : [{
   component: tabs_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: accordion_default,
   ...componentInfo
@@ -4776,7 +5255,7 @@ var getVariants = (content) => Object.values(content?.variations || {}).map((var
   testVariationId: variant.id,
   id: content?.id
 }));
-var checkShouldRenderVariants = ({
+var checkShouldRenderVariants2 = ({
   canTrack,
   content
 }) => {
@@ -4809,25 +5288,6 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$20 = /* @__PURE__ */ template(`<script>`);
-function InlinedScript(props) {
-  return (() => {
-    const _el$ = _tmpl$20();
-    effect((_p$) => {
-      const _v$ = props.scriptStr, _v$2 = props.id, _v$3 = props.nonce || "";
-      _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "data-id", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "nonce", _p$._v$3 = _v$3);
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0
-    });
-    return _el$;
-  })();
-}
-var inlined_script_default = InlinedScript;
 
 // src/helpers/preview-lru-cache/get.ts
 function getPreviewContent(_searchParams) {
@@ -4835,7 +5295,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.5";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5130,16 +5590,6 @@ async function fetchEntries(options) {
   return _processContentResult(options, content);
 }
 
-// src/functions/is-previewing.ts
-function isPreviewing(_search) {
-  const search = _search || (isBrowser() ? window.location.search : void 0);
-  if (!search) {
-    return false;
-  }
-  const normalizedSearch = getSearchString(search);
-  return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
-}
-
 // src/helpers/uuid.ts
 function uuidv4() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
@@ -5462,7 +5912,9 @@ var setupBrowserForEditing = (options = {}) => {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
+        blockLevelPersonalization: true
       }
     }, "*");
     window.parent?.postMessage({
@@ -6198,7 +6650,7 @@ var content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRenderVariants({
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRenderVariants2({
     canTrack: getDefaultCanTrack(props.canTrack),
     content: props.content
   }));
@@ -6424,7 +6876,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   const blocksWrapper = createMemo(() => {
@@ -6456,7 +6908,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$21();
+    const _el$ = _tmpl$30();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -6548,4 +7000,4 @@ var fetchBuilderProps = async (_args) => {
   };
 };
 
-export { blocks_default as Blocks, builder_context_default as BuilderContext, button_default as Button, columns_default as Columns, content_variants_default as Content, fragment_default as Fragment, image_default as Image, section_default as Section, symbol_default as Symbol, text_default as Text, video_default as Video, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getBuilderSearchParams, isEditing, isPreviewing, register, setEditorSettings, subscribeToEditor, track };
+export { blocks_default as Blocks, builder_context_default as BuilderContext, button_default as Button, columns_default as Columns, content_variants_default as Content, fragment_default as Fragment, image_default as Image, section_default as Section, symbol_default as Symbol, text_default as Text, video_default as Video, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getBuilderSearchParams, isEditing, isPreviewing, register, setClientUserAttributes, setEditorSettings, subscribeToEditor, track };