@wlloyalty/wll-react-sdk 1.0.29 → 1.0.30

package/dist/index.js

@@ -19408,70 +19408,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 +19439,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 +19495,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,7 +19555,6 @@ var useBannerTileStyles = function () {
       flex: 1
     },
     mediaContainer: {
-      width: '30%',
       aspectRatio: 1,
       position: 'relative',
       overflow: 'hidden',
@@ -19564,70 +19580,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 +19666,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 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 = ContentTileInner;
+var ContentTile = ContentTileMain;
 ContentTile.Root = ContentTileRoot;
 ContentTile.Media = ContentTileMedia;
 ContentTile.Content = ContentTileContent;
@@ -20246,30 +20268,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 +20280,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 +20309,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 +20361,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 +20369,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 +20381,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 +20430,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 +20455,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 +20796,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 +20817,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 +20826,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 +20865,8 @@ var alignMap = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
-  stretch: 'stretch'
+  stretch: 'stretch',
+  baseline: 'baseline'
 };
 
 var Reward = /** @class */function () {
@@ -20824,8 +20874,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 +20886,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;