@telus-uds/components-base 1.30.0 → 1.31.0

package/lib/StackView/StackWrap.js

@@ -42,14 +42,12 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _props$gap;
-
   const [canUseCSSGap, setCanUseCSSGap] = (0, _react.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/StackView/getStackedContent.js

@@ -65,7 +65,7 @@ const getStackedContent = (children, _ref) => {
   const validChildren = _react.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.
@@ -75,7 +75,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/Tabs/Tabs.js

@@ -59,8 +59,6 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
 
 
 const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _restProps$accessibil;
-
   let {
     tokens,
     itemTokens,
@@ -98,7 +96,7 @@ const Tabs = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
@@ -123,7 +121,7 @@ const Tabs = /*#__PURE__*/(0, _react.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/Tags/Tags.js

@@ -135,7 +135,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.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__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {

package/lib/TextInput/TextInputBase.js

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

package/lib/ThemeProvider/utils/styles.js

@@ -21,6 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Make design tokens fit React Native's text styles' specific requirements and quirks
 function applyTextStyles(_ref) {
   let {
+    fontColor,
     fontSize,
     fontScaleCap,
     lineHeight,
@@ -42,7 +43,7 @@ function applyTextStyles(_ref) {
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / _systemConstants.fontBasePixels, "rem") : fontSize;
+    styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? `${fontSize / _systemConstants.fontBasePixels}rem` : fontSize;
   }
 
   if (typeof lineHeight === 'number') {
@@ -58,11 +59,15 @@ 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.default.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
@@ -108,7 +113,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;
 }

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -28,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
+    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
+    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
+    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
   }
 
   return componentTheme;
@@ -49,11 +49,9 @@ const getComponentTheme = (theme, componentName) => {
 exports.getComponentTheme = getComponentTheme;
 
 const doesThemeConditionApply = (_ref, appearances) => {
-  var _appearances$key;
-
   let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
+  const appearanceValue = appearances[key] ?? null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -194,7 +192,11 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
+    throw new Error(`Invalid UDS token schema version detected.
+
+The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
+
+If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`);
   }
 };
 

package/lib/Timeline/Timeline.js

@@ -159,7 +159,7 @@ const Timeline = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
           style: selectItemContentStyles(themeTokens, index + 1 === children.length),
           children: child
         })]
-      }, "timeline-".concat(index, "-").concat(child.displayName));
+      }, `timeline-${index}-${child.displayName}`);
     })
   });
 });

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -160,7 +160,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 2,
     direction: "row",

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -87,7 +87,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("ToggleSwitchGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const toggleSwitches = items.map((_ref2, index) => {

package/lib/Tooltip/Backdrop.js

@@ -19,7 +19,15 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  node.style.cssText = `
+  position: absolute; 
+  top: ${window.scrollY}px;
+  left: ${window.scrollX}px; 
+  right: 0; 
+  bottom: 0; 
+  z-index: 9999; 
+  pointer-events: none;
+  `;
   document.body.appendChild(node);
   return node;
 }
@@ -40,7 +48,7 @@ function Backdrop(_ref) {
   } = _ref;
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib/Tooltip/Tooltip.js

@@ -262,8 +262,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip, // applied separately so that it doesn't cover the arrow
       selectMobileTooltipPositionStyles({
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y ?? 0,
+        left: x ?? 0
       })],
       onLayout: onTooltipLayout,
       accessibilityRole: "alert",

package/lib/Validator/Validator.js

@@ -57,7 +57,7 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...rest
   } = _ref2;
   const defaultRef = (0, _react.useRef)();
-  const codeRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const codeRef = ref ?? defaultRef;
   const {
     supportsProps
   } = selectProps(rest);
@@ -112,15 +112,13 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   };
 
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2, _codeElement$value3;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
 
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
 
     if (Number(val).toString() === 'NaN') {
-      var _singleCodes$codeId;
-
-      codeElement.value = (_singleCodes$codeId = singleCodes[codeId]) !== null && _singleCodes$codeId !== void 0 ? _singleCodes$codeId : '';
+      codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
 
@@ -131,7 +129,7 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       handleSingleCodes(codeId, codeElement.value, 'success');
     }
 
-    handleSingleCodes(codeId, (_codeElement$value2 = codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) !== null && _codeElement$value2 !== void 0 ? _codeElement$value2 : singleCodes[codeId], 'success');
+    handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
 
     if (nextIndex === validatorsLength) {
@@ -139,7 +137,7 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       return;
     }
 
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value3 = codeElement.value) === null || _codeElement$value3 === void 0 ? void 0 : _codeElement$value3.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
   };
 
   const handleKeyPress = (event, currentIndex, previousIndex) => {
@@ -158,15 +156,18 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     const components = [];
 
     for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      var _codeReferences$codeI2;
-
       const codeId = prefix + i;
       const codeInputProps = {
         nativeID: codeId,
-        ref: (_codeReferences$codeI2 = codeReferences[codeId]) !== null && _codeReferences$codeI2 !== void 0 ? _codeReferences$codeI2 : null,
+        keyboardType: 'numeric',
+        ref: codeReferences[codeId] ?? null,
         validation: strValidation || singleCodes[codeId + sufixValidation],
         tokens: selectCodeTextInputTokens(themeTokens),
-        onFocus: () => codeReferences[codeId].current.select(),
+        onFocus: () => {
+          var _codeReferences$codeI2, _codeReferences$codeI3;
+
+          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 ? void 0 : (_codeReferences$codeI3 = _codeReferences$codeI2.current) === null || _codeReferences$codeI3 === void 0 ? void 0 : _codeReferences$codeI3.select()) ?? null;
+        },
         onKeyPress: event => handleKeyPress(event, i, i - 1),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
@@ -191,10 +192,8 @@ const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   (0, _react.useEffect)(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      var _text$i, _text$i2;
-
-      codeReferences[prefix + i].current.value = (_text$i = text[i]) !== null && _text$i !== void 0 ? _text$i : '';
-      handleSingleCodes(prefix + i, (_text$i2 = text[i]) !== null && _text$i2 !== void 0 ? _text$i2 : '', text[i] ? 'success' : '');
+      codeReferences[prefix + i].current.value = text[i] ?? '';
+      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
   /* eslint-disable react-hooks/exhaustive-deps */

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -88,7 +88,7 @@ function useVerticalExpandAnimation(_ref) {
     }
   } else if (_Platform.default.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
     containerStyles.height = isExpanded ? containerHeight : 0;
   } else if (_Platform.default.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
     // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where

package/lib/utils/children.js

@@ -73,7 +73,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -82,7 +82,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
+    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
   } else {
     wrappedText.push(child);
   }

package/lib/utils/input.js

@@ -28,23 +28,29 @@ const validateProps = (_ref, _ref2, hookName) => {
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
+    throw new Error(`${hookName} ${error}.
+
+Consumers of this hook must be one of:
+1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
+2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
+3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
+`);
   };
 
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
 
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
 /**
@@ -105,7 +111,7 @@ const useInputValue = function () {
 
     if (!isControlled) {
       setOwnValue(newValue);
-      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
     } // Call onChange handler if there's something for it to handle (event or a changed value)
 
 
@@ -166,7 +172,7 @@ const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
   const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;

package/lib/utils/props/componentPropType.js

@@ -33,8 +33,8 @@ function componentPropType(passedName) {
     const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
 
     if (!nameInProp || !passedNames.includes(nameInProp)) {
-      const propDescription = nameInProp ? "Component ".concat(nameInProp) : typeof props[propName];
-      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
     }
 
     return undefined;
@@ -42,7 +42,7 @@ function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
     }
 
     return undefined;

package/lib/utils/props/selectSystemProps.js

@@ -10,7 +10,7 @@ exports.default = selectSystemProps;
 function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
     if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
     }
 
     return { ...acc,
@@ -20,7 +20,7 @@ function selectSystemProps(systemPropHelpers) {
 
   const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
     if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
     }
 
     return { ...acc,

package/lib/utils/props/tokens.js

@@ -22,7 +22,7 @@ const getTokenNames = componentName => {
   const componentTokenSchema = _systemThemeTokens.components[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
 
   return Object.keys(componentTokenSchema);
@@ -63,7 +63,7 @@ exports.getTokenNames = getTokenNames;
 const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib/utils/useSpacingScale.js

@@ -110,8 +110,6 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
-  var _spaceValue$space;
-
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -121,7 +119,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
   } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {

package/lib/utils/useUniqueId.js

@@ -13,7 +13,7 @@ function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return "".concat(prefix, "-").concat(id);
+    return `${prefix}-${id}`;
   });
   return uniqueId;
 }

package/lib-module/ActivityIndicator/Spinner.js

@@ -10,14 +10,14 @@ const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(DURATION, "ms"),
+  dur: `${DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(BEZIER.join(', '), " ; ").concat(BEZIER.join(', '))
+  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
@@ -35,8 +35,8 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
   const reduceMotion = reduceMotionEnabled || isStatic;
   return /*#__PURE__*/_jsx("svg", {
     ref: ref,
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
+    width: `${size}px`,
+    height: `${size}px`,
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -45,7 +45,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
+        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
       }), /*#__PURE__*/_jsx("circle", {
         fill: "none",
@@ -60,12 +60,12 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
-            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dasharray",
-            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
             ...bezierProps
           })]

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -69,7 +69,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           }
 
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -84,7 +84,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }];
           viewportStyle.transform = [{

package/lib-module/BaseProvider/HydrationContext.js

@@ -39,7 +39,7 @@ export const HydrationProvider = _ref => {
   }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
 
   const valueFromAncestor = useHydrationContext();
-  const isHydrating = valueFromAncestor !== null && valueFromAncestor !== void 0 ? valueFromAncestor : Boolean(!hasMounted && hasWebStyleTag());
+  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
   return /*#__PURE__*/_jsx(HydrationContext.Provider, {
     value: isHydrating,
     children: children

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