@builder.io/sdk-react-native 0.0.1-9 → 0.0.1

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+function RenderContentStyles(props) {
+  function getCssFromFont(font) {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+      str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+    }
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
+        if (!isNumber) {
+          continue;
+        }
+        const weightUrl = font.files[weight];
+        if (weightUrl && weightUrl !== url) {
+          str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+        }
+      }
+    }
+    return str;
+  }
+  function getFontCss({ customFonts }) {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+  }
+  function injectedStyles() {
+    return `
+${props.cssCode || ""}
+${getFontCss({
+      customFonts: props.customFonts
+    })}`;
+  }
+  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: injectedStyles()
+  });
+}
+export {
+  RenderContentStyles as default
+};

package/src/components/render-content/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.js";
+export {
+  default2 as default
+};

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

@@ -0,0 +1,262 @@
+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 { View } from "react-native";
+import { useState, useRef, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context.js";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } from "../../functions/get-fetch.js";
+import { isBrowser } from "../../functions/is-browser.js";
+import { isEditing } from "../../functions/is-editing.js";
+import { isPreviewing } from "../../functions/is-previewing.js";
+import {
+  components,
+  createRegisterComponentMessage
+} from "../../functions/register-component.js";
+import { track } from "../../functions/track.js";
+import RenderBlocks from "../render-blocks.js";
+import RenderContentStyles from "./components/render-styles.js";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing
+} from "../../scripts/init-editing.js";
+import { markMutable } from "../../functions/mark-mutable.js";
+function RenderContent(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const elementRef = useRef(null);
+  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+  function useContent() {
+    var _a2;
+    if (!props.content && !overrideContent) {
+      return void 0;
+    }
+    const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
+      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data)
+    });
+    return mergedContent;
+  }
+  const [overrideContent, setOverrideContent] = useState(() => null);
+  const [update, setUpdate] = useState(() => 0);
+  function canTrackToUse() {
+    return props.canTrack || true;
+  }
+  const [overrideState, setOverrideState] = useState(() => ({}));
+  function contentState() {
+    var _a2, _b2;
+    return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), overrideState);
+  }
+  function contextContext() {
+    return props.context || {};
+  }
+  function allRegisteredComponents() {
+    const allComponentsArray = [
+      ...getDefaultRegisteredComponents(),
+      ...components,
+      ...props.customComponents || []
+    ];
+    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.name]: curr }), {});
+    return allComponents;
+  }
+  function processMessage(event) {
+    const { data } = event;
+    if (data) {
+      switch (data.type) {
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+          const contentData = messageContent.data;
+          if (key === props.model) {
+            setOverrideContent(contentData);
+            setForceReRenderCount(forceReRenderCount + 1);
+          }
+          break;
+        }
+        case "builder.patchUpdates": {
+          break;
+        }
+      }
+    }
+  }
+  function evaluateJsCode() {
+    var _a2, _b2;
+    const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState()
+      });
+    }
+  }
+  function httpReqsData() {
+    return {};
+  }
+  function onClick(_event) {
+    var _a2;
+    if (useContent()) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
+        orgId: props.apiKey
+      });
+    }
+  }
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+      code: group,
+      context: contextContext(),
+      state: contentState()
+    }));
+  }
+  function handleRequest({ url, key }) {
+    getFetch().then((fetch) => fetch(url)).then((response) => response.json()).then((json) => {
+      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
+      setOverrideState(newOverrideState);
+    }).catch((err) => {
+      console.log("error fetching dynamic data", url, err);
+    });
+  }
+  function runHttpRequests() {
+    var _a2, _b2, _c2;
+    const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key
+        });
+      }
+    });
+  }
+  function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: contentState(),
+          ref: {
+            name: props.model
+          }
+        }
+      }));
+    }
+  }
+  function shouldRenderContentStyles() {
+    var _a2, _b2, _c2, _d2, _e2;
+    return Boolean((((_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.cssCode) || ((_e2 = (_d2 = (_c2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _c2.data) == null ? void 0 : _d2.customFonts) == null ? void 0 : _e2.length)) && TARGET !== "reactNative");
+  }
+  useEffect(() => {
+    var _a2;
+    if (isBrowser()) {
+      if (isEditing()) {
+        setForceReRenderCount(forceReRenderCount + 1);
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
+          var _a3;
+          const message = createRegisterComponentMessage(registeredComponent);
+          (_a3 = window.parent) == null ? void 0 : _a3.postMessage(message, "*");
+        });
+        window.addEventListener("message", processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+      }
+      if (useContent()) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(),
+          contentId: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
+          orgId: props.apiKey
+        });
+      }
+      if (isPreviewing()) {
+        const searchParams = new URL(location.href).searchParams;
+        if (props.model && searchParams.get("builder.preview") === props.model) {
+          const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+          if (previewApiKey) {
+            getContent({
+              model: props.model,
+              apiKey: previewApiKey
+            }).then((content) => {
+              if (content) {
+                setOverrideContent(content);
+              }
+            });
+          }
+        }
+      }
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
+    }
+  }, []);
+  useEffect(() => {
+    evaluateJsCode();
+  }, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode]);
+  useEffect(() => {
+    runHttpRequests();
+  }, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
+  useEffect(() => {
+    emitStateUpdate();
+  }, [contentState()]);
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return useContent();
+      },
+      get state() {
+        return contentState();
+      },
+      get context() {
+        return contextContext();
+      },
+      get apiKey() {
+        return props.apiKey;
+      },
+      get registeredComponents() {
+        return allRegisteredComponents();
+      }
+    }
+  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    ref: elementRef,
+    onClick: (event) => onClick(event),
+    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
+  }, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
+    cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
+    customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts
+  }) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
+    blocks: markMutable((_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks),
+    key: forceReRenderCount
+  }))) : null);
+}
+export {
+  RenderContent as default
+};

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import { TARGET } from "../constants/target.js";
+function RenderInlinedStyles(props) {
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${tagName()}>`;
+  }
+  function tagName() {
+    return "style";
+  }
+  const TagNameRef = tagName();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    dangerouslySetInnerHTML: { __html: injectedStyleScript() }
+  })) : /* @__PURE__ */ React.createElement(TagNameRef, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
+}
+export {
+  RenderInlinedStyles as default
+};

package/src/constants/builder-registered-components.js

@@ -0,0 +1,42 @@
+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 { default as Button } from "../blocks/button/button.js";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.js";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.js";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.js";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.js";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/constants/device-sizes.js

@@ -1,11 +1,4 @@
-import * as React from 'react';
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -20,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/constants/target.js

@@ -0,0 +1,4 @@
+const TARGET = "reactNative";
+export {
+  TARGET
+};

package/src/context/builder.context.js

@@ -1,5 +1,11 @@
 import { createContext } from "react";
-var stdin_default = createContext({ content: null, context: {}, state: {} });
+var stdin_default = createContext({
+  content: null,
+  context: {},
+  state: {},
+  apiKey: null,
+  registeredComponents: {}
+});
 export {
   stdin_default as default
 };

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

package/src/functions/convert-style-object.js

@@ -0,0 +1,6 @@
+const convertStyleObject = (obj) => {
+  return obj;
+};
+export {
+  convertStyleObject
+};

package/src/functions/evaluate.js

@@ -1,18 +1,26 @@
-import * as React from 'react';
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
-function evaluate(options) {
-  const { code } = options;
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
+function evaluate({
+  code,
+  context,
+  state,
+  event
+}) {
+  if (code === "") {
+    console.warn("Skipping evaluation of empty code block.");
+    return;
+  }
   const builder = {
     isEditing: isEditing(),
-    isBrowser: isBrowser()
+    isBrowser: isBrowser(),
+    isServer: !isBrowser()
   };
   const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = `${useReturn ? `return (${code});` : code}`;
+  const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, options.state, options.context, options.event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 export {

package/src/functions/event-handler-name.js

@@ -0,0 +1,7 @@
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export {
+  getEventHandlerName
+};

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

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { evaluate } from "./evaluate";
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+import { evaluate } from "./evaluate.js";
+import { getEventHandlerName } from "./event-handler-name.js";
 function getBlockActions(options) {
+  var _a;
   const obj = {};
-  if (options.block.actions) {
-    for (const key in options.block.actions) {
-      const value = options.block.actions[key];
-      obj["on" + capitalizeFirstLetter(key)] = (event) => evaluate({
-        code: value,
-        context: options.context,
-        state: options.state,
-        event
-      });
+  const optionActions = (_a = options.block.actions) != null ? _a : {};
+  for (const key in optionActions) {
+    if (!optionActions.hasOwnProperty(key)) {
+      continue;
     }
+    const value = optionActions[key];
+    obj[getEventHandlerName(key)] = (event) => evaluate({
+      code: value,
+      context: options.context,
+      state: options.state,
+      event
+    });
   }
   return obj;
 }

package/src/functions/get-block-component-options.js

@@ -1,7 +1,27 @@
-import * as React from 'react';
+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));
 function getBlockComponentOptions(block) {
   var _a;
-  return (_a = block.component) == null ? void 0 : _a.options;
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -18,13 +17,12 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { isEditing } from "./is-editing";
 import { findDOMNode } from "react-dom";
-import { isBrowser } from "./is-browser";
-import { isReactNative } from "./is-react-native";
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {
     ref: (ref) => {
-      if (isBrowser() && !isReactNative()) {
+      if (isEditing()) {
         const el = findDOMNode(ref);
         if (el) {
           el.setAttribute("builder-id", block.id);

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -15,37 +14,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const propertiesThatMustBeNumber = new Set(["lineHeight"]);
-const displayValues = new Set(["flex", "none"]);
-function validateReactNativeStyles(styles) {
-  for (const key in styles) {
-    const propertyValue = styles[key];
-    if (key === "display" && !displayValues.has(propertyValue)) {
-      console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
-      delete styles[key];
-    }
-    if (typeof propertyValue === "string" && propertyValue.match(/^\d/)) {
-      const newValue = parseFloat(propertyValue);
-      if (!isNaN(newValue)) {
-        styles[key] = newValue;
-      }
-    }
-    if (propertiesThatMustBeNumber.has(key) && typeof styles[key] !== "number") {
-      console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
-      delete styles[key];
-    }
-  }
-}
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { convertStyleObject } from "./convert-style-object.js";
+import { sanitizeBlockStyles } from "./sanitize-styles.js";
 function getBlockStyles(block) {
-  var _a, _b, _c;
-  const styles = __spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large);
+  var _a, _b, _c, _d, _e;
+  const styles = __spreadValues(__spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    Object.assign(styles, block.responsiveStyles.medium);
+    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   }
-  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
-    Object.assign(styles, block.responsiveStyles.small);
+  if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
+    styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
-  validateReactNativeStyles(styles);
+  sanitizeBlockStyles(styles);
   return styles;
 }
 export {

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

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { View } from "react-native";
-function getBlockTag(block) {
+function getBlockTag(_block) {
   return View;
 }
 export {

package/src/functions/get-builder-search-params/fn.test.js

@@ -0,0 +1,13 @@
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
+const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
+const url = new URL(`localhost:3000/about-us?${querystring}`);
+describe("Get Builder SearchParams", () => {
+  test("correctly converts URLSearchParams to object", () => {
+    const output = convertSearchParamsToQueryObject(url.searchParams);
+    expect(output).toMatchSnapshot();
+  });
+  test("correctly extracts all builder params from a query object", () => {
+    const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
+    expect(output).toMatchSnapshot();
+  });
+});