@telus-uds/components-base 3.24.0 → 3.26.0

package/CHANGELOG.md

@@ -1,9 +1,32 @@
 # 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, 19 Jan 2026 20:39:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.26.0
+
+Mon, 19 Jan 2026 20:39:50 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add inverse variant (david.melara1@telus.com)
+- `Carousel`: add new swipe animation (sergio.ramirez@telus.com)
+- `TextInput`: Add ARIA feedback ID for improved accessibility (david.melara1@telus.com)
+
+## 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

@@ -11,6 +11,7 @@ var _PanResponder = _interopRequireDefault(require("react-native-web/dist/cjs/ex
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
@@ -30,11 +31,6 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Constants = require("./Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-};
 const staticStyles = _StyleSheet.default.create({
   root: {
     backgroundColor: 'transparent',
@@ -210,11 +206,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 +364,20 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
+    contentMaxWidth,
+    swipeReleaseStyle = _Constants.SWIPE_RELEASE_STYLES.INSTANT,
+    swipeReleaseDuration = _Constants.DEFAULT_SWIPE_RELEASE_DURATION,
     ...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
@@ -483,7 +495,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       });
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
-  const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
+  const animate = _react.default.useCallback(function (panToAnimate, toValue, toIndex) {
+    let isSwipeRelease = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -491,10 +504,23 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }
       return handleAnimationEnd(toIndex, ...args);
     };
-    if (reduceMotionRef.current || isSwiping.current) {
+    if (reduceMotionRef.current) {
+      _Animated.default.timing(panToAnimate, {
+        toValue,
+        duration: _Constants.INSTANT_ANIMATION_DURATION,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwipeRelease && swipeReleaseStyle === _Constants.SWIPE_RELEASE_STYLES.EASE_OUT) {
+      _Animated.default.timing(panToAnimate, {
+        toValue,
+        duration: swipeReleaseDuration,
+        easing: _Easing.default.out(_Easing.default.cubic),
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwiping.current || isSwipeRelease) {
       _Animated.default.timing(panToAnimate, {
         toValue,
-        duration: 1,
+        duration: _Constants.INSTANT_ANIMATION_DURATION,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
@@ -518,7 +544,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide, swipeReleaseStyle, swipeReleaseDuration]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -541,19 +567,20 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
+    const isSwipeRelease = transitionMode === _Constants.TRANSITION_MODES.SWIPE;
     if (activeIndexRef.current <= 0 && delta < 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      skipChanges = transitionMode !== _Constants.TRANSITION_MODES.AUTOMATIC;
       calcDelta = totalItems + delta;
     } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      skipChanges = transitionMode !== _Constants.TRANSITION_MODES.AUTOMATIC;
       calcDelta = -1 * activeIndexRef.current + delta - 1;
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
       isTransitioningRef.current = true;
-      animate(pan, toValue, index);
+      animate(pan, toValue, index, isSwipeRelease);
       if (enableHero) {
-        animate(heroPan, toValue, index);
+        animate(heroPan, toValue, index, isSwipeRelease);
       }
       return calcDelta;
     }
@@ -567,19 +594,19 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
     isTransitioningRef.current = true;
-    animate(pan, toValue, index);
+    animate(pan, toValue, index, isSwipeRelease);
     if (enableHero) {
-      animate(heroPan, heroToValue, index);
+      animate(heroPan, heroToValue, index, isSwipeRelease);
     }
     if (isCarouselPlaying) {
       stopAutoplay();
-      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
+      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === _Constants.TRANSITION_MODES.AUTOMATIC) {
         setisCarouselPlaying(false);
       } else if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
           updateOffset();
           handleAnimationStart(activeIndexRef.current);
-          updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+          updateIndex(slideDuration < 0 ? -1 : 1, _Constants.TRANSITION_MODES.AUTOMATIC);
           triggerRefocus();
         }, Math.abs(slideDuration) * 1000);
       }
@@ -593,7 +620,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       autoPlayRef.current = setTimeout(() => {
         updateOffset();
         handleAnimationStart(activeIndexRef.current);
-        updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+        updateIndex(slideDuration < 0 ? -1 : 1, _Constants.TRANSITION_MODES.AUTOMATIC);
         triggerRefocus();
       }, Math.abs(slideDuration) * 1000);
     }
@@ -606,7 +633,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
   const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
+    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Constants.TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
   _react.default.useEffect(() => {
@@ -766,16 +793,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(pan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta, TRANSITION_MODES.SWIPE);
+        updateIndex(delta, _Constants.TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [pan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const heroPanResponder = _react.default.useMemo(() => _PanResponder.default.create({
@@ -806,16 +833,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(heroPan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta, TRANSITION_MODES.SWIPE);
+        updateIndex(delta, _Constants.TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [heroPan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const goToNext = _react.default.useCallback(() => {
@@ -828,7 +855,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndexRef.current;
     if (delta) {
-      fixOffsetAndGo(delta, TRANSITION_MODES.MANUAL);
+      fixOffsetAndGo(delta, _Constants.TRANSITION_MODES.MANUAL);
     }
   }, [fixOffsetAndGo]);
 
@@ -896,7 +923,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 +1281,40 @@ 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])
+  }),
+  /**
+   * Animation style for swipe release transitions.
+   * - `'instant'`: Immediate snap to position (current default)
+   * - `'ease-out'`: Smooth deceleration animation
+   * - Default value is `'instant'`
+   * - Use `swipeReleaseDuration` to customize the animation duration when using `'ease-out'`
+   *
+   * @deprecated The default will change to `'ease-out'` in Q2 2026 (introduced Jan 2026).
+   */
+  swipeReleaseStyle: _propTypes.default.oneOf(['instant', 'ease-out']),
+  /**
+   * Duration in milliseconds of the ease-out animation when releasing a swipe gesture.
+   * Only applies when `swipeReleaseStyle` is set to `'ease-out'`.
+   * - Default value is `500` (500ms)
+   */
+  swipeReleaseDuration: _propTypes.default.number
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';

package/lib/cjs/Carousel/Constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+exports.TRANSITION_MODES = exports.SWIPE_RELEASE_STYLES = exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.INSTANT_ANIMATION_DURATION = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_SWIPE_RELEASE_DURATION = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
 const ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_XS_SM = 1;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
@@ -14,4 +14,15 @@ const LARGE_VIEWPORT_MARGIN = exports.LARGE_VIEWPORT_MARGIN = 40;
 const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;
 const PEEKING_MULTIPLIER = exports.PEEKING_MULTIPLIER = 2;
 const ACTIVE_INDEX_OFFSET_MULTIPLIER = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
-const NEGATIVE_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = -1;
+const NEGATIVE_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = -1;
+const TRANSITION_MODES = exports.TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
+const SWIPE_RELEASE_STYLES = exports.SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+};
+const INSTANT_ANIMATION_DURATION = exports.INSTANT_ANIMATION_DURATION = 1;
+const DEFAULT_SWIPE_RELEASE_DURATION = exports.DEFAULT_SWIPE_RELEASE_DURATION = 500;

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

@@ -72,7 +72,8 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation
+      validation: feedbackValidation,
+      accessibilityDescribedBy: feedbackId
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -149,7 +149,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.topText,
-      children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
+      children: (0, _renderTypography.default)(topText, topTextTypographyTokens, undefined, fontColor)
     }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         testID: "price-lockup-divider",

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 }; }