@builder.io/sdk-react-native 0.2.3 → 0.4.0

package/dist/blocks/button/button.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/columns/columns.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -80,7 +81,7 @@ function Columns(props) {
             };
         }
         const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutterSize}px`;
+        const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
         return {

package/dist/blocks/custom-code/custom-code.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/embed/embed.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/form/form.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/fragment/fragment.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/img/img.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/input/input.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/raw-text/raw-text.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/section/section.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/select/select.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/submit-button/submit-button.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/blocks/symbol/symbol.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -98,7 +99,7 @@ function Symbol(props) {
         } },
         React.createElement(render_content_1.default, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...(_a = props.symbol) === null || _a === void 0 ? void 0 : _a.data,
-                ...builderContext.state,
+                ...builderContext.localState,
                 ...(_b = contentToUse === null || contentToUse === void 0 ? void 0 : contentToUse.data) === null || _b === void 0 ? void 0 : _b.state,
             }, model: (_c = props.symbol) === null || _c === void 0 ? void 0 : _c.model, content: contentToUse })));
 }

package/dist/blocks/textarea/textarea.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/components/render-block/block-styles.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38,7 +39,9 @@ function BlockStyles(props) {
     function useBlock() {
         return (0, get_processed_block_js_1.getProcessedBlock)({
             block: props.block,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             context: props.context.context,
             shouldEvaluateBindings: true,
         });

package/dist/components/render-block/render-block.helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getProxyState = exports.getComponent = void 0;
+exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getComponent = void 0;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -59,7 +59,9 @@ const getComponent = ({ block, context }) => {
     var _a;
     const componentName = (_a = (0, get_processed_block_1.getProcessedBlock)({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false
     }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({ block, context }) => {
     }
     const itemsArray = (0, evaluate_1.evaluate)({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context
     });
     if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({ block, context }) => {
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
         context: __spreadProps(__spreadValues({}, context), {
-            state: __spreadProps(__spreadValues({}, context.state), {
+            localState: __spreadProps(__spreadValues({}, context.localState), {
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -107,19 +111,3 @@ const getRepeatItemData = ({ block, context }) => {
     return repeatArray;
 };
 exports.getRepeatItemData = getRepeatItemData;
-const getProxyState = (context) => {
-    if (typeof Proxy === "undefined") {
-        console.error("no Proxy available in this environment, cannot proxy state.");
-        return context.state;
-    }
-    const useState = new Proxy(context.state, {
-        set: (obj, prop, value) => {
-            var _a;
-            obj[prop] = value;
-            (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-            return true;
-        }
-    });
-    return useState;
-};
-exports.getProxyState = getProxyState;

package/dist/components/render-block/render-block.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,26 +42,30 @@ const extract_text_styles_js_1 = require("../../functions/extract-text-styles.js
 const render_component_1 = __importDefault(require("./render-component"));
 const get_react_native_block_styles_js_1 = require("../../functions/get-react-native-block-styles.js");
 function RenderBlock(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const [component, setComponent] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getComponent)({
         block: props.block,
         context: props.context,
     }));
-    const [repeatItemData, setRepeatItemData] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getRepeatItemData)({
-        block: props.block,
-        context: props.context,
-    }));
+    function repeatItem() {
+        return (0, render_block_helpers_js_1.getRepeatItemData)({
+            block: props.block,
+            context: props.context,
+        });
+    }
     function useBlock() {
-        return repeatItemData
+        return repeatItem()
             ? props.block
             : (0, get_processed_block_js_1.getProcessedBlock)({
                 block: props.block,
-                state: props.context.state,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
                 context: props.context.context,
                 shouldEvaluateBindings: true,
             });
     }
-    const [tag, setTag] = (0, react_1.useState)(() => props.block.tagName || "div");
+    const [Tag, setTag] = (0, react_1.useState)(() => props.block.tagName || "div");
     function canShowBlock() {
         if ("hide" in useBlock()) {
             return !useBlock().hide;
@@ -70,11 +75,12 @@ function RenderBlock(props) {
         }
         return true;
     }
-    const [proxyState, setProxyState] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getProxyState)(props.context));
     function actions() {
         return (0, get_block_actions_js_1.getBlockActions)({
             block: useBlock(),
-            state: target_js_1.TARGET === "qwik" ? props.context.state : proxyState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
             context: props.context.context,
         });
     }
@@ -101,7 +107,7 @@ function RenderBlock(props) {
          * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
          * blocks, and the children will be repeated within those blocks.
          */
-        const shouldRenderChildrenOutsideRef = !(component === null || component === void 0 ? void 0 : component.component) && !repeatItemData;
+        const shouldRenderChildrenOutsideRef = !(component === null || component === void 0 ? void 0 : component.component) && !repeatItem();
         return shouldRenderChildrenOutsideRef ? (_a = useBlock().children) !== null && _a !== void 0 ? _a : [] : [];
     }
     function childrenContext() {
@@ -118,10 +124,11 @@ function RenderBlock(props) {
         return {
             apiKey: props.context.apiKey,
             apiVersion: props.context.apiVersion,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             content: props.context.content,
             context: props.context.context,
-            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };
@@ -150,14 +157,14 @@ function RenderBlock(props) {
         };
     }
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !(component === null || component === void 0 ? void 0 : component.noWrap) ? (React.createElement(React.Fragment, null,
-        (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) ? (React.createElement(React.Fragment, null,
-            React.createElement(react_native_1.View, { ...attributes(), ...actions() }))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData === null || repeatItemData === void 0 ? void 0 : repeatItemData.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
-            React.createElement(react_native_1.View, { ...attributes(), ...actions() },
-                React.createElement(render_component_1.default, { ...renderComponentProps() }), (_a = childrenWithoutParentComponent()) === null || _a === void 0 ? void 0 :
-                _a.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
-                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
+        (0, render_block_helpers_js_1.isEmptyHtmlElement)(Tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(Tag) && repeatItem() ? (React.createElement(React.Fragment, null, (_a = repeatItem()) === null || _a === void 0 ? void 0 : _a.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() },
+                React.createElement(render_component_1.default, { ...renderComponentProps() }), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
+                _b.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_c = childrenWithoutParentComponent()) === null || _c === void 0 ? void 0 :
+                _c.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
         React.createElement(render_component_1.default, { ...renderComponentProps() }))))) : null));
 }
 exports.default = RenderBlock;

package/dist/components/render-block/render-component.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,17 +35,17 @@ const render_block_1 = __importDefault(require("./render-block"));
 const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
 function RenderComponent(props) {
     var _a, _b;
-    const ComponentRefRef = props.componentRef;
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: props.context.content,
-            state: props.context.state,
+            rootState: props.context.rootState,
+            localState: props.context.localState,
             context: props.context.context,
             apiKey: props.context.apiKey,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: props.context.inheritedStyles,
             apiVersion: props.context.apiVersion,
         } }, props.componentRef ? (React.createElement(React.Fragment, null,
-        React.createElement(ComponentRefRef, { ...props.componentOptions }, (_a = props.blockChildren) === null || _a === void 0 ? void 0 :
+        React.createElement(props.componentRef, { ...props.componentOptions }, (_a = props.blockChildren) === null || _a === void 0 ? void 0 :
             _a.map((child) => (React.createElement(render_block_1.default, { key: "render-block-" + child.id, block: child, context: props.context }))), (_b = props.blockChildren) === null || _b === void 0 ? void 0 :
             _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
 }

package/dist/components/render-block/render-repeated-block.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,8 +35,9 @@ const render_block_1 = __importDefault(require("./render-block"));
 function RenderRepeatedBlock(props) {
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: props.repeatContext.content,
-            state: props.repeatContext.state,
-            setState: props.repeatContext.setState,
+            localState: props.repeatContext.localState,
+            rootState: props.repeatContext.rootState,
+            rootSetState: props.repeatContext.rootSetState,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,

package/dist/components/render-blocks.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/components/render-content/builder-editing.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/components/render-content/components/render-styles.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -54,7 +55,7 @@ ${(0, render_styles_helpers_2.getFontCss)({
   text-align: inherit;
   font-family: inherit;
 }
-`);
+`.trim());
     return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });
 }
 exports.default = RenderContentStyles;

package/dist/components/render-content/render-content.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -47,6 +48,8 @@ const interaction_js_1 = require("../../functions/track/interaction.js");
 const render_content_helpers_js_1 = require("./render-content.helpers.js");
 const target_js_1 = require("../../constants/target.js");
 const logger_js_1 = require("../../helpers/logger.js");
+const helpers_js_1 = require("../render-content-variants/helpers.js");
+const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
 function RenderContent(props) {
     var _a, _b, _c, _d, _e;
     const elementRef = (0, react_1.useRef)(null);
@@ -88,8 +91,8 @@ function RenderContent(props) {
         data: props.data,
         locale: props.locale,
     }));
-    function setContextState(newState) {
-        setContentState(newState);
+    function contentSetState(newRootState) {
+        setContentState(newRootState);
     }
     const [allRegisteredComponents, setAllRegisteredComponents] = (0, react_1.useState)(() => [
         ...(0, builder_registered_components_js_1.getDefaultRegisteredComponents)(),
@@ -100,9 +103,12 @@ function RenderContent(props) {
         // which is the new standard way of providing custom components, and must therefore take precedence.
         ...register_component_js_1.components,
         ...(props.customComponents || []),
-    ].reduce((acc, curr) => ({
+    ].reduce((acc, { component, ...curr }) => ({
         ...acc,
-        [curr.name]: curr,
+        [curr.name]: {
+            component: target_js_1.TARGET === "vue3" ? (0, wrap_component_ref_js_1.wrapComponentRef)(component) : component,
+            ...curr,
+        },
     }), {}));
     function processMessage(event) {
         const { data } = event;
@@ -148,7 +154,9 @@ function RenderContent(props) {
             (0, evaluate_js_1.evaluate)({
                 code: jsCode,
                 context: props.context || {},
-                state: contentState,
+                localState: undefined,
+                rootState: contentState,
+                rootSetState: contentSetState,
             });
         }
     }
@@ -176,7 +184,9 @@ function RenderContent(props) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
             code: group,
             context: props.context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         }));
     }
     function handleRequest({ url, key }) {
@@ -187,7 +197,7 @@ function RenderContent(props) {
                 ...contentState,
                 [key]: json,
             };
-            setContextState(newState);
+            contentSetState(newState);
         })
             .catch((err) => {
             console.error("error fetching dynamic data", url, err);
@@ -218,6 +228,14 @@ function RenderContent(props) {
             }));
         }
     }
+    const [scriptStr, setScriptStr] = (0, react_1.useState)(() => {
+        var _a;
+        return (0, helpers_js_1.getRenderContentScriptString)({
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            contentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id,
+            parentContentId: props.parentContentId,
+        });
+    });
     (0, react_1.useEffect)(() => {
         if (!props.apiKey) {
             logger_js_1.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -237,6 +255,11 @@ function RenderContent(props) {
                             includeRefs: props.includeRefs,
                         }
                         : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
                 });
                 Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                     var _a;
@@ -313,15 +336,30 @@ function RenderContent(props) {
     }, []);
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: useContent,
-            state: contentState,
-            setState: setContextState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: target_js_1.TARGET === "qwik" ? undefined : contentSetState,
             context: props.context || {},
             apiKey: props.apiKey,
             apiVersion: props.apiVersion,
             registeredComponents: allRegisteredComponents,
             inheritedStyles: {},
         } }, useContent ? (React.createElement(React.Fragment, null,
-        React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
+        React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model, ...(target_js_1.TARGET === "reactNative"
+                ? {
+                    dataSet: {
+                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+                        "builder-content-id": "",
+                    },
+                }
+                : {}), ...(props.hideContent
+                ? {
+                    hidden: true,
+                    "aria-hidden": true,
+                }
+                : {}) },
+            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
+                React.createElement(react_native_1.ScrollView, { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
             target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(render_styles_1.default, { contentId: useContent === null || useContent === void 0 ? void 0 : useContent.id, cssCode: (_c = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_d = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _d === void 0 ? void 0 : _d.customFonts }))) : null,
             React.createElement(render_blocks_1.default, { blocks: (_e = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _e === void 0 ? void 0 : _e.blocks, key: forceReRenderCount })))) : null));

package/dist/components/render-content/wrap-component-ref.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapComponentRef = void 0;
+const wrapComponentRef = (component) => component;
+exports.wrapComponentRef = wrapComponentRef;

package/dist/components/render-content-variants/helpers.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVariantsScriptString = exports.getVariants = exports.getRenderContentScriptString = exports.checkShouldRunVariants = void 0;
+const is_browser_1 = require("../../functions/is-browser");
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+exports.getVariants = getVariants;
+const checkShouldRunVariants = ({ canTrack, content }) => {
+    const hasVariants = getVariants(content).length > 0;
+    if (!hasVariants) {
+        return false;
+    }
+    if (!canTrack) {
+        return false;
+    }
+    if ((0, is_browser_1.isBrowser)()) {
+        return false;
+    }
+    return true;
+};
+exports.checkShouldRunVariants = checkShouldRunVariants;
+function bldrAbTest(contentId, variants, isHydrationTarget2) {
+    function getAndSetVariantId() {
+        function setCookie(name, value, days) {
+            let expires = "";
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+                expires = "; expires=" + date.toUTCString();
+            }
+            document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
+        }
+        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;
+        }
+        const cookieName = `builder.tests.${contentId}`;
+        const variantInCookie = getCookie(cookieName);
+        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        if (variantInCookie && availableIDs.includes(variantInCookie)) {
+            return variantInCookie;
+        }
+        let n = 0;
+        const random = Math.random();
+        for (let i = 0; i < variants.length; i++) {
+            const variant = variants[i];
+            const testRatio = variant.testRatio;
+            n += testRatio;
+            if (random < n) {
+                setCookie(cookieName, variant.id);
+                return variant.id;
+            }
+        }
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const winningVariantId = getAndSetVariantId();
+    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    if (isHydrationTarget2) {
+        styleEl.remove();
+        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        thisScriptEl == null ? void 0 : thisScriptEl.remove();
+    }
+    else {
+        const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+            return `.variant-${value.id} {  display: none; }
+        `;
+        }).join("");
+        styleEl.innerHTML = newStyleStr;
+    }
+}
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+    if (!navigator.cookieEnabled) {
+        return;
+    }
+    function 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;
+    }
+    const cookieName = `builder.tests.${defaultContentId}`;
+    const variantId = getCookie(cookieName);
+    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const variantIsDefaultContent = variantContentId === defaultContentId;
+    if (variantId === variantContentId) {
+        if (variantIsDefaultContent) {
+            return;
+        }
+        parentDiv == null ? void 0 : parentDiv.removeAttribute("hidden");
+        parentDiv == null ? void 0 : parentDiv.removeAttribute("aria-hidden");
+    }
+    else {
+        if (variantIsDefaultContent) {
+            if (isHydrationTarget2) {
+                parentDiv == null ? void 0 : parentDiv.remove();
+            }
+            else {
+                parentDiv == null ? void 0 : parentDiv.setAttribute("hidden", "true");
+                parentDiv == null ? void 0 : parentDiv.setAttribute("aria-hidden", "true");
+            }
+        }
+        return;
+    }
+    return;
+}
+const isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const AB_TEST_FN_NAME = "bldrAbTest";
+const CONTENT_FN_NAME = "bldrCntntScrpt";
+const getVariantsScriptString = (variants, contentId) => {
+    const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
+    const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
+    return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  `;
+};
+exports.getVariantsScriptString = getVariantsScriptString;
+const getRenderContentScriptString = ({ parentContentId, contentId }) => {
+    return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
+exports.getRenderContentScriptString = getRenderContentScriptString;