@wlloyalty/wll-react-sdk 1.0.99 → 1.0.100

package/dist/native.js

@@ -2311,11 +2311,33 @@ var Text = function (_a) {
         }
     };
     var variantStyle = getVariantStyle(variant);
-    var baseTextStyle = {
-        fontFamily: theme.fontFamily,
-    };
-    // NOTE: We must apply fontFamily as base style to ensure it's always applied
-    return jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: [baseTextStyle, variantStyle, style] }, props));
+    // NOTE: React Native Web has different style resolution rules compared to CSS.
+    // 1. We create styles using StyleSheet.create for better performance
+    // 2. Base styles set the initial fontFamily
+    // 3. variantStyle contains responsive fontSize and other variant-specific styles
+    // 4. webOverrides ensures fontFamily is correctly applied on web platform
+    //    (prevents system font stack from being incorrectly applied)
+    // 5. custom style prop has highest precedence
+    // The order matters because RN Web resolves styles by specific properties
+    // rather than last-declaration-wins like in CSS
+    // https://necolas.github.io/react-native-web/docs/styling/#how-it-works
+    var styles = reactNative.StyleSheet.create({
+        base: {
+            fontFamily: theme.fontFamily,
+        },
+        webOverrides: IS_WEB
+            ? {
+                fontFamily: theme.fontFamily,
+            }
+            : {},
+    });
+    var combinedStyles = [
+        styles.base,
+        variantStyle,
+        styles.webOverrides,
+        style,
+    ];
+    return jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props));
 };
 
 var MAX_WIDTH = 1080;