@wlloyalty/wll-react-sdk 1.0.105 → 1.0.107

package/dist/native.js

@@ -1655,6 +1655,13 @@ var EventEmitter = /** @class */ (function () {
  */
 var sdkEventEmitter = new EventEmitter();
 
+var IS_WEB = reactNative.Platform.OS === "web";
+var IS_IOS = reactNative.Platform.OS === "ios";
+var IS_ANDROID = reactNative.Platform.OS === "android";
+var IS_MOBILE = IS_IOS || IS_ANDROID;
+var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
+var SCREEN_WIDTH = width;
+
 var sizes = {
     borderRadiusSm: 15,
     borderRadiusLg: 20,
@@ -1693,13 +1700,24 @@ var defaultTheme = {
     positive: '#008000',
     negative: '#ff0000',
 };
-
-var IS_WEB = reactNative.Platform.OS === "web";
-var IS_IOS = reactNative.Platform.OS === "ios";
-var IS_ANDROID = reactNative.Platform.OS === "android";
-var IS_MOBILE = IS_IOS || IS_ANDROID;
-var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
-var SCREEN_WIDTH = width;
+/**
+ * Creates appropriate directional margin styles for both web and native platforms.
+ * Handles RTL layouts correctly across platforms by using the I18nManager.
+ *
+ * @param value - The margin value to apply
+ * @returns An object with the appropriate margin style property
+ */
+var getDirectionalMargin = function (value) {
+    if (IS_WEB) {
+        // Check document direction for web
+        // We need to use this because React Native Web does not support I18nManager
+        // and marginStart/marginEnd resolves to margin-left/margin-right and not margin-inline-start/end
+        var isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+        return isRTL ? { marginLeft: value } : { marginRight: value };
+    }
+    // For native platforms, use marginEnd which automatically handles RTL
+    return { marginEnd: value };
+};
 
 var COLOR_CONSTANTS = {
     MINIMUM_CONTRAST_RATIO: 2,
@@ -3422,14 +3440,7 @@ var useBannerTileStyles = function () {
         slideContent: {
             flex: 1,
         },
-        mediaContainer: {
-            aspectRatio: 1,
-            position: 'relative',
-            overflow: 'hidden',
-            marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
-            maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
-            minHeight: 120,
-        },
+        mediaContainer: __assign(__assign({ aspectRatio: 1, position: 'relative', overflow: 'hidden' }, getDirectionalMargin(useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet))), { maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet), minHeight: 120 }),
         media: {
             position: 'absolute',
             width: '100%',
@@ -3583,11 +3594,7 @@ var useContentTileStyles = function (hasArtwork) {
             flex: 1,
         },
         header: getHeaderStyle(hasArtwork),
-        tileTitle: {
-            maxWidth: '90%',
-            flex: 1,
-            marginRight: 8,
-        },
+        tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
     });
 };
 
@@ -4016,7 +4023,7 @@ var Grid = function (_a) {
                 tileContainers.push(jsxRuntimeExports.jsx(reactNative.View, { style: [
                         // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
                         getTileWidth(columnsPerRow),
-                        !isLastInRow && { marginRight: GRID_GAP },
+                        !isLastInRow && getDirectionalMargin(GRID_GAP),
                     ], children: jsxRuntimeExports.jsx(TileContainer, { tiles: currentTiles }) }, "container-".concat(index)));
                 currentTiles = [];
             }
@@ -4795,11 +4802,7 @@ var useRewardTileStyles = function () {
             width: '100%',
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
-        tileTitle: {
-            maxWidth: '90%',
-            flex: 1,
-            marginRight: 8,
-        },
+        tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
     });
 };