@wlloyalty/wll-react-sdk 1.0.44 → 1.0.46

package/dist/index.js

@@ -8035,7 +8035,12 @@ var useTextStyles = createVariantSystem({}, function (theme) {
 var Button = function (_a) {
   var title = _a.title,
     onPress = _a.onPress,
-    variant = _a.variant;
+    variant = _a.variant,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    accessibilityLabel = _a.accessibilityLabel,
+    accessibilityHint = _a.accessibilityHint,
+    testID = _a.testID;
   var theme = useWllSdk().theme;
   var buttonStyle = useButtonStyles(theme, variant);
   var textStyle = useTextStyles(theme, variant);
@@ -8043,8 +8048,19 @@ var Button = function (_a) {
   return /*#__PURE__*/React__namespace.createElement(TouchableOpacity$1, {
     style: [styles.button, buttonStyle, {
       borderRadius: theme.sizes.borderRadiusButton
+    }, disabled && {
+      opacity: 0.5
     }],
-    onPress: onPress
+    onPress: onPress,
+    disabled: disabled,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel || title,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled: disabled
+    },
+    testID: testID
   }, /*#__PURE__*/React__namespace.createElement(Text$3, {
     style: [styles.text, textStyle]
   }, title));
@@ -18198,27 +18214,6 @@ var styles$8 = StyleSheet$1.create({
   }
 });
 
-var RowHeader = function (_a) {
-  var children = _a.children,
-    style = _a.style,
-    props = __rest(_a, ["children", "style"]);
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
-  var theme = useWllSdk().theme;
-  var dynamicStyles = StyleSheet$1.create({
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
-    }
-  });
-  return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
-    style: [dynamicStyles.header, style]
-  }, props), children);
-};
-
 var Text = function (_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'body' : _b,
@@ -19015,7 +19010,7 @@ var BannerContext = /*#__PURE__*/React.createContext(null);
 var useBannerContext = function () {
   var context = React.useContext(BannerContext);
   if (!context) {
-    throw new Error('Tile components must be used within a BaseTile');
+    throw new Error('Banner components must be used within a BaseBanner');
   }
   return context;
 };
@@ -19179,11 +19174,7 @@ var BaseTileHeader = function (_a) {
 
 var BaseTileMedia = function (props) {
   var tile = useTileContext();
-  var _a = tile.configuration,
-    artworkUrl = _a.artworkUrl;
-    _a.title;
-    _a.body;
-  useTileSize(tile).isHalfSize;
+  var artworkUrl = tile.configuration.artworkUrl;
   var styles = useBaseTileStyles();
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
@@ -19229,9 +19220,9 @@ var useTileContext = function () {
   return context;
 };
 /**
- * BaseTileRoot component to handle layout and pressable behavior.
+ * BaseTileContainer component to handle layout and pressable behavior.
  */
-var BaseTileRoot = function (_a) {
+var BaseTileContainer = function (_a) {
   var children = _a.children,
     style = _a.style;
   var tile = useTileContext();
@@ -19265,20 +19256,20 @@ var BaseTileRoot = function (_a) {
   }, children);
 };
 /**
- * BaseTileInner component to provide context and render children.
+ * BaseTileRoot component to provide context and render children.
  */
-var BaseTileInner = function (_a) {
+var BaseTileRoot = function (_a) {
   var tile = _a.tile,
     children = _a.children;
   return /*#__PURE__*/React.createElement(TileContext.Provider, {
     value: tile
-  }, /*#__PURE__*/React.createElement(BaseTile.Root, null, children));
+  }, /*#__PURE__*/React.createElement(BaseTile.Container, null, children));
 };
 /**
  * BaseTile component with subcomponents attached.
  */
-var BaseTile = Object.assign(BaseTileInner, {
-  Root: BaseTileRoot,
+var BaseTile = Object.assign(BaseTileRoot, {
+  Container: BaseTileContainer,
   Media: BaseTileMedia,
   Content: BaseTileContent,
   Header: BaseTileHeader,
@@ -19577,25 +19568,22 @@ var BadgeTileDateEarned = function () {
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
   }
-  if (count === 0) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: containerStyle
-    }, /*#__PURE__*/React.createElement(Text, {
-      variant: "label",
-      style: {
-        color: textColor
-      }
-    }, badgeNotEarnedMessage));
-  }
-  var formattedDate = new Date(createdAt).toLocaleDateString();
+  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(new Date(createdAt).toLocaleDateString());
+  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(new Date(createdAt).toLocaleDateString());
+  if (!displayText) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: containerStyle
+    style: containerStyle,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "label",
     style: {
       color: textColor
-    }
-  }, "".concat(awardedDatePrefix, " ").concat(formattedDate)));
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, displayText));
 };
 
 var BadgeTileDescription = function () {
@@ -19604,11 +19592,17 @@ var BadgeTileDescription = function () {
   var count = configuration.count,
     description = configuration.description;
   if (count === 0 || !description) return null;
-  return /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: "Badge description: ".concat(description)
+  }, /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     numberOfLines: 2,
-    ellipsizeMode: "tail"
-  }, description);
+    ellipsizeMode: "tail",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, description));
 };
 
 var BadgeTileMedia = function (_a) {
@@ -19644,13 +19638,22 @@ var BadgeTileStatus = function () {
   if (type !== exports.BadgeTileType.Specific || count === 1) {
     return null;
   }
+  var isLocked = count === 0;
+  var statusLabel = isLocked ? 'Badge locked' : "Earned ".concat(count, " times");
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles.indicatorContainer
-  }, count === 0 ? /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
+    style: styles.indicatorContainer,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: statusLabel
+  }, isLocked ? /*#__PURE__*/React.createElement(Icon, {
+    name: "LockKeyhole",
     color: "#FFF",
-    size: 20
+    size: 20,
+    accessibilityElementsHidden: true
   }) : /*#__PURE__*/React.createElement(Text, {
-    style: styles.countText
+    style: styles.countText,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
   }, count, "x"));
 };
 
@@ -19663,11 +19666,17 @@ var BadgeTileTitle = function () {
     emptyBadgeMessage = configuration.emptyBadgeMessage;
   var displayText = count === 0 ? emptyBadgeMessage : name;
   if (!displayText) return null;
-  return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: "Badge title: ".concat(displayText)
+  }, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     style: styles.titleText,
     numberOfLines: count === 0 ? 2 : 1,
-    ellipsizeMode: "tail"
+    ellipsizeMode: "tail",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
   }, displayText));
 };
 
@@ -19681,7 +19690,7 @@ var BadgeTileRoot = function (_a) {
   if (!tile) return null;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Layout, {
     justify: "between",
     align: "start"
   }, /*#__PURE__*/React.createElement(BadgeTile.Title, null), /*#__PURE__*/React.createElement(BadgeTile.Description, null), /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(BadgeTile.DateEarned, null)));
@@ -19706,10 +19715,12 @@ var BannerTileCTA = function () {
     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);
   return /*#__PURE__*/React.createElement(Button, {
     title: ctaText,
     variant: "accent",
-    onPress: handlePress
+    onPress: handlePress,
+    accessibilityHint: hint
   });
 };
 
@@ -19755,34 +19766,45 @@ var BannerTileDescription = function () {
   var description = configuration.description;
   var theme = useWllSdk().theme;
   if (!description) return null;
-  return /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: description
+  }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.description, {
       color: theme.derivedSurfaceText[20]
-    }]
-  }, description);
+    }],
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, description));
 };
 
 var BannerTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
   var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
-  var artworkUrl = configuration.artworkUrl;
+  var _b = configuration,
+    artworkUrl = _b.artworkUrl,
+    title = _b.title;
   if (!artworkUrl) return null;
   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.createElement(View$2, {
-      style: [styles.mediaContainer, containerStyle]
-    }, /*#__PURE__*/React.createElement(ProgressiveImage, {
-      source: {
-        uri: artworkUrl
-      },
-      style: styles.media
-    }))
-  );
+  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.
+  , {
+    style: [styles.mediaContainer, containerStyle],
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : '')
+  }, /*#__PURE__*/React.createElement(ProgressiveImage, {
+    source: {
+      uri: artworkUrl
+    },
+    style: styles.media,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }));
 };
 
 var BannerTileTitle = function () {
@@ -19790,10 +19812,16 @@ var BannerTileTitle = function () {
   var configuration = useBannerContext().configuration;
   var title = configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: title
+  }, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    style: styles.title
-  }, title);
+    style: styles.title,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, title));
 };
 
 /**
@@ -19813,15 +19841,12 @@ var isArtworkOnly$1 = function (configuration) {
 var BannerTileRoot = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
-  var styles = useBannerTileStyles();
   var configuration = tile.configuration;
   return /*#__PURE__*/React.createElement(BaseBanner, {
     tile: tile
   }, /*#__PURE__*/React.createElement(BannerTile.Media, {
     isArtworkOnly: isArtworkOnly$1(configuration)
-  }), /*#__PURE__*/React.createElement(View$2, {
-    style: styles.slideContent
-  }, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
+  }), /*#__PURE__*/React.createElement(FullFlex, null, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
 };
 /**
  * The BannerTile component with subcomponents attached.
@@ -19838,6 +19863,11 @@ var ContentTileBody = function () {
   return /*#__PURE__*/React.createElement(BaseTile.Body, null);
 };
 
+var ContentTileContainer = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React.createElement(BaseTile.Container, null, children);
+};
+
 var useContentTileStyles = function () {
   var theme = useWllSdk().theme;
   var _a = useResponsive$1(),
@@ -19877,28 +19907,23 @@ var ContentTileMedia = function () {
   });
 };
 
-var ContentTileRoot = function (_a) {
-  var children = _a.children;
-  return /*#__PURE__*/React.createElement(BaseTile.Root, null, children);
-};
-
 /**
- * The ContentTile component renders a tile with a root, media, content, header, and body.
+ * The ContentTile component renders a tile with a container, media, content, header, and body.
  *
  * @param tile - The tile data to render.
  */
-var ContentTileMain = function (_a) {
+var ContentTileRoot = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React.createElement(ContentTile.Root, null, /*#__PURE__*/React.createElement(ContentTile.Media, null), /*#__PURE__*/React.createElement(ContentTile.Content, null, /*#__PURE__*/React.createElement(ContentTile.Header, null), /*#__PURE__*/React.createElement(ContentTile.Body, null))));
+  }, /*#__PURE__*/React.createElement(ContentTile.Container, null, /*#__PURE__*/React.createElement(ContentTile.Media, null), /*#__PURE__*/React.createElement(ContentTile.Content, null, /*#__PURE__*/React.createElement(ContentTile.Header, null), /*#__PURE__*/React.createElement(ContentTile.Body, null))));
 };
 /**
  * The ContentTile component with subcomponents attached.
  */
-var ContentTile = Object.assign(ContentTileMain, {
-  Root: ContentTileRoot,
+var ContentTile = Object.assign(ContentTileRoot, {
+  Container: ContentTileContainer,
   Media: ContentTileMedia,
   Content: ContentTileContent,
   Header: ContentTileHeader,
@@ -20128,10 +20153,9 @@ var Carousel = function (_a) {
     dispatch = _c[1];
   var currentIndex = state.currentIndex,
     containerWidth = state.containerWidth;
-  var bannerTiles = section.tiles.filter(function (tile) {
+  var sortedTiles = sortByPriority(section.tiles.filter(function (tile) {
     return tile.type === exports.TileType.Banner;
-  });
-  var sortedTiles = sortByPriority(bannerTiles);
+  }));
   var handleScroll = React.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
     var newIndex = contentOffsetX / containerWidth;
@@ -20473,8 +20497,14 @@ var useSectionData = function (section, sectionId) {
 var EmptyState = function (_a) {
   var message = _a.message;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: commonStyles.emptyContainer
-  }, /*#__PURE__*/React.createElement(Text$3, null, message));
+    style: commonStyles.emptyContainer,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: "Empty state: ".concat(message)
+  }, /*#__PURE__*/React.createElement(Text$3, {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, message));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
@@ -20494,7 +20524,13 @@ var Section = function (_a) {
   var renderSectionContent = function () {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(View$2, {
-        style: commonStyles.emptyContainer
+        style: commonStyles.emptyContainer,
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: "Loading section content",
+        accessibilityState: {
+          busy: true
+        }
       }, /*#__PURE__*/React.createElement(Skeleton, null));
     }
     if (error || !sectionData) {
@@ -20523,48 +20559,62 @@ var Section = function (_a) {
       sectionData: sectionData
     }
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles.section
+    style: styles.section,
+    accessible: true,
+    accessibilityRole: "none",
+    accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'),
+    accessibilityHint: sectionData.description || undefined
   }, renderSectionContent())) : null;
 };
 
-/**
- * A page-level component that represents a Group view in the application.
- *
- * This component serves as a container page that manages the fetching and display
- * of a group's data and its associated sections. It handles various states including
- * 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.
- */
-var Group = function (_a) {
-  var id = _a.id;
-  if (!id) return null;
+var GroupContext = /*#__PURE__*/React.createContext(undefined);
+var useGroupContext = function () {
+  var context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error('useGroupContext must be used within a GroupProvider');
+  }
+  return context;
+};
+// Custom Hook for Group Data
+var useGroupData = function (id) {
   var getGroupByID = useWllSdk().getGroupByID;
+  var _a = React.useState(null),
+    groupData = _a[0],
+    setGroupData = _a[1];
   var _b = React.useState(null),
-    groupData = _b[0],
-    setGroupData = _b[1];
-  var _c = React.useState(null),
-    error = _c[0],
-    setError = _c[1];
+    error = _b[0],
+    setError = _b[1];
+  var _c = React.useState(true),
+    isLoading = _c[0],
+    setIsLoading = _c[1];
   var fetchGroup = React.useCallback(function () {
     return __awaiter(void 0, void 0, void 0, function () {
       var response;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            _a.trys.push([0, 2,, 3]);
+            setIsLoading(true);
             setError(null);
-            return [4 /*yield*/, getGroupByID(id)];
+            _a.label = 1;
           case 1:
-            response = _a.sent();
-            setGroupData(response.data);
-            return [3 /*break*/, 3];
+            _a.trys.push([1, 3, 4, 5]);
+            return [4 /*yield*/, getGroupByID(id)];
           case 2:
+            response = _a.sent();
+            if (response.status === 'success' && response.data) {
+              setGroupData(response.data);
+            } else {
+              setError(response.error || 'Failed to fetch group data.');
+            }
+            return [3 /*break*/, 5];
+          case 3:
             _a.sent();
             setError('Failed to fetch group data. Please try again later.');
-            return [3 /*break*/, 3];
-          case 3:
+            return [3 /*break*/, 5];
+          case 4:
+            setIsLoading(false);
+            return [7 /*endfinally*/];
+          case 5:
             return [2 /*return*/];
         }
       });
@@ -20573,35 +20623,51 @@ var Group = function (_a) {
   React.useEffect(function () {
     fetchGroup();
   }, [fetchGroup]);
-  // Handle loading state
-  if (!groupData && !error) {
+  return {
+    groupData: groupData,
+    isLoading: isLoading,
+    error: error
+  };
+};
+/**
+ * A page-level component that represents a Group view in the application.
+ *
+ * This component serves as a container page that manages the fetching and display
+ * of a group's data and its associated sections. It handles various states including
+ * 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.
+ */
+var Group = function (_a) {
+  var id = _a.id;
+  if (!id) 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
     }, /*#__PURE__*/React.createElement(Skeleton, null));
   }
-  // Handle error state
-  if (error) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      variant: "body"
-    }, error));
-  }
-  // Handle empty group data
-  if (!groupData) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      variant: "body"
-    }, "No group data available"));
+  if (error || !groupData) {
+    return /*#__PURE__*/React.createElement(GroupEmptyState, {
+      message: error || 'No group data available'
+    });
   }
-  // Handle empty sections
+  return /*#__PURE__*/React.createElement(GroupContext.Provider, {
+    value: {
+      groupData: groupData
+    }
+  }, /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(GroupSections, null)));
+};
+var GroupSections = function () {
+  var groupData = useGroupContext().groupData;
   if (!groupData.sections || groupData.sections.length === 0) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      variant: "body"
-    }, "No sections available"));
+    return /*#__PURE__*/React.createElement(GroupEmptyState, {
+      message: "This group doesn't have any sections"
+    });
   }
   var sortedSections = sortByPriority(groupData.sections);
   return /*#__PURE__*/React.createElement(View$2, null, sortedSections.map(function (section) {
@@ -20611,6 +20677,170 @@ var Group = function (_a) {
     });
   }));
 };
+var GroupEmptyState = function (_a) {
+  var message = _a.message;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: commonStyles.emptyContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "body"
+  }, message));
+};
+
+var justifyMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly'
+};
+var alignMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  stretch: 'stretch',
+  baseline: 'baseline'
+};
+
+/**
+ * A primitive Column component that extends Layout with vertical direction.
+ * Provides a cleaner API for creating vertically aligned layouts.
+ * @param reverse - When true, reverses the direction of the column (column-reverse)
+ * @param justify - The justify content of the column
+ * @param align - The align items of the column
+ * @param flex - Optional flex number to control the column's flex behavior
+ * @param style - Additional styles to apply to the column
+ */
+var Column = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'start' : _c,
+    _d = _a.reverse,
+    reverse = _d === void 0 ? false : _d,
+    flex = _a.flex,
+    style = _a.style,
+    rest = __rest(_a, ["children", "justify", "align", "reverse", "flex", "style"]);
+  var styles = StyleSheet$1.create({
+    container: __assign({
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      flexDirection: reverse ? 'column-reverse' : 'column'
+    }, flex !== undefined && {
+      flex: flex
+    })
+  });
+  return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
+    style: [styles.container, style]
+  }, rest), children);
+};
+
+/**
+ * A FullFlex component that provides a flexible container with `flex: 1`.
+ *
+ * This component is commonly used to create a full-flex container that expands
+ * to fill available space in a layout.
+ */
+var FullFlex = function (_a) {
+  var children = _a.children,
+    style = _a.style,
+    rest = __rest(_a, ["children", "style"]);
+  return /*#__PURE__*/React.createElement(View$2, _extends({
+    style: [{
+      flex: 1
+    }, style]
+  }, rest), children);
+};
+
+/**
+ * A primitive Layout component that provides flexible layout options.
+ * @param direction - The direction of the layout (column or row)
+ * @param justify - The justify content of the layout
+ * @param align - The align items of the layout
+ * @param style - Additional styles to apply to the layout
+ * @param children - The child components to render inside the layout
+ * @returns The rendered Layout component with special paddings
+ */
+var Layout = function (_a) {
+  var children = _a.children,
+    _b = _a.direction,
+    direction = _b === void 0 ? 'column' : _b,
+    _c = _a.justify,
+    justify = _c === void 0 ? 'start' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'start' : _d,
+    _e = _a.style,
+    style = _e === void 0 ? {} : _e,
+    rest = __rest(_a, ["children", "direction", "justify", "align", "style"]);
+  var theme = useWllSdk().theme;
+  var _f = useResponsive$1(),
+    isDesktop = _f.isDesktop,
+    isTablet = _f.isTablet;
+  var dynamicStyles = StyleSheet$1.create({
+    container: {
+      flex: 1,
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      flexDirection: direction
+    }
+  });
+  return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
+    style: [dynamicStyles.container, style]
+  }, rest), children);
+};
+
+/**
+ * A primitive Row component that extends Layout with horizontal direction.
+ * Provides a cleaner API for creating horizontally aligned layouts.
+ * @param reverse - When true, reverses the direction of the row (row-reverse)
+ * @param justify - The justify content of the row
+ * @param align - The align items of the row
+ * @param flex - Optional flex number to control the row's flex behavior
+ * @param style - Additional styles to apply to the row
+ */
+var Row = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'center' : _c,
+    _d = _a.reverse,
+    reverse = _d === void 0 ? false : _d,
+    flex = _a.flex,
+    style = _a.style,
+    rest = __rest(_a, ["children", "justify", "align", "reverse", "flex", "style"]);
+  var styles = StyleSheet$1.create({
+    container: __assign({
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      flexDirection: reverse ? 'row-reverse' : 'row'
+    }, flex !== undefined && {
+      flex: flex
+    })
+  });
+  return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
+    style: [styles.container, style]
+  }, rest), children);
+};
+
+/**
+ * A simple Spacer component that creates flexible space in layouts.
+ *
+ * The Spacer is commonly used in flexbox layouts to create adjustable empty space
+ * between child elements, avoiding the need for explicit margins or padding.
+ */
+var Spacer = function (_a) {
+  var style = _a.style,
+    rest = __rest(_a, ["style"]);
+  return /*#__PURE__*/React.createElement(View$2, _extends({
+    style: [{
+      flex: 1
+    }, style]
+  }, rest));
+};
 
 var usePointsTileStyles = function (isFullSize) {
   var _a = useResponsive$1(),
@@ -20626,7 +20856,6 @@ var usePointsTileStyles = function (isFullSize) {
       justifyContent: 'space-between'
     },
     contentContainer: {
-      flexDirection: 'column',
       width: isFullSize ? '100%' : 'auto'
     },
     suffix: {
@@ -20656,6 +20885,11 @@ var usePointsTileStyles = function (isFullSize) {
   });
 };
 
+var TextProps = {
+  variant: 'caption',
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants'
+};
 var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
   var configuration = useTileContext().configuration;
@@ -20669,36 +20903,56 @@ var PointsTileFormattedPoints = function () {
     points = _a.points;
   if (points === undefined) return null;
   var calculatedPoints = points * multiplier;
-  return /*#__PURE__*/React.createElement(Text, {
-    variant: "caption"
-  }, pointsPrefix, /*#__PURE__*/React.createElement(Row, null, calculatedPoints, /*#__PURE__*/React.createElement(Text, {
+  var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix);
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: "Points value: ".concat(fullPointsText)
+  }, /*#__PURE__*/React.createElement(Row, {
+    align: "center",
+    justify: "start"
+  }, /*#__PURE__*/React.createElement(Text, TextProps, pointsPrefix, calculatedPoints), pointsSuffix && /*#__PURE__*/React.createElement(Text, _extends({}, TextProps, {
     style: styles.suffix
-  }, pointsSuffix)));
+  }), pointsSuffix)));
 };
 
 var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
   var configuration = useTileContext().configuration;
-  var artworkUrl = configuration.artworkUrl;
+  var _b = configuration,
+    artworkUrl = _b.artworkUrl,
+    title = _b.title;
   var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles.imageContainer
+    style: styles.imageContainer,
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: "Points tile image".concat(title ? " for ".concat(title) : '')
   }, /*#__PURE__*/React.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
     style: styles.image,
-    resizeMode: "contain"
+    resizeMode: "contain",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
   }));
 };
 
 var PointsTileTitle = function () {
   var configuration = useTileContext().configuration;
   var title = configuration.title;
-  return title ? /*#__PURE__*/React.createElement(Text, {
-    variant: "eyebrow"
-  }, title) : null;
+  if (!title) return null;
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: title
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "eyebrow",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, title));
 };
 
 /**
@@ -20719,7 +20973,7 @@ var PointsTileRoot = function (_a) {
     style: styles.container
   }, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
     isFullSize: false
-  }), /*#__PURE__*/React.createElement(View$2, {
+  }), /*#__PURE__*/React.createElement(Column, {
     style: styles.contentContainer
   }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
 };
@@ -20775,26 +21029,34 @@ var RewardCategoryHeader = function () {
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.header, {
       backgroundColor: theme.primary
-    }]
+    }],
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: "Reward category: ".concat(name)
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.headerText, {
       color: theme.primaryText
     }],
     ellipsizeMode: "tail",
-    numberOfLines: 1
+    numberOfLines: 1,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
   }, name));
 };
 
 var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
   var configuration = useTileContext().configuration;
-  var artworkUrl = configuration.artworkUrl;
+  var _a = configuration,
+    artworkUrl = _a.artworkUrl,
+    name = _a.name;
   if (!artworkUrl) return null;
   return /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
-    style: styles.background
+    style: styles.background,
+    alt: name
   });
 };
 
@@ -20864,6 +21126,7 @@ var useRewardTileStyles = function () {
       fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet)
     },
     header: {
+      width: '100%',
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     }
   });
@@ -20911,23 +21174,36 @@ var RewardTilePoints = function () {
   if (!showPrice || price === undefined) return null;
   // Calculate points
   var calculatedPoints = price * Number(pointsMultiplier);
-  return /*#__PURE__*/React.createElement(Text, {
+  var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix);
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: "Reward points: ".concat(fullPointsText)
+  }, /*#__PURE__*/React.createElement(Text, {
     variant: "caption",
-    style: styles.footer
+    style: styles.footer,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
   }, pointsPrefix, /*#__PURE__*/React.createElement(View$2, {
     style: styles.pointsContainer
   }, calculatedPoints, /*#__PURE__*/React.createElement(Text, {
     style: styles.suffix
-  }, pointsSuffix)));
+  }, pointsSuffix))));
 };
 
 var RewardTileSummary = function () {
   var configuration = useTileContext().configuration;
   var summary = configuration.summary;
   if (!summary) return null;
-  return /*#__PURE__*/React.createElement(Text, {
-    variant: "body"
-  }, summary);
+  return /*#__PURE__*/React.createElement(View$2, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: summary
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "body",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  }, summary));
 };
 
 var RewardTileTitle = function () {
@@ -20964,7 +21240,7 @@ var RewardTileRoot = function (_a) {
     tile: tile
   }, /*#__PURE__*/React.createElement(RewardTile.Media, {
     isArtworkOnly: isArtworkOnly(configuration)
-  }), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Row, {
+  }), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
     justify: "between",
     align: "center",
     style: styles.header
@@ -20982,169 +21258,6 @@ var RewardTile = Object.assign(RewardTileRoot, {
 });
 var RewardTile$1 = withTileFetching(RewardTile);
 
-var justifyMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  between: 'space-between',
-  around: 'space-around',
-  evenly: 'space-evenly'
-};
-var alignMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  stretch: 'stretch',
-  baseline: 'baseline'
-};
-
-/**
- * A Column layout component that arranges its children in a vertical stack.
- *
- * @param children - The child components to render inside the column.
- * @param justify - Defines how children are aligned along the main axis.
- * @param align - Defines how children are aligned along the cross axis.
- * @param style - Additional styles to apply to the container.
- */
-var Column = /*#__PURE__*/React.memo(function (_a) {
-  var _b, _c;
-  var children = _a.children,
-    _d = _a.justify,
-    justify = _d === void 0 ? 'start' : _d,
-    _e = _a.align,
-    align = _e === void 0 ? 'stretch' : _e,
-    style = _a.style;
-  var _f = useResponsive$1(),
-    isDesktop = _f.isDesktop,
-    isTablet = _f.isTablet;
-  var theme = useWllSdk().theme;
-  var spacing = useResponsiveValue((_b = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _b === void 0 ? void 0 : _b.sm, (_c = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _c === void 0 ? void 0 : _c.xxxs, isDesktop, isTablet);
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flex: 1,
-      flexDirection: 'column',
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align],
-      paddingHorizontal: spacing,
-      paddingBottom: spacing
-    }, style]
-  }, children);
-});
-
-/**
- * A FlexBox component that provides a flexible container with `flex: 1`.
- *
- * This component is commonly used to create a full-flex container that expands
- * to fill available space in a layout.
- */
-var FlexBox = function (_a) {
-  var children = _a.children,
-    style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flex: 1
-    }, style]
-  }, children);
-};
-
-var Layout = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'stretch' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'column' : _d,
-    _e = _a.style,
-    style = _e === void 0 ? {} : _e;
-  var theme = useWllSdk().theme;
-  var _f = useResponsive$1(),
-    isDesktop = _f.isDesktop,
-    isTablet = _f.isTablet;
-  var dynamicStyles = StyleSheet$1.create({
-    column: {
-      flex: 1,
-      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align],
-      flexDirection: direction
-    }
-  });
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [dynamicStyles.column, style]
-  }, children);
-};
-
-/**
- * A Row layout component that arranges its children in a horizontal stack.
- *
- * @param children - The child components to render inside the row.
- * @param justify - Defines how children are aligned along the main axis (horizontal).
- * @param align - Defines how children are aligned along the cross axis (vertical).
- * @param direction - The flex direction for the row (default is 'row').
- * @param style - Additional styles to apply to the container.
- */
-var Row = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'center' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'row' : _d,
-    style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flexDirection: direction,
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align]
-    }, style]
-  }, children);
-};
-
-/**
- * A simple Spacer component that creates flexible space in layouts.
- *
- * The Spacer is commonly used in flexbox layouts to create adjustable empty space
- * between child elements, avoiding the need for explicit margins or padding.
- */
-var Spacer = function (_a) {
-  var style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flex: 1
-    }, style]
-  });
-};
-
-/**
- * A Stack layout component that arranges its children in a flexible stack.
- *
- * @param children - The child components to render inside the stack.
- * @param justify - Defines how children are aligned along the main axis.
- * @param align - Defines how children are aligned along the cross axis.
- * @param direction - The flex direction for the stack (default is 'column').
- * @param style - Additional styles to apply to the container.
- */
-var Stack = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'stretch' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'column' : _d,
-    style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flexDirection: direction,
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align]
-    }, style]
-  }, children);
-};
-
 var useTierTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21227,8 +21340,7 @@ var TierTileFull = function (_a) {
     resizeMode: "center"
   })), /*#__PURE__*/React__namespace.createElement(Layout, {
     align: "stretch",
-    justify: artworkUrl ? 'start' : 'center',
-    direction: "column"
+    justify: artworkUrl ? 'start' : 'center'
   }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "eyebrow",
     style: styles.title
@@ -21299,16 +21411,12 @@ var TierTileEmpty = function (_a) {
       style: {
         paddingTop: 16
       }
-    }, /*#__PURE__*/React__namespace.createElement(Column, {
-      style: {
-        flex: 1
-      }
-    }, title && /*#__PURE__*/React__namespace.createElement(Text, {
+    }, /*#__PURE__*/React__namespace.createElement(FullFlex, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "title",
       style: styles.title
     }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "body"
-    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(Column, {
+    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
       style: styles.smallImageContainer
     }, /*#__PURE__*/React__namespace.createElement(Image$2, {
       source: {
@@ -21330,9 +21438,8 @@ var TierTileEmpty = function (_a) {
     resizeMode: "center"
   })), /*#__PURE__*/React__namespace.createElement(Layout, {
     align: "stretch",
-    justify: "center",
-    direction: "column"
-  }, /*#__PURE__*/React__namespace.createElement(Column, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
+    justify: "center"
+  }, /*#__PURE__*/React__namespace.createElement(Layout, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
@@ -21398,11 +21505,12 @@ exports.Carousel = Carousel;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;
-exports.FlexBox = FlexBox;
+exports.FullFlex = FullFlex;
 exports.Grid = Grid;
 exports.Group = Group;
 exports.Icon = Icon;
 exports.Indicator = Indicator;
+exports.Layout = Layout;
 exports.LoadingIndicator = LoadingIndicator;
 exports.PointsTile = PointsTile$1;
 exports.PointsTileConfig = PointsTileConfig;
@@ -21415,12 +21523,10 @@ exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
 exports.RewardTile = RewardTile$1;
 exports.RewardTileConfig = RewardTileConfig;
 exports.Row = Row;
-exports.RowHeader = RowHeader;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;
 exports.Skeleton = Skeleton;
 exports.Spacer = Spacer;
-exports.Stack = Stack;
 exports.Text = Text;
 exports.TierTileConfig = TierTileConfig;
 exports.TierTileUpdated = TierTile;