@telus-uds/components-base 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
+This log was last generated on Wed, 05 Mar 2025 00:01:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.3.0
+
+Wed, 05 Mar 2025 00:01:06 GMT
+
+### Minor changes
+
+- `Carousel`: add animated background color to hero mode (guillermo.peitzner@telus.com)
+- `ExpandCollapseMini`: add quiet variant (sergio.ramirez@telus.com)
+
+### Patches
+
+- `Card`: add `accessible` prop to have alt on custom image background (kristina.kirpichnikova@telus.com)
+- `List`: remove textAlign parent value" (sergio.ramirez@telus.com)
+- `Alignment`: fix Typography align issue when using `align` (sergio.ramirez@telus.com)
+- `Carousel`: add progress-bar variants" (guillermo.peitzner@telus.com)
+- `TextArea`: minLines issue when the size value changes dynamically fixed (35577399+JoshHC@users.noreply.github.com)
+- `MultiSelectFilter`: Adding space between title and checkboxes when there isn't a subtitle (Mauricio.BatresMontejo@telus.com)
+
+## 3.2.0
+
+Fri, 14 Feb 2025 19:03:35 GMT
+
+### Minor changes
+
+- `Link`: refactoring component for koodo brand (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.2.0
+
+### Patches
+
+- `Notification`: fix system variant (guillermo.peitzner@telus.com)
+- `Typography`: add default value in text-align (sergio.ramirez@telus.com)
+- `Modal`: Added space below the title when content is passed as a child. (Mauricio.BatresMontejo@telus.com)
+
 ## 3.1.0
 
-Mon, 10 Feb 2025 17:30:58 GMT
+Mon, 10 Feb 2025 17:36:47 GMT
 
 ### Minor changes
 

package/lib/cjs/Card/CardBase.js

@@ -91,13 +91,14 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ref: ref,
     ...props,
     children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-      alt: alt,
       source: imageSourceViewport,
       imageStyle: {
         borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
       },
       resizeMode: backgroundImageResizeMode,
       style: styles.imageBackground,
+      accessible: true,
+      accessibilityLabel: alt,
       children: children
     }) : children
   });

package/lib/cjs/Carousel/Carousel.js

@@ -26,6 +26,7 @@ var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThu
 var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanel"));
 var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanelItem"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _Box = _interopRequireDefault(require("../Box"));
 var _Constants = require("./Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -48,6 +49,24 @@ const staticStyles = _StyleSheet.default.create({
     zIndex: 1,
     right: _Platform.default.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 => ({
@@ -60,6 +79,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 {
@@ -68,19 +91,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] = _Constants.HERO_POSITION_OFFSET;
-    } else {
-      styles[positionProperty] = _Constants.DEFAULT_POSITION_OFFSET;
-    }
+    styles[positionProperty] = _Constants.DEFAULT_POSITION_OFFSET;
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0;
@@ -90,7 +107,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'
@@ -110,9 +127,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide,
-      enableHero,
-      viewport
+      enableDisplayMultipleItemsPerSlide
     })
   };
 };
@@ -170,15 +185,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' ? _Constants.LARGE_VIEWPORT_MARGIN : _Constants.DEFAULT_VIEWPORT_MARGIN;
   }
   return {
-    marginTop,
     marginHorizontal
   };
 };
@@ -310,6 +322,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
     stepTrackerVariant,
+    progressBarVariant = {
+      style: 'subtle'
+    },
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -327,7 +342,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
       thumbnails: thumbnails
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {
-      variant: stepTrackerVariant,
+      stepTrackerVariant: stepTrackerVariant,
+      progressBarVariant: progressBarVariant,
       enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
     }),
     tag = 'ul',
@@ -379,11 +395,21 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     height: 0
   });
   const containerLayoutRef = _react.default.useRef(containerLayout);
+  const [heroContainerLayout, setHeroContainerLayout] = _react.default.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const heroContainerLayoutRef = _react.default.useRef(heroContainerLayout);
   const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = _react.default.useState(0);
   const firstFocusRef = _react.default.useRef(null);
   const pan = _react.default.useRef(new _Animated.default.ValueXY()).current;
   const animatedX = _react.default.useRef(0);
   const animatedY = _react.default.useRef(0);
+  const heroPan = _react.default.useRef(new _Animated.default.ValueXY()).current;
+  const heroAnimatedX = _react.default.useRef(0);
+  const heroAnimatedY = _react.default.useRef(0);
   const [isAnimating, setIsAnimating] = _react.default.useState(false);
   /**
    * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
@@ -416,8 +442,20 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       x: 0,
       y: 0
     });
-  }, [pan, animatedX]);
-  const animate = _react.default.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.default.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];
@@ -425,33 +463,33 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return handleAnimationEnd(toIndex, ...args);
     };
     if (reduceMotionRef.current || isSwiping.current) {
-      _Animated.default.timing(pan, {
+      _Animated.default.timing(panToAnimate, {
         toValue,
         duration: 1,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
-      _Animated.default.timing(pan, {
+      _Animated.default.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-      _Animated.default.timing(pan, {
+      _Animated.default.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration ? transitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
-      _Animated.default.spring(pan, {
+      _Animated.default.spring(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -483,14 +521,25 @@ const Carousel = /*#__PURE__*/_react.default.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) {
@@ -506,7 +555,7 @@ const Carousel = /*#__PURE__*/_react.default.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.default.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
@@ -529,7 +578,6 @@ const Carousel = /*#__PURE__*/_react.default.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.default.useState(0);
   _react.default.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
@@ -539,6 +587,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   _react.default.useEffect(() => {
     containerLayoutRef.current = containerLayout;
   }, [containerLayout]);
+  _react.default.useEffect(() => {
+    heroContainerLayoutRef.current = heroContainerLayout;
+  }, [heroContainerLayout]);
   _react.default.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
@@ -552,6 +603,20 @@ const Carousel = /*#__PURE__*/_react.default.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();
     }
@@ -559,8 +624,12 @@ const Carousel = /*#__PURE__*/_react.default.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.default.useEffect(() => {
     const subscription = _Dimensions.default.addEventListener('change', () => {
       updateOffset();
@@ -581,10 +650,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onTabsPanelLayout = event => {
-    setTabsPanelHeight(event.nativeEvent.layout.height);
-  };
-  const onContainerLayout = _ref6 => {
+  const onContainerLayout = _ref8 => {
     let {
       nativeEvent: {
         layout: {
@@ -594,7 +660,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref6;
+    } = _ref8;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -603,14 +669,33 @@ const Carousel = /*#__PURE__*/_react.default.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.default.useCallback(() => {
@@ -651,7 +736,7 @@ const Carousel = /*#__PURE__*/_react.default.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);
@@ -661,7 +746,47 @@ const Carousel = /*#__PURE__*/_react.default.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.default.useMemo(() => _PanResponder.default.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.default.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.default.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
@@ -732,9 +857,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectRootContainerStyles(enableHero, viewport),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectMainContainerStyles(enableHero, viewport),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
         activeIndex: activeIndex,
@@ -763,9 +888,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               positionProperty: getDynamicPositionProperty(),
               spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              enableDisplayMultipleItemsPerSlide,
-              enableHero,
-              viewport
+              enableDisplayMultipleItemsPerSlide
             })],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -774,7 +897,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -818,9 +941,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,
                   viewport,
-                  backgroundColor: element.props.backgroundColor,
-                  enableHero,
-                  tabsPanelHeight
+                  backgroundColor: element.props.backgroundColor
                 });
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
                   children: clonedElement
@@ -828,7 +949,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            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__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -840,12 +961,38 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             })
           }) : null]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport),
-          onLayout: tabs && onTabsPanelLayout,
+          style: selectNavigationStyles(tabs, enableHero, viewport),
           children: showPanelNavigation ? activePanelNavigation : null
         })]
       })
-    })
+    }), enableHero && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.heroMainContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+        style: _StyleSheet.default.flatten([staticStyles.heroSwipeArea, {
+          transform: [{
+            translateX: heroPan.x
+          }, {
+            translateY: heroPan.y
+          }]
+        }]),
+        onLayout: onHeroContainerLayout,
+        ...heroPanResponder.panHandlers,
+        ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
+        accessibilityLiveRegion: accessibilityLiveRegion,
+        children: childrenArray.map((element, index) => {
+          const hidden = !isAnimating && index !== activeIndex;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectHeroContainerStyles(heroContainerLayout.width, hidden),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              flex: 1,
+              variant: {
+                background: element.props.backgroundColor
+              }
+            })
+          }, index.toFixed(2));
+        })
+      })
+    })]
   });
 });
 Carousel.propTypes = {
@@ -856,6 +1003,10 @@ Carousel.propTypes = {
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: _utils.variantProp.propType,
+  /**
+   * Prop related to ProgressBar Variants
+   */
+  progressBarVariant: _utils.variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -11,7 +11,6 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _utils = require("../../utils");
 var _CarouselContext = require("../CarouselContext");
 var _Constants = require("../Constants");
-var _Box = _interopRequireDefault(require("../../Box"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
@@ -93,8 +92,6 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     enableDisplayMultipleItemsPerSlide,
     viewport,
     backgroundColor,
-    enableHero,
-    tabsPanelHeight,
     ...rest
   } = _ref2;
   const {
@@ -119,18 +116,7 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      variant: {
-        background: backgroundColor
-      },
-      space: 0,
-      flex: 1,
-      children: [children, enableHero && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: {
-          height: tabsPanelHeight
-        }
-      })]
-    })
+    children: children
   });
 });
 CarouselItem.propTypes = {

package/lib/cjs/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -18,7 +18,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    variant,
+    stepTrackerVariant,
+    progressBarVariant,
     enableDisplayMultipleItemsPerSlide
   } = _ref;
   const {
@@ -62,9 +63,7 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
                 items: totalItems,
                 current: activeIndex + 1
               },
-              variant: {
-                style: 'subtle'
-              },
+              variant: progressBarVariant,
               accessibilityLabel: getCopyWithPlaceholders('stepTrackerLabel')
             })
           })
@@ -84,13 +83,14 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
       tokens: stepTrackerTokens,
-      variant: variant
+      variant: stepTrackerVariant
     })
   });
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  variant: _utils.variantProp.propType,
+  stepTrackerVariant: _utils.variantProp.propType,
+  progressBarVariant: _utils.variantProp.propType,
   enableDisplayMultipleItemsPerSlide: _propTypes.default.bool
 };
 const staticStyles = _StyleSheet.default.create({

package/lib/cjs/ExpandCollapse/Control.js

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

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -41,7 +41,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.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/cjs/List/ListItemBase.js

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