@builder.io/sdk-react 0.0.1-6 → 0.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.0.1-6",
+  "version": "0.0.2",
   "main": "src/index.js",
   "type": "module",
   "exports": {
@@ -11,6 +11,7 @@
     }
   },
   "scripts": {
+    "release:patch": "npm version patch --no-git-tag-version && npm publish --access public",
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "peerDependencies": {

package/src/blocks/BaseText.jsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../context/builder.context.js";
+function BaseText(props) {
+  const builderContext = useContext(BuilderContext);
+  return /* @__PURE__ */ React.createElement("span", {
+    style: builderContext.inheritedStyles
+  }, props.text);
+}
+export {
+  BaseText as default
+};

package/src/blocks/button/{button.js → button.jsx}

@@ -19,13 +19,13 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 function Button(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({}, props.attributes), {
     role: "button",
     href: props.link,
     target: props.openLinkInNewTab ? "_blank" : void 0
   }), props.text)) : /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props.attributes), {
-    className: "button-7c88bfd8"
-  }), props.text)), /* @__PURE__ */ React.createElement("style", null, `.button-7c88bfd8 { 
+    className: "button-31efdaa8"
+  }), props.text), /* @__PURE__ */ React.createElement("style", null, `.button-31efdaa8 { 
 all: unset; }`));
 }
 export {

package/src/blocks/columns/{columns.js → columns.jsx}

@@ -15,7 +15,8 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks.jsx";
+import { markMutable } from "../../functions/mark-mutable";
 function Columns(props) {
   var _a;
   function getGutterSize() {
@@ -57,28 +58,33 @@ function Columns(props) {
     };
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div-6588dcca",
+    className: "builder-columns div-4fe0d43b",
     style: columnsCssVars()
   }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-6588dcca-2",
+    className: "builder-column div-4fe0d43b-2",
     style: __spreadValues({
       width: getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
     }, columnCssVars()),
     key: index
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: column.blocks,
+    blocks: markMutable(column.blocks),
     path: `component.options.columns.${index}.blocks`,
-    parent: props.builderBlock.id
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-6588dcca { 
+    parent: props.builderBlock.id,
+    styleProp: {
+      flexGrow: "1"
+    }
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-4fe0d43b { 
 display: flex;
 align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-6588dcca { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-6588dcca { 
-flex-direction: var(--flex-dir); } }.div-6588dcca-2 { 
-flex-grow: 1; }@media (max-width: 991px) { .div-6588dcca-2 { 
+line-height: normal; }@media (max-width: 991px) { .div-4fe0d43b { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-4fe0d43b { 
+flex-direction: var(--flex-dir); } }.div-4fe0d43b-2 { 
+display: flex;
+flex-direction: column;
+align-items: stretch; }@media (max-width: 991px) { .div-4fe0d43b-2 { 
 width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-6588dcca-2 { 
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-4fe0d43b-2 { 
 width: var(--column-width) !important;
 margin-left: var(--column-margin-left) !important; } }`));
 }

package/src/blocks/custom-code/{custom-code.js → custom-code.jsx}

@@ -5,7 +5,7 @@ function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
   function findAndRunScripts() {
-    if (elem.current && typeof window !== "undefined") {
+    if (elem.current && elem.current.getElementsByTagName && typeof window !== "undefined") {
       const scripts = elem.current.getElementsByTagName("script");
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];

package/src/blocks/embed/{embed.js → embed.jsx}

@@ -7,6 +7,8 @@ function Embed(props) {
   const [scriptsRun, setScriptsRun] = useState(() => []);
   const [ranInitFn, setRanInitFn] = useState(() => false);
   function findAndRunScripts() {
+    if (!elem.current || !elem.current.getElementsByTagName)
+      return;
     const scripts = elem.current.getElementsByTagName("script");
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];

package/src/blocks/form/{form.js → form.jsx}

@@ -39,8 +39,8 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block.jsx";
+import BuilderBlocks from "../../components/render-blocks.jsx";
 import { isEditing } from "../../functions/is-editing.js";
 function FormComponent(props) {
   var _a, _b;
@@ -209,11 +209,11 @@ function FormComponent(props) {
     dataPath: "sendingMessage",
     blocks: props.sendingMessage
   })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("pre", {
-    className: "builder-form-error-text pre-79359d0a"
+    className: "builder-form-error-text pre-928514ea"
   }, " ", JSON.stringify(responseData, null, 2), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
     dataPath: "successMessage",
     blocks: props.successMessage
-  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-79359d0a {  padding: 10px; color: red; text-align: center; }`), " ");
+  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-928514ea {  padding: 10px; color: red; text-align: center; }`), " ");
 }
 export {
   FormComponent as default

package/src/blocks/image/{image.js → image.jsx}

@@ -27,11 +27,9 @@ function Image(props) {
       return "";
     }
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-95472e7c"
-  }, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
     type: "image/webp",
-    srcset: webpSrcSet()
+    srcSet: webpSrcSet()
   })) : null, /* @__PURE__ */ React.createElement("img", {
     loading: "lazy",
     alt: props.altText,
@@ -40,31 +38,30 @@ function Image(props) {
       objectPosition: props.backgroundSize || "center",
       objectFit: props.backgroundSize || "cover"
     },
-    className: "builder-image" + (props.className ? " " + props.className : "") + " img-95472e7c",
+    className: "builder-image" + (props.className ? " " + props.className : "") + " img-6cfc0cdc",
     src: props.image,
-    srcset: srcSetToUse(),
+    srcSet: srcSetToUse(),
     sizes: props.sizes
   }), /* @__PURE__ */ React.createElement("source", {
-    srcset: srcSetToUse()
-  })), props.aspectRatio && !(props.fitContent && ((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer div-95472e7c-2",
+    srcSet: srcSetToUse()
+  })), props.aspectRatio && !(((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && props.fitContent) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: "builder-image-sizer div-6cfc0cdc",
     style: {
       paddingTop: props.aspectRatio * 100 + "%"
     }
-  })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-95472e7c-3"
-  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.div-95472e7c { 
-position: relative; }.img-95472e7c { 
+  })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent && props.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: "div-6cfc0cdc-2"
+  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-6cfc0cdc { 
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
-left: 0px; }.div-95472e7c-2 { 
+left: 0px; }.div-6cfc0cdc { 
 width: 100%;
 pointer-events: none;
-font-size: 0; }.div-95472e7c-3 { 
+font-size: 0; }.div-6cfc0cdc-2 { 
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/src/blocks/symbol/{symbol.js → symbol.jsx}

@@ -19,21 +19,22 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
+import { markMutable } from "../../functions/mark-mutable";
 function Symbol(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e;
   const [className, setClassName] = useState(() => "builder-symbol");
-  const [content, setContent] = useState(() => null);
-  const builderContext = useContext(BuilderContext);
-  useEffect(() => {
+  const [fetchedContent, setFetchedContent] = useState(() => null);
+  function contentToUse() {
     var _a2;
-    setContent((_a2 = props.symbol) == null ? void 0 : _a2.content);
-  }, []);
+    return ((_a2 = props.symbol) == null ? void 0 : _a2.content) || fetchedContent;
+  }
+  const builderContext = useContext(BuilderContext);
   useEffect(() => {
     const symbolToUse = props.symbol;
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+    if (symbolToUse && !symbolToUse.content && !fetchedContent && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -41,15 +42,10 @@ function Symbol(props) {
           id: symbolToUse.entry
         }
       }).then((response) => {
-        setContent(response);
+        setFetchedContent(response);
       });
     }
-  }, [
-    (_a = props.symbol) == null ? void 0 : _a.content,
-    (_b = props.symbol) == null ? void 0 : _b.model,
-    (_c = props.symbol) == null ? void 0 : _c.entry,
-    content
-  ]);
+  }, [props.symbol, fetchedContent]);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props.attributes), {
     dataSet: {
       class: className
@@ -58,10 +54,10 @@ function Symbol(props) {
   }), /* @__PURE__ */ React.createElement(RenderContent, {
     apiKey: builderContext.apiKey,
     context: builderContext.context,
-    customComponents: Object.values(builderContext.registeredComponents),
-    data: __spreadValues(__spreadValues(__spreadValues({}, (_d = props.symbol) == null ? void 0 : _d.data), builderContext.state), (_g = (_f = (_e = props.symbol) == null ? void 0 : _e.content) == null ? void 0 : _f.data) == null ? void 0 : _g.state),
-    model: (_h = props.symbol) == null ? void 0 : _h.model,
-    content
+    customComponents: markMutable(Object.values(builderContext.registeredComponents)),
+    data: markMutable(__spreadValues(__spreadValues(__spreadValues({}, (_a = props.symbol) == null ? void 0 : _a.data), builderContext.state), (_d = (_c = (_b = props.symbol) == null ? void 0 : _b.content) == null ? void 0 : _c.data) == null ? void 0 : _d.state)),
+    model: (_e = props.symbol) == null ? void 0 : _e.model,
+    content: markMutable(contentToUse())
   }));
 }
 export {

package/src/blocks/text/{text.js → text.jsx}

@@ -1,6 +1,6 @@
 import * as React from "react";
 function Text(props) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("span", {
     className: "builder-text",
     dangerouslySetInnerHTML: { __html: props.text }
   });

package/src/blocks/video/{video.js → video.jsx}

@@ -33,7 +33,10 @@ function Video(props) {
       playsInline: true
     } : {});
   }
-  return /* @__PURE__ */ React.createElement("video", __spreadProps(__spreadValues({}, videoProps()), {
+  function spreadProps() {
+    return __spreadValues(__spreadValues({}, props.attributes), videoProps());
+  }
+  return /* @__PURE__ */ React.createElement("video", __spreadProps(__spreadValues({}, spreadProps()), {
     style: __spreadProps(__spreadValues({
       width: "100%",
       height: "100%"

package/src/components/render-block/{block-styles.js → block-styles.jsx}

@@ -2,8 +2,8 @@ import * as React from "react";
 import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { convertStyleMaptoCSS } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import { createCssClass } from "../../helpers/css.js";
+import RenderInlinedStyles from "../render-inlined-styles.jsx";
 function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
@@ -18,17 +18,24 @@ function BlockStyles(props) {
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
-    return `
-      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
-      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
-          }` : ""}
-      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
-          }` : ""}
-    }`;
+    const className = useBlock().id;
+    const largeStylesClass = largeStyles ? createCssClass({
+      className,
+      styles: largeStyles
+    }) : "";
+    const mediumStylesClass = mediumStyles ? createCssClass({
+      className,
+      styles: mediumStyles,
+      mediaQuery: getMaxWidthQueryForSize("medium")
+    }) : "";
+    const smallStylesClass = smallStyles ? createCssClass({
+      className,
+      styles: smallStyles,
+      mediaQuery: getMaxWidthQueryForSize("small")
+    }) : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
     styles: css()
   })) : null);
 }

package/src/components/render-block/{render-block.js → render-block.jsx}

@@ -30,17 +30,21 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
+import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { evaluate } from "../../functions/evaluate.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles.jsx";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block.jsx";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponentWithContext from "./render-component-with-context.jsx";
+import RenderComponent from "./render-component.jsx";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 function RenderBlock(props) {
   var _a, _b, _c;
   function component() {
@@ -64,18 +68,6 @@ function RenderBlock(props) {
       return ref;
     }
   }
-  function componentInfo() {
-    if (component()) {
-      const _a2 = component(), { component: _ } = _a2, info = __objRest(_a2, ["component"]);
-      return info;
-    } else {
-      return void 0;
-    }
-  }
-  function componentRef() {
-    var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component;
-  }
   function tagName() {
     return getBlockTag(useBlock());
   }
@@ -88,29 +80,30 @@ function RenderBlock(props) {
     });
   }
   function attributes() {
-    return __spreadProps(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+    return __spreadValues(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
       block: useBlock(),
       state: props.context.state,
       context: props.context.context
-    })), {
-      style: getBlockStyles(useBlock())
-    });
+    })), TARGET === "reactNative" ? {
+      style: getReactNativeBlockStyles({
+        block: useBlock(),
+        context: props.context
+      })
+    } : {});
   }
   function shouldWrap() {
     var _a2;
-    return !((_a2 = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a2.noWrap);
-  }
-  function componentOptions() {
-    return __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
-      attributes: attributes()
-    });
+    return !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.noWrap);
   }
   function renderComponentProps() {
+    var _a2;
     return {
       blockChildren: children(),
-      componentRef: componentRef(),
-      componentOptions: componentOptions(),
-      context: props.context
+      componentRef: (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component,
+      componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
+        attributes: attributes()
+      }),
+      context: childrenContext()
     };
   }
   function children() {
@@ -118,7 +111,8 @@ function RenderBlock(props) {
     return (_a2 = useBlock().children) != null ? _a2 : [];
   }
   function childrenWithoutParentComponent() {
-    const shouldRenderChildrenOutsideRef = !componentRef() && !repeatItemData();
+    var _a2;
+    const shouldRenderChildrenOutsideRef = !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component) && !repeatItemData();
     return shouldRenderChildrenOutsideRef ? children() : [];
   }
   function repeatItemData() {
@@ -149,22 +143,51 @@ function RenderBlock(props) {
     }));
     return repeatArray;
   }
+  function inheritedTextStyles() {
+    if (TARGET !== "reactNative") {
+      return {};
+    }
+    const styles = getReactNativeBlockStyles({
+      block: useBlock(),
+      context: props.context
+    });
+    return extractTextStyles(styles);
+  }
+  function childrenContext() {
+    return {
+      apiKey: props.context.apiKey,
+      state: props.context.state,
+      content: props.context.content,
+      context: props.context.context,
+      registeredComponents: props.context.registeredComponents,
+      inheritedStyles: inheritedTextStyles()
+    };
+  }
+  function renderComponentTag() {
+    if (TARGET === "reactNative") {
+      return RenderComponentWithContext;
+    } else if (TARGET === "vue3") {
+      return "RenderComponent";
+    } else {
+      return RenderComponent;
+    }
+  }
+  const [componentInfo, setComponentInfo] = useState(() => null);
+  const RenderComponentTagRef = renderComponentTag();
   const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : null, !isEmptyHtmlElement(tagName()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
     key: index,
     repeatContext: data.context,
     block: data.block
-  }))) : null, !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps()))) : null, (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }))) : null, !isEmptyHtmlElement(tagName()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
-    context: props.context
+    context: childrenContext()
   })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
     key: "block-style-" + child.id,
     block: child,
-    context: props.context
-  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadProps(__spreadValues({}, renderComponentProps()), {
-    context: props.context
-  })));
+    context: childrenContext()
+  })))) : null) : /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())));
 }
 export {
   RenderBlock as default

package/src/components/render-block/render-component-with-context.jsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.jsx";
+function RenderComponentWithContext(props) {
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return props.context.content;
+      },
+      get state() {
+        return props.context.state;
+      },
+      get context() {
+        return props.context.context;
+      },
+      get apiKey() {
+        return props.context.apiKey;
+      },
+      get registeredComponents() {
+        return props.context.registeredComponents;
+      },
+      get inheritedStyles() {
+        return props.context.inheritedStyles;
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(RenderComponent, {
+    componentRef: props.componentRef,
+    componentOptions: props.componentOptions,
+    blockChildren: props.blockChildren,
+    context: props.context
+  }));
+}
+export {
+  RenderComponentWithContext as default
+};

package/src/components/render-block/{render-component.js → render-component.jsx}

@@ -15,12 +15,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles.jsx";
+import RenderBlock from "./render-block.jsx";
+import { markPropsMutable } from "../../functions/mark-mutable.js";
 function RenderComponent(props) {
   var _a, _b;
   const ComponentRefRef = props.componentRef;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, markPropsMutable(props.componentOptions)), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
     context: props.context

package/src/components/render-block/{render-repeated-block.js → render-repeated-block.jsx}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block.jsx";
 function RenderRepeatedBlock(props) {
   return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
     value: {
@@ -18,6 +18,9 @@ function RenderRepeatedBlock(props) {
       },
       get registeredComponents() {
         return props.repeatContext.registeredComponents;
+      },
+      get inheritedStyles() {
+        return props.repeatContext.inheritedStyles;
       }
     }
   }, /* @__PURE__ */ React.createElement(RenderBlock, {

package/src/components/{render-blocks.js → render-blocks.jsx}

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles.jsx";
+import RenderBlock from "./render-block/render-block.jsx";
 function RenderBlocks(props) {
   var _a, _b;
   function className() {
@@ -36,12 +36,13 @@ function RenderBlocks(props) {
   }
   const builderContext = useContext(BuilderContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: className() + " div-452eb7d0",
+    className: className() + " div-05727d92",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
     dataSet: {
       class: className()
     },
+    style: props.styleProp,
     onClick: (event) => onClick(),
     onMouseEnter: (event) => onMouseEnter()
   }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
@@ -52,7 +53,7 @@ function RenderBlocks(props) {
     key: "block-style-" + block.id,
     block,
     context: builderContext
-  }))) : null), /* @__PURE__ */ React.createElement("style", null, `.div-452eb7d0 { 
+  }))) : null), /* @__PURE__ */ React.createElement("style", null, `.div-05727d92 { 
 display: flex;
 flex-direction: column;
 align-items: stretch; }`));

package/src/components/render-content/components/{render-styles.js → render-styles.jsx}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles.jsx";
 function RenderContentStyles(props) {
   function getCssFromFont(font) {
     var _a, _b;