@wlloyalty/wll-react-sdk 1.0.107 → 1.0.108

package/dist/native.js

@@ -2427,22 +2427,22 @@ var Text = function (_a) {
     var accessibilityRole;
     switch (variant) {
         case 'title':
-            accessibilityRole = 'header';
+            accessibilityRole = IS_MOBILE ? 'heading' : 'header';
             break;
         case 'caption':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
             break;
         case 'eyebrow':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
             break;
         case 'description':
-            accessibilityRole = 'paragraph';
+            accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
             break;
         case 'label':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'option' : 'text';
             break;
         default:
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
     }
     var combinedStyles = [
         styles.base,
@@ -2995,6 +2995,13 @@ var SkeletonTile = function (_a) {
     var style = _a.style;
     var theme = useWllSdk().theme;
     var animatedValue = React__namespace.useRef(new reactNative.Animated.Value(0)).current;
+    var width = reactNative.useWindowDimensions().width;
+    var tileWidth = 1000 / 4;
+    var tileHeight = tileWidth;
+    if (IS_MOBILE) {
+        tileWidth = width / 2 - theme.sizes.lg * 2;
+        tileHeight = tileWidth;
+    }
     React__namespace.useEffect(function () {
         var pulseAnimation = reactNative.Animated.loop(reactNative.Animated.sequence([
             reactNative.Animated.timing(animatedValue, {
@@ -3021,6 +3028,8 @@ var SkeletonTile = function (_a) {
                 opacity: opacity,
                 backgroundColor: theme.alphaDerivedText[20],
                 borderRadius: theme.sizes.borderRadiusLg,
+                width: tileWidth,
+                height: tileHeight,
             },
             style,
         ] }));
@@ -3029,7 +3038,6 @@ var styles$4 = reactNative.StyleSheet.create({
     container: {
         aspectRatio: 1,
         overflow: 'hidden',
-        width: 1000 / 4,
     },
 });
 
@@ -4180,7 +4188,7 @@ var Section = function (_a) {
     }
     var renderSectionContent = function () {
         if (isLoading) {
-            return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: 4 }));
+            return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: IS_WEB ? 4 : 2 }));
         }
         if (error || !sectionData) {
             return jsxRuntimeExports.jsx(EmptyState, { message: error || 'No section data available.' });
@@ -4376,8 +4384,12 @@ var Group = function (_a) {
         return null;
     }
     var _b = useGroupData(id), groupData = _b.groupData, isLoading = _b.isLoading, error = _b.error;
+    var theme = useWllSdk().theme;
     if (isLoading) {
-        return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, {}) }));
+        return (jsxRuntimeExports.jsx(reactNative.View, { style: {
+                flex: 1,
+                padding: theme.sizes.lg,
+            }, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, { numberOfSquares: IS_WEB ? 4 : 2 }) }));
     }
     if (error || !groupData) {
         return jsxRuntimeExports.jsx(GroupEmptyState, { message: error || 'No group data available' });