@wlloyalty/wll-react-sdk 1.0.42 → 1.0.43

package/dist/index.js

@@ -6395,7 +6395,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$k.textHasAncestor$raw : styles$k.text$raw, numberOfLines === 1 && styles$k.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$k.textMultiLine, props.style, selectable === true && styles$k.selectable, selectable === false && styles$k.notSelectable, onPress && styles$k.pressable];
+  }, hasTextAncestor === true ? styles$j.textHasAncestor$raw : styles$j.text$raw, numberOfLines === 1 && styles$j.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$j.textMultiLine, props.style, selectable === true && styles$j.selectable, selectable === false && styles$j.notSelectable, onPress && styles$j.pressable];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$k = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -7075,7 +7075,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   var writingDirection = componentDirection || contextDirection;
   var supportedProps = pickProps(rest);
   supportedProps.dir = componentDirection;
-  supportedProps.style = [styles$j.view$raw, hasTextAncestor && styles$j.inline, props.style];
+  supportedProps.style = [styles$i.view$raw, hasTextAncestor && styles$i.inline, props.style];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -7101,7 +7101,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   });
 });
 View$1.displayName = 'View';
-var styles$j = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7202,14 +7202,14 @@ function TouchableOpacity(props, forwardedRef) {
     focusable: !disabled && focusable !== false,
     pointerEvents: disabled ? 'box-none' : undefined,
     ref: setRef,
-    style: [styles$i.root, !disabled && styles$i.actionable, style, opacityOverride != null && {
+    style: [styles$h.root, !disabled && styles$h.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$i = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7476,11 +7476,51 @@ var defaultTheme = {
   negative: '#ff0000'
 };
 
+// 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 getDerivedColor = function (color) {
   var backgroundColor = Color(color);
   return backgroundColor.isDark() ? backgroundColor.lighten(0.2).string() : backgroundColor.darken(0.2).string();
 };
-// Same implimentation as Microsite
+// Same implementation as Microsite
 var getReadableTextColor = function (backgroundColor) {
   var bgColor = Color(backgroundColor);
   var white = Color('#fff');
@@ -7516,50 +7556,11 @@ var shouldDesaturate = function (type, count) {
   return type === 'SPECIFIC' && count === 0;
 };
 var desaturateColor = function (color) {
-  return Color(color).desaturate(1).toString();
+  return Color(color).grayscale().lighten(2).toString();
 };
 var getStateColor = function (baseColor, type, count) {
   return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
 };
-// 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'
-  })
-});
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -8145,17 +8146,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$h.container, style]
+    style: [styles$g.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$h.animation, !animating && styles$h.animationPause, !animating && hidesWhenStopped && styles$h.hidesWhenStopped]
+    } : indicatorSizes[size], styles$g.animation, !animating && styles$g.animationPause, !animating && hidesWhenStopped && styles$g.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$h = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8195,7 +8196,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$g.container, {
+    style: [styles$f.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8204,7 +8205,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$g = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8518,14 +8519,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$f.scrollDisabled, hideScrollbar && styles$f.hideScrollbar]
+    style: [style, !scrollEnabled && styles$e.scrollDisabled, hideScrollbar && styles$e.hideScrollbar]
   }));
 });
 
 // Chrome doesn't support e.preventDefault in this case; touch-action must be
 // used to disable scrolling.
 // https://developers.google.com/web/updates/2017/01/scrolling-intervention
-var styles$f = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -9164,7 +9165,7 @@ let ScrollView$1 = class ScrollView extends React$1.Component {
       var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
       if (child != null && (isSticky || pagingEnabled)) {
         return /*#__PURE__*/React$1.createElement(View$2, {
-          style: [isSticky && styles$e.stickyHeader, pagingEnabled && styles$e.pagingEnabledChild]
+          style: [isSticky && styles$d.stickyHeader, pagingEnabled && styles$d.pagingEnabledChild]
         }, child);
       } else {
         return child;
@@ -9174,10 +9175,10 @@ let ScrollView$1 = class ScrollView extends React$1.Component {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$e.contentContainerHorizontal, centerContent && styles$e.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$d.contentContainerHorizontal, centerContent && styles$d.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$e.baseHorizontal : styles$e.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$e.pagingEnabledHorizontal : styles$e.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$d.baseHorizontal : styles$d.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$d.pagingEnabledHorizontal : styles$d.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9220,7 +9221,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$e = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -10433,7 +10434,7 @@ class CellRenderer extends React__namespace.Component {
     ItemSeparatorComponent :
     // $FlowFixMe[incompatible-type]
     ItemSeparatorComponent && /*#__PURE__*/React__namespace.createElement(ItemSeparatorComponent, this.state.separatorProps);
-    var cellStyle = inversionStyle ? horizontal ? [styles$d.rowReverse, inversionStyle] : [styles$d.columnReverse, inversionStyle] : horizontal ? [styles$d.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$c.rowReverse, inversionStyle] : [styles$c.columnReverse, inversionStyle] : horizontal ? [styles$c.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10453,7 +10454,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$d = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11633,7 +11634,7 @@ class VirtualizedList extends StateSafePureComponent {
     var _this$props6 = this.props,
       data = _this$props6.data,
       horizontal = _this$props6.horizontal;
-    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$c.horizontallyInverted : styles$c.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$b.horizontallyInverted : styles$b.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11797,7 +11798,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$c.debug
+        style: styles$b.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11914,20 +11915,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlay]
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrame, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameLast, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameVis, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12068,7 +12069,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$c = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12445,7 +12446,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
             _index = info.index;
           invariant$1(Array.isArray(_item2), 'Expected array of items with numColumns > 1');
           return /*#__PURE__*/React__namespace.createElement(View$2, {
-            style: [styles$b.row, columnWrapperStyle]
+            style: [styles$a.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12571,7 +12572,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$b = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14958,7 +14959,7 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   // Accessibility image allows users to trigger the browser's image context menu
   var hiddenImage = displayImageUri ? createElement$1('img', {
     alt: ariaLabel || '',
-    style: styles$a.accessibilityImage$raw,
+    style: styles$9.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -15030,14 +15031,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$a.root, hasTextAncestor && styles$a.inline, imageSizeStyle, style, styles$a.undo,
+    style: [styles$9.root, hasTextAncestor && styles$9.inline, imageSizeStyle, style, styles$9.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$a.image, resizeModeStyles[resizeMode], {
+    style: [styles$9.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15059,7 +15060,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$a = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18163,7 +18164,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$9 = StyleSheet$1.create({
+var styles$8 = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -18201,11 +18202,11 @@ var ProgressiveImage = function (_a) {
   var desaturatedColor = desaturateColor(baseColor);
   var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
   return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [styles$9.container, style, {
+    style: [styles$8.container, style, {
       backgroundColor: backgroundColor
     }]
   }, /*#__PURE__*/React$1.createElement(Animated$1.View, {
-    style: [styles$9.imageOverlay, {
+    style: [styles$8.imageOverlay, {
       backgroundColor: backgroundColor,
       opacity: imageAnimated.interpolate({
         inputRange: [0, 1],
@@ -18214,7 +18215,7 @@ var ProgressiveImage = function (_a) {
     }]
   }), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$9.imageOverlay, __assign({
+    style: [styles$8.imageOverlay, __assign({
       opacity: imageAnimated
     }, isDesaturated && {
       filter: "saturate(".concat(0 * 100, "%)")
@@ -18853,7 +18854,7 @@ function Pressable(props, forwardedRef) {
     onFocus: focusHandler,
     onKeyDown: keyDownHandler,
     ref: setRef,
-    style: [disabled ? styles$8.disabled : styles$8.active, typeof style === 'function' ? style(interactionState) : style],
+    style: [disabled ? styles$7.disabled : styles$7.active, typeof style === 'function' ? style(interactionState) : style],
     tabIndex: _tabIndex
   }), typeof children === 'function' ? children(interactionState) : children);
 }
@@ -18863,7 +18864,7 @@ function useForceableState(forced) {
     setBool = _useState[1];
   return [bool || forced, setBool];
 }
-var styles$8 = StyleSheet$1.create({
+var styles$7 = StyleSheet$1.create({
   active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
@@ -19058,7 +19059,7 @@ var BaseBanner = function (_a) {
   }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$7.container, {
+      return [styles$6.container, {
         backgroundColor: theme.surface,
         borderRadius: theme.sizes.borderRadiusLg,
         opacity: pressed ? 0.7 : 1
@@ -19071,7 +19072,7 @@ var BaseBanner = function (_a) {
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children));
 };
-var styles$7 = StyleSheet$1.create({
+var styles$6 = StyleSheet$1.create({
   container: {
     width: '100%',
     maxWidth: MAX_WIDTH,
@@ -19091,63 +19092,78 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
-var TileContext = /*#__PURE__*/React$1.createContext(null);
-var useTileContext = function () {
-  var context = React$1.useContext(TileContext);
-  if (!context) {
-    throw new Error('Tile components must be used within a BaseTile');
-  }
-  return context;
-};
-var BaseTileInner = function (_a) {
-  var tile = _a.tile,
-    children = _a.children;
-  return /*#__PURE__*/React$1.createElement(TileContext.Provider, {
-    value: tile
-  }, /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children));
+var BaseTileBody = function (props) {
+  var tile = useTileContext();
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var _b = tile.configuration,
+    body = _b.body,
+    artworkUrl = _b.artworkUrl;
+  var isHalfSize = useTileSize(tile).isHalfSize;
+  if (isHalfSize && artworkUrl || !body) return null;
+  return /*#__PURE__*/React$1.createElement(Text, _extends({
+    variant: "body"
+  }, props, {
+    accessibilityLabel: body,
+    numberOfLines: isDesktop ? 3 : isTablet ? 4 : 3
+  }), body);
 };
-var BaseTileRoot = function (_a) {
-  var children = _a.children,
-    style = _a.style;
+
+var baseStyles = StyleSheet$1.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  content: {
+    display: 'flex'
+  },
+  media: {
+    width: '100%',
+    objectFit: 'cover'
+  }
+});
+// Dynamic styles hook
+var useBaseTileStyles = function () {
   var tile = useTileContext();
   var theme = useWllSdk().theme;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
   var isHalfSize = useTileSize(tile).isHalfSize;
   var _b = tile.configuration,
-    ctaLink = _b.ctaLink,
-    ctaLinkTarget = _b.ctaLinkTarget,
-    title = _b.title;
-  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  var _c = useResponsive$1(),
-    isDesktop = _c.isDesktop,
-    isTablet = _c.isTablet;
-  var layout = {
-    flexDirection: 'column',
-    justifyContent: isHalfSize ? 'center' : 'flex-start',
-    alignItems: 'stretch'
-  };
-  var dynamicStyles = StyleSheet$1.create({
-    container: {
+    artworkUrl = _b.artworkUrl,
+    title = _b.title,
+    body = _b.body;
+  return StyleSheet$1.create({
+    container: __assign(__assign({}, baseStyles.container), {
+      backgroundColor: theme.surface,
+      aspectRatio: isHalfSize ? 2 : 1,
+      borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet),
+      justifyContent: 'center',
+      alignItems: 'center'
+    }),
+    content: __assign(__assign({}, baseStyles.content), {
       justifyContent: 'center',
+      height: !artworkUrl ? '100%' : undefined
+    }),
+    header: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+      marginTop: !isHalfSize && artworkUrl ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : undefined,
+      flexDirection: 'row',
       alignItems: 'center',
-      aspectRatio: isHalfSize ? 2 : 1,
-      borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet)
-    }
-  });
-  return /*#__PURE__*/React$1.createElement(Pressable$1, {
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [styles$6.container, {
-        backgroundColor: theme.surface,
-        opacity: pressed ? 0.7 : 1
-      }, dynamicStyles.container, layout, style];
+      justifyContent: 'space-between',
+      textAlign: isHalfSize ? 'center' : undefined
     },
-    onPress: handlePress,
-    disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
-  }, children);
+    media: __assign(__assign({}, baseStyles.media), {
+      flexBasis: !isHalfSize && title && body ? '50%' : '100%',
+      height: isHalfSize ? '100%' : undefined
+    })
+  });
 };
+
 var BaseTileContent = function (_a) {
   var children = _a.children;
   var tile = useTileContext();
@@ -19156,32 +19172,21 @@ var BaseTileContent = function (_a) {
   // For half tiles with an image, don't show other content
   if (isHalfSize && artworkUrl) return null;
   return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [styles$6.content, {
+    style: [baseStyles.content, {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
     }]
   }, children);
 };
+
 var BaseTileHeader = function (_a) {
   var children = _a.children;
   var tile = useTileContext();
-  var theme = useWllSdk().theme;
   var artworkUrl = tile.configuration.artworkUrl;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
   // For half tiles with an image, don't show header
   if (isHalfSize && artworkUrl) return null;
-  var dynamicStyles = StyleSheet$1.create({
-    header: {
-      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
-      marginTop: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  });
+  var dynamicStyles = useBaseTileStyles();
   return /*#__PURE__*/React$1.createElement(View$2, {
     style: [dynamicStyles.header, {
       marginTop: isHalfSize ? 0 : dynamicStyles.header.marginTop,
@@ -19192,26 +19197,24 @@ var BaseTileHeader = function (_a) {
     numberOfLines: 1
   }, children);
 };
+
 var BaseTileMedia = function (props) {
   var tile = useTileContext();
   var _a = tile.configuration,
-    artworkUrl = _a.artworkUrl,
-    title = _a.title,
-    body = _a.body;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+    artworkUrl = _a.artworkUrl;
+    _a.title;
+    _a.body;
+  useTileSize(tile).isHalfSize;
+  var styles = useBaseTileStyles();
   if (!artworkUrl) return null;
-  var hasTitle = !!title;
-  var hasDescription = !!body;
   return /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: artworkUrl
     },
-    style: [props.style, styles$6.media, {
-      flexBasis: !isHalfSize && hasTitle && hasDescription ? '50%' : '100%',
-      height: isHalfSize ? '100%' : undefined
-    }]
+    style: [props.style, baseStyles.media, styles.media]
   }));
 };
+
 var BaseTileTitle = function () {
   var tile = useTileContext();
   var theme = useWllSdk().theme;
@@ -19231,18 +19234,53 @@ var BaseTileTitle = function () {
     color: theme.derivedSurfaceText[20]
   }));
 };
-var BaseTileBody = function (props) {
+
+var TileContext = /*#__PURE__*/React$1.createContext(null);
+var useTileContext = function () {
+  var context = React$1.useContext(TileContext);
+  if (!context) {
+    throw new Error('Tile components must be used within a BaseTile');
+  }
+  return context;
+};
+var BaseTileInner = function (_a) {
+  var tile = _a.tile,
+    children = _a.children;
+  return /*#__PURE__*/React$1.createElement(TileContext.Provider, {
+    value: tile
+  }, /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children));
+};
+var BaseTileRoot = function (_a) {
+  var children = _a.children,
+    style = _a.style;
   var tile = useTileContext();
-  var _a = tile.configuration,
-    body = _a.body,
-    artworkUrl = _a.artworkUrl;
+  var theme = useWllSdk().theme;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  if (isHalfSize && artworkUrl || !body) return null;
-  return /*#__PURE__*/React$1.createElement(Text, _extends({
-    variant: "body"
-  }, props, {
-    accessibilityLabel: body
-  }), body);
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title;
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  var layout = {
+    flexDirection: 'column',
+    justifyContent: isHalfSize ? 'center' : 'flex-start',
+    alignItems: 'stretch'
+  };
+  var dynamicStyles = useBaseTileStyles();
+  return /*#__PURE__*/React$1.createElement(Pressable$1, {
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return [baseStyles.container, dynamicStyles.container, {
+        backgroundColor: theme.surface,
+        opacity: pressed ? 0.7 : 1
+      }, layout, style];
+    },
+    onPress: handlePress,
+    disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
+  }, children);
 };
 var BaseTile = BaseTileInner;
 BaseTile.Root = BaseTileRoot;
@@ -19251,21 +19289,6 @@ BaseTile.Content = BaseTileContent;
 BaseTile.Header = BaseTileHeader;
 BaseTile.Title = BaseTileTitle;
 BaseTile.Body = BaseTileBody;
-var styles$6 = StyleSheet$1.create({
-  container: {
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    position: 'relative'
-  },
-  content: {
-    display: 'flex'
-  },
-  media: {
-    width: '100%',
-    objectFit: 'cover'
-  }
-});
 
 var Indicator = function () {
   var _a = useResponsive$1(),
@@ -20817,6 +20840,11 @@ var useTierTileStyles = function () {
       width: '100%',
       height: '100%',
       resizeMode: 'cover'
+    },
+    name: {
+      marginBottom: 0,
+      numberOfLines: 1,
+      ellipsizeMode: 'tail'
     }
   });
 };
@@ -20891,12 +20919,18 @@ var TierTileHalf = function (_a) {
     style: {
       paddingTop: 16
     }
-  }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: {
+      flex: 1,
+      flexShrink: 1
+    }
+  }, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "eyebrow",
     style: styles.title
   }, title), name && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
-    style: styles.title
+    style: styles.name,
+    numberOfLines: 2
   }, name)), artworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
     style: styles.smallImageContainer
   }, /*#__PURE__*/React__namespace.createElement(Image$2, {
@@ -20926,7 +20960,7 @@ var TierTileEmpty = function (_a) {
       style: {
         paddingTop: 16
       }
-    }, /*#__PURE__*/React__namespace.createElement(View$2, {
+    }, /*#__PURE__*/React__namespace.createElement(Column, {
       style: {
         flex: 1
       }
@@ -20935,7 +20969,7 @@ var TierTileEmpty = function (_a) {
       style: styles.title
     }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "body"
-    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
+    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(Column, {
       style: styles.smallImageContainer
     }, /*#__PURE__*/React__namespace.createElement(Image$2, {
       source: {
@@ -20959,7 +20993,7 @@ var TierTileEmpty = function (_a) {
     align: "stretch",
     justify: "center",
     direction: "column"
-  }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React__namespace.createElement(Column, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {