@wlloyalty/wll-react-sdk 1.0.28 → 1.0.30

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$l.textHasAncestor$raw : styles$l.text$raw, numberOfLines === 1 && styles$l.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$l.textMultiLine, props.style, selectable === true && styles$l.selectable, selectable === false && styles$l.notSelectable, onPress && styles$l.pressable];
+  }, 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];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$l = StyleSheet$1.create({
+var styles$k = 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$k.view$raw, hasTextAncestor && styles$k.inline, props.style];
+  supportedProps.style = [styles$j.view$raw, hasTextAncestor && styles$j.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$k = StyleSheet$1.create({
+var styles$j = 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$j.root, !disabled && styles$j.actionable, style, opacityOverride != null && {
+    style: [styles$i.root, !disabled && styles$i.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$j = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7443,9 +7443,17 @@ var sizes = {
   borderRadiusLg: 20,
   borderRadiusButton: 9,
   borderRadiusRounded: 9999,
-  sm: 6,
-  md: 10,
-  lg: 16
+  xxxs: 4,
+  xxs: 8,
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32,
+  xxxxl: 40,
+  xxxxxl: 60
 };
 var defaultTheme = {
   background: '#F0F0F0',
@@ -7909,11 +7917,51 @@ var useWllSdk = function () {
   return context;
 };
 
+var clamp$1 = function (value, min, max) {
+  return Math.min(Math.max(value, min), max);
+};
+var lerp = function (start, end, t) {
+  return start + (end - start) * t;
+};
+var getWindowWidth = function () {
+  if (Platform$1.OS === 'web') {
+    return window.innerWidth;
+  }
+  return Dimensions.get('window').width;
+};
 var getResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
-  if (isDesktop) return desktopValue;
-  if (isTablet) return Math.round((desktopValue + mobileValue) / 2); // Tablet gets the middle value
+  var width = getWindowWidth();
+  var tabletValue = (desktopValue + mobileValue) / 2;
+  // Desktop to Tablet scaling
+  if (width >= TABLET_SCREEN_WIDTH) {
+    var t = clamp$1((width - TABLET_SCREEN_WIDTH) / 300, 0, 1); // 300px scaling range
+    return Math.round(lerp(tabletValue, desktopValue, t));
+  }
+  // Tablet to Mobile scaling
+  if (width > SMALL_SCREEN_WIDTH) {
+    var t = clamp$1((width - SMALL_SCREEN_WIDTH) / (TABLET_SCREEN_WIDTH - SMALL_SCREEN_WIDTH), 0, 1);
+    return Math.round(lerp(mobileValue, tabletValue, t));
+  }
   return mobileValue;
 };
+var useResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
+  var _a = React$1.useState(function () {
+      return getResponsiveValue(desktopValue, mobileValue);
+    }),
+    value = _a[0],
+    setValue = _a[1];
+  React$1.useEffect(function () {
+    if (Platform$1.OS !== 'web') return;
+    var handleResize = function () {
+      setValue(getResponsiveValue(desktopValue, mobileValue));
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [desktopValue, mobileValue, isDesktop, isTablet]);
+  return value;
+};
 
 function createVariantSystem(baseStyle, variantStyles) {
   return function (theme, variant) {
@@ -7968,14 +8016,14 @@ var Button = function (_a) {
     button: {
       justifyContent: 'center',
       alignItems: 'center',
-      paddingHorizontal: getResponsiveValue(24, 12, isDesktop, isTablet),
-      paddingVertical: 12,
+      paddingHorizontal: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet),
+      paddingVertical: theme.sizes.sm,
       alignSelf: 'flex-start'
     },
     text: {
       textAlign: 'center',
       textTransform: 'uppercase',
-      fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.sm, isDesktop, isTablet),
       fontWeight: '700'
     }
   });
@@ -8013,14 +8061,15 @@ var Column$1 = function (_a) {
     direction = _d === void 0 ? 'column' : _d,
     _e = _a.style,
     style = _e === void 0 ? {} : _e;
+  var theme = useWllSdk().theme;
   var _f = useResponsive$1(),
     isDesktop = _f.isDesktop,
     isTablet = _f.isTablet;
   var dynamicStyles = StyleSheet$1.create({
     column: {
       flex: 1,
-      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
-      paddingBottom: getResponsiveValue(12, 8, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       justifyContent: justifyMap$1[justify],
       alignItems: alignMap$1[align],
       flexDirection: direction
@@ -8089,17 +8138,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$i.container, style]
+    style: [styles$h.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$i.animation, !animating && styles$i.animationPause, !animating && hidesWhenStopped && styles$i.hidesWhenStopped]
+    } : indicatorSizes[size], styles$h.animation, !animating && styles$h.animationPause, !animating && hidesWhenStopped && styles$h.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$i = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8139,7 +8188,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$h.container, {
+    style: [styles$g.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8148,7 +8197,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$h = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8462,14 +8511,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$g.scrollDisabled, hideScrollbar && styles$g.hideScrollbar]
+    style: [style, !scrollEnabled && styles$f.scrollDisabled, hideScrollbar && styles$f.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$g = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -9108,7 +9157,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$f.stickyHeader, pagingEnabled && styles$f.pagingEnabledChild]
+          style: [isSticky && styles$e.stickyHeader, pagingEnabled && styles$e.pagingEnabledChild]
         }, child);
       } else {
         return child;
@@ -9118,10 +9167,10 @@ let ScrollView$1 = class ScrollView extends React$1.Component {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$f.contentContainerHorizontal, centerContent && styles$f.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$e.contentContainerHorizontal, centerContent && styles$e.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$f.baseHorizontal : styles$f.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$f.pagingEnabledHorizontal : styles$f.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$e.baseHorizontal : styles$e.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$e.pagingEnabledHorizontal : styles$e.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9164,7 +9213,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$f = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -10377,7 +10426,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$e.rowReverse, inversionStyle] : [styles$e.columnReverse, inversionStyle] : horizontal ? [styles$e.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$d.rowReverse, inversionStyle] : [styles$d.columnReverse, inversionStyle] : horizontal ? [styles$d.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10397,7 +10446,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$e = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11577,7 +11626,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$d.horizontallyInverted : styles$d.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$c.horizontallyInverted : styles$c.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11741,7 +11790,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$d.debug
+        style: styles$c.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11858,20 +11907,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$d.debugOverlayBase, styles$d.debugOverlay]
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrame, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrameLast, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrameVis, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12012,7 +12061,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$d = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12389,7 +12438,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$c.row, columnWrapperStyle]
+            style: [styles$b.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12515,7 +12564,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$c = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14902,7 +14951,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$b.accessibilityImage$raw,
+    style: styles$a.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -14974,14 +15023,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$b.root, hasTextAncestor && styles$b.inline, imageSizeStyle, style, styles$b.undo,
+    style: [styles$a.root, hasTextAncestor && styles$a.inline, imageSizeStyle, style, styles$a.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$b.image, resizeModeStyles[resizeMode], {
+    style: [styles$a.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15003,7 +15052,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$b = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18029,13 +18078,13 @@ var useStyles = function (theme) {
 var useContainerStyles = function (theme) {
   return {
     sm: {
-      height: theme.sizes.sm
+      height: theme.sizes.xxs
     },
     md: {
-      height: theme.sizes.md
+      height: theme.sizes.xs
     },
     lg: {
-      height: theme.sizes.lg
+      height: theme.sizes.sm
     }
   };
 };
@@ -18107,7 +18156,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$a = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -18133,36 +18182,36 @@ var ProgressiveImage = function (_a) {
   var imageAnimated = React$1.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
   var onImageLoad = function () {
-    Animated$1.timing(imageAnimated, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration: 500
-    }).start();
+    requestAnimationFrame(function () {
+      Animated$1.timing(imageAnimated, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300
+      }).start();
+    });
   };
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
+  var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
   return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [styles$a.container, style, {
-      backgroundColor: isDesaturated ? desaturatedColor : baseColor
+    style: [styles$9.container, style, {
+      backgroundColor: backgroundColor
     }]
-  }, isDesaturated ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
-    source: source,
-    style: [styles$a.imageOverlay, {
-      opacity: imageAnimated,
-      tintColor: desaturatedColor
-    }],
-    onLoad: onImageLoad
-  })), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
-    source: source,
-    style: [styles$a.imageOverlay, {
-      opacity: 0.1
-    }],
-    onLoad: onImageLoad
-  }))) : /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(Animated$1.View, {
+    style: [styles$9.imageOverlay, {
+      backgroundColor: backgroundColor,
+      opacity: imageAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0]
+      })
+    }]
+  }), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$a.imageOverlay, {
+    style: [styles$9.imageOverlay, __assign({
       opacity: imageAnimated
-    }],
+    }, isDesaturated && {
+      filter: "saturate(".concat(0 * 100, "%)")
+    })],
     onLoad: onImageLoad
   })));
 };
@@ -18174,12 +18223,13 @@ var RowHeader = function (_a) {
   var _b = useResponsive$1(),
     isDesktop = _b.isDesktop,
     isTablet = _b.isTablet;
+  var theme = useWllSdk().theme;
   var dynamicStyles = StyleSheet$1.create({
     header: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     }
   });
   return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
@@ -18204,51 +18254,38 @@ var Text = function (_a) {
     switch (variant) {
       case 'eyebrow':
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(14, 12, isDesktop, isTablet),
-          marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
+          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
         });
       case 'title':
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
           fontWeight: 'bold'
         });
       case 'body':
         return {
           color: theme.derivedSurfaceText[20],
-          fontSize: getResponsiveValue(14, 10, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.xs, isDesktop, isTablet)
         };
       case 'caption':
         return __assign(__assign({}, baseStyle), {
           fontWeight: 'bold',
-          fontSize: getResponsiveValue(24, 18, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
           color: theme.primary
         });
-      case 'tier-earned':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(20, 14, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
-      case 'tier-requirement':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
       case 'description':
       case 'label':
       default:
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(12, 10, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet)
         });
     }
   };
   var variantStyle = getVariantStyle(variant);
   return /*#__PURE__*/React__namespace.createElement(Text$3, _extends({
-    style: [styles$9.base, variantStyle, style]
+    style: [variantStyle, style]
   }, props));
 };
-var styles$9 = StyleSheet$1.create({
-  base: {}
-});
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -19073,7 +19110,7 @@ var BaseTileRoot = function (_a) {
       justifyContent: 'center',
       alignItems: 'center',
       aspectRatio: isHalfSize ? 2 : 1,
-      borderRadius: getResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet)
+      borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet)
     }
   });
   return /*#__PURE__*/React$1.createElement(Pressable$1, {
@@ -19108,6 +19145,7 @@ var BaseTileContent = function (_a) {
 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(),
@@ -19117,8 +19155,8 @@ var BaseTileHeader = function (_a) {
   if (isHalfSize && artworkUrl) return null;
   var dynamicStyles = StyleSheet$1.create({
     header: {
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
-      marginTop: getResponsiveValue(12, 8, isDesktop, isTablet),
+      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'
@@ -19326,14 +19364,15 @@ 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: getResponsiveValue(16, 8, isDesktop, isTablet),
-      right: getResponsiveValue(16, 8, isDesktop, isTablet),
+      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,
@@ -19351,14 +19390,14 @@ var useBadgeTileStyles = function () {
       alignItems: 'center',
       justifyContent: 'center',
       position: 'relative',
-      marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
     },
     image: {
       width: '100%',
       height: '100%'
     },
     titleText: {
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     },
     dateEarnedContainer: {
       alignItems: 'flex-start',
@@ -19369,70 +19408,6 @@ var useBadgeTileStyles = function () {
   });
 };
 
-var BadgeTileInner = function (_a) {
-  var tile = _a.tile;
-  var styles = useBadgeTileStyles();
-  if (!tile) return null;
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.container
-  }, /*#__PURE__*/React$1.createElement(BadgeTile.Media, null, /*#__PURE__*/React$1.createElement(BadgeTile.Status, null)), /*#__PURE__*/React$1.createElement(Column$1, {
-    justify: "between",
-    align: "start"
-  }, /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(BadgeTile.Title, null), /*#__PURE__*/React$1.createElement(BadgeTile.Description, null)), /*#__PURE__*/React$1.createElement(BadgeTile.DateEarned, null))));
-};
-var BadgeTileMedia = function (_a) {
-  var children = _a.children,
-    props = __rest(_a, ["children"]);
-  var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var type = configuration.type,
-    count = configuration.count,
-    artworkUrl = configuration.artworkUrl,
-    emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
-  var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
-  if (!displayUrl) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.header
-  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
-    source: {
-      uri: displayUrl
-    },
-    style: styles.image,
-    resizeMode: "contain",
-    isDesaturated: shouldDesaturate(type, count)
-  })), children);
-};
-var BadgeTileTitle = function () {
-  var styles = useBadgeTileStyles();
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    name = configuration.name,
-    emptyBadgeMessage = configuration.emptyBadgeMessage;
-  var displayText = count === 0 ? emptyBadgeMessage : name;
-  if (!displayText) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
-    variant: "title",
-    style: styles.titleText,
-    numberOfLines: 2,
-    ellipsizeMode: "tail"
-  }, displayText));
-};
-var BadgeTileDescription = function () {
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var count = configuration.count,
-    description = configuration.description;
-  if (count === 0 || !description) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
-    variant: "body",
-    numberOfLines: 2,
-    ellipsizeMode: "tail"
-  }, description);
-};
 var BadgeTileDateEarned = function () {
   var styles = useBadgeTileStyles();
   var tile = useTileContext();
@@ -19464,6 +19439,44 @@ var BadgeTileDateEarned = function () {
     variant: "label"
   }, "".concat(awardedDatePrefix, " ").concat(formattedDate)));
 };
+
+var BadgeTileDescription = function () {
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var count = configuration.count,
+    description = configuration.description;
+  if (count === 0 || !description) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "body",
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, description);
+};
+
+var BadgeTileMedia = function (_a) {
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  var styles = useBadgeTileStyles();
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var type = configuration.type,
+    count = configuration.count,
+    artworkUrl = configuration.artworkUrl,
+    emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
+  var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
+  if (!displayUrl) return null;
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.header
+  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
+    source: {
+      uri: displayUrl
+    },
+    style: styles.image,
+    resizeMode: "contain",
+    isDesaturated: shouldDesaturate(type, count)
+  })), children);
+};
+
 var BadgeTileStatus = function () {
   var styles = useBadgeTileStyles();
   var tile = useTileContext();
@@ -19482,13 +19495,56 @@ var BadgeTileStatus = function () {
     style: styles.countText
   }, count, "x"));
 };
-var BadgeTile = BadgeTileInner;
+
+var BadgeTileTitle = function () {
+  var styles = useBadgeTileStyles();
+  var tile = useTileContext();
+  var configuration = tile.configuration;
+  var count = configuration.count,
+    name = configuration.name,
+    emptyBadgeMessage = configuration.emptyBadgeMessage;
+  var displayText = count === 0 ? emptyBadgeMessage : name;
+  if (!displayText) return null;
+  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
+    variant: "title",
+    style: styles.titleText,
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, displayText));
+};
+
+var BadgeTileMain = function (_a) {
+  var tile = _a.tile;
+  if (!tile) return null;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(BadgeTile.Media, null, /*#__PURE__*/React$1.createElement(BadgeTile.Status, null)), /*#__PURE__*/React$1.createElement(Column, {
+    justify: "between",
+    align: "start"
+  }, /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(BadgeTile.Title, null), /*#__PURE__*/React$1.createElement(BadgeTile.Description, null)), /*#__PURE__*/React$1.createElement(BadgeTile.DateEarned, null)));
+};
+var BadgeTile = BadgeTileMain;
 BadgeTile.Media = BadgeTileMedia;
 BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
 
+var BannerTileCTA = function () {
+  var configuration = useBannerContext().configuration;
+  var _a = configuration,
+    ctaText = _a.ctaText,
+    ctaLink = _a.ctaLink,
+    ctaLinkTarget = _a.ctaLinkTarget;
+  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+  if (!ctaText) return null;
+  return /*#__PURE__*/React$1.createElement(Button, {
+    title: ctaText,
+    variant: "accent",
+    onPress: handlePress
+  });
+};
+
 var useBannerTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -19499,11 +19555,10 @@ var useBannerTileStyles = function () {
       flex: 1
     },
     mediaContainer: {
-      width: '30%',
       aspectRatio: 1,
       position: 'relative',
       overflow: 'hidden',
-      marginRight: getResponsiveValue(24, 8, isDesktop, isTablet),
+      marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
       height: 320
     },
     media: {
@@ -19513,89 +19568,95 @@ var useBannerTileStyles = function () {
       objectFit: 'cover'
     },
     title: {
-      fontSize: getResponsiveValue(32, 14, isDesktop, isTablet),
-      marginBottom: getResponsiveValue(12, 4, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.md, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxxs, isDesktop, isTablet),
       fontWeight: '700'
     },
     description: {
-      fontSize: getResponsiveValue(18, 10, isDesktop, isTablet),
-      marginBottom: getResponsiveValue(32, 12, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.xs, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.xxxl, theme.sizes.sm, isDesktop, isTablet),
       color: theme.derivedSurfaceText[20]
     }
   });
 };
 
-var BannerTile = function (_a) {
-  var tile = _a.tile;
+var BannerTileDescription = function () {
   var styles = useBannerTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, null), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.slideContent
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Title, null), /*#__PURE__*/React__namespace.createElement(BannerTile.Description, null), /*#__PURE__*/React__namespace.createElement(BannerTile.CTA, null)));
+  var configuration = useBannerContext().configuration;
+  var description = configuration.description;
+  var theme = useWllSdk().theme;
+  if (!description) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    style: [styles.description, {
+      color: theme.derivedSurfaceText[20]
+    }]
+  }, description);
 };
-var BannerTileMedia = function () {
+
+var BannerTileMedia = function (_a) {
+  var isArtworkOnly = _a.isArtworkOnly;
   var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.mediaContainer
-  }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
-    source: {
-      uri: artworkUrl
-    },
-    style: styles.media
-  }));
+  var containerStyle = {
+    width: isArtworkOnly ? '100%' : '30%'
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-ignore: We are using percentage values for width, which is valid in React Native but TypeScript expects a number.
+    React$1.createElement(View$2, {
+      style: [styles.mediaContainer, containerStyle]
+    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+      source: {
+        uri: artworkUrl
+      },
+      style: styles.media
+    }))
+  );
 };
+
 var BannerTileTitle = function () {
   var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var title = configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title);
 };
-var BannerTileDescription = function () {
+
+var BannerTile = function (_a) {
+  var tile = _a.tile;
   var styles = useBannerTileStyles();
-  var configuration = useBannerContext().configuration;
-  var description = configuration.description;
-  var theme = useWllSdk().theme;
-  if (!description) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles.description, {
-      color: theme.derivedSurfaceText[20]
-    }]
-  }, description);
-};
-var BannerTileCTA = function () {
-  var configuration = useBannerContext().configuration;
-  var _a = configuration,
-    ctaText = _a.ctaText,
-    ctaLink = _a.ctaLink,
-    ctaLinkTarget = _a.ctaLinkTarget;
-  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
-  if (!ctaText) return null;
-  return /*#__PURE__*/React__namespace.createElement(Button, {
-    title: ctaText,
-    variant: "accent",
-    onPress: handlePress
-  });
+  var configuration = tile.configuration;
+  var isArtworkOnly = !configuration.title && !configuration.description && !configuration.ctaText;
+  return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
+    tile: tile
+  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, {
+    isArtworkOnly: isArtworkOnly
+  }), /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: styles.slideContent
+  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Title, null), /*#__PURE__*/React__namespace.createElement(BannerTile.Description, null), /*#__PURE__*/React__namespace.createElement(BannerTile.CTA, null)));
 };
 BannerTile.Media = BannerTileMedia;
 BannerTile.Title = BannerTileTitle;
 BannerTile.Description = BannerTileDescription;
 BannerTile.CTA = BannerTileCTA;
 
+var ContentTileBody = function () {
+  return /*#__PURE__*/React$1.createElement(BaseTile.Body, null);
+};
+
 var useContentTileStyles = function () {
+  var theme = useWllSdk().theme;
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
   return StyleSheet$1.create({
     content: {
-      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       flex: 1,
       justifyContent: 'center'
     },
@@ -19605,39 +19666,40 @@ var useContentTileStyles = function () {
   });
 };
 
-var ContentTileInner = function (_a) {
-  var tile = _a.tile;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(ContentTile.Root, null, /*#__PURE__*/React__namespace.createElement(ContentTile.Media, null), /*#__PURE__*/React__namespace.createElement(ContentTile.Content, null, /*#__PURE__*/React__namespace.createElement(ContentTile.Header, null), /*#__PURE__*/React__namespace.createElement(ContentTile.Body, null))));
-};
-var ContentTileRoot = function (_a) {
-  var children = _a.children;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Root, null, children);
-};
-var ContentTileMedia = function () {
-  var styles = useContentTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Media, {
-    style: styles.media
-  });
-};
 var ContentTileContent = function (_a) {
   var children = _a.children;
   var styles = useContentTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Content, null, /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(BaseTile.Content, null, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.content
   }, children));
 };
+
 var ContentTileHeader = function () {
   var tile = useTileContext();
   var title = tile.configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Header, null, /*#__PURE__*/React__namespace.createElement(BaseTile.Title, null));
+  return /*#__PURE__*/React$1.createElement(BaseTile.Header, null, /*#__PURE__*/React$1.createElement(BaseTile.Title, null));
 };
-var ContentTileBody = function () {
-  return /*#__PURE__*/React__namespace.createElement(BaseTile.Body, null);
+
+var ContentTileMedia = function () {
+  var styles = useContentTileStyles();
+  return /*#__PURE__*/React$1.createElement(BaseTile.Media, {
+    style: styles.media
+  });
+};
+
+var ContentTileRoot = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children);
 };
-var ContentTile = ContentTileInner;
+
+var ContentTileMain = function (_a) {
+  var tile = _a.tile;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(ContentTile.Root, null, /*#__PURE__*/React$1.createElement(ContentTile.Media, null), /*#__PURE__*/React$1.createElement(ContentTile.Content, null, /*#__PURE__*/React$1.createElement(ContentTile.Header, null), /*#__PURE__*/React$1.createElement(ContentTile.Body, null))));
+};
+var ContentTile = ContentTileMain;
 ContentTile.Root = ContentTileRoot;
 ContentTile.Media = ContentTileMedia;
 ContentTile.Content = ContentTileContent;
@@ -19673,16 +19735,16 @@ var useSectionHeaderStyles = function () {
   var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     sectionHeader: {
-      marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
     },
     sectionTitle: {
-      fontSize: getResponsiveValue(32, 18, isDesktop, isTablet),
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.xl, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
       fontWeight: '700',
       color: theme.text
     },
     sectionDescription: {
-      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
       color: theme.alphaDerivedText[80]
     }
   });
@@ -19772,7 +19834,7 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
     indicators: {
       flexDirection: 'row',
       justifyContent: 'center',
-      marginTop: getResponsiveValue(24, 12, isDesktop, isTablet)
+      marginTop: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet)
     },
     indicator: {
       width: 8,
@@ -19836,7 +19898,7 @@ var Carousel = function (_a) {
     indicators: {
       flexDirection: 'row',
       justifyContent: 'center',
-      marginTop: getResponsiveValue(24, 12, isDesktop, isTablet)
+      marginTop: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet)
     }
   });
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(SectionHeader, {
@@ -20063,12 +20125,13 @@ var useSectionStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     section: {
       width: '100%',
       maxWidth: MAX_WIDTH,
       marginHorizontal: 'auto',
-      marginBottom: getResponsiveValue(60, 40, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, isDesktop, isTablet)
     }
   });
 };
@@ -20168,7 +20231,7 @@ var usePointsTileStyles = function (isFullSize) {
   var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     container: {
-      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       width: '100%',
       flexDirection: isFullSize ? 'row' : 'row-reverse',
       alignItems: isFullSize ? 'flex-start' : 'center',
@@ -20179,7 +20242,7 @@ var usePointsTileStyles = function (isFullSize) {
       width: isFullSize ? '100%' : 'auto'
     },
     suffix: {
-      fontSize: getResponsiveValue(18, 14, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
       color: theme.primary
     },
     pointsWithSuffix: {
@@ -20190,7 +20253,7 @@ var usePointsTileStyles = function (isFullSize) {
     imageContainer: {
       width: isFullSize ? '100%' : 57,
       height: isFullSize ? '50%' : 57,
-      marginBottom: isFullSize ? getResponsiveValue(12, 8, isDesktop, isTablet) : 0,
+      marginBottom: isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : 0,
       backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
       justifyContent: 'center',
       alignItems: 'center',
@@ -20205,30 +20268,7 @@ var usePointsTileStyles = function (isFullSize) {
   });
 };
 
-var PointsTile = function (_a) {
-  var tile = _a.tile;
-  var isFullSize = useTileSize(tile).isFullSize;
-  var styles = usePointsTileStyles(isFullSize);
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, isFullSize && /*#__PURE__*/React__namespace.createElement(PointsTile.Image, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.container
-  }, !isFullSize && /*#__PURE__*/React__namespace.createElement(PointsTile.Image, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/React__namespace.createElement(PointsTile.Title, null), /*#__PURE__*/React__namespace.createElement(PointsTile.Points, null))));
-};
-var PointsTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var title = configuration.title;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "eyebrow"
-  }, title);
-};
-var PointsTilePoints = function () {
+var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
   var configuration = useTileContext().configuration;
   var _a = configuration,
@@ -20240,21 +20280,28 @@ var PointsTilePoints = function () {
   if (calculatedPoints === null) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "caption"
-  }, prefix !== null && prefix !== void 0 ? prefix : '', /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.pointsWithSuffix
-  }, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
+  }, prefix !== null && prefix !== void 0 ? prefix : '', /*#__PURE__*/React__namespace.createElement(Row, null, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
     style: styles.suffix
   }, suffix !== null && suffix !== void 0 ? suffix : 'pts')));
 };
-var PointsTileImage = function (_a) {
+
+var PointsTileTitle = function () {
+  var configuration = useTileContext().configuration;
+  var title = configuration.title;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "eyebrow"
+  }, title);
+};
+
+var PointsTileMedia = function (_a) {
   var isFullSize = _a.isFullSize;
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.imageContainer
-  }, /*#__PURE__*/React__namespace.createElement(Image$2, {
+  }, /*#__PURE__*/React$1.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
@@ -20262,9 +20309,26 @@ var PointsTileImage = function (_a) {
     resizeMode: "contain"
   }));
 };
+
+var PointsTile = function (_a) {
+  var tile = _a.tile;
+  var isFullSize = useTileSize(tile).isFullSize;
+  var styles = usePointsTileStyles(isFullSize);
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
+    isFullSize: isFullSize
+  }), /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.container
+  }, !isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
+    isFullSize: isFullSize
+  }), /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React$1.createElement(PointsTile.Title, null), /*#__PURE__*/React$1.createElement(PointsTile.Points, null))));
+};
 PointsTile.Title = PointsTileTitle;
-PointsTile.Points = PointsTilePoints;
-PointsTile.Image = PointsTileImage;
+PointsTile.Points = PointsTileFormattedPoints;
+PointsTile.Media = PointsTileMedia;
 
 var useRewardCategoryTileStyles = function () {
   var _a = useResponsive$1(),
@@ -20284,8 +20348,8 @@ var useRewardCategoryTileStyles = function () {
       backgroundColor: theme.primary
     },
     headerText: {
-      fontSize: getResponsiveValue(16, 12, isDesktop, isTablet),
-      paddingHorizontal: getResponsiveValue(40, 20, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.lg, theme.sizes.sm, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.xxxxl, 20, isDesktop, isTablet),
       color: theme.primaryText
     },
     background: {
@@ -20297,13 +20361,6 @@ var useRewardCategoryTileStyles = function () {
   });
 };
 
-var RewardCategoryTile = function (_a) {
-  var tile = _a.tile;
-  if (!tile) return null;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Background, null));
-};
 var RewardCategoryHeader = function () {
   var styles = useRewardCategoryTileStyles();
   var theme = useWllSdk().theme;
@@ -20312,11 +20369,11 @@ var RewardCategoryHeader = function () {
     showName = _a.showName,
     name = _a.name;
   if (!showName || !name) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [styles.header, {
       backgroundColor: theme.primary
     }]
-  }, /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     style: [styles.headerText, {
       color: theme.primaryText
     }],
@@ -20324,30 +20381,56 @@ var RewardCategoryHeader = function () {
     numberOfLines: 1
   }, name));
 };
-var RewardCategoryBackground = function () {
+
+var RewardCategoryMedia = function () {
   var styles = useRewardCategoryTileStyles();
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
+  return /*#__PURE__*/React$1.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
     style: styles.background
   });
 };
+
+var RewardCategoryTile = function (_a) {
+  var tile = _a.tile;
+  if (!tile) return null;
+  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Media, null));
+};
 RewardCategoryTile.Header = RewardCategoryHeader;
-RewardCategoryTile.Background = RewardCategoryBackground;
+RewardCategoryTile.Media = RewardCategoryMedia;
+
+var RewardTileChevron = function () {
+  var theme = useWllSdk().theme;
+  return /*#__PURE__*/React$1.createElement(Icon, {
+    name: "ChevronRight",
+    color: theme.derivedSurfaceText[20]
+  });
+};
+
+var RewardTileSummary = function () {
+  var configuration = useTileContext().configuration;
+  var summary = configuration.summary;
+  if (!summary) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "body"
+  }, summary);
+};
 
 var useRewardTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     imageContainer: {
       width: '100%',
-      flexBasis: '50%',
-      marginBottom: getResponsiveValue(12, 8, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     image: {
       position: 'absolute',
@@ -20360,7 +20443,7 @@ var useRewardTileStyles = function () {
       resizeMode: 'cover'
     },
     content: {
-      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
       flex: 1
     },
     footer: {
@@ -20372,103 +20455,103 @@ var useRewardTileStyles = function () {
       justifyContent: 'center'
     },
     suffix: {
-      fontSize: getResponsiveValue(18, 14, isDesktop, isTablet)
+      color: theme.primary,
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet)
     }
   });
 };
 
-var RewardTile = function (_a) {
-  var tile = _a.tile;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(RewardTile.Media, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Content, null, /*#__PURE__*/React__namespace.createElement(RowHeader, null, /*#__PURE__*/React__namespace.createElement(RewardTile.Title, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React__namespace.createElement(RewardTile.Description, null), /*#__PURE__*/React__namespace.createElement(RewardTile.Points, null)));
-};
-var RewardTileMedia = function () {
+var RewardTileMedia = function (_a) {
+  var isArtworkOnly = _a.isArtworkOnly;
   var styles = useRewardTileStyles();
   var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.pictureUrl)) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.imageContainer
-  }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
-    source: {
-      uri: reward.pictureUrl
-    },
-    style: styles.image
-  }));
-};
-var RewardTileTitle = function () {
-  var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.name)) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "title",
-    ellipsizeMode: "tail",
-    numberOfLines: 1
-  }, reward.name);
-};
-var RewardTileDescription = function () {
-  var configuration = useTileContext().configuration;
-  var reward = configuration;
-  if (!(reward === null || reward === void 0 ? void 0 : reward.summary)) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "body"
-  }, reward.summary);
+  var _b = configuration,
+    artworkUrl = _b.artworkUrl,
+    _c = _b.showArtwork,
+    showArtwork = _c === void 0 ? true : _c;
+  if (!artworkUrl || !showArtwork) return null;
+  var containerStyle = {
+    flexBasis: isArtworkOnly ? '100%' : '50%'
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-ignore: We are using percentage values for flexBasis, which is valid in React Native but TypeScript expects a number.
+    React$1.createElement(View$2, {
+      style: [styles.imageContainer, containerStyle]
+    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+      source: {
+        uri: artworkUrl
+      },
+      style: styles.image
+    }))
+  );
 };
+
 var RewardTilePoints = function () {
   var styles = useRewardTileStyles();
   var configuration = useTileContext().configuration;
-  var theme = useWllSdk().theme;
-  var reward = configuration;
-  var calculatedPoints = (reward === null || reward === void 0 ? void 0 : reward.price) !== undefined ? reward.price * (Number(reward.pointsMultiplier) || 1) : null;
-  if ((reward === null || reward === void 0 ? void 0 : reward.price) === 0 || !reward.showPrice || calculatedPoints === null) {
-    return null;
-  }
-  return /*#__PURE__*/React__namespace.createElement(Text, {
+  var _a = configuration,
+    showPrice = _a.showPrice,
+    price = _a.price,
+    pointsMultiplier = _a.pointsMultiplier,
+    pointsPrefix = _a.pointsPrefix,
+    pointsSuffix = _a.pointsSuffix;
+  var calculatedPoints = price !== undefined ? price * (Number(pointsMultiplier) || 1) : null;
+  if (!showPrice || calculatedPoints === null) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
     variant: "caption",
     style: styles.footer
-  }, reward.pointsPrefix, /*#__PURE__*/React__namespace.createElement(View$2, {
+  }, pointsPrefix, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.pointsContainer
-  }, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles.suffix, {
-      color: theme.primary
-    }]
-  }, reward.pointsSuffix)));
+  }, calculatedPoints, /*#__PURE__*/React$1.createElement(Text, {
+    style: styles.suffix
+  }, pointsSuffix)));
 };
-var RewardTileContent = function (_a) {
-  var children = _a.children;
-  var styles = useRewardTileStyles();
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.content
-  }, children);
+
+var RewardTileTitle = function () {
+  var configuration = useTileContext().configuration;
+  var name = configuration.name;
+  if (!name) return null;
+  return /*#__PURE__*/React$1.createElement(Text, {
+    variant: "title",
+    ellipsizeMode: "tail",
+    numberOfLines: 1
+  }, name);
 };
-var RewardTileChevron = function () {
-  var theme = useWllSdk().theme;
-  return /*#__PURE__*/React__namespace.createElement(Icon, {
-    name: "ChevronRight",
-    color: theme.derivedSurfaceText[20]
-  });
+
+var RewardTile = function (_a) {
+  var tile = _a.tile;
+  var configuration = tile.configuration;
+  var showDetails = configuration.showDetails;
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React$1.createElement(RewardTile.Media, {
+    isArtworkOnly: !showDetails
+  }), /*#__PURE__*/React$1.createElement(Column, null, /*#__PURE__*/React$1.createElement(Row, {
+    justify: "between",
+    align: "center"
+  }, /*#__PURE__*/React$1.createElement(RewardTile.Title, null), /*#__PURE__*/React$1.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React$1.createElement(RewardTile.Summary, null), /*#__PURE__*/React$1.createElement(RewardTile.Points, null)));
 };
 RewardTile.Media = RewardTileMedia;
 RewardTile.Title = RewardTileTitle;
-RewardTile.Description = RewardTileDescription;
+RewardTile.Summary = RewardTileSummary;
 RewardTile.Points = RewardTilePoints;
 RewardTile.Chevron = RewardTileChevron;
-RewardTile.Content = RewardTileContent;
 
 var useTierTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
     isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     header: {
       flexBasis: '50%',
       width: '100%',
       overflow: 'hidden',
-      marginBottom: getResponsiveValue(12, 8, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     },
     title: {
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     },
     smallImageContainer: {
       width: 48,
@@ -20712,14 +20795,15 @@ var Column = function (_a) {
   var _d = useResponsive$1(),
     isDesktop = _d.isDesktop,
     isTablet = _d.isTablet;
-  return /*#__PURE__*/React.createElement(View$2, {
+  var theme = useWllSdk().theme;
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [{
       flex: 1,
       flexDirection: 'column',
       justifyContent: justifyMap[justify],
       alignItems: alignMap[align],
-      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
-      paddingBottom: getResponsiveValue(12, 8, isDesktop, isTablet)
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
     }, style]
   }, children);
 };
@@ -20733,7 +20817,7 @@ var Row = function (_a) {
     _d = _a.direction,
     direction = _d === void 0 ? 'row' : _d,
     style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: [{
       flexDirection: direction,
       justifyContent: justifyMap[justify],
@@ -20742,6 +20826,15 @@ var Row = function (_a) {
   }, children);
 };
 
+var FlexBox = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: {
+      flex: 1
+    }
+  }, children);
+};
+
 var Stack = function (_a) {
   var children = _a.children,
     _b = _a.justify,
@@ -20772,7 +20865,8 @@ var alignMap = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
-  stretch: 'stretch'
+  stretch: 'stretch',
+  baseline: 'baseline'
 };
 
 var Reward = /** @class */function () {
@@ -20780,8 +20874,8 @@ var Reward = /** @class */function () {
   return Reward;
 }();
 
+exports.BadgeTile = BadgeTile;
 exports.BadgeTileConfig = BadgeTileConfig;
-exports.BadgeTileUpdated = BadgeTile;
 exports.BannerTile = BannerTile;
 exports.BannerTileConfig = BannerTileConfig;
 exports.BaseBanner = BaseBanner;
@@ -20792,6 +20886,7 @@ exports.Column = Column;
 exports.Content = Column$1;
 exports.ContentTile = ContentTile;
 exports.ContentTileConfig = ContentTileConfig;
+exports.FlexBox = FlexBox;
 exports.Grid = Grid;
 exports.Group = Group;
 exports.Icon = Icon;