@wlloyalty/wll-react-sdk 1.6.15 → 1.6.16

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import * as LucideReactIcons from 'lucide-react';
 import * as react_native from 'react-native';
-import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps, AccessibilityRole, RefreshControl } from 'react-native';
+import { ViewProps, ImageSourcePropType, StyleProp, TextProps as TextProps$1, TextStyle, ViewStyle, ImageProps, AccessibilityRole, RefreshControl } from 'react-native';
 
 declare const sizes: {
     readonly borderRadiusSm: 15;
@@ -383,7 +383,7 @@ declare const ProgressBar: ({ percentage, variant, height, animationDuration, }:
 
 type ProgressiveImageProps = {
     source: ImageSourcePropType;
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<any>;
     isDesaturated?: boolean;
     alt?: string;
     [key: string]: any;

package/dist/native.js

@@ -2343,150 +2343,6 @@ var ProgressBar = function (_a) {
     return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, children: jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles.progress, progressStyles, progressWidth] }) }));
 };
 
-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 reactNative.Animated.Value(0)).current;
-    var theme = useWllSdk().theme;
-    var onImageLoad = function () {
-        requestAnimationFrame(function () {
-            reactNative.Animated.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 = (jsxRuntimeExports.jsx(reactNative.Animated.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 (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$7.imageOverlay,
-                    {
-                        backgroundColor: backgroundColor,
-                        opacity: imageAnimated.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [1, 0],
-                        }),
-                    },
-                ] }), IS_WEB ? (baseImage) : (
-            // For React Native, use the overlay technique
-            jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [baseImage, isDesaturated && (jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
-                            styles$7.imageOverlay,
-                            {
-                                opacity: imageAnimated.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0, 0.8],
-                                }),
-                                tintColor: 'gray',
-                            },
-                        ] })))] }))] }));
-};
-var styles$7 = reactNative.StyleSheet.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 = reactNative.StyleSheet.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 (jsxRuntimeExports.jsx(reactNative.Text, __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";
@@ -2677,47 +2533,6 @@ var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
     }, [tile, ctaLink, ctaLinkTarget, handleNavigation]);
 };
 
-var BannerContext = 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 jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: isInteractive ? (jsxRuntimeExports.jsx(reactNative.Pressable, { 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: children })) : (jsxRuntimeExports.jsx(reactNative.View, { testID: testID || 'banner-tile', style: commonStyles, accessible: true, role: "article", accessibilityLabel: accessibilityLabel || title || 'Banner', children: children })) });
-};
-var styles$6 = reactNative.StyleSheet.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 ({
         isFullSize: tile.tileHeight === exports.TileHeight.Full,
@@ -2725,6 +2540,84 @@ 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 = reactNative.StyleSheet.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 (jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props, { accessible: true, role: accessibilityRole })));
+};
+
 /**
  * Renders the body text of a BaseTile component.
  *
@@ -2781,6 +2674,7 @@ var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
 
 var baseStyles = reactNative.StyleSheet.create({
     imageContainer: {
+        width: '100%',
         position: 'relative',
     },
     container: {
@@ -3057,6 +2951,122 @@ 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 reactNative.Animated.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 () {
+            reactNative.Animated.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 = (jsxRuntimeExports.jsx(reactNative.Animated.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 (jsxRuntimeExports.jsxs(reactNative.View, { style: [
+            styles$7.container,
+            isHalfHeight && { minHeight: 0 },
+            style,
+            { backgroundColor: backgroundColor },
+        ], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
+                    styles$7.imageOverlay,
+                    {
+                        backgroundColor: backgroundColor,
+                        opacity: imageAnimated.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [1, 0],
+                        }),
+                    },
+                ] }), IS_WEB ? (baseImage) : (
+            // For React Native, use the overlay technique
+            jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [baseImage, isDesaturated && (jsxRuntimeExports.jsx(reactNative.Animated.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 = reactNative.StyleSheet.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 = 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 jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: isInteractive ? (jsxRuntimeExports.jsx(reactNative.Pressable, { 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: children })) : (jsxRuntimeExports.jsx(reactNative.View, { testID: testID || 'banner-tile', style: commonStyles, accessible: true, role: "article", accessibilityLabel: accessibilityLabel || title || 'Banner', children: children })) });
+};
+var styles$6 = reactNative.StyleSheet.create({
+    container: {
+        width: '100%',
+        maxWidth: MAX_WIDTH,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        overflow: 'hidden',
+    },
+});
+
 var Indicator = function () {
     var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
     var getCurrentLayout = function () {
@@ -3404,12 +3414,7 @@ var useBadgeTileStyles = function () {
             fontSize: 14,
             fontWeight: 'bold',
         },
-        header: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-        },
+        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%',
@@ -3546,7 +3551,14 @@ var useBannerTileStyles = function () {
         slideContent: {
             flex: 1,
         },
-        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 }),
+        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,
+        },
         media: {
             position: 'absolute',
             width: '100%',
@@ -3687,6 +3699,7 @@ var useContentTileStyles = function (hasArtwork) {
             overflow: 'hidden',
         },
         image: {
+            width: '100%',
             resizeMode: 'cover',
         },
         content: {
@@ -3708,7 +3721,9 @@ var ContentTileMedia = function (_a) {
         return null;
     var hasArtwork = Boolean(artworkUrl);
     var styles = useContentTileStyles(hasArtwork);
-    var containerStyle = __assign({ flexBasis: isArtworkOnly ? '100%' : '50%' }, (isArtworkOnly && { aspectRatio: 1 }));
+    var containerStyle = {
+        flexBasis: isArtworkOnly ? '100%' : '50%',
+    };
     return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", role: "img", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
 };
 
@@ -4717,15 +4732,17 @@ var Column = function (_a) {
  */
 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 (jsxRuntimeExports.jsx(reactNative.View, __assign({ style: [
-            {
-                flex: 1,
+            __assign({ flex: 1, 
                 // If the language is Arabic (RTL), use 'rtl', otherwise 'ltr'.
-                direction: isRTL ? 'rtl' : 'ltr',
-            },
+                direction: isRTL ? 'rtl' : 'ltr' }, (isRTL && {
+                marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
+            })),
             style,
         ] }, rest, { children: children })));
 };
@@ -4984,9 +5001,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, showName = _b === void 0 ? true : _b, _c = _a.name, name = _c === void 0 ? '' : _c;
@@ -5001,8 +5018,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, _b = _a.name, name = _b === void 0 ? 'Reward' : _b;
@@ -5022,7 +5039,7 @@ var RewardCategoryTileRoot = function (_a) {
     var tile = _a.tile;
     if (!tile || !tile.active || !tile.configuration)
         return null;
-    return (jsxRuntimeExports.jsx(BaseTile, { tile: tile, children: jsxRuntimeExports.jsxs(reactNative.View, { style: { aspectRatio: 1 }, children: [jsxRuntimeExports.jsx(RewardCategoryTile.Header, {}), jsxRuntimeExports.jsx(RewardCategoryTile.Media, {})] }) }));
+    return (jsxRuntimeExports.jsx(BaseTile, { tile: tile, children: jsxRuntimeExports.jsxs(reactNative.View, { style: { aspectRatio: tile.tileHeight === exports.TileHeight.Half ? 2 : 1 }, children: [jsxRuntimeExports.jsx(RewardCategoryTile.Header, {}), jsxRuntimeExports.jsx(RewardCategoryTile.Media, {})] }) }));
 };
 /**
  * The RewardCategoryTile component with subcomponents attached.
@@ -5134,11 +5151,9 @@ var RewardTileMedia = function (_a) {
             height: '100%',
             marginBottom: 0,
             minHeight: 0,
-            aspectRatio: 1,
+            aspectRatio: tileContext.tileHeight === exports.TileHeight.Half ? 2 : 1,
         }
-        : {
-            flexBasis: '50%',
-        };
+        : __assign({ flexBasis: '50%' }, (tileContext.tileHeight === exports.TileHeight.Half && { minHeight: 0 }));
     return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: [jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }), isLocked && (jsxRuntimeExports.jsx(reactNative.View, { style: styles.lockOverlay, testID: "lock-overlay", children: jsxRuntimeExports.jsx(Icon, { name: "LockKeyhole", size: 48, color: "white" }) }))] }));
 };
 
@@ -5656,7 +5671,7 @@ var TileContainer = function (_a) {
     var allHalfHeight = tiles.length > 0 &&
         tiles.every(function (tile) { return tile.tileHeight === exports.TileHeight.Half; });
     var halfHeightGap = allHalfHeight ? GRID_GAP / 2 : GRID_GAP;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles.container, testID: "tile-container", children: tiles.map(function (tile, index) {
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.container, allHalfHeight && { aspectRatio: 1 }], testID: "tile-container", children: tiles.map(function (tile, index) {
             var TileComponent = TILE_COMPONENTS[tile.type];
             var isHalfHeight = tile.tileHeight === exports.TileHeight.Half;
             return (jsxRuntimeExports.jsx(reactNative.View, { style: [