@telus-uds/components-base 3.24.0 → 3.26.0

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

@@ -5,10 +5,11 @@ import PanResponder from "react-native-web/dist/exports/PanResponder";
 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 Easing from "react-native-web/dist/exports/Easing";
 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';
@@ -21,13 +22,8 @@ import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import Box from '../Box';
-import { ITEMS_PER_VIEWPORT_XS_SM, ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER } from './Constants';
+import { ITEMS_PER_VIEWPORT_XS_SM, ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER, TRANSITION_MODES, SWIPE_RELEASE_STYLES, INSTANT_ANIMATION_DURATION, DEFAULT_SWIPE_RELEASE_DURATION } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-};
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -203,11 +199,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 +357,20 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
+    contentMaxWidth,
+    swipeReleaseStyle = SWIPE_RELEASE_STYLES.INSTANT,
+    swipeReleaseDuration = DEFAULT_SWIPE_RELEASE_DURATION,
     ...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
@@ -476,7 +488,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       });
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
-  const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
+  const animate = React.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++) {
@@ -484,10 +497,23 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
       return handleAnimationEnd(toIndex, ...args);
     };
-    if (reduceMotionRef.current || isSwiping.current) {
+    if (reduceMotionRef.current) {
+      Animated.timing(panToAnimate, {
+        toValue,
+        duration: INSTANT_ANIMATION_DURATION,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwipeRelease && swipeReleaseStyle === SWIPE_RELEASE_STYLES.EASE_OUT) {
+      Animated.timing(panToAnimate, {
+        toValue,
+        duration: swipeReleaseDuration,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwiping.current || isSwipeRelease) {
       Animated.timing(panToAnimate, {
         toValue,
-        duration: 1,
+        duration: INSTANT_ANIMATION_DURATION,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
@@ -511,7 +537,7 @@ const Carousel = /*#__PURE__*/React.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.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -534,6 +560,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
+    const isSwipeRelease = transitionMode === TRANSITION_MODES.SWIPE;
     if (activeIndexRef.current <= 0 && delta < 0) {
       skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
       calcDelta = totalItems + delta;
@@ -544,9 +571,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     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;
     }
@@ -560,9 +587,9 @@ const Carousel = /*#__PURE__*/React.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();
@@ -759,16 +786,16 @@ const Carousel = /*#__PURE__*/React.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);
       }
-      isSwiping.current = false;
     }
   }), [pan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const heroPanResponder = React.useMemo(() => PanResponder.create({
@@ -799,16 +826,16 @@ const Carousel = /*#__PURE__*/React.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);
       }
-      isSwiping.current = false;
     }
   }), [heroPan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const goToNext = React.useCallback(() => {
@@ -889,7 +916,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 +1274,40 @@ 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])
+  }),
+  /**
+   * 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.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.number
 };
 Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';

package/lib/esm/Carousel/Constants.js

@@ -8,4 +8,15 @@ export const LARGE_VIEWPORT_MARGIN = 40;
 export const DEFAULT_VIEWPORT_MARGIN = 10;
 export const PEEKING_MULTIPLIER = 2;
 export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
-export const NEGATIVE_MULTIPLIER = -1;
+export const NEGATIVE_MULTIPLIER = -1;
+export const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
+export const SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+};
+export const INSTANT_ANIMATION_DURATION = 1;
+export const DEFAULT_SWIPE_RELEASE_DURATION = 500;

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

@@ -65,7 +65,8 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation
+      validation: feedbackValidation,
+      accessibilityDescribedBy: feedbackId
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/esm/PriceLockup/PriceLockup.js

@@ -142,7 +142,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.topText,
-      children: renderTypography(topText, topTextTypographyTokens)
+      children: renderTypography(topText, topTextTypographyTokens, undefined, fontColor)
     }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
         testID: "price-lockup-divider",

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.26.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.26.0",
   "types": "types/index.d.ts"
 }