@wlloyalty/wll-react-sdk 1.0.71 → 1.0.73

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$9.container,
+            styles$8.container,
             {
                 borderRadius: theme.sizes.borderRadiusSm,
                 padding: theme.sizes.md,
             },
         ], children: jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: theme.primary }) }));
 };
-var styles$9 = reactNative.StyleSheet.create({
+var styles$8 = 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$8.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$8.imageOverlay,
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
+                    styles$7.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$8.imageOverlay,
+                    styles$7.imageOverlay,
                     __assign({ opacity: imageAnimated }, desaturationStyle),
                 ], onLoad: onImageLoad, accessibilityLabel: alt }))] }));
 };
-var styles$8 = reactNative.StyleSheet.create({
+var styles$7 = 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$7.container,
+                    styles$6.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$7 = reactNative.StyleSheet.create({
+var styles$6 = 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$6.indicator, children: jsxRuntimeExports.jsx(reactNative.Text, { style: styles$6.indicatorText, children: getCurrentLayout() }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$5.indicator, children: jsxRuntimeExports.jsx(reactNative.Text, { style: styles$5.indicatorText, children: getCurrentLayout() }) }));
 };
-var styles$6 = reactNative.StyleSheet.create({
+var styles$5 = 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$5.container,
+            styles$4.container,
             {
                 opacity: opacity,
                 backgroundColor: theme.alphaDerivedText[20],
@@ -2852,7 +2852,7 @@ var SkeletonTile = function (_a) {
             style,
         ] }));
 };
-var styles$5 = reactNative.StyleSheet.create({
+var styles$4 = 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$4.skeleton,
-                    styles$4.title,
+                    styles$3.skeleton,
+                    styles$3.title,
                     {
                         opacity: opacity,
                         backgroundColor: theme.alphaDerivedText[20],
                         borderRadius: 6,
                     },
                 ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
-                    styles$4.skeleton,
-                    styles$4.body,
+                    styles$3.skeleton,
+                    styles$3.body,
                     {
                         opacity: opacity,
                         backgroundColor: theme.alphaDerivedText[20],
                         borderRadius: 6,
                     },
-                ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$4.container, style], children: Array.from({ length: numberOfSquares }).map(function (_, index) { return (jsxRuntimeExports.jsx(SkeletonTile, {}, index)); }) })] }));
+                ] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$3.container, style], children: Array.from({ length: numberOfSquares }).map(function (_, index) { return (jsxRuntimeExports.jsx(SkeletonTile, {}, index)); }) })] }));
 };
-var styles$4 = reactNative.StyleSheet.create({
+var styles$3 = reactNative.StyleSheet.create({
     container: {
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -3656,7 +3656,9 @@ var Grid = function (_a) {
             };
         }
         else {
-            var tileWidth = (SCREEN_WIDTH - (columns - 1) * GRID_GAP) / columns;
+            // Account for horizontal padding (GRID_GAP on both sides)
+            var adjustedScreenWidth = SCREEN_WIDTH - 2 * GRID_GAP;
+            var tileWidth = (adjustedScreenWidth - (columns - 1) * GRID_GAP) / columns;
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
@@ -3703,9 +3705,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$3.grid, children: renderTileContainers() })] }));
+    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() })] }));
 };
-var styles$3 = reactNative.StyleSheet.create({
+var styles$2 = reactNative.StyleSheet.create({
     grid: {
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -3725,8 +3727,8 @@ var ProgressIndicator = function (_a) {
     else if (percentage < 50) {
         progressVariant = 'accent';
     }
-    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,
+    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,
                         {
                             borderColor: theme.derivedSurface[20],
                             backgroundColor: isComplete ? theme.primary : theme.surface,
@@ -3734,7 +3736,7 @@ var ProgressIndicator = function (_a) {
                         },
                     ], children: isComplete && (jsxRuntimeExports.jsx(Icon, { name: "Check", size: 12, color: theme.primaryText })) }) })] }));
 };
-var styles$2 = reactNative.StyleSheet.create({
+var styles$1 = reactNative.StyleSheet.create({
     container: {
         width: '100%',
         flexDirection: 'row',
@@ -3765,12 +3767,7 @@ var useSectionStyles = function () {
     var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
     var theme = useWllSdk().theme;
     return reactNative.StyleSheet.create({
-        section: {
-            width: '100%',
-            maxWidth: MAX_WIDTH,
-            marginHorizontal: 'auto',
-            marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, isDesktop, isTablet),
-        },
+        section: __assign({ width: '100%', maxWidth: IS_WEB ? MAX_WIDTH : MAX_WIDTH - GRID_GAP * 2, marginHorizontal: 'auto', marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, isDesktop, isTablet) }, (IS_WEB ? {} : { paddingHorizontal: GRID_GAP })),
     });
 };
 
@@ -3986,7 +3983,7 @@ var GroupSections = function () {
     }
     var sortedSections = sortByPriority(activeSections);
     var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
-    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), contentContainerStyle: !IS_WEB ? styles$1.container : undefined, children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
+    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), 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.
@@ -4015,9 +4012,6 @@ 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