@wlloyalty/wll-react-sdk 1.0.29 → 1.0.31

package/dist/index.js

@@ -18870,7 +18870,6 @@ MemoedPressable.displayName = 'Pressable';
 var Pressable$1 = MemoedPressable;
 
 var MAX_WIDTH = 1080;
-var SLIDE_WIDTH = MAX_WIDTH;
 var BUTTON_SIZE = 42;
 
 var useHandleTilePress = function (ctaLink, ctaLinkTarget) {
@@ -19408,70 +19407,6 @@ var useBadgeTileStyles = function () {
   });
 };
 
-var BadgeTileInner = function (_a) {
-  var tile = _a.tile;
-  var styles = useBadgeTileStyles();
-  if (!tile) return null;
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.container
-  }, /*#__PURE__*/React$1.createElement(BadgeTile.Media, null, /*#__PURE__*/React$1.createElement(BadgeTile.Status, null)), /*#__PURE__*/React$1.createElement(Column$1, {
-    justify: "between",
-    align: "start"
-  }, /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(BadgeTile.Title, null), /*#__PURE__*/React$1.createElement(BadgeTile.Description, null)), /*#__PURE__*/React$1.createElement(BadgeTile.DateEarned, null))));
-};
-var BadgeTileMedia = function (_a) {
-  var children = _a.children,
-    props = __rest(_a, ["children"]);
-  var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var type = configuration.type,
-    count = configuration.count,
-    artworkUrl = configuration.artworkUrl,
-    emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
-  var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
-  if (!displayUrl) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.header
-  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
-    source: {
-      uri: displayUrl
-    },
-    style: styles.image,
-    resizeMode: "contain",
-    isDesaturated: shouldDesaturate(type, count)
-  })), children);
-};
-var BadgeTileTitle = function () {
-  var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    name = configuration.name,
-    emptyBadgeMessage = configuration.emptyBadgeMessage;
-  var displayText = count === 0 ? emptyBadgeMessage : name;
-  if (!displayText) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
-    variant: "title",
-    style: styles.titleText,
-    numberOfLines: 2,
-    ellipsizeMode: "tail"
-  }, displayText));
-};
-var BadgeTileDescription = function () {
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    description = configuration.description;
-  if (count === 0 || !description) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
-    variant: "body",
-    numberOfLines: 2,
-    ellipsizeMode: "tail"
-  }, description);
-};
 var BadgeTileDateEarned = function () {
   var styles = useBadgeTileStyles();
   var tile = useTileContext();
@@ -19503,6 +19438,44 @@ var BadgeTileDateEarned = function () {
     variant: "label"
   }, "".concat(awardedDatePrefix, " ").concat(formattedDate)));
 };
+
+var BadgeTileDescription = function () {
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var count = configuration.count,
+    description = configuration.description;
+  if (count === 0 || !description) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "body",
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, description);
+};
+
+var BadgeTileMedia = function (_a) {
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  var styles = useBadgeTileStyles();
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var type = configuration.type,
+    count = configuration.count,
+    artworkUrl = configuration.artworkUrl,
+    emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
+  var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
+  if (!displayUrl) return null;
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.header
+  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
+    source: {
+      uri: displayUrl
+    },
+    style: styles.image,
+    resizeMode: "contain",
+    isDesaturated: shouldDesaturate(type, count)
+  })), children);
+};
+
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
   var tile = useTileContext();
@@ -19521,13 +19494,56 @@ var BadgeTileStatus = function () {
     style: styles.countText
   }, count, "x"));
 };
-var BadgeTile = BadgeTileInner;
+
+var BadgeTileTitle = function () {
+  var styles = useBadgeTileStyles();
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var count = configuration.count,
+    name = configuration.name,
+    emptyBadgeMessage = configuration.emptyBadgeMessage;
+  var displayText = count === 0 ? emptyBadgeMessage : name;
+  if (!displayText) return null;
+  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
+    variant: "title",
+    style: styles.titleText,
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, displayText));
+};
+
+var BadgeTileMain = function (_a) {
+  var tile = _a.tile;
+  if (!tile) return null;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(BadgeTile.Media, null, /*#__PURE__*/React$1.createElement(BadgeTile.Status, null)), /*#__PURE__*/React$1.createElement(Column, {
+    justify: "between",
+    align: "start"
+  }, /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(BadgeTile.Title, null), /*#__PURE__*/React$1.createElement(BadgeTile.Description, null)), /*#__PURE__*/React$1.createElement(BadgeTile.DateEarned, null)));
+};
+var BadgeTile = BadgeTileMain;
 BadgeTile.Media = BadgeTileMedia;
 BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
 
+var BannerTileCTA = function () {
+  var configuration = useBannerContext().configuration;
+  var _a = configuration,
+    ctaText = _a.ctaText,
+    ctaLink = _a.ctaLink,
+    ctaLinkTarget = _a.ctaLinkTarget;
+  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+  if (!ctaText) return null;
+  return /*#__PURE__*/React$1.createElement(Button, {
+    title: ctaText,
+    variant: "accent",
+    onPress: handlePress
+  });
+};
+
 var useBannerTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19538,12 +19554,11 @@ var useBannerTileStyles = function () {
       flex: 1
     },
     mediaContainer: {
-      width: '30%',
       aspectRatio: 1,
       position: 'relative',
       overflow: 'hidden',
       marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
-      height: 320
+      maxHeight: 320
     },
     media: {
       position: 'absolute',
@@ -19564,70 +19579,75 @@ var useBannerTileStyles = function () {
   });
 };
 
-var BannerTile = function (_a) {
-  var tile = _a.tile;
+var BannerTileDescription = function () {
   var styles = useBannerTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, null), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.slideContent
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Title, null), /*#__PURE__*/React__namespace.createElement(BannerTile.Description, null), /*#__PURE__*/React__namespace.createElement(BannerTile.CTA, null)));
+  var configuration = useBannerContext().configuration;
+  var description = configuration.description;
+  var theme = useWllSdk().theme;
+  if (!description) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    style: [styles.description, {
+      color: theme.derivedSurfaceText[20]
+    }]
+  }, description);
 };
-var BannerTileMedia = function () {
+
+var BannerTileMedia = function (_a) {
+  var isArtworkOnly = _a.isArtworkOnly;
   var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.mediaContainer
-  }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
-    source: {
-      uri: artworkUrl
-    },
-    style: styles.media
-  }));
+  var containerStyle = {
+    width: isArtworkOnly ? '100%' : '30%'
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-ignore: We are using percentage values for width, which is valid in React Native but TypeScript expects a number.
+    React$1.createElement(View$2, {
+      style: [styles.mediaContainer, containerStyle]
+    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+      source: {
+        uri: artworkUrl
+      },
+      style: styles.media
+    }))
+  );
 };
+
 var BannerTileTitle = function () {
   var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var title = configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title);
 };
-var BannerTileDescription = function () {
+
+var BannerTile = function (_a) {
+  var tile = _a.tile;
   var styles = useBannerTileStyles();
-  var configuration = useBannerContext().configuration;
-  var description = configuration.description;
-  var theme = useWllSdk().theme;
-  if (!description) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles.description, {
-      color: theme.derivedSurfaceText[20]
-    }]
-  }, description);
-};
-var BannerTileCTA = function () {
-  var configuration = useBannerContext().configuration;
-  var _a = configuration,
-    ctaText = _a.ctaText,
-    ctaLink = _a.ctaLink,
-    ctaLinkTarget = _a.ctaLinkTarget;
-  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
-  if (!ctaText) return null;
-  return /*#__PURE__*/React__namespace.createElement(Button, {
-    title: ctaText,
-    variant: "accent",
-    onPress: handlePress
-  });
+  var configuration = tile.configuration;
+  var isArtworkOnly = !configuration.title && !configuration.description && !configuration.ctaText;
+  return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
+    tile: tile
+  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, {
+    isArtworkOnly: isArtworkOnly
+  }), /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: styles.slideContent
+  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Title, null), /*#__PURE__*/React__namespace.createElement(BannerTile.Description, null), /*#__PURE__*/React__namespace.createElement(BannerTile.CTA, null)));
 };
 BannerTile.Media = BannerTileMedia;
 BannerTile.Title = BannerTileTitle;
 BannerTile.Description = BannerTileDescription;
 BannerTile.CTA = BannerTileCTA;
 
+var ContentTileBody = function () {
+  return /*#__PURE__*/React$1.createElement(BaseTile.Body, null);
+};
+
 var useContentTileStyles = function () {
   var theme = useWllSdk().theme;
   var _a = useResponsive$1(),
@@ -19645,39 +19665,40 @@ var useContentTileStyles = function () {
   });
 };
 
-var ContentTileInner = function (_a) {
-  var tile = _a.tile;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(ContentTile.Root, null, /*#__PURE__*/React__namespace.createElement(ContentTile.Media, null), /*#__PURE__*/React__namespace.createElement(ContentTile.Content, null, /*#__PURE__*/React__namespace.createElement(ContentTile.Header, null), /*#__PURE__*/React__namespace.createElement(ContentTile.Body, null))));
-};
-var ContentTileRoot = function (_a) {
-  var children = _a.children;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Root, null, children);
-};
-var ContentTileMedia = function () {
-  var styles = useContentTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Media, {
-    style: styles.media
-  });
-};
 var ContentTileContent = function (_a) {
   var children = _a.children;
   var styles = useContentTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Content, null, /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(BaseTile.Content, null, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.content
   }, children));
 };
+
 var ContentTileHeader = function () {
   var tile = useTileContext();
   var title = tile.configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Header, null, /*#__PURE__*/React__namespace.createElement(BaseTile.Title, null));
+  return /*#__PURE__*/React$1.createElement(BaseTile.Header, null, /*#__PURE__*/React$1.createElement(BaseTile.Title, null));
 };
-var ContentTileBody = function () {
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Body, null);
+
+var ContentTileMedia = function () {
+  var styles = useContentTileStyles();
+  return /*#__PURE__*/React$1.createElement(BaseTile.Media, {
+    style: styles.media
+  });
 };
-var ContentTile = ContentTileInner;
+
+var ContentTileRoot = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children);
+};
+
+var ContentTileMain = function (_a) {
+  var tile = _a.tile;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(ContentTile.Root, null, /*#__PURE__*/React$1.createElement(ContentTile.Media, null), /*#__PURE__*/React$1.createElement(ContentTile.Content, null, /*#__PURE__*/React$1.createElement(ContentTile.Header, null), /*#__PURE__*/React$1.createElement(ContentTile.Body, null))));
+};
+var ContentTile = ContentTileMain;
 ContentTile.Root = ContentTileRoot;
 ContentTile.Media = ContentTileMedia;
 ContentTile.Content = ContentTileContent;
@@ -19706,6 +19727,39 @@ exports.SectionType = void 0;
   SectionType["Banner"] = "BANNER";
 })(exports.SectionType || (exports.SectionType = {}));
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * 
+ */
+
+function useWindowDimensions() {
+  var _useState = React$1.useState(() => Dimensions.get('window')),
+    dims = _useState[0],
+    setDims = _useState[1];
+  React$1.useEffect(() => {
+    function handleChange(_ref) {
+      var window = _ref.window;
+      if (window != null) {
+        setDims(window);
+      }
+    }
+    Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDims(Dimensions.get('window'));
+    return () => {
+      Dimensions.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return dims;
+}
+
 var useSectionHeaderStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19750,7 +19804,7 @@ var SectionHeader = function (_a) {
   }, description));
 };
 
-var useCarouselStyles = function (buttonSize, slideWidth) {
+var useCarouselStyles = function (buttonSize) {
   if (buttonSize === void 0) {
     buttonSize = 42;
   }
@@ -19760,8 +19814,8 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
   var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     container: {
-      flex: 1,
-      maxWidth: MAX_WIDTH
+      width: '100%',
+      flex: 1
     },
     sectionTitle: {
       fontSize: 31,
@@ -19777,13 +19831,18 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
       marginBottom: 20
     },
     carouselContainer: {
+      width: '100%',
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      position: 'relative'
     },
     carouselContent: {
-      overflow: 'hidden',
-      width: slideWidth
+      width: '100%',
+      overflow: 'hidden'
+    },
+    slideContainer: {
+      width: '100%'
     },
     navButton: {
       position: 'absolute',
@@ -19806,9 +19865,6 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
       right: -buttonSize / 2,
       backgroundColor: theme.surface
     },
-    slideContainer: {
-      width: slideWidth
-    },
     indicators: {
       flexDirection: 'row',
       justifyContent: 'center',
@@ -19829,36 +19885,41 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
 
 var Carousel = function (_a) {
   var section = _a.section;
-  var styles = useCarouselStyles(BUTTON_SIZE, SLIDE_WIDTH);
+  var windowWidth = useWindowDimensions().width;
+  var containerRef = React$1.useRef(null);
+  var _b = React$1.useState(windowWidth),
+    containerWidth = _b[0],
+    setContainerWidth = _b[1];
+  var styles = useCarouselStyles(BUTTON_SIZE);
   var animatedIndex = React$1.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var _b = useResponsive(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
+  var _c = useResponsive(),
+    isDesktop = _c.isDesktop,
+    isTablet = _c.isTablet;
   var scrollViewRef = React$1.useRef(null);
-  var _c = React$1.useState(0),
-    currentIndex = _c[0],
-    setCurrentIndex = _c[1];
+  var _d = React$1.useState(0),
+    currentIndex = _d[0],
+    setCurrentIndex = _d[1];
   var bannerTiles = section.tiles.filter(function (tile) {
     return tile.type === exports.TileType.Banner;
   });
   var sortedTiles = sortByPriority(bannerTiles);
   var handleScroll = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = contentOffsetX / SLIDE_WIDTH;
+    var newIndex = contentOffsetX / containerWidth;
     animatedIndex.setValue(newIndex);
-  }, [SLIDE_WIDTH, animatedIndex]);
+  }, [containerWidth, animatedIndex]);
   var handleScrollEnd = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = Math.round(contentOffsetX / SLIDE_WIDTH);
+    var newIndex = Math.round(contentOffsetX / containerWidth);
     setCurrentIndex(newIndex);
-  }, [SLIDE_WIDTH]);
+  }, [containerWidth]);
   var handlePrev = function () {
     var _a;
     var newIndex = Math.max(0, currentIndex - 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * SLIDE_WIDTH,
+      x: newIndex * containerWidth,
       animated: true
     });
   };
@@ -19867,7 +19928,7 @@ var Carousel = function (_a) {
     var newIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * SLIDE_WIDTH,
+      x: newIndex * containerWidth,
       animated: true
     });
   };
@@ -19883,7 +19944,12 @@ var Carousel = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.container
+    ref: containerRef,
+    style: styles.container,
+    onLayout: function (event) {
+      var width = event.nativeEvent.layout.width;
+      setContainerWidth(width);
+    }
   }, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.carouselContainer
   }, displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
@@ -19903,20 +19969,18 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles.carouselContent, {
-      width: SLIDE_WIDTH
-    }],
+    style: [styles.carouselContent],
     contentContainerStyle: {
-      width: SLIDE_WIDTH * sortedTiles.length
+      width: containerWidth * sortedTiles.length
     },
     decelerationRate: "fast",
-    snapToInterval: SLIDE_WIDTH,
+    snapToInterval: containerWidth,
     snapToAlignment: "start"
   }, sortedTiles.map(function (tile, index) {
     return /*#__PURE__*/React$1.createElement(View$2, {
       key: index,
-      style: [{
-        width: SLIDE_WIDTH
+      style: [styles.slideContainer, {
+        width: containerWidth
       }]
     }, /*#__PURE__*/React$1.createElement(BannerTile, {
       tile: tile
@@ -20246,30 +20310,7 @@ var usePointsTileStyles = function (isFullSize) {
   });
 };
 
-var PointsTile = function (_a) {
-  var tile = _a.tile;
-  var isFullSize = useTileSize(tile).isFullSize;
-  var styles = usePointsTileStyles(isFullSize);
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, isFullSize && /*#__PURE__*/React__namespace.createElement(PointsTile.Image, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.container
-  }, !isFullSize && /*#__PURE__*/React__namespace.createElement(PointsTile.Image, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/React__namespace.createElement(PointsTile.Title, null), /*#__PURE__*/React__namespace.createElement(PointsTile.Points, null))));
-};
-var PointsTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var title = configuration.title;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "eyebrow"
-  }, title);
-};
-var PointsTilePoints = function () {
+var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
   var configuration = useTileContext().configuration;
   var _a = configuration,
@@ -20281,21 +20322,28 @@ var PointsTilePoints = function () {
   if (calculatedPoints === null) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "caption"
-  }, prefix !== null && prefix !== void 0 ? prefix : '', /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.pointsWithSuffix
-  }, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
+  }, prefix !== null && prefix !== void 0 ? prefix : '', /*#__PURE__*/React__namespace.createElement(Row, null, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
     style: styles.suffix
   }, suffix !== null && suffix !== void 0 ? suffix : 'pts')));
 };
-var PointsTileImage = function (_a) {
+
+var PointsTileTitle = function () {
+  var configuration = useTileContext().configuration;
+  var title = configuration.title;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "eyebrow"
+  }, title);
+};
+
+var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.imageContainer
-  }, /*#__PURE__*/React__namespace.createElement(Image$2, {
+  }, /*#__PURE__*/React$1.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
@@ -20303,9 +20351,26 @@ var PointsTileImage = function (_a) {
     resizeMode: "contain"
   }));
 };
+
+var PointsTile = function (_a) {
+  var tile = _a.tile;
+  var isFullSize = useTileSize(tile).isFullSize;
+  var styles = usePointsTileStyles(isFullSize);
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
+    isFullSize: isFullSize
+  }), /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.container
+  }, !isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
+    isFullSize: isFullSize
+  }), /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React$1.createElement(PointsTile.Title, null), /*#__PURE__*/React$1.createElement(PointsTile.Points, null))));
+};
 PointsTile.Title = PointsTileTitle;
-PointsTile.Points = PointsTilePoints;
-PointsTile.Image = PointsTileImage;
+PointsTile.Points = PointsTileFormattedPoints;
+PointsTile.Media = PointsTileMedia;
 
 var useRewardCategoryTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20338,13 +20403,6 @@ var useRewardCategoryTileStyles = function () {
   });
 };
 
-var RewardCategoryTile = function (_a) {
-  var tile = _a.tile;
-  if (!tile) return null;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Background, null));
-};
 var RewardCategoryHeader = function () {
   var styles = useRewardCategoryTileStyles();
   var theme = useWllSdk().theme;
@@ -20353,11 +20411,11 @@ var RewardCategoryHeader = function () {
     showName = _a.showName,
     name = _a.name;
   if (!showName || !name) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [styles.header, {
       backgroundColor: theme.primary
     }]
-  }, /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     style: [styles.headerText, {
       color: theme.primaryText
     }],
@@ -20365,20 +20423,46 @@ var RewardCategoryHeader = function () {
     numberOfLines: 1
   }, name));
 };
-var RewardCategoryBackground = function () {
+
+var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
+  return /*#__PURE__*/React$1.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
     style: styles.background
   });
 };
+
+var RewardCategoryTile = function (_a) {
+  var tile = _a.tile;
+  if (!tile) return null;
+  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Media, null));
+};
 RewardCategoryTile.Header = RewardCategoryHeader;
-RewardCategoryTile.Background = RewardCategoryBackground;
+RewardCategoryTile.Media = RewardCategoryMedia;
+
+var RewardTileChevron = function () {
+  var theme = useWllSdk().theme;
+  return /*#__PURE__*/React$1.createElement(Icon, {
+    name: "ChevronRight",
+    color: theme.derivedSurfaceText[20]
+  });
+};
+
+var RewardTileSummary = function () {
+  var configuration = useTileContext().configuration;
+  var summary = configuration.summary;
+  if (!summary) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "body"
+  }, summary);
+};
 
 var useRewardTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20388,7 +20472,6 @@ var useRewardTileStyles = function () {
   return StyleSheet$1.create({
     imageContainer: {
       width: '100%',
-      flexBasis: '50%',
       marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     image: {
@@ -20414,89 +20497,88 @@ var useRewardTileStyles = function () {
       justifyContent: 'center'
     },
     suffix: {
+      color: theme.primary,
       fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet)
     }
   });
 };
 
-var RewardTile = function (_a) {
-  var tile = _a.tile;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(RewardTile.Media, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Content, null, /*#__PURE__*/React__namespace.createElement(RowHeader, null, /*#__PURE__*/React__namespace.createElement(RewardTile.Title, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React__namespace.createElement(RewardTile.Description, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Points, null)));
-};
-var RewardTileMedia = function () {
+var RewardTileMedia = function (_a) {
+  var isArtworkOnly = _a.isArtworkOnly;
   var styles = useRewardTileStyles();
   var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.pictureUrl)) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.imageContainer
-  }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
-    source: {
-      uri: reward.pictureUrl
-    },
-    style: styles.image
-  }));
-};
-var RewardTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.name)) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "title",
-    ellipsizeMode: "tail",
-    numberOfLines: 1
-  }, reward.name);
-};
-var RewardTileDescription = function () {
-  var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.summary)) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "body"
-  }, reward.summary);
+  var _b = configuration,
+    artworkUrl = _b.artworkUrl,
+    _c = _b.showArtwork,
+    showArtwork = _c === void 0 ? true : _c;
+  if (!artworkUrl || !showArtwork) return null;
+  var containerStyle = {
+    flexBasis: isArtworkOnly ? '100%' : '50%'
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-ignore: We are using percentage values for flexBasis, which is valid in React Native but TypeScript expects a number.
+    React$1.createElement(View$2, {
+      style: [styles.imageContainer, containerStyle]
+    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+      source: {
+        uri: artworkUrl
+      },
+      style: styles.image
+    }))
+  );
 };
+
 var RewardTilePoints = function () {
   var styles = useRewardTileStyles();
   var configuration = useTileContext().configuration;
-  var theme = useWllSdk().theme;
-  var reward = configuration;
-  var calculatedPoints = (reward === null || reward === void 0 ? void 0 : reward.price) !== undefined ? reward.price * (Number(reward.pointsMultiplier) || 1) : null;
-  if ((reward === null || reward === void 0 ? void 0 : reward.price) === 0 || !reward.showPrice || calculatedPoints === null) {
-    return null;
-  }
-  return /*#__PURE__*/React__namespace.createElement(Text, {
+  var _a = configuration,
+    showPrice = _a.showPrice,
+    price = _a.price,
+    pointsMultiplier = _a.pointsMultiplier,
+    pointsPrefix = _a.pointsPrefix,
+    pointsSuffix = _a.pointsSuffix;
+  var calculatedPoints = price !== undefined ? price * (Number(pointsMultiplier) || 1) : null;
+  if (!showPrice || calculatedPoints === null) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
     variant: "caption",
     style: styles.footer
-  }, reward.pointsPrefix, /*#__PURE__*/React__namespace.createElement(View$2, {
+  }, pointsPrefix, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.pointsContainer
-  }, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles.suffix, {
-      color: theme.primary
-    }]
-  }, reward.pointsSuffix)));
+  }, calculatedPoints, /*#__PURE__*/React$1.createElement(Text, {
+    style: styles.suffix
+  }, pointsSuffix)));
 };
-var RewardTileContent = function (_a) {
-  var children = _a.children;
-  var styles = useRewardTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.content
-  }, children);
+
+var RewardTileTitle = function () {
+  var configuration = useTileContext().configuration;
+  var name = configuration.name;
+  if (!name) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "title",
+    ellipsizeMode: "tail",
+    numberOfLines: 1
+  }, name);
 };
-var RewardTileChevron = function () {
-  var theme = useWllSdk().theme;
-  return /*#__PURE__*/React__namespace.createElement(Icon, {
-    name: "ChevronRight",
-    color: theme.derivedSurfaceText[20]
-  });
+
+var RewardTile = function (_a) {
+  var tile = _a.tile;
+  var configuration = tile.configuration;
+  var showDetails = configuration.showDetails;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(RewardTile.Media, {
+    isArtworkOnly: !showDetails
+  }), /*#__PURE__*/React$1.createElement(Column, null, /*#__PURE__*/React$1.createElement(Row, {
+    justify: "between",
+    align: "center"
+  }, /*#__PURE__*/React$1.createElement(RewardTile.Title, null), /*#__PURE__*/React$1.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React$1.createElement(RewardTile.Summary, null), /*#__PURE__*/React$1.createElement(RewardTile.Points, null)));
 };
 RewardTile.Media = RewardTileMedia;
 RewardTile.Title = RewardTileTitle;
-RewardTile.Description = RewardTileDescription;
+RewardTile.Summary = RewardTileSummary;
 RewardTile.Points = RewardTilePoints;
 RewardTile.Chevron = RewardTileChevron;
-RewardTile.Content = RewardTileContent;
 
 var useTierTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20756,7 +20838,7 @@ var Column = function (_a) {
     isDesktop = _d.isDesktop,
     isTablet = _d.isTablet;
   var theme = useWllSdk().theme;
-  return /*#__PURE__*/React.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [{
       flex: 1,
       flexDirection: 'column',
@@ -20777,7 +20859,7 @@ var Row = function (_a) {
     _d = _a.direction,
     direction = _d === void 0 ? 'row' : _d,
     style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [{
       flexDirection: direction,
       justifyContent: justifyMap[justify],
@@ -20786,6 +20868,15 @@ var Row = function (_a) {
   }, children);
 };
 
+var FlexBox = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: {
+      flex: 1
+    }
+  }, children);
+};
+
 var Stack = function (_a) {
   var children = _a.children,
     _b = _a.justify,
@@ -20816,7 +20907,8 @@ var alignMap = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
-  stretch: 'stretch'
+  stretch: 'stretch',
+  baseline: 'baseline'
 };
 
 var Reward = /** @class */function () {
@@ -20824,8 +20916,8 @@ var Reward = /** @class */function () {
   return Reward;
 }();
 
+exports.BadgeTile = BadgeTile;
 exports.BadgeTileConfig = BadgeTileConfig;
-exports.BadgeTileUpdated = BadgeTile;
 exports.BannerTile = BannerTile;
 exports.BannerTileConfig = BannerTileConfig;
 exports.BaseBanner = BaseBanner;
@@ -20836,6 +20928,7 @@ exports.Column = Column;
 exports.Content = Column$1;
 exports.ContentTile = ContentTile;
 exports.ContentTileConfig = ContentTileConfig;
+exports.FlexBox = FlexBox;
 exports.Grid = Grid;
 exports.Group = Group;
 exports.Icon = Icon;