@telus-uds/components-base 3.26.0 → 3.28.0

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

@@ -13,10 +13,15 @@ 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]);
+const LIST_ITEM_TYPE = 'ListItem';
+const LINKS_ITEM_TYPE = 'LinksItem';
 const isListItem = element => {
-  const elementName = element?.type?.displayName || element?.type?.name;
-  // Match our own ListItem, and also, custom list items
-  return Boolean(elementName.match(/Item/));
+  if (!element?.type) return false;
+  if (element.type.__UDS_COMPONENT_TYPE__ === LIST_ITEM_TYPE) {
+    return true;
+  }
+  const elementName = element.type.displayName || element.type.name || '';
+  return elementName === LIST_ITEM_TYPE || elementName.includes(LIST_ITEM_TYPE) || elementName.includes(LINKS_ITEM_TYPE);
 };
 
 /**
@@ -29,6 +34,7 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     showDivider,
     tokens,
     variant,
+    iconVerticalAlign,
     accessibilityRole = _Platform.default.select({
       web: 'list',
       default: undefined
@@ -38,13 +44,17 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const items = _react.default.Children.map(children, (child, index) => {
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
     if (isListItem(child)) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === _react.default.Children.count(children),
+      const childProps = {
         tokens,
         variant,
-        ...child.props
-      });
+        ...child.props,
+        showDivider,
+        isLastItem: index + 1 === _react.default.Children.count(children)
+      };
+      if (!child.props.iconVerticalAlign && iconVerticalAlign) {
+        childProps.iconVerticalAlign = iconVerticalAlign;
+      }
+      return /*#__PURE__*/_react.default.cloneElement(child, childProps);
     }
     return child;
   });
@@ -78,6 +88,11 @@ List.propTypes = {
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: _propTypes.default.bool
+  showDivider: _propTypes.default.bool,
+  /**
+   * The vertical alignment of the icon in ListItems.
+   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   */
+  iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom'])
 };
 var _default = exports.default = List;

package/lib/cjs/List/ListItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -18,6 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     variant,
     children,
     title,
+    iconVerticalAlign = 'top',
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
@@ -26,12 +28,27 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     ref: ref,
     ...listItemProps,
     title: title,
+    iconVerticalAlign: iconVerticalAlign,
     children: children
   });
 });
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
+  /** Theme tokens for styling */
+  tokens: (0, _utils.getTokensPropType)('List'),
+  /** Variant configuration for the component */
   variant: _utils.variantProp.propType,
-  ..._ListItemBase.default.propTypes
+  /** Content to be rendered within the list item */
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  /** Title of the list item */
+  title: _propTypes.default.node,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom']),
+  /** Icon to be displayed */
+  icon: _propTypes.default.elementType,
+  /** Color of the icon */
+  iconColor: _propTypes.default.string,
+  /** Size of the icon */
+  iconSize: _propTypes.default.number
 };
 var _default = exports.default = ListItem;

package/lib/cjs/List/ListItemBase.js

@@ -17,6 +17,12 @@ var _ThemeProvider = require("../ThemeProvider");
 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 VERTICAL_CENTERING_DIVISOR = 2;
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -38,10 +44,16 @@ const selectDividerStyles = _ref2 => {
     paddingBottom: interItemMarginWithDivider
   };
 };
+const selectAlignmentStyles = iconVerticalAlign => ({
+  alignItems: alignmentMap[iconVerticalAlign]
+});
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
+const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
+  return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR;
+};
 const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -52,6 +64,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children,
     title,
     isLastItem,
+    iconVerticalAlign = 'top',
     accessibilityRole = _Platform.default.select({
       web: 'listitem',
       default: undefined
@@ -65,7 +78,6 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     iconMarginTop,
     itemIconSize
   } = themeTokens;
-  let adjustedIconMarginTop = iconMarginTop;
   const {
     fontSize,
     lineHeight: lineHeightRatio
@@ -73,9 +85,8 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     size: 'h4',
     bold: true
   });
-  if (title) {
-    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
-  }
+  const adjustedIconMarginTop = title ? calculateIconMarginTop(itemIconSize, fontSize, lineHeightRatio) : iconMarginTop;
+
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -102,7 +113,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.container,
+      style: [staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
         tokens: {
           ...tokens,
@@ -112,7 +123,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconColor: iconColor,
         iconSize: iconSize
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        style: staticStyles.titleAndContentContainer,
+        style: [staticStyles.titleAndContentContainer],
         children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
             size: 'h4',
@@ -128,15 +139,21 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 ListItemBase.displayName = 'ListItem';
+ListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = _StyleSheet.default.create({
   container: {
+    flexDirection: 'row',
+    width: '100%'
+  },
+  innerContainer: {
     flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1,
-    flexGrow: 1
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1
   }
 });
 ListItemBase.propTypes = {
@@ -144,6 +161,8 @@ ListItemBase.propTypes = {
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom']),
   /**
    * Renders side item icon
    */

package/lib/cjs/List/ListItemMark.js

@@ -7,7 +7,6 @@ exports.tokenTypes = 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,49 +15,29 @@ const tokenTypes = exports.tokenTypes = {
   itemIconSize: _propTypes.default.number.isRequired,
   itemIconColor: _propTypes.default.string.isRequired,
   listGutter: _propTypes.default.number.isRequired,
-  iconMarginTop: _propTypes.default.number.isRequired
+  iconMarginTop: _propTypes.default.number.isRequired,
+  bulletIcon: _propTypes.default.elementType.isRequired
 };
-const selectItemIconTokens = _ref => {
+const selectContainerStyles = _ref => {
   let {
-    itemIconSize,
-    itemIconColor
+    listGutter
   } = _ref;
   return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-const selectSideItemContainerStyles = _ref2 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
+    marginInlineEnd: listGutter,
+    display: 'flex',
+    alignItems: 'flex-start'
   };
 };
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = _ref3 => {
+const selectBulletStyles = _ref2 => {
   let {
     itemIconSize
-  } = _ref3;
+  } = _ref2;
   return {
     width: itemIconSize,
-    height: itemIconSize
-  };
-};
-const selectBulletContainerStyles = _ref4 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerHeight,
-    itemBulletContainerAlign
-  } = _ref4;
-  return {
-    width: itemBulletContainerWidth,
-    height: itemBulletContainerHeight,
-    alignItems: itemBulletContainerAlign
+    height: itemIconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
   };
 };
 const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
@@ -70,31 +49,31 @@ const getIconColorVariants = iconVariants => iconVariants?.filter(variant => var
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
-  } = _ref5;
+  } = _ref3;
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
-
-  // TODO: Remove it when iconColor custom colors are deprecated.
+  const containerStyles = selectContainerStyles(themeTokens);
   const iconVariants = (0, _utils.useVariants)('Icon');
   const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens);
+    const {
+      itemIconSize,
+      itemIconColor
+    } = themeTokens;
+    const finalIconSize = iconSize ?? itemIconSize;
+    const finalIconColor = iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [sideItemContainerStyles, bulletContainerStyles],
+      style: containerStyles,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: icon,
         tokens: {
-          size: iconSize ?? iconTokens.size,
-          ...((iconColor && !iconColorVariants?.includes(iconColor) || !iconColor) && {
-            color: iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
-          })
+          size: finalIconSize,
+          color: finalIconColor
         },
         variant: {
           ...(iconColorVariants?.includes(iconColor) && {
@@ -104,23 +83,21 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       })
     });
   }
-  const bulletColor = themeTokens.itemBulletColor;
   const {
-    bulletIcon
+    itemIconSize,
+    itemIconColor
   } = themeTokens;
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  const bulletStyles = selectBulletStyles(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    style: containerStyles,
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      testID: "unordered-item-bullet",
+      style: bulletStyles,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: bulletIcon,
+        icon: themeTokens.bulletIcon,
         tokens: {
-          color: bulletColor,
-          size: themeTokens.itemIconSize
+          color: itemIconColor,
+          size: itemIconSize
         }
       })
     })
@@ -142,10 +119,4 @@ ListItemMark.propTypes = {
    */
   iconSize: _propTypes.default.number
 };
-const staticStyles = _StyleSheet.default.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
 var _default = exports.default = ListItemMark;

package/lib/cjs/List/PressableListItemBase.js

@@ -98,6 +98,7 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
   });
 });
 PressableListItemBase.displayName = 'PressableListItemBase';
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row',

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,