@telus-uds/components-base 3.23.0 → 3.25.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

@@ -6,9 +6,9 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
+import { useThemeTokens, useTheme } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment, isTouchDevice } from '../utils';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment, isTouchDevice, useResponsiveProp, resolveContentMaxWidth } from '../utils';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { CarouselProvider } from './CarouselContext';
 import CarouselItem from './CarouselItem';
@@ -203,11 +203,18 @@ const selectRootContainerStyles = (enableHero, viewport) => {
   }
   return {};
 };
-const selectMainContainerStyles = (enableHero, viewport) => {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
       width: '100%',
-      maxWidth: 1200
+      maxWidth: maxWidth || 1200
+    };
+  }
+  if (maxWidth !== null && maxWidth !== undefined) {
+    return {
+      maxWidth,
+      alignSelf: 'center',
+      width: '100%'
     };
   }
   return {};
@@ -354,11 +361,18 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
+    contentMaxWidth,
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
   const isTransitioningRef = React.useRef(false);
   const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const contentMaxWidthValue = useResponsiveProp(contentMaxWidth);
+  const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth);
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
   // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
@@ -889,7 +903,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   return /*#__PURE__*/_jsxs(View, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/_jsx(View, {
-      style: selectMainContainerStyles(enableHero, viewport),
+      style: selectMainContainerStyles(enableHero, viewport, maxWidth),
       children: /*#__PURE__*/_jsxs(CarouselProvider, {
         activeIndex: activeIndex,
         goTo: goTo,
@@ -1247,7 +1261,24 @@ Carousel.propTypes = {
    * If set to `true`, the Carousel will show multiple slides at once
    * - Default value is `false`
    */
-  enableDisplayMultipleItemsPerSlide: PropTypes.bool
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool,
+  /**
+   * The maximum width of the content in the Carousel.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMaxWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 };
 Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';

package/lib/esm/FlexGrid/FlexGrid.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles, useResponsiveProp } from '../utils';
+import resolveContentMaxWidth from '../utils/resolveContentMaxWidth';
 import Row from './Row';
 import Col from './Col';
 import GutterContext from './providers/GutterContext';
@@ -10,47 +11,24 @@ import { useTheme } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const CONTENT_MAX_WIDTH = 'max';
-const CONTENT_FULL_WIDTH = 'full';
 
 /**
- * Resolves the maximum width for content based on the provided value and responsive width.
- *
- * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
- *        Can be a number, a special string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
- * @param {number} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
- * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
- */
-const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
-  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
-    return null;
-  }
-  if (Number.isFinite(contentMinWidthValue)) {
-    return contentMinWidthValue;
-  }
-  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
-    return responsiveWidth;
-  }
-  return contentMinWidthValue;
-};
-
-/**
- * Calculates the maximum width for a given viewport based on limitWidth and contentMinWidth settings.
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMaxWidth settings.
  *
  * @param {string} viewportKey - The viewport key ('xs', 'sm', 'md', 'lg', 'xl')
  * @param {boolean} limitWidth - Whether to limit the width to viewport breakpoints
- * @param {any} contentMinWidth - The contentMinWidth prop value
+ * @param {any} contentWidthProp - The contentMaxWidth (or contentMinWidth) prop value
  * @param {number|string|null} maxWidth - The resolved max width value
  * @returns {number|string|null} The calculated maximum width for the viewport
  */
-const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWidth) => {
   if (limitWidth) {
     if (viewportKey === 'xs') {
       return null;
     }
     return viewports.map.get(viewportKey);
   }
-  if (contentMinWidth) {
+  if (contentWidthProp) {
     return maxWidth;
   }
   return null;
@@ -74,6 +52,7 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityRole,
     children,
     dataSet,
+    contentMaxWidth,
     contentMinWidth,
     ...rest
   } = _ref;
@@ -87,28 +66,31 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useTheme();
   let flexgridStyles;
   let mediaIds;
-  const contentMinWidthValue = useResponsiveProp(contentMinWidth);
+
+  // Support both contentMaxWidth and deprecated contentMinWidth for backwards compatibility
+  const contentWidthProp = contentMaxWidth || contentMinWidth;
+  const contentWidthValue = useResponsiveProp(contentWidthProp);
   const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
-  const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
+  const maxWidth = resolveContentMaxWidth(contentWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
-      maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
+      maxWidth: getMaxWidthForViewport('xs', limitWidth, contentWidthProp, maxWidth),
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
+      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentWidthProp, maxWidth),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
+      maxWidth: getMaxWidthForViewport('md', limitWidth, contentWidthProp, maxWidth),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
+      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentWidthProp, maxWidth),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
+      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentWidthProp, maxWidth),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -204,7 +186,7 @@ FlexGrid.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * The minimum width of the content in the FlexGrid.
+   * The maximum width of the content in the FlexGrid.
    * This prop accepts responsive values for different viewports. If a number is provided,
    * it will be the max content width for the desired viewport.
    * - `xs`: 'max' | 'full' | <number>
@@ -213,6 +195,20 @@ FlexGrid.propTypes = {
    * - `lg`: 'max' | 'full' | <number>
    * - `xl`: 'max' | 'full' | <number>
    */
+  contentMaxWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  }),
+  /**
+   * @deprecated Use `contentMaxWidth` instead. This prop will be removed in a future version.
+   *
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   */
   contentMinWidth: PropTypes.shape({
     xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),

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);
@@ -37,6 +38,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const getIconContentForMobile = () => {
     return /*#__PURE__*/_jsx(View, {
+      testID: testID,
       style: {
         backgroundColor: themeTokens.backgroundColor,
         borderRadius: themeTokens.borderRadius,
@@ -46,6 +48,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     });
   };
   return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+    testID: testID,
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,

package/lib/esm/IconButton/IconButton.js

@@ -123,6 +123,7 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     hrefAttrs,
     testID,
     accessibilityRole = href ? 'link' : 'button',
+    inactive = false,
     ...rawRest
   } = _ref3;
   const {
@@ -143,8 +144,12 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
     });
   };
-  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
+  const mergedVariant = inactive ? {
+    ...variant,
+    inactive: true
+  } : variant;
+  const getTokens = useThemeTokensCallback('IconButton', tokens, mergedVariant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), mergedVariant.password));
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -153,15 +158,16 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     style: getOuterStyle,
     ...selectedProps,
     testID: testID,
+    disabled: inactive,
     children: pressableState => {
       const themeTokens = getTokens(resolvePressableState(pressableState));
       return /*#__PURE__*/_jsx(View, {
-        style: selectInnerStyle(themeTokens, variant.password),
+        style: selectInnerStyle(themeTokens, mergedVariant.password),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: selectTokens('Icon', themeTokens, 'icon'),
-          variant: variant
+          variant: mergedVariant
         })
       });
     }
@@ -192,7 +198,11 @@ IconButton.propTypes = {
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, applies the inactive variant styling
+   */
+  inactive: PropTypes.bool
 };
 const staticStyles = StyleSheet.create({
   outer: {