@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/esm/Card/CardBase.js

@@ -9,8 +9,15 @@ import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
 import backgroundImageStylesMap from './backgroundImageStylesMap';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FlexGrid from '../FlexGrid/FlexGrid';
+import FlexGridRow from '../FlexGrid/Row';
+import FlexGridCol from '../FlexGrid/Col';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const GRID_COLUMNS = 12;
+const isOverlayColor = color => {
+  return color && typeof color === 'string' && color.startsWith('rgba(');
+};
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -24,12 +31,9 @@ const setBackgroundImage = _ref => {
   const borderRadius = cardStyle?.borderRadius || 0;
   const borderWidth = cardStyle?.borderWidth || 0;
   const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
-
-  // For contain mode with position and align, use CSS background properties for web
   if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
     const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
     if (Platform.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition;
       switch (positionKey) {
         case 'top-start':
@@ -73,7 +77,6 @@ const setBackgroundImage = _ref => {
         children: content
       });
     }
-    // For React Native, apply positioning styles with full dimensions
     const positionStyles = backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.containContainer, {
@@ -92,8 +95,6 @@ const setBackgroundImage = _ref => {
       })]
     });
   }
-
-  // Use ImageBackground for all other resize modes and React Native
   return /*#__PURE__*/_jsx(ImageBackground, {
     source: src,
     imageStyle: {
@@ -119,6 +120,10 @@ export const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     shadow,
     backgroundGradient,
@@ -126,9 +131,18 @@ export const selectStyles = _ref2 => {
     maxHeight,
     overflowY
   } = _ref2;
+  const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
+  let backgroundImageValue = null;
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient;
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`;
+    const shouldApplyOverlay = (gradient || backgroundGradient && backgroundColor && backgroundColor !== 'transparent') && isOverlayColor(backgroundColor);
+    backgroundImageValue = shouldApplyOverlay ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}` : gradientString;
+  }
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white';
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -136,16 +150,20 @@ export const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...applyShadowToken(shadow),
     ...(gradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px white`,
+      boxShadow: `inset 0 1000px ${boxShadowColor}`,
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+      backgroundImage: backgroundImageValue
     } : {}),
     ...(Platform.OS === 'web' ? {
       maxHeight,
@@ -164,9 +182,11 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     dataSet,
     backgroundImage,
+    fullBleedContent,
+    cardState,
     ...rest
   } = _ref3;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -180,9 +200,13 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const backgroundImagePosition = useResponsiveProp(position);
   const backgroundImageAlign = useResponsiveProp(align);
   const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  const {
+    content: fullBleedImageContent,
+    position: fullBleedContentPosition,
+    imgCol
+  } = fullBleedContent || {};
+  const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom');
   if (backgroundImage && src) {
-    // When there's a background image, separate the padding from the container style
-    // so the image can fill the entire container without padding interference
     const {
       paddingTop,
       paddingBottom,
@@ -190,8 +214,6 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       paddingRight,
       ...containerStyle
     } = cardStyle;
-
-    // Only create padding wrapper if there's actually padding defined
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
     const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
       style: {
@@ -219,6 +241,53 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       children: content
     });
   }
+  if (fullBleedContent && fullBleedImageContent) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+    const imageColumns = imgCol || {
+      xs: GRID_COLUMNS
+    };
+    const textColumns = {};
+    Object.keys(imageColumns).forEach(breakpoint => {
+      textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS);
+    });
+    const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left';
+    const imageColContent = /*#__PURE__*/_jsx(FlexGridCol, {
+      ...imageColumns,
+      style: staticStyles.fullBleedImageCol,
+      children: fullBleedImageContent
+    });
+    const textColContent = /*#__PURE__*/_jsx(FlexGridCol, {
+      ...textColumns,
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    });
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/_jsx(FlexGrid, {
+        children: /*#__PURE__*/_jsx(FlexGridRow, {
+          children: imageFirst ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [imageColContent, textColContent]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [textColContent, imageColContent]
+          })
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
@@ -228,6 +297,13 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
+export const fullBleedContentPropTypes = PropTypes.shape({
+  content: PropTypes.node.isRequired,
+  alt: PropTypes.string,
+  position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch'])),
+  imgCol: PropTypes.object
+});
 const staticStyles = StyleSheet.create({
   imageBackground: {
     width: '100%',
@@ -249,6 +325,9 @@ const staticStyles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 });
 CardBase.propTypes = {
@@ -266,6 +345,7 @@ CardBase.propTypes = {
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
     align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 export default CardBase;

package/lib/esm/Card/PressableCardBase.js

@@ -7,10 +7,10 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
 import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import CardBase from './CardBase';
+import CardBase, { fullBleedContentPropTypes } from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
@@ -32,6 +32,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hrefAttrs,
     dataSet,
     backgroundImage,
+    fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -125,10 +126,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.linkContainer,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
         children: /*#__PURE__*/_jsx(CardBase, {
@@ -138,6 +136,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             hovered
           }),
           backgroundImage: backgroundImage,
+          fullBleedContent: fullBleedContent,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -162,6 +161,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: pressableState => /*#__PURE__*/_jsx(CardBase, {
       tokens: getCardTokens(pressableState),
       backgroundImage: backgroundImage,
+      fullBleedContent: fullBleedContent,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -175,7 +175,8 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -195,6 +196,7 @@ PressableCardBase.propTypes = {
     resizeMode: PropTypes.oneOfType([PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), PropTypes.object]),
     position: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'left', 'right', 'top']), PropTypes.object]),
     align: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch']), PropTypes.object])
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 export default withLinkRouter(PressableCardBase);

package/lib/esm/Carousel/Carousel.js

@@ -357,6 +357,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
+  const isTransitioningRef = React.useRef(false);
   const viewport = useViewport();
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
@@ -427,9 +428,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsAnimating(true);
   }, [onAnimationStart]);
   const handleAnimationEnd = React.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
+    var _ref4;
+    const result = (_ref4 = arguments.length - 1, _ref4 < 0 || arguments.length <= _ref4 ? undefined : arguments[_ref4]);
+    if (result?.finished) {
+      if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+      setIsAnimating(false);
+      isTransitioningRef.current = false;
+    }
+  }, [onAnimationEnd, isTransitioningRef]);
   const updateOffset = React.useCallback(() => {
     if (enablePeeking) {
       const {
@@ -537,6 +543,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
+      isTransitioningRef.current = true;
       animate(pan, toValue, index);
       if (enableHero) {
         animate(heroPan, toValue, index);
@@ -552,6 +559,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       y: 0
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
+    isTransitioningRef.current = true;
     animate(pan, toValue, index);
     if (enableHero) {
       animate(heroPan, heroToValue, index);
@@ -607,29 +615,29 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     heroContainerLayoutRef.current = heroContainerLayout;
   }, [heroContainerLayout]);
   React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     if (enableHero) {
-      heroPan.x.addListener(_ref6 => {
+      heroPan.x.addListener(_ref7 => {
         let {
           value
-        } = _ref6;
+        } = _ref7;
         heroAnimatedX.current = value;
       });
-      heroPan.y.addListener(_ref7 => {
+      heroPan.y.addListener(_ref8 => {
         let {
           value
-        } = _ref7;
+        } = _ref8;
         heroAnimatedY.current = value;
       });
     }
@@ -666,7 +674,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onContainerLayout = _ref8 => {
+  const onContainerLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -676,7 +684,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -685,7 +693,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref9 => {
+  const onHeroContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -695,7 +703,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -704,14 +712,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref10 => {
+  const onPreviousNextNavigationButtonLayout = _ref11 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref10;
+    } = _ref11;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = React.useCallback(() => {
@@ -873,6 +881,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  const handleKeyDown = React.useCallback(event => {
+    if (isTransitioningRef.current && event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }, [isTransitioningRef]);
   return /*#__PURE__*/_jsxs(View, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/_jsx(View, {
@@ -898,6 +911,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           ref: ref,
           ...systemProps,
           ...containerProps,
+          ...(Platform.OS === 'web' ? {
+            onKeyDown: handleKeyDown
+          } : {}),
           children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
             style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
               positionVariant: previousNextNavigationPosition,
@@ -952,10 +968,27 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
               accessibilityLiveRegion: accessibilityLiveRegion,
               children: childrenArray.map((element, index) => {
-                const hidden = !isAnimating && index !== activeIndex;
+                let hidden = !isAnimating && index !== activeIndex;
+                if (enablePeeking && !isAnimating) {
+                  if (enableDisplayMultipleItemsPerSlide) {
+                    const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                    if (index >= activeIndex * maxItemsForSlide - 1 && index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1) {
+                      hidden = false;
+                    } else {
+                      hidden = true;
+                    }
+                  } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                    hidden = false;
+                  }
+                } else if (!enablePeeking && enableDisplayMultipleItemsPerSlide && !isAnimating) {
+                  const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                  if (index >= activeIndex * maxItemsForSlide && index < activeIndex * maxItemsForSlide + maxItemsForSlide) {
+                    hidden = false;
+                  }
+                }
                 const clonedElement = /*#__PURE__*/React.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  hidden,
                   enablePeeking,
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,

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

@@ -97,13 +97,33 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : a11yProps.nonFocusableProps;
   const handleFocus = React.useCallback(event => {
-    if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-      goTo(activeIndex + 1);
+    if (Platform.OS === 'web') {
+      if (enablePeeking) {
+        if (enableDisplayMultipleItemsPerSlide) {
+          const startIndex = maximumItemsForSlide * activeIndex;
+          const endIndex = startIndex + maximumItemsForSlide - 1;
+          if (elementIndex < startIndex) {
+            if (activeIndex - 1 < 0) {
+              goTo(0);
+            } else {
+              goTo(activeIndex - 1);
+            }
+          } else if (elementIndex > endIndex) {
+            goTo(activeIndex + 1);
+          }
+        } else if (elementIndex !== activeIndex) {
+          if (elementIndex > activeIndex) {
+            goTo(activeIndex + 1);
+          } else if (elementIndex < activeIndex) {
+            goTo(activeIndex - 1);
+          }
+        }
+      }
     }
     if (rest.onFocus) {
       rest.onFocus(event);
     }
-  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   return /*#__PURE__*/_jsx(View, {
     style: selectContainerStyle({
       width,

package/lib/esm/HorizontalScroll/HorizontalScroll.js

@@ -4,7 +4,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import ScrollViewEnd from './ScrollViewEnd';
 import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,6 +27,7 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ScrollButton,
     tokens,
     itemPositions,
+    variant,
     children,
     ...rest
   } = _ref;
@@ -70,8 +71,9 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setScrollOffset(x);
   };
   const scrollMax = Math.max(0, contentWidth - containerWidth);
-  const showNextButton = scrollOffset < scrollMax;
-  const showPreviousButton = scrollOffset > 0;
+  const hideNavigationButtons = variant?.hideNavigationButtons || false;
+  const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons;
+  const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons;
   const scrollRef = React.useRef(null);
   const scrollTo = targetX => {
     if (typeof scrollRef.current?.scrollTo === 'function') {
@@ -162,6 +164,7 @@ HorizontalScroll.propTypes = {
   tokens: getTokensSetPropType(tokenKeys, {
     allowFunction: true
   }),
+  variant: variantProp.propType,
   children: PropTypes.node
 };
 export default HorizontalScroll;

package/lib/esm/Icon/Icon.js

@@ -14,6 +14,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     scalesWithText = false,
     style = {},
+    testID,
     dataSet
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
@@ -36,19 +37,18 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     padding: themeTokens.padding
   };
   const getIconContentForMobile = () => {
-    if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/_jsx(View, {
-        style: {
-          backgroundColor: themeTokens.backgroundColor,
-          borderRadius: themeTokens.borderRadius,
-          ...paddingStyles
-        },
-        children: iconContent
-      });
-    }
-    return iconContent;
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: {
+        backgroundColor: themeTokens.backgroundColor,
+        borderRadius: themeTokens.borderRadius,
+        ...paddingStyles
+      },
+      children: iconContent
+    });
   };
   return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+    testID: testID,
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,

package/lib/esm/Icon/IconText.js

@@ -100,7 +100,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
-  /* eslint-enable react/no-unused-prop-types */
 };
 const staticStyles = StyleSheet.create({
   adjustedContainer: {