@builder.io/sdk-react-native 0.0.8 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "src/index.js",
   "files": [
     "src"

package/src/blocks/BaseText.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { Text } from "react-native";
+import BuilderContext from "../context/builder.context";
+function BaseText(props) {
+  const builderContext = React.useContext(BuilderContext);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, props), {
+    style: __spreadValues(__spreadValues({}, builderContext.inheritedStyles), props.style)
+  }));
+}
+export {
+  BaseText as default
+};

package/src/blocks/button/button.js

@@ -17,16 +17,17 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Text } from "react-native";
+import { View, StyleSheet } from "react-native";
 function Button(props) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     role: "button",
     href: props.link,
     target: props.openLinkInNewTab ? "_blank" : void 0
-  }), /* @__PURE__ */ React.createElement(Text, null, props.text))) : /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  }), /* @__PURE__ */ React.createElement(BaseText, null, props.text))) : /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     style: styles.view1
-  }), /* @__PURE__ */ React.createElement(Text, null, props.text)));
+  }), /* @__PURE__ */ React.createElement(BaseText, null, props.text)));
 }
 const styles = StyleSheet.create({ view1: { all: "unset" } });
 export {

package/src/blocks/columns/columns.js

@@ -50,12 +50,15 @@ function Columns(props) {
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
     blocks: markMutable(column.blocks),
     path: `component.options.columns.${index}.blocks`,
-    parent: props.builderBlock.id
+    parent: props.builderBlock.id,
+    style: {
+      flexGrow: "1"
+    }
   }))));
 }
 const styles = StyleSheet.create({
   view1: { display: "flex", alignItems: "stretch" },
-  view2: { flexGrow: 1 }
+  view2: { display: "flex", flexDirection: "column", alignItems: "stretch" }
 });
 export {
   Columns as default

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

@@ -6,7 +6,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

@@ -8,6 +8,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

@@ -37,8 +37,9 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Text } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { useState, useContext, useRef } from "react";
 import RenderBlock from "../../components/render-block/render-block.js";
 import BuilderBlocks from "../../components/render-blocks.js";
@@ -211,7 +212,7 @@ function FormComponent(props) {
     blocks: props.sendingMessage
   })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
     style: styles.view1
-  }, " ", /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+  }, " ", /* @__PURE__ */ React.createElement(BaseText, null, JSON.stringify(responseData, null, 2)), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
     dataPath: "successMessage",
     blocks: props.successMessage
   })) : null, " ");

package/src/blocks/fragment/fragment.js

@@ -1,7 +1,8 @@
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 function FragmentComponent(props) {
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.children));
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(BaseText, null, props.children));
 }
 export {
   FragmentComponent as default

package/src/blocks/image/image.js

@@ -17,24 +17,38 @@ var __spreadValues = (a, b) => {
 import * as React from "react";
 import { Image as ReactImage, View } from "react-native";
 function Image(props) {
-  return props.aspectRatio ? /* @__PURE__ */ React.createElement(View, {
-    style: { position: "relative" }
-  }, /* @__PURE__ */ React.createElement(ReactImage, {
+  var _a, _b;
+  const shouldRenderUnwrappedChildren = props.fitContent && ((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length);
+  const imageStyle = props.aspectRatio ? {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  } : __spreadValues(__spreadValues({
+    position: "relative"
+  }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {});
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReactImage, {
     resizeMode: props.backgroundSize || "contain",
-    style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+    style: imageStyle,
     source: { uri: props.image }
-  }), /* @__PURE__ */ React.createElement(View, {
+  }), props.aspectRatio && !shouldRenderUnwrappedChildren ? /* @__PURE__ */ React.createElement(View, {
     style: {
       width: "100%",
       paddingTop: props.aspectRatio * 100 + "%"
     }
-  })) : /* @__PURE__ */ React.createElement(ReactImage, {
-    resizeMode: props.backgroundSize || "contain",
-    style: __spreadValues(__spreadValues({
-      position: "relative"
-    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
-    source: { uri: props.image }
-  });
+  }) : null), shouldRenderUnwrappedChildren && props.children, !props.fitContent && props.children && /* @__PURE__ */ React.createElement(View, {
+    css: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%"
+    }
+  }, props.children));
 }
 export {
   Image as default

package/src/blocks/section/section.js

@@ -17,14 +17,15 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 function SectionComponent(props) {
   return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     style: props.maxWidth && typeof props.maxWidth === "number" ? {
       maxWidth: props.maxWidth
     } : void 0
-  }), /* @__PURE__ */ React.createElement(Text, null, props.children));
+  }), /* @__PURE__ */ React.createElement(BaseText, null, props.children));
 }
 export {
   SectionComponent as default

package/src/blocks/select/select.js

@@ -17,8 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
 function SelectComponent(props) {
   var _a;
@@ -29,7 +30,7 @@ function SelectComponent(props) {
     name: props.name
   }), (_a = props.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ React.createElement(View, {
     value: option.value
-  }, /* @__PURE__ */ React.createElement(Text, null, option.name || option.value))));
+  }, /* @__PURE__ */ React.createElement(BaseText, null, option.name || option.value))));
 }
 export {
   SelectComponent as default

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

@@ -17,12 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import BaseText from "../BaseText";
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 function SubmitButton(props) {
   return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     type: "submit"
-  }), /* @__PURE__ */ React.createElement(Text, null, props.text));
+  }), /* @__PURE__ */ React.createElement(BaseText, null, props.text));
 }
 export {
   SubmitButton as default

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

@@ -2,7 +2,7 @@ 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 { createCssClass } from "../../helpers/css.js";
 import RenderInlinedStyles from "../render-inlined-styles.js";
 function BlockStyles(props) {
   function useBlock() {
@@ -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

@@ -30,6 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
+import { View } from "react-native";
+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";
@@ -39,10 +41,13 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { evaluate } from "../../functions/evaluate.js";
 import BlockStyles from "./block-styles.js";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.js";
 import RenderRepeatedBlock from "./render-repeated-block.js";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponentWithContext from "./render-component-with-context.js";
+import RenderComponent from "./render-component.js";
 function RenderBlock(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   function component() {
     var _a2;
     const componentName = (_a2 = getProcessedBlock({
@@ -64,18 +69,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());
   }
@@ -93,24 +86,25 @@ function RenderBlock(props) {
       state: props.context.state,
       context: props.context.context
     })), {
-      style: getBlockStyles(useBlock())
+      style: getBlockStyles({
+        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 +112,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 +144,55 @@ function RenderBlock(props) {
     }));
     return repeatArray;
   }
+  function inheritedTextStyles() {
+    if (TARGET !== "reactNative") {
+      return {};
+    }
+    const styles = getBlockStyles({
+      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()) && TARGET === "vue2" && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+    key: index,
+    repeatContext: data.context,
+    block: data.block
+  })))) : null, !isEmptyHtmlElement(tagName()) && TARGET !== "vue2" && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = repeatItemData()) == null ? void 0 : _b.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())), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
-    context: props.context
-  })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    context: childrenContext()
+  })), (_d = childrenWithoutParentComponent()) == null ? void 0 : _d.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.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.js";
+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, __spreadValues({}, props)));
+}
+export {
+  RenderComponentWithContext as default
+};

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

@@ -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

@@ -42,9 +42,9 @@ function RenderBlocks(props) {
     dataSet: {
       class: className()
     },
+    style: styles.view1,
     onClick: (event) => onClick(),
-    onMouseEnter: (event) => onMouseEnter(),
-    style: styles.view1
+    onMouseEnter: (event) => onMouseEnter()
   }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + block.id,
     block,

package/src/context/builder.context.js

@@ -4,7 +4,8 @@ var stdin_default = createContext({
   context: {},
   state: {},
   apiKey: null,
-  registeredComponents: {}
+  registeredComponents: {},
+  inheritedStyles: {}
 });
 export {
   stdin_default as default

package/src/functions/extract-text-styles.js

@@ -0,0 +1,22 @@
+const TEXT_STYLE_KEYS = [
+  "color",
+  "whiteSpace",
+  "direction",
+  "hyphens",
+  "overflowWrap"
+];
+const isTextStyle = (key) => {
+  return TEXT_STYLE_KEYS.includes(key) || key.startsWith("font") || key.startsWith("text") || key.startsWith("letter") || key.startsWith("line") || key.startsWith("word") || key.startsWith("writing");
+};
+const extractTextStyles = (styles) => {
+  const textStyles = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    if (isTextStyle(key)) {
+      textStyles[key] = value;
+    }
+  });
+  return textStyles;
+};
+export {
+  extractTextStyles
+};

package/src/functions/get-block-actions-handler.js

@@ -0,0 +1,12 @@
+import { evaluate } from "./evaluate.js";
+function crateEventHandler(value, options) {
+  return (event) => evaluate({
+    code: value,
+    context: options.context,
+    state: options.state,
+    event
+  });
+}
+export {
+  crateEventHandler
+};

package/src/functions/get-block-actions.js

@@ -1,5 +1,5 @@
-import { evaluate } from "./evaluate.js";
 import { getEventHandlerName } from "./event-handler-name.js";
+import { crateEventHandler } from "./get-block-actions-handler.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};
@@ -9,12 +9,7 @@ function getBlockActions(options) {
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = (event) => evaluate({
-      code: value,
-      context: options.context,
-      state: options.state,
-      event
-    });
+    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
   }
   return obj;
 }

package/src/functions/get-block-properties.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isEditing } from "./is-editing";
+import { isEditing } from "./is-editing.js";
 import { findDOMNode } from "react-dom";
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {

package/src/functions/get-block-styles.js

@@ -18,10 +18,13 @@ import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
 import { TARGET } from "../constants/target.js";
 import { convertStyleObject } from "./convert-style-object.js";
 import { sanitizeBlockStyles } from "./sanitize-styles.js";
-const getStyleForTarget = (styles) => {
+const getStyleForTarget = ({
+  styles,
+  context
+}) => {
   switch (TARGET) {
     case "reactNative": {
-      return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
+      return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
     }
     default:
       return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? {
@@ -31,11 +34,14 @@ const getStyleForTarget = (styles) => {
       } : {});
   }
 };
-function getBlockStyles(block) {
+function getBlockStyles({
+  block,
+  context
+}) {
   if (!block.responsiveStyles) {
     return {};
   }
-  const styles = getStyleForTarget(block.responsiveStyles);
+  const styles = getStyleForTarget({ styles: block.responsiveStyles, context });
   const newStyles = sanitizeBlockStyles(styles);
   return newStyles;
 }

package/src/helpers/css.js

@@ -7,6 +7,22 @@ const convertStyleMaptoCSS = (style) => {
   });
   return cssProps.join("\n");
 };
+const createCssClass = ({
+  mediaQuery,
+  className,
+  styles
+}) => {
+  const cssClass = `.${className} {
+    ${convertStyleMaptoCSS(styles)}
+  }`;
+  if (mediaQuery) {
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  } else {
+    return cssClass;
+  }
+};
 export {
-  convertStyleMaptoCSS
+  createCssClass
 };