@telus-uds/components-base 1.54.0 → 1.56.0

package/lib/IconButton/IconButton.js

@@ -36,10 +36,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectOuterStyle = _ref => {
   let {
     backgroundColor,
-    borderRadius,
     outerBorderWidth,
     outerBorderColor,
     outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     shadow
   } = _ref;
   return [{
@@ -47,6 +51,10 @@ const selectOuterStyle = _ref => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(0, _ThemeProvider.applyOuterBorder)({
       borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
       outerBorderWidth,
       outerBorderColor,
       outerBorderGap
@@ -60,20 +68,46 @@ const selectOuterStyle = _ref => {
   }, staticStyles.outer];
 };
 
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
+
+
 const selectInnerStyle = _ref2 => {
   let {
     borderColor,
-    borderWidth = 0,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     borderRadius,
-    padding = 0
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
     borderRadius,
     borderWidth,
-    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
-
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: calculatePadding(padding, borderWidth),
+    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculatePadding(paddingRight, borderRightWidth),
+    paddingTop: calculatePadding(paddingTop, borderTopWidth),
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
   };
 };
 /**
@@ -132,7 +166,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          icon: IconComponent,
+          icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
           variant: variant
@@ -149,7 +183,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
   /**
    * Defines the icon to be rendered
    */
-  icon: _propTypes.default.elementType.isRequired,
+  icon: _propTypes.default.elementType,
 
   /**
    * URL to navigate to when the `Iconbutton` is pressed

package/lib/InputLabel/InputLabel.js

@@ -100,7 +100,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: hint
       }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight
+          height: themeTokens.fontSize * themeTokens.lineHeight,
+          color: themeTokens.color
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
           content: tooltip,

package/lib/Link/LinkBase.js

@@ -53,9 +53,9 @@ const selectOuterBorderStyles = _ref => {
       ...(0, _ThemeProvider.applyOuterBorder)({
         outerBorderColor,
         outerBorderWidth,
-        outerBorderGap,
-        borderRadius
-      })
+        outerBorderGap
+      }),
+      borderRadius
     } : {}
   );
 };

package/lib/Select/Select.js

@@ -143,7 +143,8 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + 4,
+    marginRight: -4,
     paddingBottom
   };
 };
@@ -167,7 +168,7 @@ const selectValidationIconContainerStyles = _ref6 => {
     paddingBottom
   } = _ref6;
   return {
-    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
     ...(_Platform.default.OS === 'android' ? {
       paddingBottom: paddingBottom + _constants.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
     } : {

package/lib/ThemeProvider/utils/styles.js

@@ -189,6 +189,14 @@ function verticalAlignRow(verticalAlign) {
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
 }
+
+const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
+  if (borderRadius) {
+    return borderRadius + outerBorderGap + outerBorderWidth;
+  }
+
+  return null;
+};
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
@@ -200,12 +208,20 @@ const applyOuterBorder = _ref4 => {
     outerBorderColor,
     outerBorderWidth = 0,
     outerBorderGap = 0,
-    borderRadius = 0
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   } = _ref4;
   return {
     margin: 0 - outerBorderWidth - outerBorderGap,
     padding: outerBorderGap,
-    borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+    borderRadius: calculateBorderRadius(borderRadius, outerBorderGap, outerBorderWidth),
+    borderTopLeftRadius: calculateBorderRadius(borderTopLeftRadius, outerBorderGap, outerBorderWidth),
+    borderTopRightRadius: calculateBorderRadius(borderTopRightRadius, outerBorderGap, outerBorderWidth),
+    borderBottomLeftRadius: calculateBorderRadius(borderBottomLeftRadius, outerBorderGap, outerBorderWidth),
+    borderBottomRightRadius: calculateBorderRadius(borderBottomRightRadius, outerBorderGap, outerBorderWidth),
     borderWidth: outerBorderWidth,
     borderColor: outerBorderColor
   };

package/lib/TooltipButton/TooltipButton.js

@@ -26,11 +26,13 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
-    width
+    width,
+    backgroundColor
   } = _ref;
   return {
     borderRadius,
-    width
+    width,
+    backgroundColor
   };
 };
 

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -13,7 +13,10 @@ const CarouselStepTracker = _ref => {
     activeIndex,
     totalItems,
     getCopyWithPlaceholders,
-    themeTokens
+    themeTokens: {
+      stepTrackerCurrentBackgroundColor,
+      ...themeTokens
+    }
   } = useCarousel();
   const stackViewTokens = {
     justifyContent: 'center'
@@ -21,7 +24,8 @@ const CarouselStepTracker = _ref => {
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -21,19 +21,20 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useCarousel();
   const nextFocusRef = useRef();
   const firstTabRef = useRef();
-  const [isInverse, setIsInverse] = useState(false); // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-
-  const dividerVariant = {
-    decorative: true
-  };
+  const [isInverse, setIsInverse] = useState(false);
   const lastTabSelected = activeIndex === items.length - 1; // Get current select tab style
 
   useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
-  }, [items, activeIndex]);
+  }, [items, activeIndex]); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true,
+    inverse: isInverse
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: selectTabPanelStyle(),
     children: [/*#__PURE__*/_jsx(StackView, {

package/lib-module/Carousel/CarouselThumbnail.js

@@ -3,28 +3,48 @@ import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Image from "react-native-web/dist/exports/Image";
 import { useCarousel } from './CarouselContext';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const selectPressableTokens = _ref => {
+  let {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  } = _ref;
+  return {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  };
+};
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
 
-const CarouselThumbnail = _ref => {
+const CarouselThumbnail = _ref2 => {
   let {
     accessibilityLabel,
     alt,
     index,
     src
-  } = _ref;
+  } = _ref2;
   const {
     activeIndex,
     itemLabel,
     totalItems,
     getCopyWithPlaceholders,
-    goTo,
-    themeTokens
+    goTo
   } = useCarousel();
+  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail');
+  const viewport = useViewport();
   const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
@@ -35,37 +55,41 @@ const CarouselThumbnail = _ref => {
   };
 
   const {
-    thumbnailBorderColor,
-    thumbnailBorderRadius,
-    thumbnailBorderWidth,
-    thumbnailMargin,
-    thumbnailPadding,
-    thumbnailSelectedBorderColor,
-    thumbnailSelectedBorderWidth,
-    thumbnailSize
-  } = themeTokens;
+    borderWidth,
+    padding,
+    selectedBorderColor,
+    selectedBorderWidth,
+    size
+  } = getThumbnailTokens({
+    viewport
+  });
   const styles = {
-    pressable: {
-      borderColor: thumbnailBorderColor,
-      borderRadius: thumbnailBorderRadius,
-      borderWidth: thumbnailBorderWidth,
-      margin: thumbnailMargin,
-      padding: thumbnailPadding
-    },
     image: {
-      height: thumbnailSize,
-      width: thumbnailSize
+      height: size,
+      width: size
     },
     selected: {
-      borderColor: thumbnailSelectedBorderColor,
-      borderWidth: thumbnailSelectedBorderWidth,
-      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth + borderWidth
     }
   };
   return /*#__PURE__*/_jsx(Pressable, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: [styles.pressable, index === activeIndex && styles.selected],
+    style: _ref3 => {
+      let {
+        hovered,
+        pressed,
+        focused
+      } = _ref3;
+      const pressableStyles = selectPressableTokens(getThumbnailTokens({
+        hover: hovered,
+        pressed,
+        focus: focused
+      }));
+      return [pressableStyles, index === activeIndex && styles.selected];
+    },
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,
       accessibilityLabel: accessibilityLabel ?? alt,

package/lib-module/Carousel/CarouselThumbnailNavigation.js

@@ -4,14 +4,21 @@ import View from "react-native-web/dist/exports/View";
 import { useCarousel } from './CarouselContext';
 import CarouselThumbnail from './CarouselThumbnail';
 import { StackWrap } from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;
+  const viewport = useViewport();
   const {
-    totalItems,
-    themeTokens
+    alignItems
+  } = useThemeTokens('CarouselThumbnail', {}, {
+    viewport
+  });
+  const {
+    totalItems
   } = useCarousel();
 
   if (thumbnails.length !== totalItems) {
@@ -19,15 +26,15 @@ const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
   }
 
   const {
-    thumbnailContainerPaddingTop,
-    thumbnailMargin
-  } = themeTokens;
+    containerPaddingTop: thumbnailContainerPaddingTop,
+    margin: thumbnailMargin
+  } = useThemeTokens('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   };
   const containerStyles = {
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems,
     paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
   };
   return /*#__PURE__*/_jsx(View, {

package/lib-module/IconButton/IconButton.js

@@ -13,10 +13,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectOuterStyle = _ref => {
   let {
     backgroundColor,
-    borderRadius,
     outerBorderWidth,
     outerBorderColor,
     outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     shadow
   } = _ref;
   return [{
@@ -24,6 +28,10 @@ const selectOuterStyle = _ref => {
     ...applyShadowToken(shadow),
     ...applyOuterBorder({
       borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
       outerBorderWidth,
       outerBorderColor,
       outerBorderGap
@@ -37,20 +45,46 @@ const selectOuterStyle = _ref => {
   }, staticStyles.outer];
 };
 
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
+
+
 const selectInnerStyle = _ref2 => {
   let {
     borderColor,
-    borderWidth = 0,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     borderRadius,
-    padding = 0
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
     borderRadius,
     borderWidth,
-    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
-
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: calculatePadding(padding, borderWidth),
+    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculatePadding(paddingRight, borderRightWidth),
+    paddingTop: calculatePadding(paddingTop, borderTopWidth),
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
   };
 };
 /**
@@ -107,7 +141,7 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
       return /*#__PURE__*/_jsx(View, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent,
+          icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: selectTokens('Icon', themeTokens, 'icon'),
           variant: variant
@@ -124,7 +158,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
   /**
    * Defines the icon to be rendered
    */
-  icon: PropTypes.elementType.isRequired,
+  icon: PropTypes.elementType,
 
   /**
    * URL to navigate to when the `Iconbutton` is pressed

package/lib-module/InputLabel/InputLabel.js

@@ -79,7 +79,8 @@ const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: hint
       }), hasTooltip && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight
+          height: themeTokens.fontSize * themeTokens.lineHeight,
+          color: themeTokens.color
         }],
         children: /*#__PURE__*/_jsx(Tooltip, {
           content: tooltip,

package/lib-module/Link/LinkBase.js

@@ -28,9 +28,9 @@ const selectOuterBorderStyles = _ref => {
       ...applyOuterBorder({
         outerBorderColor,
         outerBorderWidth,
-        outerBorderGap,
-        borderRadius
-      })
+        outerBorderGap
+      }),
+      borderRadius
     } : {}
   );
 };

package/lib-module/Select/Select.js

@@ -118,7 +118,8 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + 4,
+    marginRight: -4,
     paddingBottom
   };
 };
@@ -142,7 +143,7 @@ const selectValidationIconContainerStyles = _ref6 => {
     paddingBottom
   } = _ref6;
   return {
-    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
     ...(Platform.OS === 'android' ? {
       paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
     } : {

package/lib-module/ThemeProvider/utils/styles.js

@@ -171,22 +171,39 @@ export function verticalAlignRow(verticalAlign) {
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
 }
+
+const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
+  if (borderRadius) {
+    return borderRadius + outerBorderGap + outerBorderWidth;
+  }
+
+  return null;
+};
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
  */
 
+
 export const applyOuterBorder = _ref4 => {
   let {
     outerBorderColor,
     outerBorderWidth = 0,
     outerBorderGap = 0,
-    borderRadius = 0
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   } = _ref4;
   return {
     margin: 0 - outerBorderWidth - outerBorderGap,
     padding: outerBorderGap,
-    borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+    borderRadius: calculateBorderRadius(borderRadius, outerBorderGap, outerBorderWidth),
+    borderTopLeftRadius: calculateBorderRadius(borderTopLeftRadius, outerBorderGap, outerBorderWidth),
+    borderTopRightRadius: calculateBorderRadius(borderTopRightRadius, outerBorderGap, outerBorderWidth),
+    borderBottomLeftRadius: calculateBorderRadius(borderBottomLeftRadius, outerBorderGap, outerBorderWidth),
+    borderBottomRightRadius: calculateBorderRadius(borderBottomRightRadius, outerBorderGap, outerBorderWidth),
     borderWidth: outerBorderWidth,
     borderColor: outerBorderColor
   };

package/lib-module/TooltipButton/TooltipButton.js

@@ -10,11 +10,13 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
-    width
+    width,
+    backgroundColor
   } = _ref;
   return {
     borderRadius,
-    width
+    width,
+    backgroundColor
   };
 };
 

package/package.json

@@ -10,8 +10,8 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.37.0",
+    "@telus-uds/system-constants": "^1.3.0",
+    "@telus-uds/system-theme-tokens": "^2.39.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.54.0"
+  "version": "1.56.0"
 }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -5,18 +5,26 @@ import StackView from '../../StackView'
 import { variantProp } from '../../utils'
 
 const CarouselStepTracker = ({ variant }) => {
-  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
+  } = useCarousel()
   const stackViewTokens = {
     justifyContent: 'center'
   }
+
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   }
+
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
   return (
     <StackView direction="row" tokens={stackViewTokens}>