@telus-uds/components-base 3.24.0 → 3.25.0

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 12 Dec 2025 05:37:22 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

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/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/IconButton/IconButton.js

@@ -129,6 +129,7 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     hrefAttrs,
     testID,
     accessibilityRole = href ? 'link' : 'button',
+    inactive = false,
     ...rawRest
   } = _ref3;
   const {
@@ -149,8 +150,12 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }
     });
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
+  const mergedVariant = inactive ? {
+    ...variant,
+    inactive: true
+  } : variant;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, mergedVariant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), mergedVariant.password));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -159,15 +164,16 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     style: getOuterStyle,
     ...selectedProps,
     testID: testID,
+    disabled: inactive,
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectInnerStyle(themeTokens, variant.password),
+        style: selectInnerStyle(themeTokens, mergedVariant.password),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
-          variant: variant
+          variant: mergedVariant
         })
       });
     }
@@ -198,7 +204,11 @@ IconButton.propTypes = {
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
-  onPress: _propTypes.default.func
+  onPress: _propTypes.default.func,
+  /**
+   * When true, applies the inactive variant styling
+   */
+  inactive: _propTypes.default.bool
 };
 const staticStyles = _StyleSheet.default.create({
   outer: {

package/lib/cjs/TextInput/TextInputBase.js

@@ -332,7 +332,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       icon: ClearButtonIcon,
       onPress: handleClear,
       variant: {
-        compact: true
+        subtle: true
       }
     }, "clear"));
   }
@@ -342,8 +342,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
       variant: {
-        compact: true,
-        password: true,
+        subtle: true,
         inactive: variant.inactive,
         size: 'large'
       },

package/lib/cjs/utils/index.js

@@ -23,7 +23,8 @@ var _exportNames = {
   formatImageSource: true,
   getSpacingScale: true,
   useVariants: true,
-  isTouchDevice: true
+  isTouchDevice: true,
+  resolveContentMaxWidth: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -73,6 +74,12 @@ Object.defineProperty(exports, "isTouchDevice", {
     return _isTouchDevice.default;
   }
 });
+Object.defineProperty(exports, "resolveContentMaxWidth", {
+  enumerable: true,
+  get: function () {
+    return _resolveContentMaxWidth.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -272,6 +279,7 @@ var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
 var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 var _useVariants = _interopRequireDefault(require("./useVariants"));
 var _isTouchDevice = _interopRequireDefault(require("./isTouchDevice"));
+var _resolveContentMaxWidth = _interopRequireDefault(require("./resolveContentMaxWidth"));
 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 }; }

package/lib/cjs/utils/resolveContentMaxWidth.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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} contentMaxWidthValue - The maximum 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 contentMaxWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+  if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
+    return null;
+  }
+  if (Number.isFinite(contentMaxWidthValue)) {
+    return contentMaxWidthValue;
+  }
+  if (contentMaxWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMaxWidthValue;
+};
+var _default = exports.default = resolveContentMaxWidth;

package/lib/esm/Button/ButtonGroup.js

@@ -129,6 +129,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id = label,
           accessibilityLabel,
           ref: itemRef,
+          inactive: itemInactive,
           ...itemRest
         } = _ref2;
         const isSelected = currentValues.includes(id);
@@ -152,6 +153,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           accessibilityLabel,
           ...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
@@ -162,7 +164,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           onPress: handlePress,
           tokens: getButtonTokens,
           selected: isSelected,
-          inactive: inactive,
+          inactive: isInactive,
           icon: iconProp,
           ...selectItemProps({
             ...itemRest,
@@ -216,7 +218,12 @@ ButtonGroup.propTypes = {
     /**
      * An optional ref for one individual button in the ButtonGroup
      */
-    ref: ABBPropTypes.ref()
+    ref: ABBPropTypes.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.bool
   })),
   /**
    * If provided, this function is called when the current selection is changed

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/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: {

package/lib/esm/TextInput/TextInputBase.js

@@ -325,7 +325,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       icon: ClearButtonIcon,
       onPress: handleClear,
       variant: {
-        compact: true
+        subtle: true
       }
     }, "clear"));
   }
@@ -335,8 +335,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
       variant: {
-        compact: true,
-        password: true,
+        subtle: true,
         inactive: variant.inactive,
         size: 'large'
       },

package/lib/esm/utils/index.js

@@ -26,4 +26,5 @@ export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByt
 export { default as formatImageSource } from './formatImageSource';
 export { default as getSpacingScale } from './getSpacingScale';
 export { default as useVariants } from './useVariants';
-export { default as isTouchDevice } from './isTouchDevice';
+export { default as isTouchDevice } from './isTouchDevice';
+export { default as resolveContentMaxWidth } from './resolveContentMaxWidth';

package/lib/esm/utils/resolveContentMaxWidth.js

@@ -0,0 +1,24 @@
+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} contentMaxWidthValue - The maximum 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 contentMaxWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+  if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
+    return null;
+  }
+  if (Number.isFinite(contentMaxWidthValue)) {
+    return contentMaxWidthValue;
+  }
+  if (contentMaxWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMaxWidthValue;
+};
+export default resolveContentMaxWidth;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.17.0",
+    "@telus-uds/system-theme-tokens": "^4.18.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.24.0",
+  "version": "3.25.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.17.0",
+    "@telus-uds/system-theme-tokens": "^4.18.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.24.0",
+  "version": "3.25.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -151,7 +151,17 @@ const ButtonGroup = React.forwardRef(
       >
         <View accessibilityRole={innerRole} style={viewStyles}>
           {items.map(
-            ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
+            (
+              {
+                label,
+                id = label,
+                accessibilityLabel,
+                ref: itemRef,
+                inactive: itemInactive,
+                ...itemRest
+              },
+              index
+            ) => {
               const isSelected = currentValues.includes(id)
 
               // Pass an object of relevant component state as first argument for any passed-in press handlers
@@ -171,6 +181,8 @@ const ButtonGroup = React.forwardRef(
                 ...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
               return (
@@ -182,7 +194,7 @@ const ButtonGroup = React.forwardRef(
                   onPress={handlePress}
                   tokens={getButtonTokens}
                   selected={isSelected}
-                  inactive={inactive}
+                  inactive={isInactive}
                   icon={iconProp}
                   {...selectItemProps({
                     ...itemRest,
@@ -243,7 +255,12 @@ ButtonGroup.propTypes = {
       /**
        * An optional ref for one individual button in the ButtonGroup
        */
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.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.bool
     })
   ),
   /**

package/src/Carousel/Carousel.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useTheme } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import {
   getTokensPropType,
@@ -13,7 +13,9 @@ import {
   viewProps,
   useCopy,
   unpackFragment,
-  isTouchDevice
+  isTouchDevice,
+  useResponsiveProp,
+  resolveContentMaxWidth
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
@@ -252,11 +254,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 {}
@@ -402,6 +411,7 @@ const Carousel = React.forwardRef(
       loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
+      contentMaxWidth,
       ...rest
     },
     ref
@@ -409,6 +419,11 @@ const Carousel = React.forwardRef(
     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
@@ -1031,7 +1046,7 @@ const Carousel = React.forwardRef(
 
     return (
       <View style={selectRootContainerStyles(enableHero, viewport)}>
-        <View style={selectMainContainerStyles(enableHero, viewport)}>
+        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth)}>
           <CarouselProvider
             activeIndex={activeIndex}
             goTo={goTo}
@@ -1463,7 +1478,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

package/src/FlexGrid/FlexGrid.jsx

@@ -13,6 +13,7 @@ import {
   createMediaQueryStyles,
   useResponsiveProp
 } from '../utils'
+import resolveContentMaxWidth from '../utils/resolveContentMaxWidth'
 import Row from './Row'
 import Col from './Col'
 import GutterContext from './providers/GutterContext'
@@ -22,43 +23,16 @@ import { useViewport } from '../ViewportProvider'
 
 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
@@ -66,7 +40,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWid
     return viewports.map.get(viewportKey)
   }
 
-  if (contentMinWidth) {
+  if (contentWidthProp) {
     return maxWidth
   }
 
@@ -92,6 +66,7 @@ const FlexGrid = React.forwardRef(
       accessibilityRole,
       children,
       dataSet,
+      contentMaxWidth,
       contentMinWidth,
       ...rest
     },
@@ -107,29 +82,31 @@ const FlexGrid = React.forwardRef(
     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'
       }
     }
@@ -223,7 +200,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>
@@ -232,6 +209,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/src/IconButton/IconButton.jsx

@@ -136,6 +136,7 @@ const IconButton = React.forwardRef(
       hrefAttrs,
       testID,
       accessibilityRole = href ? 'link' : 'button',
+      inactive = false,
       ...rawRest
     },
     ref
@@ -149,9 +150,10 @@ const IconButton = React.forwardRef(
       linkProps.handleHref({ href, onPress })({ nativeEvent: { target: ref?.current?.id } })
     }
 
-    const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
+    const mergedVariant = inactive ? { ...variant, inactive: true } : variant
+    const getTokens = useThemeTokensCallback('IconButton', tokens, mergedVariant)
     const getOuterStyle = (pressableState) =>
-      selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password))
+      selectOuterStyle(getTokens(resolvePressableState(pressableState), mergedVariant.password))
 
     return (
       <Pressable
@@ -162,16 +164,17 @@ const IconButton = React.forwardRef(
         style={getOuterStyle}
         {...selectedProps}
         testID={testID}
+        disabled={inactive}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
           return (
-            <View style={selectInnerStyle(themeTokens, variant.password)}>
+            <View style={selectInnerStyle(themeTokens, mergedVariant.password)}>
               <Icon
                 icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
-                variant={variant}
+                variant={mergedVariant}
               />
             </View>
           )
@@ -206,7 +209,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({

package/src/TextInput/TextInputBase.jsx

@@ -313,7 +313,7 @@ const TextInputBase = React.forwardRef(
           icon={ClearButtonIcon}
           key="clear"
           onPress={handleClear}
-          variant={{ compact: true }}
+          variant={{ subtle: true }}
         />
       )
     }
@@ -329,7 +329,7 @@ const TextInputBase = React.forwardRef(
           icon={!showPassword ? passwordShowButtonIcon : passwordHideButtonIcon}
           key={!showPassword ? 'hide' : 'show'}
           onPress={handleShowOrHide}
-          variant={{ compact: true, password: true, inactive: variant.inactive, size: 'large' }}
+          variant={{ subtle: true, inactive: variant.inactive, size: 'large' }}
           tokens={{ width: 40, height: 40 }}
         />
       )

package/src/utils/index.js

@@ -27,3 +27,4 @@ export { default as formatImageSource } from './formatImageSource'
 export { default as getSpacingScale } from './getSpacingScale'
 export { default as useVariants } from './useVariants'
 export { default as isTouchDevice } from './isTouchDevice'
+export { default as resolveContentMaxWidth } from './resolveContentMaxWidth'

package/src/utils/resolveContentMaxWidth.js

@@ -0,0 +1,28 @@
+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} contentMaxWidthValue - The maximum 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 contentMaxWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+  if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
+    return null
+  }
+
+  if (Number.isFinite(contentMaxWidthValue)) {
+    return contentMaxWidthValue
+  }
+
+  if (contentMaxWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth
+  }
+
+  return contentMaxWidthValue
+}
+
+export default resolveContentMaxWidth

package/types/Status.d.ts

@@ -0,0 +1,42 @@
+import type { Variant } from '../../components-web/types/common'
+import { ComponentType, ReactNode } from 'react'
+
+import { IconProps } from './Icon'
+
+export type StatusTokensProps = {
+  backgroundColor: string
+  backgroundGradient: string
+  borderColor: string
+  borderRadius: number | string
+  borderWidth: number | string
+  fontName: string
+  fontSize: number | string
+  fontWeight: number | string
+  icon: IconProps
+  iconColor: string
+  iconGradient: string
+  marginLeft: string | number
+  paddingBottom: string | number
+  paddingLeft: string | number
+  paddingRight: string | number
+  paddingTop: string | number
+  textColor: string
+  textLineHeight: string | number
+  iconSize: number | string
+  iconPaddingTop: number | string
+}
+
+export interface StatusProps {
+  children: ReactNode
+  variant?: Variant
+  tokens?: Partial<StatusTokensProps>
+  customGradient?: (
+    gradient: { colors: string[]; start: { x: number; y: number }; end: { x: number; y: number } },
+    styles: Record<string, unknown>,
+    content: ReactNode
+  ) => ReactNode
+}
+
+declare const Status: ComponentType<StatusProps>
+
+export default Status

package/types/index.d.ts

@@ -90,4 +90,7 @@ export { PortalProps } from './Portal'
 export { default as Listbox } from './Listbox'
 export { ListboxProps, ListboxTokens } from './Listbox'
 
+export { default as Status } from './Status'
+export { StatusProps, StatusTokensProps } from './Status'
+
 export * from './Common'