@wlloyalty/wll-react-sdk 1.6.15 → 1.6.17

package/dist/types/components/atoms/BaseTile/index.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import { ViewStyle } from 'react-native';
 import { Tile } from '../../../types/tile';
 import { WithChildren } from '../../../types/helpers';
+/**
+ * Context to provide the current tile to child components.
+ */
+export declare const TileContext: React.Context<Tile | null>;
 /**
  * Custom hook to access the TileContext.
  *

package/dist/types/components/atoms/BaseTile/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const baseStyles: {
     imageContainer: {
+        width: "100%";
         position: "relative";
     };
     container: {

package/dist/types/components/atoms/ProgressiveImage/ProgressiveImage.stories.d.ts

@@ -4,7 +4,7 @@ export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     [key: string]: any;
     source: import("react-native").ImageSourcePropType;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    style?: import("react-native").StyleProp<any>;
     isDesaturated?: boolean;
     alt?: string;
 }>;

package/dist/types/components/atoms/ProgressiveImage/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp } from 'react-native';
 type ProgressiveImageProps = {
     source: ImageSourcePropType;
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<any>;
     isDesaturated?: boolean;
     alt?: string;
     [key: string]: any;

package/dist/types/components/molecules/Grid/Grid.stories.d.ts

@@ -4,3 +4,6 @@ export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section: import("../../../types/section").TSection;
 }>;
+export declare const MixedHeights: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    section: import("../../../types/section").TSection;
+}>;

package/dist/web.js

@@ -18935,181 +18935,6 @@ var ProgressBar = function (_a) {
   }));
 };
 
-var ProgressiveImage = function (_a) {
-  var source = _a.source,
-    style = _a.style,
-    _b = _a.isDesaturated,
-    isDesaturated = _b === void 0 ? false : _b,
-    alt = _a.alt,
-    props = __rest(_a, ["source", "style", "isDesaturated", "alt"]);
-  var imageAnimated = React.useRef(new Animated$1.Value(0)).current;
-  var theme = useWllSdk().theme;
-  var onImageLoad = function () {
-    requestAnimationFrame(function () {
-      Animated$1.timing(imageAnimated, {
-        toValue: 1,
-        useNativeDriver: true,
-        duration: 300
-      }).start();
-    });
-  };
-  var baseColor = theme.alphaDerivedPrimary[20];
-  var desaturatedColor = desaturateColor(baseColor);
-  var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-  var baseImage = /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
-    source: source,
-    style: [styles$7.imageOverlay, __assign({
-      opacity: imageAnimated
-    }, IS_WEB && {
-      filter: isDesaturated ? 'grayscale(100%)' : undefined
-    })],
-    onLoad: onImageLoad,
-    accessibilityLabel: alt,
-    accessible: true,
-    role: "img"
-  }));
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$7.container, style, {
-      backgroundColor: backgroundColor
-    }]
-  }, /*#__PURE__*/React.createElement(Animated$1.View, {
-    style: [styles$7.imageOverlay, {
-      backgroundColor: backgroundColor,
-      opacity: imageAnimated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 0]
-      })
-    }]
-  }), IS_WEB ? baseImage : (
-  /*#__PURE__*/
-  // For React Native, use the overlay technique
-  React.createElement(React.Fragment, null, baseImage, isDesaturated && (/*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
-    source: source,
-    style: [styles$7.imageOverlay, {
-      opacity: imageAnimated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 0.8]
-      }),
-      tintColor: 'gray'
-    }]
-  }))))));
-};
-var styles$7 = StyleSheet$1.create({
-  imageOverlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0
-  },
-  container: {
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-    minHeight: 130
-  }
-});
-
-var Text = function (_a) {
-  var _b = _a.variant,
-    variant = _b === void 0 ? 'body' : _b,
-    style = _a.style;
-    _a.isSurface;
-    var props = __rest(_a, ["variant", "style", "isSurface"]);
-  var theme = useWllSdk().theme;
-  var _d = useResponsive(),
-    isDesktop = _d.isDesktop,
-    isTablet = _d.isTablet;
-  var getVariantStyle = function (variant) {
-    var baseStyle = {
-      color: theme.surfaceText
-    };
-    switch (variant) {
-      case 'eyebrow':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
-          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
-        });
-      case 'title':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
-      case 'body':
-        return {
-          color: theme.derivedSurfaceText[20],
-          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet)
-        };
-      case 'caption':
-        return __assign(__assign({}, baseStyle), {
-          fontWeight: 'bold',
-          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
-          color: theme.primary
-        });
-      case 'description':
-      case 'label':
-      default:
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
-        });
-    }
-  };
-  var variantStyle = getVariantStyle(variant);
-  // 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
-    } : {}
-  });
-  // Determine appropriate accessibility role based on variant
-  // This helps screen readers understand the semantic meaning
-  var accessibilityRole;
-  switch (variant) {
-    case 'title':
-      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
-      break;
-    case 'caption':
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-      break;
-    case 'eyebrow':
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-      break;
-    case 'description':
-      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
-      break;
-    case 'label':
-      accessibilityRole = IS_MOBILE ? 'option' : 'text';
-      break;
-    default:
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-  }
-  var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
-  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
-    style: combinedStyles
-  }, props, {
-    accessible: true,
-    role: accessibilityRole
-  }));
-};
-
-var MAX_WIDTH = 1080;
-var SLIDE_WIDTH = MAX_WIDTH;
-var BUTTON_SIZE = 42;
-
 exports.CTALinkTarget = void 0;
 (function (CTALinkTarget) {
   CTALinkTarget["sameWindow"] = "SAME_FRAME";
@@ -19296,66 +19121,6 @@ var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
   }, [tile, ctaLink, ctaLinkTarget, handleNavigation]);
 };
 
-var BannerContext = /*#__PURE__*/React.createContext(null);
-var useBannerContext = function () {
-  var context = React.useContext(BannerContext);
-  if (!context) {
-    throw new Error('Banner components must be used within a BaseBanner');
-  }
-  return context;
-};
-var BaseBanner = function (_a) {
-  var tile = _a.tile,
-    children = _a.children,
-    style = _a.style,
-    testID = _a.testID,
-    accessibilityLabel = _a.accessibilityLabel;
-  var theme = useWllSdk().theme;
-  var _b = tile.configuration,
-    ctaLink = _b.ctaLink,
-    ctaLinkTarget = _b.ctaLinkTarget,
-    title = _b.title,
-    ctaText = _b.ctaText;
-  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  var hasCTA = Boolean(ctaText);
-  var isInteractive = Boolean(ctaLink && !hasCTA);
-  var commonStyles = [styles$6.container, style, {
-    backgroundColor: theme.surface,
-    borderRadius: theme.sizes.borderRadiusLg
-  }];
-  return /*#__PURE__*/React.createElement(BannerContext.Provider, {
-    value: tile
-  }, isInteractive ? (/*#__PURE__*/React.createElement(Pressable$1, {
-    testID: testID || 'banner-tile',
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return __spreadArray(__spreadArray([], commonStyles, true), [{
-        opacity: pressed ? 0.7 : 1
-      }], false);
-    },
-    onPress: handlePress,
-    accessible: true,
-    role: "button",
-    accessibilityLabel: accessibilityLabel || "".concat(title, " - Click to open")
-  }, children)) : (/*#__PURE__*/React.createElement(View$2, {
-    testID: testID || 'banner-tile',
-    style: commonStyles,
-    accessible: true,
-    role: "article",
-    accessibilityLabel: accessibilityLabel || title || 'Banner'
-  }, children)));
-};
-var styles$6 = StyleSheet$1.create({
-  container: {
-    width: '100%',
-    maxWidth: MAX_WIDTH,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    overflow: 'hidden'
-  }
-});
-
 var useTileSize = function (tile) {
   return React.useMemo(function () {
     return {
@@ -19365,6 +19130,100 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
+var Text = function (_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    style = _a.style;
+    _a.isSurface;
+    var props = __rest(_a, ["variant", "style", "isSurface"]);
+  var theme = useWllSdk().theme;
+  var _d = useResponsive(),
+    isDesktop = _d.isDesktop,
+    isTablet = _d.isTablet;
+  var getVariantStyle = function (variant) {
+    var baseStyle = {
+      color: theme.surfaceText
+    };
+    switch (variant) {
+      case 'eyebrow':
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
+          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+        });
+      case 'title':
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+          fontWeight: 'bold'
+        });
+      case 'body':
+        return {
+          color: theme.derivedSurfaceText[20],
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet)
+        };
+      case 'caption':
+        return __assign(__assign({}, baseStyle), {
+          fontWeight: 'bold',
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
+          color: theme.primary
+        });
+      case 'description':
+      case 'label':
+      default:
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+        });
+    }
+  };
+  var variantStyle = getVariantStyle(variant);
+  // 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
+    } : {}
+  });
+  // Determine appropriate accessibility role based on variant
+  // This helps screen readers understand the semantic meaning
+  var accessibilityRole;
+  switch (variant) {
+    case 'title':
+      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
+      break;
+    case 'caption':
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+      break;
+    case 'eyebrow':
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+      break;
+    case 'description':
+      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
+      break;
+    case 'label':
+      accessibilityRole = IS_MOBILE ? 'option' : 'text';
+      break;
+    default:
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+  }
+  var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
+  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
+    style: combinedStyles
+  }, props, {
+    accessible: true,
+    role: accessibilityRole
+  }));
+};
+
 /**
  * Renders the body text of a BaseTile component.
  *
@@ -19423,6 +19282,7 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 
 var baseStyles = StyleSheet$1.create({
   imageContainer: {
+    width: '100%',
     position: 'relative'
   },
   container: {
@@ -19758,6 +19618,151 @@ var BaseTile = Object.assign(BaseTileRoot, {
   Body: BaseTileBody
 });
 
+var ProgressiveImage = function (_a) {
+  var source = _a.source,
+    style = _a.style,
+    _b = _a.isDesaturated,
+    isDesaturated = _b === void 0 ? false : _b,
+    alt = _a.alt,
+    props = __rest(_a, ["source", "style", "isDesaturated", "alt"]);
+  var imageAnimated = React.useRef(new Animated$1.Value(0)).current;
+  var theme = useWllSdk().theme;
+  var tileContext = React.useContext(TileContext);
+  var isHalfHeight = (tileContext === null || tileContext === void 0 ? void 0 : tileContext.tileHeight) === exports.TileHeight.Half;
+  var onImageLoad = function () {
+    requestAnimationFrame(function () {
+      Animated$1.timing(imageAnimated, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300
+      }).start();
+    });
+  };
+  var baseColor = theme.alphaDerivedPrimary[20];
+  var desaturatedColor = desaturateColor(baseColor);
+  var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
+  var baseImage = /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
+    source: source,
+    style: [styles$7.imageOverlay, style, __assign({
+      opacity: imageAnimated
+    }, IS_WEB && {
+      filter: isDesaturated ? 'grayscale(100%)' : undefined
+    })],
+    onLoad: onImageLoad,
+    accessibilityLabel: alt,
+    accessible: true,
+    role: "img"
+  }));
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles$7.container, isHalfHeight && {
+      minHeight: 0
+    }, style, {
+      backgroundColor: backgroundColor
+    }]
+  }, /*#__PURE__*/React.createElement(Animated$1.View, {
+    style: [styles$7.imageOverlay, {
+      backgroundColor: backgroundColor,
+      opacity: imageAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0]
+      })
+    }]
+  }), IS_WEB ? baseImage : (
+  /*#__PURE__*/
+  // For React Native, use the overlay technique
+  React.createElement(React.Fragment, null, baseImage, isDesaturated && (/*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
+    source: source,
+    style: [styles$7.imageOverlay, style, {
+      opacity: imageAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.8]
+      }),
+      tintColor: 'gray'
+    }]
+  }))))));
+};
+var styles$7 = StyleSheet$1.create({
+  imageOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0
+  },
+  container: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    minHeight: 130
+  }
+});
+
+var MAX_WIDTH = 1080;
+var SLIDE_WIDTH = MAX_WIDTH;
+var BUTTON_SIZE = 42;
+
+var BannerContext = /*#__PURE__*/React.createContext(null);
+var useBannerContext = function () {
+  var context = React.useContext(BannerContext);
+  if (!context) {
+    throw new Error('Banner components must be used within a BaseBanner');
+  }
+  return context;
+};
+var BaseBanner = function (_a) {
+  var tile = _a.tile,
+    children = _a.children,
+    style = _a.style,
+    testID = _a.testID,
+    accessibilityLabel = _a.accessibilityLabel;
+  var theme = useWllSdk().theme;
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title,
+    ctaText = _b.ctaText;
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  var hasCTA = Boolean(ctaText);
+  var isInteractive = Boolean(ctaLink && !hasCTA);
+  var commonStyles = [styles$6.container, style, {
+    backgroundColor: theme.surface,
+    borderRadius: theme.sizes.borderRadiusLg
+  }];
+  return /*#__PURE__*/React.createElement(BannerContext.Provider, {
+    value: tile
+  }, isInteractive ? (/*#__PURE__*/React.createElement(Pressable$1, {
+    testID: testID || 'banner-tile',
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return __spreadArray(__spreadArray([], commonStyles, true), [{
+        opacity: pressed ? 0.7 : 1
+      }], false);
+    },
+    onPress: handlePress,
+    accessible: true,
+    role: "button",
+    accessibilityLabel: accessibilityLabel || "".concat(title, " - Click to open")
+  }, children)) : (/*#__PURE__*/React.createElement(View$2, {
+    testID: testID || 'banner-tile',
+    style: commonStyles,
+    accessible: true,
+    role: "article",
+    accessibilityLabel: accessibilityLabel || title || 'Banner'
+  }, children)));
+};
+var styles$6 = StyleSheet$1.create({
+  container: {
+    width: '100%',
+    maxWidth: MAX_WIDTH,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    overflow: 'hidden'
+  }
+});
+
 /* istanbul ignore file */
 var Indicator = function () {
   var _a = useResponsive$1(),
@@ -20182,12 +20187,16 @@ var useBadgeTileStyles = function () {
       fontSize: 14,
       fontWeight: 'bold'
     },
-    header: {
+    header: __assign(__assign({
+      width: '100%'
+    }, !IS_WEB && {
+      flexBasis: '50%'
+    }), {
       alignItems: 'center',
       justifyContent: 'center',
       position: 'relative',
       marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
-    },
+    }),
     image: {
       width: '100%',
       height: '100%'
@@ -20373,14 +20382,14 @@ var useBannerTileStyles = function () {
     slideContent: {
       flex: 1
     },
-    mediaContainer: __assign(__assign({
+    mediaContainer: {
       aspectRatio: 1,
       position: 'relative',
-      overflow: 'hidden'
-    }, getDirectionalMargin(useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet))), {
+      overflow: 'hidden',
+      marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
       maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
       minHeight: 120
-    }),
+    },
     media: {
       position: 'absolute',
       width: '100%',
@@ -20553,6 +20562,7 @@ var useContentTileStyles = function (hasArtwork) {
       overflow: 'hidden'
     },
     image: {
+      width: '100%',
       resizeMode: 'cover'
     },
     content: {
@@ -20580,7 +20590,7 @@ var ContentTileMedia = function (_a) {
   var styles = useContentTileStyles(hasArtwork);
   var containerStyle = __assign({
     flexBasis: isArtworkOnly ? '100%' : '50%'
-  }, isArtworkOnly && {
+  }, isArtworkOnly && IS_WEB && {
     aspectRatio: 1
   });
   return /*#__PURE__*/React.createElement(View$2, {
@@ -21886,13 +21896,19 @@ var FullFlex = function (_a) {
   var children = _a.children,
     style = _a.style,
     rest = __rest(_a, ["children", "style"]);
+  var _b = useResponsive$1(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
+  var theme = useWllSdk().theme;
   var isRTL = IS_WEB && typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
   return /*#__PURE__*/React.createElement(View$2, __assign({
-    style: [{
+    style: [__assign({
       flex: 1,
       // If the language is Arabic (RTL), use 'rtl', otherwise 'ltr'.
       direction: isRTL ? 'rtl' : 'ltr'
-    }, style]
+    }, isRTL && {
+      marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet)
+    }), style]
   }, rest), children);
 };
 
@@ -22239,9 +22255,9 @@ var useRewardCategoryTileStyles = function () {
  * @returns React.ReactElement or null if showName is false or name is not present
  */
 var RewardCategoryHeader = function () {
+  var tileContext = useTileContext();
   var styles = useRewardCategoryTileStyles();
   var theme = useWllSdk().theme;
-  var tileContext = useTileContext();
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     _b = _a.showName,
@@ -22271,8 +22287,8 @@ var RewardCategoryHeader = function () {
  * @returns React.ReactElement or null if no artwork URL is present
  */
 var RewardCategoryMedia = function () {
-  var styles = useRewardCategoryTileStyles();
   var tileContext = useTileContext();
+  var styles = useRewardCategoryTileStyles();
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     artworkUrl = _a.artworkUrl,
@@ -22304,7 +22320,7 @@ var RewardCategoryTileRoot = function (_a) {
     tile: tile
   }, /*#__PURE__*/React.createElement(View$2, {
     style: {
-      aspectRatio: 1
+      aspectRatio: tile.tileHeight === exports.TileHeight.Half ? 2 : 1
     }
   }, /*#__PURE__*/React.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React.createElement(RewardCategoryTile.Media, null)));
 };
@@ -22433,10 +22449,12 @@ var RewardTileMedia = function (_a) {
     height: '100%',
     marginBottom: 0,
     minHeight: 0,
-    aspectRatio: 1
-  } : {
+    aspectRatio: tileContext.tileHeight === exports.TileHeight.Half ? 2 : 1
+  } : __assign({
     flexBasis: '50%'
-  };
+  }, tileContext.tileHeight === exports.TileHeight.Half && {
+    minHeight: 0
+  });
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "reward-tile-media",
@@ -23210,7 +23228,9 @@ var TileContainer = function (_a) {
   });
   var halfHeightGap = allHalfHeight ? GRID_GAP / 2 : GRID_GAP;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles.container,
+    style: [styles.container, allHalfHeight && {
+      aspectRatio: 1
+    }],
     testID: "tile-container"
   }, tiles.map(function (tile, index) {
     var TileComponent = TILE_COMPONENTS[tile.type];