@wlloyalty/wll-react-sdk 1.0.107 → 1.0.108

package/dist/types/components/atoms/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Skeleton from './index';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const FewerTiles: Story;
+export declare const CustomStyle: Story;

package/dist/web.js

@@ -19038,22 +19038,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, variantStyle, styles.webOverrides, style];
   return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
@@ -19680,11 +19680,51 @@ var styles$5 = StyleSheet$1.create({
 
 var GRID_GAP = 16;
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * 
+ */
+
+function useWindowDimensions() {
+  var _useState = React.useState(() => Dimensions.get('window')),
+    dims = _useState[0],
+    setDims = _useState[1];
+  React.useEffect(() => {
+    function handleChange(_ref) {
+      var window = _ref.window;
+      if (window != null) {
+        setDims(window);
+      }
+    }
+    Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDims(Dimensions.get('window'));
+    return () => {
+      Dimensions.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return dims;
+}
+
 /* istanbul ignore file */
 var SkeletonTile = function (_a) {
   var style = _a.style;
   var theme = useWllSdk().theme;
   var animatedValue = React__namespace.useRef(new Animated$1.Value(0)).current;
+  var width = 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 = Animated$1.loop(Animated$1.sequence([Animated$1.timing(animatedValue, {
       toValue: 1,
@@ -19708,15 +19748,16 @@ var SkeletonTile = function (_a) {
     style: [styles$4.container, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
-      borderRadius: theme.sizes.borderRadiusLg
+      borderRadius: theme.sizes.borderRadiusLg,
+      width: tileWidth,
+      height: tileHeight
     }, style]
   });
 };
 var styles$4 = StyleSheet$1.create({
   container: {
     aspectRatio: 1,
-    overflow: 'hidden',
-    width: 1000 / 4
+    overflow: 'hidden'
   }
 });
 
@@ -20556,39 +20597,6 @@ exports.SectionType = void 0;
   SectionType["Banner"] = "BANNER";
 })(exports.SectionType || (exports.SectionType = {}));
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * 
- */
-
-function useWindowDimensions() {
-  var _useState = React.useState(() => Dimensions.get('window')),
-    dims = _useState[0],
-    setDims = _useState[1];
-  React.useEffect(() => {
-    function handleChange(_ref) {
-      var window = _ref.window;
-      if (window != null) {
-        setDims(window);
-      }
-    }
-    Dimensions.addEventListener('change', handleChange);
-    // We might have missed an update between calling `get` in render and
-    // `addEventListener` in this handler, so we set it here. If there was
-    // no change, React will filter out this update as a no-op.
-    setDims(Dimensions.get('window'));
-    return () => {
-      Dimensions.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return dims;
-}
-
 var useSectionHeaderStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -21214,7 +21222,7 @@ var Section = function (_a) {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(Skeleton, {
         "aria-label": "Loading section content",
-        numberOfSquares: 4
+        numberOfSquares: IS_WEB ? 4 : 2
       });
     }
     if (error || !sectionData) {
@@ -21478,12 +21486,18 @@ var Group = function (_a) {
     groupData = _b.groupData,
     isLoading = _b.isLoading,
     error = _b.error;
+  var theme = useWllSdk().theme;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer,
+      style: {
+        flex: 1,
+        padding: theme.sizes.lg
+      },
       accessible: true,
       accessibilityLabel: "Loading group data"
-    }, /*#__PURE__*/React.createElement(Skeleton, null));
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      numberOfSquares: IS_WEB ? 4 : 2
+    }));
   }
   if (error || !groupData) {
     return /*#__PURE__*/React.createElement(GroupEmptyState, {