@telus-uds/components-base 3.17.1 → 3.19.0

package/CHANGELOG.md

@@ -1,16 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 12 Sep 2025 17:00:54 GMT and should not be manually modified.
+This log was last generated on Fri, 03 Oct 2025 20:34:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 3.17.1
+## 3.19.0
 
-Fri, 12 Sep 2025 17:00:54 GMT
+Fri, 03 Oct 2025 20:34:06 GMT
+
+### Minor changes
+
+- `Carousel`: add swipe functionality to MD viewport (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: add documentation for JSX usage in `subtitle` prop (oscar.palencia@telus.com)
+- `StepTracker`: add style bar variant (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.15.0
 
 ### Patches
 
-- `Card`: fix pressable-card text-decoration when href is present (guillermo.peitzner@telus.com)
+- `TabBar`: fix item token management (guillermo.peitzner@telus.com)
+- `Box`: fix background image contain position (guillermo.peitzner@telus.com)
+
+## 3.18.0
+
+Tue, 16 Sep 2025 21:19:36 GMT
+
+### Minor changes
+
+- `Modal`: add footer prop (guillermo.peitzner@telus.com)
 
 ## 3.13.0
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TELUS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/jest.config.cjs

@@ -29,12 +29,20 @@ module.exports = {
   ],
   cacheDirectory: '.cache/jest-cache-react-17',
   moduleNameMapper: {
-    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
+    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy',
+    '^@telus-uds/system-constants$': '<rootDir>/../system-constants/src',
+    '^@telus-uds/system-theme-tokens$': '<rootDir>/../system-theme-tokens/src'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
   ],
-  // Count everything in src when calculating coverage
+  // Count everything in src when calculating coverage,
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/packages/palette-allium/build/'
+    // '/@telus-uds/palette-allium',
+    // '/@telus-uds/palette-allium/build/rn/icons/, /@telus-uds/palette-allium/build/web/icons/'
+  ],
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/cjs/Box/Box.js

@@ -14,9 +14,11 @@ var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _backgroundImageStylesMap = _interopRequireWildcard(require("./backgroundImageStylesMap"));
 var _ViewportProvider = require("../ViewportProvider");
 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.viewProps]);
 
@@ -75,39 +77,51 @@ const setBackgroundImage = _ref2 => {
     backgroundImageResizeMode,
     backgroundImagePosition,
     backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
+    content,
+    testID
   } = _ref2;
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined;
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (_Platform.default.OS === 'web') {
+      const backgroundPosition = _backgroundImageStylesMap.backgroundPositions[positionKey] || 'center center';
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        "aria-label": alt,
+        testID: backgroundImageTestID,
+        children: content
+      });
+    }
+    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
+      style: staticStyles.containContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true,
+        testID: backgroundImageTestID
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
+    source: src,
     resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    testID: backgroundImageTestID,
     children: content
   });
 };
@@ -264,31 +278,61 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  _react.default.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      _Image.default.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
+  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  if (backgroundImage && src) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = boxStyles;
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      testID
+    });
+    const dataSetValue = boxMediaIds ? {
+      media: boxMediaIds,
+      ...dataSet
+    } : dataSet;
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {};
+      scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        ...scrollProps,
+        ...props,
+        testID: testID,
+        dataSet: dataSetValue,
+        ref: ref,
+        children: content
       });
     }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ...props,
+      style: containerStyle,
+      testID: testID,
+      dataSet: dataSetValue,
+      ref: ref,
+      children: content
+    });
+  }
   const dataSetValue = boxMediaIds ? {
     media: boxMediaIds,
     ...dataSet
@@ -401,10 +445,12 @@ Box.propTypes = {
   */
   customGradient: _propTypes.default.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: _propTypes.default.shape({
-    src: _propTypes.default.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
@@ -413,18 +459,24 @@ Box.propTypes = {
 };
 var _default = exports.default = Box;
 const staticStyles = _StyleSheet.default.create({
-  backgroundImageContainer: {
-    flex: 1
+  imageBackground: {
+    width: '100%',
+    height: '100%'
   },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

package/lib/cjs/Box/backgroundImageStylesMap.js

@@ -3,15 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.default = exports.backgroundPositions = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const webStyles = {
   'top-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'top-center': {
-    left: 0,
-    right: 0,
-    marginHorizontal: 'auto'
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
   },
   'top-end': {
     top: 0,
@@ -22,60 +27,160 @@ var _default = exports.default = {
     right: 0
   },
   'left-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'left-center': {
-    top: 0,
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
     bottom: 0,
-    marginVertical: 'auto'
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
   },
-  'none-start': {
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
     top: 0,
     bottom: 0,
-    marginVertical: 'auto'
+    left: 0,
+    height: '100%'
   },
-  'none-center': {
+  'right-stretch': {
     top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
     bottom: 0,
     left: 0,
     right: 0,
-    margin: 'auto'
+    width: '100%'
+  }
+};
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
   },
-  'right-center': {
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
   },
-  'none-end': {
+  'right-start': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
   },
   'bottom-start': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'left-end': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'bottom-center': {
-    left: 0,
-    right: 0,
     bottom: 0,
-    marginHorizontal: 'auto'
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
   },
   'bottom-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'right-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'top-stretch': {
+    top: 0,
     left: 0,
     right: 0,
     width: '100%'
@@ -83,6 +188,7 @@ var _default = exports.default = {
   'left-stretch': {
     top: 0,
     bottom: 0,
+    left: 0,
     height: '100%'
   },
   'right-stretch': {
@@ -92,9 +198,11 @@ var _default = exports.default = {
     height: '100%'
   },
   'bottom-stretch': {
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     width: '100%'
   }
-};
+};
+const backgroundPositions = exports.backgroundPositions = _Platform.default.OS === 'web' ? webBackgroundPositions : {};
+var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/Carousel/Carousel.js

@@ -724,7 +724,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return false;
     }
     if (_Platform.default.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && (0, _utils.isTouchDevice)());
     }
     return true;
   }, [viewport, totalItems]);

package/lib/cjs/Modal/Modal.js

@@ -127,6 +127,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     confirmButtonVariant,
     cancelButtonText,
     cancelButtonType,
+    footer,
     ...rest
   } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -230,6 +231,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
+            footer: footer,
             children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
               style: selectScrollViewStyles,
               children: children
@@ -330,7 +332,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: _propTypes.default.func
+  onCancel: _propTypes.default.func,
+  /**
+   * 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)])
 };
 var _default = exports.default = Modal;
 const staticStyles = _StyleSheet.default.create({

package/lib/cjs/Modal/ModalContent.js

@@ -35,7 +35,8 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     cancelButtonText,
     cancelButtonType: CancelButton = _Link.TextButton,
     children,
-    onCancel
+    onCancel,
+    footer
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -149,7 +150,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         children: bodyText
       })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }), children, (hasConfirmButton || hasCancelButton) && !footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [selectFooterContainerStyles({
         ...themeTokens,
         hasBorder: isContentOverflowing
@@ -171,7 +172,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           children: cancelButtonText
         })
       }) : null]
-    })]
+    }), footer]
   });
 });
 ModalContent.displayName = 'ModalContent';
@@ -200,6 +201,7 @@ ModalContent.propTypes = {
   cancelButtonType: _propTypes.default.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
   children: _propTypes.default.node,
-  onCancel: _propTypes.default.func
+  onCancel: _propTypes.default.func,
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
 };
 var _default = exports.default = ModalContent;

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -489,9 +489,9 @@ MultiSelectFilter.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: _propTypes.default.string,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib/cjs/StepTracker/Step.js

@@ -157,6 +157,13 @@ const getStepTestID = (isCompleted, isCurrent) => {
   }
   return testID;
 };
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted ? themeTokens.barCompletedBackgroundColor : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+});
 
 /**
  * A single step of a StepTracker.
@@ -169,6 +176,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     stepCount = 0,
     stepIndex = 0,
     tokens,
+    isBarVariant,
     ...rest
   } = _ref8;
   const {
@@ -197,7 +205,10 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     accessibilityCurrent: status === stepIndex,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: [isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectBarContainerStyles(themeTokens, isCompleted, isCurrent),
+      testID: getStepTestID(isCompleted, isCurrent)
+    }), !isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: "row",
       space: 0,
       tokens: {