@wlloyalty/wll-react-sdk 1.0.86 → 1.0.87

package/dist/web.js

@@ -6599,7 +6599,7 @@ function isPrimaryPointerDown(domEvent) {
  * when touches end and start again.
  */
 
-var __DEV__$5 = process.env.NODE_ENV !== 'production';
+var __DEV__$4 = process.env.NODE_ENV !== 'production';
 var MAX_TOUCH_BANK = 20;
 function timestampForTouch(touch) {
   // The legacy internal implementation provides "timeStamp", which has been
@@ -6642,7 +6642,7 @@ function getTouchIdentifier(_ref) {
   if (identifier == null) {
     console.error('Touch object is missing identifier.');
   }
-  if (__DEV__$5) {
+  if (__DEV__$4) {
     if (identifier > MAX_TOUCH_BANK) {
       console.error('Touch identifier %s is greater than maximum supported %s which causes ' + 'performance issues backfilling array locations for all of the indices.', identifier, MAX_TOUCH_BANK);
     }
@@ -6740,7 +6740,7 @@ class ResponderTouchHistoryStore {
             break;
           }
         }
-        if (__DEV__$5) {
+        if (__DEV__$4) {
           var activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
           if (!(activeRecord != null && activeRecord.touchActive)) {
             console.error('Cannot find single active touch.');
@@ -7964,195 +7964,6 @@ var defaultTheme = {
   negative: '#ff0000'
 };
 
-var COLOR_CONSTANTS = {
-  MINIMUM_CONTRAST_RATIO: 2,
-  DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
-  DESATURATION_LIGHTEN_AMOUNT: 0.8,
-  DEFAULT_COLOR: '#FFFFFF'
-};
-
-// Storybook Themes
-({
-  modern: __assign(__assign({}, defaultTheme), {
-    primary: '#f72585',
-    accent: '#ffc300',
-    background: '#e5e5e5',
-    surface: '#f4f3ee',
-    surfaceText: '#f72585'
-  }),
-  warm: __assign(__assign({}, defaultTheme), {
-    primary: '#014F5C',
-    accent: '#F38A51',
-    background: '#BE9C80',
-    surface: '#F1CFB3',
-    surfaceText: '#014F5C'
-  }),
-  dark: __assign(__assign({}, defaultTheme), {
-    background: '#1e1e1e',
-    text: '#ffffff',
-    primary: '#ffbe0b',
-    accent: '#d00000',
-    surface: '#2f3037',
-    surfaceText: '#ffffff'
-  }),
-  forest: __assign(__assign({}, defaultTheme), {
-    primary: '#354f52',
-    accent: '#84a98c',
-    background: '#f0f4f0',
-    surface: '#cad2c5',
-    surfaceText: '#2d3436'
-  }),
-  sunset: __assign(__assign({}, defaultTheme), {
-    primary: '#c32f27',
-    accent: '#db7c26',
-    background: '#f9edcc',
-    surface: '#f0dfad',
-    surfaceText: '#2d3436'
-  })
-});
-
-var isValidColor = function (color) {
-  try {
-    Color(color);
-    return true;
-  } catch (_a) {
-    return false;
-  }
-};
-/**
- * Validates a theme object to ensure all required colors are present and valid
- * @param theme - Partial theme object to validate
- * @returns Boolean indicating if theme is valid
- */
-var validateTheme = function (theme) {
-  var requiredColors = ['accent', 'background', 'primary', 'surface', 'surfaceText', 'positive', 'negative', 'text'];
-  return requiredColors.every(function (color) {
-    return theme[color] && isValidColor(theme[color]);
-  });
-};
-/**
- * Safely creates a Color instance with error handling
- * @param color - Color string to process
- * @returns Color instance or null if invalid
- */
-var createSafeColor = function (color) {
-  try {
-    return Color(color);
-  } catch (error) {
-    console.error("Invalid color value: ".concat(color), error);
-    return null;
-  }
-};
-/**
- * Returns a derived color based on the background darkness
- * @param color - Base color to derive from
- * @returns Derived color string or default color if invalid
- */
-var getDerivedColor = function (color) {
-  var backgroundColor = createSafeColor(color);
-  if (!backgroundColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
-  return backgroundColor.isDark() ? backgroundColor.lighten(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string() : backgroundColor.darken(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string();
-};
-/**
- * Determines the most readable text color (black or white) for a given background
- * @param backgroundColor - Background color to check against
- * @returns Hex color string for text
- */
-var getReadableTextColor = function (backgroundColor) {
-  var bgColor = createSafeColor(backgroundColor);
-  if (!bgColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
-  var white = Color('#fff');
-  var black = Color('#000');
-  var contrastWithWhite = bgColor.contrast(white);
-  return contrastWithWhite >= COLOR_CONSTANTS.MINIMUM_CONTRAST_RATIO ? white.hex() : black.hex();
-};
-var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
-/**
- * Generates a set of derived colors based on a base color and derivation function
- * @param color - Base color to derive from
- * @param derivationFunction - Function to generate variations
- * @returns Object containing derived colors at different percentages
- */
-var generateDerivedColors = function (color, derivationFunction) {
-  var baseColor = createSafeColor(color);
-  if (!baseColor) {
-    return percentages.reduce(function (acc, percentage) {
-      acc[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
-      return acc;
-    }, {});
-  }
-  var result = {};
-  percentages.forEach(function (percentage) {
-    try {
-      var derivedColor = derivationFunction(baseColor, percentage);
-      result[percentage] = derivedColor.toString();
-    } catch (error) {
-      console.error("Error generating derived color for ".concat(percentage, "%"), error);
-      result[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
-    }
-  });
-  return result;
-};
-/**
- * Generates a set of colors with varying lightness based on the base color
- * @param color - Base color to derive from
- * @returns Object containing derived colors at different lightness levels
- */
-var getDerivedColorPercentages = function (color) {
-  var baseColor = createSafeColor(color);
-  if (!baseColor) return generateDerivedColors(COLOR_CONSTANTS.DEFAULT_COLOR, function (color) {
-    return color;
-  });
-  var isDark = baseColor.isDark();
-  return generateDerivedColors(color, function (baseColor, percentage) {
-    return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
-  });
-};
-/**
- * Generates a set of colors with varying alpha values
- * @param color - Base color to derive from
- * @returns Object containing derived colors at different alpha levels
- */
-var getAlphaDerivedColors = function (color) {
-  return generateDerivedColors(color, function (baseColor, percentage) {
-    return baseColor.alpha(percentage / 100);
-  });
-};
-/**
- * Determines if a color should be desaturated based on type and count
- * @param type - Type of desaturation to apply
- * @param count - Count value affecting desaturation
- * @returns Boolean indicating if color should be desaturated
- */
-var shouldDesaturate = function (type, count) {
-  switch (type) {
-    case 'SPECIFIC':
-      return count === 0;
-    default:
-      return false;
-  }
-};
-/**
- * Desaturates a color and lightens it
- * @param color - Color to desaturate
- * @returns Desaturated color string or default color if invalid
- */
-var desaturateColor = function (color) {
-  var baseColor = createSafeColor(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;
-};
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -8312,19 +8123,239 @@ class Dimensions {
       }
     };
   }
-  static removeEventListener(type, handler) {
-    if (Array.isArray(listeners[type])) {
-      listeners[type] = listeners[type].filter(_handler => _handler !== handler);
+  static removeEventListener(type, handler) {
+    if (Array.isArray(listeners[type])) {
+      listeners[type] = listeners[type].filter(_handler => _handler !== handler);
+    }
+  }
+}
+if (canUseDOM$1) {
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
+}
+
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var Platform = {
+  OS: 'web',
+  select: obj => 'web' in obj ? obj.web : obj.default,
+  get isTesting() {
+    if (process.env.NODE_ENV === 'test') {
+      return true;
+    }
+    return false;
+  }
+};
+var Platform$1 = Platform;
+
+var IS_WEB = Platform$1.OS === "web";
+var IS_IOS = Platform$1.OS === "ios";
+var IS_ANDROID = Platform$1.OS === "android";
+var IS_MOBILE = IS_IOS || IS_ANDROID;
+var _a$1 = Dimensions.get("window"),
+  width = _a$1.width;
+  _a$1.height;
+var SCREEN_WIDTH = width;
+
+var COLOR_CONSTANTS = {
+  MINIMUM_CONTRAST_RATIO: 2,
+  DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
+  DESATURATION_LIGHTEN_AMOUNT: IS_WEB ? 0.8 : 0.2,
+  DEFAULT_COLOR: '#FFFFFF'
+};
+
+// Storybook Themes
+({
+  modern: __assign(__assign({}, defaultTheme), {
+    primary: '#f72585',
+    accent: '#ffc300',
+    background: '#e5e5e5',
+    surface: '#f4f3ee',
+    surfaceText: '#f72585'
+  }),
+  warm: __assign(__assign({}, defaultTheme), {
+    primary: '#014F5C',
+    accent: '#F38A51',
+    background: '#BE9C80',
+    surface: '#F1CFB3',
+    surfaceText: '#014F5C'
+  }),
+  dark: __assign(__assign({}, defaultTheme), {
+    background: '#1e1e1e',
+    text: '#ffffff',
+    primary: '#ffbe0b',
+    accent: '#d00000',
+    surface: '#2f3037',
+    surfaceText: '#ffffff'
+  }),
+  forest: __assign(__assign({}, defaultTheme), {
+    primary: '#354f52',
+    accent: '#84a98c',
+    background: '#f0f4f0',
+    surface: '#cad2c5',
+    surfaceText: '#2d3436'
+  }),
+  sunset: __assign(__assign({}, defaultTheme), {
+    primary: '#c32f27',
+    accent: '#db7c26',
+    background: '#f9edcc',
+    surface: '#f0dfad',
+    surfaceText: '#2d3436'
+  })
+});
+
+var isValidColor = function (color) {
+  try {
+    Color(color);
+    return true;
+  } catch (_a) {
+    return false;
+  }
+};
+/**
+ * Validates a theme object to ensure all required colors are present and valid
+ * @param theme - Partial theme object to validate
+ * @returns Boolean indicating if theme is valid
+ */
+var validateTheme = function (theme) {
+  var requiredColors = ['accent', 'background', 'primary', 'surface', 'surfaceText', 'positive', 'negative', 'text'];
+  return requiredColors.every(function (color) {
+    return theme[color] && isValidColor(theme[color]);
+  });
+};
+/**
+ * Safely creates a Color instance with error handling
+ * @param color - Color string to process
+ * @returns Color instance or null if invalid
+ */
+var createSafeColor = function (color) {
+  try {
+    return Color(color);
+  } catch (error) {
+    console.error("Invalid color value: ".concat(color), error);
+    return null;
+  }
+};
+/**
+ * Returns a derived color based on the background darkness
+ * @param color - Base color to derive from
+ * @returns Derived color string or default color if invalid
+ */
+var getDerivedColor = function (color) {
+  var backgroundColor = createSafeColor(color);
+  if (!backgroundColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  return backgroundColor.isDark() ? backgroundColor.lighten(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string() : backgroundColor.darken(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string();
+};
+/**
+ * Determines the most readable text color (black or white) for a given background
+ * @param backgroundColor - Background color to check against
+ * @returns Hex color string for text
+ */
+var getReadableTextColor = function (backgroundColor) {
+  var bgColor = createSafeColor(backgroundColor);
+  if (!bgColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  var white = Color('#fff');
+  var black = Color('#000');
+  var contrastWithWhite = bgColor.contrast(white);
+  return contrastWithWhite >= COLOR_CONSTANTS.MINIMUM_CONTRAST_RATIO ? white.hex() : black.hex();
+};
+var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
+/**
+ * Generates a set of derived colors based on a base color and derivation function
+ * @param color - Base color to derive from
+ * @param derivationFunction - Function to generate variations
+ * @returns Object containing derived colors at different percentages
+ */
+var generateDerivedColors = function (color, derivationFunction) {
+  var baseColor = createSafeColor(color);
+  if (!baseColor) {
+    return percentages.reduce(function (acc, percentage) {
+      acc[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
+      return acc;
+    }, {});
+  }
+  var result = {};
+  percentages.forEach(function (percentage) {
+    try {
+      var derivedColor = derivationFunction(baseColor, percentage);
+      result[percentage] = derivedColor.toString();
+    } catch (error) {
+      console.error("Error generating derived color for ".concat(percentage, "%"), error);
+      result[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
     }
+  });
+  return result;
+};
+/**
+ * Generates a set of colors with varying lightness based on the base color
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different lightness levels
+ */
+var getDerivedColorPercentages = function (color) {
+  var baseColor = createSafeColor(color);
+  if (!baseColor) return generateDerivedColors(COLOR_CONSTANTS.DEFAULT_COLOR, function (color) {
+    return color;
+  });
+  var isDark = baseColor.isDark();
+  return generateDerivedColors(color, function (baseColor, percentage) {
+    return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
+  });
+};
+/**
+ * Generates a set of colors with varying alpha values
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different alpha levels
+ */
+var getAlphaDerivedColors = function (color) {
+  return generateDerivedColors(color, function (baseColor, percentage) {
+    return baseColor.alpha(percentage / 100);
+  });
+};
+/**
+ * Determines if a color should be desaturated based on type and count
+ * @param type - Type of desaturation to apply
+ * @param count - Count value affecting desaturation
+ * @returns Boolean indicating if color should be desaturated
+ */
+var shouldDesaturate = function (type, count) {
+  switch (type) {
+    case 'SPECIFIC':
+      return count === 0;
+    default:
+      return false;
   }
-}
-if (canUseDOM$1) {
-  if (window.visualViewport) {
-    window.visualViewport.addEventListener('resize', handleResize, false);
-  } else {
-    window.addEventListener('resize', handleResize, false);
-  }
-}
+};
+/**
+ * Desaturates a color and lightens it
+ * @param color - Color to desaturate
+ * @returns Desaturated color string or default color if invalid
+ */
+var desaturateColor = function (color) {
+  var baseColor = createSafeColor(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',
@@ -8334,28 +8365,6 @@ var DIMENSION_MODES = {
 var TABLET_SCREEN_WIDTH = 728;
 var SMALL_SCREEN_WIDTH = 530;
 
-/**
- * Copyright (c) Nicolas Gallagher.
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-var Platform = {
-  OS: 'web',
-  select: obj => 'web' in obj ? obj.web : obj.default,
-  get isTesting() {
-    if (process.env.NODE_ENV === 'test') {
-      return true;
-    }
-    return false;
-  }
-};
-var Platform$1 = Platform;
-
 var isWeb = Platform$1.OS === 'web';
 function getDimensionMode(window) {
   if (!window || !window.width) {
@@ -10905,9 +10914,9 @@ function _isEntirelyVisible(top, bottom, viewportHeight) {
 }
 var ViewabilityHelper$1 = ViewabilityHelper;
 
-var __DEV__$4 = process.env.NODE_ENV !== 'production';
+var __DEV__$3 = process.env.NODE_ENV !== 'production';
 var VirtualizedListContext = /*#__PURE__*/React__namespace.createContext(null);
-if (__DEV__$4) {
+if (__DEV__$3) {
   VirtualizedListContext.displayName = 'VirtualizedListContext';
 }
 
@@ -11277,7 +11286,7 @@ Object.defineProperty(nullthrows$2.exports, '__esModule', {value: true});
 var nullthrowsExports = nullthrows$2.exports;
 var nullthrows$1 = /*@__PURE__*/getDefaultExportFromCjs(nullthrowsExports);
 
-var __DEV__$3 = process.env.NODE_ENV !== 'production';
+var __DEV__$2 = process.env.NODE_ENV !== 'production';
 var ON_EDGE_REACHED_EPSILON = 0.001;
 var _usedIndexForKey = false;
 var _keylessItemComponentName = '';
@@ -11986,7 +11995,7 @@ class VirtualizedList extends StateSafePureComponent {
       console.warn("initialScrollIndex \"" + initialScrollIndex + "\" is not valid (list has " + itemCount + " items)");
       this._hasWarned.initialScrollIndex = true;
     }
-    if (__DEV__$3 && !this._hasWarned.flexWrap) {
+    if (__DEV__$2 && !this._hasWarned.flexWrap) {
       // $FlowFixMe[underconstrained-implicit-instantiation]
       var flatStyles = StyleSheet$1.flatten(this.props.contentContainerStyle);
       if (flatStyles != null && flatStyles.flexWrap === 'wrap') {
@@ -13938,7 +13947,7 @@ var AnimatedWithChildren$1 = AnimatedWithChildren;
  * @format
  */
 
-var __DEV__$2 = process.env.NODE_ENV !== 'production';
+var __DEV__$1 = process.env.NODE_ENV !== 'production';
 var linear = t => t;
 
 /**
@@ -13951,7 +13960,7 @@ function createInterpolation(config) {
   }
   var outputRange = config.outputRange;
   var inputRange = config.inputRange;
-  if (__DEV__$2) {
+  if (__DEV__$1) {
     checkInfiniteRange('outputRange', outputRange);
     checkInfiniteRange('inputRange', inputRange);
     checkValidInputRange(inputRange);
@@ -14166,7 +14175,7 @@ class AnimatedInterpolation extends AnimatedWithChildren$1 {
     return range.map(NativeAnimatedHelper.transformDataType);
   }
   __getNativeConfig() {
-    if (__DEV__$2) {
+    if (__DEV__$1) {
       NativeAnimatedHelper.validateInterpolation(this._config);
     }
     return {
@@ -14455,7 +14464,7 @@ var AnimatedValue$1 = AnimatedValue;
  * @format
  */
 
-var __DEV__$1 = process.env.NODE_ENV !== 'production';
+var __DEV__ = process.env.NODE_ENV !== 'production';
 function attachNativeEvent(viewRef, eventName, argMapping) {
   // Find animated values in `argMapping` and create an array representing their
   // key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
@@ -14549,7 +14558,7 @@ class AnimatedEvent {
   __getHandler() {
     var _this = this;
     if (this.__isNative) {
-      if (__DEV__$1) {
+      if (__DEV__) {
         var _validatedMapping = false;
         return function () {
           for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
@@ -14570,7 +14579,7 @@ class AnimatedEvent {
       for (var _len2 = arguments.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
         args[_key3] = arguments[_key3];
       }
-      if (__DEV__$1 && !validatedMapping) {
+      if (__DEV__ && !validatedMapping) {
         validateMapping(_this._argMapping, args);
         validatedMapping = true;
       }
@@ -18772,14 +18781,6 @@ var ProgressBar = function (_a) {
   }));
 };
 
-var IS_WEB = Platform$1.OS === "web";
-Platform$1.OS === "ios";
-Platform$1.OS === "android";
-var _a$1 = Dimensions.get("window"),
-  width = _a$1.width;
-  _a$1.height;
-var SCREEN_WIDTH = width;
-
 var ProgressiveImage = function (_a) {
   var source = _a.source,
     style = _a.style,
@@ -18801,10 +18802,17 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-  // Platform-specific logic for desaturation
-  var desaturationStyle = IS_WEB ? {
-    filter: isDesaturated ? 'grayscale(100%)' : undefined
-  } : {};
+  // Create base animated image
+  var baseImage = /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
+    source: source,
+    style: [styles$7.imageOverlay, __assign({
+      opacity: imageAnimated
+    }, IS_WEB && {
+      filter: isDesaturated ? 'grayscale(100%)' : undefined
+    })],
+    onLoad: onImageLoad,
+    accessibilityLabel: alt
+  }));
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles$7.container, style, {
       backgroundColor: backgroundColor
@@ -18817,14 +18825,19 @@ var ProgressiveImage = function (_a) {
         outputRange: [1, 0]
       })
     }]
-  }), /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
+  }), IS_WEB ? baseImage : (
+  /*#__PURE__*/
+  // For React Native, use the overlay technique
+  React.createElement(React.Fragment, null, baseImage, isDesaturated && (/*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
     source: source,
-    style: [styles$7.imageOverlay, __assign({
-      opacity: imageAnimated
-    }, desaturationStyle)],
-    onLoad: onImageLoad,
-    accessibilityLabel: alt
-  })));
+    style: [styles$7.imageOverlay, {
+      opacity: imageAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.8]
+      }),
+      tintColor: 'gray'
+    }]
+  }))))));
 };
 var styles$7 = StyleSheet$1.create({
   imageOverlay: {
@@ -20078,7 +20091,7 @@ var BannerTileTitle = function () {
  * @param configuration - The configuration object of the tile.
  * @returns `true` if the tile has no title, description, or CTA text.
  */
-var isArtworkOnly$1 = function (configuration) {
+var isArtworkOnly$2 = function (configuration) {
   if (!configuration) return true;
   return !configuration.title && !configuration.description && !configuration.ctaText;
 };
@@ -20097,7 +20110,7 @@ var BannerTileRoot = function (_a) {
   return /*#__PURE__*/React.createElement(BaseBanner, {
     tile: tile
   }, /*#__PURE__*/React.createElement(BannerTile.Media, {
-    isArtworkOnly: isArtworkOnly$1(configuration)
+    isArtworkOnly: isArtworkOnly$2(configuration)
   }), /*#__PURE__*/React.createElement(FullFlex, null, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
 };
 /**
@@ -20111,13 +20124,20 @@ var BannerTile = Object.assign(BannerTileRoot, {
 });
 var BannerTile$1 = withTileFetching(BannerTile);
 
-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 ContentTileChevron = function () {
+  var _a, _b;
+  var tileContext = useTileContext();
+  var sdk = useWllSdk();
+  if (!isContextValid(tileContext)) return null;
+  var ctaLink = tileContext.configuration.ctaLink;
+  if (!ctaLink) return null;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: IS_MOBILE ? 16 : undefined,
+    color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20],
+    accessibilityLabel: "View details",
+    testID: "content-tile-chevron"
+  });
 };
 
 /**
@@ -20126,67 +20146,156 @@ var ContentTileContainer = function (_a) {
  *
  * @returns StyleSheet styles for the ContentTile component
  */
-var useContentTileStyles = function () {
-  var theme = useWllSdk().theme;
+var useContentTileStyles = function (hasArtwork) {
+  if (hasArtwork === void 0) {
+    hasArtwork = false;
+  }
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  var getHeaderStyle = function (hasArtwork) {
+    return __assign({
+      width: '100%',
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    }, hasArtwork && {
+      marginTop: useResponsiveValue(theme.sizes.xs, theme.sizes.xxs, isDesktop, isTablet)
+    });
+  };
   return StyleSheet$1.create({
+    imageContainer: {
+      width: '100%',
+      marginBottom: 0
+    },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover'
+    },
     content: {
       paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      flex: 1,
-      justifyContent: 'center'
+      flex: 1
     },
-    media: {
-      width: '100%'
-    }
+    header: getHeaderStyle(hasArtwork)
   });
 };
 
-var ContentTileContent = function (_a) {
-  var children = _a.children;
-  var styles = useContentTileStyles();
-  return /*#__PURE__*/React.createElement(BaseTile.Content, null, /*#__PURE__*/React.createElement(View$2, {
-    style: styles.content
-  }, children));
+var ContentTileMedia = function (_a) {
+  var isArtworkOnly = _a.isArtworkOnly;
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _b = tileContext.configuration,
+    artworkUrl = _b.artworkUrl,
+    _c = _b.title,
+    title = _c === void 0 ? '' : _c;
+  if (!artworkUrl) return null;
+  var hasArtwork = Boolean(artworkUrl);
+  var styles = useContentTileStyles(hasArtwork);
+  var containerStyle = {
+    flexBasis: isArtworkOnly ? '100%' : '50%'
+  };
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles.imageContainer, containerStyle],
+    testID: "content-tile-media",
+    accessibilityRole: "image",
+    accessibilityLabel: "Image for ".concat(title)
+  }, /*#__PURE__*/React.createElement(ProgressiveImage, {
+    source: {
+      uri: artworkUrl
+    },
+    style: styles.image,
+    alt: "Image for ".concat(title)
+  }));
+};
+
+var ContentTileSummary = function () {
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var body = tileContext.configuration.body;
+  if (!body) return null;
+  var sizeInfo = useTileSize(tileContext);
+  if (!sizeInfo) return null;
+  var isFullSize = sizeInfo.isFullSize,
+    isHalfSize = sizeInfo.isHalfSize;
+  var getNumberOfLines = function () {
+    return isFullSize ? 3 : isHalfSize ? 4 : 3;
+  };
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "body",
+    accessibilityRole: "text",
+    accessibilityLabel: body,
+    numberOfLines: getNumberOfLines(),
+    testID: "content-tile-summary"
+  }, body);
 };
 
-var ContentTileHeader = function () {
+var ContentTileTitle = function () {
   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));
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "title",
+    accessibilityRole: "header",
+    accessibilityLabel: title,
+    numberOfLines: 1,
+    testID: "content-tile-title"
+  }, title);
 };
 
-var ContentTileMedia = function () {
-  var styles = useContentTileStyles();
-  return /*#__PURE__*/React.createElement(BaseTile.Media, {
-    style: styles.media
-  });
+/**
+ * Helper function to determine if the tile should display artwork only.
+ *
+ * @param configuration - The configuration object of the tile.
+ * @returns `true` if the tile should display artwork only.
+ */
+var isArtworkOnly$1 = function (configuration) {
+  if (!configuration) return false;
+  return !configuration.title && !configuration.body;
 };
-
 /**
- * The ContentTile component renders a tile with a container, media, content, header, and body.
+ * The ContentTile component renders a tile with media, title, summary, and a chevron.
+ * This follows the same structure as RewardTile for consistent layout.
  *
- * @param tile - The tile data to render.
+ * @param {ContentTileProps} props - Component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns JSX.Element or null if tile is inactive
  */
 var ContentTileRoot = function (_a) {
   var tile = _a.tile;
-  if (!tile || !tile.active) return null;
+  if (!tile || !tile.active || !tile.configuration) return null;
+  var configuration = tile.configuration;
+  var hasArtwork = Boolean(configuration.artworkUrl);
+  var styles = useContentTileStyles(hasArtwork);
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__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))));
+  }, /*#__PURE__*/React.createElement(ContentTile.Media, {
+    isArtworkOnly: isArtworkOnly$1(configuration)
+  }), /*#__PURE__*/React.createElement(Layout, {
+    justify: hasArtwork ? 'start' : 'center',
+    style: {
+      paddingBottom: 0,
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/React.createElement(Row, {
+    justify: "between",
+    align: "center",
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(ContentTile.Title, null), /*#__PURE__*/React.createElement(ContentTile.Chevron, null)), /*#__PURE__*/React.createElement(ContentTile.Summary, null)));
 };
 /**
  * The ContentTile component with subcomponents attached.
  */
 var ContentTile = Object.assign(ContentTileRoot, {
-  Container: ContentTileContainer,
   Media: ContentTileMedia,
-  Content: ContentTileContent,
-  Header: ContentTileHeader,
-  Body: ContentTileBody
+  Title: ContentTileTitle,
+  Summary: ContentTileSummary,
+  Chevron: ContentTileChevron
 });
 var ContentTile$1 = withTileFetching(ContentTile);
 
@@ -20561,21 +20670,9 @@ var Grid = function (_a) {
         height: 'auto'
       };
     } else {
-      // Calculate available width accounting for screen width and section padding
       var availableWidth = SCREEN_WIDTH - GRID_GAP * 2;
       var gapSpace = (columns - 1) * GRID_GAP;
       var tileWidth = Math.floor((availableWidth - gapSpace) / columns);
-      var halfTileHeight = Math.floor(tileWidth / 2);
-      // Detailed logging for debugging
-      console.log('=== GRID DEBUG ===');
-      console.log("SCREEN_WIDTH: ".concat(SCREEN_WIDTH, "px, GRID_GAP: ").concat(GRID_GAP, "px"));
-      console.log("Columns: ".concat(columns, ", Section padding: ").concat(GRID_GAP * 2, "px"));
-      console.log("Available width: ".concat(availableWidth, "px, Gap space: ").concat(gapSpace, "px"));
-      console.log("Calculated tile width: ".concat(tileWidth, "px"));
-      console.log("Half tile height should be: ".concat(halfTileHeight, "px"));
-      console.log("Expected full tile: ".concat(tileWidth, "x").concat(tileWidth, "px"));
-      console.log("Expected half tile: ".concat(tileWidth, "x").concat(halfTileHeight, "px"));
-      console.log('=== END DEBUG ===');
       return {
         width: tileWidth,
         marginBottom: GRID_GAP,
@@ -21974,32 +22071,21 @@ var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a
  */
 var TileContainer = function (_a) {
   var tiles = _a.tiles;
+  var allHalfHeight = tiles.length > 0 && tiles.every(function (tile) {
+    return tile.tileHeight === exports.TileHeight.Half;
+  });
+  var halfHeightGap = allHalfHeight ? GRID_GAP / 2 : GRID_GAP;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles.container,
+    style: [styles.container, allHalfHeight && styles.aspectContainer],
     testID: "tile-container"
   }, tiles.map(function (tile, index) {
     var TileComponent = TILE_COMPONENTS[tile.type];
-    var isHalfSize = useTileSize(tile).isHalfSize;
-    // Log tile dimensions for debugging
-    if (!__DEV__) {
-      console.log("Tile ".concat(index, " (").concat(tile.id, "): ").concat(isHalfSize ? 'Half' : 'Full', " size"));
-    }
+    var isHalfHeight = tile.tileHeight === exports.TileHeight.Half;
     return /*#__PURE__*/React.createElement(View$2, {
       key: tile.id,
-      style: [styles.tileContainer, isHalfSize && styles.halfTileContainer, index > 0 && {
-        marginTop: GRID_GAP
-      }],
-      onLayout: function (event) {
-        if (__DEV__) {
-          var _a = event.nativeEvent.layout,
-            width = _a.width,
-            height = _a.height;
-          console.log("=== TILE ".concat(index, " LAYOUT ==="));
-          console.log("Tile ID: ".concat(tile.id, ", Type: ").concat(tile.type));
-          console.log("Is Half Size: ".concat(isHalfSize));
-          console.log("Actual dimensions: ".concat(width.toFixed(2), "x").concat(height.toFixed(2), "px"));
-        }
-      }
+      style: [styles.tileWrapper, isHalfHeight && styles.halfHeightTile, index > 0 && {
+        marginTop: allHalfHeight ? halfHeightGap : GRID_GAP
+      }]
     }, TileComponent ? /*#__PURE__*/React.createElement(TileComponent, {
       tile: tile
     }) : null);
@@ -22007,20 +22093,18 @@ var TileContainer = function (_a) {
 };
 var styles = StyleSheet$1.create({
   container: {
-    flexDirection: 'column',
     flex: 1,
-    width: '100%',
-    height: '100%'
+    width: '100%'
+  },
+  aspectContainer: {
+    aspectRatio: 1
   },
-  tileContainer: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: '100%',
+  tileWrapper: {
+    flex: 1,
     width: '100%'
   },
-  halfTileContainer: {
-    aspectRatio: 2,
-    backgroundColor: 'red'
+  halfHeightTile: {
+    flex: 0.5
   }
 });