@wlloyalty/wll-react-sdk 1.0.27 → 1.0.28

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var React$1 = require('react');
 var Color = require('color');
 var LucideIcons = require('lucide-react');
 
@@ -21,7 +21,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
 
 function _typeof$1(o) {
@@ -4527,7 +4527,7 @@ var defaultLocale = {
   direction: 'ltr',
   locale: 'en-US'
 };
-var LocaleContext = /*#__PURE__*/React.createContext(defaultLocale);
+var LocaleContext = /*#__PURE__*/React$1.createContext(defaultLocale);
 function getLocaleDirection(locale) {
   return isLocaleRTL(locale) ? 'rtl' : 'ltr';
 }
@@ -4536,7 +4536,7 @@ function LocaleProvider(props) {
     locale = props.locale,
     children = props.children;
   var needsContext = direction || locale;
-  return needsContext ? /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+  return needsContext ? /*#__PURE__*/React$1.createElement(LocaleContext.Provider, {
     children: children,
     value: {
       direction: locale ? getLocaleDirection(locale) : direction,
@@ -4545,7 +4545,7 @@ function LocaleProvider(props) {
   }) : children;
 }
 function useLocaleContext() {
-  return React.useContext(LocaleContext);
+  return React$1.useContext(LocaleContext);
 }
 
 /**
@@ -4565,10 +4565,10 @@ var createElement = (component, props, options) => {
   }
   var Component = accessibilityComponent || component;
   var domProps = createDOMProps$1(Component, props, options);
-  var element = /*#__PURE__*/React.createElement(Component, domProps);
+  var element = /*#__PURE__*/React$1.createElement(Component, domProps);
 
   // Update locale context if element's writing direction prop changes
-  var elementWithLocaleProvider = domProps.dir ? /*#__PURE__*/React.createElement(LocaleProvider, {
+  var elementWithLocaleProvider = domProps.dir ? /*#__PURE__*/React$1.createElement(LocaleProvider, {
     children: element,
     direction: domProps.dir,
     locale: domProps.lang
@@ -4775,7 +4775,7 @@ function pick(obj, list) {
  * 
  */
 
-var useLayoutEffectImpl = canUseDOM$1 ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffectImpl = canUseDOM$1 ? React$1.useLayoutEffect : React$1.useEffect;
 var useLayoutEffect = useLayoutEffectImpl;
 
 /**
@@ -6312,7 +6312,7 @@ function useResponderEvents(hostRef, config) {
  * 
  */
 
-var TextAncestorContext = /*#__PURE__*/React.createContext(false);
+var TextAncestorContext = /*#__PURE__*/React$1.createContext(false);
 var TextAncestorContext$1 = TextAncestorContext;
 
 var _excluded$c = ["hrefAttrs", "numberOfLines", "onClick", "onLayout", "onPress", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "selectable"];
@@ -6395,7 +6395,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$w.textHasAncestor$raw : styles$w.text$raw, numberOfLines === 1 && styles$w.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$w.textMultiLine, props.style, selectable === true && styles$w.selectable, selectable === false && styles$w.notSelectable, onPress && styles$w.pressable];
+  }, 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];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$w = StyleSheet$1.create({
+var styles$l = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -6988,25 +6988,25 @@ function getTouchFromResponderEvent(event) {
  */
 
 function usePressEvents(hostRef, config) {
-  var pressResponderRef = React.useRef(null);
+  var pressResponderRef = React$1.useRef(null);
   if (pressResponderRef.current == null) {
     pressResponderRef.current = new PressResponder(config);
   }
   var pressResponder = pressResponderRef.current;
 
   // Re-configure to use the current node and configuration.
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     pressResponder.configure(config);
   }, [config, pressResponder]);
 
   // Reset the `pressResponder` when cleanup needs to occur. This is
   // a separate effect because we do not want to rest the responder when `config` changes.
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     return () => {
       pressResponder.reset();
     };
   }, [pressResponder]);
-  React.useDebugValue(config);
+  React$1.useDebugValue(config);
   return pressResponder.getEventHandlers();
 }
 
@@ -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$v.view$raw, hasTextAncestor && styles$v.inline, props.style];
+  supportedProps.style = [styles$k.view$raw, hasTextAncestor && styles$k.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$v = StyleSheet$1.create({
+var styles$k = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7156,25 +7156,25 @@ function TouchableOpacity(props, forwardedRef) {
     rejectResponderTermination = props.rejectResponderTermination,
     style = props.style,
     rest = _objectWithoutPropertiesLoose(props, _excluded$a);
-  var hostRef = React.useRef(null);
+  var hostRef = React$1.useRef(null);
   var setRef = useMergeRefs$1(forwardedRef, hostRef);
-  var _useState = React.useState('0s'),
+  var _useState = React$1.useState('0s'),
     duration = _useState[0],
     setDuration = _useState[1];
-  var _useState2 = React.useState(null),
+  var _useState2 = React$1.useState(null),
     opacityOverride = _useState2[0],
     setOpacityOverride = _useState2[1];
-  var setOpacityTo = React.useCallback((value, duration) => {
+  var setOpacityTo = React$1.useCallback((value, duration) => {
     setOpacityOverride(value);
     setDuration(duration ? duration / 1000 + "s" : '0s');
   }, [setOpacityOverride, setDuration]);
-  var setOpacityActive = React.useCallback(duration => {
+  var setOpacityActive = React$1.useCallback(duration => {
     setOpacityTo(activeOpacity !== null && activeOpacity !== void 0 ? activeOpacity : 0.2, duration);
   }, [activeOpacity, setOpacityTo]);
-  var setOpacityInactive = React.useCallback(duration => {
+  var setOpacityInactive = React$1.useCallback(duration => {
     setOpacityTo(null, duration);
   }, [setOpacityTo]);
-  var pressConfig = React.useMemo(() => ({
+  var pressConfig = React$1.useMemo(() => ({
     cancelable: !rejectResponderTermination,
     disabled,
     delayLongPress,
@@ -7202,14 +7202,14 @@ function TouchableOpacity(props, forwardedRef) {
     focusable: !disabled && focusable !== false,
     pointerEvents: disabled ? 'box-none' : undefined,
     ref: setRef,
-    style: [styles$u.root, !disabled && styles$u.actionable, style, opacityOverride != null && {
+    style: [styles$j.root, !disabled && styles$j.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$u = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7339,7 +7339,7 @@ var parseNavigationLink = function (link) {
 };
 
 var useNavigation = function (config) {
-  var handleNavigation = React.useCallback(function (link, ctaTarget) {
+  var handleNavigation = React$1.useCallback(function (link, ctaTarget) {
     var _a;
     var _b = parseNavigationLink(link),
       type = _b.type,
@@ -7357,7 +7357,7 @@ var useNavigation = function (config) {
 
 var baseUrl = 'https://api.staging.core.wlloyalty.net/v1';
 var useCreateRequestOptions = function (config) {
-  return React.useCallback(function (options) {
+  return React$1.useCallback(function (options) {
     if (options === void 0) {
       options = {};
     }
@@ -7374,7 +7374,7 @@ var useCreateRequestOptions = function (config) {
 };
 var useMakeRequest = function (config) {
   var createRequestOptions = useCreateRequestOptions(config);
-  return React.useCallback(function (url) {
+  return React$1.useCallback(function (url) {
     return __awaiter(void 0, void 0, void 0, function () {
       var response, json, error_1;
       return __generator(this, function (_a) {
@@ -7422,7 +7422,7 @@ var createResourceGetter = function (resource, includeHydrate) {
   }
   return function (config) {
     var makeRequest = useMakeRequest(config);
-    return React.useCallback(function (id) {
+    return React$1.useCallback(function (id) {
       var params = new URLSearchParams();
       if (includeHydrate) {
         params.append('hydrate', 'true');
@@ -7765,10 +7765,10 @@ function getDimensionMode(window) {
 }
 function useResponsive$1() {
   var deviceWindow = Dimensions.get('window');
-  var _a = React.useState(getDimensionMode(deviceWindow)),
+  var _a = React$1.useState(getDimensionMode(deviceWindow)),
     dimensionMode = _a[0],
     setDimensionMode = _a[1];
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     if (!isWeb) return;
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
@@ -7791,10 +7791,10 @@ function useResponsive$1() {
   };
 }
 
-var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);
+var ResponsiveContext = /*#__PURE__*/React$1.createContext(undefined);
 function ResponsiveProvider(_a) {
   var children = _a.children;
-  var _b = React.useState(function () {
+  var _b = React$1.useState(function () {
       var window = Dimensions.get('window');
       var dimensionMode = getDimensionMode(window);
       return {
@@ -7806,7 +7806,7 @@ function ResponsiveProvider(_a) {
     }),
     state = _b[0],
     setState = _b[1];
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
       if (window) {
@@ -7825,12 +7825,12 @@ function ResponsiveProvider(_a) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ResponsiveContext.Provider, {
     value: state
   }, children);
 }
 function useResponsive() {
-  var context = React.useContext(ResponsiveContext);
+  var context = React$1.useContext(ResponsiveContext);
   if (context === undefined) {
     throw new Error('useResponsive must be used within a ResponsiveProvider');
   }
@@ -7863,22 +7863,22 @@ var createTheme = function (baseTheme) {
     alphaDerivedText: getAlphaDerivedColors(text)
   });
 };
-var WllSdkContext = /*#__PURE__*/React.createContext(undefined);
+var WllSdkContext = /*#__PURE__*/React$1.createContext(undefined);
 var WllSdkProvider = function (_a) {
   var children = _a.children,
     providedTheme = _a.theme,
     config = _a.config,
     _b = _a.navigationConfig,
     navigationConfig = _b === void 0 ? {} : _b;
-  var _c = React.useState(function () {
+  var _c = React$1.useState(function () {
       return createTheme(providedTheme || {});
     }),
     theme = _c[0],
     setThemeState = _c[1];
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     setThemeState(createTheme(providedTheme || {}));
   }, [providedTheme]);
-  var setTheme = React.useCallback(function (newTheme) {
+  var setTheme = React$1.useCallback(function (newTheme) {
     setThemeState(function (prevTheme) {
       return createTheme(__assign(__assign({}, prevTheme), newTheme));
     });
@@ -7887,7 +7887,7 @@ var WllSdkProvider = function (_a) {
   var getSectionByID = useGetSectionByID(config);
   var getTileByID = useGetTileByID(config);
   var handleNavigation = useNavigation(navigationConfig);
-  var contextValue = React.useMemo(function () {
+  var contextValue = React$1.useMemo(function () {
     return {
       theme: theme,
       setTheme: setTheme,
@@ -7897,43 +7897,18 @@ var WllSdkProvider = function (_a) {
       handleNavigation: handleNavigation
     };
   }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
-  return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(WllSdkContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
+  }, /*#__PURE__*/React$1.createElement(ResponsiveProvider, null, children));
 };
 var useWllSdk = function () {
-  var context = React.useContext(WllSdkContext);
+  var context = React$1.useContext(WllSdkContext);
   if (context === undefined) {
     throw new Error('useWllSdk must be used within a WllSdkProvider');
   }
   return context;
 };
 
-var BREAKPOINTS = {
-  MOBILE: 0,
-  TABLET: 767,
-  DESKTOP: 768
-};
-var createResponsiveStyle = function (style) {
-  var windowWidth = Dimensions.get('window').width;
-  var responsiveStyle = Object.entries(style).reduce(function (acc, _a) {
-    var key = _a[0],
-      value = _a[1];
-    if (Array.isArray(value)) {
-      if (windowWidth > BREAKPOINTS.DESKTOP) {
-        acc[key] = value[2] || value[1] || value[0]; // Desktop value or fallback to tablet
-      } else if (windowWidth > BREAKPOINTS.TABLET) {
-        acc[key] = value[1] || value[0]; // Tablet value or fallback to mobile
-      } else {
-        acc[key] = value[0]; // Mobile value or fallback to first value
-      }
-    } else {
-      acc[key] = value; // No responsive value, just return the value
-    }
-    return acc;
-  }, {});
-  return responsiveStyle;
-};
 var getResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
   if (isDesktop) return desktopValue;
   if (isTablet) return Math.round((desktopValue + mobileValue) / 2); // Tablet gets the middle value
@@ -8014,7 +7989,7 @@ var Button = function (_a) {
   }, title));
 };
 
-var justifyMap = {
+var justifyMap$1 = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
@@ -8022,13 +7997,13 @@ var justifyMap = {
   around: 'space-around',
   evenly: 'space-evenly'
 };
-var alignMap = {
+var alignMap$1 = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
   stretch: 'stretch'
 };
-var Column = function (_a) {
+var Column$1 = function (_a) {
   var children = _a.children,
     _b = _a.justify,
     justify = _b === void 0 ? 'start' : _b,
@@ -8038,22 +8013,23 @@ var Column = function (_a) {
     direction = _d === void 0 ? 'column' : _d,
     _e = _a.style,
     style = _e === void 0 ? {} : _e;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$t.column, {
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align],
+  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),
+      justifyContent: justifyMap$1[justify],
+      alignItems: alignMap$1[align],
       flexDirection: direction
-    }, style]
+    }
+  });
+  return /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: [dynamicStyles.column, style]
   }, children);
 };
-var styles$t = StyleSheet$1.create({
-  column: __assign({
-    flex: 1
-  }, createResponsiveStyle({
-    paddingHorizontal: [8, 8, 16],
-    paddingBottom: [8, 8, 16]
-  }))
-});
 
 var Icon = function (_a) {
   var name = _a.name,
@@ -8113,17 +8089,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$s.container, style]
+    style: [styles$i.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$s.animation, !animating && styles$s.animationPause, !animating && hidesWhenStopped && styles$s.hidesWhenStopped]
+    } : indicatorSizes[size], styles$i.animation, !animating && styles$i.animationPause, !animating && hidesWhenStopped && styles$i.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$s = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8163,7 +8139,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$r.container, {
+    style: [styles$h.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8172,7 +8148,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$r = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8298,7 +8274,7 @@ function RefreshControl(props) {
     props.title;
     props.titleColor;
     var rest = _objectWithoutPropertiesLoose(props, _excluded$8);
-  return /*#__PURE__*/React.createElement(View$2, rest);
+  return /*#__PURE__*/React$1.createElement(View$2, rest);
 }
 
 /**
@@ -8486,14 +8462,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$q.scrollDisabled, hideScrollbar && styles$q.hideScrollbar]
+    style: [style, !scrollEnabled && styles$g.scrollDisabled, hideScrollbar && styles$g.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$q = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -8601,7 +8577,7 @@ var warning$1 = /*@__PURE__*/getDefaultExportFromCjs(warning_1);
 var _excluded$6 = ["contentContainerStyle", "horizontal", "onContentSizeChange", "refreshControl", "stickyHeaderIndices", "pagingEnabled", "forwardedRef", "keyboardDismissMode", "onScroll", "centerContent"];
 var emptyObject$1 = {};
 var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
-let ScrollView$1 = class ScrollView extends React.Component {
+let ScrollView$1 = class ScrollView extends React$1.Component {
   constructor() {
     super(...arguments);
     this._scrollNodeRef = null;
@@ -9128,24 +9104,24 @@ let ScrollView$1 = class ScrollView extends React.Component {
       };
     }
     var hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices);
-    var children = hasStickyHeaderIndices || pagingEnabled ? React.Children.map(this.props.children, (child, i) => {
+    var children = hasStickyHeaderIndices || pagingEnabled ? React$1.Children.map(this.props.children, (child, i) => {
       var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
       if (child != null && (isSticky || pagingEnabled)) {
-        return /*#__PURE__*/React.createElement(View$2, {
-          style: [isSticky && styles$p.stickyHeader, pagingEnabled && styles$p.pagingEnabledChild]
+        return /*#__PURE__*/React$1.createElement(View$2, {
+          style: [isSticky && styles$f.stickyHeader, pagingEnabled && styles$f.pagingEnabledChild]
         }, child);
       } else {
         return child;
       }
     }) : this.props.children;
-    var contentContainer = /*#__PURE__*/React.createElement(View$2, _extends$1({}, contentSizeChangeProps, {
+    var contentContainer = /*#__PURE__*/React$1.createElement(View$2, _extends$1({}, contentSizeChangeProps, {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$p.contentContainerHorizontal, centerContent && styles$p.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$f.contentContainerHorizontal, centerContent && styles$f.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$p.baseHorizontal : styles$p.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$p.pagingEnabledHorizontal : styles$p.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$f.baseHorizontal : styles$f.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$f.pagingEnabledHorizontal : styles$f.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9167,11 +9143,11 @@ let ScrollView$1 = class ScrollView extends React.Component {
     });
     var ScrollViewClass = ScrollViewBase$1;
     invariant$1(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined');
-    var scrollView = /*#__PURE__*/React.createElement(ScrollViewClass, _extends$1({}, props, {
+    var scrollView = /*#__PURE__*/React$1.createElement(ScrollViewClass, _extends$1({}, props, {
       ref: this._setScrollNodeRef
     }), contentContainer);
     if (refreshControl) {
-      return /*#__PURE__*/React.cloneElement(refreshControl, {
+      return /*#__PURE__*/React$1.cloneElement(refreshControl, {
         style: props.style
       }, scrollView);
     }
@@ -9188,7 +9164,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$p = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -9221,8 +9197,8 @@ var styles$p = StyleSheet$1.create({
     scrollSnapAlign: 'start'
   }
 });
-var ForwardedScrollView = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
-  return /*#__PURE__*/React.createElement(ScrollView$1, _extends$1({}, props, {
+var ForwardedScrollView = /*#__PURE__*/React$1.forwardRef((props, forwardedRef) => {
+  return /*#__PURE__*/React$1.createElement(ScrollView$1, _extends$1({}, props, {
     forwardedRef: forwardedRef
   }));
 });
@@ -10268,7 +10244,7 @@ function VirtualizedListContextProvider(_ref2) {
   var children = _ref2.children,
     value = _ref2.value;
   // Avoid setting a newly created context object if the values are identical.
-  var context = React.useMemo(() => ({
+  var context = React$1.useMemo(() => ({
     cellKey: null,
     getScrollMetrics: value.getScrollMetrics,
     horizontal: value.horizontal,
@@ -10288,8 +10264,8 @@ function VirtualizedListCellContextProvider(_ref3) {
   var cellKey = _ref3.cellKey,
     children = _ref3.children;
   // Avoid setting a newly created context object if the values are identical.
-  var currContext = React.useContext(VirtualizedListContext);
-  var context = React.useMemo(() => currContext == null ? null : _objectSpread2(_objectSpread2({}, currContext), {}, {
+  var currContext = React$1.useContext(VirtualizedListContext);
+  var context = React$1.useMemo(() => currContext == null ? null : _objectSpread2(_objectSpread2({}, currContext), {}, {
     cellKey
   }), [currContext, cellKey]);
   return /*#__PURE__*/React__namespace.createElement(VirtualizedListContext.Provider, {
@@ -10401,7 +10377,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$o.rowReverse, inversionStyle] : [styles$o.columnReverse, inversionStyle] : horizontal ? [styles$o.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$e.rowReverse, inversionStyle] : [styles$e.columnReverse, inversionStyle] : horizontal ? [styles$e.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10421,7 +10397,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$o = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11601,7 +11577,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$n.horizontallyInverted : styles$n.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$d.horizontallyInverted : styles$d.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11765,7 +11741,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$n.debug
+        style: styles$d.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11882,20 +11858,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlay]
+      style: [styles$d.debugOverlayBase, styles$d.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrame, {
+      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameLast, {
+      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameVis, {
+      style: [styles$d.debugOverlayBase, styles$d.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12036,7 +12012,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$n = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12413,7 +12389,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$m.row, columnWrapperStyle]
+            style: [styles$c.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12539,7 +12515,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$m = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14334,8 +14310,8 @@ var AnimatedProps$1 = AnimatedProps;
  * WARNING: The `effect` callback should be stable (e.g. using `useCallback`).
  */
 function useRefEffect(effect) {
-  var cleanupRef = React.useRef(undefined);
-  return React.useCallback(instance => {
+  var cleanupRef = React$1.useRef(undefined);
+  return React$1.useCallback(instance => {
     if (cleanupRef.current) {
       cleanupRef.current();
       cleanupRef.current = undefined;
@@ -14357,15 +14333,15 @@ function useRefEffect(effect) {
  */
 
 function useAnimatedProps(props) {
-  var _useReducer = React.useReducer(count => count + 1, 0),
+  var _useReducer = React$1.useReducer(count => count + 1, 0),
     scheduleUpdate = _useReducer[1];
-  var onUpdateRef = React.useRef(null);
+  var onUpdateRef = React$1.useRef(null);
 
   // TODO: Only invalidate `node` if animated props or `style` change. In the
   // previous implementation, we permitted `style` to override props with the
   // same name property name as styles, so we can probably continue doing that.
   // The ordering of other props *should* not matter.
-  var node = React.useMemo(() => new AnimatedProps$1(props, () => onUpdateRef.current == null ? void 0 : onUpdateRef.current()), [props]);
+  var node = React$1.useMemo(() => new AnimatedProps$1(props, () => onUpdateRef.current == null ? void 0 : onUpdateRef.current()), [props]);
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -14381,7 +14357,7 @@ function useAnimatedProps(props) {
   //
   // But there is no way to transparently compose three separate callback refs,
   // so we just combine them all into one for now.
-  var refEffect = React.useCallback(instance => {
+  var refEffect = React$1.useCallback(instance => {
     // NOTE: This may be called more often than necessary (e.g. when `props`
     // changes), but `setNativeView` already optimizes for that.
     node.setNativeView(instance);
@@ -14431,9 +14407,9 @@ function reduceAnimatedProps(node) {
  * unless we are unmounting.
  */
 function useAnimatedPropsLifecycle(node) {
-  var prevNodeRef = React.useRef(null);
-  var isUnmountingRef = React.useRef(false);
-  React.useEffect(() => {
+  var prevNodeRef = React$1.useRef(null);
+  var isUnmountingRef = React$1.useRef(false);
+  React$1.useEffect(() => {
     // It is ok for multiple components to call `flushQueue` because it noops
     // if the queue is empty. When multiple animated components are mounted at
     // the same time. Only first component flushes the queue and the others will noop.
@@ -14493,7 +14469,7 @@ function useMergeRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  return React.useCallback(current => {
+  return React$1.useCallback(current => {
     for (var _i = 0, _refs = refs; _i < _refs.length; _i++) {
       var ref = _refs[_i];
       if (ref != null) {
@@ -14926,7 +14902,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$l.accessibilityImage$raw,
+    style: styles$b.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -14998,14 +14974,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$l.root, hasTextAncestor && styles$l.inline, imageSizeStyle, style, styles$l.undo,
+    style: [styles$b.root, hasTextAncestor && styles$b.inline, imageSizeStyle, style, styles$b.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$l.image, resizeModeStyles[resizeMode], {
+    style: [styles$b.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15027,7 +15003,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$l = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18131,7 +18107,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$k = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -18154,7 +18130,7 @@ var ProgressiveImage = function (_a) {
     _b = _a.isDesaturated,
     isDesaturated = _b === void 0 ? false : _b,
     props = __rest(_a, ["source", "style", "isDesaturated"]);
-  var imageAnimated = React.useRef(new Animated$1.Value(0)).current;
+  var imageAnimated = React$1.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
   var onImageLoad = function () {
     Animated$1.timing(imageAnimated, {
@@ -18165,26 +18141,26 @@ var ProgressiveImage = function (_a) {
   };
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$k.container, style, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: [styles$a.container, style, {
       backgroundColor: isDesaturated ? desaturatedColor : baseColor
     }]
-  }, isDesaturated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
+  }, isDesaturated ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$k.imageOverlay, {
+    style: [styles$a.imageOverlay, {
       opacity: imageAnimated,
       tintColor: desaturatedColor
     }],
     onLoad: onImageLoad
-  })), /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
+  })), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$k.imageOverlay, {
+    style: [styles$a.imageOverlay, {
       opacity: 0.1
     }],
     onLoad: onImageLoad
-  }))) : /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
+  }))) : /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$k.imageOverlay, {
+    style: [styles$a.imageOverlay, {
       opacity: imageAnimated
     }],
     onLoad: onImageLoad
@@ -18195,18 +18171,21 @@ var RowHeader = function (_a) {
   var children = _a.children,
     style = _a.style,
     props = __rest(_a, ["children", "style"]);
+  var _b = useResponsive$1(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
+  var dynamicStyles = StyleSheet$1.create({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+    }
+  });
   return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
-    style: [styles$j.header, style]
+    style: [dynamicStyles.header, style]
   }, props), children);
 };
-var styles$j = StyleSheet$1.create({
-  header: createResponsiveStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: [4, 4, 8]
-  })
-});
 
 var Text = function (_a) {
   var _b = _a.variant,
@@ -18264,10 +18243,10 @@ var Text = function (_a) {
   };
   var variantStyle = getVariantStyle(variant);
   return /*#__PURE__*/React__namespace.createElement(Text$3, _extends({
-    style: [styles$i.base, variantStyle, style]
+    style: [styles$9.base, variantStyle, style]
   }, props));
 };
-var styles$i = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   base: {}
 });
 
@@ -18756,9 +18735,9 @@ function Pressable(props, forwardedRef) {
   var _useForceableState3 = useForceableState(testOnly_pressed === true),
     pressed = _useForceableState3[0],
     setPressed = _useForceableState3[1];
-  var hostRef = React.useRef(null);
+  var hostRef = React$1.useRef(null);
   var setRef = useMergeRefs$1(forwardedRef, hostRef);
-  var pressConfig = React.useMemo(() => ({
+  var pressConfig = React$1.useMemo(() => ({
     delayLongPress,
     delayPressStart: delayPressIn,
     delayPressEnd: delayPressOut,
@@ -18830,17 +18809,17 @@ function Pressable(props, forwardedRef) {
     onFocus: focusHandler,
     onKeyDown: keyDownHandler,
     ref: setRef,
-    style: [disabled ? styles$h.disabled : styles$h.active, typeof style === 'function' ? style(interactionState) : style],
+    style: [disabled ? styles$8.disabled : styles$8.active, typeof style === 'function' ? style(interactionState) : style],
     tabIndex: _tabIndex
   }), typeof children === 'function' ? children(interactionState) : children);
 }
 function useForceableState(forced) {
-  var _useState = React.useState(false),
+  var _useState = React$1.useState(false),
     bool = _useState[0],
     setBool = _useState[1];
   return [bool || forced, setBool];
 }
-var styles$h = StyleSheet$1.create({
+var styles$8 = StyleSheet$1.create({
   active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
@@ -18849,13 +18828,17 @@ var styles$h = StyleSheet$1.create({
     pointerEvents: 'box-none'
   }
 });
-var MemoedPressable = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Pressable));
+var MemoedPressable = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(Pressable));
 MemoedPressable.displayName = 'Pressable';
 var Pressable$1 = MemoedPressable;
 
+var MAX_WIDTH = 1080;
+var SLIDE_WIDTH = MAX_WIDTH;
+var BUTTON_SIZE = 42;
+
 var useHandleTilePress = function (ctaLink, ctaLinkTarget) {
   var handleNavigation = useWllSdk().handleNavigation;
-  return React.useCallback(function () {
+  return React$1.useCallback(function () {
     if (ctaLink) {
       var target = ctaLinkTarget || 'SAME_FRAME';
       handleNavigation(ctaLink, target);
@@ -18885,7 +18868,7 @@ var BaseBanner = function (_a) {
   }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$g.container, {
+      return [styles$7.container, {
         backgroundColor: theme.surface,
         borderRadius: theme.sizes.borderRadiusLg,
         opacity: pressed ? 0.7 : 1
@@ -18898,10 +18881,10 @@ var BaseBanner = function (_a) {
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children));
 };
-var styles$g = StyleSheet$1.create({
+var styles$7 = StyleSheet$1.create({
   container: {
     width: '100%',
-    maxWidth: 1080,
+    maxWidth: MAX_WIDTH,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -19043,7 +19026,7 @@ var TierTileConfig = /** @class */function () {
 }();
 
 var useTileSize = function (tile) {
-  return React.useMemo(function () {
+  return React$1.useMemo(function () {
     return {
       isFullSize: tile.tileHeight === exports.TileHeight.Full,
       isHalfSize: tile.tileHeight === exports.TileHeight.Half
@@ -19051,9 +19034,9 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
-var TileContext = /*#__PURE__*/React.createContext(null);
+var TileContext = /*#__PURE__*/React$1.createContext(null);
 var useTileContext = function () {
-  var context = React.useContext(TileContext);
+  var context = React$1.useContext(TileContext);
   if (!context) {
     throw new Error('Tile components must be used within a BaseTile');
   }
@@ -19062,9 +19045,9 @@ var useTileContext = function () {
 var BaseTileInner = function (_a) {
   var tile = _a.tile,
     children = _a.children;
-  return /*#__PURE__*/React.createElement(TileContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(TileContext.Provider, {
     value: tile
-  }, /*#__PURE__*/React.createElement(BaseTile.Root, null, children));
+  }, /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children));
 };
 var BaseTileRoot = function (_a) {
   var children = _a.children,
@@ -19077,23 +19060,29 @@ var BaseTileRoot = function (_a) {
     ctaLinkTarget = _b.ctaLinkTarget,
     title = _b.title;
   var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+  var _c = useResponsive$1(),
+    isDesktop = _c.isDesktop,
+    isTablet = _c.isTablet;
   var layout = {
     flexDirection: 'column',
     justifyContent: isHalfSize ? 'center' : 'flex-start',
     alignItems: 'stretch'
   };
-  var responsiveStyles = createResponsiveStyle({
-    borderRadius: [theme.sizes.borderRadiusSm, theme.sizes.borderRadiusSm, theme.sizes.borderRadiusLg]
+  var dynamicStyles = StyleSheet$1.create({
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      aspectRatio: isHalfSize ? 2 : 1,
+      borderRadius: getResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet)
+    }
   });
-  return /*#__PURE__*/React.createElement(Pressable$1, {
+  return /*#__PURE__*/React$1.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$f.container, {
+      return [styles$6.container, {
         backgroundColor: theme.surface,
-        borderRadius: responsiveStyles.borderRadius,
-        aspectRatio: isHalfSize ? 2 : 1,
         opacity: pressed ? 0.7 : 1
-      }, layout, style];
+      }, dynamicStyles.container, layout, style];
     },
     onPress: handlePress,
     disabled: !ctaLink,
@@ -19109,8 +19098,8 @@ var BaseTileContent = function (_a) {
   var isHalfSize = useTileSize(tile).isHalfSize;
   // For half tiles with an image, don't show other content
   if (isHalfSize && artworkUrl) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$f.content, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: [styles$6.content, {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
     }]
@@ -19121,14 +19110,23 @@ var BaseTileHeader = function (_a) {
   var tile = useTileContext();
   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 headerStyle = createResponsiveStyle({
-    marginTop: [8, 8, 12]
+  var dynamicStyles = StyleSheet$1.create({
+    header: {
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
+      marginTop: getResponsiveValue(12, 8, isDesktop, isTablet),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
   });
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$f.header, {
-      marginTop: !isHalfSize && artworkUrl ? headerStyle.marginTop : undefined,
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: [dynamicStyles.header, {
+      marginTop: isHalfSize ? 0 : dynamicStyles.header.marginTop,
       // @ts-ignore
       textAlign: isHalfSize && 'center'
     }],
@@ -19145,11 +19143,11 @@ var BaseTileMedia = function (props) {
   if (!artworkUrl) return null;
   var hasTitle = !!title;
   var hasDescription = !!body;
-  return /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: artworkUrl
     },
-    style: [props.style, styles$f.media, {
+    style: [props.style, styles$6.media, {
       flexBasis: !isHalfSize && hasTitle && hasDescription ? '50%' : '100%',
       height: isHalfSize ? '100%' : undefined
     }]
@@ -19165,10 +19163,10 @@ var BaseTileTitle = function () {
   var isHalfSize = useTileSize(tile).isHalfSize;
   // Don't show title for half tiles with image
   if (isHalfSize && artworkUrl || !title) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
     accessibilityLabel: title
-  }, title), ctaLink && /*#__PURE__*/React.createElement(Icon, {
+  }, title), ctaLink && /*#__PURE__*/React$1.createElement(Icon, {
     name: "ChevronRight",
     color: theme.derivedSurfaceText[20]
   }));
@@ -19180,7 +19178,7 @@ var BaseTileBody = function (props) {
     artworkUrl = _a.artworkUrl;
   var isHalfSize = useTileSize(tile).isHalfSize;
   if (isHalfSize && artworkUrl || !body) return null;
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React$1.createElement(Text, _extends({
     variant: "body"
   }, props, {
     accessibilityLabel: body
@@ -19193,7 +19191,7 @@ BaseTile.Content = BaseTileContent;
 BaseTile.Header = BaseTileHeader;
 BaseTile.Title = BaseTileTitle;
 BaseTile.Body = BaseTileBody;
-var styles$f = StyleSheet$1.create({
+var styles$6 = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -19206,13 +19204,7 @@ var styles$f = StyleSheet$1.create({
   media: {
     width: '100%',
     objectFit: 'cover'
-  },
-  header: createResponsiveStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: [4, 4, 8]
-  })
+  }
 });
 
 var Indicator = function () {
@@ -19224,13 +19216,13 @@ var Indicator = function () {
     if (isTablet) return 'Tablet Layout';
     return 'Mobile Layout';
   };
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$e.indicator
-  }, /*#__PURE__*/React.createElement(Text$3, {
-    style: styles$e.indicatorText
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles$5.indicator
+  }, /*#__PURE__*/React$1.createElement(Text$3, {
+    style: styles$5.indicatorText
   }, getCurrentLayout()));
 };
-var styles$e = StyleSheet$1.create({
+var styles$5 = StyleSheet$1.create({
   indicator: {
     position: 'absolute',
     top: 10,
@@ -19280,36 +19272,36 @@ var Skeleton = function (_a) {
     borderRadius: theme.sizes.borderRadiusLg
   };
   return /*#__PURE__*/React__namespace.createElement(View$2, null, /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$d.skeleton, styles$d.title, {
+    style: [styles$4.skeleton, styles$4.title, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$d.skeleton, styles$d.body, {
+    style: [styles$4.skeleton, styles$4.body, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$d.container, style]
+    style: [styles$4.container, style]
   }, Array.from({
     length: numberOfSquares
   }).map(function (_, index) {
     return /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
       key: index,
-      style: [styles$d.skeleton, styles$d.square, sharedSkeletonStyle]
+      style: [styles$4.skeleton, styles$4.square, sharedSkeletonStyle]
     });
   })));
 };
-var styles$d = StyleSheet$1.create({
+var styles$4 = StyleSheet$1.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     gap: GRID_GAP,
     justifyContent: 'space-between',
     width: '100%',
-    maxWidth: 1080
+    maxWidth: MAX_WIDTH
   },
   title: {
     height: 40,
@@ -19330,136 +19322,70 @@ var styles$d = StyleSheet$1.create({
   }
 });
 
-var BadgeTileInner$1 = function (_a) {
-  var tile = _a.tile;
-  useWllSdk().theme;
-  if (tile.tileHeight === exports.TileHeight.Half) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(BaseTile, {
-    tile: tile
-  }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.contentContainer
-  }, /*#__PURE__*/React.createElement(BadgeTile$1.Image, null), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.textContainer
-  }, /*#__PURE__*/React.createElement(RowHeader, null, /*#__PURE__*/React.createElement(BadgeTile$1.Title, null), /*#__PURE__*/React.createElement(BadgeTile$1.Chevron, null)), /*#__PURE__*/React.createElement(BadgeTile$1.Body, null))));
-};
-var BadgeTileImage = function (props) {
-  var _a;
-  var tile = useTileContext();
-  var theme = useWllSdk().theme;
-  var configuration = tile.configuration;
-  var badgeDetails = (_a = configuration.details) === null || _a === void 0 ? void 0 : _a[0];
-  if (!(badgeDetails === null || badgeDetails === void 0 ? void 0 : badgeDetails.artworkUrl)) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$c.imageContainer, {
-      backgroundColor: theme.alphaDerivedPrimary[20]
-    }]
-  }, configuration.count === 0 && /*#__PURE__*/React.createElement(Locked, null), /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
-    source: {
-      uri: badgeDetails.artworkUrl
+var useBadgeTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    container: {
+      flex: 1
     },
-    resizeMode: "contain",
-    style: styles$c.image
-  })));
-};
-var BadgeTileTitle$1 = function (props) {
-  var _a;
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var badgeDetails = (_a = configuration.details) === null || _a === void 0 ? void 0 : _a[0];
-  if (!(badgeDetails === null || badgeDetails === void 0 ? void 0 : badgeDetails.name)) return null;
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    variant: "title"
-  }, props, {
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }), badgeDetails.name);
-};
-var BadgeTileBody = function (props) {
-  var _a;
-  var tile = useTileContext();
-  var configuration = tile.configuration;
-  var badgeDetails = (_a = configuration.details) === null || _a === void 0 ? void 0 : _a[0];
-  if (!(badgeDetails === null || badgeDetails === void 0 ? void 0 : badgeDetails.description)) return null;
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    variant: "body"
-  }, props), badgeDetails.description);
-};
-var Locked = function () {
-  var width = Dimensions.get('window').width;
-  var iconSize = Math.min(width * 0.1, 50);
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.lockOverlay
-  }, /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
-    color: "#FFF",
-    size: iconSize
-  }));
-};
-var BadgeTileChevron = function () {
-  var theme = useWllSdk().theme;
-  return /*#__PURE__*/React.createElement(Icon, {
-    name: "ChevronRight",
-    color: theme.derivedSurfaceText[20]
+    indicatorContainer: {
+      position: 'absolute',
+      bottom: getResponsiveValue(16, 8, isDesktop, isTablet),
+      right: getResponsiveValue(16, 8, isDesktop, isTablet),
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      borderRadius: 40,
+      width: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 40
+    },
+    countText: {
+      color: '#FFF',
+      fontSize: 14,
+      fontWeight: 'bold'
+    },
+    header: {
+      flexBasis: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet)
+    },
+    image: {
+      width: '100%',
+      height: '100%'
+    },
+    titleText: {
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+    },
+    dateEarnedContainer: {
+      alignItems: 'flex-start',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 20
+    }
   });
 };
-var BadgeTile$1 = BadgeTileInner$1;
-BadgeTile$1.Image = BadgeTileImage;
-BadgeTile$1.Title = BadgeTileTitle$1;
-BadgeTile$1.Body = BadgeTileBody;
-BadgeTile$1.Chevron = BadgeTileChevron;
-var styles$c = StyleSheet$1.create({
-  contentContainer: {
-    flexDirection: 'column',
-    height: '100%'
-  },
-  textContainer: createResponsiveStyle({
-    paddingHorizontal: [8, 8, 12],
-    flex: 1
-  }),
-  imageContainer: createResponsiveStyle({
-    width: '100%',
-    aspectRatio: 2 / 1,
-    marginBottom: [8, 8, 12],
-    position: 'relative',
-    overflow: 'hidden'
-  }),
-  row: createResponsiveStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: [4, 4, 8]
-  }),
-  lockOverlay: {
-    backgroundColor: 'rgba(0,0,0,0.6)',
-    position: 'absolute',
-    zIndex: 999,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%'
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  }
-});
 
 var BadgeTileInner = function (_a) {
   var tile = _a.tile;
+  var styles = useBadgeTileStyles();
   if (!tile) return null;
-  return /*#__PURE__*/React.createElement(BaseTile, {
+  return /*#__PURE__*/React$1.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.container
-  }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Column, {
+  }, /*#__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.createElement(View$2, null, /*#__PURE__*/React.createElement(BadgeTile.Title, null), /*#__PURE__*/React.createElement(BadgeTile.Description, null)), /*#__PURE__*/React.createElement(BadgeTile.DateEarned, null))));
+  }, /*#__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,
@@ -19468,18 +19394,19 @@ var BadgeTileMedia = function (_a) {
     emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
   var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
   if (!displayUrl) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.header
-  }, /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.header
+  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: displayUrl
     },
-    style: styles$b.image,
+    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,
@@ -19487,9 +19414,9 @@ var BadgeTileTitle = function () {
     emptyBadgeMessage = configuration.emptyBadgeMessage;
   var displayText = count === 0 ? emptyBadgeMessage : name;
   if (!displayText) return null;
-  return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
     variant: "title",
-    style: styles$b.titleText,
+    style: styles.titleText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
   }, displayText));
@@ -19500,16 +19427,14 @@ var BadgeTileDescription = function () {
   var count = configuration.count,
     description = configuration.description;
   if (count === 0 || !description) return null;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.descriptionContainer
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(Text, {
     variant: "body",
-    style: styles$b.descriptionText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
-  }, description));
+  }, description);
 };
 var BadgeTileDateEarned = function () {
+  var styles = useBadgeTileStyles();
   var tile = useTileContext();
   var configuration = tile.configuration;
   var type = configuration.type,
@@ -19519,27 +19444,28 @@ var BadgeTileDateEarned = function () {
     badgeNotEarnedMessage = configuration.badgeNotEarnedMessage;
   var theme = useWllSdk().theme;
   var backgroundColor = getStateColor(theme.alphaDerivedPrimary[20], type, count);
-  var containerStyle = [styles$b.dateEarnedContainer, {
+  var containerStyle = [styles.dateEarnedContainer, {
     backgroundColor: backgroundColor
   }];
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
   }
   if (count === 0) {
-    return /*#__PURE__*/React.createElement(View$2, {
+    return /*#__PURE__*/React$1.createElement(View$2, {
       style: containerStyle
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React$1.createElement(Text, {
       variant: "label"
     }, badgeNotEarnedMessage));
   }
   var formattedDate = new Date(createdAt).toLocaleDateString();
-  return /*#__PURE__*/React.createElement(View$2, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
     style: containerStyle
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     variant: "label"
   }, "".concat(awardedDatePrefix, " ").concat(formattedDate)));
 };
 var BadgeTileStatus = function () {
+  var styles = useBadgeTileStyles();
   var tile = useTileContext();
   var configuration = tile.configuration;
   var count = configuration.count,
@@ -19547,13 +19473,13 @@ var BadgeTileStatus = function () {
   if (type !== exports.BadgeTileType.Specific || count === 1) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.indicatorContainer
-  }, count === 0 ? /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.indicatorContainer
+  }, count === 0 ? /*#__PURE__*/React$1.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: 20
-  }) : /*#__PURE__*/React.createElement(Text, {
-    style: styles$b.countText
+  }) : /*#__PURE__*/React$1.createElement(Text, {
+    style: styles.countText
   }, count, "x"));
 };
 var BadgeTile = BadgeTileInner;
@@ -19562,91 +19488,84 @@ BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
-var styles$b = StyleSheet$1.create({
-  container: {
-    flex: 1
-  },
-  indicatorContainer: createResponsiveStyle({
-    position: 'absolute',
-    bottom: [8, 8, 16],
-    right: [8, 8, 16],
-    backgroundColor: 'rgba(0,0,0,0.6)',
-    borderRadius: 40,
-    width: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 40
-  }),
-  countText: {
-    color: '#FFF',
-    fontSize: 14,
-    fontWeight: 'bold'
-  },
-  header: createResponsiveStyle({
-    flexBasis: '50%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    marginBottom: [8, 8, 16]
-  }),
-  image: createResponsiveStyle({
-    width: '100%',
-    height: '100%'
-  }),
-  titleText: createResponsiveStyle({
-    marginBottom: [4, 4, 8]
-  }),
-  descriptionContainer: {},
-  descriptionText: {},
-  dateEarnedContainer: {
-    alignItems: 'flex-start',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 20
-  }
-});
+
+var useBannerTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    slideContent: {
+      flex: 1
+    },
+    mediaContainer: {
+      width: '30%',
+      aspectRatio: 1,
+      position: 'relative',
+      overflow: 'hidden',
+      marginRight: getResponsiveValue(24, 8, isDesktop, isTablet),
+      height: 320
+    },
+    media: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    },
+    title: {
+      fontSize: getResponsiveValue(32, 14, isDesktop, isTablet),
+      marginBottom: getResponsiveValue(12, 4, isDesktop, isTablet),
+      fontWeight: '700'
+    },
+    description: {
+      fontSize: getResponsiveValue(18, 10, isDesktop, isTablet),
+      marginBottom: getResponsiveValue(32, 12, isDesktop, isTablet),
+      color: theme.derivedSurfaceText[20]
+    }
+  });
+};
 
 var BannerTile = function (_a) {
   var tile = _a.tile;
+  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$a.slideContent
+    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 BannerTileMedia = function () {
+  var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$a.mediaContainer
+    style: styles.mediaContainer
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
-    style: styles$a.media
+    style: styles.media
   }));
 };
 var BannerTileTitle = function () {
+  var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
   var title = configuration.title;
   if (!title) return null;
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React__namespace.createElement(Text, {
-      variant: "title",
-      style: styles$a.title
-    }, title)
-  );
+  return /*#__PURE__*/React__namespace.createElement(Text, {
+    variant: "title",
+    style: styles.title
+  }, title);
 };
 var BannerTileDescription = function () {
+  var styles = useBannerTileStyles();
   var configuration = useBannerContext().configuration;
-  var theme = useWllSdk().theme;
   var description = configuration.description;
+  var theme = useWllSdk().theme;
   if (!description) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles$a.description, {
+    style: [styles.description, {
       color: theme.derivedSurfaceText[20]
     }]
   }, description);
@@ -19665,48 +19584,27 @@ var BannerTileCTA = function () {
     onPress: handlePress
   });
 };
-var styles$a = StyleSheet$1.create({
-  slide: createResponsiveStyle({
-    width: '100%',
-    maxWidth: 1080,
-    borderRadius: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    overflow: 'hidden'
-  }),
-  slideContent: createResponsiveStyle({
-    flex: 1
-  }),
-  mediaContainer: createResponsiveStyle({
-    width: '30%',
-    aspectRatio: 1,
-    position: 'relative',
-    overflow: 'hidden',
-    marginRight: [8, 8, 24],
-    height: 320
-  }),
-  media: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover'
-  },
-  title: createResponsiveStyle({
-    fontSize: [14, 14, 32],
-    marginBottom: [4, 4, 12],
-    fontWeight: '700'
-  }),
-  description: createResponsiveStyle({
-    fontSize: [10, 10, 18],
-    marginBottom: [12, 12, 32]
-  })
-});
 BannerTile.Media = BannerTileMedia;
 BannerTile.Title = BannerTileTitle;
 BannerTile.Description = BannerTileDescription;
 BannerTile.CTA = BannerTileCTA;
 
+var useContentTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    content: {
+      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
+      flex: 1,
+      justifyContent: 'center'
+    },
+    media: {
+      width: '100%'
+    }
+  });
+};
+
 var ContentTileInner = function (_a) {
   var tile = _a.tile;
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
@@ -19718,32 +19616,27 @@ var ContentTileRoot = function (_a) {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Root, null, children);
 };
 var ContentTileMedia = function () {
+  var styles = useContentTileStyles();
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Media, {
-    style: styles$9.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, {
-    style: styles$9.content
+    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));
 };
 var ContentTileBody = function () {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Body, null);
 };
-var styles$9 = StyleSheet$1.create({
-  content: createResponsiveStyle({
-    paddingHorizontal: [8, 8, 12],
-    flex: 1,
-    justifyContent: 'center'
-  }),
-  media: createResponsiveStyle({
-    width: '100%'
-  })
-});
 var ContentTile = ContentTileInner;
 ContentTile.Root = ContentTileRoot;
 ContentTile.Media = ContentTileMedia;
@@ -19773,71 +19666,159 @@ exports.SectionType = void 0;
   SectionType["Banner"] = "BANNER";
 })(exports.SectionType || (exports.SectionType = {}));
 
-var SectionHeader = function (_a) {
-  var title = _a.title,
-    description = _a.description;
+var useSectionHeaderStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
   var theme = useWllSdk().theme;
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
-  if (!title && !description) {
-    return null;
-  }
-  var dynamicStyles = StyleSheet$1.create({
+  return StyleSheet$1.create({
     sectionHeader: {
       marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet)
     },
     sectionTitle: {
       fontSize: getResponsiveValue(32, 18, isDesktop, isTablet),
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
+      fontWeight: '700',
+      color: theme.text
     },
     sectionDescription: {
-      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet)
+      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
+      color: theme.alphaDerivedText[80]
     }
   });
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: dynamicStyles.sectionHeader
-  }, title && /*#__PURE__*/React.createElement(Text, {
-    style: [dynamicStyles.sectionTitle, {
+};
+
+var SectionHeader = function (_a) {
+  var title = _a.title,
+    description = _a.description;
+  var styles = useSectionHeaderStyles();
+  var theme = useWllSdk().theme;
+  if (!title) {
+    return null;
+  }
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.sectionHeader
+  }, title && /*#__PURE__*/React$1.createElement(Text, {
+    style: [styles.sectionTitle, {
       fontWeight: '700',
       color: theme.text
     }]
-  }, title), description && /*#__PURE__*/React.createElement(Text, {
-    style: [dynamicStyles.sectionDescription, {
+  }, title), description && /*#__PURE__*/React$1.createElement(Text, {
+    style: [styles.sectionDescription, {
       color: theme.alphaDerivedText[80]
     }]
   }, description));
 };
 
+var useCarouselStyles = function (buttonSize, slideWidth) {
+  if (buttonSize === void 0) {
+    buttonSize = 42;
+  }
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      flex: 1,
+      maxWidth: MAX_WIDTH
+    },
+    sectionTitle: {
+      fontSize: 31,
+      marginBottom: 10
+    },
+    sectionDescription: {
+      marginBottom: 21
+    },
+    title: {
+      marginBottom: 10
+    },
+    description: {
+      marginBottom: 20
+    },
+    carouselContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    carouselContent: {
+      overflow: 'hidden',
+      width: slideWidth
+    },
+    navButton: {
+      position: 'absolute',
+      top: '50%',
+      transform: [{
+        translateY: -buttonSize / 2
+      }],
+      width: buttonSize,
+      height: buttonSize,
+      borderRadius: buttonSize / 2,
+      backgroundColor: theme.background,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1
+    },
+    navButtonLeft: {
+      left: -buttonSize / 2
+    },
+    navButtonRight: {
+      right: -buttonSize / 2,
+      backgroundColor: theme.surface
+    },
+    slideContainer: {
+      width: slideWidth
+    },
+    indicators: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: getResponsiveValue(24, 12, isDesktop, isTablet)
+    },
+    indicator: {
+      width: 8,
+      height: 8,
+      borderRadius: 8,
+      marginHorizontal: 4,
+      backgroundColor: theme.derivedBackground
+    },
+    activeIndicator: {
+      backgroundColor: theme.primary
+    }
+  });
+};
+
 var Carousel = function (_a) {
   var section = _a.section;
+  var styles = useCarouselStyles(BUTTON_SIZE, SLIDE_WIDTH);
+  var animatedIndex = React$1.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var scrollViewRef = React.useRef(null);
-  var _b = React.useState(0),
-    currentIndex = _b[0],
-    setCurrentIndex = _b[1];
-  var slideWidth = 1080;
+  var _b = useResponsive(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
+  var scrollViewRef = React$1.useRef(null);
+  var _c = React$1.useState(0),
+    currentIndex = _c[0],
+    setCurrentIndex = _c[1];
   var bannerTiles = section.tiles.filter(function (tile) {
     return tile.type === exports.TileType.Banner;
   });
   var sortedTiles = sortByPriority(bannerTiles);
-  var animatedIndex = React.useRef(new Animated$1.Value(0)).current;
-  var handleScroll = React.useCallback(function (event) {
+  var handleScroll = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = contentOffsetX / slideWidth;
+    var newIndex = contentOffsetX / SLIDE_WIDTH;
     animatedIndex.setValue(newIndex);
-  }, [slideWidth, animatedIndex]);
-  var handleScrollEnd = React.useCallback(function (event) {
+  }, [SLIDE_WIDTH, animatedIndex]);
+  var handleScrollEnd = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = Math.round(contentOffsetX / slideWidth);
+    var newIndex = Math.round(contentOffsetX / SLIDE_WIDTH);
     setCurrentIndex(newIndex);
-  }, [slideWidth]);
+  }, [SLIDE_WIDTH]);
   var handlePrev = function () {
     var _a;
     var newIndex = Math.max(0, currentIndex - 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * slideWidth,
+      x: newIndex * SLIDE_WIDTH,
       animated: true
     });
   };
@@ -19846,28 +19827,35 @@ var Carousel = function (_a) {
     var newIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * slideWidth,
+      x: newIndex * SLIDE_WIDTH,
       animated: true
     });
   };
   var displayControls = sortedTiles.length > 1;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionHeader, {
+  var dynamicStyles = StyleSheet$1.create({
+    indicators: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: getResponsiveValue(24, 12, isDesktop, isTablet)
+    }
+  });
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(SectionHeader, {
     title: section.title,
     description: section.description
-  }), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$8.container
-  }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$8.carouselContainer
-  }, displayControls && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
-    style: [styles$8.navButton, styles$8.navButtonLeft, {
+  }), /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.container
+  }, /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.carouselContainer
+  }, displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+    style: [styles.navButton, styles.navButtonLeft, {
       backgroundColor: theme.background
     }],
     onPress: handlePrev
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React$1.createElement(Icon, {
     name: "ArrowLeft",
     size: 20,
     color: theme.primary
-  })), /*#__PURE__*/React.createElement(ScrollView$2, {
+  })), /*#__PURE__*/React$1.createElement(ScrollView$2, {
     ref: scrollViewRef,
     horizontal: true,
     pagingEnabled: true,
@@ -19875,44 +19863,44 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles$8.carouselContent, {
-      width: slideWidth
+    style: [styles.carouselContent, {
+      width: SLIDE_WIDTH
     }],
     contentContainerStyle: {
-      width: slideWidth * sortedTiles.length
+      width: SLIDE_WIDTH * sortedTiles.length
     },
     decelerationRate: "fast",
-    snapToInterval: slideWidth,
+    snapToInterval: SLIDE_WIDTH,
     snapToAlignment: "start"
   }, sortedTiles.map(function (tile, index) {
-    return /*#__PURE__*/React.createElement(View$2, {
+    return /*#__PURE__*/React$1.createElement(View$2, {
       key: index,
       style: [{
-        width: slideWidth
+        width: SLIDE_WIDTH
       }]
-    }, /*#__PURE__*/React.createElement(BannerTile, {
+    }, /*#__PURE__*/React$1.createElement(BannerTile, {
       tile: tile
     }));
-  })), displayControls && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
-    style: [styles$8.navButton, styles$8.navButtonRight, {
+  })), displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+    style: [styles.navButton, styles.navButtonRight, {
       backgroundColor: theme.surface
     }],
     onPress: handleNext
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React$1.createElement(Icon, {
     name: "ArrowRight",
     size: 20,
     color: theme.primary
-  }))), displayControls && /*#__PURE__*/React.createElement(View$2, {
-    style: styles$8.indicators
+  }))), displayControls && /*#__PURE__*/React$1.createElement(View$2, {
+    style: dynamicStyles.indicators
   }, sortedTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
       inputRange: [index - 1, index, index + 1],
       outputRange: [8, 30, 8],
       extrapolate: 'clamp'
     });
-    return /*#__PURE__*/React.createElement(Animated$1.View, {
+    return /*#__PURE__*/React$1.createElement(Animated$1.View, {
       key: index,
-      style: [styles$8.indicator, {
+      style: [styles.indicator, {
         backgroundColor: theme.derivedBackground,
         width: width
       }, index === currentIndex && {
@@ -19921,74 +19909,6 @@ var Carousel = function (_a) {
     });
   }))));
 };
-var buttonSize = 42;
-var styles$8 = StyleSheet$1.create({
-  container: {
-    width: '100%',
-    maxWidth: 1080,
-    alignSelf: 'center',
-    position: 'relative'
-  },
-  sectionTitle: {
-    fontSize: 31,
-    marginBottom: 10
-  },
-  sectionDescription: {
-    marginBottom: 21
-  },
-  title: {
-    marginBottom: 10
-  },
-  description: {
-    marginBottom: 20
-  },
-  carouselContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  carouselContent: {
-    overflow: 'hidden'
-  },
-  navButton: {
-    padding: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 9999,
-    width: buttonSize,
-    height: buttonSize,
-    position: 'absolute',
-    zIndex: 100,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4
-  },
-  navButtonLeft: {
-    left: -buttonSize / 2
-  },
-  navButtonRight: {
-    right: -buttonSize / 2
-  },
-  indicators: createResponsiveStyle({
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: [12, 12, 24]
-  }),
-  indicator: {
-    width: 8,
-    height: 8,
-    borderRadius: 8,
-    marginHorizontal: 4
-  },
-  activeIndicator: {
-    width: 24,
-    borderRadius: 8
-  }
-});
 
 var Grid = function (_a) {
   var section = _a.section;
@@ -20069,10 +19989,10 @@ var Grid = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$7.grid
+    style: styles$3.grid
   }, renderGrid()));
 };
-var styles$7 = StyleSheet$1.create({
+var styles$3 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -20099,15 +20019,15 @@ var ProgressIndicator = function (_a) {
     progressVariant = 'accent';
   }
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$6.container
+    style: styles$2.container
   }, /*#__PURE__*/React__namespace.createElement(ProgressBar, {
     percentage: percentage,
     variant: progressVariant,
     height: height
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$6.circleContainer]
+    style: [styles$2.circleContainer]
   }, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$6.circle, {
+    style: [styles$2.circle, {
       borderColor: theme.derivedSurface[20],
       backgroundColor: isComplete ? theme.primary : theme.surface,
       borderWidth: isComplete ? 0 : 4
@@ -20118,7 +20038,7 @@ var ProgressIndicator = function (_a) {
     color: theme.primaryText
   }))));
 };
-var styles$6 = StyleSheet$1.create({
+var styles$2 = StyleSheet$1.create({
   container: {
     width: '100%',
     flexDirection: 'row',
@@ -20139,17 +20059,32 @@ var styles$6 = StyleSheet$1.create({
   }
 });
 
-var SectionContext = /*#__PURE__*/React.createContext(undefined);
+var useSectionStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    section: {
+      width: '100%',
+      maxWidth: MAX_WIDTH,
+      marginHorizontal: 'auto',
+      marginBottom: getResponsiveValue(60, 40, isDesktop, isTablet)
+    }
+  });
+};
+
+var SectionContext = /*#__PURE__*/React$1.createContext(undefined);
 var Section = function (_a) {
   var section = _a.section;
+  var styles = useSectionStyles();
   var renderSectionContent = function () {
     switch (section.type) {
       case exports.SectionType.Banner:
-        return /*#__PURE__*/React.createElement(Carousel, {
+        return /*#__PURE__*/React$1.createElement(Carousel, {
           section: section
         });
       case exports.SectionType.Grid:
-        return /*#__PURE__*/React.createElement(Grid, {
+        return /*#__PURE__*/React$1.createElement(Grid, {
           section: section
         });
       default:
@@ -20157,33 +20092,25 @@ var Section = function (_a) {
         return null;
     }
   };
-  return /*#__PURE__*/React.createElement(SectionContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(SectionContext.Provider, {
     value: {
       sectionData: section
     }
-  }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$5.section
+  }, /*#__PURE__*/React$1.createElement(View$2, {
+    style: styles.section
   }, renderSectionContent()));
 };
-var styles$5 = StyleSheet$1.create({
-  section: createResponsiveStyle({
-    width: '100%',
-    maxWidth: 1080,
-    marginHorizontal: 'auto',
-    marginBottom: [40, 40, 60]
-  })
-});
 
 var Group = function (_a) {
   var id = _a.id;
   var getGroupByID = useWllSdk().getGroupByID;
-  var _b = React.useState(null),
+  var _b = React$1.useState(null),
     groupData = _b[0],
     setGroupData = _b[1];
-  var _c = React.useState(true),
+  var _c = React$1.useState(true),
     loading = _c[0],
     setLoading = _c[1];
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     var fetchGroup = function () {
       return __awaiter(void 0, void 0, void 0, function () {
         var response;
@@ -20204,29 +20131,29 @@ var Group = function (_a) {
     fetchGroup();
   }, [id, getGroupByID]);
   if (loading) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: styles$4.emptyConatiner
-    }, /*#__PURE__*/React.createElement(Skeleton, null));
+    return /*#__PURE__*/React$1.createElement(View$2, {
+      style: styles$1.emptyConatiner
+    }, /*#__PURE__*/React$1.createElement(Skeleton, null));
   }
   if (!groupData) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: styles$4.emptyConatiner
-    }, /*#__PURE__*/React.createElement(Text$3, null, "No group data available"));
+    return /*#__PURE__*/React$1.createElement(View$2, {
+      style: styles$1.emptyConatiner
+    }, /*#__PURE__*/React$1.createElement(Text$3, null, "No group data available"));
   }
   if (!groupData.sections || groupData.sections.length === 0) {
-    return /*#__PURE__*/React.createElement(View$2, {
-      style: styles$4.emptyConatiner
-    }, /*#__PURE__*/React.createElement(Text$3, null, "No sections available"));
+    return /*#__PURE__*/React$1.createElement(View$2, {
+      style: styles$1.emptyConatiner
+    }, /*#__PURE__*/React$1.createElement(Text$3, null, "No sections available"));
   }
   var sortedSections = sortByPriority(groupData.sections);
-  return /*#__PURE__*/React.createElement(View$2, null, sortedSections.map(function (section) {
-    return /*#__PURE__*/React.createElement(Section, {
+  return /*#__PURE__*/React$1.createElement(View$2, null, sortedSections.map(function (section) {
+    return /*#__PURE__*/React$1.createElement(Section, {
       key: section.id,
       section: section
     });
   }));
 };
-var styles$4 = StyleSheet$1.create({
+var styles$1 = StyleSheet$1.create({
   emptyConatiner: {
     flex: 1,
     justifyContent: 'center',
@@ -20234,22 +20161,54 @@ var styles$4 = StyleSheet$1.create({
   }
 });
 
-var PointsTile = function (_a) {
-  var tile = _a.tile;
-  var isFullSize = useTileSize(tile).isFullSize;
-  var styles = StyleSheet$1.create({
-    container: createResponsiveStyle({
-      paddingHorizontal: [8, 8, 12],
+var usePointsTileStyles = function (isFullSize) {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    container: {
+      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
       width: '100%',
       flexDirection: isFullSize ? 'row' : 'row-reverse',
       alignItems: isFullSize ? 'flex-start' : 'center',
       justifyContent: 'space-between'
-    }),
+    },
     contentContainer: {
       flexDirection: 'column',
       width: isFullSize ? '100%' : 'auto'
+    },
+    suffix: {
+      fontSize: getResponsiveValue(18, 14, isDesktop, isTablet),
+      color: theme.primary
+    },
+    pointsWithSuffix: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    imageContainer: {
+      width: isFullSize ? '100%' : 57,
+      height: isFullSize ? '50%' : 57,
+      marginBottom: isFullSize ? getResponsiveValue(12, 8, isDesktop, isTablet) : 0,
+      backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      resizeMode: 'contain'
     }
   });
+};
+
+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, {
@@ -20270,7 +20229,7 @@ var PointsTileTitle = function () {
   }, title);
 };
 var PointsTilePoints = function () {
-  var theme = useWllSdk().theme;
+  var styles = usePointsTileStyles();
   var configuration = useTileContext().configuration;
   var _a = configuration,
     multiplier = _a.multiplier,
@@ -20278,17 +20237,6 @@ var PointsTilePoints = function () {
     suffix = _a.suffix,
     points = _a.points;
   var calculatedPoints = points !== undefined ? points * (multiplier !== null && multiplier !== void 0 ? multiplier : 1) : null;
-  var styles = StyleSheet$1.create({
-    suffix: createResponsiveStyle({
-      fontSize: [14, 14, 18],
-      color: theme.primary
-    }),
-    pointsWithSuffix: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  });
   if (calculatedPoints === null) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "caption"
@@ -20300,26 +20248,9 @@ var PointsTilePoints = function () {
 };
 var PointsTileImage = function (_a) {
   var isFullSize = _a.isFullSize;
-  var theme = useWllSdk().theme;
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
-  var styles = StyleSheet$1.create({
-    imageContainer: createResponsiveStyle({
-      width: isFullSize ? '100%' : 57,
-      height: isFullSize ? '50%' : 57,
-      marginBottom: isFullSize ? [8, 8, 12] : 0,
-      backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
-      justifyContent: 'center',
-      alignItems: 'center',
-      overflow: 'hidden'
-    }),
-    image: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      resizeMode: 'contain'
-    }
-  });
+  var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
     style: styles.imageContainer
@@ -20335,6 +20266,37 @@ PointsTile.Title = PointsTileTitle;
 PointsTile.Points = PointsTilePoints;
 PointsTile.Image = PointsTileImage;
 
+var useRewardCategoryTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    header: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      zIndex: 10,
+      height: 35,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.primary
+    },
+    headerText: {
+      fontSize: getResponsiveValue(16, 12, isDesktop, isTablet),
+      paddingHorizontal: getResponsiveValue(40, 20, isDesktop, isTablet),
+      color: theme.primaryText
+    },
+    background: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    }
+  });
+};
+
 var RewardCategoryTile = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
@@ -20343,27 +20305,19 @@ var RewardCategoryTile = function (_a) {
   }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Background, null));
 };
 var RewardCategoryHeader = function () {
+  var styles = useRewardCategoryTileStyles();
   var theme = useWllSdk().theme;
   var configuration = useTileContext().configuration;
   var _a = configuration,
     showName = _a.showName,
     name = _a.name;
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
   if (!showName || !name) return null;
-  var dynamicStyles = StyleSheet$1.create({
-    headerText: {
-      fontSize: getResponsiveValue(16, 12, isDesktop, isTablet),
-      paddingHorizontal: getResponsiveValue(40, 20, isDesktop, isTablet)
-    }
-  });
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$3.header, {
+    style: [styles.header, {
       backgroundColor: theme.primary
     }]
   }, /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [dynamicStyles.headerText, {
+    style: [styles.headerText, {
       color: theme.primaryText
     }],
     ellipsizeMode: "tail",
@@ -20371,6 +20325,7 @@ var RewardCategoryHeader = function () {
   }, name));
 };
 var RewardCategoryBackground = function () {
+  var styles = useRewardCategoryTileStyles();
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
@@ -20378,30 +20333,50 @@ var RewardCategoryBackground = function () {
     source: {
       uri: artworkUrl
     },
-    style: styles$3.background
+    style: styles.background
   });
 };
-var styles$3 = StyleSheet$1.create({
-  header: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 10,
-    height: 35,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  background: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover'
-  }
-});
 RewardCategoryTile.Header = RewardCategoryHeader;
 RewardCategoryTile.Background = RewardCategoryBackground;
 
+var useRewardTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    imageContainer: {
+      width: '100%',
+      flexBasis: '50%',
+      marginBottom: getResponsiveValue(12, 8, isDesktop, isTablet)
+    },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover'
+    },
+    content: {
+      paddingHorizontal: getResponsiveValue(12, 8, isDesktop, isTablet),
+      flex: 1
+    },
+    footer: {
+      marginTop: 8
+    },
+    pointsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    suffix: {
+      fontSize: getResponsiveValue(18, 14, isDesktop, isTablet)
+    }
+  });
+};
+
 var RewardTile = function (_a) {
   var tile = _a.tile;
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
@@ -20409,16 +20384,17 @@ var RewardTile = function (_a) {
   }, /*#__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 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$2.imageContainer
+    style: styles.imageContainer
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: reward.pictureUrl
     },
-    style: styles$2.image
+    style: styles.image
   }));
 };
 var RewardTileTitle = function () {
@@ -20440,6 +20416,7 @@ var RewardTileDescription = function () {
   }, reward.summary);
 };
 var RewardTilePoints = function () {
+  var styles = useRewardTileStyles();
   var configuration = useTileContext().configuration;
   var theme = useWllSdk().theme;
   var reward = configuration;
@@ -20449,19 +20426,20 @@ var RewardTilePoints = function () {
   }
   return /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "caption",
-    style: styles$2.footer
+    style: styles.footer
   }, reward.pointsPrefix, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$2.pointsContainer
+    style: styles.pointsContainer
   }, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles$2.suffix, {
+    style: [styles.suffix, {
       color: theme.primary
     }]
   }, reward.pointsSuffix)));
 };
 var RewardTileContent = function (_a) {
   var children = _a.children;
+  var styles = useRewardTileStyles();
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$2.content
+    style: styles.content
   }, children);
 };
 var RewardTileChevron = function () {
@@ -20471,38 +20449,6 @@ var RewardTileChevron = function () {
     color: theme.derivedSurfaceText[20]
   });
 };
-var styles$2 = StyleSheet$1.create({
-  imageContainer: createResponsiveStyle({
-    width: '100%',
-    flexBasis: '50%',
-    marginBottom: [8, 8, 12]
-  }),
-  image: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover'
-  },
-  content: createResponsiveStyle({
-    paddingHorizontal: [8, 8, 12],
-    flex: 1
-  }),
-  footer: {
-    marginTop: 8
-  },
-  pointsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  suffix: createResponsiveStyle({
-    fontSize: [14, 14, 18]
-  })
-});
 RewardTile.Media = RewardTileMedia;
 RewardTile.Title = RewardTileTitle;
 RewardTile.Description = RewardTileDescription;
@@ -20510,182 +20456,49 @@ RewardTile.Points = RewardTilePoints;
 RewardTile.Chevron = RewardTileChevron;
 RewardTile.Content = RewardTileContent;
 
-// @ts-nocheck
-// TypeScript will now ignore all errors in this file Tile Deprecated
-var TierTile$1 = function (_a) {
-  var tile = _a.tile;
-  var isFullSize = useTileSize(tile).isFullSize;
-  var configuration = tile.configuration;
-  var styles = StyleSheet$1.create({
-    container: createResponsiveStyle({
-      paddingHorizontal: [8, 8, 12],
+var useTierTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    header: {
+      flexBasis: '50%',
       width: '100%',
-      flexDirection: isFullSize ? 'column' : 'row-reverse',
-      alignItems: isFullSize ? 'flex-start' : 'center',
-      justifyContent: 'space-between',
-      marginTop: isFullSize ? 20 : null
-    }),
-    contentContainer: {
-      flexDirection: 'column',
-      width: isFullSize ? '100%' : 'auto'
+      overflow: 'hidden',
+      marginBottom: getResponsiveValue(12, 8, isDesktop, isTablet)
     },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '100%'
-    }
-  });
-  var renderTileContent = function () {
-    switch (configuration.type) {
-      case exports.TierTileType.currentTier:
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(TierTile$1.Image, {
-          isFullSize: isFullSize
-        }), /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: styles.container
-        }, /*#__PURE__*/React__namespace.createElement(Text, {
-          variant: "caption"
-        }, "Current Tier"), /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: styles.row
-        }, /*#__PURE__*/React__namespace.createElement(TierTile$1.Name, null), /*#__PURE__*/React__namespace.createElement(TierTile$1.Count, null))));
-      case exports.TierTileType.specificTier:
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(TierTile$1.Progress, null), /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: styles.container
-        }, /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: styles.row
-        }, /*#__PURE__*/React__namespace.createElement(View$2, null, /*#__PURE__*/React__namespace.createElement(Text, {
-          variant: "body"
-        }, "Current Tier"), /*#__PURE__*/React__namespace.createElement(TierTile$1.Name, null)), /*#__PURE__*/React__namespace.createElement(View$2, null, /*#__PURE__*/React__namespace.createElement(TierTile$1.NextName, null)))));
-      case exports.TierTileType.currentTargetNext:
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(TierTile$1.Image, {
-          isFullSize: isFullSize
-        }), /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: {
-            padding: 12
-          }
-        }, /*#__PURE__*/React__namespace.createElement(TierTile$1.Progress, null), /*#__PURE__*/React__namespace.createElement(View$2, {
-          style: styles.container
-        }, /*#__PURE__*/React__namespace.createElement(TierTile$1.Count, null), /*#__PURE__*/React__namespace.createElement(TierTile$1.Description, null))));
-      default:
-        return null;
-    }
-  };
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
-    tile: tile
-  }, renderTileContent());
-};
-var TierTileImage = function (_a) {
-  var isFullSize = _a.isFullSize;
-  var theme = useWllSdk().theme;
-  var configuration = useTileContext().configuration;
-  var tier = configuration.tier;
-  var styles = StyleSheet$1.create({
-    imageContainer: createResponsiveStyle({
-      width: isFullSize ? '100%' : 57,
-      height: isFullSize ? '100%' : 57,
-      marginBottom: isFullSize ? [8, 8, 12] : 0,
-      backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexBasis: isFullSize ? '50%' : null
-    }),
-    image: {
-      width: '80%',
-      height: '80%',
-      resizeMode: 'contain'
-    }
-  });
-  if (!tier) return null;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles.imageContainer
-  }, tier.artworkUrl && /*#__PURE__*/React__namespace.createElement(Image$2, {
-    source: {
-      uri: tier.artworkUrl
+    title: {
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
     },
-    style: styles.image
-  }));
-};
-var Name = function () {
-  var configuration = useTileContext().configuration;
-  var tier = configuration.tier;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "title"
-  }, tier === null || tier === void 0 ? void 0 : tier.name);
-};
-var NextName = function () {
-  var configuration = useTileContext().configuration;
-  var targetTier = configuration.targetTier;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "title"
-  }, targetTier === null || targetTier === void 0 ? void 0 : targetTier.name);
-};
-var Count = function () {
-  var configuration = useTileContext().configuration;
-  var tier = configuration.tier;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "tier-earned"
-  }, "".concat(tier === null || tier === void 0 ? void 0 : tier.earnedPoints, "/")), /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "tier-requirement"
-  }, tier === null || tier === void 0 ? void 0 : tier.pointsRequirement));
-};
-var NextCount = function () {
-  var configuration = useTileContext().configuration;
-  var targetTier = configuration.targetTier;
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start'
+    smallImageContainer: {
+      width: 48,
+      height: 48,
+      position: 'relative'
+    },
+    smallImage: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover'
     }
-  }, /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "tier-earned"
-  }, "".concat(targetTier === null || targetTier === void 0 ? void 0 : targetTier.earnedPoints, "/")), /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "tier-requirement"
-  }, targetTier === null || targetTier === void 0 ? void 0 : targetTier.pointsRequirement));
-};
-var Progress = function () {
-  var configuration = useTileContext().configuration;
-  var tier = configuration.tier;
-  if (!tier || tier.earnedPoints === undefined || tier.pointsRequirement === undefined) {
-    return null;
-  }
-  return /*#__PURE__*/React__namespace.createElement(ProgressIndicator, {
-    currentPoints: tier.earnedPoints,
-    maxPoints: tier.pointsRequirement,
-    attained: tier.attained
   });
 };
-var Description = function () {
-  var configuration = useTileContext().configuration;
-  var tier = configuration.tier;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
-    variant: "body"
-  }, tier === null || tier === void 0 ? void 0 : tier.description);
-};
-TierTile$1.Name = Name;
-TierTile$1.Count = Count;
-TierTile$1.Image = TierTileImage;
-TierTile$1.Progress = Progress;
-TierTile$1.Description = Description;
-TierTile$1.NextName = NextName;
-TierTile$1.NextCount = NextCount;
-
-// @ts-nocheck
-// TypeScript will now ignore all errors in this file Tile Deprecated
-// Main component decides which variant to render
+
 var TierTileInner = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
   var configuration = tile.configuration;
   var tier = configuration.tier;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  // Determine which variant to show
   if (!tier || Array.isArray(tier)) {
     return /*#__PURE__*/React__namespace.createElement(TierTile.Empty, {
       tile: tile
@@ -20697,9 +20510,9 @@ var TierTileInner = function (_a) {
     tile: tile
   });
 };
-// Full-size tile with artwork
 var TierTileFull = function (_a) {
   var tile = _a.tile;
+  var styles = useTierTileStyles();
   var configuration = tile.configuration;
   var tier = configuration.tier,
     title = configuration.title;
@@ -20710,38 +20523,40 @@ var TierTileFull = function (_a) {
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
     tile: tile
   }, artworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$1.header
+    style: styles.header
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
-    style: styles$1.image,
+    style: styles.image,
     resizeMode: "center"
-  })), /*#__PURE__*/React__namespace.createElement(Column, {
+  })), /*#__PURE__*/React__namespace.createElement(Column$1, {
     align: "stretch",
     justify: artworkUrl ? 'start' : 'center',
     direction: "column"
   }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "eyebrow",
-    style: styles$1.title
+    style: styles.title
   }, title), name && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
-    style: styles$1.title
+    style: styles.title
   }, name), description && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "body"
   }, description))));
 };
-// Half-size tile with small artwork
 var TierTileHalf = function (_a) {
   var tile = _a.tile;
+  var styles = useTierTileStyles();
   var configuration = tile.configuration;
-  var tier = configuration.tier,
-    title = configuration.title;
-  var artworkUrl = tier.artworkUrl,
-    name = tier.name;
+  var _b = configuration,
+    tier = _b.tier,
+    title = _b.title;
+  var _c = tier || {},
+    artworkUrl = _c.artworkUrl,
+    name = _c.name;
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(Column, {
+  }, /*#__PURE__*/React__namespace.createElement(Column$1, {
     align: "center",
     justify: "between",
     direction: "row",
@@ -20750,23 +20565,24 @@ var TierTileHalf = function (_a) {
     }
   }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "eyebrow",
-    style: styles$1.title
+    style: styles.title
   }, title), name && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
-    style: styles$1.title
+    style: styles.title
   }, name)), artworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$1.smallImageContainer
+    style: styles.smallImageContainer
   }, /*#__PURE__*/React__namespace.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
-    style: styles$1.smallImage,
+    style: styles.smallImage,
     resizeMode: "contain"
   }))));
 };
 // Empty state tile
 var TierTileEmpty = function (_a) {
   var tile = _a.tile;
+  var styles = useTierTileStyles();
   var configuration = tile.configuration;
   var title = configuration.title,
     emptyDescription = configuration.emptyDescription,
@@ -20775,7 +20591,7 @@ var TierTileEmpty = function (_a) {
   if (isHalfSize) {
     return /*#__PURE__*/React__namespace.createElement(BaseTile, {
       tile: tile
-    }, /*#__PURE__*/React__namespace.createElement(Column, {
+    }, /*#__PURE__*/React__namespace.createElement(Column$1, {
       align: "center",
       justify: "between",
       direction: "row",
@@ -20788,76 +20604,44 @@ var TierTileEmpty = function (_a) {
       }
     }, title && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "title",
-      style: styles$1.title
+      style: styles.title
     }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "body"
     }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: styles$1.smallImageContainer
+      style: styles.smallImageContainer
     }, /*#__PURE__*/React__namespace.createElement(Image$2, {
       source: {
         uri: emptyArtworkUrl
       },
-      style: styles$1.smallImage,
+      style: styles.smallImage,
       resizeMode: "contain"
     }))));
   }
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
     tile: tile
   }, emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$1.header
+    style: styles.header
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: emptyArtworkUrl
     },
-    style: styles$1.image,
+    style: styles.image,
     resizeMode: "center"
-  })), /*#__PURE__*/React__namespace.createElement(Column, {
+  })), /*#__PURE__*/React__namespace.createElement(Column$1, {
     align: "stretch",
     justify: "center",
     direction: "column"
   }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
-    style: styles$1.title
+    style: styles.title
   }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "body"
   }, emptyDescription))));
 };
 var TierTile = TierTileInner;
-// Assign variant components
 TierTile.Full = TierTileFull;
 TierTile.Half = TierTileHalf;
 TierTile.Empty = TierTileEmpty;
-var styles$1 = StyleSheet$1.create({
-  header: createResponsiveStyle({
-    flexBasis: '50%',
-    width: '100%',
-    overflow: 'hidden',
-    marginBottom: [8, 8, 12]
-  }),
-  title: createResponsiveStyle({
-    marginBottom: [4, 4, 8]
-  }),
-  smallImageContainer: {
-    width: 48,
-    height: 48,
-    position: 'relative'
-  },
-  smallImage: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover'
-  }
-});
 
 var TileContainer = function (_a) {
   var tiles = _a.tiles;
@@ -20911,20 +20695,91 @@ var TileContainer = function (_a) {
 };
 var styles = StyleSheet$1.create({
   container: {
-    flexDirection: 'column',
-    marginBottom: GRID_GAP
+    flexDirection: 'column'
   },
   tileContainer: {
     flex: 1
   }
 });
 
+var Column = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'stretch' : _c,
+    style = _a.style;
+  var _d = useResponsive$1(),
+    isDesktop = _d.isDesktop,
+    isTablet = _d.isTablet;
+  return /*#__PURE__*/React.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)
+    }, style]
+  }, children);
+};
+
+var Row = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'center' : _c,
+    _d = _a.direction,
+    direction = _d === void 0 ? 'row' : _d,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flexDirection: direction,
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align]
+    }, style]
+  }, children);
+};
+
+var Stack = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'stretch' : _c,
+    _d = _a.direction,
+    direction = _d === void 0 ? 'column' : _d,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flexDirection: direction,
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align]
+    }, style]
+  }, children);
+};
+
+var justifyMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly'
+};
+var alignMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  stretch: 'stretch'
+};
+
 var Reward = /** @class */function () {
   function Reward() {}
   return Reward;
 }();
 
-exports.BadgeTile = BadgeTile$1;
 exports.BadgeTileConfig = BadgeTileConfig;
 exports.BadgeTileUpdated = BadgeTile;
 exports.BannerTile = BannerTile;
@@ -20933,7 +20788,8 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
-exports.Content = Column;
+exports.Column = Column;
+exports.Content = Column$1;
 exports.ContentTile = ContentTile;
 exports.ContentTileConfig = ContentTileConfig;
 exports.Grid = Grid;
@@ -20951,12 +20807,13 @@ exports.RewardCategoryTile = RewardCategoryTile;
 exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
 exports.RewardTile = RewardTile;
 exports.RewardTileConfig = RewardTileConfig;
+exports.Row = Row;
 exports.RowHeader = RowHeader;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;
 exports.Skeleton = Skeleton;
+exports.Stack = Stack;
 exports.Text = Text;
-exports.TierTile = TierTile$1;
 exports.TierTileConfig = TierTileConfig;
 exports.TierTileUpdated = TierTile;
 exports.TileContainer = TileContainer;