@telus-uds/components-base 3.5.1 → 3.6.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 28 Mar 2025 01:00:41 GMT and should not be manually modified.
+This log was last generated on Thu, 24 Apr 2025 18:52:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.6.0
+
+Thu, 24 Apr 2025 18:52:13 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: add new tokens (sergio.ramirez@telus.com)
+- `Box`: add RNMQ support (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.4.0
+
+### Patches
+
+- `ExpandCollapseMini`: allow support for style variants (Mauricio.BatresMontejo@telus.com)
+- Update react dependencies to match valid versions (sergio.ramirez@telus.com)
+
+## 3.5.2
+
+Tue, 08 Apr 2025 19:36:14 GMT
+
+### Patches
+
+- `Carousel`: peeking mode optimizations (guillermo.peitzner@telus.com)
+- `Notification`: fix system alignment variant when using RNMQ (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: allow scrolling to viewport beyond xs (Mauricio.BatresMontejo@telus.com)
+
 ## 3.5.1
 
-Fri, 28 Mar 2025 01:00:41 GMT
+Fri, 28 Mar 2025 01:02:45 GMT
 
 ### Patches
 

package/lib/cjs/Box/Box.js

@@ -15,6 +15,7 @@ var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/I
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+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]);
@@ -203,8 +204,19 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
-  const styles = {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Box', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const getSpacingTokens = (0, _ThemeProvider.useThemeTokensCallback)('spacingScale');
+  let boxStyles = {
     flex,
     paddingLeft: (0, _utils.useSpacingScale)(left),
     paddingRight: (0, _utils.useSpacingScale)(right),
@@ -212,8 +224,38 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
+  let boxMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp] = _ref4;
+      acc.transformedThemeTokens[vp] = {
+        paddingLeft: (0, _utils.getSpacingScale)(left, vp, getSpacingTokens),
+        paddingRight: (0, _utils.getSpacingScale)(right, vp, getSpacingTokens),
+        paddingTop: (0, _utils.getSpacingScale)(top, vp, getSpacingTokens),
+        paddingBottom: (0, _utils.getSpacingScale)(bottom, vp, getSpacingTokens)
+      };
+      return acc;
+    }, {
+      transformedThemeTokens: {}
+    });
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
+    const {
+      ids
+    } = _utils.StyleSheet.create({
+      box: {
+        ...mediaQueryStyles
+      }
+    });
+    boxStyles = {
+      flex,
+      ...selectBoxStyles(themeTokens[viewport], customGradient)
+    };
+    boxMediaIds = ids.box;
+  }
   let content = children;
-  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  if (typeof customGradient === 'function') content = customGradient(boxStyles.colors, boxStyles)(children);
   const {
     src = '',
     alt = '',
@@ -247,23 +289,27 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       });
     }
   }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  const dataSetValue = boxMediaIds ? {
+    media: boxMediaIds,
+    ...dataSet
+  } : dataSet;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    scrollProps.contentContainerStyle = [boxStyles, scrollProps.contentContainerStyle];
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
       ...scrollProps,
       ...props,
       testID: testID,
-      dataSet: dataSet,
+      dataSet: dataSetValue,
       ref: ref,
       children: content
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ...props,
-    style: styles,
+    style: boxStyles,
     testID: testID,
-    dataSet: dataSet,
+    dataSet: dataSetValue,
     ref: ref,
     children: content
   });

package/lib/cjs/Carousel/Carousel.js

@@ -205,56 +205,27 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
 };
 
 /**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ * Calculates the final width of a carousel container based on the provided parameters.
  *
- * @param {number} containerWidth - The initial width of the container.
- * @param {boolean} enablePeeking - Flag indicating if peeking is enabled.
- * @param {object} viewport - The viewport properties.
- * @param {object} activeIndexRef - A ref object holding the current active index.
- * @param {number} totalItems - The total number of items in the carousel.
- * @param {number} calcDelta - The delta value used for calculations.
- * @returns {number} - The final calculated width of the container.
- *
- * The function adjusts the container width for displacement purposes based on the peeking properties and the position
- * of the active item (first, middle, or last). It considers different peeking spaces and gaps
- * to ensure the correct width is calculated for the carousel to display properly.
+ * @param {number} containerWidth - The width of the carousel container.
+ * @param {boolean} enablePeeking - Flag indicating whether peeking is enabled.
+ * @param {Object} viewport - The viewport configuration object used to determine peeking properties.
+ * @param {React.MutableRefObject<number>} activeIndexRef - A ref object holding the current active index of the carousel.
+ * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
   let finalWidth = containerWidth;
   if (enablePeeking) {
     const {
-      peekingFirstSpace,
       peekingGap,
-      peekingLastSpace,
-      peekingMiddleSpace
+      peekingMiddleSpace,
+      peekingMarginLeft
     } = getPeekingProps(viewport);
-    const isFirst = activeIndexRef.current === 0;
-    const isLast = activeIndexRef.current + 1 >= totalItems;
-    const isMiddle = !isFirst && !isLast;
-    const basePeekingSpace = peekingFirstSpace + peekingGap + peekingMiddleSpace;
-    const middlePeekingSpace = peekingMiddleSpace * 2 + peekingGap;
-    if (isFirst) {
-      finalWidth -= basePeekingSpace;
-      if (activeIndexRef.current + 1 === totalItems - 1) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
-    } else if (isMiddle) {
-      if (calcDelta > 0) {
-        finalWidth -= basePeekingSpace + middlePeekingSpace * activeIndexRef.current;
-        if (activeIndexRef.current + 1 === totalItems - 1) {
-          finalWidth -= peekingLastSpace - peekingMiddleSpace;
-        }
-      } else {
-        finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-        if (activeIndexRef.current - 1 === 0) {
-          finalWidth -= peekingFirstSpace - peekingMiddleSpace;
-        }
-      }
-    } else if (isLast) {
-      finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-      if (activeIndexRef.current - 1 === 0) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
+    const slideWide = containerWidth - (peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap * _Constants.PEEKING_MULTIPLIER);
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace;
+    } else {
+      finalWidth = slideWide + peekingGap;
     }
   }
   return finalWidth;
@@ -441,7 +412,23 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsAnimating(false);
   }, [onAnimationEnd]);
   const updateOffset = _react.default.useCallback(() => {
-    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
+    if (enablePeeking) {
+      const {
+        peekingGap,
+        peekingMiddleSpace,
+        peekingMarginLeft
+      } = getPeekingProps(viewport);
+      let finalWidth;
+      const slideWide = containerLayoutRef.current.width - (peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap * _Constants.PEEKING_MULTIPLIER);
+      if (activeIndexRef.current === 0) {
+        finalWidth = 0;
+      } else {
+        finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace + (slideWide + peekingGap) * (activeIndexRef.current - _Constants.ACTIVE_INDEX_OFFSET_MULTIPLIER);
+      }
+      animatedX.current = finalWidth * _Constants.NEGATIVE_MULTIPLIER;
+    } else {
+      animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * _Constants.NEGATIVE_MULTIPLIER;
+    }
     animatedY.current = 0;
     pan.setOffset({
       x: animatedX.current,
@@ -452,7 +439,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       y: 0
     });
     if (enableHero) {
-      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1;
+      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * _Constants.NEGATIVE_MULTIPLIER;
       heroAnimatedY.current = 0;
       heroPan.setOffset({
         x: heroAnimatedX.current,
@@ -463,7 +450,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         y: 0
       });
     }
-  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero]);
+  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -538,7 +525,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     stopAutoplay();
     setActiveIndex(index);
-    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
+    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef);
     toValue.x = finalWidth * -1 * calcDelta;
     const heroToValue = {
       x: 0,

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -20,18 +20,17 @@ const selectContainerStyle = _ref => {
     elementIndex,
     enablePeeking,
     peekingMarginLeft,
-    peekingFirstSpace,
     peekingGap,
     hidden,
     enableDisplayMultipleItemsPerSlide,
-    viewport
+    viewport,
+    peekingMiddleSpace
   } = _ref;
   let adjustedWidth = width;
   let marginLeft = 0;
-  const marginRight = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2);
     if (isFirst) {
       marginLeft = peekingMarginLeft;
     } else {
@@ -68,8 +67,7 @@ const selectContainerStyle = _ref => {
   }
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   };
   if (hidden && _Platform.default.OS === 'web') {
     style.visibility = 'hidden';

package/lib/cjs/Carousel/Constants.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LARGE_VIEWPORT_MARGIN = 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 = void 0;
+exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = 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;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
 const GAP_BETWEEN_ITEMS = exports.GAP_BETWEEN_ITEMS = 16;
 const HERO_POSITION_OFFSET = exports.HERO_POSITION_OFFSET = 20;
 const DEFAULT_POSITION_OFFSET = exports.DEFAULT_POSITION_OFFSET = 0;
 const LARGE_VIEWPORT_MARGIN = exports.LARGE_VIEWPORT_MARGIN = 40;
-const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;
+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;

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
 var _utils = require("../utils");
+var _props = require("../utils/props");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -85,6 +86,10 @@ ExpandCollapseMini.propTypes = {
    * Optional variant object to override the default theme tokens
    */
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * ExpandCollapseMini variant.
+   */
+  variant: _props.variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -23,21 +23,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -46,22 +32,28 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref;
   const {
     expanded,
     hover,
-    focus
+    focus,
+    pressed
   } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
-    outerBorderColor
-  } = (0, _ThemeProvider.useThemeTokens)('Link', {}, {}, {
-    focus: _Platform.default.OS !== 'web' ? expanded : focus
+    quiet
+  } = variant;
+  const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
+  const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
+    ...variant,
+    quiet: expanded ?? quiet
+  }, {
+    focus: isFocusVisible,
+    hover,
+    pressed
   });
   const {
     size,
-    icon,
-    ...themeTokens
+    icon
   } = (0, _ThemeProvider.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
@@ -95,9 +87,8 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
+      ...linkTokens,
+      ...getTokens(linkState)
     }),
     ref: ref,
     ...presentationOnly,

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -137,6 +137,10 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonIconPadding,
     subtitleColor,
     dividerColor,
+    iconColor,
+    buttonBackgroundColor,
+    iconColorSelected,
+    buttonBackgroundColorSelected,
     ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
@@ -159,7 +163,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     paddingBottom: labelPaddingBottom,
     paddingLeft: labelPaddingLeft,
     paddingRight: labelPaddingRight,
-    iconBackground: buttonIconBackgroundColor
+    iconBackground: buttonIconBackgroundColor,
+    iconColor: isSelected ? iconColorSelected : iconColor,
+    backgroundColor: isSelected ? buttonBackgroundColorSelected : buttonBackgroundColor
   };
   const getButtonDropdownTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', dropdownTokens, variant);
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('ButtonDropdown', getButtonDropdownTokens(buttonState));
@@ -249,7 +255,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   const [isScrolling, setIsScrolling] = _react.default.useState(false);
   const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
   const [rowHeight, setRowHeight] = _react.default.useState(0);
-  const modalRef = (0, _utils.useScrollBlocking)(isOpen);
+  const modalRef = (0, _utils.useScrollBlocking)(isOpen && viewport === 'xs');
   const windowWidth = _Dimensions.default.get('window').width;
   const windowHeight = _Dimensions.default.get('window').height;
   _react.default.useEffect(() => {

package/lib/cjs/Notification/Notification.js

@@ -70,8 +70,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
+  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -79,9 +79,12 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
+    acc[vp] = {
+      ...selectContainerStyles({
+        ...viewportTokens
+      }),
+      flexDirection: 'column'
+    };
     return acc;
   }, {});
   const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
@@ -90,22 +93,29 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     styles: containerStyles
   } = _utils.StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = _utils.StyleSheet.create({
-    contentContainer: {
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
+    let [vp, viewportTokens] = _ref6;
+    acc[vp] = {
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
       ...(system && {
         alignSelf: 'center'
       })
+    };
+    return acc;
+  }, {});
+  const selectContentContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContentContainerStyles);
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = _utils.StyleSheet.create({
+    contentContainer: {
+      ...selectContentContainerMediaQueryStyles
     }
   });
   const {
@@ -178,7 +188,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
       ...(system && {
         alignSelf: 'center'
       })
@@ -268,7 +278,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     system,
@@ -278,7 +288,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     onDismiss,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const getCopy = (0, _useCopy.default)({
@@ -299,7 +309,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
+  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},

package/lib/cjs/utils/getSpacingScale.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useResponsiveProp = require("./useResponsiveProp");
+/**
+ * Resolves spacing options from the provided space object.
+ *
+ * @param {Object} space - The space configuration object.
+ * @param {Object} [space.options] - The options for spacing.
+ * @param {number|string} [space.options.size] - The size of the spacing. Can be a number or a string.
+ * @param {string} [space.options.variant] - The variant of the spacing.
+ * @param {number} [space.options.subtract=0] - A value to subtract from the spacing size.
+ * @returns {Object} An object containing resolved spacing tokens, variant, overridden flag, and subtract value.
+ * @property {Object} tokens - The resolved spacing tokens.
+ * @property {number|string} tokens.size - The size of the spacing.
+ * @property {string} [variant] - The variant of the spacing.
+ * @property {boolean} overridden - Indicates if the size is explicitly overridden as a number.
+ * @property {number} subtract - The value to subtract from the spacing size.
+ */
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number';
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+
+/**
+ * Calculates the spacing scale based on the provided space value, viewport, and spacing tokens.
+ *
+ * @param {Object} spaceValue - The space value configuration, which may include responsive properties.
+ * @param {Object} viewport - The current viewport dimensions or configuration.
+ * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
+ * @returns {number} The calculated spacing scale, ensuring it is non-negative.
+ */
+const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && (spaceValue?.space ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const {
+    size
+  } = getSpacingTokens({
+    ...variant,
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  }, tokens);
+  return Math.max(size - subtract, 0);
+};
+var _default = exports.default = getSpacingScale;

package/lib/cjs/utils/index.js

@@ -19,7 +19,8 @@ var _exportNames = {
   htmlAttrs: true,
   transformGradient: true,
   convertFromMegaByteToByte: true,
-  formatImageSource: true
+  formatImageSource: true,
+  getSpacingScale: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -45,6 +46,12 @@ Object.defineProperty(exports, "formatImageSource", {
     return _formatImageSource.default;
   }
 });
+Object.defineProperty(exports, "getSpacingScale", {
+  enumerable: true,
+  get: function () {
+    return _getSpacingScale.default;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -240,6 +247,7 @@ var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 var _transformGradient = require("./transformGradient");
 var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
+var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/useResponsiveProp.js

@@ -28,7 +28,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   _systemConstants.viewports.inherit(prop)[viewport] :
   // If no current viewport is available, default to smallest viewport
   prop[_systemConstants.viewports.keys.find(key => (0, _hasOwnProperty.default)(prop, key))];
-  return value === undefined ? defaultValue : value;
+  return value === undefined || value === null ? defaultValue : value;
 };
 
 /**