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

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

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

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

@@ -17,26 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
@@ -52,19 +32,23 @@ 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 { _track } from "../../functions/track.js";
+import RenderBlocks from "../render-blocks.jsx";
+import RenderContentStyles from "./components/render-styles.jsx";
 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)
     });
@@ -89,7 +73,9 @@ function RenderContent(props) {
       ...components,
       ...props.customComponents || []
     ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.name]: curr }), {});
+    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), {
+      [curr.name]: curr
+    }), {});
     return allComponents;
   }
   function processMessage(event) {
@@ -102,6 +88,7 @@ function RenderContent(props) {
           const contentData = messageContent.data;
           if (key === props.model) {
             setOverrideContent(contentData);
+            setForceReRenderCount(forceReRenderCount + 1);
           }
           break;
         }
@@ -126,12 +113,16 @@ function RenderContent(props) {
     return {};
   }
   function onClick(_event) {
+    var _a2, _b2;
     if (useContent()) {
-      track({
+      const variationId = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.testVariationId;
+      const contentId = (_b2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _b2.id;
+      _track({
         type: "click",
         canTrack: canTrackToUse(),
-        contentId: useContent().id,
-        orgId: props.apiKey
+        contentId,
+        apiKey: props.apiKey,
+        variationId: variationId !== contentId ? variationId : void 0
       });
     }
   }
@@ -143,14 +134,14 @@ function RenderContent(props) {
     }));
   }
   function handleRequest({ url, key }) {
-    const fetchAndSetState = () => __async(this, null, function* () {
-      const fetch = yield getFetch();
-      const response = yield fetch(url);
-      const json = yield response.json();
-      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
+    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);
     });
-    fetchAndSetState();
   }
   function runHttpRequests() {
     var _a2, _b2, _c2;
@@ -182,25 +173,29 @@ function RenderContent(props) {
     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, _b2;
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount + 1);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
-          var _a2;
+          var _a3;
           const message = createRegisterComponentMessage(registeredComponent);
-          (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
+          (_a3 = window.parent) == null ? void 0 : _a3.postMessage(message, "*");
         });
         window.addEventListener("message", processMessage);
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
       if (useContent()) {
-        track({
+        const variationId = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.testVariationId;
+        const contentId = (_b2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _b2.id;
+        _track({
           type: "impression",
           canTrack: canTrackToUse(),
-          contentId: useContent().id,
-          orgId: props.apiKey
+          contentId,
+          apiKey: props.apiKey,
+          variationId: variationId !== contentId ? variationId : void 0
         });
       }
       if (isPreviewing()) {
@@ -262,12 +257,13 @@ function RenderContent(props) {
   }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     ref: elementRef,
     onClick: (event) => onClick(event),
-    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
+    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id,
+    "builder-model": props.model
   }, 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: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
+    blocks: markMutable((_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks),
     key: forceReRenderCount
   }))) : null);
 }

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

@@ -14,26 +14,28 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button.jsx";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns.jsx";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment.jsx";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image.jsx";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section.jsx";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol.jsx";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text.jsx";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video.jsx";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed.jsx";
+import { default as Img } from "../blocks/img/img.jsx";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
+import { default as customCode } from "../blocks/custom-code/custom-code.jsx";
+import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
@@ -44,7 +46,8 @@ const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Section }, sectionComponentInfo),
   __spreadValues({ component: Fragment }, fragmentComponentInfo),
-  __spreadValues({ component: embed }, embedComponentInfo)
+  __spreadValues({ component: embed }, embedComponentInfo),
+  __spreadValues({ component: customCode }, customCodeInfo)
 ];
 export {
   getDefaultRegisteredComponents

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/evaluate.js

@@ -20,7 +20,7 @@ function evaluate({
   try {
     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/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/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

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-builder-search-params/index.js

@@ -7,7 +7,11 @@ const convertSearchParamsToQueryObject = (searchParams) => {
   });
   return options;
 };
-const getBuilderSearchParams = (options) => {
+const getBuilderSearchParams = (_options) => {
+  if (!_options) {
+    return {};
+  }
+  const options = normalizeSearchParams(_options);
   const newOptions = {};
   Object.keys(options).forEach((key) => {
     if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
@@ -22,7 +26,7 @@ const getBuilderSearchParamsFromWindow = () => {
     return {};
   }
   const searchParams = new URLSearchParams(window.location.search);
-  return getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams));
+  return getBuilderSearchParams(searchParams);
 };
 const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 export {

package/src/functions/get-content/ab-testing.js

@@ -1,38 +1,99 @@
-const handleABTesting = (item, testGroups) => {
-  if (item.variations && Object.keys(item.variations).length) {
-    const testGroup = item.id ? testGroups[item.id] : void 0;
-    const variationValue = testGroup ? item.variations[testGroup] : void 0;
-    if (testGroup && variationValue) {
-      item.data = variationValue.data;
-      item.testVariationId = variationValue.id;
-      item.testVariationName = variationValue.name;
-    } else {
-      let n = 0;
-      const random = Math.random();
-      let set = false;
-      for (const id in item.variations) {
-        const variation = item.variations[id];
-        const testRatio = variation.testRatio;
-        n += testRatio;
-        if (random < n) {
-          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-          set = true;
-          Object.assign(item, {
-            data: variation.data,
-            testVariationId: variation.id,
-            testVariationName: variationName
-          });
-        }
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
       }
-      if (!set) {
-        Object.assign(item, {
-          testVariationId: item.id,
-          testVariationName: "Default"
-        });
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
       }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import {
+  getContentVariationCookie,
+  setContentVariationCookie
+} from "../../helpers/ab-tests.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({
+  id,
+  variations
+}) => {
+  var _a;
+  let n = 0;
+  const random = Math.random();
+  for (const id2 in variations) {
+    const testRatio = (_a = variations[id2]) == null ? void 0 : _a.testRatio;
+    n += testRatio;
+    if (random < n) {
+      return id2;
     }
   }
+  return id;
+};
+const getTestFields = ({
+  item,
+  testGroupId
+}) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue) {
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  } else {
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+  }
 };
+const getContentVariation = (_0) => __async(void 0, [_0], function* ({
+  item,
+  canTrack
+}) {
+  const testGroupId = yield getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({ item, testGroupId }) : void 0;
+  if (testFields) {
+    return testFields;
+  } else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({ item, testGroupId: randomVariationId });
+  }
+});
+const handleABTesting = (_0) => __async(void 0, [_0], function* ({
+  item,
+  canTrack
+}) {
+  if (!checkIsBuilderContentWithVariations(item)) {
+    return;
+  }
+  const variationValue = yield getContentVariation({ item, canTrack });
+  Object.assign(item, variationValue);
+});
 export {
   handleABTesting
 };

package/src/functions/get-content/index.js

@@ -44,7 +44,6 @@ import {
 } from "../get-builder-search-params/index.js";
 import { getFetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
-const fetch$ = getFetch();
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
@@ -52,7 +51,7 @@ function getContent(options) {
 }
 const generateContentUrl = (options) => {
   const {
-    limit = 1,
+    limit = 30,
     userAttributes,
     query,
     noTraverse = false,
@@ -79,11 +78,12 @@ const generateContentUrl = (options) => {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
-    const fetch = yield fetch$;
+    const fetch = yield getFetch();
     const content = yield fetch(url.href).then((res) => res.json());
-    if (options.testGroups) {
+    const canTrack = options.canTrack !== false;
+    if (canTrack) {
       for (const item of content.results) {
-        handleABTesting(item, options.testGroups);
+        yield handleABTesting({ item, canTrack });
       }
     }
     return content;

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

@@ -18,6 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { evaluate } from "./evaluate.js";
+import { fastClone } from "./fast-clone.js";
 import { set } from "./set.js";
 import { transformBlock } from "./transform-block.js";
 const evaluateBindings = ({
@@ -28,9 +29,10 @@ const evaluateBindings = ({
   if (!block.bindings) {
     return block;
   }
-  const copied = __spreadProps(__spreadValues({}, block), {
-    properties: __spreadValues({}, block.properties),
-    actions: __spreadValues({}, block.actions)
+  const copy = fastClone(block);
+  const copied = __spreadProps(__spreadValues({}, copy), {
+    properties: __spreadValues({}, copy.properties),
+    actions: __spreadValues({}, copy.actions)
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];

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

@@ -0,0 +1,32 @@
+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 { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
+function getReactNativeBlockStyles({
+  block,
+  context
+}) {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const newStyles = sanitizeReactNativeBlockStyles(styles);
+  return newStyles;
+}
+export {
+  getReactNativeBlockStyles
+};

package/src/functions/mark-mutable.js

@@ -0,0 +1,10 @@
+function markMutable(value) {
+  return value;
+}
+function markPropsMutable(props) {
+  return props;
+}
+export {
+  markMutable,
+  markPropsMutable
+};

package/src/functions/register-component.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
   components.push(__spreadValues({ component }, info));
@@ -46,7 +47,6 @@ const createRegisterComponentMessage = (_a) => {
     data: prepareComponentInfoToSend(info)
   };
 };
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
 const serializeFn = (fnValue) => {
   const fnStr = fnValue.toString().trim();

package/src/functions/sanitize-react-native-block-styles.js

@@ -0,0 +1,66 @@
+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));
+const propertiesThatMustBeNumber = new Set(["lineHeight"]);
+const displayValues = new Set(["flex", "none"]);
+const SHOW_WARNINGS = false;
+const normalizeNumber = (value) => {
+  if (Number.isNaN(value)) {
+    return void 0;
+  } else if (value < 0) {
+    return 0;
+  } else {
+    return value;
+  }
+};
+const sanitizeReactNativeBlockStyles = (styles) => {
+  return Object.keys(styles).reduce((acc, key) => {
+    const propertyValue = styles[key];
+    if (key === "display" && !displayValues.has(propertyValue)) {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+      }
+      return acc;
+    }
+    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== "number") {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+      }
+      return acc;
+    }
+    if (typeof propertyValue === "string") {
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return __spreadProps(__spreadValues({}, acc), { [key]: normalizedValue });
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === "0") {
+        return __spreadProps(__spreadValues({}, acc), { [key]: 0 });
+      }
+    }
+    return __spreadProps(__spreadValues({}, acc), { [key]: propertyValue });
+  }, {});
+};
+export {
+  sanitizeReactNativeBlockStyles
+};