@telus-uds/components-base 3.22.0 → 3.24.0

package/CHANGELOG.md

@@ -1,9 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 29 Oct 2025 07:40:46 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Dec 2025 05:37:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.24.0
+
+Fri, 12 Dec 2025 05:37:22 GMT
+
+### Minor changes
+
+- `Card`: interactive mode added for FullBleedContent (35577399+JoshHC@users.noreply.github.com)
+- `Shortcuts`: add component (guillermo.peitzner@telus.com)
+- `Listbox & NavigationBar`: add `secondLevel` variant (sergio.ramirez@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.17.0
+
+## 3.23.0
+
+Wed, 19 Nov 2025 05:51:39 GMT
+
+### Minor changes
+
+- `Listbox`: Added test and snapshot for Listbox (david.melara1@telus.com)
+- `Listbox`: Updated style for koodo, allium and public mobile; added new style variant (david.melara1@telus.com)
+- `ButtonGroup`: enhacements for iOS and android implemented and fix for the mobile version (35577399+JoshHC@users.noreply.github.com)
+- `Button`: Implement heightFull prop (oscar.palencia@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.16.0
+
+### Patches
+
+- `Validator`: code refactored to resolve several bugs (35577399+JoshHC@users.noreply.github.com)
+- `Carousel`: fix tab navigation (guillermo.peitzner@telus.com)
+
 ## 3.22.0
 
 Wed, 29 Oct 2025 07:40:46 GMT

package/lib/cjs/Button/Button.js

@@ -19,6 +19,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole = 'button',
     tokens,
     variant,
+    heightFull = true,
     ...props
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -36,6 +37,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ...props,
     tokens: getTokens,
+    heightFull: heightFull,
     accessibilityRole: accessibilityRole,
     ref: ref,
     viewport: viewport

package/lib/cjs/Button/ButtonBase.js

@@ -40,23 +40,27 @@ const selectFlexAndWidthStyles = _ref2 => {
   }
   return styles;
 };
-const selectOuterContainerStyles = _ref3 => {
+const selectOuterContainerStyles = (_ref3, heightFull) => {
   let {
     opacity,
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     borderRadius,
-    outerBackgroundColor
+    outerBackgroundColor,
+    alignSelf
   } = _ref3;
   return {
+    backgroundColor: outerBackgroundColor,
+    opacity,
     ..._Platform.default.select({
       native: {
+        alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+      },
+      web: heightFull ? {} : {
         alignSelf: 'flex-start'
       }
     }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
     ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
@@ -255,6 +259,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     icon,
     iconPosition = icon ? 'left' : undefined,
     iconProps,
+    heightFull = true,
     ...rawRest
   } = _ref12;
   const {
@@ -314,7 +319,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     }
     const themeTokens = resolveButtonTokens(pressableState);
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens, heightFull), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
     dataSet: {

package/lib/cjs/Button/ButtonDropdown.js

@@ -112,6 +112,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     accessibilityRole = 'radio',
     description,
     singleOption,
+    heightFull = true,
     ...props
   } = _ref2;
   const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
@@ -154,6 +155,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
+    heightFull: heightFull,
     inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,

package/lib/cjs/Button/ButtonGroup.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _StackView = require("../StackView");
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
@@ -17,17 +18,10 @@ var _utils = require("../utils");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const getStackWrapTokens = variant => {
-  return _Platform.default.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  });
-};
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -60,12 +54,6 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const themeStackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
-  const variantStackTokens = getStackWrapTokens(variant);
-  const stackTokens = {
-    ...themeStackTokens,
-    ...variantStackTokens
-  };
   const {
     direction,
     space,
@@ -75,15 +63,34 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
+  const isMobileNonContained = _Platform.default.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
-  const getButtonTokens = state => {
+  const gapValue = (0, _utils.useSpacingScale)(gap || space);
+  const getButtonTokens = (0, _react.useCallback)(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
+    const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
     return {
       ...themeButtonTokens,
-      width: variant?.width === 'equal' ? '100%' : 'auto',
-      flex: variant?.width === 'equal' ? 1 : undefined
+      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...(shouldUseTransparentBackground && {
+        backgroundColor: 'transparent'
+      }),
+      alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
     };
-  };
+  }, [themeButtonTokensCallback, isMobileNonContained, variant?.width]);
+  const fieldsetStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.fieldsetBase,
+    borderRadius,
+    backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+    padding,
+    width: variant?.width === 'equal' ? '100%' : 'auto'
+  }), [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]);
+  const viewStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.viewBase,
+    flexDirection: direction === 'column' ? 'column' : 'row',
+    gap: gapValue || 0,
+    justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
+  }), [direction, gapValue, variant?.width]);
   const {
     currentValues,
     toggleOneValue
@@ -120,25 +127,11 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
-    style: {
-      borderRadius,
-      backgroundColor,
-      padding,
-      ...(_Platform.default.OS === 'web' ? {
-        gap,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      } : {
-        alignSelf: 'flex-start'
-      })
-    },
+    style: fieldsetStyles,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       accessibilityRole: innerRole,
-      space: space,
-      direction: direction,
-      tokens: stackTokens,
-      gap: gap,
-      ref: ref,
+      style: viewStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -298,4 +291,18 @@ ButtonGroup.propTypes = {
    */
   copy: _propTypes.default.oneOf(['en', 'fr'])
 };
+const staticStyles = _StyleSheet.default.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+});
 var _default = exports.default = ButtonGroup;

package/lib/cjs/Button/propTypes.js

@@ -13,6 +13,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const textAndA11yText = exports.textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
 const buttonPropTypes = {
   tokens: (0, _props.getTokensPropType)('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: _propTypes.default.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/lib/cjs/Card/CardBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectStyles = exports.default = void 0;
+exports.selectStyles = exports.fullBleedContentPropTypes = 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"));
@@ -15,9 +15,16 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid/FlexGrid"));
+var _Row = _interopRequireDefault(require("../FlexGrid/Row"));
+var _Col = _interopRequireDefault(require("../FlexGrid/Col"));
 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 GRID_COLUMNS = 12;
+const isOverlayColor = color => {
+  return color && typeof color === 'string' && color.startsWith('rgba(');
+};
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -31,12 +38,9 @@ const setBackgroundImage = _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':
@@ -80,7 +84,6 @@ const setBackgroundImage = _ref => {
         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, {
@@ -99,8 +102,6 @@ const setBackgroundImage = _ref => {
       })]
     });
   }
-
-  // Use ImageBackground for all other resize modes and React Native
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
     source: src,
     imageStyle: {
@@ -126,6 +127,10 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     shadow,
     backgroundGradient,
@@ -133,9 +138,18 @@ const selectStyles = _ref2 => {
     maxHeight,
     overflowY
   } = _ref2;
+  const hasGradient = (gradient || backgroundGradient) && _Platform.default.OS === 'web';
+  let backgroundImageValue = null;
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient;
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`;
+    const shouldApplyOverlay = (gradient || backgroundGradient && backgroundColor && backgroundColor !== 'transparent') && isOverlayColor(backgroundColor);
+    backgroundImageValue = shouldApplyOverlay ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}` : gradientString;
+  }
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white';
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -143,16 +157,20 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(gradient && _Platform.default.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px white`,
+      boxShadow: `inset 0 1000px ${boxShadowColor}`,
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && _Platform.default.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+      backgroundImage: backgroundImageValue
     } : {}),
     ...(_Platform.default.OS === 'web' ? {
       maxHeight,
@@ -172,9 +190,11 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tokens,
     dataSet,
     backgroundImage,
+    fullBleedContent,
+    cardState,
     ...rest
   } = _ref3;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -188,9 +208,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
   const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
   const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  const {
+    content: fullBleedImageContent,
+    position: fullBleedContentPosition,
+    imgCol
+  } = fullBleedContent || {};
+  const fullBleedPosition = (0, _utils.useResponsiveProp)(fullBleedContentPosition, 'bottom');
   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,
@@ -198,8 +222,6 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       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: {
@@ -227,6 +249,53 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       children: content
     });
   }
+  if (fullBleedContent && fullBleedImageContent) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+    const imageColumns = imgCol || {
+      xs: GRID_COLUMNS
+    };
+    const textColumns = {};
+    Object.keys(imageColumns).forEach(breakpoint => {
+      textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS);
+    });
+    const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left';
+    const imageColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...imageColumns,
+      style: staticStyles.fullBleedImageCol,
+      children: fullBleedImageContent
+    });
+    const textColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...textColumns,
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+          children: imageFirst ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [imageColContent, textColContent]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [textColContent, imageColContent]
+          })
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
@@ -236,6 +305,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
+const fullBleedContentPropTypes = exports.fullBleedContentPropTypes = _propTypes.default.shape({
+  content: _propTypes.default.node.isRequired,
+  alt: _propTypes.default.string,
+  position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch'])),
+  imgCol: _propTypes.default.object
+});
 const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',
@@ -257,6 +333,9 @@ const staticStyles = _StyleSheet.default.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 });
 CardBase.propTypes = {
@@ -274,6 +353,7 @@ CardBase.propTypes = {
     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']))
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -13,11 +13,13 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _CardBase = _interopRequireWildcard(require("./CardBase"));
 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, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
@@ -40,6 +42,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     hrefAttrs,
     dataSet,
     backgroundImage,
+    fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -133,10 +136,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.linkContainer,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
@@ -146,6 +146,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
             hovered
           }),
           backgroundImage: backgroundImage,
+          fullBleedContent: fullBleedContent,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -170,6 +171,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
       backgroundImage: backgroundImage,
+      fullBleedContent: fullBleedContent,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -183,7 +185,8 @@ const staticStyles = _StyleSheet.default.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -203,6 +206,7 @@ PressableCardBase.propTypes = {
     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])
-  })
+  }),
+  fullBleedContent: _CardBase.fullBleedContentPropTypes
 };
 var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);