@telus-uds/components-base 3.24.0 → 3.26.0

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,15 @@
 import React from 'react'
-import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
+import {
+  View,
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  Easing
+} 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 +21,9 @@ import {
   viewProps,
   useCopy,
   unpackFragment,
-  isTouchDevice
+  isTouchDevice,
+  useResponsiveProp,
+  resolveContentMaxWidth
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
@@ -36,15 +46,13 @@ import {
   DEFAULT_VIEWPORT_MARGIN,
   PEEKING_MULTIPLIER,
   ACTIVE_INDEX_OFFSET_MULTIPLIER,
-  NEGATIVE_MULTIPLIER
+  NEGATIVE_MULTIPLIER,
+  TRANSITION_MODES,
+  SWIPE_RELEASE_STYLES,
+  INSTANT_ANIMATION_DURATION,
+  DEFAULT_SWIPE_RELEASE_DURATION
 } from './Constants'
 
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-}
-
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -252,11 +260,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 +417,9 @@ const Carousel = React.forwardRef(
       loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
+      contentMaxWidth,
+      swipeReleaseStyle = SWIPE_RELEASE_STYLES.INSTANT,
+      swipeReleaseDuration = DEFAULT_SWIPE_RELEASE_DURATION,
       ...rest
     },
     ref
@@ -409,6 +427,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
@@ -538,14 +561,29 @@ const Carousel = React.forwardRef(
     }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
 
     const animate = React.useCallback(
-      (panToAnimate, toValue, toIndex) => {
+      (panToAnimate, toValue, toIndex, isSwipeRelease = false) => {
         const applicableTransitionDuration =
           isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
-        if (reduceMotionRef.current || isSwiping.current) {
-          Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
-            handleAnimationEndToIndex
-          )
+        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: INSTANT_ANIMATION_DURATION,
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
         } else if (isAutoPlayEnabled) {
           Animated.timing(panToAnimate, {
             ...springConfig,
@@ -576,7 +614,9 @@ const Carousel = React.forwardRef(
         isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
-        enableDisplayMultipleItemsPerSlide
+        enableDisplayMultipleItemsPerSlide,
+        swipeReleaseStyle,
+        swipeReleaseDuration
       ]
     )
 
@@ -597,6 +637,7 @@ const Carousel = React.forwardRef(
         const toValue = { x: 0, y: 0 }
         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
@@ -608,10 +649,10 @@ const Carousel = React.forwardRef(
         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
         }
@@ -630,9 +671,9 @@ const Carousel = React.forwardRef(
         const heroToValue = { x: 0, y: 0 }
         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()
@@ -851,14 +892,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(pan, { x: 0, y: 0 }, 0)
+              animate(pan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -909,14 +950,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(heroPan, { x: 0, y: 0 }, 0)
+              animate(heroPan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -1031,7 +1072,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 +1504,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

package/src/Carousel/Constants.js

@@ -9,3 +9,17 @@ 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 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/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/InputSupports/InputSupports.jsx

@@ -66,7 +66,12 @@ const InputSupports = React.forwardRef(
           />
         )}
         {typeof children === 'function'
-          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
+          ? children({
+              inputId,
+              ...a11yProps,
+              validation: feedbackValidation,
+              accessibilityDescribedBy: feedbackId
+            })
           : children}
         {feedback || maxCharsReachedErrorMessage ? (
           <Feedback

package/src/PriceLockup/PriceLockup.jsx

@@ -121,7 +121,7 @@ const PriceLockup = React.forwardRef(
       >
         {topText ? (
           <View style={staticStyles.topText}>
-            {renderTypography(topText, topTextTypographyTokens)}
+            {renderTypography(topText, topTextTypographyTokens, undefined, fontColor)}
           </View>
         ) : null}
         {renderPrice(

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'