@telus-uds/components-base 3.23.0 → 3.25.0

package/CHANGELOG.md

@@ -1,9 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 19 Nov 2025 05:51:39 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Jan 2026 14:55:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.25.0
+
+Mon, 12 Jan 2026 14:55:21 GMT
+
+### Minor changes
+
+- `Status`: Added typescript support for the component (shivam.gupta3@telus.com)
+- `IconButton`: Update the UI to match the design intention, add an inactive prop and selected variant (guillermo.peitzner@telus.com)
+- `FlexGrid`: rename contentMinWidth prop to contentMaxWidth (guillermo.peitzner@telus.com)
+- `ButtonGroup`: add item inactive prop (guillermo.peitzner@telus.com)
+- `Carousel`: add contentMaxWidth prop (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.18.0
+
+## 3.24.0
+
+Fri, 12 Dec 2025 05:37:22 GMT
+
+### Minor changes
+
+- `Card`: interactive mode added for FullBleedContent (35577399+JoshHC@users.noreply.github.com)
+- `Shortcuts`: add component (guillermo.peitzner@telus.com)
+- `Listbox & NavigationBar`: add `secondLevel` variant (sergio.ramirez@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.17.0
+
 ## 3.23.0
 
 Wed, 19 Nov 2025 05:51:39 GMT

package/lib/cjs/Button/ButtonGroup.js

@@ -138,6 +138,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           id = label,
           accessibilityLabel,
           ref: itemRef,
+          inactive: itemInactive,
           ...itemRest
         } = _ref2;
         const isSelected = currentValues.includes(id);
@@ -161,6 +162,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel,
           ..._utils.a11yProps.getPositionInSet(items.length, index)
         };
+        const isInactive = itemInactive !== undefined ? itemInactive : inactive;
 
         // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
@@ -171,7 +173,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           onPress: handlePress,
           tokens: getButtonTokens,
           selected: isSelected,
-          inactive: inactive,
+          inactive: isInactive,
           icon: iconProp,
           ...selectItemProps({
             ...itemRest,
@@ -225,7 +227,12 @@ ButtonGroup.propTypes = {
     /**
      * An optional ref for one individual button in the ButtonGroup
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: _airbnbPropTypes.default.ref(),
+    /**
+     * If true, this individual button cannot be interacted with. Takes precedence
+     * over the group-level `inactive` prop. Useful for disabling specific options.
+     */
+    inactive: _propTypes.default.bool
   })),
   /**
    * If provided, this function is called when the current selection is changed

package/lib/cjs/Card/CardBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectStyles = exports.default = void 0;
+exports.selectStyles = exports.fullBleedContentPropTypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -15,9 +15,16 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid/FlexGrid"));
+var _Row = _interopRequireDefault(require("../FlexGrid/Row"));
+var _Col = _interopRequireDefault(require("../FlexGrid/Col"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const GRID_COLUMNS = 12;
+const isOverlayColor = color => {
+  return color && typeof color === 'string' && color.startsWith('rgba(');
+};
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -31,12 +38,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.default.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition;
       switch (positionKey) {
         case 'top-start':
@@ -80,7 +84,6 @@ const setBackgroundImage = _ref => {
         children: content
       });
     }
-    // For React Native, apply positioning styles with full dimensions
     const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.containContainer, {
@@ -99,8 +102,6 @@ const setBackgroundImage = _ref => {
       })]
     });
   }
-
-  // Use ImageBackground for all other resize modes and React Native
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
     source: src,
     imageStyle: {
@@ -126,6 +127,10 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     shadow,
     backgroundGradient,
@@ -133,9 +138,18 @@ const selectStyles = _ref2 => {
     maxHeight,
     overflowY
   } = _ref2;
+  const hasGradient = (gradient || backgroundGradient) && _Platform.default.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,
@@ -143,16 +157,20 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(gradient && _Platform.default.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.default.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+      backgroundImage: backgroundImageValue
     } : {}),
     ...(_Platform.default.OS === 'web' ? {
       maxHeight,
@@ -172,9 +190,11 @@ const CardBase = /*#__PURE__*/_react.default.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 {
@@ -188,9 +208,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
   const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
   const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  const {
+    content: fullBleedImageContent,
+    position: fullBleedContentPosition,
+    imgCol
+  } = fullBleedContent || {};
+  const fullBleedPosition = (0, _utils.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,
@@ -198,8 +222,6 @@ const CardBase = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {
@@ -227,6 +249,53 @@ const CardBase = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...imageColumns,
+      style: staticStyles.fullBleedImageCol,
+      children: fullBleedImageContent
+    });
+    const textColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...textColumns,
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+          children: imageFirst ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [imageColContent, textColContent]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [textColContent, imageColContent]
+          })
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
@@ -236,6 +305,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
+const fullBleedContentPropTypes = exports.fullBleedContentPropTypes = _propTypes.default.shape({
+  content: _propTypes.default.node.isRequired,
+  alt: _propTypes.default.string,
+  position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch'])),
+  imgCol: _propTypes.default.object
+});
 const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',
@@ -257,6 +333,9 @@ const staticStyles = _StyleSheet.default.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 });
 CardBase.propTypes = {
@@ -274,6 +353,7 @@ CardBase.propTypes = {
     resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
     align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -13,11 +13,13 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _CardBase = _interopRequireWildcard(require("./CardBase"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.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'];
@@ -40,6 +42,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     hrefAttrs,
     dataSet,
     backgroundImage,
+    fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -133,10 +136,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.linkContainer,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
@@ -146,6 +146,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
             hovered
           }),
           backgroundImage: backgroundImage,
+          fullBleedContent: fullBleedContent,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -170,6 +171,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
       backgroundImage: backgroundImage,
+      fullBleedContent: fullBleedContent,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -183,7 +185,8 @@ const staticStyles = _StyleSheet.default.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -203,6 +206,7 @@ PressableCardBase.propTypes = {
     resizeMode: _propTypes.default.oneOfType([_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), _propTypes.default.object]),
     position: _propTypes.default.oneOfType([_propTypes.default.oneOf(['bottom', 'left', 'right', 'top']), _propTypes.default.object]),
     align: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']), _propTypes.default.object])
-  })
+  }),
+  fullBleedContent: _CardBase.fullBleedContentPropTypes
 };
 var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);

package/lib/cjs/Carousel/Carousel.js

@@ -210,11 +210,18 @@ const selectRootContainerStyles = (enableHero, viewport) => {
   }
   return {};
 };
-const selectMainContainerStyles = (enableHero, viewport) => {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   if (enableHero && viewport === 'xl' && _Platform.default.OS === 'web') {
     return {
       width: '100%',
-      maxWidth: 1200
+      maxWidth: maxWidth || 1200
+    };
+  }
+  if (maxWidth !== null && maxWidth !== undefined) {
+    return {
+      maxWidth,
+      alignSelf: 'center',
+      width: '100%'
     };
   }
   return {};
@@ -361,11 +368,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
+    contentMaxWidth,
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
   const isTransitioningRef = _react.default.useRef(false);
   const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const contentMaxWidthValue = (0, _utils.useResponsiveProp)(contentMaxWidth);
+  const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = (0, _utils.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
@@ -896,7 +910,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectMainContainerStyles(enableHero, viewport),
+      style: selectMainContainerStyles(enableHero, viewport, maxWidth),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
         activeIndex: activeIndex,
         goTo: goTo,
@@ -1254,7 +1268,24 @@ Carousel.propTypes = {
    * If set to `true`, the Carousel will show multiple slides at once
    * - Default value is `false`
    */
-  enableDisplayMultipleItemsPerSlide: _propTypes.default.bool
+  enableDisplayMultipleItemsPerSlide: _propTypes.default.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.default.shape({
+    xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
+  })
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
 var _utils = require("../utils");
+var _resolveContentMaxWidth = _interopRequireDefault(require("../utils/resolveContentMaxWidth"));
 var _Row = _interopRequireDefault(require("./Row"));
 var _Col = _interopRequireDefault(require("./Col"));
 var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
@@ -17,47 +18,24 @@ var _ViewportProvider = require("../ViewportProvider");
 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]);
-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 _systemConstants.viewports.map.get(viewportKey);
   }
-  if (contentMinWidth) {
+  if (contentWidthProp) {
     return maxWidth;
   }
   return null;
@@ -81,6 +59,7 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole,
     children,
     dataSet,
+    contentMaxWidth,
     contentMinWidth,
     ...rest
   } = _ref;
@@ -94,28 +73,31 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   let flexgridStyles;
   let mediaIds;
-  const contentMinWidthValue = (0, _utils.useResponsiveProp)(contentMinWidth);
+
+  // Support both contentMaxWidth and deprecated contentMinWidth for backwards compatibility
+  const contentWidthProp = contentMaxWidth || contentMinWidth;
+  const contentWidthValue = (0, _utils.useResponsiveProp)(contentWidthProp);
   const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
-  const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
+  const maxWidth = (0, _resolveContentMaxWidth.default)(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'
     }
   };
@@ -211,7 +193,7 @@ FlexGrid.propTypes = {
    */
   children: _propTypes.default.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>
@@ -220,6 +202,20 @@ FlexGrid.propTypes = {
    * - `lg`: 'max' | 'full' | <number>
    * - `xl`: 'max' | 'full' | <number>
    */
+  contentMaxWidth: _propTypes.default.shape({
+    xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.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.default.shape({
     xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),

package/lib/cjs/HorizontalScroll/HorizontalScroll.js

@@ -35,6 +35,7 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ScrollButton,
     tokens,
     itemPositions,
+    variant,
     children,
     ...rest
   } = _ref;
@@ -78,8 +79,9 @@ const HorizontalScroll = /*#__PURE__*/_react.default.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.default.useRef(null);
   const scrollTo = targetX => {
     if (typeof scrollRef.current?.scrollTo === 'function') {
@@ -170,6 +172,7 @@ HorizontalScroll.propTypes = {
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
+  variant: _utils.variantProp.propType,
   children: _propTypes.default.node
 };
 var _default = exports.default = HorizontalScroll;

package/lib/cjs/Icon/Icon.js

@@ -21,6 +21,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     scalesWithText = false,
     style = {},
+    testID,
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
@@ -44,6 +45,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const getIconContentForMobile = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      testID: testID,
       style: {
         backgroundColor: themeTokens.backgroundColor,
         borderRadius: themeTokens.borderRadius,
@@ -53,6 +55,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    testID: testID,
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,