@wlloyalty/wll-react-sdk 1.0.98 → 1.0.100

package/dist/native.js

@@ -1680,8 +1680,15 @@ var validateTheme = function (theme) {
         'surfaceText',
         'text',
     ];
-    // fontFamily is optional - it has a default value in defaultTheme
     var missingOrInvalidColors = requiredColors.filter(function (color) { return !theme[color] || !isValidColor(theme[color]); });
+    if (missingOrInvalidColors.length > 0) {
+        console.warn('Theme validation failed. Missing or invalid colors:', missingOrInvalidColors.map(function (color) { return ({
+            color: color,
+            value: theme[color],
+            exists: !!theme[color],
+            isValid: theme[color] ? isValidColor(theme[color]) : false,
+        }); }));
+    }
     return missingOrInvalidColors.length === 0;
 };
 /**
@@ -1691,7 +1698,11 @@ var validateTheme = function (theme) {
  */
 var createSafeColor = function (color) {
     try {
-        return Color(color);
+        var colorInstance = Color(color);
+        console.log('Original color:', color);
+        console.log('Color instance toString:', colorInstance.toString());
+        console.log('Color instance hex:', colorInstance.hex());
+        return colorInstance;
     }
     catch (error) {
         console.error("Invalid color value: ".concat(color), error);
@@ -2300,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;