@tamagui/react-native-web-internals 1.114.3 → 1.115.0

package/dist/cjs/StyleSheet/__tests__/{index-test.js → index-test.cjs}

@@ -2,22 +2,25 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from == "object" || typeof from == "function")
-    for (let key of __getOwnPropNames(from))
-      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+    get: () => from[key],
+    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+  });
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
-  mod
-));
-var import__ = __toESM(require("../index"));
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: !0
+}) : target, mod));
+var import__ = __toESM(require("../index.cjs"));
 describe("StyleSheet", () => {
   test("getSheet", () => {
     expect(import__.default.getSheet()).toMatchInlineSnapshot(`
@@ -60,14 +63,22 @@ describe("StyleSheet", () => {
     expect(import__.default.compose(1, 2)).toEqual([1, 2]), expect(import__.default.compose(1, null)).toBe(1), expect(import__.default.compose(null, 2)).toBe(2);
   }), describe("create", () => {
     test("returns original style objects", () => {
-      const style = import__.default.create({ root: { position: "absolute" } });
+      const style = import__.default.create({
+        root: {
+          position: "absolute"
+        }
+      });
       expect(style.root).toMatchInlineSnapshot(`
         {
           "position": "absolute",
         }
       `);
     }), test("e2e resolves to classname", () => {
-      const style = import__.default.create({ root: { position: "absolute" } });
+      const style = import__.default.create({
+        root: {
+          position: "absolute"
+        }
+      });
       expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
         [
           "r-position-u8s1d",
@@ -78,11 +89,17 @@ describe("StyleSheet", () => {
       const style = import__.default.create({
         root: {
           shadowColor: "rgba(50,60,70,0.5)",
-          shadowOffset: { width: 1, height: 2 },
+          shadowOffset: {
+            width: 1,
+            height: 2
+          },
           shadowOpacity: 0.5,
           shadowRadius: 3,
           textShadowColor: "rgba(50,60,70,0.50)",
-          textShadowOffset: { width: 5, height: 10 },
+          textShadowOffset: {
+            width: 5,
+            height: 10
+          },
           textShadowRadius: 15
         }
       });
@@ -95,7 +112,11 @@ describe("StyleSheet", () => {
     });
   }), describe("flatten", () => {
     test("should merge style objects", () => {
-      const style = import__.default.flatten([{ opacity: 1 }, { order: 2 }]);
+      const style = import__.default.flatten([{
+        opacity: 1
+      }, {
+        order: 2
+      }]);
       expect(style).toMatchInlineSnapshot(`
         {
           "opacity": 1,
@@ -103,10 +124,13 @@ describe("StyleSheet", () => {
         }
       `);
     }), test("should override style properties", () => {
-      const style = import__.default.flatten([
-        { backgroundColor: "#000", order: 1 },
-        { backgroundColor: "#023c69", order: null }
-      ]);
+      const style = import__.default.flatten([{
+        backgroundColor: "#000",
+        order: 1
+      }, {
+        backgroundColor: "#023c69",
+        order: null
+      }]);
       expect(style).toMatchInlineSnapshot(`
         {
           "backgroundColor": "#023c69",
@@ -114,10 +138,11 @@ describe("StyleSheet", () => {
         }
       `);
     }), test("should overwrite properties with `undefined`", () => {
-      const style = import__.default.flatten([
-        { backgroundColor: "#000" },
-        { backgroundColor: void 0 }
-      ]);
+      const style = import__.default.flatten([{
+        backgroundColor: "#000"
+      }, {
+        backgroundColor: void 0
+      }]);
       expect(style).toMatchInlineSnapshot(`
         {
           "backgroundColor": undefined,
@@ -126,12 +151,13 @@ describe("StyleSheet", () => {
     }), test("should not fail on falsy values", () => {
       expect(() => import__.default.flatten([null, !1, void 0])).not.toThrow();
     }), test("should recursively flatten arrays", () => {
-      const style = import__.default.flatten([
-        null,
-        [],
-        [{ order: 2 }, { opacity: 1 }],
-        { order: 3 }
-      ]);
+      const style = import__.default.flatten([null, [], [{
+        order: 2
+      }, {
+        opacity: 1
+      }], {
+        order: 3
+      }]);
       expect(style).toMatchInlineSnapshot(`
         {
           "opacity": 1,
@@ -160,44 +186,32 @@ describe("StyleSheet", () => {
         ]
       `);
     }), test("transforms compiled object to className", () => {
-      expect(
-        (0, import__.default)([
-          {
-            $$css: !0,
-            position: "position-absolute",
-            opacity: "opacity-05",
-            width: "width-200"
-          }
-        ])
-      ).toMatchInlineSnapshot(`
+      expect((0, import__.default)([{
+        $$css: !0,
+        position: "position-absolute",
+        opacity: "opacity-05",
+        width: "width-200"
+      }])).toMatchInlineSnapshot(`
         [
           "position-absolute opacity-05 width-200",
           null,
         ]
       `);
     }), test("transforms array of compiled objects to className", () => {
-      expect(
-        (0, import__.default)([
-          {
-            $$css: !0,
-            borderWidth: "borderWidth-0",
-            borderColor: "borderColor-red",
-            display: "display-flex",
-            width: "width-100"
-          },
-          {
-            $$css: !0,
-            position: "position-absolute",
-            opacity: "opacity-05"
-          },
-          [
-            {
-              $$css: !0,
-              width: "width-200"
-            }
-          ]
-        ])
-      ).toMatchInlineSnapshot(`
+      expect((0, import__.default)([{
+        $$css: !0,
+        borderWidth: "borderWidth-0",
+        borderColor: "borderColor-red",
+        display: "display-flex",
+        width: "width-100"
+      }, {
+        $$css: !0,
+        position: "position-absolute",
+        opacity: "opacity-05"
+      }, [{
+        $$css: !0,
+        width: "width-200"
+      }]])).toMatchInlineSnapshot(`
         [
           "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
           null,
@@ -205,32 +219,35 @@ describe("StyleSheet", () => {
       `);
     }), test("dedupes class names and inline styles", () => {
       const styleACompiled = {
-        $$css: !0,
-        backgroundColor: "backgroundColor-red",
-        display: "display-block"
-      }, styleBCompiled = {
-        $$css: !0,
-        backgroundColor: "backgroundColor-green",
-        color: "color-green"
-      }, styleBInline = {
-        backgroundColor: "rgba(0,0,255,1.00)",
-        color: null
-      }, [className1, inlineStyle1] = (0, import__.default)([
-        styleACompiled,
-        styleBCompiled,
-        styleBInline
-      ]);
-      expect(className1).toBe("display-block"), expect(inlineStyle1).toEqual({ backgroundColor: "rgba(0,0,255,1.00)" });
-      const [className2, inlineStyle2] = (0, import__.default)([
-        styleACompiled,
-        styleBInline,
-        styleBCompiled
-      ]);
+          $$css: !0,
+          backgroundColor: "backgroundColor-red",
+          display: "display-block"
+        },
+        styleBCompiled = {
+          $$css: !0,
+          backgroundColor: "backgroundColor-green",
+          color: "color-green"
+        },
+        styleBInline = {
+          backgroundColor: "rgba(0,0,255,1.00)",
+          color: null
+        },
+        [className1, inlineStyle1] = (0, import__.default)([styleACompiled, styleBCompiled, styleBInline]);
+      expect(className1).toBe("display-block"), expect(inlineStyle1).toEqual({
+        backgroundColor: "rgba(0,0,255,1.00)"
+      });
+      const [className2, inlineStyle2] = (0, import__.default)([styleACompiled, styleBInline, styleBCompiled]);
       expect(className2).toBe("display-block backgroundColor-green color-green"), expect(inlineStyle2).toEqual(null);
     }), test("long form inline style properties take precedence over static shorthand properties", () => {
       const styles1 = import__.default.create({
-        test: { paddingHorizontal: "40px" }
-      }), inlineStyle1 = { padding: "8px", paddingHorizontal: "40px" };
+          test: {
+            paddingHorizontal: "40px"
+          }
+        }),
+        inlineStyle1 = {
+          padding: "8px",
+          paddingHorizontal: "40px"
+        };
       expect((0, import__.default)([styles1.test, inlineStyle1])).toMatchInlineSnapshot(`
         [
           "",
@@ -242,7 +259,15 @@ describe("StyleSheet", () => {
           },
         ]
       `);
-      const styles2 = import__.default.create({ test: { marginVertical: "40px" } }), inlineStyle2 = { margin: "8px", marginVertical: "40px" };
+      const styles2 = import__.default.create({
+          test: {
+            marginVertical: "40px"
+          }
+        }),
+        inlineStyle2 = {
+          margin: "8px",
+          marginVertical: "40px"
+        };
       expect((0, import__.default)([styles2.test, inlineStyle2])).toMatchInlineSnapshot(`
         [
           "",
@@ -255,7 +280,32 @@ describe("StyleSheet", () => {
         ]
       `);
     }), test("polyfills logical styles", () => {
-      const inlineA = { start: "12.34%" }, inlineB = { textAlign: "start" }, inlineC = { marginEnd: 10 }, a = import__.default.create({ x: { ...inlineA } }).x, b = import__.default.create({ x: { ...inlineB } }).x, c = import__.default.create({ x: { ...inlineC } }).x, writingDirection = "rtl", inlineStyle = [inlineA, inlineB, inlineC];
+      const inlineA = {
+          start: "12.34%"
+        },
+        inlineB = {
+          textAlign: "start"
+        },
+        inlineC = {
+          marginEnd: 10
+        },
+        a = import__.default.create({
+          x: {
+            ...inlineA
+          }
+        }).x,
+        b = import__.default.create({
+          x: {
+            ...inlineB
+          }
+        }).x,
+        c = import__.default.create({
+          x: {
+            ...inlineC
+          }
+        }).x,
+        writingDirection = "rtl",
+        inlineStyle = [inlineA, inlineB, inlineC];
       expect((0, import__.default)(inlineStyle)).toMatchInlineSnapshot(`
         [
           "",
@@ -265,7 +315,9 @@ describe("StyleSheet", () => {
             "textAlign": "left",
           },
         ]
-      `), expect((0, import__.default)(inlineStyle, { writingDirection })).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)(inlineStyle, {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "",
           {
@@ -274,12 +326,14 @@ describe("StyleSheet", () => {
             "textAlign": "right",
           },
         ]
-      `), expect(
-        (0, import__.default)(
-          [inlineStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
-          { writingDirection }
-        )
-      ).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)([inlineStyle, {
+        marginLeft: 1,
+        marginEnd: 0,
+        marginStart: 0,
+        marginRight: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "",
           {
@@ -289,11 +343,12 @@ describe("StyleSheet", () => {
             "textAlign": "right",
           },
         ]
-      `), expect(
-        (0, import__.default)([inlineStyle, { marginEnd: null, marginLeft: 11 }], {
-          writingDirection
-        })
-      ).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)([inlineStyle, {
+        marginEnd: null,
+        marginLeft: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "",
           {
@@ -309,19 +364,21 @@ describe("StyleSheet", () => {
           "r-left-2s0hu9 r-textAlign-fdjqy7 r-marginRight-zso239",
           null,
         ]
-      `), expect((0, import__.default)(staticStyle, { writingDirection })).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)(staticStyle, {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "r-right-1bnbe1j r-textAlign-1ff274t r-marginLeft-1n0xq6e",
           null,
         ]
-      `), expect(
-        (0, import__.default)(
-          [staticStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
-          {
-            writingDirection
-          }
-        )
-      ).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)([staticStyle, {
+        marginLeft: 1,
+        marginEnd: 0,
+        marginStart: 0,
+        marginRight: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "r-right-1bnbe1j r-textAlign-1ff274t",
           {
@@ -329,11 +386,12 @@ describe("StyleSheet", () => {
             "marginRight": "0px",
           },
         ]
-      `), expect(
-        (0, import__.default)([staticStyle, { marginEnd: null, marginLeft: 11 }], {
-          writingDirection
-        })
-      ).toMatchInlineSnapshot(`
+      `), expect((0, import__.default)([staticStyle, {
+        marginEnd: null,
+        marginLeft: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
         [
           "r-right-1bnbe1j r-textAlign-1ff274t",
           {
@@ -343,5 +401,4 @@ describe("StyleSheet", () => {
       `);
     });
   });
-});
-//# sourceMappingURL=index-test.js.map
+});

package/dist/cjs/StyleSheet/__tests__/preprocess-test.cjs

@@ -0,0 +1,108 @@
+var import_preprocess = require("../preprocess.cjs");
+describe("StyleSheet/preprocess", () => {
+  describe("preprocesses multiple shadow styles into a single declaration", () => {
+    test("shadowColor only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "red"
+      })).toEqual({
+        boxShadow: "0px 0px 0px rgba(255,0,0,1.00)"
+      });
+    }), test("shadowColor and shadowOpacity only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "red",
+        shadowOpacity: 0.5
+      })).toEqual({
+        boxShadow: "0px 0px 0px rgba(255,0,0,0.50)"
+      });
+    }), test("shadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({
+        boxShadow: "1px 2px 0px rgba(0,0,0,1.00)"
+      });
+    }), test("shadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowRadius: 5
+      })).toEqual({
+        boxShadow: "0px 0px 5px rgba(0,0,0,1.00)"
+      });
+    }), test("shadowOffset, shadowRadius, shadowColor", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "rgba(50,60,70,0.5)",
+        shadowOffset: {
+          width: 1,
+          height: 2
+        },
+        shadowOpacity: 0.5,
+        shadowRadius: 3
+      })).toEqual({
+        boxShadow: "1px 2px 3px rgba(50,60,70,0.25)"
+      });
+    });
+  }), describe("preprocesses multiple textShadow styles into a single declaration", () => {
+    test("textShadowColor only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red"
+      })).toEqual({});
+    }), test("textShadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({});
+    }), test("textShadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowRadius: 5
+      })).toEqual({});
+    }), test("textShadowColor and textShadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: 0,
+          height: 0
+        }
+      })).toEqual({}), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: -1,
+          height: 0
+        }
+      })).toEqual({
+        textShadow: "-1px 0px 0px rgba(255,0,0,1.00)"
+      }), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({
+        textShadow: "1px 2px 0px rgba(255,0,0,1.00)"
+      });
+    }), test("textShadowColor and textShadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowRadius: 0
+      })).toEqual({}), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowRadius: 5
+      })).toEqual({
+        textShadow: "0px 0px 5px rgba(255,0,0,1.00)"
+      });
+    }), test("textShadowColor, textShadowOffset, textShadowRadius", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "rgba(50,60,70,0.50)",
+        textShadowOffset: {
+          width: 5,
+          height: 10
+        },
+        textShadowRadius: 15
+      })).toEqual({
+        textShadow: "5px 10px 15px rgba(50,60,70,0.50)"
+      });
+    });
+  });
+});

package/dist/cjs/StyleSheet/__tests__/validate-test.cjs

@@ -0,0 +1,36 @@
+var import_validate = require("../validate.cjs");
+describe("validate", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  }), afterAll(() => {
+    console.error.mockRestore();
+  }), afterEach(() => {
+    console.error.mockClear();
+  }), test("invalid shortform properties", () => {
+    (0, import_validate.validate)({
+      background: "red"
+    }), (0, import_validate.validate)({
+      font: "arial"
+    }), (0, import_validate.validate)({
+      borderTop: "1px solid red"
+    }), expect(console.error).toHaveBeenCalled();
+  }), test("valid shortform values", () => {
+    (0, import_validate.validate)({
+      flex: 1
+    }), (0, import_validate.validate)({
+      margin: 10
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * 1px)"
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * calc(10 * 1px))"
+    }), expect(console.error).not.toHaveBeenCalled();
+  }), test("invalid shortform multi-values", () => {
+    (0, import_validate.validate)({
+      flex: "1 1 25%"
+    }), (0, import_validate.validate)({
+      margin: "10px 20px"
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * 1px) var(--test)"
+    }), expect(console.error).toHaveBeenCalledTimes(3);
+  });
+});

package/dist/cjs/StyleSheet/compiler/createReactDOMStyle.cjs

@@ -0,0 +1,99 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var createReactDOMStyle_exports = {};
+__export(createReactDOMStyle_exports, {
+  createTransformValue: () => createTransformValue,
+  default: () => createReactDOMStyle_default
+});
+module.exports = __toCommonJS(createReactDOMStyle_exports);
+var import_canUseDOM = __toESM(require("../../modules/canUseDOM.cjs")),
+  import_normalizeValueWithProperty = __toESM(require("./normalizeValueWithProperty.cjs"));
+const emptyObject = {},
+  supportsCSS3TextDecoration = !import_canUseDOM.default || window.CSS != null && window.CSS.supports != null && (window.CSS.supports("text-decoration-line", "none") || window.CSS.supports("-webkit-text-decoration-line", "none")),
+  ignoredProps = {
+    elevation: !0,
+    overlayColor: !0,
+    resizeMode: !0,
+    tintColor: !0
+  },
+  MONOSPACE_FONT_STACK = "monospace,monospace",
+  SYSTEM_FONT_STACK = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif',
+  STYLE_SHORT_FORM_EXPANSIONS = {
+    borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+    borderRadius: ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"],
+    borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+    borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+    marginHorizontal: ["marginRight", "marginLeft"],
+    marginVertical: ["marginTop", "marginBottom"],
+    overflow: ["overflowX", "overflowY"],
+    overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+    paddingHorizontal: ["paddingRight", "paddingLeft"],
+    paddingVertical: ["paddingTop", "paddingBottom"]
+  },
+  mapTransform = transform => {
+    const type = Object.keys(transform)[0],
+      value = transform[type];
+    if (type === "matrix" || type === "matrix3d") return `${type}(${value.join(",")})`;
+    {
+      const normalizedValue = (0, import_normalizeValueWithProperty.default)(value, type);
+      return `${type}(${normalizedValue})`;
+    }
+  },
+  createTransformValue = style => {
+    let transform = style.transform;
+    return Array.isArray(style.transform) && (transform = style.transform.map(mapTransform).join(" ")), transform;
+  },
+  createReactDOMStyle = (style, isInline) => {
+    if (!style) return emptyObject;
+    const resolvedStyle = {};
+    for (const prop in style) {
+      const value = style[prop];
+      if (
+      // Ignore everything with a null value
+      !(value == null ||
+      // Ignore some React Native styles
+      ignoredProps[prop])) if (prop === "aspectRatio") resolvedStyle[prop] = value.toString();else if (prop === "backgroundClip") value === "text" && (resolvedStyle.backgroundClip = value, resolvedStyle.WebkitBackgroundClip = value);else if (prop === "flex") value === -1 ? (resolvedStyle.flexGrow = 0, resolvedStyle.flexShrink = 1, resolvedStyle.flexBasis = "auto") : resolvedStyle.flex = value;else if (prop === "font") resolvedStyle[prop] = value.replace("System", SYSTEM_FONT_STACK);else if (prop === "fontFamily") {
+        if (value.indexOf("System") > -1) {
+          const stack = value.split(/,\s*/);
+          stack[stack.indexOf("System")] = SYSTEM_FONT_STACK, resolvedStyle[prop] = stack.join(",");
+        } else value === "monospace" ? resolvedStyle[prop] = MONOSPACE_FONT_STACK : resolvedStyle[prop] = value;
+      } else if (prop === "fontVariant") Array.isArray(value) && value.length > 0 && (resolvedStyle.fontVariant = value.join(" "));else if (prop === "textAlignVertical") resolvedStyle.verticalAlign = value === "center" ? "middle" : value;else if (prop === "textDecorationLine") supportsCSS3TextDecoration ? resolvedStyle.textDecorationLine = value : resolvedStyle.textDecoration = value;else if (prop === "transform" || prop === "transformMatrix") resolvedStyle.transform = createTransformValue(style);else if (prop === "writingDirection") resolvedStyle.direction = value;else {
+        const value2 = (0, import_normalizeValueWithProperty.default)(style[prop], prop),
+          longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop];
+        isInline && prop === "margin" ? (style.marginHorizontal == null && (resolvedStyle.marginLeft = value2, resolvedStyle.marginRight = value2), style.marginVertical == null && (resolvedStyle.marginTop = value2, resolvedStyle.marginBottom = value2)) : isInline && prop === "padding" ? (style.paddingHorizontal == null && (resolvedStyle.paddingLeft = value2, resolvedStyle.paddingRight = value2), style.paddingVertical == null && (resolvedStyle.paddingTop = value2, resolvedStyle.paddingBottom = value2)) : longFormProperties ? longFormProperties.forEach((longForm, i) => {
+          style[longForm] == null && (resolvedStyle[longForm] = value2);
+        }) : resolvedStyle[prop] = Array.isArray(value2) ? value2.join(",") : value2;
+      }
+    }
+    return resolvedStyle;
+  };
+var createReactDOMStyle_default = createReactDOMStyle;