npm - @wlloyalty/wll-react-sdk - Versions diffs - 1.0.27 → 1.0.29 - Mend

@wlloyalty/wll-react-sdk 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -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$k.textHasAncestor$raw : styles$k.text$raw, numberOfLines === 1 && styles$k.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$k.textMultiLine, props.style, selectable === true && styles$k.selectable, selectable === false && styles$k.notSelectable, onPress && styles$k.pressable];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$w = StyleSheet$1.create({
+var styles$k = 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$j.view$raw, hasTextAncestor && styles$j.inline, props.style];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -7101,7 +7101,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   });
 });
 View$1.displayName = 'View';
-var styles$v = StyleSheet$1.create({
+var styles$j = 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$i.root, !disabled && styles$i.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$u = StyleSheet$1.create({
+var styles$i = 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');
@@ -7443,9 +7443,17 @@ var sizes = {
   borderRadiusLg: 20,
   borderRadiusButton: 9,
   borderRadiusRounded: 9999,
-  sm: 6,
-  md: 10,
-  lg: 16
+  xxxs: 4,
+  xxs: 8,
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32,
+  xxxxl: 40,
+  xxxxxl: 60
 };
 var defaultTheme = {
   background: '#F0F0F0',
@@ -7765,10 +7773,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 +7799,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 +7814,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 +7833,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 +7871,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 +7895,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,48 +7905,63 @@ 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 clamp$1 = function (value, min, max) {
+  return Math.min(Math.max(value, min), max);
 };
-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 lerp = function (start, end, t) {
+  return start + (end - start) * t;
+};
+var getWindowWidth = function () {
+  if (Platform$1.OS === 'web') {
+    return window.innerWidth;
+  }
+  return Dimensions.get('window').width;
 };
 var getResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
-  if (isDesktop) return desktopValue;
-  if (isTablet) return Math.round((desktopValue + mobileValue) / 2); // Tablet gets the middle value
+  var width = getWindowWidth();
+  var tabletValue = (desktopValue + mobileValue) / 2;
+  // Desktop to Tablet scaling
+  if (width >= TABLET_SCREEN_WIDTH) {
+    var t = clamp$1((width - TABLET_SCREEN_WIDTH) / 300, 0, 1); // 300px scaling range
+    return Math.round(lerp(tabletValue, desktopValue, t));
+  }
+  // Tablet to Mobile scaling
+  if (width > SMALL_SCREEN_WIDTH) {
+    var t = clamp$1((width - SMALL_SCREEN_WIDTH) / (TABLET_SCREEN_WIDTH - SMALL_SCREEN_WIDTH), 0, 1);
+    return Math.round(lerp(mobileValue, tabletValue, t));
+  }
   return mobileValue;
 };
+var useResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
+  var _a = React$1.useState(function () {
+      return getResponsiveValue(desktopValue, mobileValue);
+    }),
+    value = _a[0],
+    setValue = _a[1];
+  React$1.useEffect(function () {
+    if (Platform$1.OS !== 'web') return;
+    var handleResize = function () {
+      setValue(getResponsiveValue(desktopValue, mobileValue));
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [desktopValue, mobileValue, isDesktop, isTablet]);
+  return value;
+};
 function createVariantSystem(baseStyle, variantStyles) {
   return function (theme, variant) {
@@ -7993,14 +8016,14 @@ var Button = function (_a) {
     button: {
       justifyContent: 'center',
       alignItems: 'center',
-      paddingHorizontal: getResponsiveValue(24, 12, isDesktop, isTablet),
-      paddingVertical: 12,
+      paddingHorizontal: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet),
+      paddingVertical: theme.sizes.sm,
       alignSelf: 'flex-start'
     },
     text: {
       textAlign: 'center',
       textTransform: 'uppercase',
-      fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.sm, isDesktop, isTablet),
       fontWeight: '700'
     }
   });
@@ -8014,7 +8037,7 @@ var Button = function (_a) {
   }, title));
 };
-var justifyMap = {
+var justifyMap$1 = {
   start: 'flex-start',
   end: 'flex-end',
   center: 'center',
@@ -8022,13 +8045,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 +8061,24 @@ 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 theme = useWllSdk().theme;
+  var _f = useResponsive$1(),
+    isDesktop = _f.isDesktop,
+    isTablet = _f.isTablet;
+  var dynamicStyles = StyleSheet$1.create({
+    column: {
+      flex: 1,
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      justifyContent: justifyMap$1[justify],
+      alignItems: alignMap$1[align],
       flexDirection: direction
-    }, 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 +8138,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$s.container, style]
+    style: [styles$h.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$s.animation, !animating && styles$s.animationPause, !animating && hidesWhenStopped && styles$s.hidesWhenStopped]
+    } : indicatorSizes[size], styles$h.animation, !animating && styles$h.animationPause, !animating && hidesWhenStopped && styles$h.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$s = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8163,7 +8188,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$g.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8172,7 +8197,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$r = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8298,7 +8323,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 +8511,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$q.scrollDisabled, hideScrollbar && styles$q.hideScrollbar]
+    style: [style, !scrollEnabled && styles$f.scrollDisabled, hideScrollbar && styles$f.hideScrollbar]
   }));
 });
 // Chrome doesn't support e.preventDefault in this case; touch-action must be
 // used to disable scrolling.
 // https://developers.google.com/web/updates/2017/01/scrolling-intervention
-var styles$q = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -8601,7 +8626,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 +9153,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$e.stickyHeader, pagingEnabled && styles$e.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$e.contentContainerHorizontal, centerContent && styles$e.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$p.baseHorizontal : styles$p.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$p.pagingEnabledHorizontal : styles$p.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$e.baseHorizontal : styles$e.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$e.pagingEnabledHorizontal : styles$e.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9167,11 +9192,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 +9213,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$p = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -9221,8 +9246,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 +10293,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 +10313,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 +10426,7 @@ class CellRenderer extends React__namespace.Component {
     ItemSeparatorComponent :
     // $FlowFixMe[incompatible-type]
     ItemSeparatorComponent && /*#__PURE__*/React__namespace.createElement(ItemSeparatorComponent, this.state.separatorProps);
-    var cellStyle = inversionStyle ? horizontal ? [styles$o.rowReverse, inversionStyle] : [styles$o.columnReverse, inversionStyle] : horizontal ? [styles$o.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$d.rowReverse, inversionStyle] : [styles$d.columnReverse, inversionStyle] : horizontal ? [styles$d.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10421,7 +10446,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$o = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11601,7 +11626,7 @@ class VirtualizedList extends StateSafePureComponent {
     var _this$props6 = this.props,
       data = _this$props6.data,
       horizontal = _this$props6.horizontal;
-    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$n.horizontallyInverted : styles$n.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$c.horizontallyInverted : styles$c.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11765,7 +11790,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$n.debug
+        style: styles$c.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11882,20 +11907,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlay]
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrame, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameLast, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameVis, {
+      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12036,7 +12061,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$n = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12413,7 +12438,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
             _index = info.index;
           invariant$1(Array.isArray(_item2), 'Expected array of items with numColumns > 1');
           return /*#__PURE__*/React__namespace.createElement(View$2, {
-            style: [styles$m.row, columnWrapperStyle]
+            style: [styles$b.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12539,7 +12564,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$m = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14334,8 +14359,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 +14382,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 +14406,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 +14456,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 +14518,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 +14951,7 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   // Accessibility image allows users to trigger the browser's image context menu
   var hiddenImage = displayImageUri ? createElement$1('img', {
     alt: ariaLabel || '',
-    style: styles$l.accessibilityImage$raw,
+    style: styles$a.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -14998,14 +15023,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$a.root, hasTextAncestor && styles$a.inline, imageSizeStyle, style, styles$a.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$l.image, resizeModeStyles[resizeMode], {
+    style: [styles$a.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15027,7 +15052,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$l = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18053,13 +18078,13 @@ var useStyles = function (theme) {
 var useContainerStyles = function (theme) {
   return {
     sm: {
-      height: theme.sizes.sm
+      height: theme.sizes.xxs
     },
     md: {
-      height: theme.sizes.md
+      height: theme.sizes.xs
     },
     lg: {
-      height: theme.sizes.lg
+      height: theme.sizes.sm
     }
   };
 };
@@ -18131,7 +18156,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
-var styles$k = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -18154,39 +18179,39 @@ 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, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration: 500
-    }).start();
+    requestAnimationFrame(function () {
+      Animated$1.timing(imageAnimated, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300
+      }).start();
+    });
   };
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$k.container, style, {
-      backgroundColor: isDesaturated ? desaturatedColor : baseColor
+  var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
+  return /*#__PURE__*/React$1.createElement(View$2, {
+    style: [styles$9.container, style, {
+      backgroundColor: backgroundColor
     }]
-  }, isDesaturated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
-    source: source,
-    style: [styles$k.imageOverlay, {
-      opacity: imageAnimated,
-      tintColor: desaturatedColor
-    }],
-    onLoad: onImageLoad
-  })), /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
-    source: source,
-    style: [styles$k.imageOverlay, {
-      opacity: 0.1
-    }],
-    onLoad: onImageLoad
-  }))) : /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
+  }, /*#__PURE__*/React$1.createElement(Animated$1.View, {
+    style: [styles$9.imageOverlay, {
+      backgroundColor: backgroundColor,
+      opacity: imageAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0]
+      })
+    }]
+  }), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$k.imageOverlay, {
+    style: [styles$9.imageOverlay, __assign({
       opacity: imageAnimated
-    }],
+    }, isDesaturated && {
+      filter: "saturate(".concat(0 * 100, "%)")
+    })],
     onLoad: onImageLoad
   })));
 };
@@ -18195,18 +18220,22 @@ 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 theme = useWllSdk().theme;
+  var dynamicStyles = StyleSheet$1.create({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, 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,
@@ -18225,51 +18254,38 @@ var Text = function (_a) {
     switch (variant) {
       case 'eyebrow':
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(14, 12, isDesktop, isTablet),
-          marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
+          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
         });
       case 'title':
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
           fontWeight: 'bold'
         });
       case 'body':
         return {
           color: theme.derivedSurfaceText[20],
-          fontSize: getResponsiveValue(14, 10, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.xs, isDesktop, isTablet)
         };
       case 'caption':
         return __assign(__assign({}, baseStyle), {
           fontWeight: 'bold',
-          fontSize: getResponsiveValue(24, 18, isDesktop, isTablet),
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
           color: theme.primary
         });
-      case 'tier-earned':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(20, 14, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
-      case 'tier-requirement':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
       case 'description':
       case 'label':
       default:
         return __assign(__assign({}, baseStyle), {
-          fontSize: getResponsiveValue(12, 10, isDesktop, isTablet)
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xs, isDesktop, isTablet)
         });
     }
   };
   var variantStyle = getVariantStyle(variant);
   return /*#__PURE__*/React__namespace.createElement(Text$3, _extends({
-    style: [styles$i.base, variantStyle, style]
+    style: [variantStyle, style]
   }, props));
 };
-var styles$i = StyleSheet$1.create({
-  base: {}
-});
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -18756,9 +18772,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 +18846,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 +18865,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 +18905,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 +18918,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 +19063,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 +19071,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 +19082,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 +19097,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: useResponsiveValue(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 +19135,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
     }]
@@ -19119,16 +19145,26 @@ var BaseTileContent = function (_a) {
 var BaseTileHeader = function (_a) {
   var children = _a.children;
   var tile = useTileContext();
+  var theme = useWllSdk().theme;
   var artworkUrl = tile.configuration.artworkUrl;
   var isHalfSize = useTileSize(tile).isHalfSize;
+  var _b = useResponsive$1(),
+    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: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+      marginTop: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
   });
-  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 +19181,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 +19201,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 +19216,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 +19229,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 +19242,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 +19254,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 +19310,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 +19360,71 @@ 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 useBadgeTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
   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
+  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: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      right: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet),
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      borderRadius: 40,
+      width: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 40
+    },
+    countText: {
+      color: '#FFF',
+      fontSize: 14,
+      fontWeight: 'bold'
+    },
+    header: {
+      flexBasis: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
+    },
+    image: {
+      width: '100%',
+      height: '100%'
+    },
+    titleText: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    },
+    dateEarnedContainer: {
+      alignItems: 'flex-start',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 20
+    }
   });
 };
-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 +19433,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 +19453,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 +19466,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 +19483,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 +19512,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 +19527,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: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
+      height: 320
+    },
+    media: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    },
+    title: {
+      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.md, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxxs, isDesktop, isTablet),
+      fontWeight: '700'
+    },
+    description: {
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.xs, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.xxxl, theme.sizes.sm, isDesktop, isTablet),
+      color: theme.derivedSurfaceText[20]
+    }
+  });
+};
 var BannerTile = function (_a) {
   var tile = _a.tile;
+  var 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 +19623,28 @@ 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 theme = useWllSdk().theme;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  return StyleSheet$1.create({
+    content: {
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, 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 +19656,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 +19706,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)
+      marginBottom: useResponsiveValue(theme.sizes.lg, theme.sizes.xxs, isDesktop, isTablet)
     },
     sectionTitle: {
-      fontSize: getResponsiveValue(32, 18, isDesktop, isTablet),
-      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+      fontSize: useResponsiveValue(theme.sizes.xxxl, theme.sizes.xl, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+      fontWeight: '700',
+      color: theme.text
     },
     sectionDescription: {
-      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet)
+      fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.md, isDesktop, isTablet),
+      color: theme.alphaDerivedText[80]
     }
   });
-  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: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, 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 +19867,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: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, 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 +19903,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 +19949,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 +20029,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 +20059,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 +20078,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 +20099,33 @@ 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;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    section: {
+      width: '100%',
+      maxWidth: MAX_WIDTH,
+      marginHorizontal: 'auto',
+      marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, 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 +20133,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 +20172,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 +20202,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: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, 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: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+      color: theme.primary
+    },
+    pointsWithSuffix: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    imageContainer: {
+      width: isFullSize ? '100%' : 57,
+      height: isFullSize ? '50%' : 57,
+      marginBottom: isFullSize ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, 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 +20270,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 +20278,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 +20289,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 +20307,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: useResponsiveValue(theme.sizes.lg, theme.sizes.sm, isDesktop, isTablet),
+      paddingHorizontal: useResponsiveValue(theme.sizes.xxxxl, 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 +20346,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 +20366,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 +20374,51 @@ 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;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    imageContainer: {
+      width: '100%',
+      flexBasis: '50%',
+      marginBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+    },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover'
+    },
+    content: {
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      flex: 1
+    },
+    footer: {
+      marginTop: 8
+    },
+    pointsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    suffix: {
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet)
+    }
+  });
+};
 var RewardTile = function (_a) {
   var tile = _a.tile;
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
@@ -20409,16 +20426,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 +20458,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 +20468,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 +20491,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 +20498,50 @@ 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;
+  var theme = useWllSdk().theme;
+  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: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, 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: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, 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 +20553,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 +20566,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 +20608,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 +20634,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 +20647,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 +20738,92 @@ 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;
+  var theme = useWllSdk().theme;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, 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 +20832,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 +20851,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;