@wlloyalty/wll-react-sdk 1.0.69 → 1.0.71

package/dist/web.js

@@ -7355,7 +7355,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   var writingDirection = componentDirection || contextDirection;
   var supportedProps = pickProps$1(rest);
   supportedProps.dir = componentDirection;
-  supportedProps.style = [styles$i.view$raw, hasTextAncestor && styles$i.inline, props.style];
+  supportedProps.style = [styles$j.view$raw, hasTextAncestor && styles$j.inline, props.style];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -7381,7 +7381,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   });
 });
 View$1.displayName = 'View';
-var styles$i = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7525,7 +7525,7 @@ 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$i.disabled : styles$i.active, typeof style === 'function' ? style(interactionState) : style],
     tabIndex: _tabIndex
   }), typeof children === 'function' ? children(interactionState) : children);
 }
@@ -7535,7 +7535,7 @@ function useForceableState(forced) {
     setBool = _useState[1];
   return [bool || forced, setBool];
 }
-var styles$h = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
@@ -7628,7 +7628,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$g.textHasAncestor$raw : styles$g.text$raw, numberOfLines === 1 && styles$g.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$g.textMultiLine, props.style, selectable === true && styles$g.selectable, selectable === false && styles$g.notSelectable, onPress && styles$g.pressable];
+  }, hasTextAncestor === true ? styles$h.textHasAncestor$raw : styles$h.text$raw, numberOfLines === 1 && styles$h.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$h.textMultiLine, props.style, selectable === true && styles$h.selectable, selectable === false && styles$h.notSelectable, onPress && styles$h.pressable];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -7673,7 +7673,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$g = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -8762,17 +8762,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$f.container, style]
+    style: [styles$g.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$f.animation, !animating && styles$f.animationPause, !animating && hidesWhenStopped && styles$f.hidesWhenStopped]
+    } : indicatorSizes[size], styles$g.animation, !animating && styles$g.animationPause, !animating && hidesWhenStopped && styles$g.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$f = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8813,7 +8813,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$e.container, {
+    style: [styles$f.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8822,7 +8822,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$e = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -9136,14 +9136,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$d.scrollDisabled, hideScrollbar && styles$d.hideScrollbar]
+    style: [style, !scrollEnabled && styles$e.scrollDisabled, hideScrollbar && styles$e.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$d = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -9782,7 +9782,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$c.stickyHeader, pagingEnabled && styles$c.pagingEnabledChild]
+          style: [isSticky && styles$d.stickyHeader, pagingEnabled && styles$d.pagingEnabledChild]
         }, child);
       } else {
         return child;
@@ -9792,10 +9792,10 @@ let ScrollView$1 = class ScrollView extends React.Component {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$c.contentContainerHorizontal, centerContent && styles$c.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$d.contentContainerHorizontal, centerContent && styles$d.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$c.baseHorizontal : styles$c.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$c.pagingEnabledHorizontal : styles$c.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$d.baseHorizontal : styles$d.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$d.pagingEnabledHorizontal : styles$d.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9838,7 +9838,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$c = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -11051,7 +11051,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$b.rowReverse, inversionStyle] : [styles$b.columnReverse, inversionStyle] : horizontal ? [styles$b.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$c.rowReverse, inversionStyle] : [styles$c.columnReverse, inversionStyle] : horizontal ? [styles$c.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -11071,7 +11071,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$b = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -12251,7 +12251,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$a.horizontallyInverted : styles$a.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$b.horizontallyInverted : styles$b.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -12415,7 +12415,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$a.debug
+        style: styles$b.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -12532,20 +12532,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$a.debugOverlayBase, styles$a.debugOverlay]
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$a.debugOverlayBase, styles$a.debugOverlayFrame, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$a.debugOverlayBase, styles$a.debugOverlayFrameLast, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$a.debugOverlayBase, styles$a.debugOverlayFrameVis, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12686,7 +12686,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$a = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -13063,7 +13063,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$9.row, columnWrapperStyle]
+            style: [styles$a.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -13189,7 +13189,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$9 = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -15576,7 +15576,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$8.accessibilityImage$raw,
+    style: styles$9.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -15648,14 +15648,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$8.root, hasTextAncestor && styles$8.inline, imageSizeStyle, style, styles$8.undo,
+    style: [styles$9.root, hasTextAncestor && styles$9.inline, imageSizeStyle, style, styles$9.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$8.image, resizeModeStyles[resizeMode], {
+    style: [styles$9.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15677,7 +15677,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$8 = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18808,11 +18808,11 @@ var ProgressiveImage = function (_a) {
     tintColor: isDesaturated ? desaturatedColor : undefined
   };
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$7.container, style, {
+    style: [styles$8.container, style, {
       backgroundColor: backgroundColor
     }]
   }, /*#__PURE__*/React.createElement(Animated$1.View, {
-    style: [styles$7.imageOverlay, {
+    style: [styles$8.imageOverlay, {
       backgroundColor: backgroundColor,
       opacity: imageAnimated.interpolate({
         inputRange: [0, 1],
@@ -18821,14 +18821,14 @@ var ProgressiveImage = function (_a) {
     }]
   }), /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
     source: source,
-    style: [styles$7.imageOverlay, __assign({
+    style: [styles$8.imageOverlay, __assign({
       opacity: imageAnimated
     }, desaturationStyle)],
     onLoad: onImageLoad,
     accessibilityLabel: alt
   })));
 };
-var styles$7 = StyleSheet$1.create({
+var styles$8 = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -19085,7 +19085,7 @@ var BaseBanner = function (_a) {
     testID: testID || 'banner-tile',
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$6.container, style, {
+      return [styles$7.container, style, {
         backgroundColor: theme.surface,
         borderRadius: theme.sizes.borderRadiusLg,
         opacity: pressed ? 0.7 : 1
@@ -19098,7 +19098,7 @@ var BaseBanner = function (_a) {
     accessibilityLabel: accessibilityLabel || "".concat(title).concat(!hasCTA && ctaLink ? ' - Click to open' : '')
   }, children));
 };
-var styles$6 = StyleSheet$1.create({
+var styles$7 = StyleSheet$1.create({
   container: {
     width: '100%',
     maxWidth: MAX_WIDTH,
@@ -19467,12 +19467,12 @@ var Indicator = function () {
     return 'Mobile Layout';
   };
   return /*#__PURE__*/React.createElement(View$2, {
-    style: styles$5.indicator
+    style: styles$6.indicator
   }, /*#__PURE__*/React.createElement(Text$3, {
-    style: styles$5.indicatorText
+    style: styles$6.indicatorText
   }, getCurrentLayout()));
 };
-var styles$5 = StyleSheet$1.create({
+var styles$6 = StyleSheet$1.create({
   indicator: {
     position: 'absolute',
     top: 10,
@@ -19516,14 +19516,14 @@ var SkeletonTile = function (_a) {
     outputRange: [0.3, 0.7]
   });
   return /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$4.container, {
+    style: [styles$5.container, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
       borderRadius: theme.sizes.borderRadiusLg
     }, style]
   });
 };
-var styles$4 = StyleSheet$1.create({
+var styles$5 = StyleSheet$1.create({
   container: {
     aspectRatio: 1,
     overflow: 'hidden',
@@ -19560,19 +19560,19 @@ var Skeleton = function (_a) {
   return /*#__PURE__*/React__namespace.createElement(View$2, {
     testID: "loading-skeleton"
   }, /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
-    style: [styles$3.skeleton, styles$3.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$3.skeleton, styles$3.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$3.container, style]
+    style: [styles$4.container, style]
   }, Array.from({
     length: numberOfSquares
   }).map(function (_, index) {
@@ -19581,7 +19581,7 @@ var Skeleton = function (_a) {
     });
   })));
 };
-var styles$3 = StyleSheet$1.create({
+var styles$4 = StyleSheet$1.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -20615,10 +20615,10 @@ var Grid = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React.createElement(View$2, {
-    style: styles$2.grid
+    style: styles$3.grid
   }, renderTileContainers()));
 };
-var styles$2 = StyleSheet$1.create({
+var styles$3 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -20646,15 +20646,15 @@ var ProgressIndicator = function (_a) {
     progressVariant = 'accent';
   }
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: styles$1.container
+    style: styles$2.container
   }, /*#__PURE__*/React__namespace.createElement(ProgressBar, {
     percentage: percentage,
     variant: progressVariant,
     height: height
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$1.circleContainer]
+    style: [styles$2.circleContainer]
   }, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$1.circle, {
+    style: [styles$2.circle, {
       borderColor: theme.derivedSurface[20],
       backgroundColor: isComplete ? theme.primary : theme.surface,
       borderWidth: isComplete ? 0 : 4
@@ -20665,7 +20665,7 @@ var ProgressIndicator = function (_a) {
     color: theme.primaryText
   })))));
 };
-var styles$1 = StyleSheet$1.create({
+var styles$2 = StyleSheet$1.create({
   container: {
     width: '100%',
     flexDirection: 'row',
@@ -20988,9 +20988,11 @@ var GroupSections = function () {
     });
   }
   var sortedSections = sortByPriority(activeSections);
-  return /*#__PURE__*/React.createElement(View$2, {
+  var Container = IS_WEB ? View$2 : ScrollView$2;
+  return /*#__PURE__*/React.createElement(Container, {
     accessible: true,
-    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group')
+    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'),
+    contentContainerStyle: !IS_WEB ? styles$1.container : undefined
   }, sortedSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       key: section.id,
@@ -21040,6 +21042,11 @@ var Group = function (_a) {
     "data-testid": "group-container"
   }, /*#__PURE__*/React.createElement(GroupSections, null)));
 };
+var styles$1 = StyleSheet$1.create({
+  container: __assign({}, IS_WEB ? {} : {
+    padding: GRID_GAP
+  })
+});
 
 /**
  * Cleans up a number by removing any whitespace and ensuring it's a valid number