@wlloyalty/wll-react-sdk 1.0.68 → 1.0.70

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import * as react_native from 'react-native';
 import { ViewProps, ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps } from 'react-native';
 import * as React$1 from 'react';
 import React__default from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare const sizes: {
     readonly borderRadiusSm: 15;
@@ -532,7 +531,7 @@ declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
 type GridProps = {
     section: TSection;
 };
-declare const Grid: ({ section }: GridProps) => react_jsx_runtime.JSX.Element | null;
+declare const Grid: ({ section }: GridProps) => React__default.JSX.Element | null;
 
 type ProgressIndicatorProps = {
     currentPoints: number;
@@ -557,17 +556,17 @@ type WithTileFetchingProps = {
 type BadgeTileProps = {
     tile: Tile;
 };
-declare const _default$5: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default$5: (props: Omit<BadgeTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type BannerTileProps = {
     tile: Tile;
 };
-declare const _default$4: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default$4: (props: Omit<BannerTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type ContentTileProps = {
     tile: Tile;
 };
-declare const _default$3: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default$3: (props: Omit<ContentTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type TGroup = {
     name: string;
@@ -598,17 +597,17 @@ declare const Group: ({ id }: GroupProps) => JSX.Element | null;
 type PointsTileProps = {
     tile: Tile;
 };
-declare const _default$2: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default$2: (props: Omit<PointsTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type RewardCategoryTileProps = {
     tile: Tile;
 };
-declare const _default$1: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default$1: (props: Omit<RewardCategoryTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type RewardTileProps = {
     tile: Tile;
 };
-declare const _default: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => react_jsx_runtime.JSX.Element;
+declare const _default: (props: Omit<RewardTileProps, "tile"> & WithTileFetchingProps) => React__default.JSX.Element;
 
 type SectionProps = {
     section?: TSection;

package/dist/native.js

@@ -2133,14 +2133,14 @@ var Icon = function (_a) {
 var LoadingIndicator = function () {
     var theme = useWllSdk().theme;
     return (jsxRuntimeExports.jsx(reactNative.View, { style: [
-            styles$8.container,
+            styles$9.container,
             {
                 borderRadius: theme.sizes.borderRadiusSm,
                 padding: theme.sizes.md,
             },
         ], children: jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: theme.primary }) }));
 };
-var styles$8 = reactNative.StyleSheet.create({
+var styles$9 = reactNative.StyleSheet.create({
     container: {
         width: '100%',
         height: '100%',
@@ -2235,8 +2235,8 @@ var ProgressiveImage = function (_a) {
         : {
             tintColor: isDesaturated ? desaturatedColor : undefined,
         };
-    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$7.imageOverlay,
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$8.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
+                    styles$8.imageOverlay,
                     {
                         backgroundColor: backgroundColor,
                         opacity: imageAnimated.interpolate({
@@ -2245,11 +2245,11 @@ var ProgressiveImage = function (_a) {
                         }),
                     },
                 ] }), jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
-                    styles$7.imageOverlay,
+                    styles$8.imageOverlay,
                     __assign({ opacity: imageAnimated }, desaturationStyle),
                 ], onLoad: onImageLoad, accessibilityLabel: alt }))] }));
 };
-var styles$7 = reactNative.StyleSheet.create({
+var styles$8 = reactNative.StyleSheet.create({
     imageOverlay: {
         position: 'absolute',
         left: 0,
@@ -2478,7 +2478,7 @@ var BaseBanner = function (_a) {
     return (jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: jsxRuntimeExports.jsx(reactNative.Pressable, { testID: testID || 'banner-tile', style: function (_a) {
                 var pressed = _a.pressed;
                 return [
-                    styles$6.container,
+                    styles$7.container,
                     style,
                     {
                         backgroundColor: theme.surface,
@@ -2489,7 +2489,7 @@ var BaseBanner = function (_a) {
             }, onPress: hasCTA ? undefined : handlePress, disabled: !ctaLink || hasCTA, accessible: true, role: hasCTA ? 'article' : 'button', accessibilityLabel: accessibilityLabel ||
                 "".concat(title).concat(!hasCTA && ctaLink ? ' - Click to open' : ''), children: children }) }));
 };
-var styles$6 = reactNative.StyleSheet.create({
+var styles$7 = reactNative.StyleSheet.create({
     container: {
         width: '100%',
         maxWidth: MAX_WIDTH,
@@ -2797,9 +2797,9 @@ var Indicator = function () {
             return 'Tablet Layout';
         return 'Mobile Layout';
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$5.indicator, children: jsxRuntimeExports.jsx(reactNative.Text, { style: styles$5.indicatorText, children: getCurrentLayout() }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$6.indicator, children: jsxRuntimeExports.jsx(reactNative.Text, { style: styles$6.indicatorText, children: getCurrentLayout() }) }));
 };
-var styles$5 = reactNative.StyleSheet.create({
+var styles$6 = reactNative.StyleSheet.create({
     indicator: {
         position: 'absolute',
         top: 10,
@@ -2843,7 +2843,7 @@ var SkeletonTile = function (_a) {
         outputRange: [0.3, 0.7],
     });
     return (jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-            styles$4.container,
+            styles$5.container,
             {
                 opacity: opacity,
                 backgroundColor: theme.alphaDerivedText[20],
@@ -2852,7 +2852,7 @@ var SkeletonTile = function (_a) {
             style,
         ] }));
 };
-var styles$4 = reactNative.StyleSheet.create({
+var styles$5 = reactNative.StyleSheet.create({
     container: {
         aspectRatio: 1,
         overflow: 'hidden',
@@ -2885,24 +2885,24 @@ var Skeleton = function (_a) {
         outputRange: [0.3, 0.7],
     });
     return (jsxRuntimeExports.jsxs(reactNative.View, { testID: "loading-skeleton", children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$3.skeleton,
-                    styles$3.title,
+                    styles$4.skeleton,
+                    styles$4.title,
                     {
                         opacity: opacity,
                         backgroundColor: theme.alphaDerivedText[20],
                         borderRadius: 6,
                     },
                 ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$3.skeleton,
-                    styles$3.body,
+                    styles$4.skeleton,
+                    styles$4.body,
                     {
                         opacity: opacity,
                         backgroundColor: theme.alphaDerivedText[20],
                         borderRadius: 6,
                     },
-                ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$3.container, style], children: Array.from({ length: numberOfSquares }).map(function (_, index) { return (jsxRuntimeExports.jsx(SkeletonTile, {}, index)); }) })] }));
+                ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$4.container, style], children: Array.from({ length: numberOfSquares }).map(function (_, index) { return (jsxRuntimeExports.jsx(SkeletonTile, {}, index)); }) })] }));
 };
-var styles$3 = reactNative.StyleSheet.create({
+var styles$4 = reactNative.StyleSheet.create({
     container: {
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -3652,6 +3652,7 @@ var Grid = function (_a) {
                 width: "calc(".concat(100 / columns, "% - ").concat(((columns - 1) * GRID_GAP) / columns, "px)"),
                 marginBottom: GRID_GAP,
                 height: 'auto',
+                aspectRatio: 1,
             };
         }
         else {
@@ -3659,7 +3660,7 @@ var Grid = function (_a) {
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
-                height: 'auto',
+                aspectRatio: 1,
             };
         }
     }, []);
@@ -3702,9 +3703,9 @@ var Grid = function (_a) {
         });
         return tileContainers;
     }, [gridTiles, columnsPerRow, getTileWidth]);
-    return (jsxRuntimeExports.jsxs(reactNative.View, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsx(reactNative.View, { style: styles$2.grid, children: renderTileContainers() })] }));
+    return (jsxRuntimeExports.jsxs(reactNative.View, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsx(reactNative.View, { style: styles$3.grid, children: renderTileContainers() })] }));
 };
-var styles$2 = reactNative.StyleSheet.create({
+var styles$3 = reactNative.StyleSheet.create({
     grid: {
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -3724,8 +3725,8 @@ var ProgressIndicator = function (_a) {
     else if (percentage < 50) {
         progressVariant = 'accent';
     }
-    return (jsxRuntimeExports.jsxs(reactNative.View, { style: styles$1.container, children: [jsxRuntimeExports.jsx(ProgressBar, { percentage: percentage, variant: progressVariant, height: height }), jsxRuntimeExports.jsx(reactNative.View, { style: [styles$1.circleContainer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [
-                        styles$1.circle,
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: styles$2.container, children: [jsxRuntimeExports.jsx(ProgressBar, { percentage: percentage, variant: progressVariant, height: height }), jsxRuntimeExports.jsx(reactNative.View, { style: [styles$2.circleContainer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [
+                        styles$2.circle,
                         {
                             borderColor: theme.derivedSurface[20],
                             backgroundColor: isComplete ? theme.primary : theme.surface,
@@ -3733,7 +3734,7 @@ var ProgressIndicator = function (_a) {
                         },
                     ], children: isComplete && (jsxRuntimeExports.jsx(Icon, { name: "Check", size: 12, color: theme.primaryText })) }) })] }));
 };
-var styles$1 = reactNative.StyleSheet.create({
+var styles$2 = reactNative.StyleSheet.create({
     container: {
         width: '100%',
         flexDirection: 'row',
@@ -3984,7 +3985,8 @@ var GroupSections = function () {
         return (jsxRuntimeExports.jsx(GroupEmptyState, { message: "This group doesn't have any active sections" }));
     }
     var sortedSections = sortByPriority(activeSections);
-    return (jsxRuntimeExports.jsx(reactNative.View, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
+    var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
+    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), style: styles$1.container, children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
 };
 /**
  * A page-level component that represents a Group view in the application.
@@ -4013,6 +4015,9 @@ var Group = function (_a) {
     }
     return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { "data-testid": "group-container", children: jsxRuntimeExports.jsx(GroupSections, {}) }) }));
 };
+var styles$1 = reactNative.StyleSheet.create({
+    container: __assign({}, (IS_WEB ? {} : { padding: GRID_GAP })),
+});
 
 /**
  * Cleans up a number by removing any whitespace and ensuring it's a valid number