@wlloyalty/wll-react-sdk 1.4.4 → 1.4.6

package/dist/web.js

@@ -7706,7 +7706,7 @@ var styles$g = StyleSheet$1.create({
     cursor: 'pointer'
   }
 });
-var Text$3 = Text$2;
+var RNText = Text$2;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8443,16 +8443,6 @@ var desaturateColor = function (color) {
   if (!baseColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
   return baseColor.grayscale().lighten(COLOR_CONSTANTS.DESATURATION_LIGHTEN_AMOUNT).toString();
 };
-/**
- * Gets the appropriate state color based on type and count
- * @param baseColor - Base color to process
- * @param type - Type of state
- * @param count - Count affecting the state
- * @returns Processed color string
- */
-var getStateColor = function (baseColor, type, count) {
-  return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
-};
 
 var DIMENSION_MODES = {
   DESKTOP: 'desktop',
@@ -8806,7 +8796,7 @@ var Button = function (_a) {
       disabled: disabled
     },
     testID: testID
-  }, /*#__PURE__*/React__namespace.createElement(Text$3, {
+  }, /*#__PURE__*/React__namespace.createElement(RNText, {
     style: [styles.text, textStyle]
   }, title));
 };
@@ -16417,7 +16407,7 @@ var SectionList = createAnimatedComponent(SectionListWithEventThrottle);
  * @format
  */
 
-var Text$1 = createAnimatedComponent(Text$3);
+var Text$1 = createAnimatedComponent(RNText);
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -19064,7 +19054,7 @@ var Text = function (_a) {
       accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
   }
   var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
-  return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
+  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
     style: combinedStyles
   }, props, {
     accessible: true,
@@ -19106,6 +19096,12 @@ exports.TileHeight = void 0;
   TileHeight["Half"] = "HALF";
   TileHeight["Full"] = "FULL";
 })(exports.TileHeight || (exports.TileHeight = {}));
+exports.StatusVariant = void 0;
+(function (StatusVariant) {
+  StatusVariant["PRIMARY"] = "primary";
+  StatusVariant["GREEN"] = "green";
+  StatusVariant["GREY"] = "grey";
+})(exports.StatusVariant || (exports.StatusVariant = {}));
 var BannerTileConfig = /** @class */function () {
   function BannerTileConfig() {}
   return BannerTileConfig;
@@ -19317,7 +19313,7 @@ var useTileSize = function (tile) {
  * 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
+ * @returns {React.ReactElement|null} The rendered body text or null if conditions for display are not met
  */
 var BaseTileBody = function (props) {
   var tileContext = useTileContext();
@@ -19448,7 +19444,7 @@ var useBaseTileStyles = function () {
  *
  * @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
+ * @returns {React.ReactElement|null} The rendered content or null if conditions for display are not met
  */
 var BaseTileContent = function (_a) {
   var children = _a.children;
@@ -19473,7 +19469,7 @@ var BaseTileContent = function (_a) {
  *
  * @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
+ * @returns {React.ReactElement|null} The rendered header or null if conditions for display are not met
  */
 var BaseTileHeader = function (_a) {
   var children = _a.children;
@@ -19500,7 +19496,7 @@ var BaseTileHeader = function (_a) {
  * 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
+ * @returns {React.ReactElement|null} The rendered image or null if no artwork URL is present
  */
 var BaseTileMedia = function (props) {
   var tileContext = useTileContext();
@@ -19525,7 +19521,7 @@ var BaseTileMedia = function (props) {
 /**
  * Renders the title of a BaseTile component.
  *
- * @returns {JSX.Element|null} The rendered title or null if conditions for display are not met
+ * @returns {React.ReactElement|null} The rendered title or null if conditions for display are not met
  */
 var BaseTileTitle = function () {
   var _a, _b;
@@ -19631,7 +19627,7 @@ var BaseTileContainer = function (_a) {
  * 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
+ * @returns {React.ReactElement|null} The rendered BaseTileRoot or null if no tile is provided
  */
 var BaseTileRoot = function (_a) {
   var tile = _a.tile,
@@ -19671,7 +19667,7 @@ var Indicator = function () {
   };
   return /*#__PURE__*/React.createElement(View$2, {
     style: styles$5.indicator
-  }, /*#__PURE__*/React.createElement(Text$3, {
+  }, /*#__PURE__*/React.createElement(RNText, {
     style: styles$5.indicatorText
   }, getCurrentLayout()));
 };
@@ -19916,7 +19912,7 @@ function withTileFetching(WrappedComponent) {
     if (error || !tileData) {
       return /*#__PURE__*/React.createElement(View$2, {
         style: commonStyles.emptyContainer
-      }, /*#__PURE__*/React.createElement(Text$3, null, "No tile data available"));
+      }, /*#__PURE__*/React.createElement(RNText, null, "No tile data available"));
     }
     return /*#__PURE__*/React.createElement(WrappedComponent, __assign({}, props, {
       tile: tileData
@@ -19981,69 +19977,13 @@ var handleLastEarnedDate = function (date, userLocale) {
   }
 };
 
-/**
- * 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,
-    isTablet = _a.isTablet;
-  var theme = useWllSdk().theme;
-  return StyleSheet$1.create({
-    container: {
-      flex: 1
-    },
-    indicatorContainer: {
-      position: 'absolute',
-      bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-      right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
-      backgroundColor: 'rgba(0,0,0,0.6)',
-      borderRadius: 40,
-      width: 40,
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 40
-    },
-    countText: {
-      color: '#FFF',
-      fontSize: 14,
-      fontWeight: 'bold'
-    },
-    header: {
-      flexBasis: '50%',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
-    },
-    image: {
-      width: '100%',
-      height: '100%'
-    },
-    titleText: {
-      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
-    },
-    dateEarnedContainer: {
-      alignItems: 'flex-start',
-      paddingHorizontal: 8,
-      paddingVertical: 4,
-      borderRadius: 20
-    }
-  });
-};
-
 /**
  * Renders the date earned for a Badge Tile.
  *
- * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileDateEarned = function () {
-  var styles = useBadgeTileStyles();
   var tileContext = useTileContext();
-  var theme = useWllSdk().theme;
   if (!isContextValid(tileContext)) return null;
   var _a = tileContext.configuration,
     count = _a.count,
@@ -20060,34 +20000,21 @@ var BadgeTileDateEarned = function () {
   if (type === exports.BadgeTileType.Specific && count === 0 && !badgeNotEarnedMessage) {
     return null;
   }
-  var backgroundColor = getStateColor(theme.alphaDerivedPrimary[20], type, count);
-  var containerStyle = [styles.dateEarnedContainer, {
-    backgroundColor: backgroundColor
-  }];
-  var textColor = getReadableTextColor(backgroundColor);
-  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
-  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: containerStyle,
-    accessible: true,
+  var formattedDate = handleLastEarnedDate(lastEarnedAt, locale);
+  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(formattedDate);
+  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(formattedDate);
+  return /*#__PURE__*/React.createElement(Chip, {
+    label: displayText,
+    variant: count === 0 ? exports.StatusVariant.GREY : exports.StatusVariant.PRIMARY,
     accessibilityLabel: accessibilityLabel,
     testID: "badge-tile-date-earned"
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "label",
-    style: [styles.dateEarnedText, {
-      color: textColor
-    }],
-    numberOfLines: 1,
-    ellipsizeMode: "tail",
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants"
-  }, displayText));
+  });
 };
 
 /**
  * Renders the description for a Badge Tile.
  *
- * @returns JSX.Element or null if description is not present
+ * @returns React.ReactElement or null if description is not present
  */
 var BadgeTileDescription = function () {
   var tileContext = useTileContext();
@@ -20124,10 +20051,64 @@ var BadgeTileDescription = function () {
   }, description));
 };
 
+/**
+ * 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,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      flex: 1
+    },
+    indicatorContainer: {
+      position: 'absolute',
+      bottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      borderRadius: 40,
+      width: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 40
+    },
+    countText: {
+      color: '#FFF',
+      fontSize: 14,
+      fontWeight: 'bold'
+    },
+    header: {
+      flexBasis: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
+    },
+    image: {
+      width: '100%',
+      height: '100%'
+    },
+    titleText: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    },
+    dateEarnedContainer: {
+      alignItems: 'flex-start',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 20
+    }
+  });
+};
+
 /**
  * Renders the media for a Badge Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var BadgeTileMedia = function (_a) {
   var children = _a.children,
@@ -20161,7 +20142,7 @@ var BadgeTileMedia = function (_a) {
 /**
  * Renders the status for a Badge Tile.
  *
- * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ * @returns React.ReactElement or null if badge is not earned or badgeNotEarnedMessage exists
  */
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
@@ -20196,7 +20177,7 @@ var BadgeTileStatus = function () {
 /**
  * Renders the title for a Badge Tile.
  *
- * @returns JSX.Element or null if name is not present
+ * @returns React.ReactElement or null if name is not present
  */
 var BadgeTileTitle = function () {
   var styles = useBadgeTileStyles();
@@ -20225,7 +20206,7 @@ var BadgeTileTitle = function () {
 
 /**
  * The main BadgeTile component.
- * @returns JSX.Element or null if tile is not active or tileHeight is not full.
+ * @returns React.ReactElement 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) {
@@ -20253,7 +20234,7 @@ 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
+ * @returns React.ReactElement or null if no text or required props are present
  */
 var BannerTileCTA = function () {
   var bannerContext = useBannerContext();
@@ -20321,7 +20302,7 @@ var useBannerTileStyles = function () {
 /**
  * Renders the description text of a Banner Tile.
  *
- * @returns JSX.Element or null if no description is present
+ * @returns React.ReactElement or null if no description is present
  */
 var BannerTileDescription = function () {
   var styles = useBannerTileStyles();
@@ -20339,7 +20320,7 @@ var BannerTileDescription = function () {
 /**
  * Renders the media of a Banner Tile.
  *
- * @returns JSX.Element or null if no media is present
+ * @returns React.ReactElement or null if no media is present
  */
 var BannerTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
@@ -20370,7 +20351,7 @@ var BannerTileMedia = function (_a) {
 /**
  * Renders the title of a Banner Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var BannerTileTitle = function () {
   var styles = useBannerTileStyles();
@@ -20403,7 +20384,7 @@ var isArtworkOnly$2 = function (configuration) {
  * 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
+ * @returns {React.ReactElement | null} Rendered component or null if tile is inactive
  */
 var BannerTileRoot = function (_a) {
   var tile = _a.tile;
@@ -20604,7 +20585,7 @@ var isArtworkOnly$1 = function (configuration) {
  *
  * @param {ContentTileProps} props - Component props
  * @param {Tile} props.tile - The tile data to render
- * @returns JSX.Element or null if tile is inactive
+ * @returns React.ReactElement or null if tile is inactive
  */
 var ContentTileRoot = function (_a) {
   var tile = _a.tile;
@@ -21447,7 +21428,7 @@ var useSectionData = function (section, sectionId) {
  *
  * @param {Object} props - Component props
  * @param {string} props.message - Message to display in the empty state
- * @returns {JSX.Element} The empty state component
+ * @returns {React.ReactElement} The empty state component
  */
 var EmptyState = function (_a) {
   var message = _a.message;
@@ -21455,7 +21436,7 @@ var EmptyState = function (_a) {
     style: commonStyles.emptyContainer,
     role: "article",
     accessibilityLabel: "Empty state: ".concat(message)
-  }, /*#__PURE__*/React.createElement(Text$3, null, message));
+  }, /*#__PURE__*/React.createElement(RNText, null, message));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
@@ -21463,7 +21444,7 @@ var EmptyState = function (_a) {
  * @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
+ * @returns {React.ReactElement|null} The rendered section or null if invalid props
  */
 var Section = function (_a) {
   var section = _a.section,
@@ -21593,7 +21574,7 @@ var useGroupData = function (id) {
  *
  * @param {GroupEmptyStateProps} props - Component props
  * @param {string} props.message - Message to display
- * @returns {JSX.Element} The empty state component
+ * @returns {React.ReactElement} The empty state component
  */
 var GroupEmptyState = function (_a) {
   var message = _a.message;
@@ -21608,7 +21589,7 @@ var GroupEmptyState = function (_a) {
 /**
  * Component to render all sections in a group
  *
- * @returns {JSX.Element} The sections component
+ * @returns {React.ReactElement} The sections component
  */
 var GroupSections = function () {
   var groupData = useGroupContext().groupData;
@@ -21649,7 +21630,7 @@ var GroupSections = function () {
  *
  * @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
+ * @returns {React.ReactElement|null} The rendered group or null if invalid ID
  */
 var Group = function (_a) {
   var id = _a.id,
@@ -21970,7 +21951,7 @@ var usePointsTileStyles = function (isFullSize) {
 /**
  * Renders formatted points value for a Points Tile.
  *
- * @returns JSX.Element or null if points are undefined or zero
+ * @returns React.ReactElement or null if points are undefined or zero
  */
 var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
@@ -22011,7 +21992,7 @@ var PointsTileFormattedPoints = function () {
 /**
  * Renders the media of a Points Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
@@ -22040,7 +22021,7 @@ var PointsTileMedia = function (_a) {
 /**
  * Renders the title of a Points Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var PointsTileTitle = function () {
   var tileContext = useTileContext();
@@ -22058,7 +22039,7 @@ var PointsTileTitle = function () {
 /**
  * Renders a chevron icon for a Roundup Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var PointsTileChevron = function () {
   var _a, _b;
@@ -22083,7 +22064,7 @@ var PointsTileChevron = function () {
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
  * @param props - Component props
- * @returns JSX.Element or null if tile is inactive or missing required props
+ * @returns React.ReactElement or null if tile is inactive or missing required props
  */
 var PointsTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22159,7 +22140,7 @@ 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
+ * @returns React.ReactElement or null if showName is false or name is not present
  */
 var RewardCategoryHeader = function () {
   var styles = useRewardCategoryTileStyles();
@@ -22191,7 +22172,7 @@ var RewardCategoryHeader = function () {
 /**
  * Renders the background media for a Reward Category Tile.
  *
- * @returns JSX.Element or null if no artwork URL is present
+ * @returns React.ReactElement or null if no artwork URL is present
  */
 var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
@@ -22218,7 +22199,7 @@ var RewardCategoryMedia = function () {
  *
  * @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
+ * @returns {React.ReactElement|null} Rendered component or null if tile is inactive or missing configuration
  */
 var RewardCategoryTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22239,7 +22220,7 @@ var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 /**
  * Renders a chevron icon for a Reward Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var RewardTileChevron = function () {
   var _a;
@@ -22311,7 +22292,7 @@ var useRewardTileStyles = function () {
  *
  * @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
+ * @returns React.ReactElement or null if no artwork URL is present or artwork should not be shown
  */
 var RewardTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
@@ -22345,7 +22326,7 @@ 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
+ * @returns React.ReactElement or null if price should not be shown or is zero/undefined
  */
 var RewardTilePoints = function () {
   var styles = useRewardTileStyles();
@@ -22389,7 +22370,7 @@ var RewardTilePoints = function () {
 /**
  * Renders the summary of a Reward Tile.
  *
- * @returns JSX.Element or null if no summary is present
+ * @returns React.ReactElement or null if no summary is present
  */
 var RewardTileSummary = function () {
   var tileContext = useTileContext();
@@ -22415,7 +22396,7 @@ var RewardTileSummary = function () {
 /**
  * Renders the title of a Reward Tile.
  *
- * @returns JSX.Element or null if no name is present
+ * @returns React.ReactElement or null if no name is present
  */
 var RewardTileTitle = function () {
   var tileContext = useTileContext();
@@ -22454,7 +22435,7 @@ var isArtworkOnly = function (configuration) {
  *
  * @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
+ * @returns React.ReactElement or null if tile is inactive or not a full-height tile
  */
 var RewardTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22677,7 +22658,7 @@ TierTile.Empty = TierTileEmpty;
 /**
  * Renders formatted points value for a Roundup Tile.
  *
- * @returns JSX.Element or null if points are undefined or zero
+ * @returns React.ReactElement or null if points are undefined or zero
  */
 var RoundupTileFormattedPoints = function () {
   var tileContext = useTileContext();
@@ -22766,7 +22747,7 @@ var useRoundupTileStyles = function (isFullSize) {
 /**
  * Renders the media of a Points Tile.
  *
- * @returns JSX.Element or null if media is not present
+ * @returns React.ReactElement or null if media is not present
  */
 var RoundupTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
@@ -22795,7 +22776,7 @@ var RoundupTileMedia = function (_a) {
 /**
  * Renders the title of a Roundup Tile.
  *
- * @returns JSX.Element or null if no title is present
+ * @returns React.ReactElement or null if no title is present
  */
 var RoundupTileTitle = function () {
   var tileContext = useTileContext();
@@ -22813,7 +22794,7 @@ var RoundupTileTitle = function () {
 /**
  * Renders a chevron icon for a Roundup Tile.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 var RoundupTileChevron = function () {
   var _a, _b;
@@ -22838,7 +22819,7 @@ var RoundupTileChevron = function () {
  * The PointsTile component renders a tile with media, title, and formatted points.
  *
  * @param props - Component props
- * @returns JSX.Element or null if tile is inactive or missing required props
+ * @returns React.ReactElement or null if tile is inactive or missing required props
  */
 var RoundupTileRoot = function (_a) {
   var tile = _a.tile;
@@ -22918,6 +22899,130 @@ var styles = StyleSheet$1.create({
   }
 });
 
+var useChipStyles = function () {
+  var theme = useWllSdk().theme;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var paddingHorizontal = useResponsiveValue(12, 8, isDesktop, isTablet);
+  var paddingVertical = useResponsiveValue(6, 3, isDesktop, isTablet);
+  var fontSize = useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet);
+  var lineHeight = Math.max(fontSize, Math.round(fontSize * 1.3));
+  return StyleSheet$1.create({
+    container: {
+      alignSelf: 'flex-start',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: paddingHorizontal,
+      paddingVertical: paddingVertical,
+      borderRadius: theme.sizes.borderRadiusRounded,
+      overflow: 'hidden',
+      flexShrink: 1
+    },
+    label: {
+      fontFamily: theme.fontFamily,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      fontWeight: '400',
+      flexShrink: 1
+    }
+  });
+};
+
+var mapLiveRegion = function (ariaLive) {
+  if (ariaLive === void 0) {
+    ariaLive = 'polite';
+  }
+  switch (ariaLive) {
+    case 'assertive':
+      return {
+        native: 'assertive',
+        web: 'assertive'
+      };
+    case 'off':
+      return {
+        native: 'none',
+        web: 'off'
+      };
+    case 'polite':
+    default:
+      return {
+        native: 'polite',
+        web: 'polite'
+      };
+  }
+};
+var Chip = function (_a) {
+  var label = _a.label,
+    _b = _a.variant,
+    variant = _b === void 0 ? exports.StatusVariant.PRIMARY : _b,
+    _c = _a.role,
+    role = _c === void 0 ? 'status' : _c,
+    _d = _a.ariaLive,
+    ariaLive = _d === void 0 ? 'polite' : _d,
+    accessibilityLabel = _a.accessibilityLabel,
+    testID = _a.testID,
+    style = _a.style,
+    labelStyle = _a.labelStyle;
+  var styles = useChipStyles();
+  var theme = useWllSdk().theme;
+  var variantStyles = React.useMemo(function () {
+    var _a, _b;
+    switch (variant) {
+      case exports.StatusVariant.GREEN:
+        return {
+          container: {
+            backgroundColor: '#d1f0e1'
+          },
+          label: {
+            color: '#128e55'
+          }
+        };
+      case exports.StatusVariant.GREY:
+        return {
+          container: {
+            backgroundColor: '#dadde0'
+          },
+          label: {
+            color: '#666666'
+          }
+        };
+      case exports.StatusVariant.PRIMARY:
+      default:
+        return {
+          container: {
+            backgroundColor: (_b = (_a = theme.alphaDerivedPrimary) === null || _a === void 0 ? void 0 : _a[10]) !== null && _b !== void 0 ? _b : theme.primary
+          },
+          label: {
+            color: theme.primary
+          }
+        };
+    }
+  }, [theme, variant]);
+  var computedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : undefined;
+  var _e = mapLiveRegion(ariaLive),
+    accessibilityLiveRegion = _e.native,
+    ariaLiveValue = _e.web;
+  var isSimpleLabel = typeof label === 'string';
+  var isIndividuallyAccessible = computedAccessibilityLabel !== undefined;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles.container, variantStyles.container, style],
+    accessible: isIndividuallyAccessible,
+    accessibilityRole: role,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityLabel: computedAccessibilityLabel,
+    "aria-live": ariaLiveValue,
+    testID: testID
+  }, isSimpleLabel ? (/*#__PURE__*/React.createElement(RNText, {
+    style: [styles.label, variantStyles.label, labelStyle],
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    accessible: false,
+    importantForAccessibility: "no"
+  }, label)) : label);
+};
+
 var Reward = /** @class */function () {
   function Reward() {}
   return Reward;
@@ -22932,6 +23037,7 @@ exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.CarouselNavButton = CarouselNavButton;
+exports.Chip = Chip;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;