@telus-uds/components-base 3.27.0 → 3.28.0

package/CHANGELOG.md

@@ -1,19 +1,35 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 29 Jan 2026 16:42:47 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Feb 2026 02:50:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.28.0
+
+Wed, 18 Feb 2026 02:50:19 GMT
+
+### Minor changes
+
+- `SideNav`: Update code logic to support top and bottom borders (david.melara1@telus.com)
+- `ProgressBar`: add layers variant for controlling bar positioning (sergio.ramirez@telus.com)
+- `Modal`: Add `backgroundDismissible` prop to control backdrop dismissal behavior with dynamic cursor styling (josue.higueroscalderon@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.20.0
+
+### Patches
+
+- `Card`: background image hidden behind the default background color issue fixed (josue.higueroscalderon@telus.com)
+- `IconButton`: Fix wrong specific padding calculation  (david.melara1@telus.com)
+
 ## 3.27.0
 
-Thu, 29 Jan 2026 16:42:47 GMT
+Thu, 29 Jan 2026 15:50:16 GMT
 
 ### Minor changes
 
-- `Checkbox`: Add padding token (david.melara1@telus.com)
-- `Card`: Add inputPosition prop to InteractiveCard (david.melara1@telus.com)
-- `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
 - `Card`: Add full-bleed content support to Card component allowing content to extend to card edges (josue.higueroscalderon@telus.com)
+- `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
+- `Card`: Add inputPosition prop to InteractiveCard (david.melara1@telus.com)
+- `Checkbox`: Add padding token (david.melara1@telus.com)
 - Bump @telus-uds/system-theme-tokens to v4.19.0
 
 ### Patches

package/lib/cjs/Card/CardBase.js

@@ -236,7 +236,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cardState,
     ...rest
   } = _ref5;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
+  const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens;
+  const tokensToUse = backgroundImage && backgroundImage.src ? {
+    ...resolvedTokens,
+    gradient: undefined,
+    backgroundGradient: undefined
+  } : resolvedTokens;
+  const cardStyle = selectStyles(tokensToUse);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -309,7 +315,10 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       }
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: containerStyle,
+      style: {
+        ...containerStyle,
+        borderRadius
+      },
       dataSet: dataSet,
       ref: ref,
       ...props,
@@ -387,7 +396,7 @@ const staticStyles = _StyleSheet.default.create({
   contentOverlay: {
     position: 'relative',
     width: '100%',
-    height: '100%',
+    minHeight: '100%',
     zIndex: 2
   },
   containContainer: {

package/lib/cjs/ExpandCollapse/Control.js

@@ -64,7 +64,11 @@ function selectIconContainerStyles(_ref2) {
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
     [paddingSide]: iconGap,
-    paddingTop: iconPaddingTop
+    ...(iconPaddingTop && {
+      transform: [{
+        translateY: iconPaddingTop
+      }]
+    })
   };
 }
 function selectTextContainerStyles(_ref3) {

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -13,13 +13,22 @@ var _utils = require("../utils");
 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, _utils.contentfulProps]);
-function selectBorderStyles(tokens) {
+const selectWrapperStyles = _ref => {
+  let {
+    borderWidth,
+    borderTopWidth,
+    borderStyle,
+    borderColor
+  } = _ref;
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderStyle,
+    borderColor,
+    borderTopWidth,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
+    borderBottomColor: borderColor
   };
-}
+};
 
 /**
  * Flexible base component for lists where some or all items are collapsible headers.
@@ -28,7 +37,7 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -39,7 +48,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const instanceId = (0, _utils.useUniqueId)('ExpandCollapse');
   const {
     currentValues: openIds,
@@ -60,7 +69,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...selectProps(rest),
     dataSet: dataSet,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectBorderStyles(themeTokens),
+      style: selectWrapperStyles(themeTokens),
       children: typeof children === 'function' ? children({
         openIds,
         onToggle,

package/lib/cjs/ExpandCollapse/Panel.js

@@ -110,6 +110,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     controlRef,
     content,
     copy = 'en',
+    disableMobileScrollBuffer = false,
     ...rest
   } = _ref5;
   const [containerHeight, setContainerHeight] = _react.default.useState(null);
@@ -131,7 +132,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
 
   // on mobile devices we require a scroll buffer equal to the font size
   // to avoid triggering scrolling unnecessarily
-  const mobileScrollBuffer = _Platform.default.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize;
+  const mobileScrollBuffer = _Platform.default.OS === 'web' || disableMobileScrollBuffer ? 0 : selectTextStyles(themeTokens)?.fontSize;
   const handleControlPress = event => {
     onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
@@ -278,6 +279,10 @@ ExpandCollapsePanel.propTypes = {
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
-  content: _propTypes.default.bool
+  content: _propTypes.default.bool,
+  /**
+   * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
+   */
+  disableMobileScrollBuffer: _propTypes.default.bool
 };
 var _default = exports.default = ExpandCollapsePanel;

package/lib/cjs/IconButton/IconButton.js

@@ -85,6 +85,11 @@ const selectInnerStyle = (_ref2, password) => {
     width,
     height
   } = _ref2;
+  const basePadding = calculatePadding(padding, borderWidth);
+  const calculateSpecificPadding = (specificPadding, specificBorderWidth) => {
+    const calculated = calculatePadding(specificPadding ?? padding, specificBorderWidth ?? borderWidth);
+    return calculated !== basePadding && calculated !== undefined ? calculated : undefined;
+  };
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
@@ -98,11 +103,11 @@ const selectInnerStyle = (_ref2, password) => {
     borderRightWidth,
     borderBottomWidth,
     borderLeftWidth,
-    padding: calculatePadding(padding, borderWidth),
-    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-    paddingRight: calculatePadding(paddingRight, borderRightWidth),
-    paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    padding: basePadding,
+    paddingLeft: calculateSpecificPadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculateSpecificPadding(paddingRight, borderRightWidth),
+    paddingTop: calculateSpecificPadding(paddingTop, borderTopWidth),
+    paddingBottom: calculateSpecificPadding(paddingBottom, borderBottomWidth),
     ..._Platform.default.select({
       web: {
         pointerEvents: 'none',

package/lib/cjs/Modal/Modal.js

@@ -71,11 +71,15 @@ const selectModalStyles = _ref2 => {
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
-    backdropOpacity
+    backdropOpacity,
+    backdropCursor
   } = _ref3;
   return {
     backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    ...(_Platform.default.OS === 'web' && backdropCursor ? {
+      cursor: backdropCursor
+    } : {})
   };
 };
 const selectCloseButtonContainerStyles = _ref4 => {
@@ -128,12 +132,15 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cancelButtonText,
     cancelButtonType,
     footer,
+    backgroundDismissible = true,
     ...rest
   } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
+  const isBackdropClickable = onClose && backgroundDismissible;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
-    maxWidth
+    maxWidth,
+    backdropCursor: isBackdropClickable ? 'pointer' : 'default'
   });
   const modalRef = (0, _useScrollBlocking.default)(isOpen);
   const modalBodyRef = _react.default.useRef(ref);
@@ -239,7 +246,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
-        onPress: handleClose,
+        onPress: isBackdropClickable && handleClose,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -336,7 +343,15 @@ Modal.propTypes = {
   /**
    * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
    */
-  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  /**
+   * Controls whether the modal can be dismissed by clicking on the backdrop.
+   * When set to `false`, clicking the backdrop will not close the modal.
+   * The backdrop cursor automatically changes to 'default' to indicate it's not clickable.
+   * Note: Backdrop dismissal requires `onClose` to be defined.
+   * @default true
+   */
+  backgroundDismissible: _propTypes.default.bool
 };
 var _default = exports.default = Modal;
 const staticStyles = _StyleSheet.default.create({
@@ -346,12 +361,7 @@ const staticStyles = _StyleSheet.default.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: -1,
-    ..._Platform.default.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
+    zIndex: -1
   },
   positioningContainer: {
     flexBasis: '100%',

package/lib/cjs/Progress/Progress.js

@@ -10,6 +10,7 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
+var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
 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]);
@@ -54,6 +55,12 @@ const selectProgressStyles = _ref => {
  *
  * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
  *   progress bar container narrower.
+ * - Use the `layers` variant to control how multiple progress bars are positioned:
+ *   - `false` (default): bars are positioned vertically one below the other.
+ *   - `true`: bars overlay on top of each other (layered/stacked on z-axis).
+ *   Note: The `layers` prop is deprecated. After August 2026, `layers: true` will become the permanent
+ *   default behavior and the `layers` prop will be removed. To maintain vertical layout after removal,
+ *   use separate individual Progress components.
  *
  * ## Usability and A11y guidelines
  *
@@ -70,11 +77,18 @@ const Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    ref: ref,
-    style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
-    ...selectProps(rest),
-    children: children
+  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
+  const layers = variant?.layers ?? false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.default.Provider, {
+    value: {
+      layers
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
+      ...selectProps(rest),
+      children: children
+    })
   });
 });
 Progress.displayName = 'Progress';

package/lib/cjs/Progress/ProgressBar.js

@@ -13,17 +13,24 @@ var _ProgressBarBackground = _interopRequireDefault(require("./ProgressBarBackgr
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _constants = require("./constants");
+var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
 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]);
-const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
+const selectBarStyles = _ref => {
   let {
+    themeTokens,
+    calculatedPercentage,
+    barPosition,
+    layers
+  } = _ref;
+  const {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
     shadow
-  } = _ref;
+  } = themeTokens;
   return {
     backgroundColor,
     borderRadius,
@@ -31,7 +38,10 @@ const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
     outlineColor,
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     width: `${calculatedPercentage}%`,
-    left: `${barPosition}%`
+    left: `${barPosition}%`,
+    ...(layers ? {
+      position: 'absolute'
+    } : {})
   };
 };
 
@@ -82,6 +92,9 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     },
     ...rest
   } = _ref2;
+  const {
+    layers
+  } = _react.default.useContext(_ProgressContext.default);
   const {
     items,
     current
@@ -114,7 +127,12 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   return percentage > _constants.MIN_PERCENT_VALUE || items ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
+    style: [staticStyles.bar, selectBarStyles({
+      themeTokens,
+      calculatedPercentage,
+      barPosition,
+      layers
+    })],
     ...selectedProps,
     children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant

package/lib/cjs/Progress/ProgressContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const ProgressContext = /*#__PURE__*/(0, _react.createContext)({
+  layers: false
+});
+var _default = exports.default = ProgressContext;

package/lib/cjs/SideNav/Item.js

@@ -29,9 +29,9 @@ function selectItemStyles(_ref) {
   } = _ref;
   return {
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderBottomColor: borderColor,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,

package/lib/cjs/SideNav/ItemsGroup.js

@@ -12,6 +12,19 @@ var _utils = require("../utils");
 var _ThemeProvider = require("../ThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectPanelTokens = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    backgroundColor
+  } = _ref;
+  return {
+    contentPanelBackgroundColor: backgroundColor,
+    borderBottomWidth: borderWidth,
+    borderColor
+  };
+};
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -21,7 +34,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -32,7 +46,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     tokens,
     itemTokens,
     onToggle
-  } = _ref;
+  } = _ref2;
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
   const getAppearance = appearance => ({
@@ -45,28 +59,27 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     type: 'parent'
   });
   const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
-  const getPanelTokens = appearance => {
-    const {
-      panelBorderColor,
-      ...itemsGroupTokens
-    } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = {
-      ...itemsGroupTokens,
-      borderWidth: 0,
-      marginBottom: 0
-    };
-    return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
-  };
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
-  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', {
-    ...getItemTokens(getItemAppearance(appearance)),
-    // main style from SideNavItem
-    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', {
+    ...staticTokens.panel,
+    ...getGroupTokens(getAppearance(appearance)),
+    ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
+  });
+  const getControlTokens = appearance => ({
+    ...(0, _utils.selectTokens)('ExpandCollapseControl', {
+      ...getItemTokens(getItemAppearance(appearance)),
+      // main style from SideNavItem
+      ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
+    }),
+    ...staticTokens.control
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
-      tokens: currentItemTokens,
+      tokens: {
+        ...currentItemTokens,
+        ...staticTokens.content
+      },
       children: label
     });
   };
@@ -82,9 +95,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       active: isActive
     } // ExpandCollapse.Panel handles expanded state
     ,
+    disableMobileScrollBuffer: true,
     children: children
   });
 });
+const staticTokens = {
+  panel: {
+    borderWidth: 0,
+    marginBottom: 0
+  },
+  control: {
+    borderWidth: 0,
+    textLine: null
+  },
+  content: {
+    accentWidth: 0
+  }
+};
 ItemsGroup.displayName = 'ItemsGroup';
 ItemsGroup.propTypes = {
   /**

package/lib/cjs/SideNav/SideNav.js

@@ -15,13 +15,28 @@ 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; }
-function selectBorderStyles(tokens) {
+const selectContainerTokens = _ref => {
+  let {
+    borderWidth,
+    borderStyle,
+    borderColor
+  } = _ref;
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderTopWidth: borderWidth,
+    borderStyle,
+    borderColor
   };
-}
+};
+const selectItemTokens = function () {
+  let tokens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let isLastItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return {
+    ...tokens,
+    ...(isLastItem ? {
+      borderWidth: 0
+    } : {})
+  };
+};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -29,7 +44,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant = {},
@@ -38,7 +53,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemTokens,
     groupTokens,
     ...rest
-  } = _ref;
+  } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = _react.default.useState({
     groupId: undefined,
@@ -56,14 +71,15 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens),
+    tokens: selectContainerTokens(themeTokens),
     ...selectProps(rest),
-    children: _ref2 => {
+    children: _ref3 => {
       let {
         openIds,
         onToggle
-      } = _ref2;
-      const renderItem = (item, index, groupId) => {
+      } = _ref3;
+      const renderItem = function (item, index, groupId) {
+        let isLastItem = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         const {
           itemId = `item-${index}`,
           onPress
@@ -81,7 +97,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             ...variant,
             type: 'child'
           } : variant,
-          tokens: itemTokens,
+          tokens: selectItemTokens(itemTokens, isLastItem),
           isActive: isItemActive(itemId, groupId),
           onPress: handlePress
         });
@@ -105,7 +121,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             openGroups: openIds,
             isActive: isGroupActive,
             onToggle: handleToggle
-          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId, itemIndex === child.props.children.length - 1)));
         }
         return null;
       });

package/lib/esm/Card/CardBase.js

@@ -228,7 +228,13 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cardState,
     ...rest
   } = _ref5;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
+  const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens;
+  const tokensToUse = backgroundImage && backgroundImage.src ? {
+    ...resolvedTokens,
+    gradient: undefined,
+    backgroundGradient: undefined
+  } : resolvedTokens;
+  const cardStyle = selectStyles(tokensToUse);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -301,7 +307,10 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       }
     });
     return /*#__PURE__*/_jsx(View, {
-      style: containerStyle,
+      style: {
+        ...containerStyle,
+        borderRadius
+      },
       dataSet: dataSet,
       ref: ref,
       ...props,
@@ -379,7 +388,7 @@ const staticStyles = StyleSheet.create({
   contentOverlay: {
     position: 'relative',
     width: '100%',
-    height: '100%',
+    minHeight: '100%',
     zIndex: 2
   },
   containContainer: {

package/lib/esm/ExpandCollapse/Control.js

@@ -57,7 +57,11 @@ function selectIconContainerStyles(_ref2) {
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
     [paddingSide]: iconGap,
-    paddingTop: iconPaddingTop
+    ...(iconPaddingTop && {
+      transform: [{
+        translateY: iconPaddingTop
+      }]
+    })
   };
 }
 function selectTextContainerStyles(_ref3) {