@telus-uds/components-base 3.12.2 → 3.13.0

package/lib/esm/Button/ButtonDropdown.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import ButtonBase from './ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
 import Icon from '../Icon';
-import { getStackedContent } from '../StackView';
 import { getPressHandlersWithArgs } from '../utils/pressability';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -49,6 +50,44 @@ const selectIconTokens = _ref => {
     }
   };
 };
+const selectDescriptionTextStyles = tokens => ({
+  ...applyTextStyles({
+    fontName: tokens?.descriptionFontName,
+    fontSize: tokens?.descriptionFontSize,
+    fontWeight: tokens?.descriptionFontWeight,
+    fontColor: tokens?.color
+  }),
+  paddingBottom: tokens?.descriptionTextPaddingBottom
+});
+const selectLeadIconTokens = tokens => ({
+  color: tokens?.leadIconColor,
+  backgroundColor: tokens?.leadIconBackgroundColor,
+  size: tokens?.leadIconSize,
+  borderRadius: tokens?.leadIconBorderRadius,
+  padding: tokens?.leadIconPadding
+});
+const selectLeadIconContainerStyles = tokens => ({
+  paddingTop: tokens?.leadIconContainerPaddingTop,
+  paddingBottom: tokens?.leadIconContainerPaddingBottom,
+  paddingLeft: tokens?.leadIconContainerPaddingLeft,
+  paddingRight: tokens?.leadIconContainerPaddingRight
+});
+const selectTextContainerStyles = tokens => ({
+  paddingLeft: tokens?.textPaddingLeft,
+  paddingRight: tokens?.textPaddingRight
+});
+const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
+  ...staticStyles.stackedContent,
+  gap: tokens?.iconSpace,
+  flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
+  ...(Platform.OS === 'web' && {
+    flex: 1
+  }),
+  ...(isFullWidth && {
+    justifyContent: 'space-between',
+    flex: 1
+  })
+});
 const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
@@ -61,8 +100,11 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     readOnly = false,
     children = null,
     accessibilityRole = 'radio',
+    description,
+    singleOption,
     ...props
   } = _ref2;
+  const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
   const {
     currentValue: isOpen,
     setValue: setIsOpen
@@ -78,7 +120,13 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...variant
   };
   const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => ({
+    ...selectTokens('Button', getTokens(buttonState)),
+    iconSpace: props?.icon ? getTokens(buttonState)?.iconSpace : 0,
+    ...(isFullWidth && {
+      width: 'full'
+    })
+  });
 
   // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = getPressHandlersWithArgs(props, [{
@@ -96,7 +144,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
-    inactive: inactive,
+    inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,
     ...props,
@@ -112,14 +160,14 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       // - Token sets: https://github.com/telus/universal-design-system/issues/782
 
       const itemTokens = getTokens(buttonState);
+      const leadIcon = itemTokens?.leadIcon;
       const {
         iconTokens,
         iconPosition,
-        iconSpace,
         iconWrapperStyle,
         icon: IconComponent
       } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
+      const iconContent = IconComponent && !singleOption ? /*#__PURE__*/_jsx(View, {
         style: iconWrapperStyle,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
@@ -130,13 +178,28 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         ...resolvePressableState(buttonState, extraState),
         textStyles
       }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
-        style: textStyles,
-        children: label
+      const content = children ? childrenContent() : /*#__PURE__*/_jsxs(View, {
+        style: staticStyles.contentContainer,
+        children: [leadIcon && /*#__PURE__*/_jsx(View, {
+          style: selectLeadIconContainerStyles(itemTokens),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: leadIcon,
+            tokens: selectLeadIconTokens(itemTokens)
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [staticStyles.textContainer, selectTextContainerStyles(itemTokens)],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: textStyles,
+            children: label
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: selectDescriptionTextStyles(itemTokens),
+            children: description
+          })]
+        })]
       });
-      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
-        space: iconSpace,
-        direction: 'row'
+      return /*#__PURE__*/_jsxs(View, {
+        style: selectStackedContentStyles(itemTokens, iconPosition, isFullWidth),
+        children: [iconContent, content]
       });
     }
   });
@@ -168,6 +231,36 @@ ButtonDropdown.propTypes = {
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  /**
+   * The description of ButtonDropdown.
+   */
+  description: PropTypes.string,
+  /**
+   * Use this prop to render the ButtonDropdown as display only without any interaction when there is only one option.
+   */
+  singleOption: PropTypes.bool
 };
+const staticStyles = StyleSheet.create({
+  textContainer: {
+    alignItems: 'flex-start',
+    flexShrink: 1,
+    ...(Platform.OS === 'web' && {
+      flex: 1
+    })
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    ...(Platform.OS === 'web' && {
+      flex: 1
+    }),
+    flexShrink: 1
+  },
+  stackedContent: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
 export default ButtonDropdown;

package/lib/esm/ExpandCollapse/ExpandCollapse.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps, useUniqueId } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 function selectBorderStyles(tokens) {
@@ -33,6 +33,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
+  const instanceId = useUniqueId('ExpandCollapse');
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
@@ -58,7 +59,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onToggle,
         resetValues,
         setValues,
-        unsetValues
+        unsetValues,
+        instanceId
       }) : children
     })
   });

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
+import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils';
 import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
+  const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel');
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -45,7 +45,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     pressed
   });
   const {
-    size,
+    fontSize,
+    lineHeight,
+    iconSize,
     icon
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
@@ -62,18 +64,38 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hover: linkHover
     } = linkState || {};
     const isHovered = hover || linkHover;
+    const iconBaselineOffset = 0;
+    const hoverTranslateY = 4;
+
+    // Calculate baseline alignment to vertically center icon with text
+    // This combines font and icon metrics with adjustments for visual balance
+    const fontBaseline = fontSize / hoverTranslateY; // Quarter of font size - adjusts for text's visual center point
+    const iconBaseline = iconSize / hoverTranslateY; // Quarter of icon size - adjusts for icon's visual center point
+    const staticOffset = hoverTranslateY; // Fixed downward adjustment to fine-tune vertical alignment
+    const sizeCompensation = -Math.abs(iconSize - fontSize); // Compensates when icon and text sizes differ significantly
+
+    const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation;
     if (Platform.OS !== 'web') {
+      // For native platforms, use baseline alignment with optional offset
       return {
-        iconTranslateY: -1
+        iconTranslateY: baselineAlignment + iconBaselineOffset
       };
     }
     if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+      // Apply animation offset to the baseline-aligned position
+      // When expanded: move icon UP (1.3 the hover distance for clear movement)
+      // When collapsed: move icon DOWN (single hover distance)
+      const hoverMovementDistance = 1.3;
+      const animationOffset = expanded ? -(hoverTranslateY * hoverMovementDistance) : hoverTranslateY;
       return {
-        iconTranslateY: (expanded ? -1 : 1) * size
+        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
       };
     }
-    return {};
+
+    // Default state uses baseline alignment with optional offset
+    return {
+      iconTranslateY: baselineAlignment + iconBaselineOffset
+    };
   };
   return /*#__PURE__*/_jsx(Link, {
     variant: appearance,
@@ -81,7 +103,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconPosition: iconPosition,
     tokens: linkState => ({
       ...linkTokens,
-      ...getTokens(linkState)
+      ...getTokens(linkState),
+      iconSize,
+      blockLineHeight: lineHeight
     }),
     ref: ref,
     ...presentationOnly,

package/lib/esm/FlexGrid/FlexGrid.js

@@ -1,7 +1,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 } from '../utils';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles, useResponsiveProp } from '../utils';
 import Row from './Row';
 import Col from './Col';
 import GutterContext from './providers/GutterContext';
@@ -10,6 +10,32 @@ 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 (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue) {
+    return null;
+  }
+  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return '100%';
+  }
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue;
+  }
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMinWidthValue;
+};
 
 /**
  * A mobile-first flexbox grid.
@@ -29,35 +55,41 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityRole,
     children,
     dataSet,
+    contentMinWidth,
     ...rest
   } = _ref;
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const viewport = useViewport();
   const {
+    themeOptions,
     themeOptions: {
       enableMediaQueryStyleSheet
     }
   } = useTheme();
   let flexgridStyles;
   let mediaIds;
+  const contentMinWidthValue = useResponsiveProp(contentMinWidth);
+  const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
+      maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth && viewports.map.get('sm'),
+      maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth && viewports.map.get('md'),
+      maxWidth: limitWidth ? viewports.map.get('md') : maxWidth,
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth && viewports.map.get('lg'),
+      maxWidth: limitWidth ? viewports.map.get('lg') : maxWidth,
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth && viewports.map.get('xl'),
+      maxWidth: limitWidth ? viewports.map.get('xl') : maxWidth,
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -151,7 +183,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+   * 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.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: 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])
+  })
 };
 FlexGrid.Row = Row;
 FlexGrid.Col = Col;

package/lib/esm/Icon/Icon.js

@@ -32,7 +32,9 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width: themeTokens.size + themeTokens.width * 2,
     // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
     height: themeTokens.size + themeTokens.width * 2
-  } : {};
+  } : {
+    padding: themeTokens.padding
+  };
   const getIconContentForMobile = () => {
     if (Object.keys(paddingStyles).length) {
       return /*#__PURE__*/_jsx(View, {

package/lib/esm/InputLabel/InputLabel.js

@@ -142,7 +142,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/esm/InputSupports/InputSupports.js

@@ -116,7 +116,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/esm/Notification/Notification.js

@@ -9,6 +9,7 @@ import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CONTENT_MAX_WIDTH = 'max';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
@@ -63,13 +64,13 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport, useContentMaxWidth) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system, useContentMaxWidth) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = {
@@ -92,7 +93,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
     let [vp, viewportTokens] = _ref6;
     acc[vp] = {
-      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
@@ -169,7 +170,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system, useContentMaxWidth) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +182,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && {
         alignSelf: 'center'
       })
@@ -280,6 +281,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     tokens,
     variant,
     onDismiss,
+    contentMinWidth,
     ...rest
   } = _ref7;
   const [isDismissed, setIsDismissed] = React.useState(false);
@@ -302,6 +304,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     system: isSystemEnabled,
     viewport
   });
+  const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH;
   const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
   const notificationComponentRef = React.useRef({
     containerStyles: {},
@@ -324,9 +327,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   }
   if (isDismissed) {
     return null;
@@ -423,6 +426,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: PropTypes.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOf(['max', 'full']),
+    lg: PropTypes.oneOf(['max', 'full']),
+    md: PropTypes.oneOf(['max', 'full']),
+    sm: PropTypes.oneOf(['max', 'full']),
+    xs: PropTypes.oneOf(['max', 'full'])
+  }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 };

package/lib/esm/utils/props/inputSupportsProps.js

@@ -37,7 +37,7 @@ export default {
      * 1. `tooltip` as a string - The content of the tooltip.
      * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+    tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */

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.11.0",
+    "@telus-uds/system-theme-tokens": "^4.12.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.12.2",
+  "version": "3.13.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.11.0",
+    "@telus-uds/system-theme-tokens": "^4.12.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.12.2",
+  "version": "3.13.0",
   "types": "types/index.d.ts"
 }