@telus-uds/components-base 3.12.2 → 3.14.0

package/CHANGELOG.md

@@ -1,12 +1,47 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 25 Jul 2025 04:09:38 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Sep 2025 06:46:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.14.0
+
+Thu, 04 Sep 2025 06:46:41 GMT
+
+### Minor changes
+
+- `ViewportProvider`: add default-viewport prop (guillermo.peitzner@telus.com)
+- `Card`: position and align props added (35577399+JoshHC@users.noreply.github.com)
+- `Tabs`: new dropdown feature added for xs and sm viewports (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.13.0
+
+### Patches
+
+- `Card`: fix media queries styles (guillermo.peitzner@telus.com)
+- `FlexGrid`: change limitWidth default prop value from true to false (guillermo.peitzner@telus.com)
+- `Icon - backgroundColor`: update icon documentation with new section (sergio.ramirez@telus.com)
+
+## 3.13.0
+
+Fri, 15 Aug 2025 00:52:15 GMT
+
+### Minor changes
+
+- `Carousel`: add new stories & documentation (sergio.ramirez@telus.com)
+- `Notification`: Add `contentMinWidth` prop for system variant (guillermo.peitzner@telus.com)
+- `FlexGrid`: add min-content-width prop (guillermo.peitzner@telus.com)
+- `Checkbox`: Update storybook to add description to the component (sergio.ramirez@telus.com)
+- `ButtonDropdown`: add lead icon props and new variants (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.12.0
+
+### Patches
+
+- `ExpandCollapseMini` fix design & animations (sergio.ramirez@telus.com)
+- Invalid argument supplied to oneOfType issue fixed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.12.2
 
-Fri, 25 Jul 2025 04:09:38 GMT
+Fri, 25 Jul 2025 04:13:56 GMT
 
 ### Patches
 

package/lib/cjs/BaseProvider/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _portal = require("@gorhom/portal");
+var _systemConstants = require("@telus-uds/system-constants");
 var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
 var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
@@ -23,6 +24,7 @@ const BaseProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HydrationContext.HydrationProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
+        defaultViewport: themeOptions?.defaultViewport,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
           defaultTheme: defaultTheme,
           themeOptions: themeOptions,
@@ -40,7 +42,8 @@ BaseProvider.propTypes = {
   defaultTheme: _ThemeProvider.default.propTypes?.defaultTheme,
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool
+    forceZIndex: _propTypes.default.bool,
+    defaultViewport: _propTypes.default.oneOf(_systemConstants.viewports.keys)
   })
 };
 var _default = exports.default = BaseProvider;

package/lib/cjs/Button/ButtonDropdown.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
@@ -14,12 +15,12 @@ var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _StackView = require("../StackView");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 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 }; }
+const FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -58,6 +59,44 @@ const selectIconTokens = _ref => {
     }
   };
 };
+const selectDescriptionTextStyles = tokens => ({
+  ...(0, _ThemeProvider.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.default.OS === 'web' && {
+    flex: 1
+  }),
+  ...(isFullWidth && {
+    justifyContent: 'space-between',
+    flex: 1
+  })
+});
 const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value,
@@ -70,8 +109,11 @@ const ButtonDropdown = /*#__PURE__*/_react.default.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
@@ -87,7 +129,13 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...variant
   };
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => ({
+    ...(0, _utils.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 = (0, _pressability.getPressHandlersWithArgs)(props, [{
@@ -105,7 +153,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
-    inactive: inactive,
+    inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,
     ...props,
@@ -121,14 +169,14 @@ const ButtonDropdown = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const iconContent = IconComponent && !singleOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: iconWrapperStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
@@ -139,13 +187,28 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         ...(0, _utils.resolvePressableState)(buttonState, extraState),
         textStyles
       }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: textStyles,
-        children: label
+      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.contentContainer,
+        children: [leadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectLeadIconContainerStyles(itemTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: leadIcon,
+            tokens: selectLeadIconTokens(itemTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [staticStyles.textContainer, selectTextContainerStyles(itemTokens)],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: textStyles,
+            children: label
+          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectDescriptionTextStyles(itemTokens),
+            children: description
+          })]
+        })]
       });
-      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
-        space: iconSpace,
-        direction: 'row'
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectStackedContentStyles(itemTokens, iconPosition, isFullWidth),
+        children: [iconContent, content]
       });
     }
   });
@@ -177,6 +240,36 @@ ButtonDropdown.propTypes = {
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: _propTypes.default.string,
+  /**
+   * The description of ButtonDropdown.
+   */
+  description: _propTypes.default.string,
+  /**
+   * Use this prop to render the ButtonDropdown as display only without any interaction when there is only one option.
+   */
+  singleOption: _propTypes.default.bool
 };
+const staticStyles = _StyleSheet.default.create({
+  textContainer: {
+    alignItems: 'flex-start',
+    flexShrink: 1,
+    ...(_Platform.default.OS === 'web' && {
+      flex: 1
+    })
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    ...(_Platform.default.OS === 'web' && {
+      flex: 1
+    }),
+    flexShrink: 1
+  },
+  stackedContent: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
 var _default = exports.default = ButtonDropdown;

package/lib/cjs/Card/Card.js

@@ -11,11 +11,13 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
 var _props = require("../utils/props");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _CardBase = _interopRequireWildcard(require("./CardBase"));
 var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
 var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
 var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
+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 }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
 const SelectionType = {
@@ -189,12 +191,27 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      const tokensToTransform = selectionType ? (0, _CardBase.selectStyles)({
+        ...viewportTokens,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0
+      }) : (0, _CardBase.selectStyles)(viewportTokens);
+      acc[vp] = tokensToTransform;
+      return acc;
+    }, {});
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
     const {
       ids,
       styles
     } = _utils.StyleSheet.create({
-      card: mediaQueryStyleSheet
+      card: {
+        ...themeTokens[viewport],
+        ...mediaQueryStyleSheet
+      }
     });
     cardStyles = styles.card;
     mediaIds = ids.card;
@@ -328,7 +345,9 @@ Card.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   /**
    * Data set for the card.

package/lib/cjs/Card/CardBase.js

@@ -3,22 +3,119 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectStyles = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
+var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const setBackgroundImage = _ref => {
+  let {
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    content,
+    cardStyle
+  } = _ref;
+  const borderRadius = cardStyle?.borderRadius || 0;
+  const borderWidth = cardStyle?.borderWidth || 0;
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
+
+  // For contain mode with position and align, use CSS background properties for web
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (_Platform.default.OS === 'web') {
+      // Create background position based on position and align
+      let backgroundPosition;
+      switch (positionKey) {
+        case 'top-start':
+          backgroundPosition = 'left top';
+          break;
+        case 'top-center':
+          backgroundPosition = 'center top';
+          break;
+        case 'top-end':
+          backgroundPosition = 'right top';
+          break;
+        case 'bottom-start':
+          backgroundPosition = 'left bottom';
+          break;
+        case 'bottom-center':
+          backgroundPosition = 'center bottom';
+          break;
+        case 'bottom-end':
+          backgroundPosition = 'right bottom';
+          break;
+        case 'left-center':
+          backgroundPosition = 'left center';
+          break;
+        case 'right-center':
+          backgroundPosition = 'right center';
+          break;
+        default:
+          backgroundPosition = 'center center';
+      }
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition,
+        borderRadius: adjustedBorderRadius
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        role: "img",
+        "aria-label": alt,
+        children: content
+      });
+    }
+    // For React Native, apply positioning styles with full dimensions
+    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.containContainer, {
+        borderRadius: adjustedBorderRadius
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
+    });
+  }
+
+  // Use ImageBackground for all other resize modes and React Native
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    source: src,
+    imageStyle: {
+      borderRadius: adjustedBorderRadius
+    },
+    resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    children: content
+  });
+};
 
 // Ensure explicit selection of tokens
-const selectStyles = _ref => {
+const selectStyles = _ref2 => {
   let {
     flex,
     backgroundColor,
@@ -35,7 +132,7 @@ const selectStyles = _ref => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref;
+  } = _ref2;
   return {
     flex,
     backgroundColor,
@@ -68,46 +165,98 @@ const selectStyles = _ref => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+exports.selectStyles = selectStyles;
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     dataSet,
     backgroundImage,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
+  let content = children;
   const {
     src = '',
     alt = '',
-    resizeMode = ''
+    resizeMode = '',
+    position = '',
+    align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
   const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  if (backgroundImage && src) {
+    // When there's a background image, separate the padding from the container style
+    // so the image can fill the entire container without padding interference
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+
+    // Only create padding wrapper if there's actually padding defined
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      cardStyle: containerStyle
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: content
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-      source: imageSourceViewport,
-      imageStyle: {
-        borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
-      },
-      resizeMode: backgroundImageResizeMode,
-      style: styles.imageBackground,
-      accessible: true,
-      accessibilityLabel: alt,
-      children: children
-    }) : children
+    children: content
   });
 });
 CardBase.displayName = 'CardBase';
-const styles = _StyleSheet.default.create({
+const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',
     height: '100%'
+  },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
+  },
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  containImage: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
   }
 });
 CardBase.propTypes = {
@@ -122,7 +271,9 @@ CardBase.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
 var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -39,6 +39,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     href,
     hrefAttrs,
     dataSet,
+    backgroundImage,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -133,10 +134,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.container,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
           tokens: getCardTokens({
@@ -144,6 +142,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
             focused,
             hovered
           }),
+          backgroundImage: backgroundImage,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -167,6 +166,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     }),
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
+      backgroundImage: backgroundImage,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -175,6 +175,11 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flex: 1,
     display: 'flex'
+  },
+  linkContainer: {
+    flex: 1,
+    display: 'flex',
+    textDecoration: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -185,6 +190,15 @@ PressableCardBase.propTypes = {
     partial: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  backgroundImage: _propTypes.default.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _propTypes.default.oneOfType([_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), _propTypes.default.object]),
+    position: _propTypes.default.oneOfType([_propTypes.default.oneOf(['bottom', 'left', 'right', 'top']), _propTypes.default.object]),
+    align: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']), _propTypes.default.object])
+  })
 };
 var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);