@telus-uds/components-base 3.27.0 → 3.28.1

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/Carousel/Carousel.js

@@ -84,7 +84,7 @@ const selectControlButtonPositionStyles = _ref => {
     isAutoPlayEnabled,
     viewport,
     maxWidth,
-    viewportWidth
+    containerWidth
   } = _ref;
   const styles = {};
   let positionOffset = 0;
@@ -100,18 +100,19 @@ const selectControlButtonPositionStyles = _ref => {
     }
   }
   if (enablePeeking) {
-    if (positionProperty === POSITION_PROPERTIES.RIGHT) {
-      const rightMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += rightMargin;
-    } else if (positionProperty === POSITION_PROPERTIES.LEFT) {
-      const leftMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += leftMargin;
-    }
+    const {
+      peekingMiddleSpace,
+      peekingGap
+    } = getPeekingProps(viewport);
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth);
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace;
+    const buttonCenter = slideRightEdge + peekingGap / 2;
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2;
   }
   styles[positionProperty] = positionOffset;
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, viewportWidth) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerWidth) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -135,7 +136,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   };
 };
@@ -272,7 +273,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
       peekingGap,
       peekingMiddleSpace
     } = getPeekingProps(viewport);
-    const baseWidth = maxWidth || containerWidth;
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth);
     finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap;
   }
   return finalWidth;
@@ -492,7 +493,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         peekingMiddleSpace
       } = getPeekingProps(viewport);
       let finalWidth;
-      const baseWidth = maxWidth || containerLayoutRef.current.width;
+      const baseWidth = Math.min(maxWidth || containerLayoutRef.current.width, containerLayoutRef.current.width);
       const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER;
       if (activeIndexRef.current === 0) {
         finalWidth = 0;
@@ -1014,7 +1015,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               isAutoPlayEnabled,
               viewport,
               maxWidth,
-              viewportWidth: currentViewportWidth
+              containerWidth: containerLayout.width
             })],
             children: /*#__PURE__*/_jsx(IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -1023,7 +1024,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -1083,7 +1084,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -24,10 +24,10 @@ const selectContainerStyle = _ref => {
   let marginLeft = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    const baseWidth = maxWidth || width;
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2;
+    const clampedMaxWidth = Math.min(maxWidth || width, width);
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2;
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2;
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2;
     } else {
       marginLeft = peekingGap;
     }

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) {

package/lib/esm/ExpandCollapse/ExpandCollapse.js

@@ -6,13 +6,22 @@ import { useThemeTokens } from '../ThemeProvider';
 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) {
+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.
@@ -21,7 +30,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.forwardRef((_ref, ref) => {
+const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -32,7 +41,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const instanceId = useUniqueId('ExpandCollapse');
   const {
     currentValues: openIds,
@@ -53,7 +62,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...selectProps(rest),
     dataSet: dataSet,
     children: /*#__PURE__*/_jsx(View, {
-      style: selectBorderStyles(themeTokens),
+      style: selectWrapperStyles(themeTokens),
       children: typeof children === 'function' ? children({
         openIds,
         onToggle,

package/lib/esm/ExpandCollapse/Panel.js

@@ -103,6 +103,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     controlRef,
     content,
     copy = 'en',
+    disableMobileScrollBuffer = false,
     ...rest
   } = _ref5;
   const [containerHeight, setContainerHeight] = React.useState(null);
@@ -124,7 +125,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
 
   // on mobile devices we require a scroll buffer equal to the font size
   // to avoid triggering scrolling unnecessarily
-  const mobileScrollBuffer = Platform.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize;
+  const mobileScrollBuffer = Platform.OS === 'web' || disableMobileScrollBuffer ? 0 : selectTextStyles(themeTokens)?.fontSize;
   const handleControlPress = event => {
     onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
@@ -271,6 +272,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.bool
+  content: PropTypes.bool,
+  /**
+   * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
+   */
+  disableMobileScrollBuffer: PropTypes.bool
 };
 export default ExpandCollapsePanel;

package/lib/esm/IconButton/IconButton.js

@@ -79,6 +79,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,
@@ -92,11 +97,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.select({
       web: {
         pointerEvents: 'none',

package/lib/esm/Modal/Modal.js

@@ -64,11 +64,15 @@ const selectModalStyles = _ref2 => {
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
-    backdropOpacity
+    backdropOpacity,
+    backdropCursor
   } = _ref3;
   return {
     backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    ...(Platform.OS === 'web' && backdropCursor ? {
+      cursor: backdropCursor
+    } : {})
   };
 };
 const selectCloseButtonContainerStyles = _ref4 => {
@@ -121,12 +125,15 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cancelButtonText,
     cancelButtonType,
     footer,
+    backgroundDismissible = true,
     ...rest
   } = _ref5;
   const viewport = useViewport();
+  const isBackdropClickable = onClose && backgroundDismissible;
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
-    maxWidth
+    maxWidth,
+    backdropCursor: isBackdropClickable ? 'pointer' : 'default'
   });
   const modalRef = useScrollBlocking(isOpen);
   const modalBodyRef = React.useRef(ref);
@@ -232,7 +239,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleClose,
+        onPress: isBackdropClickable && handleClose,
         children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -329,7 +336,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.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.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.bool
 };
 export default Modal;
 const staticStyles = StyleSheet.create({
@@ -339,12 +354,7 @@ const staticStyles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: -1,
-    ...Platform.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
+    zIndex: -1
   },
   positioningContainer: {
     flexBasis: '100%',

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -178,6 +178,11 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setMaxWidth(items.length >= rowLimit);
   }, [items.length, rowLimit]);
   React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  React.useEffect(() => {
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -190,7 +195,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers?.onPress(event);
-    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {

package/lib/esm/Progress/Progress.js

@@ -4,6 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import ProgressContext from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectProgressStyles = _ref => {
@@ -47,6 +48,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
  *
@@ -63,11 +70,18 @@ const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('Progress', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    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__*/_jsx(ProgressContext.Provider, {
+    value: {
+      layers
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
+      ...selectProps(rest),
+      children: children
+    })
   });
 });
 Progress.displayName = 'Progress';

package/lib/esm/Progress/ProgressBar.js

@@ -7,16 +7,23 @@ import ProgressBarBackground from './ProgressBarBackground';
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants';
+import ProgressContext from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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,
@@ -24,7 +31,10 @@ const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
     outlineColor,
     ...applyShadowToken(shadow),
     width: `${calculatedPercentage}%`,
-    left: `${barPosition}%`
+    left: `${barPosition}%`,
+    ...(layers ? {
+      position: 'absolute'
+    } : {})
   };
 };
 
@@ -75,6 +85,9 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     },
     ...rest
   } = _ref2;
+  const {
+    layers
+  } = React.useContext(ProgressContext);
   const {
     items,
     current
@@ -107,7 +120,12 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   return percentage > MIN_PERCENT_VALUE || items ? /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
+    style: [staticStyles.bar, selectBarStyles({
+      themeTokens,
+      calculatedPercentage,
+      barPosition,
+      layers
+    })],
     ...selectedProps,
     children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant

package/lib/esm/Progress/ProgressContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+const ProgressContext = /*#__PURE__*/createContext({
+  layers: false
+});
+export default ProgressContext;

package/lib/esm/SideNav/Item.js

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