@telus-uds/components-base 3.1.0 → 3.3.0

package/lib/esm/Carousel/Carousel.js

@@ -20,7 +20,8 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, HERO_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
+import Box from '../Box';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -41,6 +42,24 @@ const staticStyles = StyleSheet.create({
     zIndex: 1,
     right: Platform.OS === 'web' ? undefined : 40,
     top: 40
+  },
+  heroMainContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    zIndex: -1
+  },
+  heroSwipeArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    flexDirection: 'row'
   }
 });
 const selectContainerStyles = width => ({
@@ -53,6 +72,10 @@ const selectSwipeAreaStyles = (count, width, enablePeeking, enableDisplayMultipl
   justifyContent: enablePeeking || enableDisplayMultipleItemsPerSlide ? 'flex-start' : 'space-between',
   flexDirection: 'row'
 });
+const selectHeroContainerStyles = (width, hidden) => ({
+  width,
+  visibility: hidden ? 'hidden' : 'visible'
+});
 const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
 const selectControlButtonPositionStyles = _ref => {
   let {
@@ -61,19 +84,13 @@ const selectControlButtonPositionStyles = _ref => {
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
     enablePeeking,
-    enableDisplayMultipleItemsPerSlide,
-    enableHero,
-    viewport
+    enableDisplayMultipleItemsPerSlide
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2);
   } else if (positionVariant === 'inside') {
-    if (enableHero && viewport === 'xl') {
-      styles[positionProperty] = HERO_POSITION_OFFSET;
-    } else {
-      styles[positionProperty] = DEFAULT_POSITION_OFFSET;
-    }
+    styles[positionProperty] = DEFAULT_POSITION_OFFSET;
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0;
@@ -83,7 +100,7 @@ const selectControlButtonPositionStyles = _ref => {
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -103,9 +120,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide,
-      enableHero,
-      viewport
+      enableDisplayMultipleItemsPerSlide
     })
   };
 };
@@ -163,15 +178,12 @@ const selectMainContainerStyles = (enableHero, viewport) => {
   }
   return {};
 };
-const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
-  let marginTop = 0;
+const selectNavigationStyles = (tabs, enableHero, viewport) => {
   let marginHorizontal = 0;
   if (enableHero && tabs) {
-    marginTop = -tabsPanelHeight;
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN;
   }
   return {
-    marginTop,
     marginHorizontal
   };
 };
@@ -303,6 +315,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
     stepTrackerVariant,
+    progressBarVariant = {
+      style: 'subtle'
+    },
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -320,7 +335,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
     }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
-      variant: stepTrackerVariant,
+      stepTrackerVariant: stepTrackerVariant,
+      progressBarVariant: progressBarVariant,
       enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
     }),
     tag = 'ul',
@@ -372,11 +388,21 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     height: 0
   });
   const containerLayoutRef = React.useRef(containerLayout);
+  const [heroContainerLayout, setHeroContainerLayout] = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const heroContainerLayoutRef = React.useRef(heroContainerLayout);
   const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
   const firstFocusRef = React.useRef(null);
   const pan = React.useRef(new Animated.ValueXY()).current;
   const animatedX = React.useRef(0);
   const animatedY = React.useRef(0);
+  const heroPan = React.useRef(new Animated.ValueXY()).current;
+  const heroAnimatedX = React.useRef(0);
+  const heroAnimatedY = React.useRef(0);
   const [isAnimating, setIsAnimating] = React.useState(false);
   /**
    * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
@@ -409,8 +435,20 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       x: 0,
       y: 0
     });
-  }, [pan, animatedX]);
-  const animate = React.useCallback((toValue, toIndex) => {
+    if (enableHero) {
+      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1;
+      heroAnimatedY.current = 0;
+      heroPan.setOffset({
+        x: heroAnimatedX.current,
+        y: heroAnimatedY.current
+      });
+      heroPan.setValue({
+        x: 0,
+        y: 0
+      });
+    }
+  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero]);
+  const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -418,33 +456,33 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       return handleAnimationEnd(toIndex, ...args);
     };
     if (reduceMotionRef.current || isSwiping.current) {
-      Animated.timing(pan, {
+      Animated.timing(panToAnimate, {
         toValue,
         duration: 1,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
-      Animated.timing(pan, {
+      Animated.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-      Animated.timing(pan, {
+      Animated.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration ? transitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
-      Animated.spring(pan, {
+      Animated.spring(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -476,14 +514,25 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
-      animate(toValue, index);
+      animate(pan, toValue, index);
+      if (enableHero) {
+        animate(heroPan, toValue, index);
+      }
       return calcDelta;
     }
     stopAutoplay();
     setActiveIndex(index);
     const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
     toValue.x = finalWidth * -1 * calcDelta;
-    animate(toValue, index);
+    const heroToValue = {
+      x: 0,
+      y: 0
+    };
+    heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
+    animate(pan, toValue, index);
+    if (enableHero) {
+      animate(heroPan, heroToValue, index);
+    }
     if (isCarouselPlaying) {
       stopAutoplay();
       if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
@@ -499,7 +548,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
-  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, totalItems, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled, viewport, enablePeeking]);
+  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, totalItems, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled, viewport, enablePeeking, pan, heroPan, enableHero]);
   const startAutoplay = React.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
@@ -522,7 +571,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
-  const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0);
   React.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
@@ -532,6 +580,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   React.useEffect(() => {
     containerLayoutRef.current = containerLayout;
   }, [containerLayout]);
+  React.useEffect(() => {
+    heroContainerLayoutRef.current = heroContainerLayout;
+  }, [heroContainerLayout]);
   React.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
@@ -545,6 +596,20 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       } = _ref5;
       animatedY.current = value;
     });
+    if (enableHero) {
+      heroPan.x.addListener(_ref6 => {
+        let {
+          value
+        } = _ref6;
+        heroAnimatedX.current = value;
+      });
+      heroPan.y.addListener(_ref7 => {
+        let {
+          value
+        } = _ref7;
+        heroAnimatedY.current = value;
+      });
+    }
     if (isCarouselPlaying) {
       startAutoplay();
     }
@@ -552,8 +617,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
       pan.x.removeAllListeners();
       pan.y.removeAllListeners();
+      if (enableHero) {
+        heroPan.x.removeAllListeners();
+        heroPan.y.removeAllListeners();
+      }
     };
-  }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  }, [pan.x, pan.y, heroPan.x, heroPan.y, startAutoplay, stopAutoplay, isCarouselPlaying, enableHero]);
   React.useEffect(() => {
     const subscription = Dimensions.addEventListener('change', () => {
       updateOffset();
@@ -574,10 +643,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onTabsPanelLayout = event => {
-    setTabsPanelHeight(event.nativeEvent.layout.height);
-  };
-  const onContainerLayout = _ref6 => {
+  const onContainerLayout = _ref8 => {
     let {
       nativeEvent: {
         layout: {
@@ -587,7 +653,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref6;
+    } = _ref8;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -596,14 +662,33 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref7 => {
+  const onHeroContainerLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          x,
+          y,
+          width,
+          height
+        }
+      }
+    } = _ref9;
+    return setHeroContainerLayout(prevState => ({
+      ...prevState,
+      x,
+      y,
+      width,
+      height
+    }));
+  };
+  const onPreviousNextNavigationButtonLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref7;
+    } = _ref10;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = React.useCallback(() => {
@@ -644,7 +729,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
       const correction = gesture.moveX - gesture.x0;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-        animate({
+        animate(pan, {
           x: 0,
           y: 0
         }, 0);
@@ -654,7 +739,47 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
       isSwiping.current = false;
     }
-  }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  }), [pan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  const heroPanResponder = React.useMemo(() => PanResponder.create({
+    onPanResponderTerminationRequest: () => false,
+    onMoveShouldSetResponderCapture: () => true,
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      if (!isSwipeAllowed()) {
+        return false;
+      }
+      handleAnimationStart(activeIndexRef.current);
+      const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+      if (allow) {
+        isSwiping.current = true;
+        stopAutoplay();
+      }
+      return allow;
+    },
+    onPanResponderGrant: () => {
+      updateOffset();
+    },
+    onPanResponderMove: Animated.event([null, {
+      dx: heroPan.x
+    }], {
+      useNativeDriver: false
+    }),
+    onPanResponderRelease: (_, gesture) => {
+      if (isCarouselPlaying) {
+        startAutoplay();
+      }
+      const correction = gesture.moveX - gesture.x0;
+      if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
+        animate(heroPan, {
+          x: 0,
+          y: 0
+        }, 0);
+      } else {
+        const delta = correction > 0 ? -1 : 1;
+        updateIndex(delta, TRANSITION_MODES.SWIPE);
+      }
+      isSwiping.current = false;
+    }
+  }), [heroPan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const goToNext = React.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
@@ -725,9 +850,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: selectRootContainerStyles(enableHero, viewport),
-    children: /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: selectMainContainerStyles(enableHero, viewport),
       children: /*#__PURE__*/_jsxs(CarouselProvider, {
         activeIndex: activeIndex,
@@ -756,9 +881,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               positionProperty: getDynamicPositionProperty(),
               spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              enableDisplayMultipleItemsPerSlide,
-              enableHero,
-              viewport
+              enableDisplayMultipleItemsPerSlide
             })],
             children: /*#__PURE__*/_jsx(IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -767,7 +890,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
             testID: "previous-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -811,9 +934,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,
                   viewport,
-                  backgroundColor: element.props.backgroundColor,
-                  enableHero,
-                  tabsPanelHeight
+                  backgroundColor: element.props.backgroundColor
                 });
                 return /*#__PURE__*/_jsx(React.Fragment, {
                   children: clonedElement
@@ -821,7 +942,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
             testID: "next-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -833,12 +954,38 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             })
           }) : null]
         }), /*#__PURE__*/_jsx(View, {
-          style: selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport),
-          onLayout: tabs && onTabsPanelLayout,
+          style: selectNavigationStyles(tabs, enableHero, viewport),
           children: showPanelNavigation ? activePanelNavigation : null
         })]
       })
-    })
+    }), enableHero && /*#__PURE__*/_jsx(View, {
+      style: staticStyles.heroMainContainer,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: StyleSheet.flatten([staticStyles.heroSwipeArea, {
+          transform: [{
+            translateX: heroPan.x
+          }, {
+            translateY: heroPan.y
+          }]
+        }]),
+        onLayout: onHeroContainerLayout,
+        ...heroPanResponder.panHandlers,
+        ...getA11yPropsFromHtmlTag(tag),
+        accessibilityLiveRegion: accessibilityLiveRegion,
+        children: childrenArray.map((element, index) => {
+          const hidden = !isAnimating && index !== activeIndex;
+          return /*#__PURE__*/_jsx(View, {
+            style: selectHeroContainerStyles(heroContainerLayout.width, hidden),
+            children: /*#__PURE__*/_jsx(Box, {
+              flex: 1,
+              variant: {
+                background: element.props.backgroundColor
+              }
+            })
+          }, index.toFixed(2));
+        })
+      })
+    })]
   });
 });
 Carousel.propTypes = {
@@ -849,6 +996,10 @@ Carousel.propTypes = {
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: variantProp.propType,
+  /**
+   * Prop related to ProgressBar Variants
+   */
+  progressBarVariant: variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -5,8 +5,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
 import { useCarousel } from '../CarouselContext';
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants';
-import Box from '../../Box';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyle = _ref => {
   let {
@@ -86,8 +85,6 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     enableDisplayMultipleItemsPerSlide,
     viewport,
     backgroundColor,
-    enableHero,
-    tabsPanelHeight,
     ...rest
   } = _ref2;
   const {
@@ -112,18 +109,7 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
-    children: /*#__PURE__*/_jsxs(Box, {
-      variant: {
-        background: backgroundColor
-      },
-      space: 0,
-      flex: 1,
-      children: [children, enableHero && /*#__PURE__*/_jsx(View, {
-        style: {
-          height: tabsPanelHeight
-        }
-      })]
-    })
+    children: children
   });
 });
 CarouselItem.propTypes = {

package/lib/esm/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -11,7 +11,8 @@ import { variantProp } from '../../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    variant,
+    stepTrackerVariant,
+    progressBarVariant,
     enableDisplayMultipleItemsPerSlide
   } = _ref;
   const {
@@ -55,9 +56,7 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                 items: totalItems,
                 current: activeIndex + 1
               },
-              variant: {
-                style: 'subtle'
-              },
+              variant: progressBarVariant,
               accessibilityLabel: getCopyWithPlaceholders('stepTrackerLabel')
             })
           })
@@ -77,13 +76,14 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
       tokens: stepTrackerTokens,
-      variant: variant
+      variant: stepTrackerVariant
     })
   });
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  variant: variantProp.propType,
+  stepTrackerVariant: variantProp.propType,
+  progressBarVariant: variantProp.propType,
   enableDisplayMultipleItemsPerSlide: PropTypes.bool
 };
 const staticStyles = StyleSheet.create({

package/lib/esm/ExpandCollapse/Control.js

@@ -41,7 +41,9 @@ function selectContainerStyles(_ref) {
     borderBottomRightRadius,
     borderTopLeftRadius,
     borderBottomLeftRadius,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+    ...verticalAlignRow(verticalAlign, iconPosition === 'right'),
+    // Updated default alignment due to the change in Pressable's behavior from div to button on web.
+    textAlign: Platform.OS === 'web' ? 'inherit' : undefined
   };
 }
 

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -34,7 +34,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
         icon: null,
         borderColor: 'transparent',
-        textLine: 'none',
+        textLine: tokens.textLine ?? 'none',
         backgroundColor: 'transparent'
       }
       // TODO refactor

package/lib/esm/List/ListItemBase.js

@@ -129,8 +129,7 @@ const staticStyles = StyleSheet.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1,
-    textAlign: 'justify'
+    flexGrow: 1
   }
 });
 ListItemBase.propTypes = {

package/lib/esm/List/ListItemMark.js

@@ -44,10 +44,12 @@ const selectBulletPositioningStyles = _ref3 => {
 const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
+    itemBulletContainerHeight,
     itemBulletContainerAlign
   } = _ref4;
   return {
     width: itemBulletContainerWidth,
+    height: itemBulletContainerHeight,
     alignItems: itemBulletContainerAlign
   };
 };
@@ -69,10 +71,11 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
-      style: sideItemContainerStyles,
+      style: [sideItemContainerStyles, bulletContainerStyles],
       children: /*#__PURE__*/_jsx(IconComponent, {
         size: iconSize || iconTokens.size,
         color: iconColor || iconTokens.color
@@ -94,7 +97,8 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: bulletIcon,
         tokens: {
-          color: bulletColor
+          color: bulletColor,
+          size: themeTokens.itemIconSize
         }
       })
     })

package/lib/esm/Modal/ModalContent.js

@@ -128,7 +128,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           },
           children: subHeading
         })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
+      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
         space: 3
       })]
     }), bodyText && /*#__PURE__*/_jsx(Box, {

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -286,9 +286,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           },
           children: subtitle
         })
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
       })]
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 4
     }), /*#__PURE__*/_jsx(View, {
       style: styles.options,
       children: /*#__PURE__*/_jsx(ScrollView, {