@telus-uds/components-web 4.16.0 → 4.18.0

package/CHANGELOG.md

@@ -1,9 +1,42 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 12 Jan 2026 14:55:22 GMT and should not be manually modified.
+This log was last generated on Thu, 29 Jan 2026 16:42:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.18.0
+
+Thu, 29 Jan 2026 16:42:47 GMT
+
+### Minor changes
+
+- `NavigationBar`: add contentMaxWidth prop (guillermo.peitzner@telus.com)
+- `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
+- `QuantitySelector`: add inactive prop (guillermo.peitzner@telus.com)
+- `Card`: Add full-bleed content support to Card component allowing content to extend to card edges (josue.higueroscalderon@telus.com)
+- `Card`: Unnecessary comments removed. (josue.higueroscalderon@telus.com)
+- Bump @telus-uds/components-base to v3.27.0
+- Bump @telus-uds/system-theme-tokens to v4.19.0
+
+### Patches
+
+- `Card`: component enhaced to manage the hover, focus and pressed states of interactiveCard properly (josue.higueroscalderon@telus.com)
+- `NavigationBar`: fix console warning (guillermo.peitzner@telus.com)
+- `QuantitySelector`: spacer alignment issue fixed (josue.higueroscalderon@telus.com)
+
+## 4.17.0
+
+Mon, 19 Jan 2026 20:01:22 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add inverse variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.26.0
+
+### Patches
+
+- `NavigationBar`: Fix flickering from overlay overflow (david.melara1@telus.com)
+
 ## 4.16.0
 
 Mon, 12 Jan 2026 14:55:22 GMT

package/lib/cjs/Card/Card.js

@@ -19,6 +19,63 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 const GRID_COLUMNS = 12;
+const POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  NONE: 'none'
+};
+
+/**
+ * Helper function to get StackView tokens
+ * @param {Object} columnFlex - Column flex properties
+ * @param {string} contentStackAlign - Alignment value for content stack
+ * @returns {Object} StackView tokens object
+ */
+const getStackViewTokens = (columnFlex, contentStackAlign) => ({
+  ...columnFlex,
+  alignItems: contentStackAlign
+});
+
+/**
+ * Helper function to get CardContent tokens
+ * @param {Object} baseTokens - Base tokens to spread
+ * @param {Object} options - Options object
+ * @param {boolean} options.backgroundImage - Whether background image is present
+ * @param {string} options.fullBleedContentChildrenAlign - Alignment for full bleed content children
+ * @param {boolean} options.useTransparentBackground - Whether to use transparent background when no backgroundImage
+ * @returns {Object} CardContent tokens object
+ */
+const getCardContentTokens = function (baseTokens) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    backgroundImage,
+    fullBleedContentChildrenAlign,
+    useTransparentBackground
+  } = options;
+
+  // Determine background color based on conditions
+  let backgroundColorOverride = {};
+  if (useTransparentBackground) {
+    if (!backgroundImage) {
+      backgroundColorOverride = {
+        backgroundColor: 'transparent'
+      };
+    }
+  } else if (backgroundImage) {
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
+  }
+  return {
+    ...baseTokens,
+    ...backgroundColorOverride,
+    ...(fullBleedContentChildrenAlign && {
+      alignSelf: fullBleedContentChildrenAlign
+    })
+  };
+};
 
 /**
  * A basic card component, unstyled by default.
@@ -77,6 +134,59 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     alignSelf
   };
 });
+const InteractiveCardWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__InteractiveCardWrapper",
+  componentId: "components-web__sc-1elbtwd-1"
+})(() => ({
+  position: 'relative',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column'
+}));
+const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__InteractiveOverlay",
+  componentId: "components-web__sc-1elbtwd-2"
+})(_ref2 => {
+  let {
+    overlayOpacity,
+    borderRadius
+  } = _ref2;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity || 0})`,
+    borderRadius,
+    pointerEvents: 'none',
+    transition: 'background-color 0.2s ease',
+    zIndex: 1
+  };
+});
+const FocusBorder = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__FocusBorder",
+  componentId: "components-web__sc-1elbtwd-3"
+})(_ref3 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    borderStyle: 'solid',
+    pointerEvents: 'none',
+    zIndex: 2
+  };
+});
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
@@ -130,16 +240,57 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   const {
     borderRadius
   } = allThemeTokens;
-  const cardBaseBorderWidth = allThemeTokens.borderWidth;
-  const pressableBorderWidth = (0, _componentsBase.useThemeTokens)('Card', {}, {
+
+  // Interactive cards: merge variants for CardBase (outer container)
+  // The outer variant takes priority over interactiveCard.variant for the style property
+  // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
+  const interactiveStyle = interactiveCard?.variant?.style;
+  const outerStyle = variant?.style;
+  const mergedVariant = {
+    ...variant,
+    style: outerStyle || interactiveStyle
+  };
+
+  // Interactive cards: build configuration for PressableCardBase
+  // This determines which style to use for interactive states (hover, pressed, etc.)
+  // without causing gradient duplication
+  let interactiveCardConfig = {};
+  if (interactiveCard?.body) {
+    const styleToUse = interactiveCard?.variant?.style || variant?.style;
+    const {
+      style,
+      ...otherVariantProps
+    } = interactiveCard?.variant || {};
+    interactiveCardConfig = {
+      interactive: true,
+      ...(styleToUse && {
+        style: styleToUse
+      }),
+      ...otherVariantProps
+    };
+  }
+  const getThemeTokensBase = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, interactiveCardConfig);
+
+  // Wrap getThemeTokens to remove gradient from resolved tokens
+  // PressableCardBase calls this function with pressableState (hover, pressed, etc.)
+  // We intercept the resolved tokens and remove gradient properties to prevent duplication
+  // since the gradient should only appear on CardBase (outer container)
+  const getThemeTokens = _react.default.useCallback(pressableState => {
+    const resolvedTokens = getThemeTokensBase(pressableState);
+    const {
+      gradient,
+      backgroundGradient,
+      ...tokensWithoutGradient
+    } = resolvedTokens;
+    return tokensWithoutGradient;
+  }, [getThemeTokensBase]);
+  const getFocusBorderTokens = (0, _componentsBase.useThemeTokensCallback)('Card', {}, {
     ...variant,
     interactive: true
-  }).borderWidth;
-  const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`;
-  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
-    interactive: true,
-    ...(interactiveCard?.variant || {})
   });
+
+  // Remove backgroundColor from tokens for full bleed interactive content
+  // to prevent background from covering the full bleed image
   const {
     backgroundColor: _,
     ...tokensWithoutBg
@@ -148,17 +299,19 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     ...variant,
     interactive: true
   });
-  const getFullBleedInteractiveCardTokens = cardState => ({
-    ...getFullBleedInteractiveTokens(cardState),
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    // Suppress gradient if interactiveCard.body exists to avoid border duplication
-    ...(interactiveCard?.body ? {
-      gradient: undefined
-    } : {})
-  });
+  const getFullBleedInteractiveCardTokens = cardState => {
+    return {
+      ...getFullBleedInteractiveTokens(cardState),
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      borderWidth: 0,
+      ...(interactiveCard?.body ? {
+        gradient: undefined
+      } : {})
+    };
+  };
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
@@ -167,12 +320,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   // pass as props to ConditionalWrapper
   const imgColCurrentViewport = (0, _componentsBase.useResponsiveProp)(imgCol);
   const maxCol = GRID_COLUMNS;
-  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
-  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
-  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const hasValidImgCol = imgCol && imgColCurrentViewport !== undefined && !Number.isNaN(imgColCurrentViewport);
+  const fullBleedImageWidth = hasValidImgCol ? `${imgColCurrentViewport / maxCol * 100}%` : undefined;
+  const adaptiveContentWidth = hasValidImgCol ? `${(maxCol - imgColCurrentViewport) / maxCol * 100}%` : undefined;
+  const isImageWidthAdjustable = hasValidImgCol && (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT);
   const contentWrapperStyleProps = {
-    width: adaptiveContentWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(hasValidImgCol && {
+      width: adaptiveContentWidth
+    }),
+    ...(hasValidImgCol && imgColCurrentViewport >= maxCol && {
       display: 'none'
     }),
     ...(fullBleedContentChildrenAlign && {
@@ -184,28 +340,32 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref2 => {
-    let [key] = _ref2;
-    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor'] : [])].includes(key);
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
+    let [key] = _ref4;
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage && interactiveCard?.body ? ['backgroundColor'] : [])].includes(key);
   }));
+  const isHorizontalFullBleed = fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT;
+  const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
-    width: fullBleedImageWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(isImageWidthAdjustable && {
+      width: fullBleedImageWidth
+    }),
+    ...(isImageWidthAdjustable && imgColCurrentViewport >= maxCol && {
       borderRadius,
       overflow: 'hidden'
     }),
-    ...(imgColCurrentViewport === 0 && {
+    ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && {
       display: 'none'
     })
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
     ref: ref,
     variant: {
-      ...variant,
+      ...(interactiveCard?.body ? mergedVariant : variant),
       padding: 'custom'
     },
     tokens: cardBaseTokens,
-    backgroundImage: backgroundImage,
+    backgroundImage: !interactiveCard?.body && backgroundImage,
     onPress: fullBleedInteractive ? undefined : onPress,
     ...(interactiveCard?.selectionType && {
       interactiveCard,
@@ -222,6 +382,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         ref: ref,
         tokens: getThemeTokens,
         dataSet: dataSet,
+        backgroundImage: backgroundImage,
         onPress: onPress,
         href: interactiveCard?.href,
         hrefAttrs: interactiveCard?.hrefAttrs,
@@ -229,96 +390,95 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
-      }), children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
         tokens: tokens,
         variant: variant,
         withFooter: hasFooter,
         children: children
       }) : null]
-    }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        marginTop: marginOffset,
-        marginBottom: marginOffset,
-        marginLeft: marginOffset,
-        marginRight: marginOffset
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
-        ref: ref,
-        tokens: getFullBleedInteractiveCardTokens,
-        dataSet: dataSet,
-        onPress: effectiveFullBleedOnPress,
-        href: effectiveFullBleedHref,
-        hrefAttrs: effectiveFullBleedHrefAttrs,
-        ...selectProps(restProps),
-        children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-          direction: contentStackDirection,
-          tokens: {
-            ...columnFlex,
-            alignItems: contentStackAlign
-          },
-          space: 0,
-          children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: contentWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-              tokens: {
-                ...tokensWithoutBg,
-                ...(backgroundImage ? {} : {
-                  backgroundColor: 'transparent'
-                }),
-                ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-                  alignSelf: fullBleedContentChildrenAlign
-                })
-              },
-              variant: variant,
-              withFooter: hasFooter,
-              children: children
-            })
-          }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: imageWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-              borderRadius: fullBleedBorderRadius,
-              ...fullBleedContentPropsClean,
-              position: fullBleedContentPosition,
-              cardState: cardState
-            })
+    }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+      ref: ref,
+      tokens: getFullBleedInteractiveCardTokens,
+      dataSet: dataSet,
+      onPress: effectiveFullBleedOnPress,
+      href: effectiveFullBleedHref,
+      hrefAttrs: effectiveFullBleedHrefAttrs,
+      ...selectProps(restProps),
+      children: cardState => {
+        let overlayOpacity = 0;
+        if (cardState.pressed) {
+          overlayOpacity = 0.2;
+        } else if (cardState.hover) {
+          overlayOpacity = 0.1;
+        }
+        const focusTokens = getFocusBorderTokens(cardState);
+        const showFocusBorder = cardState.focus && focusTokens.borderWidth > 0;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(InteractiveCardWrapper, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+            direction: contentStackDirection,
+            tokens: getStackViewTokens(columnFlex, contentStackAlign),
+            space: 0,
+            children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: contentWrapperStyleProps,
+              condition: isImageWidthAdjustable,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+                tokens: {
+                  ...getCardContentTokens(tokensWithoutBg, {
+                    backgroundImage,
+                    fullBleedContentChildrenAlign,
+                    useTransparentBackground: true
+                  }),
+                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
+                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
+                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
+                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
+                },
+                variant: variant,
+                withFooter: hasFooter,
+                children: children
+              })
+            }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: imageWrapperStyleProps,
+              condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+                borderRadius: fullBleedBorderRadius,
+                ...fullBleedContentPropsClean,
+                position: fullBleedContentPosition,
+                cardState: undefined
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
+            overlayOpacity: overlayOpacity,
+            borderRadius: borderRadius
+          }), showFocusBorder && /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorder, {
+            borderWidth: `${focusTokens.borderWidth}px`,
+            borderColor: focusTokens.borderColor,
+            borderRadius: borderRadius
           })]
-        })
-      })
-    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === 'none' && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-      tokens: {
-        ...tokens,
-        ...(backgroundImage ? {
-          backgroundColor: 'transparent'
-        } : {}),
-        ...(fullBleedContentChildrenAlign && {
-          alignSelf: fullBleedContentChildrenAlign
-        })
-      },
+        });
+      }
+    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === POSITION.NONE && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage,
+        fullBleedContentChildrenAlign
+      }),
       variant: variant,
       withFooter: hasFooter,
       children: children
-    }) : null, !fullBleedInteractive && fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    }) : null, !fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
-      tokens: {
-        ...columnFlex,
-        alignItems: contentStackAlign
-      },
+      tokens: getStackViewTokens(columnFlex, contentStackAlign),
       space: 0,
       children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-          tokens: {
-            ...tokens,
-            ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-              alignSelf: fullBleedContentChildrenAlign
-            })
-          },
+          tokens: getCardContentTokens(tokens, {
+            fullBleedContentChildrenAlign
+          }),
           variant: variant,
           withFooter: hasFooter,
           children: children
@@ -326,7 +486,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
-        condition: isImageWidthAdjustable,
+        condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentPropsClean,
@@ -342,7 +502,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     })]
   });
 });
-const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
+const positionValues = Object.values(POSITION);
 const alignValues = ['start', 'end', 'center', 'stretch'];
 const PositionedFullBleedContentPropType = _propTypes.default.shape({
   position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -28,12 +28,28 @@ const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
     letterSpacing: 0
   }
 });
+const ContentWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationBar__ContentWrapper",
+  componentId: "components-web__sc-1vis1gt-1"
+})(_ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return {
+    width: '100%',
+    ...(maxWidth && {
+      maxWidth,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    })
+  };
+});
 
 /**
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -46,8 +62,9 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     linkRouterProps,
     tokens,
     variant,
+    contentMaxWidth,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     currentValue,
     setValue
@@ -56,29 +73,35 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     initialValue: selectedId,
     onChange
   });
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const contentWidthValue = (0, _componentsBase.useResponsiveProp)(contentMaxWidth);
+  const responsiveWidth = (0, _componentsBase.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = (0, _componentsBase.resolveContentMaxWidth)(contentWidthValue, responsiveWidth);
   (0, _componentsBase.useHash)((hash, event) => {
-    let hashItem = hash && items.find(_ref2 => {
+    let hashItem = hash && items.find(_ref3 => {
       let {
         href
-      } = _ref2;
+      } = _ref3;
       return hash === href;
     });
     if (!hashItem) {
-      const parentItem = items.find(_ref3 => {
+      const parentItem = items.find(_ref4 => {
         let {
           items: parentItems
-        } = _ref3;
-        return parentItems?.some(_ref4 => {
+        } = _ref4;
+        return parentItems?.some(_ref5 => {
           let {
             href
-          } = _ref4;
+          } = _ref5;
           return hash === href;
         });
       });
-      hashItem = parentItem?.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref6 => {
         let {
           href
-        } = _ref5;
+        } = _ref6;
         return hash === href;
       });
     }
@@ -145,7 +168,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     };
   }, [openSubMenuId, handleMouseDown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+  const stackView = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
     ref: navRef,
@@ -163,7 +186,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport?.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref7, index) => {
       let {
         href,
         label,
@@ -174,7 +197,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         linkRouterProps: itemLinkRouterProps,
         items: nestedItems,
         ...itemRest
-      } = _ref6;
+      } = _ref7;
       const itemId = id ?? label;
       const handleClick = event => {
         if (nestedItems) {
@@ -200,9 +223,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
         ref: itemRef,
         href: href,
-        onClick: handleClick
-        // TODO: refactor to pass selected ID via context
-        ,
+        onClick: handleClick,
         selectedId: currentValue,
         index: index,
         LinkRouter: ItemLinkRouter,
@@ -226,6 +247,10 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }, itemId);
     })]
   });
+  return maxWidth ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentWrapper, {
+    maxWidth: maxWidth,
+    children: stackView
+  }) : stackView;
 });
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
@@ -285,6 +310,23 @@ NavigationBar.propTypes = {
   /**
    * Variant configuration
    */
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * The maximum width of the content in the NavigationBar.
+   * 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])
+  })
 };
 var _default = exports.default = NavigationBar;