@wlloyalty/wll-react-sdk 1.0.61 → 1.0.63

package/dist/web.js

@@ -19105,17 +19105,26 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
+/**
+ * Renders the body text of a BaseTile component.
+ *
+ * @param {BaseTileBodyProps} props - Component props including text styling options
+ * @returns {JSX.Element|null} The rendered body text or null if conditions for display are not met
+ */
 var BaseTileBody = function (props) {
-  var tile = useTileContext();
-  var _a = useResponsive$1(),
-    isDesktop = _a.isDesktop,
-    isTablet = _a.isTablet;
-  var _b = tile.configuration,
-    body = _b.body,
-    artworkUrl = _b.artworkUrl;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+  var tileContext = useTileContext();
+  var responsive = useResponsive$1();
+  if (!tileContext || !tileContext.configuration || !responsive) return null;
+  var isDesktop = responsive.isDesktop,
+    isTablet = responsive.isTablet;
+  var _a = tileContext.configuration,
+    body = _a.body,
+    artworkUrl = _a.artworkUrl;
+  var sizeInfo = useTileSize(tileContext);
+  if (!sizeInfo) return null;
+  var isHalfSize = sizeInfo.isHalfSize;
+  // Don't show body for half tiles with image
   if (isHalfSize && artworkUrl || !body) return null;
-  // Helper function to determine the number of lines
   var getNumberOfLines = function () {
     if (!isHalfSize && !artworkUrl) return undefined;
     return isDesktop ? 3 : isTablet ? 4 : 3;
@@ -19123,12 +19132,35 @@ var BaseTileBody = function (props) {
   return /*#__PURE__*/React.createElement(Text, _extends({
     variant: "body"
   }, props, {
+    accessibilityRole: "text",
     accessibilityLabel: body,
     numberOfLines: getNumberOfLines(),
     testID: "tile-body"
   }), body);
 };
 
+/**
+ * Utility function that checks if a component context and its configuration exist.
+ * Works for both tile contexts and banner contexts.
+ *
+ * @param context - The component context to validate (tileContext or bannerContext)
+ * @returns `true` if both the context and its configuration exist, otherwise `false`
+ */
+function isContextValid(context) {
+  return context !== null && context !== undefined && context.configuration !== null && context.configuration !== undefined;
+}
+/**
+ * Checks if a tile's content should be hidden based on its size and artwork configuration.
+ *
+ * @param {TileSizeInfo | null} sizeInfo - The size information for the tile
+ * @param {string | null | undefined} artworkUrl - The URL of the tile's artwork
+ * @returns {boolean} True if the content should be hidden, false otherwise
+ */
+var shouldHideContentForHalfTile = function (sizeInfo, artworkUrl) {
+  if (!sizeInfo) return false;
+  return sizeInfo.isHalfSize && !!artworkUrl;
+};
+
 var baseStyles = StyleSheet$1.create({
   container: {
     width: '100%',
@@ -19144,15 +19176,35 @@ var baseStyles = StyleSheet$1.create({
     objectFit: 'cover'
   }
 });
-// Dynamic styles hook
+/**
+ * Custom hook that returns the styles for the BaseTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BaseTile component
+ */
 var useBaseTileStyles = function () {
-  var tile = useTileContext();
+  var tileContext = useTileContext();
   var theme = useWllSdk().theme;
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
-  var isHalfSize = useTileSize(tile).isHalfSize;
-  var _b = tile.configuration,
+  if (!tileContext || !tileContext.configuration) {
+    return StyleSheet$1.create({
+      container: baseStyles.container,
+      content: baseStyles.content,
+      header: {
+        marginBottom: 0,
+        marginTop: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+      media: baseStyles.media
+    });
+  }
+  var sizeInfo = useTileSize(tileContext);
+  var isHalfSize = (sizeInfo === null || sizeInfo === void 0 ? void 0 : sizeInfo.isHalfSize) || false;
+  var _b = tileContext.configuration,
     artworkUrl = _b.artworkUrl,
     title = _b.title,
     body = _b.body;
@@ -19183,46 +19235,72 @@ var useBaseTileStyles = function () {
   });
 };
 
+/**
+ * Renders the content section of a BaseTile component.
+ *
+ * @param {BaseTileContentProps} props - Component props
+ * @param {ReactNode} props.children - Child elements to render within the content area
+ * @returns {JSX.Element|null} The rendered content or null if conditions for display are not met
+ */
 var BaseTileContent = function (_a) {
   var children = _a.children;
-  var tile = useTileContext();
-  var artworkUrl = tile.configuration.artworkUrl;
-  var isHalfSize = useTileSize(tile).isHalfSize;
-  // For half tiles with an image, don't show other content
-  if (isHalfSize && artworkUrl) return null;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var artworkUrl = tileContext.configuration.artworkUrl;
+  var sizeInfo = useTileSize(tileContext);
+  if (!sizeInfo) return null;
+  if (shouldHideContentForHalfTile(sizeInfo, artworkUrl)) return null;
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "tile-content",
     style: [baseStyles.content, {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
-    }]
+    }],
+    accessibilityRole: "none"
   }, children);
 };
 
+/**
+ * Renders the header section of a BaseTile component.
+ *
+ * @param {BaseTileHeaderProps} props - Component props
+ * @param {ReactNode} props.children - Child elements to render within the header
+ * @returns {JSX.Element|null} The rendered header or null if conditions for display are not met
+ */
 var BaseTileHeader = function (_a) {
   var children = _a.children;
-  var tile = useTileContext();
-  var artworkUrl = tile.configuration.artworkUrl;
-  var isHalfSize = useTileSize(tile).isHalfSize;
-  // For half tiles with an image, don't show header
-  if (isHalfSize && artworkUrl) return null;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var artworkUrl = tileContext.configuration.artworkUrl;
+  var sizeInfo = useTileSize(tileContext);
+  if (!sizeInfo) return null;
+  if (shouldHideContentForHalfTile(sizeInfo, artworkUrl)) return null;
   var dynamicStyles = useBaseTileStyles();
+  var combinedStyle = __assign(__assign(__assign({}, dynamicStyles.header), {
+    marginTop: sizeInfo.isHalfSize ? 0 : dynamicStyles.header.marginTop
+  }), sizeInfo.isHalfSize ? {
+    alignItems: 'center'
+  } : {});
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [dynamicStyles.header, {
-      marginTop: isHalfSize ? 0 : dynamicStyles.header.marginTop,
-      // @ts-ignore
-      textAlign: isHalfSize && 'center'
-    }],
-    numberOfLines: 1,
-    testID: "tile-header"
+    style: combinedStyle,
+    testID: "tile-header",
+    accessibilityRole: "header"
   }, children);
 };
 
+/**
+ * Renders the media (image) for a BaseTile component.
+ *
+ * @param {ImagePropsNoSource} props - The image props excluding source
+ * @returns {JSX.Element|null} The rendered image or null if no artwork URL is present
+ */
 var BaseTileMedia = function (props) {
-  var tile = useTileContext();
-  var _a = tile.configuration,
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
     artworkUrl = _a.artworkUrl,
-    title = _a.title;
+    _b = _a.title,
+    title = _b === void 0 ? '' : _b;
   var styles = useBaseTileStyles();
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
@@ -19232,29 +19310,40 @@ var BaseTileMedia = function (props) {
     testID: "tile-media",
     style: [props.style, baseStyles.media, styles.media],
     alt: "Content image".concat(title ? " for ".concat(title) : ''),
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
+    accessibilityRole: "image"
   }));
 };
 
+/**
+ * Renders the title of a BaseTile component.
+ *
+ * @returns {JSX.Element|null} The rendered title or null if conditions for display are not met
+ */
 var BaseTileTitle = function () {
-  var tile = useTileContext();
-  var theme = useWllSdk().theme;
-  var _a = tile.configuration,
-    title = _a.title,
-    ctaLink = _a.ctaLink,
-    artworkUrl = _a.artworkUrl;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  if (!tileContext || !tileContext.configuration || !sdk) return null;
+  var config = tileContext.configuration;
+  var title = config.title,
+    _c = config.ctaLink,
+    ctaLink = _c === void 0 ? '' : _c,
+    artworkUrl = config.artworkUrl;
+  var sizeInfo = useTileSize(tileContext);
+  if (!sizeInfo) return null;
+  var isHalfSize = sizeInfo.isHalfSize;
   // Don't show title for half tiles with image
   if (isHalfSize && artworkUrl || !title) return null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
+    accessibilityRole: "header",
     accessibilityLabel: title,
     numberOfLines: 1,
     testID: "tile-title"
   }, title), ctaLink && /*#__PURE__*/React.createElement(Icon, {
     name: "ChevronRight",
-    color: theme.derivedSurfaceText[20]
+    color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20],
+    accessibilityLabel: "View details"
   }));
 };
 
@@ -19264,6 +19353,9 @@ var BaseTileTitle = function () {
 var TileContext = /*#__PURE__*/React.createContext(null);
 /**
  * Custom hook to access the TileContext.
+ *
+ * @returns {Tile} The current tile from context
+ * @throws {Error} If used outside of a BaseTile
  */
 var useTileContext = function () {
   var context = React.useContext(TileContext);
@@ -19274,19 +19366,27 @@ var useTileContext = function () {
 };
 /**
  * BaseTileContainer component to handle layout and pressable behavior.
+ *
+ * @param {BaseTileRootProps} props - Component props
+ * @returns {JSX.Element} The rendered BaseTileContainer
  */
 var BaseTileContainer = function (_a) {
   var children = _a.children,
     style = _a.style;
   var tile = useTileContext();
-  var theme = useWllSdk().theme;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+  var sdk = useWllSdk();
+  var sizeInfo = useTileSize(tile);
+  var isHalfSize = (sizeInfo === null || sizeInfo === void 0 ? void 0 : sizeInfo.isHalfSize) || false;
   var _b = tile.configuration,
-    ctaLink = _b.ctaLink,
+    _c = _b.ctaLink,
+    ctaLink = _c === void 0 ? '' : _c,
     ctaLinkTarget = _b.ctaLinkTarget,
-    title = _b.title;
+    _d = _b.title,
+    title = _d === void 0 ? 'Tile' : _d;
+  var theme = (sdk === null || sdk === void 0 ? void 0 : sdk.theme) || {
+    surface: '#ffffff'
+  };
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  // Dynamic layout and styles
   var layout = {
     flexDirection: 'column',
     justifyContent: isHalfSize ? 'center' : 'flex-start',
@@ -19304,19 +19404,32 @@ var BaseTileContainer = function (_a) {
     onPress: handlePress,
     disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
     accessible: true,
-    role: "button",
-    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : ''),
+    accessibilityState: {
+      disabled: !ctaLink
+    }
   }, children);
 };
 /**
  * BaseTileRoot component to provide context and render children.
+ *
+ * @param {BaseTileProps} props - Component props
+ * @returns {JSX.Element|null} The rendered BaseTileRoot or null if no tile is provided
  */
 var BaseTileRoot = function (_a) {
   var tile = _a.tile,
-    children = _a.children;
+    children = _a.children,
+    style = _a.style;
+  if (!tile) {
+    console.warn('BaseTile: No tile provided');
+    return null;
+  }
   return /*#__PURE__*/React.createElement(TileContext.Provider, {
     value: tile
-  }, /*#__PURE__*/React.createElement(BaseTile.Container, null, children));
+  }, /*#__PURE__*/React.createElement(BaseTile.Container, {
+    style: style
+  }, children));
 };
 /**
  * BaseTile component with subcomponents attached.
@@ -19555,6 +19668,12 @@ function withTileFetching(WrappedComponent) {
   };
 }
 
+/**
+ * Custom hook that returns the styles for the BadgeTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BadgeTile component
+ */
 var useBadgeTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19603,16 +19722,22 @@ var useBadgeTileStyles = function () {
   });
 };
 
+/**
+ * Renders the date earned for a Badge Tile.
+ *
+ * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ */
 var BadgeTileDateEarned = function () {
   var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    awardedDatePrefix = configuration.awardedDatePrefix,
-    createdAt = configuration.createdAt,
-    badgeNotEarnedMessage = configuration.badgeNotEarnedMessage,
-    type = configuration.type;
+  var tileContext = useTileContext();
   var theme = useWllSdk().theme;
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    count = _a.count,
+    awardedDatePrefix = _a.awardedDatePrefix,
+    createdAt = _a.createdAt,
+    badgeNotEarnedMessage = _a.badgeNotEarnedMessage,
+    type = _a.type;
   // Don't show for Latest type with count=0
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
@@ -19645,12 +19770,18 @@ var BadgeTileDateEarned = function () {
   }, displayText));
 };
 
+/**
+ * Renders the description for a Badge Tile.
+ *
+ * @returns JSX.Element or null if description is not present
+ */
 var BadgeTileDescription = function () {
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    description = configuration.description,
-    type = configuration.type;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    count = _a.count,
+    description = _a.description,
+    type = _a.type;
   if (!description) return null;
   // For Latest type, hide description when count = 0
   // For Specific type, always show description
@@ -19668,18 +19799,24 @@ var BadgeTileDescription = function () {
   }, description));
 };
 
+/**
+ * Renders the media for a Badge Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
 var BadgeTileMedia = function (_a) {
   var children = _a.children,
     alt = _a.alt,
     props = __rest(_a, ["children", "alt"]);
   var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    artworkUrl = configuration.artworkUrl,
-    emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl,
-    type = configuration.type,
-    name = configuration.name;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
+    count = _b.count,
+    artworkUrl = _b.artworkUrl,
+    emptyBadgeArtworkUrl = _b.emptyBadgeArtworkUrl,
+    type = _b.type,
+    name = _b.name;
   var displayUrl = type === exports.BadgeTileType.Specific ? artworkUrl : count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
   if (!displayUrl) return null;
   return /*#__PURE__*/React.createElement(View$2, {
@@ -19696,12 +19833,18 @@ var BadgeTileMedia = function (_a) {
   })), children);
 };
 
+/**
+ * Renders the status for a Badge Tile.
+ *
+ * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ */
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    type = configuration.type;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    count = _a.count,
+    type = _a.type;
   if (type !== exports.BadgeTileType.Specific || count === 1) {
     return null;
   }
@@ -19725,14 +19868,20 @@ var BadgeTileStatus = function () {
   }, count, "x"));
 };
 
+/**
+ * Renders the title for a Badge Tile.
+ *
+ * @returns JSX.Element or null if name is not present
+ */
 var BadgeTileTitle = function () {
   var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    name = configuration.name,
-    emptyBadgeMessage = configuration.emptyBadgeMessage,
-    type = configuration.type;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    count = _a.count,
+    name = _a.name,
+    emptyBadgeMessage = _a.emptyBadgeMessage,
+    type = _a.type;
   var displayText = type === exports.BadgeTileType.Specific ? name : count === 0 ? emptyBadgeMessage : name;
   if (!displayText) return null;
   return /*#__PURE__*/React.createElement(View$2, {
@@ -19751,7 +19900,7 @@ var BadgeTileTitle = function () {
 
 /**
  * The main BadgeTile component.
- *
+ * @returns JSX.Element or null if tile is not active or tileHeight is not full.
  * This component renders a badge tile with optional media, status, title, description, and date earned.
  */
 var BadgeTileRoot = function (_a) {
@@ -19776,15 +19925,23 @@ var BadgeTile = Object.assign(BadgeTileRoot, {
 });
 var BadgeTile$1 = withTileFetching(BadgeTile);
 
+/**
+ * Renders the call to action of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no text or required props are present
+ */
 var BannerTileCTA = function () {
-  var tile = useBannerContext();
-  var _a = tile.configuration,
-    ctaText = _a.ctaText,
-    ctaLink = _a.ctaLink,
+  var bannerContext = useBannerContext();
+  if (!isContextValid(bannerContext)) return null;
+  var _a = bannerContext.configuration,
+    _b = _a.ctaText,
+    ctaText = _b === void 0 ? '' : _b,
+    _c = _a.ctaLink,
+    ctaLink = _c === void 0 ? '' : _c,
     ctaLinkTarget = _a.ctaLinkTarget;
-  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  if (!ctaText) return null;
-  var hint = ctaLinkTarget === 'NEW_WINDOW' ? "Opens ".concat(ctaLink, " in a new window") : "Takes you to ".concat(ctaLink);
+  if (!ctaText || !ctaLink) return null;
+  var handlePress = useHandleTilePress(bannerContext, ctaLink, ctaLinkTarget);
+  var hint = ctaLink ? ctaLinkTarget === exports.CTALinkTarget.newWindow ? "Opens ".concat(ctaLink, " in a new window") : "Takes you to ".concat(ctaLink) : '';
   return /*#__PURE__*/React.createElement(Button, {
     testID: "banner-tile-cta",
     title: ctaText,
@@ -19794,6 +19951,12 @@ var BannerTileCTA = function () {
   });
 };
 
+/**
+ * Custom hook that returns the styles for the BannerTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BannerTile component
+ */
 var useBannerTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19830,42 +19993,45 @@ var useBannerTileStyles = function () {
   });
 };
 
+/**
+ * Renders the description text of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no description is present
+ */
 var BannerTileDescription = function () {
   var styles = useBannerTileStyles();
-  var configuration = useBannerContext().configuration;
-  var description = configuration.description;
-  var theme = useWllSdk().theme;
+  var bannerContext = useBannerContext();
+  if (!isContextValid(bannerContext)) return null;
+  var description = bannerContext.configuration.description;
   if (!description) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    accessible: true,
+  return /*#__PURE__*/React.createElement(Text, {
+    style: styles.description,
+    accessibilityRole: "text",
     accessibilityLabel: description,
     testID: "banner-tile-description"
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.description, {
-      color: theme.derivedSurfaceText[20]
-    }],
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, description));
+  }, description);
 };
 
+/**
+ * Renders the media of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no media is present
+ */
 var BannerTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
   var styles = useBannerTileStyles();
-  var configuration = useBannerContext().configuration;
-  var _b = configuration,
+  var bannerContext = useBannerContext();
+  if (!isContextValid(bannerContext)) return null;
+  var _b = bannerContext.configuration,
     artworkUrl = _b.artworkUrl,
     title = _b.title;
   if (!artworkUrl) return null;
   var containerStyle = {
     width: isArtworkOnly ? '100%' : '30%'
   };
-  return /*#__PURE__*/React.createElement(View$2
-  // @ts-ignore: We are using percentage values for width, which is valid in React Native but TypeScript expects a number.
-  , {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.mediaContainer, containerStyle],
-    accessible: true,
-    role: "img",
+    accessibilityRole: "image",
     accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''),
     testID: "banner-tile-media"
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
@@ -19873,27 +20039,28 @@ var BannerTileMedia = function (_a) {
       uri: artworkUrl
     },
     style: styles.media,
-    alt: "Banner image".concat(title ? " for ".concat(title) : ''),
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
+    alt: "Banner image".concat(title ? " for ".concat(title) : '')
   }));
 };
 
+/**
+ * Renders the title of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
 var BannerTileTitle = function () {
   var styles = useBannerTileStyles();
-  var configuration = useBannerContext().configuration;
-  var title = configuration.title;
+  var bannerContext = useBannerContext();
+  if (!isContextValid(bannerContext)) return null;
+  var title = bannerContext.configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    accessible: true,
-    accessibilityLabel: title
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     testID: "banner-tile-title",
     style: styles.title,
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, title));
+    accessibilityRole: "header",
+    accessibilityLabel: title
+  }, title);
 };
 
 /**
@@ -19903,16 +20070,20 @@ var BannerTileTitle = function () {
  * @returns `true` if the tile has no title, description, or CTA text.
  */
 var isArtworkOnly$1 = function (configuration) {
+  if (!configuration) return true;
   return !configuration.title && !configuration.description && !configuration.ctaText;
 };
 /**
  * The main BannerTile component.
  *
  * This component renders a banner tile with optional media, title, description, and CTA.
+ *
+ * @param {BannerTileProps} props - Component props
+ * @returns {JSX.Element | null} Rendered component or null if tile is inactive
  */
 var BannerTileRoot = function (_a) {
   var tile = _a.tile;
-  if (!tile || !tile.active) return null;
+  if (!tile || !tile.active || !tile.configuration) return null;
   var configuration = tile.configuration;
   return /*#__PURE__*/React.createElement(BaseBanner, {
     tile: tile
@@ -19940,6 +20111,12 @@ var ContentTileContainer = function (_a) {
   return /*#__PURE__*/React.createElement(BaseTile.Container, null, children);
 };
 
+/**
+ * Custom hook that returns the styles for the ContentTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the ContentTile component
+ */
 var useContentTileStyles = function () {
   var theme = useWllSdk().theme;
   var _a = useResponsive$1(),
@@ -19966,8 +20143,9 @@ var ContentTileContent = function (_a) {
 };
 
 var ContentTileHeader = function () {
-  var tile = useTileContext();
-  var title = tile.configuration.title;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var title = tileContext.configuration.title;
   if (!title) return null;
   return /*#__PURE__*/React.createElement(BaseTile.Header, null, /*#__PURE__*/React.createElement(BaseTile.Title, null));
 };
@@ -20494,6 +20672,12 @@ var styles$1 = StyleSheet$1.create({
   }
 });
 
+/**
+ * Custom hook that returns the styles for the Section component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the Section component
+ */
 var useSectionStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -20515,9 +20699,13 @@ var useSectionStyles = function () {
 var SectionContext = /*#__PURE__*/React.createContext(undefined);
 /**
  * Custom hook to fetch section data.
+ *
+ * @param {TSection} [section] - The section data if provided directly
+ * @param {string} [sectionId] - The ID of the section to fetch
+ * @returns {Object} Object containing section data, loading state, and any error
  */
 var useSectionData = function (section, sectionId) {
-  var getSectionByID = useWllSdk().getSectionByID;
+  var sdk = useWllSdk();
   var _a = React.useState(section || null),
     sectionData = _a[0],
     setSectionData = _a[1];
@@ -20530,7 +20718,7 @@ var useSectionData = function (section, sectionId) {
   React.useEffect(function () {
     if (section) {
       setSectionData(section);
-    } else if (sectionId) {
+    } else if (sectionId && sdk && sdk.getSectionByID) {
       var fetchSection = function () {
         return __awaiter(void 0, void 0, void 0, function () {
           var response, err_1;
@@ -20541,13 +20729,13 @@ var useSectionData = function (section, sectionId) {
                 _a.label = 1;
               case 1:
                 _a.trys.push([1, 3, 4, 5]);
-                return [4 /*yield*/, getSectionByID(sectionId)];
+                return [4 /*yield*/, sdk.getSectionByID(sectionId)];
               case 2:
                 response = _a.sent();
-                if (response.status === 'success' && response.data) {
+                if (response && response.status === 'success' && response.data) {
                   setSectionData(response.data);
                 } else {
-                  setError(response.error || 'Failed to fetch section data.');
+                  setError(response && response.error || 'Failed to fetch section data.');
                 }
                 return [3 /*break*/, 5];
               case 3:
@@ -20565,7 +20753,7 @@ var useSectionData = function (section, sectionId) {
       };
       fetchSection();
     }
-  }, [section, sectionId, getSectionByID]);
+  }, [section, sectionId, sdk]);
   return {
     sectionData: sectionData,
     isLoading: isLoading,
@@ -20574,20 +20762,26 @@ var useSectionData = function (section, sectionId) {
 };
 /**
  * Component to display an empty state with a message.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.message - Message to display in the empty state
+ * @returns {JSX.Element} The empty state component
  */
 var EmptyState = function (_a) {
   var message = _a.message;
   return /*#__PURE__*/React.createElement(View$2, {
     style: commonStyles.emptyContainer,
-    accessible: true,
+    accessibilityRole: "text",
     accessibilityLabel: "Empty state: ".concat(message)
-  }, /*#__PURE__*/React.createElement(Text$3, {
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, message));
+  }, /*#__PURE__*/React.createElement(Text$3, null, message));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
+ *
+ * @param {SectionProps} props - Component props
+ * @param {TSection} [props.section] - The section data
+ * @param {string} [props.sectionId] - The ID of the section to fetch
+ * @returns {JSX.Element|null} The rendered section or null if invalid props
  */
 var Section = function (_a) {
   var section = _a.section,
@@ -20614,12 +20808,23 @@ var Section = function (_a) {
       });
     }
     // Filter out inactive tiles before passing to child components
-    var activeTiles = sortByPriority(sectionData.tiles.filter(function (tile) {
-      return tile.active;
+    var activeTiles = sectionData.tiles && sortByPriority(sectionData.tiles.filter(function (tile) {
+      return tile && tile.active;
     }));
+    if (!activeTiles || activeTiles.length === 0) {
+      return /*#__PURE__*/React.createElement(EmptyState, {
+        message: "No active tiles available."
+      });
+    }
     var sectionWithActiveTiles = __assign(__assign({}, sectionData), {
       tiles: activeTiles
     });
+    if (!sectionData.type) {
+      console.warn('Section is missing a type');
+      return /*#__PURE__*/React.createElement(EmptyState, {
+        message: "Invalid section configuration."
+      });
+    }
     switch (sectionData.type) {
       case exports.SectionType.Banner:
         return /*#__PURE__*/React.createElement(Carousel, {
@@ -20643,13 +20848,21 @@ var Section = function (_a) {
   }, /*#__PURE__*/React.createElement(View$2, {
     style: styles.section,
     accessible: true,
-    role: "region",
-    "aria-label": "Section: ".concat(sectionData.title || 'Untitled section'),
-    "aria-description": sectionData.description || undefined
+    accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'),
+    accessibilityHint: sectionData.description || undefined
   }, renderSectionContent())) : null;
 };
 
+/**
+ * Context for providing group data to child components
+ */
 var GroupContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * Custom hook to access the GroupContext
+ *
+ * @returns {GroupContextType} The group context data
+ * @throws {Error} If used outside of a GroupProvider
+ */
 var useGroupContext = function () {
   var context = React.useContext(GroupContext);
   if (!context) {
@@ -20657,9 +20870,14 @@ var useGroupContext = function () {
   }
   return context;
 };
-// Custom Hook for Group Data
+/**
+ * Custom hook to fetch and manage group data
+ *
+ * @param {string} id - The ID of the group to fetch
+ * @returns {Object} Object containing group data, loading state, and any error
+ */
 var useGroupData = function (id) {
-  var getGroupByID = useWllSdk().getGroupByID;
+  var sdk = useWllSdk();
   var _a = React.useState(null),
     groupData = _a[0],
     setGroupData = _a[1];
@@ -20671,27 +20889,33 @@ var useGroupData = function (id) {
     setIsLoading = _c[1];
   var fetchGroup = React.useCallback(function () {
     return __awaiter(void 0, void 0, void 0, function () {
-      var response;
+      var response, err_1;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            if (!id || !sdk || !sdk.getGroupByID) {
+              setError('Unable to fetch group data: invalid configuration');
+              setIsLoading(false);
+              return [2 /*return*/];
+            }
             setIsLoading(true);
             setError(null);
             _a.label = 1;
           case 1:
             _a.trys.push([1, 3, 4, 5]);
-            return [4 /*yield*/, getGroupByID(id)];
+            return [4 /*yield*/, sdk.getGroupByID(id)];
           case 2:
             response = _a.sent();
-            if (response.status === 'success' && response.data) {
+            if (response && response.status === 'success' && response.data) {
               setGroupData(response.data);
             } else {
-              setError(response.error || 'Failed to fetch group data.');
+              setError(response && response.error || 'Failed to fetch group data.');
             }
             return [3 /*break*/, 5];
           case 3:
-            _a.sent();
+            err_1 = _a.sent();
             setError('Failed to fetch group data. Please try again later.');
+            console.error('Error fetching group:', err_1);
             return [3 /*break*/, 5];
           case 4:
             setIsLoading(false);
@@ -20701,7 +20925,7 @@ var useGroupData = function (id) {
         }
       });
     });
-  }, [id, getGroupByID]);
+  }, [id, sdk]);
   React.useEffect(function () {
     fetchGroup();
   }, [fetchGroup]);
@@ -20711,6 +20935,55 @@ var useGroupData = function (id) {
     error: error
   };
 };
+/**
+ * Component to display an empty state with a message
+ *
+ * @param {GroupEmptyStateProps} props - Component props
+ * @param {string} props.message - Message to display
+ * @returns {JSX.Element} The empty state component
+ */
+var GroupEmptyState = function (_a) {
+  var message = _a.message;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: commonStyles.emptyContainer,
+    accessible: true,
+    accessibilityLabel: "Empty state: ".concat(message)
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "body"
+  }, message));
+};
+/**
+ * Component to render all sections in a group
+ *
+ * @returns {JSX.Element} The sections component
+ */
+var GroupSections = function () {
+  var groupData = useGroupContext().groupData;
+  if (!groupData || !groupData.sections || groupData.sections.length === 0) {
+    return /*#__PURE__*/React.createElement(GroupEmptyState, {
+      message: "This group doesn't have any sections"
+    });
+  }
+  // Filter out inactive sections and null/undefined values before sorting
+  var activeSections = groupData.sections.filter(function (section) {
+    return section && section.active;
+  });
+  if (activeSections.length === 0) {
+    return /*#__PURE__*/React.createElement(GroupEmptyState, {
+      message: "This group doesn't have any active sections"
+    });
+  }
+  var sortedSections = sortByPriority(activeSections);
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group')
+  }, sortedSections.map(function (section) {
+    return /*#__PURE__*/React.createElement(Section, {
+      key: section.id,
+      section: section
+    });
+  }));
+};
 /**
  * A page-level component that represents a Group view in the application.
  *
@@ -20719,18 +20992,25 @@ var useGroupData = function (id) {
  * loading, errors, and empty states, providing a complete page experience for
  * viewing group content.
  *
- * @param id - The unique identifier of the group to fetch and display.
+ * @param {GroupProps} props - Component props
+ * @param {string} props.id - The unique identifier of the group to fetch and display
+ * @returns {JSX.Element|null} The rendered group or null if invalid ID
  */
 var Group = function (_a) {
   var id = _a.id;
-  if (!id) return null;
+  if (!id) {
+    console.warn('Group component requires id prop');
+    return null;
+  }
   var _b = useGroupData(id),
     groupData = _b.groupData,
     isLoading = _b.isLoading,
     error = _b.error;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer
+      style: commonStyles.emptyContainer,
+      accessible: true,
+      accessibilityLabel: "Loading group data"
     }, /*#__PURE__*/React.createElement(Skeleton, null));
   }
   if (error || !groupData) {
@@ -20746,33 +21026,6 @@ var Group = function (_a) {
     "data-testid": "group-container"
   }, /*#__PURE__*/React.createElement(GroupSections, null)));
 };
-var GroupSections = function () {
-  var groupData = useGroupContext().groupData;
-  if (!groupData.sections || groupData.sections.length === 0) {
-    return /*#__PURE__*/React.createElement(GroupEmptyState, {
-      message: "This group doesn't have any sections"
-    });
-  }
-  // Filter out inactive sections before sorting
-  var activeSections = groupData.sections.filter(function (section) {
-    return section.active;
-  });
-  var sortedSections = sortByPriority(activeSections);
-  return /*#__PURE__*/React.createElement(View$2, null, sortedSections.map(function (section) {
-    return /*#__PURE__*/React.createElement(Section, {
-      key: section.id,
-      section: section
-    });
-  }));
-};
-var GroupEmptyState = function (_a) {
-  var message = _a.message;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: commonStyles.emptyContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "body"
-  }, message));
-};
 
 /**
  * Cleans up a number by removing any whitespace and ensuring it's a valid number
@@ -20980,6 +21233,12 @@ var Spacer = function (_a) {
   }, rest));
 };
 
+/**
+ * Custom hook that returns the styles for the PointsTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the PointsTile component
+ */
 var usePointsTileStyles = function (isFullSize) {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21023,23 +21282,30 @@ var usePointsTileStyles = function (isFullSize) {
   });
 };
 
+/**
+ * Renders formatted points value for a Points Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
 var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
-  var configuration = useTileContext().configuration;
-  var _a = configuration,
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
     _b = _a.pointsMultiplier,
     pointsMultiplier = _b === void 0 ? 1 : _b,
     _c = _a.pointsPrefix,
     pointsPrefix = _c === void 0 ? '' : _c,
     _d = _a.pointsSuffix,
     pointsSuffix = _d === void 0 ? 'pts' : _d,
-    points = _a.points;
+    _e = _a.points,
+    points = _e === void 0 ? 0 : _e;
   if (points === undefined || points === 0) return null;
   var calculatedPoints = applyMultiplier(points, pointsMultiplier);
-  var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix);
+  var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-points",
-    accessible: true,
+    accessibilityRole: "text",
     accessibilityLabel: "Points value: ".concat(fullPointsText)
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -21057,55 +21323,64 @@ var PointsTileFormattedPoints = function () {
   }, pointsSuffix) : null));
 };
 
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
 var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
-  var configuration = useTileContext().configuration;
-  var _b = configuration,
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
     artworkUrl = _b.artworkUrl,
-    title = _b.title;
+    _c = _b.title,
+    title = _c === void 0 ? 'Points' : _c;
   var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-media",
-    accessible: true,
-    role: "img",
-    style: styles.imageContainer
+    style: styles.imageContainer,
+    accessibilityRole: "image",
+    accessibilityLabel: "Points tile image for ".concat(title)
   }, /*#__PURE__*/React.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
     style: styles.image,
-    resizeMode: isFullSize ? 'cover' : 'contain',
-    accessibilityElementsHidden: true,
-    accessibilityLabel: "Points tile image for ".concat(title),
-    importantForAccessibility: "no-hide-descendants"
+    resizeMode: isFullSize ? 'cover' : 'contain'
   }));
 };
 
+/**
+ * Renders the title of a Points Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
 var PointsTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var title = configuration.title;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var title = tileContext.configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    testID: "points-tile-title",
-    accessible: true,
-    accessibilityLabel: title,
-    role: "banner"
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "eyebrow",
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, title));
+    testID: "points-tile-title",
+    accessibilityRole: "header",
+    accessibilityLabel: title
+  }, title);
 };
 
 /**
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
- * @param tile - The tile data to render.
+ * @param props - Component props
+ * @returns JSX.Element or null if tile is inactive or missing required props
  */
 var PointsTileRoot = function (_a) {
   var tile = _a.tile;
-  if (!tile || !tile.active) return null;
+  if (!tile || !tile.active || !tile.configuration) return null;
+  var config = tile.configuration;
+  if (!config) return null;
   var isFullSize = useTileSize(tile).isFullSize;
   var styles = usePointsTileStyles(isFullSize);
   return /*#__PURE__*/React.createElement(BaseTile, {
@@ -21130,6 +21405,12 @@ var PointsTile = Object.assign(PointsTileRoot, {
 });
 var PointsTile$1 = withTileFetching(PointsTile);
 
+/**
+ * Custom hook that returns the styles for the RewardCategory component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RewardCategory component
+ */
 var useRewardCategoryTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21161,21 +21442,29 @@ var useRewardCategoryTileStyles = function () {
   });
 };
 
+/**
+ * Renders the header for a Reward Category Tile.
+ *
+ * @returns JSX.Element or null if showName is false or name is not present
+ */
 var RewardCategoryHeader = function () {
   var styles = useRewardCategoryTileStyles();
   var theme = useWllSdk().theme;
-  var configuration = useTileContext().configuration;
-  var _a = configuration,
-    showName = _a.showName,
-    name = _a.name;
+  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;
   if (!showName || !name) return null;
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.header, {
       backgroundColor: theme.primary
     }],
-    accessible: true,
-    accessibilityLabel: "Reward category: ".concat(name),
-    testID: "reward-category-header"
+    testID: "reward-category-header",
+    accessibilityRole: "header",
+    accessibilityLabel: "Reward category: ".concat(name)
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.headerText, {
       color: theme.primaryText
@@ -21185,12 +21474,19 @@ var RewardCategoryHeader = function () {
   }, name));
 };
 
+/**
+ * Renders the background media for a Reward Category Tile.
+ *
+ * @returns JSX.Element or null if no artwork URL is present
+ */
 var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
-  var configuration = useTileContext().configuration;
-  var _a = configuration,
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
     artworkUrl = _a.artworkUrl,
-    name = _a.name;
+    _b = _a.name,
+    name = _b === void 0 ? 'Reward' : _b;
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(ProgressiveImage, {
     testID: "reward-category-media",
@@ -21199,19 +21495,20 @@ var RewardCategoryMedia = function () {
     },
     style: styles.background,
     alt: "Reward category image for ".concat(name),
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
+    accessibilityRole: "image"
   });
 };
 
 /**
  * The RewardCategoryTile component renders a tile with a header and media.
  *
- * @param tile - The tile data to render.
+ * @param {RewardCategoryTileProps} props - The component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns {JSX.Element|null} Rendered component or null if tile is inactive or missing configuration
  */
 var RewardCategoryTileRoot = function (_a) {
   var tile = _a.tile;
-  if (!tile || !tile.active) return null;
+  if (!tile || !tile.active || !tile.configuration) return null;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React.createElement(RewardCategoryTile.Media, null));
@@ -21225,14 +21522,28 @@ var RewardCategoryTile = Object.assign(RewardCategoryTileRoot, {
 });
 var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 
+/**
+ * Renders a chevron icon for a Reward Tile.
+ *
+ * @returns JSX.Element
+ */
 var RewardTileChevron = function () {
+  var _a;
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React.createElement(Icon, {
     name: "ChevronRight",
-    color: theme.derivedSurfaceText[20]
+    color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000',
+    accessibilityRole: "image",
+    accessibilityLabel: "View reward details"
   });
 };
 
+/**
+ * Custom hook that returns the styles for the RewardTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RewardTile component
+ */
 var useRewardTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21276,24 +21587,33 @@ var useRewardTileStyles = function () {
   });
 };
 
+/**
+ * Renders the media for a Reward Tile.
+ *
+ * @param props {RewardTileMediaProps} - Component props
+ * @param props.isArtworkOnly {boolean} - Whether the media should be rendered as an artwork only component
+ * @returns JSX.Element or null if no artwork URL is present or artwork should not be shown
+ */
 var RewardTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
   var styles = useRewardTileStyles();
-  var configuration = useTileContext().configuration;
-  var _b = configuration,
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
     artworkUrl = _b.artworkUrl,
     _c = _b.showArtwork,
     showArtwork = _c === void 0 ? true : _c,
-    name = _b.name;
+    _d = _b.name,
+    name = _d === void 0 ? 'Reward' : _d;
   if (!artworkUrl || !showArtwork) return null;
   var containerStyle = {
     flexBasis: isArtworkOnly ? '100%' : '50%'
   };
-  return /*#__PURE__*/React.createElement(View$2
-  // @ts-ignore: We are using percentage values for flexBasis, which is valid in React Native but TypeScript expects a number.
-  , {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
-    testID: "reward-tile-media"
+    testID: "reward-tile-media",
+    accessibilityRole: "image",
+    accessibilityLabel: "Reward image for ".concat(name)
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
@@ -21303,26 +21623,32 @@ var RewardTileMedia = function (_a) {
   }));
 };
 
+/**
+ * Renders the points value of a Reward Tile.
+ *
+ * @returns JSX.Element or null if price should not be shown or is zero/undefined
+ */
 var RewardTilePoints = function () {
   var styles = useRewardTileStyles();
-  var configuration = useTileContext().configuration;
-  var _a = configuration,
-    showPrice = _a.showPrice,
-    price = _a.price,
-    _b = _a.pointsMultiplier,
-    pointsMultiplier = _b === void 0 ? 1 : _b,
-    _c = _a.pointsPrefix,
-    pointsPrefix = _c === void 0 ? '' : _c,
-    _d = _a.pointsSuffix,
-    pointsSuffix = _d === void 0 ? 'pts' : _d;
-  // Exit early if price is not shown or undefined
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _a = tileContext.configuration,
+    _b = _a.showPrice,
+    showPrice = _b === void 0 ? true : _b,
+    _c = _a.price,
+    price = _c === void 0 ? 0 : _c,
+    _d = _a.pointsMultiplier,
+    pointsMultiplier = _d === void 0 ? 1 : _d,
+    _e = _a.pointsPrefix,
+    pointsPrefix = _e === void 0 ? '' : _e,
+    _f = _a.pointsSuffix,
+    pointsSuffix = _f === void 0 ? 'pts' : _f;
   if (!showPrice || price === undefined || price === 0) return null;
-  // Calculate points
   var calculatedPoints = applyMultiplier(price, pointsMultiplier);
   var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "reward-tile-points",
-    accessible: true,
+    accessibilityRole: "text",
     accessibilityLabel: accessibilityLabel
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -21341,29 +21667,39 @@ var RewardTilePoints = function () {
   }, pointsSuffix) : null));
 };
 
+/**
+ * Renders the summary of a Reward Tile.
+ *
+ * @returns JSX.Element or null if no summary is present
+ */
 var RewardTileSummary = function () {
-  var configuration = useTileContext().configuration;
-  var summary = configuration.summary;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var summary = tileContext.configuration.summary;
   if (!summary) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    accessible: true,
-    accessibilityLabel: summary
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants",
+    accessibilityRole: "text",
+    accessibilityLabel: summary,
     testID: "reward-tile-summary"
-  }, summary));
+  }, summary);
 };
 
+/**
+ * Renders the title of a Reward Tile.
+ *
+ * @returns JSX.Element or null if no name is present
+ */
 var RewardTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var name = configuration.name;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var name = tileContext.configuration.name;
   if (!name) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     ellipsizeMode: "tail",
     numberOfLines: 1,
+    accessibilityRole: "header",
     accessibilityLabel: "Reward title: ".concat(name),
     testID: "reward-tile-title"
   }, name);
@@ -21376,17 +21712,20 @@ var RewardTileTitle = function () {
  * @returns `true` if the tile should display artwork only.
  */
 var isArtworkOnly = function (configuration) {
+  if (!configuration) return false;
   return !configuration.showDetails;
 };
 /**
  * The RewardTile component renders a tile with media, title, summary, points, and a chevron.
  *
- * @param tile - The tile data to render.
+ * @param {RewardTileProps} props - Component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns JSX.Element or null if tile is inactive or not a full-height tile
  */
 var RewardTileRoot = function (_a) {
   var tile = _a.tile;
   var styles = useRewardTileStyles();
-  if (!tile || tile.tileHeight !== exports.TileHeight.Full || !tile.active) return null;
+  if (!tile || tile.tileHeight !== exports.TileHeight.Full || !tile.active || !tile.configuration) return null;
   var configuration = tile.configuration;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile