@builder.io/sdk-solid 2.0.2 → 2.0.5

package/lib/browser/index.jsx

@@ -518,6 +518,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -1458,6 +1461,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1465,7 +1469,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -1477,7 +1481,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -1496,7 +1500,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-3ff242de"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1525,7 +1529,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-5b8fb3ac {
+    <style>{`.div-3ff242de {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1540,7 +1544,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show7, createMemo as createMemo8 } from "solid-js";
+import { Show as Show7, onMount as onMount2, createMemo as createMemo8 } from "solid-js";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1629,12 +1633,14 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
+  onMount2(() => {
+  });
   return <>
     <>
       <picture>
         <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-4512e110"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1652,22 +1658,22 @@ function Image(props) {
       <Show7
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-e3b1053e"
+        class="builder-image-sizer div-4512e110"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show7>
       <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-e3b1053e-2">{props.children}</div></Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-4512e110-2">{props.children}</div></Show7>
     </>
-    <style>{`.img-e3b1053e {
+    <style>{`.img-4512e110 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-e3b1053e {
+}.div-4512e110 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-e3b1053e-2 {
+}.div-4512e110-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1703,10 +1709,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount6, on as on3, createEffect as createEffect3, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount5, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1900,7 +1906,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show13, createSignal as createSignal17 } from "solid-js";
+import { Show as Show13, createSignal as createSignal18 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -2913,7 +2919,8 @@ var tabs_default = Tabs;
 // src/blocks/text/component-info.ts
 var componentInfo10 = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false
+    builderBlock: TARGET === "reactNative" ? true : false,
+    builderContext: true
   },
   name: "Text",
   static: true,
@@ -2935,10 +2942,31 @@ var componentInfo10 = {
 };
 
 // src/blocks/text/text.tsx
+import { createMemo as createMemo11 } from "solid-js";
 function Text(props) {
+  const processedText = createMemo11(() => {
+    const context = props.builderContext;
+    const {
+      context: contextContext,
+      localState,
+      rootState,
+      rootSetState
+    } = context;
+    return String(props.text?.toString() || "").replace(
+      /{{([^}]+)}}/g,
+      (match, group) => evaluate({
+        code: group,
+        context: contextContext,
+        localState,
+        rootState,
+        rootSetState,
+        enableCache: false
+      })
+    );
+  });
   return <><div
     class="builder-text"
-    innerHTML={props.text?.toString() || ""}
+    innerHTML={processedText()}
     style={{
       outline: "none"
     }}
@@ -2972,12 +3000,12 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount2, createSignal as createSignal11 } from "solid-js";
+import { onMount as onMount3, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
-  const [scriptsRun, setScriptsRun] = createSignal11([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
   let elementRef;
-  onMount2(() => {
+  onMount3(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -3036,7 +3064,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on, createEffect, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { on, createEffect, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3044,9 +3072,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
-  const [scriptsRun, setScriptsRun] = createSignal12([]);
-  const [ranInitFn, setRanInitFn] = createSignal12(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal13([]);
+  const [scriptsRun, setScriptsRun] = createSignal13([]);
+  const [ranInitFn, setRanInitFn] = createSignal13(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -3069,8 +3097,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo12(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo13(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo13(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -3325,7 +3353,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
+import { Show as Show10, For as For7, createSignal as createSignal14 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3342,9 +3370,9 @@ var get = (obj, path, defaultValue) => {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal13("unsubmitted");
-  const [responseData, setResponseData] = createSignal13(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
+  const [formState, setFormState] = createSignal14("unsubmitted");
+  const [responseData, setResponseData] = createSignal14(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal14("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3917,9 +3945,9 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show11, createMemo as createMemo14 } from "solid-js";
+import { Show as Show11, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo14(() => {
+  const videoProps = createMemo15(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3938,7 +3966,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo14(() => {
+  const spreadProps = createMemo15(() => {
     return {
       ...videoProps()
     };
@@ -4076,17 +4104,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\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 cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
@@ -4147,11 +4172,11 @@ var Inlined_script_default = InlinedScript;
 // src/components/content/components/enable-editor.tsx
 import {
   Show as Show12,
-  onMount as onMount3,
+  onMount as onMount4,
   on as on2,
   createEffect as createEffect2,
-  createMemo as createMemo15,
-  createSignal as createSignal15
+  createMemo as createMemo16,
+  createSignal as createSignal16
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4649,7 +4674,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.2";
+var SDK_VERSION = "2.0.5";
 
 // src/functions/register.ts
 var registry = {};
@@ -4926,12 +4951,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal15(
+  const [ContentWrapper, setContentWrapper] = createSignal16(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal15({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
-  const [clicked, setClicked] = createSignal15(false);
+  const [httpReqsData, setHttpReqsData] = createSignal16({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
+  const [clicked, setClicked] = createSignal16(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -4965,7 +4990,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo15(() => {
+  const showContentProps = createMemo16(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -5084,7 +5109,7 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount3(() => {
+  onMount4(() => {
     if (isBrowser()) {
       if (isEditing()) {
         window.addEventListener("message", processMessage);
@@ -5145,7 +5170,7 @@ function EnableEditor(props) {
       }
     }
   });
-  onMount3(() => {
+  onMount4(() => {
     if (!props.apiKey) {
       logger.error(
         "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
@@ -5155,14 +5180,14 @@ function EnableEditor(props) {
     runHttpRequests();
     emitStateUpdate();
   });
-  const onUpdateFn_0_props_content = createMemo15(() => props.content);
+  const onUpdateFn_0_props_content = createMemo16(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect2(on2(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo15(() => props.builderContextSignal.content?.data?.jsCode);
+  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo16(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_1() {
     evaluateJsCode();
   }
@@ -5172,7 +5197,7 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo15(() => props.builderContextSignal.content?.data?.httpRequests);
+  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo16(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_2() {
     runHttpRequests();
   }
@@ -5184,7 +5209,7 @@ function EnableEditor(props) {
       onUpdateFn_2
     )
   );
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo15(
+  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_3() {
@@ -5196,14 +5221,14 @@ function EnableEditor(props) {
       onUpdateFn_3
     )
   );
-  const onUpdateFn_4_props_data = createMemo15(() => props.data);
+  const onUpdateFn_4_props_data = createMemo16(() => props.data);
   function onUpdateFn_4() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect2(on2(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo15(() => props.locale);
+  const onUpdateFn_5_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_5() {
     if (props.locale) {
       mergeNewRootState({
@@ -5230,9 +5255,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal16 } from "solid-js";
+import { createSignal as createSignal17 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal16(
+  const [injectedStyles, setInjectedStyles] = createSignal17(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -5290,7 +5315,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal17(
+  const [scriptStr, setScriptStr] = createSignal18(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -5298,7 +5323,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal17(
+  const [registeredComponents, setRegisteredComponents] = createSignal18(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents?.filter(({ models }) => {
@@ -5319,7 +5344,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -5409,13 +5434,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo18(() => {
+  const updateCookieAndStylesScriptStr = createMemo19(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -5424,10 +5449,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo18(() => {
+  const hideVariantsStyleString = createMemo19(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo18(() => {
+  const defaultContent = createMemo19(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5436,7 +5461,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount4(() => {
+  onMount5(() => {
     setShouldRenderVariants(false);
   });
   return <><>
@@ -5536,14 +5561,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
-  const blocksWrapper = createMemo19(() => {
+  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
+  const blocksWrapper = createMemo20(() => {
     return "div";
   });
-  const contentWrapper = createMemo19(() => {
+  const contentWrapper = createMemo20(() => {
     return "div";
   });
-  const className = createMemo19(() => {
+  const className = createMemo20(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5563,9 +5588,9 @@ function Symbol(props) {
       }
     });
   }
-  onMount5(() => {
+  onMount6(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }

package/lib/edge/dev.js

@@ -3679,6 +3679,9 @@ function assign(target, ..._args) {
   return to;
 }
 function bindAnimations(animations) {
+  if (TARGET === "reactNative") {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case "pageLoad":
@@ -4709,7 +4712,7 @@ var getColumnsClass = (id2) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-5b8fb3ac {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3ff242de {
   display: flex;
   line-height: normal;
 }`);
@@ -4789,6 +4792,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -4796,7 +4800,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -4808,7 +4812,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -4829,7 +4833,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac";
+        return getColumnsClass(props.builderBlock?.id) + " div-3ff242de";
       },
       get style() {
         return columnsCssVars();
@@ -4954,16 +4958,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-e3b1053e">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-e3b1053e-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-e3b1053e {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-4512e110">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-4512e110-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-4512e110 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-e3b1053e {
+}.div-4512e110 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-e3b1053e-2 {
+}.div-4512e110-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -5013,6 +5017,8 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
+  onMount(() => {
+  });
   return [[(() => {
     const _el$ = _tmpl$23(), _el$3 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
@@ -5026,7 +5032,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-4512e110", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -6397,7 +6403,8 @@ delegateEvents(["click"]);
 // src/blocks/text/component-info.ts
 var componentInfo10 = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === "reactNative" ? true : false
+    builderBlock: TARGET === "reactNative" ? true : false,
+    builderContext: true
   },
   name: "Text",
   static: true,
@@ -6419,10 +6426,27 @@ var componentInfo10 = {
 };
 var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
+  const processedText = createMemo(() => {
+    const context = props.builderContext;
+    const {
+      context: contextContext,
+      localState,
+      rootState,
+      rootSetState
+    } = context;
+    return String(props.text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
+      code: group,
+      context: contextContext,
+      localState,
+      rootState,
+      rootSetState,
+      enableCache: false
+    }));
+  });
   return (() => {
     const _el$ = _tmpl$10();
     _el$.style.setProperty("outline", "none");
-    effect(() => _el$.innerHTML = props.text?.toString() || "");
+    effect(() => _el$.innerHTML = processedText());
     return _el$;
   })();
 }
@@ -7721,17 +7745,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\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 cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
@@ -8297,7 +8318,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.2";
+var SDK_VERSION = "2.0.5";
 
 // src/functions/register.ts
 var registry = {};