@wlloyalty/wll-react-sdk 1.0.99 → 1.0.100

package/dist/web.js

@@ -18915,12 +18915,27 @@ 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
+  // 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 = StyleSheet$1.create({
+    base: {
+      fontFamily: theme.fontFamily
+    },
+    webOverrides: IS_WEB ? {
+      fontFamily: theme.fontFamily
+    } : {}
+  });
+  var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
   return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
-    style: [baseTextStyle, variantStyle, style]
+    style: combinedStyles
   }, props));
 };