@wlloyalty/wll-react-sdk 1.0.105 → 1.0.107

package/dist/types/utils/styling.d.ts

@@ -24,3 +24,23 @@ export declare const commonStyles: {
     };
 };
 export declare const defaultTheme: BaseThemeObject;
+/**
+ * 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
+ */
+export declare const getDirectionalMargin: (value: number) => {
+    marginLeft: number;
+    marginRight?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginRight: number;
+    marginLeft?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginEnd: number;
+    marginLeft?: undefined;
+    marginRight?: undefined;
+};

package/dist/web.js

@@ -7986,45 +7986,6 @@ var EventEmitter$1 = /** @class */function () {
  */
 var sdkEventEmitter = new EventEmitter$1();
 
-var sizes = {
-  borderRadiusSm: 15,
-  borderRadiusLg: 20,
-  borderRadiusButton: 9,
-  borderRadiusRounded: 9999,
-  xxxs: 4,
-  xxs: 8,
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
-  xl: 18,
-  xxl: 24,
-  xxxl: 32,
-  xxxxl: 40,
-  xxxxxl: 60
-};
-var commonStyles = StyleSheet$1.create({
-  emptyContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-var defaultTheme = {
-  fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif',
-  background: '#F0F0F0',
-  text: '#000000',
-  primary: '#392ed7',
-  accent: '#ff6a3d',
-  surface: '#f8f7fc',
-  surfaceText: '#000000',
-  pageButtonBackground: '#392ed7',
-  pageButtonText: '#ffffff',
-  errorPrimary: '#000000',
-  positive: '#008000',
-  negative: '#ff0000'
-};
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -8229,6 +8190,69 @@ var _a$1 = Dimensions.get("window"),
   _a$1.height;
 var SCREEN_WIDTH = width;
 
+var sizes = {
+  borderRadiusSm: 15,
+  borderRadiusLg: 20,
+  borderRadiusButton: 9,
+  borderRadiusRounded: 9999,
+  xxxs: 4,
+  xxs: 8,
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32,
+  xxxxl: 40,
+  xxxxxl: 60
+};
+var commonStyles = StyleSheet$1.create({
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+var defaultTheme = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif',
+  background: '#F0F0F0',
+  text: '#000000',
+  primary: '#392ed7',
+  accent: '#ff6a3d',
+  surface: '#f8f7fc',
+  surfaceText: '#000000',
+  pageButtonBackground: '#392ed7',
+  pageButtonText: '#ffffff',
+  errorPrimary: '#000000',
+  positive: '#008000',
+  negative: '#ff0000'
+};
+/**
+ * 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,
   DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
@@ -20202,14 +20226,14 @@ var useBannerTileStyles = function () {
     slideContent: {
       flex: 1
     },
-    mediaContainer: {
+    mediaContainer: __assign(__assign({
       aspectRatio: 1,
       position: 'relative',
-      overflow: 'hidden',
-      marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
+      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%',
@@ -20396,11 +20420,10 @@ var useContentTileStyles = function (hasArtwork) {
       flex: 1
     },
     header: getHeaderStyle(hasArtwork),
-    tileTitle: {
+    tileTitle: __assign({
       maxWidth: '90%',
-      flex: 1,
-      marginRight: 8
-    }
+      flex: 1
+    }, getDirectionalMargin(8))
   });
 };
 
@@ -20979,9 +21002,7 @@ var Grid = function (_a) {
           key: "container-".concat(index),
           style: [
           // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
-          getTileWidth(columnsPerRow), !isLastInRow && {
-            marginRight: GRID_GAP
-          }]
+          getTileWidth(columnsPerRow), !isLastInRow && getDirectionalMargin(GRID_GAP)]
         }, /*#__PURE__*/React.createElement(TileContainer, {
           tiles: currentTiles
         })));
@@ -22036,11 +22057,10 @@ var useRewardTileStyles = function () {
       width: '100%',
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     },
-    tileTitle: {
+    tileTitle: __assign({
       maxWidth: '90%',
-      flex: 1,
-      marginRight: 8
-    }
+      flex: 1
+    }, getDirectionalMargin(8))
   });
 };