@wlloyalty/wll-react-sdk 1.0.24 → 1.0.25

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$v.textHasAncestor$raw : styles$v.text$raw, numberOfLines === 1 && styles$v.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$v.textMultiLine, props.style, selectable === true && styles$v.selectable, selectable === false && styles$v.notSelectable, onPress && styles$v.pressable];
+  }, 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];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$v = StyleSheet$1.create({
+var styles$x = 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$u.view$raw, hasTextAncestor && styles$u.inline, props.style];
+  supportedProps.style = [styles$w.view$raw, hasTextAncestor && styles$w.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$u = StyleSheet$1.create({
+var styles$w = 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$t.root, !disabled && styles$t.actionable, style, opacityOverride != null && {
+    style: [styles$v.root, !disabled && styles$v.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$t = StyleSheet$1.create({
+var styles$v = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7496,6 +7496,45 @@ var desaturateColor = function (color) {
 var getStateColor = function (baseColor, type, count) {
   return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
 };
+// Storybook Themes
+({
+  modern: __assign(__assign({}, defaultTheme), {
+    primary: '#f72585',
+    accent: '#ffc300',
+    background: '#e5e5e5',
+    surface: '#f4f3ee',
+    surfaceText: '#f72585'
+  }),
+  warm: __assign(__assign({}, defaultTheme), {
+    primary: '#014F5C',
+    accent: '#F38A51',
+    background: '#BE9C80',
+    surface: '#F1CFB3',
+    surfaceText: '#014F5C'
+  }),
+  dark: __assign(__assign({}, defaultTheme), {
+    background: '#1e1e1e',
+    text: '#ffffff',
+    primary: '#ffbe0b',
+    accent: '#d00000',
+    surface: '#2f3037',
+    surfaceText: '#ffffff'
+  }),
+  forest: __assign(__assign({}, defaultTheme), {
+    primary: '#354f52',
+    accent: '#84a98c',
+    background: '#f0f4f0',
+    surface: '#cad2c5',
+    surfaceText: '#2d3436'
+  }),
+  sunset: __assign(__assign({}, defaultTheme), {
+    primary: '#c32f27',
+    accent: '#db7c26',
+    background: '#f9edcc',
+    surface: '#f0dfad',
+    surfaceText: '#2d3436'
+  })
+});
 
 var createTheme = function (baseTheme) {
   if (baseTheme === void 0) {
@@ -7535,6 +7574,9 @@ var WllSdkProvider = function (_a) {
     }),
     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));
@@ -7772,7 +7814,7 @@ function createVariantSystem(baseStyle, variantStyles) {
   };
 }
 
-var styles$s = StyleSheet$1.create({
+var styles$u = StyleSheet$1.create({
   button: createResponsiveStyle({
     justifyContent: 'center',
     alignItems: 'center',
@@ -7787,7 +7829,7 @@ var styles$s = StyleSheet$1.create({
     fontSize: [12, 12, 18]
   })
 });
-var useButtonStyles = createVariantSystem(styles$s.button, function (theme) {
+var useButtonStyles = createVariantSystem(styles$u.button, function (theme) {
   return {
     primary: {
       backgroundColor: theme.primary
@@ -7803,7 +7845,7 @@ var useButtonStyles = createVariantSystem(styles$s.button, function (theme) {
     }
   };
 });
-var useTextStyles = createVariantSystem(styles$s.text, function (theme) {
+var useTextStyles = createVariantSystem(styles$u.text, function (theme) {
   return {
     primary: {
       color: theme.primaryText
@@ -7863,14 +7905,14 @@ var Column = function (_a) {
     _e = _a.style,
     style = _e === void 0 ? {} : _e;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$r.column, {
+    style: [styles$t.column, {
       justifyContent: justifyMap[justify],
       alignItems: alignMap[align],
       flexDirection: direction
     }, style]
   }, children);
 };
-var styles$r = StyleSheet$1.create({
+var styles$t = StyleSheet$1.create({
   column: __assign({
     flex: 1
   }, createResponsiveStyle({
@@ -7937,17 +7979,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$q.container, style]
+    style: [styles$s.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$q.animation, !animating && styles$q.animationPause, !animating && hidesWhenStopped && styles$q.hidesWhenStopped]
+    } : indicatorSizes[size], styles$s.animation, !animating && styles$s.animationPause, !animating && hidesWhenStopped && styles$s.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$q = StyleSheet$1.create({
+var styles$s = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -7987,7 +8029,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$p.container, {
+    style: [styles$r.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -7996,7 +8038,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$p = StyleSheet$1.create({
+var styles$r = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8332,14 +8374,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$o.scrollDisabled, hideScrollbar && styles$o.hideScrollbar]
+    style: [style, !scrollEnabled && styles$q.scrollDisabled, hideScrollbar && styles$q.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$o = StyleSheet$1.create({
+var styles$q = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -8978,7 +9020,7 @@ let ScrollView$1 = class ScrollView extends React.Component {
       var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
       if (child != null && (isSticky || pagingEnabled)) {
         return /*#__PURE__*/React.createElement(View$2, {
-          style: [isSticky && styles$n.stickyHeader, pagingEnabled && styles$n.pagingEnabledChild]
+          style: [isSticky && styles$p.stickyHeader, pagingEnabled && styles$p.pagingEnabledChild]
         }, child);
       } else {
         return child;
@@ -8988,10 +9030,10 @@ let ScrollView$1 = class ScrollView extends React.Component {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$n.contentContainerHorizontal, centerContent && styles$n.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$p.contentContainerHorizontal, centerContent && styles$p.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$n.baseHorizontal : styles$n.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$n.pagingEnabledHorizontal : styles$n.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$p.baseHorizontal : styles$p.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$p.pagingEnabledHorizontal : styles$p.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9034,7 +9076,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$n = StyleSheet$1.create({
+var styles$p = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -10247,7 +10289,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$m.rowReverse, inversionStyle] : [styles$m.columnReverse, inversionStyle] : horizontal ? [styles$m.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$o.rowReverse, inversionStyle] : [styles$o.columnReverse, inversionStyle] : horizontal ? [styles$o.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10267,7 +10309,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$m = StyleSheet$1.create({
+var styles$o = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11447,7 +11489,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$l.horizontallyInverted : styles$l.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$n.horizontallyInverted : styles$n.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11611,7 +11653,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$l.debug
+        style: styles$n.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11728,20 +11770,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$l.debugOverlayBase, styles$l.debugOverlay]
+      style: [styles$n.debugOverlayBase, styles$n.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrame, {
+      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrameLast, {
+      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrameVis, {
+      style: [styles$n.debugOverlayBase, styles$n.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -11882,7 +11924,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$l = StyleSheet$1.create({
+var styles$n = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12259,7 +12301,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$k.row, columnWrapperStyle]
+            style: [styles$m.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12385,7 +12427,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$k = StyleSheet$1.create({
+var styles$m = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14772,7 +14814,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$j.accessibilityImage$raw,
+    style: styles$l.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -14844,14 +14886,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$j.root, hasTextAncestor && styles$j.inline, imageSizeStyle, style, styles$j.undo,
+    style: [styles$l.root, hasTextAncestor && styles$l.inline, imageSizeStyle, style, styles$l.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$j.image, resizeModeStyles[resizeMode], {
+    style: [styles$l.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -14873,7 +14915,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$j = StyleSheet$1.create({
+var styles$l = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -17977,7 +18019,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$i = StyleSheet$1.create({
+var styles$k = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -18012,25 +18054,25 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$i.container, style, {
+    style: [styles$k.container, style, {
       backgroundColor: isDesaturated ? desaturatedColor : baseColor
     }]
   }, isDesaturated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$i.imageOverlay, {
+    style: [styles$k.imageOverlay, {
       opacity: imageAnimated,
       tintColor: desaturatedColor
     }],
     onLoad: onImageLoad
   })), /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$i.imageOverlay, {
+    style: [styles$k.imageOverlay, {
       opacity: 0.1
     }],
     onLoad: onImageLoad
   }))) : /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$i.imageOverlay, {
+    style: [styles$k.imageOverlay, {
       opacity: imageAnimated
     }],
     onLoad: onImageLoad
@@ -18042,10 +18084,10 @@ var RowHeader = function (_a) {
     style = _a.style,
     props = __rest(_a, ["children", "style"]);
   return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
-    style: [styles$h.header, style]
+    style: [styles$j.header, style]
   }, props), children);
 };
-var styles$h = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   header: createResponsiveStyle({
     flexDirection: 'row',
     alignItems: 'center',
@@ -18107,10 +18149,10 @@ var Text = function (_a) {
   };
   var variantStyle = getVariantStyle(variant);
   return /*#__PURE__*/React__namespace.createElement(Text$3, _extends({
-    style: [styles$g.base, variantStyle, style]
+    style: [styles$i.base, variantStyle, style]
   }, props));
 };
-var styles$g = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   base: {}
 });
 
@@ -18673,7 +18715,7 @@ function Pressable(props, forwardedRef) {
     onFocus: focusHandler,
     onKeyDown: keyDownHandler,
     ref: setRef,
-    style: [disabled ? styles$f.disabled : styles$f.active, typeof style === 'function' ? style(interactionState) : style],
+    style: [disabled ? styles$h.disabled : styles$h.active, typeof style === 'function' ? style(interactionState) : style],
     tabIndex: _tabIndex
   }), typeof children === 'function' ? children(interactionState) : children);
 }
@@ -18683,7 +18725,7 @@ function useForceableState(forced) {
     setBool = _useState[1];
   return [bool || forced, setBool];
 }
-var styles$f = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
@@ -18728,7 +18770,7 @@ var BaseBanner = function (_a) {
   }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$e.container, {
+      return [styles$g.container, {
         backgroundColor: theme.surface,
         borderRadius: theme.sizes.borderRadiusLg,
         opacity: pressed ? 0.7 : 1
@@ -18741,7 +18783,7 @@ var BaseBanner = function (_a) {
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children));
 };
-var styles$e = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     width: '100%',
     maxWidth: 1080,
@@ -18880,6 +18922,7 @@ var TierTileConfig = /** @class */function () {
     this.emptyArtworkUrl = '';
     this.pointsToTierPrefix = '';
     this.pointsToTierSuffix = '';
+    this.locale = 'en';
   }
   return TierTileConfig;
 }();
@@ -18930,7 +18973,7 @@ var BaseTileRoot = function (_a) {
   return /*#__PURE__*/React.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$d.container, {
+      return [styles$f.container, {
         backgroundColor: theme.surface,
         borderRadius: responsiveStyles.borderRadius,
         aspectRatio: isHalfSize ? 2 : 1,
@@ -18952,7 +18995,7 @@ 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$d.content, isHalfSize && {
+    style: [styles$f.content, isHalfSize && {
       justifyContent: 'center'
     }]
   }, children);
@@ -18968,7 +19011,7 @@ var BaseTileHeader = function (_a) {
     marginTop: [8, 8, 12]
   });
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$d.header, {
+    style: [styles$f.header, {
       marginTop: !isHalfSize && artworkUrl ? headerStyle.marginTop : undefined,
       // @ts-ignore
       textAlign: isHalfSize && 'center'
@@ -18990,7 +19033,7 @@ var BaseTileMedia = function (props) {
     source: {
       uri: artworkUrl
     },
-    style: [props.style, styles$d.media, {
+    style: [props.style, styles$f.media, {
       flexBasis: !isHalfSize && hasTitle && hasDescription ? '50%' : '100%',
       height: isHalfSize ? '100%' : undefined
     }]
@@ -19034,7 +19077,7 @@ BaseTile.Content = BaseTileContent;
 BaseTile.Header = BaseTileHeader;
 BaseTile.Title = BaseTileTitle;
 BaseTile.Body = BaseTileBody;
-var styles$d = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -19058,6 +19101,87 @@ var styles$d = StyleSheet$1.create({
 
 var GRID_GAP = 16;
 
+var Skeleton = function (_a) {
+  var style = _a.style,
+    _b = _a.numberOfSquares,
+    numberOfSquares = _b === void 0 ? 4 : _b;
+  var theme = useWllSdk().theme;
+  var animatedValue = React__namespace.useRef(new Animated$1.Value(0)).current;
+  React__namespace.useEffect(function () {
+    var pulseAnimation = Animated$1.loop(Animated$1.sequence([Animated$1.timing(animatedValue, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true
+    }), Animated$1.timing(animatedValue, {
+      toValue: 0,
+      duration: 1000,
+      useNativeDriver: true
+    })]));
+    pulseAnimation.start();
+    return function () {
+      return pulseAnimation.stop();
+    };
+  }, [animatedValue]);
+  var opacity = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.3, 0.7]
+  });
+  var sharedSkeletonStyle = {
+    opacity: opacity,
+    backgroundColor: theme.alphaDerivedText[20],
+    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, {
+      opacity: opacity,
+      backgroundColor: theme.alphaDerivedText[20],
+      borderRadius: 6
+    }]
+  }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
+    style: [styles$e.skeleton, styles$e.body, {
+      opacity: opacity,
+      backgroundColor: theme.alphaDerivedText[20],
+      borderRadius: 6
+    }]
+  }), /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
+    style: [styles$e.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]
+    });
+  })));
+};
+var styles$e = StyleSheet$1.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: GRID_GAP,
+    justifyContent: 'space-between',
+    width: '100%',
+    maxWidth: 1080
+  },
+  title: {
+    height: 40,
+    marginBottom: 10,
+    width: 300
+  },
+  body: {
+    height: 25,
+    width: '85%',
+    marginBottom: 24
+  },
+  skeleton: {
+    overflow: 'hidden'
+  },
+  square: {
+    width: 1000 / 4,
+    aspectRatio: 1
+  }
+});
+
 var BadgeTileInner$1 = function (_a) {
   var tile = _a.tile;
   useWllSdk().theme;
@@ -19067,9 +19191,9 @@ var BadgeTileInner$1 = function (_a) {
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.contentContainer
+    style: styles$d.contentContainer
   }, /*#__PURE__*/React.createElement(BadgeTile$1.Image, null), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$c.textContainer
+    style: styles$d.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) {
@@ -19080,7 +19204,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$c.imageContainer, {
+    style: [styles$d.imageContainer, {
       backgroundColor: theme.alphaDerivedPrimary[20]
     }]
   }, configuration.count === 0 && /*#__PURE__*/React.createElement(Locked, null), /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
@@ -19088,7 +19212,7 @@ var BadgeTileImage = function (props) {
       uri: badgeDetails.artworkUrl
     },
     resizeMode: "contain",
-    style: styles$c.image
+    style: styles$d.image
   })));
 };
 var BadgeTileTitle$1 = function (props) {
@@ -19118,7 +19242,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$c.lockOverlay
+    style: styles$d.lockOverlay
   }, /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: iconSize
@@ -19136,7 +19260,7 @@ BadgeTile$1.Image = BadgeTileImage;
 BadgeTile$1.Title = BadgeTileTitle$1;
 BadgeTile$1.Body = BadgeTileBody;
 BadgeTile$1.Chevron = BadgeTileChevron;
-var styles$c = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   contentContainer: {
     flexDirection: 'column',
     height: '100%'
@@ -19179,7 +19303,7 @@ var BadgeTileInner = function (_a) {
   return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.container
+    style: styles$c.container
   }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Column, {
     justify: "between",
     align: "start"
@@ -19197,12 +19321,12 @@ var BadgeTileMedia = function (_a) {
   var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
   if (!displayUrl) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.header
+    style: styles$c.header
   }, /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: displayUrl
     },
-    style: styles$b.image,
+    style: styles$c.image,
     resizeMode: "contain",
     isDesaturated: shouldDesaturate(type, count)
   })), children);
@@ -19217,7 +19341,7 @@ var BadgeTileTitle = function () {
   if (!displayText) return null;
   return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    style: styles$b.titleText,
+    style: styles$c.titleText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
   }, displayText));
@@ -19229,10 +19353,10 @@ var BadgeTileDescription = function () {
     description = configuration.description;
   if (count === 0 || !description) return null;
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.descriptionContainer
+    style: styles$c.descriptionContainer
   }, /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    style: styles$b.descriptionText,
+    style: styles$c.descriptionText,
     numberOfLines: 2,
     ellipsizeMode: "tail"
   }, description));
@@ -19247,7 +19371,7 @@ 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$c.dateEarnedContainer, {
     backgroundColor: backgroundColor
   }];
   if (type === exports.BadgeTileType.Latest && count === 0) {
@@ -19276,12 +19400,12 @@ var BadgeTileStatus = function () {
     return null;
   }
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$b.indicatorContainer
+    style: styles$c.indicatorContainer
   }, count === 0 ? /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: 20
   }) : /*#__PURE__*/React.createElement(Text, {
-    style: styles$b.countText
+    style: styles$c.countText
   }, count, "x"));
 };
 var BadgeTile = BadgeTileInner;
@@ -19290,7 +19414,7 @@ BadgeTile.Title = BadgeTileTitle;
 BadgeTile.Description = BadgeTileDescription;
 BadgeTile.DateEarned = BadgeTileDateEarned;
 BadgeTile.Status = BadgeTileStatus;
-var styles$b = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   container: {
     flex: 1
   },
@@ -19339,7 +19463,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$a.slideContent
+    style: styles$b.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 () {
@@ -19347,12 +19471,12 @@ var BannerTileMedia = function () {
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$a.mediaContainer
+    style: styles$b.mediaContainer
   }, /*#__PURE__*/React__namespace.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
-    style: styles$a.media
+    style: styles$b.media
   }));
 };
 var BannerTileTitle = function () {
@@ -19364,7 +19488,7 @@ var BannerTileTitle = function () {
     // @ts-ignore
     React__namespace.createElement(Text, {
       variant: "title",
-      style: styles$a.title
+      style: styles$b.title
     }, title)
   );
 };
@@ -19374,7 +19498,7 @@ var BannerTileDescription = function () {
   var description = configuration.description;
   if (!description) return null;
   return /*#__PURE__*/React__namespace.createElement(Text, {
-    style: [styles$a.description, {
+    style: [styles$b.description, {
       color: theme.derivedSurfaceText[20]
     }]
   }, description);
@@ -19393,7 +19517,7 @@ var BannerTileCTA = function () {
     onPress: handlePress
   });
 };
-var styles$a = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   slide: createResponsiveStyle({
     width: '100%',
     maxWidth: 1080,
@@ -19446,13 +19570,13 @@ var ContentTileRoot = function (_a) {
 };
 var ContentTileMedia = function () {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Media, {
-    style: styles$9.media
+    style: styles$a.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$9.content
+    style: styles$a.content
   }, children));
 };
 var ContentTileHeader = function () {
@@ -19461,7 +19585,7 @@ var ContentTileHeader = function () {
 var ContentTileBody = function () {
   return /*#__PURE__*/React__namespace.createElement(BaseTile.Body, null);
 };
-var styles$9 = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   content: createResponsiveStyle({
     paddingHorizontal: [8, 8, 12],
     flex: 1,
@@ -19492,18 +19616,19 @@ var SectionHeader = function (_a) {
     return null;
   }
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$8.sectionHeader
+    style: styles$9.sectionHeader
   }, title && /*#__PURE__*/React.createElement(Text, {
-    style: [styles$8.sectionTitle, {
-      fontWeight: '700'
+    style: [styles$9.sectionTitle, {
+      fontWeight: '700',
+      color: theme.text
     }]
   }, title), description && /*#__PURE__*/React.createElement(Text, {
-    style: [styles$8.sectionDescription, {
-      color: theme.alphaDerivedText[20]
+    style: [styles$9.sectionDescription, {
+      color: theme.alphaDerivedText[80]
     }]
   }, description));
 };
-var styles$8 = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   sectionHeader: createResponsiveStyle({
     marginBottom: [8, 8, 16]
   }),
@@ -19561,11 +19686,11 @@ var Carousel = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$7.container
+    style: styles$8.container
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$7.carouselContainer
+    style: styles$8.carouselContainer
   }, displayControls && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
-    style: [styles$7.navButton, styles$7.navButtonLeft, {
+    style: [styles$8.navButton, styles$8.navButtonLeft, {
       backgroundColor: theme.background
     }],
     onPress: handlePrev
@@ -19581,7 +19706,7 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles$7.carouselContent, {
+    style: [styles$8.carouselContent, {
       width: slideWidth
     }],
     contentContainerStyle: {
@@ -19607,7 +19732,7 @@ var Carousel = function (_a) {
       tile: tile
     }));
   })), displayControls && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
-    style: [styles$7.navButton, styles$7.navButtonRight, {
+    style: [styles$8.navButton, styles$8.navButtonRight, {
       backgroundColor: theme.surface
     }],
     onPress: handleNext
@@ -19616,7 +19741,7 @@ var Carousel = function (_a) {
     size: 20,
     color: theme.primary
   }))), displayControls && /*#__PURE__*/React.createElement(View$2, {
-    style: styles$7.indicators
+    style: styles$8.indicators
   }, bannerTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
       inputRange: [index - 1, index, index + 1],
@@ -19625,7 +19750,7 @@ var Carousel = function (_a) {
     });
     return /*#__PURE__*/React.createElement(Animated$1.View, {
       key: index,
-      style: [styles$7.indicator, {
+      style: [styles$8.indicator, {
         backgroundColor: theme.derivedBackground,
         width: width
       }, index === currentIndex && {
@@ -19635,7 +19760,7 @@ var Carousel = function (_a) {
   }))));
 };
 var buttonSize = 30;
-var styles$7 = StyleSheet$1.create({
+var styles$8 = StyleSheet$1.create({
   container: {
     width: '100%',
     maxWidth: 1080,
@@ -19830,10 +19955,10 @@ var Grid = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$6.grid
+    style: styles$7.grid
   }, renderGrid()));
 };
-var styles$6 = StyleSheet$1.create({
+var styles$7 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -19860,15 +19985,15 @@ var ProgressIndicator = function (_a) {
     progressVariant = 'accent';
   }
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$5.container
+    style: styles$6.container
   }, /*#__PURE__*/React__namespace.createElement(ProgressBar, {
     percentage: percentage,
     variant: progressVariant,
     height: height
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$5.circleContainer]
+    style: [styles$6.circleContainer]
   }, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$5.circle, {
+    style: [styles$6.circle, {
       borderColor: theme.derivedSurface[20],
       backgroundColor: isComplete ? theme.primary : theme.surface,
       borderWidth: isComplete ? 0 : 4
@@ -19879,7 +20004,7 @@ var ProgressIndicator = function (_a) {
     color: theme.primaryText
   }))));
 };
-var styles$5 = StyleSheet$1.create({
+var styles$6 = StyleSheet$1.create({
   container: {
     width: '100%',
     flexDirection: 'row',
@@ -19923,10 +20048,10 @@ var Section = function (_a) {
       sectionData: section
     }
   }, /*#__PURE__*/React.createElement(View$2, {
-    style: styles$4.section
+    style: styles$5.section
   }, renderSectionContent()));
 };
-var styles$4 = StyleSheet$1.create({
+var styles$5 = StyleSheet$1.create({
   section: createResponsiveStyle({
     width: '100%',
     maxWidth: 1080,
@@ -19955,7 +20080,6 @@ var Group = function (_a) {
               return [4 /*yield*/, getGroupByID(id)];
             case 1:
               response = _a.sent();
-              console.log(response.data);
               setGroupData(response.data);
               setLoading(false);
               return [2 /*return*/];
@@ -19966,12 +20090,19 @@ var Group = function (_a) {
     fetchGroup();
   }, [id, getGroupByID]);
   if (loading) {
-    return /*#__PURE__*/React.createElement(ActivityIndicator$1, {
-      size: "large"
-    });
+    return /*#__PURE__*/React.createElement(View$2, {
+      style: styles$4.emptyConatiner
+    }, /*#__PURE__*/React.createElement(Skeleton, null));
   }
   if (!groupData) {
-    return /*#__PURE__*/React.createElement(Text$3, null, "No group data available");
+    return /*#__PURE__*/React.createElement(View$2, {
+      style: styles$4.emptyConatiner
+    }, /*#__PURE__*/React.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.createElement(View$2, null, groupData.sections.sort(function (a, b) {
     // Sort by priority (higher priority first)
@@ -19987,6 +20118,13 @@ var Group = function (_a) {
     });
   }));
 };
+var styles$4 = StyleSheet$1.create({
+  emptyConatiner: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
 
 var PointsTile = function (_a) {
   var tile = _a.tile;
@@ -20064,12 +20202,14 @@ var PointsTileImage = function (_a) {
       marginBottom: isFullSize ? [8, 8, 12] : 0,
       backgroundColor: isFullSize ? theme.alphaDerivedPrimary[20] : theme.surface,
       justifyContent: 'center',
-      alignItems: 'center'
+      alignItems: 'center',
+      overflow: 'hidden'
     }),
     image: {
       width: '100%',
       height: '100%',
-      position: 'absolute'
+      position: 'absolute',
+      resizeMode: 'contain'
     }
   });
   if (!artworkUrl) return null;
@@ -20080,7 +20220,7 @@ var PointsTileImage = function (_a) {
       uri: artworkUrl
     },
     style: styles.image,
-    resizeMode: "cover"
+    resizeMode: "contain"
   }));
 };
 PointsTile.Title = PointsTileTitle;
@@ -20699,6 +20839,7 @@ exports.RewardTileConfig = RewardTileConfig;
 exports.RowHeader = RowHeader;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;
+exports.Skeleton = Skeleton;
 exports.Text = Text;
 exports.TierTile = TierTile$1;
 exports.TierTileConfig = TierTileConfig;