@wlloyalty/wll-react-sdk 1.0.25 → 1.0.27

package/dist/index.js

@@ -6395,7 +6395,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$x.textHasAncestor$raw : styles$x.text$raw, numberOfLines === 1 && styles$x.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$x.textMultiLine, props.style, selectable === true && styles$x.selectable, selectable === false && styles$x.notSelectable, onPress && styles$x.pressable];
+  }, 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];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$x = StyleSheet$1.create({
+var styles$w = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -7075,7 +7075,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   var writingDirection = componentDirection || contextDirection;
   var supportedProps = pickProps(rest);
   supportedProps.dir = componentDirection;
-  supportedProps.style = [styles$w.view$raw, hasTextAncestor && styles$w.inline, props.style];
+  supportedProps.style = [styles$v.view$raw, hasTextAncestor && styles$v.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$w = StyleSheet$1.create({
+var styles$v = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7202,14 +7202,14 @@ function TouchableOpacity(props, forwardedRef) {
     focusable: !disabled && focusable !== false,
     pointerEvents: disabled ? 'box-none' : undefined,
     ref: setRef,
-    style: [styles$v.root, !disabled && styles$v.actionable, style, opacityOverride != null && {
+    style: [styles$u.root, !disabled && styles$u.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$v = StyleSheet$1.create({
+var styles$u = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7302,6 +7302,16 @@ function __generator(thisArg, body) {
     }
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -7536,78 +7546,6 @@ var getStateColor = function (baseColor, type, count) {
   })
 });
 
-var createTheme = function (baseTheme) {
-  if (baseTheme === void 0) {
-    baseTheme = {};
-  }
-  var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
-  var background = mergedTheme.background,
-    primary = mergedTheme.primary,
-    accent = mergedTheme.accent,
-    positive = mergedTheme.positive,
-    negative = mergedTheme.negative,
-    surfaceText = mergedTheme.surfaceText,
-    surface = mergedTheme.surface,
-    text = mergedTheme.text;
-  return __assign(__assign({}, mergedTheme), {
-    sizes: sizes,
-    derivedBackground: getDerivedColor(background),
-    primaryText: getReadableTextColor(primary),
-    accentText: getReadableTextColor(accent),
-    positiveText: getReadableTextColor(positive),
-    negativeText: getReadableTextColor(negative),
-    derivedSurface: getDerivedColorPercentages(surface),
-    derivedSurfaceText: getDerivedColorPercentages(surfaceText),
-    alphaDerivedPrimary: getAlphaDerivedColors(primary),
-    alphaDerivedText: getAlphaDerivedColors(text)
-  });
-};
-var WllSdkContext = /*#__PURE__*/React.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 () {
-      return createTheme(providedTheme || {});
-    }),
-    theme = _c[0],
-    setThemeState = _c[1];
-  React.useEffect(function () {
-    setThemeState(createTheme(providedTheme || {}));
-  }, [providedTheme]);
-  var setTheme = React.useCallback(function (newTheme) {
-    setThemeState(function (prevTheme) {
-      return createTheme(__assign(__assign({}, prevTheme), newTheme));
-    });
-  }, []);
-  var getGroupByID = useGetGroupByID(config);
-  var getSectionByID = useGetSectionByID(config);
-  var getTileByID = useGetTileByID(config);
-  var handleNavigation = useNavigation(navigationConfig);
-  var contextValue = React.useMemo(function () {
-    return {
-      theme: theme,
-      setTheme: setTheme,
-      getGroupByID: getGroupByID,
-      getSectionByID: getSectionByID,
-      getTileByID: getTileByID,
-      handleNavigation: handleNavigation
-    };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
-  return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
-    value: contextValue
-  }, children);
-};
-var useWllSdk = function () {
-  var context = React.useContext(WllSdkContext);
-  if (context === undefined) {
-    throw new Error('useWllSdk must be used within a WllSdkProvider');
-  }
-  return context;
-};
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -7781,6 +7719,196 @@ if (canUseDOM$1) {
   }
 }
 
+var DIMENSION_MODES = {
+  DESKTOP: 'desktop',
+  TABLET: 'tablet',
+  MOBILE: 'mobile'
+};
+var TABLET_SCREEN_WIDTH = 728;
+var SMALL_SCREEN_WIDTH = 530;
+
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var Platform = {
+  OS: 'web',
+  select: obj => 'web' in obj ? obj.web : obj.default,
+  get isTesting() {
+    if (process.env.NODE_ENV === 'test') {
+      return true;
+    }
+    return false;
+  }
+};
+var Platform$1 = Platform;
+
+var isWeb = Platform$1.OS === 'web';
+function getDimensionMode(window) {
+  if (!window || !window.width) {
+    return DIMENSION_MODES.MOBILE;
+  }
+  var screenWidth = window.width;
+  if (screenWidth >= TABLET_SCREEN_WIDTH) {
+    return DIMENSION_MODES.DESKTOP;
+  }
+  if (screenWidth >= SMALL_SCREEN_WIDTH) {
+    return DIMENSION_MODES.TABLET;
+  }
+  return DIMENSION_MODES.MOBILE;
+}
+function useResponsive$1() {
+  var deviceWindow = Dimensions.get('window');
+  var _a = React.useState(getDimensionMode(deviceWindow)),
+    dimensionMode = _a[0],
+    setDimensionMode = _a[1];
+  React.useEffect(function () {
+    if (!isWeb) return;
+    var subscription = Dimensions.addEventListener('change', function (_a) {
+      var window = _a.window;
+      if (window) {
+        var mode = getDimensionMode(window);
+        setDimensionMode(mode);
+      }
+    });
+    return function () {
+      if (subscription) {
+        subscription.remove();
+      }
+    };
+  }, []);
+  return {
+    dimensionMode: dimensionMode,
+    isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
+    isTablet: dimensionMode === DIMENSION_MODES.TABLET,
+    isMobile: dimensionMode === DIMENSION_MODES.MOBILE
+  };
+}
+
+var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);
+function ResponsiveProvider(_a) {
+  var children = _a.children;
+  var _b = React.useState(function () {
+      var window = Dimensions.get('window');
+      var dimensionMode = getDimensionMode(window);
+      return {
+        dimensionMode: dimensionMode,
+        isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
+        isTablet: dimensionMode === DIMENSION_MODES.TABLET,
+        isMobile: dimensionMode === DIMENSION_MODES.MOBILE
+      };
+    }),
+    state = _b[0],
+    setState = _b[1];
+  React.useEffect(function () {
+    var subscription = Dimensions.addEventListener('change', function (_a) {
+      var window = _a.window;
+      if (window) {
+        var dimensionMode = getDimensionMode(window);
+        setState({
+          dimensionMode: dimensionMode,
+          isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
+          isTablet: dimensionMode === DIMENSION_MODES.TABLET,
+          isMobile: dimensionMode === DIMENSION_MODES.MOBILE
+        });
+      }
+    });
+    return function () {
+      if (subscription) {
+        subscription.remove();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+    value: state
+  }, children);
+}
+function useResponsive() {
+  var context = React.useContext(ResponsiveContext);
+  if (context === undefined) {
+    throw new Error('useResponsive must be used within a ResponsiveProvider');
+  }
+  return context;
+}
+
+var createTheme = function (baseTheme) {
+  if (baseTheme === void 0) {
+    baseTheme = {};
+  }
+  var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
+  var background = mergedTheme.background,
+    primary = mergedTheme.primary,
+    accent = mergedTheme.accent,
+    positive = mergedTheme.positive,
+    negative = mergedTheme.negative,
+    surfaceText = mergedTheme.surfaceText,
+    surface = mergedTheme.surface,
+    text = mergedTheme.text;
+  return __assign(__assign({}, mergedTheme), {
+    sizes: sizes,
+    derivedBackground: getDerivedColor(background),
+    primaryText: getReadableTextColor(primary),
+    accentText: getReadableTextColor(accent),
+    positiveText: getReadableTextColor(positive),
+    negativeText: getReadableTextColor(negative),
+    derivedSurface: getDerivedColorPercentages(surface),
+    derivedSurfaceText: getDerivedColorPercentages(surfaceText),
+    alphaDerivedPrimary: getAlphaDerivedColors(primary),
+    alphaDerivedText: getAlphaDerivedColors(text)
+  });
+};
+var WllSdkContext = /*#__PURE__*/React.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 () {
+      return createTheme(providedTheme || {});
+    }),
+    theme = _c[0],
+    setThemeState = _c[1];
+  React.useEffect(function () {
+    setThemeState(createTheme(providedTheme || {}));
+  }, [providedTheme]);
+  var setTheme = React.useCallback(function (newTheme) {
+    setThemeState(function (prevTheme) {
+      return createTheme(__assign(__assign({}, prevTheme), newTheme));
+    });
+  }, []);
+  var getGroupByID = useGetGroupByID(config);
+  var getSectionByID = useGetSectionByID(config);
+  var getTileByID = useGetTileByID(config);
+  var handleNavigation = useNavigation(navigationConfig);
+  var contextValue = React.useMemo(function () {
+    return {
+      theme: theme,
+      setTheme: setTheme,
+      getGroupByID: getGroupByID,
+      getSectionByID: getSectionByID,
+      getTileByID: getTileByID,
+      handleNavigation: handleNavigation
+    };
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
+  return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
+};
+var useWllSdk = function () {
+  var context = React.useContext(WllSdkContext);
+  if (context === undefined) {
+    throw new Error('useWllSdk must be used within a WllSdkProvider');
+  }
+  return context;
+};
+
 var BREAKPOINTS = {
   MOBILE: 0,
   TABLET: 767,
@@ -7806,6 +7934,11 @@ var createResponsiveStyle = function (style) {
   }, {});
   return responsiveStyle;
 };
+var getResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
+  if (isDesktop) return desktopValue;
+  if (isTablet) return Math.round((desktopValue + mobileValue) / 2); // Tablet gets the middle value
+  return mobileValue;
+};
 
 function createVariantSystem(baseStyle, variantStyles) {
   return function (theme, variant) {
@@ -7814,22 +7947,7 @@ function createVariantSystem(baseStyle, variantStyles) {
   };
 }
 
-var styles$u = StyleSheet$1.create({
-  button: createResponsiveStyle({
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: [12, 12, 24],
-    paddingVertical: [12, 12, 12],
-    alignSelf: 'flex-start'
-  }),
-  // @ts-ignore
-  text: createResponsiveStyle({
-    textAlign: 'center',
-    textTransform: 'uppercase',
-    fontSize: [12, 12, 18]
-  })
-});
-var useButtonStyles = createVariantSystem(styles$u.button, function (theme) {
+var useButtonStyles = createVariantSystem({}, function (theme) {
   return {
     primary: {
       backgroundColor: theme.primary
@@ -7845,7 +7963,7 @@ var useButtonStyles = createVariantSystem(styles$u.button, function (theme) {
     }
   };
 });
-var useTextStyles = createVariantSystem(styles$u.text, function (theme) {
+var useTextStyles = createVariantSystem({}, function (theme) {
   return {
     primary: {
       color: theme.primaryText
@@ -7866,17 +7984,33 @@ var Button = function (_a) {
     onPress = _a.onPress,
     variant = _a.variant;
   var theme = useWllSdk().theme;
+  var _b = useResponsive$1(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
   var buttonStyle = useButtonStyles(theme, variant);
   var textStyle = useTextStyles(theme, variant);
+  var dynamicStyles = StyleSheet$1.create({
+    button: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: getResponsiveValue(24, 12, isDesktop, isTablet),
+      paddingVertical: 12,
+      alignSelf: 'flex-start'
+    },
+    text: {
+      textAlign: 'center',
+      textTransform: 'uppercase',
+      fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
+      fontWeight: '700'
+    }
+  });
   return /*#__PURE__*/React__namespace.createElement(TouchableOpacity$1, {
-    style: [buttonStyle, {
+    style: [dynamicStyles.button, buttonStyle, {
       borderRadius: theme.sizes.borderRadiusButton
     }],
     onPress: onPress
   }, /*#__PURE__*/React__namespace.createElement(Text$3, {
-    style: [textStyle, {
-      fontWeight: '700'
-    }]
+    style: [dynamicStyles.text, textStyle]
   }, title));
 };
 
@@ -8049,28 +8183,6 @@ var styles$r = StyleSheet$1.create({
   }
 });
 
-/**
- * Copyright (c) Nicolas Gallagher.
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-var Platform = {
-  OS: 'web',
-  select: obj => 'web' in obj ? obj.web : obj.default,
-  get isTesting() {
-    if (process.env.NODE_ENV === 'test') {
-      return true;
-    }
-    return false;
-  }
-};
-var Platform$1 = Platform;
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -18103,48 +18215,51 @@ var Text = function (_a) {
     _a.isSurface;
     var props = __rest(_a, ["variant", "style", "isSurface"]);
   var theme = useWllSdk().theme;
+  var _d = useResponsive(),
+    isDesktop = _d.isDesktop,
+    isTablet = _d.isTablet;
   var getVariantStyle = function (variant) {
     var baseStyle = {
       color: theme.surfaceText
     };
     switch (variant) {
       case 'eyebrow':
-        return createResponsiveStyle(__assign(__assign({}, baseStyle), {
-          fontSize: [12, 12, 14],
-          marginBottom: [4, 4, 8]
-        }));
+        return __assign(__assign({}, baseStyle), {
+          fontSize: getResponsiveValue(14, 12, isDesktop, isTablet),
+          marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+        });
       case 'title':
-        return createResponsiveStyle(__assign(__assign({}, baseStyle), {
-          fontSize: [14, 14, 24],
+        return __assign(__assign({}, baseStyle), {
+          fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
           fontWeight: 'bold'
-        }));
-      case 'description':
-        return createResponsiveStyle(__assign({}, baseStyle));
+        });
       case 'body':
-        return createResponsiveStyle({
+        return {
           color: theme.derivedSurfaceText[20],
-          fontSize: [10, 10, 14]
-        });
+          fontSize: getResponsiveValue(14, 10, isDesktop, isTablet)
+        };
       case 'caption':
-        return createResponsiveStyle(__assign(__assign({}, baseStyle), {
+        return __assign(__assign({}, baseStyle), {
           fontWeight: 'bold',
-          fontSize: [18, 18, 24],
+          fontSize: getResponsiveValue(24, 18, isDesktop, isTablet),
           color: theme.primary
-        }));
-      case 'label':
-        return createResponsiveStyle(__assign({}, baseStyle));
+        });
       case 'tier-earned':
-        return createResponsiveStyle(__assign(__assign({}, baseStyle), {
-          fontSize: [14, 14, 20],
+        return __assign(__assign({}, baseStyle), {
+          fontSize: getResponsiveValue(20, 14, isDesktop, isTablet),
           fontWeight: 'bold'
-        }));
+        });
       case 'tier-requirement':
-        return createResponsiveStyle(__assign(__assign({}, baseStyle), {
-          fontSize: [12, 12, 18],
+        return __assign(__assign({}, baseStyle), {
+          fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
           fontWeight: 'bold'
-        }));
+        });
+      case 'description':
+      case 'label':
       default:
-        return createResponsiveStyle(__assign({}, baseStyle));
+        return __assign(__assign({}, baseStyle), {
+          fontSize: getResponsiveValue(12, 10, isDesktop, isTablet)
+        });
     }
   };
   var variantStyle = getVariantStyle(variant);
@@ -18995,8 +19110,9 @@ var BaseTileContent = function (_a) {
   // 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, isHalfSize && {
-      justifyContent: 'center'
+    style: [styles$f.content, {
+      justifyContent: 'center',
+      height: !artworkUrl ? '100%' : undefined
     }]
   }, children);
 };
@@ -19099,6 +19215,38 @@ var styles$f = StyleSheet$1.create({
   })
 });
 
+var Indicator = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var getCurrentLayout = function () {
+    if (isDesktop) return 'Desktop Layout';
+    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
+  }, getCurrentLayout()));
+};
+var styles$e = StyleSheet$1.create({
+  indicator: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    backgroundColor: 'red',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4
+  },
+  indicatorText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold'
+  }
+});
+
 var GRID_GAP = 16;
 
 var Skeleton = function (_a) {
@@ -19132,29 +19280,29 @@ 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$e.skeleton, styles$e.title, {
+    style: [styles$d.skeleton, styles$d.title, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$e.skeleton, styles$e.body, {
+    style: [styles$d.skeleton, styles$d.body, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: 6
     }]
   }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$e.container, style]
+    style: [styles$d.container, style]
   }, Array.from({
     length: numberOfSquares
   }).map(function (_, index) {
     return /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
       key: index,
-      style: [styles$e.skeleton, styles$e.square, sharedSkeletonStyle]
+      style: [styles$d.skeleton, styles$d.square, sharedSkeletonStyle]
     });
   })));
 };
-var styles$e = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -19191,9 +19339,9 @@ var BadgeTileInner$1 = function (_a) {
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$d.contentContainer
+    style: styles$c.contentContainer
   }, /*#__PURE__*/React.createElement(BadgeTile$1.Image, null), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$d.textContainer
+    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) {
@@ -19204,7 +19352,7 @@ var BadgeTileImage = function (props) {
   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$d.imageContainer, {
+    style: [styles$c.imageContainer, {
       backgroundColor: theme.alphaDerivedPrimary[20]
     }]
   }, configuration.count === 0 && /*#__PURE__*/React.createElement(Locked, null), /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
@@ -19212,7 +19360,7 @@ var BadgeTileImage = function (props) {
       uri: badgeDetails.artworkUrl
     },
     resizeMode: "contain",
-    style: styles$d.image
+    style: styles$c.image
   })));
 };
 var BadgeTileTitle$1 = function (props) {
@@ -19242,7 +19390,7 @@ 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$d.lockOverlay
+    style: styles$c.lockOverlay
   }, /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: iconSize
@@ -19260,7 +19408,7 @@ BadgeTile$1.Image = BadgeTileImage;
 BadgeTile$1.Title = BadgeTileTitle$1;
 BadgeTile$1.Body = BadgeTileBody;
 BadgeTile$1.Chevron = BadgeTileChevron;
-var styles$d = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   contentContainer: {
     flexDirection: 'column',
     height: '100%'
@@ -19303,7 +19451,7 @@ var BadgeTileInner = function (_a) {
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.container
+    style: styles$b.container
   }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Column, {
     justify: "between",
     align: "start"
@@ -19321,12 +19469,12 @@ var BadgeTileMedia = function (_a) {
   var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
   if (!displayUrl) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.header
+    style: styles$b.header
   }, /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: displayUrl
     },
-    style: styles$c.image,
+    style: styles$b.image,
     resizeMode: "contain",
     isDesaturated: shouldDesaturate(type, count)
   })), children);
@@ -19341,7 +19489,7 @@ var BadgeTileTitle = function () {
   if (!displayText) return null;
   return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    style: styles$c.titleText,
+    style: styles$b.titleText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
   }, displayText));
@@ -19353,10 +19501,10 @@ var BadgeTileDescription = function () {
     description = configuration.description;
   if (count === 0 || !description) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.descriptionContainer
+    style: styles$b.descriptionContainer
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    style: styles$c.descriptionText,
+    style: styles$b.descriptionText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
   }, description));
@@ -19371,7 +19519,7 @@ var BadgeTileDateEarned = function () {
     badgeNotEarnedMessage = configuration.badgeNotEarnedMessage;
   var theme = useWllSdk().theme;
   var backgroundColor = getStateColor(theme.alphaDerivedPrimary[20], type, count);
-  var containerStyle = [styles$c.dateEarnedContainer, {
+  var containerStyle = [styles$b.dateEarnedContainer, {
     backgroundColor: backgroundColor
   }];
   if (type === exports.BadgeTileType.Latest && count === 0) {
@@ -19400,12 +19548,12 @@ var BadgeTileStatus = function () {
     return null;
   }
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.indicatorContainer
+    style: styles$b.indicatorContainer
   }, count === 0 ? /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: 20
   }) : /*#__PURE__*/React.createElement(Text, {
-    style: styles$c.countText
+    style: styles$b.countText
   }, count, "x"));
 };
 var BadgeTile = BadgeTileInner;
@@ -19414,7 +19562,7 @@ BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
-var styles$c = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   container: {
     flex: 1
   },
@@ -19463,7 +19611,7 @@ var BannerTile = function (_a) {
   return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
     tile: tile
   }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, null), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$b.slideContent
+    style: styles$a.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 () {
@@ -19471,12 +19619,12 @@ var BannerTileMedia = function () {
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$b.mediaContainer
+    style: styles$a.mediaContainer
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
-    style: styles$b.media
+    style: styles$a.media
   }));
 };
 var BannerTileTitle = function () {
@@ -19488,7 +19636,7 @@ var BannerTileTitle = function () {
     // @ts-ignore
     React__namespace.createElement(Text, {
       variant: "title",
-      style: styles$b.title
+      style: styles$a.title
     }, title)
   );
 };
@@ -19498,7 +19646,7 @@ var BannerTileDescription = function () {
   var description = configuration.description;
   if (!description) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles$b.description, {
+    style: [styles$a.description, {
       color: theme.derivedSurfaceText[20]
     }]
   }, description);
@@ -19517,7 +19665,7 @@ var BannerTileCTA = function () {
     onPress: handlePress
   });
 };
-var styles$b = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   slide: createResponsiveStyle({
     width: '100%',
     maxWidth: 1080,
@@ -19531,11 +19679,12 @@ var styles$b = StyleSheet$1.create({
     flex: 1
   }),
   mediaContainer: createResponsiveStyle({
-    width: '20%',
+    width: '30%',
     aspectRatio: 1,
     position: 'relative',
     overflow: 'hidden',
-    marginRight: [8, 8, 24]
+    marginRight: [8, 8, 24],
+    height: 320
   }),
   media: {
     position: 'absolute',
@@ -19570,13 +19719,13 @@ var ContentTileRoot = function (_a) {
 };
 var ContentTileMedia = function () {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Media, {
-    style: styles$a.media
+    style: styles$9.media
   });
 };
 var ContentTileContent = function (_a) {
   var children = _a.children;
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Content, null, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$a.content
+    style: styles$9.content
   }, children));
 };
 var ContentTileHeader = function () {
@@ -19585,7 +19734,7 @@ var ContentTileHeader = function () {
 var ContentTileBody = function () {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Body, null);
 };
-var styles$a = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   content: createResponsiveStyle({
     paddingHorizontal: [8, 8, 12],
     flex: 1,
@@ -19602,6 +19751,22 @@ ContentTile.Content = ContentTileContent;
 ContentTile.Header = ContentTileHeader;
 ContentTile.Body = ContentTileBody;
 
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+var sortByPriority = function (tiles) {
+  return __spreadArray([], tiles, true).sort(function (a, b) {
+    // Sort by priority (higher priority first)
+    if (a.priority !== b.priority) {
+      return b.priority - a.priority;
+    }
+    // If priorities are equal, maintain original order
+    return tiles.indexOf(a) - tiles.indexOf(b);
+  });
+};
+
 exports.SectionType = void 0;
 (function (SectionType) {
   SectionType["Grid"] = "GRID";
@@ -19612,34 +19777,37 @@ var SectionHeader = function (_a) {
   var title = _a.title,
     description = _a.description;
   var theme = useWllSdk().theme;
+  var _b = useResponsive$1(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
   if (!title && !description) {
     return null;
   }
+  var dynamicStyles = StyleSheet$1.create({
+    sectionHeader: {
+      marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet)
+    },
+    sectionTitle: {
+      fontSize: getResponsiveValue(32, 18, isDesktop, isTablet),
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet)
+    },
+    sectionDescription: {
+      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet)
+    }
+  });
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$9.sectionHeader
+    style: dynamicStyles.sectionHeader
   }, title && /*#__PURE__*/React.createElement(Text, {
-    style: [styles$9.sectionTitle, {
+    style: [dynamicStyles.sectionTitle, {
       fontWeight: '700',
       color: theme.text
     }]
   }, title), description && /*#__PURE__*/React.createElement(Text, {
-    style: [styles$9.sectionDescription, {
+    style: [dynamicStyles.sectionDescription, {
       color: theme.alphaDerivedText[80]
     }]
   }, description));
 };
-var styles$9 = StyleSheet$1.create({
-  sectionHeader: createResponsiveStyle({
-    marginBottom: [8, 8, 16]
-  }),
-  sectionTitle: createResponsiveStyle({
-    fontSize: [18, 18, 32],
-    marginBottom: [4, 4, 8]
-  }),
-  sectionDescription: createResponsiveStyle({
-    fontSize: [14, 14, 24]
-  })
-});
 
 var Carousel = function (_a) {
   var section = _a.section;
@@ -19652,6 +19820,7 @@ var Carousel = function (_a) {
   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 contentOffsetX = event.nativeEvent.contentOffset.x;
@@ -19674,14 +19843,14 @@ var Carousel = function (_a) {
   };
   var handleNext = function () {
     var _a;
-    var newIndex = Math.min(bannerTiles.length - 1, currentIndex + 1);
+    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,
       animated: true
     });
   };
-  var displayControls = bannerTiles.length > 1;
+  var displayControls = sortedTiles.length > 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionHeader, {
     title: section.title,
     description: section.description
@@ -19710,19 +19879,12 @@ var Carousel = function (_a) {
       width: slideWidth
     }],
     contentContainerStyle: {
-      width: slideWidth * bannerTiles.length
+      width: slideWidth * sortedTiles.length
     },
     decelerationRate: "fast",
     snapToInterval: slideWidth,
     snapToAlignment: "start"
-  }, bannerTiles.sort(function (a, b) {
-    // Sort by priority (higher priority first)
-    if (a.priority !== b.priority) {
-      return b.priority - a.priority;
-    }
-    // If priorities are equal, maintain original order
-    return bannerTiles.indexOf(a) - bannerTiles.indexOf(b);
-  }).map(function (tile, index) {
+  }, sortedTiles.map(function (tile, index) {
     return /*#__PURE__*/React.createElement(View$2, {
       key: index,
       style: [{
@@ -19742,7 +19904,7 @@ var Carousel = function (_a) {
     color: theme.primary
   }))), displayControls && /*#__PURE__*/React.createElement(View$2, {
     style: styles$8.indicators
-  }, bannerTiles.map(function (_, index) {
+  }, sortedTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
       inputRange: [index - 1, index, index + 1],
       outputRange: [8, 30, 8],
@@ -19759,7 +19921,7 @@ var Carousel = function (_a) {
     });
   }))));
 };
-var buttonSize = 30;
+var buttonSize = 42;
 var styles$8 = StyleSheet$1.create({
   container: {
     width: '100%',
@@ -19788,22 +19950,6 @@ var styles$8 = StyleSheet$1.create({
   carouselContent: {
     overflow: 'hidden'
   },
-  slideContent: {
-    padding: 20,
-    flex: 1
-  },
-  imageContainer: {
-    width: '20%',
-    aspectRatio: 1,
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  image: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover'
-  },
   navButton: {
     padding: 10,
     alignItems: 'center',
@@ -19844,45 +19990,10 @@ var styles$8 = StyleSheet$1.create({
   }
 });
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * 
- */
-
-function useWindowDimensions() {
-  var _useState = React.useState(() => Dimensions.get('window')),
-    dims = _useState[0],
-    setDims = _useState[1];
-  React.useEffect(() => {
-    function handleChange(_ref) {
-      var window = _ref.window;
-      if (window != null) {
-        setDims(window);
-      }
-    }
-    Dimensions.addEventListener('change', handleChange);
-    // We might have missed an update between calling `get` in render and
-    // `addEventListener` in this handler, so we set it here. If there was
-    // no change, React will filter out this update as a no-op.
-    setDims(Dimensions.get('window'));
-    return () => {
-      Dimensions.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return dims;
-}
-
 var Grid = function (_a) {
   var section = _a.section;
-  var width = useWindowDimensions().width;
-  var isDesktop = width >= 700;
+  var isDesktop = useResponsive().isDesktop;
   var columnsPerRow = isDesktop ? 4 : 2;
-  var gap = GRID_GAP;
   var renderGrid = function () {
     var tileContainers = [];
     var currentTiles = [];
@@ -19897,28 +20008,33 @@ var Grid = function (_a) {
     var allHalfTiles = gridTiles.every(function (tile) {
       return tile.tileHeight === exports.TileHeight.Half;
     });
+    var getTileWidth = function (columns) {
+      return {
+        width: "calc(".concat(100 / columns, "% - ").concat((columns - 1) * GRID_GAP / columns, "px)"),
+        marginBottom: GRID_GAP,
+        height: 'auto'
+      };
+    };
     if (isDesktop && allHalfTiles) {
       gridTiles.forEach(function (tile, index) {
         var isLastInRow = (index + 1) % columnsPerRow === 0;
         tileContainers.push( /*#__PURE__*/React__namespace.createElement(View$2, {
-          key: "container-".concat(index)
+          key: "container-".concat(index),
+          style: [
           // @ts-ignore
-          ,
-          style: {
-            width: "calc(".concat(100 / columnsPerRow, "% - ").concat((columnsPerRow - 1) * gap / columnsPerRow, "px)"),
-            marginRight: isLastInRow ? 0 : gap,
-            marginBottom: gap,
-            height: 'auto'
-          }
+          getTileWidth(columnsPerRow), !isLastInRow && {
+            marginRight: GRID_GAP
+          }]
         }, /*#__PURE__*/React__namespace.createElement(TileContainer, {
           tiles: [tile]
         })));
       });
       return tileContainers;
     }
-    gridTiles.forEach(function (tile, index) {
+    var sortedTiles = sortByPriority(gridTiles);
+    sortedTiles.forEach(function (tile, index) {
       currentTiles.push(tile);
-      var nextTile = gridTiles[index + 1];
+      var nextTile = sortedTiles[index + 1];
       var shouldStartNewContainer = function (currentTiles, currentTile, nextTile) {
         if (currentTiles.length === 2) return true;
         if (currentTile.tileHeight === exports.TileHeight.Full) return true;
@@ -19935,14 +20051,12 @@ var Grid = function (_a) {
       if (shouldStartNewContainer(currentTiles, tile, nextTile)) {
         var isLastInRow = (tileContainers.length + 1) % columnsPerRow === 0;
         tileContainers.push( /*#__PURE__*/React__namespace.createElement(View$2, {
-          key: "container-".concat(index)
+          key: "container-".concat(index),
+          style: [
           // @ts-ignore
-          ,
-          style: {
-            width: "calc(".concat(100 / columnsPerRow, "% - ").concat((columnsPerRow - 1) * gap / columnsPerRow, "px)"),
-            marginRight: isLastInRow ? 0 : gap,
-            marginBottom: gap
-          }
+          getTileWidth(columnsPerRow), !isLastInRow && {
+            marginRight: GRID_GAP
+          }]
         }, /*#__PURE__*/React__namespace.createElement(TileContainer, {
           tiles: currentTiles
         })));
@@ -19962,7 +20076,7 @@ var styles$7 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    height: 'auto'
+    width: '100%'
   }
 });
 
@@ -20102,16 +20216,10 @@ var Group = function (_a) {
   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"), ";");
+    }, /*#__PURE__*/React.createElement(Text$3, null, "No sections available"));
   }
-  return /*#__PURE__*/React.createElement(View$2, null, groupData.sections.sort(function (a, b) {
-    // Sort by priority (higher priority first)
-    if (a.priority !== b.priority) {
-      return b.priority - a.priority;
-    }
-    // If priorities are equal, maintain original order
-    return groupData.sections.indexOf(a) - groupData.sections.indexOf(b);
-  }).map(function (section) {
+  var sortedSections = sortByPriority(groupData.sections);
+  return /*#__PURE__*/React.createElement(View$2, null, sortedSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       key: section.id,
       section: section
@@ -20240,13 +20348,22 @@ var RewardCategoryHeader = function () {
   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, {
       backgroundColor: theme.primary
     }]
   }, /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles$3.headerText, {
+    style: [dynamicStyles.headerText, {
       color: theme.primaryText
     }],
     ellipsizeMode: "tail",
@@ -20275,10 +20392,6 @@ var styles$3 = StyleSheet$1.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  headerText: {
-    fontSize: 16,
-    paddingHorizontal: 30
-  },
   background: {
     position: 'absolute',
     width: '100%',
@@ -20748,6 +20861,7 @@ var styles$1 = StyleSheet$1.create({
 
 var TileContainer = function (_a) {
   var tiles = _a.tiles;
+  var isDesktop = useResponsive$1().isDesktop;
   var renderTile = function (tile) {
     switch (tile.type) {
       case exports.TileType.Content:
@@ -20781,7 +20895,7 @@ var TileContainer = function (_a) {
     return tile.tileHeight === exports.TileHeight.Half;
   });
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles.container, allHalfTiles ? {
+    style: [styles.container, isDesktop && allHalfTiles ? {
       aspectRatio: 2
     } : {
       aspectRatio: 1
@@ -20825,6 +20939,7 @@ exports.ContentTileConfig = ContentTileConfig;
 exports.Grid = Grid;
 exports.Group = Group;
 exports.Icon = Icon;
+exports.Indicator = Indicator;
 exports.LoadingIndicator = LoadingIndicator;
 exports.PointsTile = PointsTile;
 exports.PointsTileConfig = PointsTileConfig;