@telus-uds/components-base 1.30.1 → 1.32.0

package/lib-module/Box/Box.js

@@ -26,7 +26,7 @@ const selectBoxStyles = tokens => {
       }
     } = tokens;
     styles = { ...styles,
-      backgroundImage: "linear-gradient(".concat(angle, "deg, ").concat(stopOne.color, ", 75% , ").concat(stopTwo.color, ")")
+      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
     };
   }
 

package/lib-module/Button/ButtonBase.js

@@ -76,7 +76,7 @@ const selectOuterWidthStyles = _ref3 => {
 
 
   if (Platform.OS === 'web') {
-    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
+    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -163,7 +163,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
       outline: 'none',
       // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)

package/lib-module/Button/ButtonGroup.js

@@ -68,7 +68,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("ButtonGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
   } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
 

package/lib-module/Carousel/Carousel.js

@@ -128,8 +128,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 
 const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _systemProps$accessib;
-
   let {
     tokens,
     variant,
@@ -403,7 +401,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
 
-    return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
+    return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
     items: tabs
@@ -426,7 +424,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // otherwise read the current position on focus
 
 
-  const containerAccessibilityLabel = ((_systemProps$accessib = systemProps.accessibilityLabel) !== null && _systemProps$accessib !== void 0 ? _systemProps$accessib : isFirstFocusContainer) ? "".concat(title ? "".concat(title, " ") : '').concat(getCopyWithPlaceholders('stepTrackerLabel')) : title;
+  const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
   const containerProps = {
     accessibilityLabel: containerAccessibilityLabel,
     // If used for focus, attach the ref and draw a focus box around the whole carousel

package/lib-module/Carousel/CarouselContext.js

@@ -36,7 +36,7 @@ function useCarousel() {
   const context = React.useContext(CarouselContext);
 
   if (context === undefined) {
-    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
 
   return context;

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

@@ -21,7 +21,7 @@ const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useCarousel(); // TODO: integrate skip link description if behaving as skip link.
   // Consider moving this content to aria-live area while only the skip link is focused.
 
-  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
   const accessibilityRole = Platform.select({
     web: 'link',
     // The focused item will ultimately be a skip link.

package/lib-module/Carousel/CarouselThumbnail.js

@@ -25,7 +25,7 @@ const CarouselThumbnail = _ref => {
     goTo,
     themeTokens
   } = useCarousel();
-  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+  const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
 
@@ -68,7 +68,7 @@ const CarouselThumbnail = _ref => {
     style: [styles.pressable, index === activeIndex && styles.selected],
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      accessibilityLabel: accessibilityLabel ?? alt,
       source: src,
       style: styles.image,
       title: thumbnailTitle

package/lib-module/Checkbox/Checkbox.js

@@ -187,7 +187,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
   };
 
   const uniqueId = useUniqueId('checkbox');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const {
     themeOptions
   } = useTheme();

package/lib-module/Checkbox/CheckboxGroup.js

@@ -97,7 +97,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("CheckboxGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const checkboxes = items.map((_ref2, index) => {
@@ -108,7 +108,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const checkboxId = id || "Checkbox[".concat(index, "]");
+    const checkboxId = id || `Checkbox[${index}]`;
 
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib-module/Divider/Divider.js

@@ -101,9 +101,9 @@ const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Spacer, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
+      testID: testID ? `${testID}-Spacer-before` : undefined
     }), divider, /*#__PURE__*/_jsx(Spacer, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
+      testID: testID ? `${testID}-Spacer-after` : undefined
     })]
   });
 });

package/lib-module/Fieldset/Fieldset.js

@@ -77,7 +77,7 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     space,
     preserveFragments: true
   });
-  const borderStyle = validation === 'error' && showErrorBorder && staticStyles.errorBorder || staticStyles.noBorder;
+  const borderStyle = validation === 'error' && showErrorBorder ? staticStyles.errorBorder : null;
   return /*#__PURE__*/_jsx(FieldsetContainer, {
     ref: ref,
     inactive: inactive,
@@ -95,10 +95,6 @@ const staticStyles = StyleSheet.create({
     borderColor: 'red',
     borderRadius: 10,
     padding: 8
-  },
-  noBorder: {
-    padding: 9,
-    border: 'unset'
   }
 });
 Fieldset.displayName = 'Fieldset';

package/lib-module/Fieldset/FieldsetContainer.js

@@ -16,7 +16,7 @@ const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
     borderStyle
   } = _ref;
   // If needs border for error design or reset the component style
-  const styleContainer = showBorderStyle ? borderStyle : cssReset;
+  const styleContainer = showBorderStyle && borderStyle ? borderStyle : cssReset;
   return /*#__PURE__*/_jsx("fieldset", {
     ref: ref,
     disabled: inactive,

package/lib-module/FlexGrid/Col/Col.js

@@ -44,7 +44,7 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return "".concat(num / 12 * 100, "%");
+    return `${num / 12 * 100}%`;
   };
 
   const calculateWidth = value => {

package/lib-module/Icon/Icon.js

@@ -30,7 +30,7 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     },
     dataSet: dataSet,
     children: iconContent

package/lib-module/List/ListItemContent.js

@@ -9,7 +9,8 @@ export const tokenTypes = {
   itemFontWeight: PropTypes.string.isRequired,
   itemFontSize: PropTypes.number.isRequired,
   itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired
+  itemFontName: PropTypes.string.isRequired,
+  itemFontColor: PropTypes.string
 };
 
 const selectItemTextStyles = (_ref, themeOptions) => {
@@ -17,9 +18,11 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontWeight,
     itemFontSize,
     itemLineHeight,
-    itemFontName
+    itemFontName,
+    itemFontColor
   } = _ref;
   return applyTextStyles({
+    fontColor: itemFontColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/lib-module/List/PressableListItemBase.js

@@ -15,6 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const selectPressableStyles = _ref => {
   let {
     backgroundColor,
+    itemFontColor,
     paddingLeft,
     paddingRight,
     paddingTop,
@@ -23,6 +24,7 @@ const selectPressableStyles = _ref => {
   } = _ref;
   return {
     backgroundColor,
+    itemFontColor,
     paddingLeft,
     paddingRight,
     paddingTop,

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -83,13 +83,13 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
     copy
   });
   const [isOpen, setIsOpen] = useState(false);
-  const [checkedIds, setCheckedIds] = useState(currentValues !== null && currentValues !== void 0 ? currentValues : []);
+  const [checkedIds, setCheckedIds] = useState(currentValues ?? []);
   const colSize = items.length > rowLimit ? 2 : 1;
   const isSelected = currentValues.length > 0;
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
   } // Pass an object of relevant component state as first argument for any passed-in press handlers
 
 

package/lib-module/Pagination/PageButton.js

@@ -33,8 +33,8 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     key: 'active-item'
   } : {};
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
-  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
   const {
     hrefAttrs,
     rest

package/lib-module/Pagination/Pagination.js

@@ -84,11 +84,9 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    var _itemProps$LinkRouter;
-
-    const buttonLabel = "".concat(itemIndex + 1);
+    const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
     const itemLinkRouterProps = { ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
@@ -125,7 +123,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, "page-".concat(index + 1)]).filter(_ref3 => {
+    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
       let [element] = _ref3;
       return element !== null;
     }).map(_ref4 => {

package/lib-module/Pagination/usePagination.js

@@ -14,7 +14,7 @@ function usePagination(_ref) {
   );
 
   const getItemProps = index => {
-    var _items$index$props, _items$index;
+    var _items$index;
 
     const {
       onPress,
@@ -22,7 +22,7 @@ function usePagination(_ref) {
       hrefAttrs,
       variant,
       tokens
-    } = (_items$index$props = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) !== null && _items$index$props !== void 0 ? _items$index$props : {};
+    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
     return {
       onPress,
       href,

package/lib-module/Progress/ProgressBar.js

@@ -21,7 +21,7 @@ const selectBarStyles = (_ref, percentage) => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    width: "".concat(percentage, "%")
+    width: `${percentage}%`
   };
 };
 /**
@@ -82,7 +82,7 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ...rest
   });
@@ -90,7 +90,7 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(ProgressBarBackground, {
+    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
     })
   }) : null;

package/lib-module/Progress/ProgressBarBackground.js

@@ -3,8 +3,8 @@ import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const inactiveBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E";
-const negativeBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E";
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
 const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant
@@ -22,7 +22,7 @@ const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ImageBackground, {
     ref: ref,
     source: {
-      uri: "data:image/svg+xml,".concat(source)
+      uri: `data:image/svg+xml,${source}`
     },
     style: staticStyles.imageBackground
   });

package/lib-module/Radio/Radio.js

@@ -46,7 +46,7 @@ const selectDescriptionStyles = _ref2 => {
     labelMarginLeft = 0
   } = _ref2;
   return {
-    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
     ...applyTextStyles({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -150,7 +150,7 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
   };
 
   const uniqueId = useUniqueId('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const selectedProps = selectProps({
     accessibilityRole: 'radio',
     accessibilityState: {

package/lib-module/Radio/RadioGroup.js

@@ -99,7 +99,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("RadioGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const radios = items.map((_ref2, index) => {
@@ -111,7 +111,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       description,
       ...itemRest
     } = _ref2;
-    const radioId = id || "Radio[".concat(index, "]");
+    const radioId = id || `Radio[${index}]`;
     const isChecked = currentValue === radioId;
 
     const handleChange = (newCheckedState, event) => {

package/lib-module/RadioCard/RadioCard.js

@@ -79,7 +79,7 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   const uniqueId = useUniqueId('RadioCard');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const getTokens = useThemeTokensCallback('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));

package/lib-module/RadioCard/RadioCardGroup.js

@@ -105,7 +105,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -135,7 +135,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           onChange: itemOnChange,
           ...itemRest
         } = _ref2;
-        const cardId = id || "RadioCard[".concat(index, "]");
+        const cardId = id || `RadioCard[${index}]`;
 
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib-module/Search/Search.js

@@ -125,7 +125,7 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
 
   const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
 
-  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
+  const placeholderText = placeholder ?? a11yLabelText;
   const {
     nativeID,
     testID,

package/lib-module/SideNav/SideNav.js

@@ -63,7 +63,7 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
 
       const renderItem = (item, index, groupId) => {
         const {
-          itemId = "item-".concat(index),
+          itemId = `item-${index}`,
           onPress
         } = item.props;
 
@@ -91,7 +91,7 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
 
         if (child.type === ItemsGroup) {
           const {
-            groupId = "group-".concat(index)
+            groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
 

package/lib-module/Skeleton/Skeleton.js

@@ -124,7 +124,7 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
     return /*#__PURE__*/_jsx(Component, {
       testID: "skeleton",
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
-    }, "skeleton-".concat(index + 1));
+    }, `skeleton-${index + 1}`);
   };
 
   return /*#__PURE__*/_jsx(StackView, {

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,6 +1,6 @@
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 export default {
-  animationDuration: "".concat(ANIMATION_DURATION, "ms"),
+  animationDuration: `${ANIMATION_DURATION}ms`,
   animationTimingFunction: 'ease-in-out',
   animationDelay: '0.5s',
   animationIterationCount: 'infinite',

package/lib-module/StackView/StackWrap.js

@@ -24,14 +24,12 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
-  var _props$gap;
-
   const [canUseCSSGap, setCanUseCSSGap] = useState(false);
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
 
-  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
+  const gap = props.gap ?? space;
   const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
   // preserving direct parent-child relationships between the container and each item, which
   // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).

package/lib-module/StackView/getStackedContent.js

@@ -48,7 +48,7 @@ const getStackedContent = (children, _ref) => {
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
   const validChildren = Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = "Stack-Box-".concat(index);
+    const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
@@ -58,7 +58,7 @@ const getStackedContent = (children, _ref) => {
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
       key: testID,

package/lib-module/Tabs/Tabs.js

@@ -37,8 +37,6 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
 
 
 const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _restProps$accessibil;
-
   let {
     tokens,
     itemTokens,
@@ -76,7 +74,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
   const restProps = selectProps(rest);
-  const parentAccessibilityRole = (_restProps$accessibil = restProps.accessibilityRole) !== null && _restProps$accessibil !== void 0 ? _restProps$accessibil : 'tablist';
+  const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   return /*#__PURE__*/_jsx(HorizontalScroll, {
     ref: ref,
@@ -101,7 +99,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
         } = _ref3;
-        const itemId = id !== null && id !== void 0 ? id : label;
+        const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
         const handlePress = event => {

package/lib-module/Tags/Tags.js

@@ -108,7 +108,7 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
 
   return /*#__PURE__*/_jsx(StackWrap, {

package/lib-module/TextInput/TextInputBase.js

@@ -182,7 +182,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   };
 
   const defaultRef = useRef();
-  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const inputRef = ref ?? defaultRef;
   const {
     currentValue,
     resetValue,

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

@@ -7,6 +7,7 @@ import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tok
 
 export function applyTextStyles(_ref) {
   let {
+    fontColor,
     fontSize,
     fontScaleCap,
     lineHeight,
@@ -28,7 +29,7 @@ export function applyTextStyles(_ref) {
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = Platform.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / fontBasePixels, "rem") : fontSize;
+    styles.fontSize = Platform.OS === 'web' && !forceAbsoluteFontSizing ? `${fontSize / fontBasePixels}rem` : fontSize;
   }
 
   if (typeof lineHeight === 'number') {
@@ -44,11 +45,15 @@ export function applyTextStyles(_ref) {
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
+    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
+  }
+
+  if (fontColor) {
+    styles.color = fontColor;
   } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89
@@ -91,7 +96,7 @@ function applyWebShadow(_ref2) {
   } = _ref2;
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
+    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
   };
   return boxShadow;
 }