@telus-uds/components-base 1.18.1 → 1.19.1

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) => {
@@ -110,7 +110,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       ref: itemRef,
       ...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, {
@@ -133,7 +133,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/Responsive/Responsive.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { useResponsiveProp } from '../utils';
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: useResponsiveProp(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default Responsive;

package/lib-module/Responsive/index.js

@@ -0,0 +1,2 @@
+import Responsive from './Responsive';
+export default Responsive;

package/lib-module/Search/Search.js

@@ -1,16 +1,13 @@
 import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
@@ -39,20 +36,11 @@ const selectInputTokens = _ref => {
 
 const selectButtonTokens = tokens => selectTokens('Button', tokens);
 
-const selectIconsContainerStyle = _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return {
-    paddingRight
-  };
-};
-
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref3;
+  } = _ref2;
   return {
     color: iconColor,
     size: iconSize
@@ -73,7 +61,7 @@ const selectIconTokens = _ref3 => {
  */
 
 
-const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -88,7 +76,7 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref3;
   const {
     currentValue = '',
     setValue
@@ -134,16 +122,14 @@ const Search = /*#__PURE__*/forwardRef((_ref4, 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,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
-    ...containerProps,
-    children: [/*#__PURE__*/_jsx(TextInputBase, {
+  return /*#__PURE__*/_jsx(View, { ...containerProps,
+    children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -163,35 +149,29 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
       onChange: setValue,
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText
-    }), /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/_jsxs(StackView, {
-        direction: "row",
-        space: buttonsGap,
-        children: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleClear,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-          tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-          })
-        }), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleSubmit,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-          tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+      accessibilityLabel: a11yLabelText,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+          priority: 'high'
+        })),
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
-          })),
-          children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-              priority: 'high'
-            }))
-          })
-        })]
-      })
-    })]
+          }))
+        })
+      }, "submit")]
+    })
   });
 });
 Search.displayName = 'Search';
@@ -255,15 +235,4 @@ Search.propTypes = { ...selectedContainerPropTypes,
   tokens: getTokensPropType('Search'),
   variant: variantProp.propType
 };
-export default Search;
-const staticStyles = StyleSheet.create({
-  container: {// No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+export default Search;

package/lib-module/Select/constants.js

@@ -0,0 +1,5 @@
+// Because Android
+export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+export const ANDROID_HEIGHT_OFFSET = 12;
+export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+export const ANDROID_DEFAULT_PADDING = 0;

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

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
-const selectIconTextTokens = _ref => {
+const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
     iconPosition,
@@ -27,9 +27,10 @@ const selectIconTextTokens = _ref => {
     iconAlignSelf,
     iconPadding,
     iconTranslateX,
-    iconTranslateY
+    iconTranslateY,
+    ...rest
   } = _ref;
-  return {
+  return returnRest ? rest : {
     icon,
     iconPosition,
     iconSpace,
@@ -54,6 +55,10 @@ const selectIconTextTokens = _ref => {
   };
 };
 
+const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
+
+const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
+
 const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     variant,
@@ -82,7 +87,8 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = themeTokens;
   const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
 
   const {
     currentValues,
@@ -102,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

@@ -1,11 +1,12 @@
 import React, { forwardRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
@@ -110,35 +111,47 @@ const selectIconTokens = _ref3 => {
   };
 };
 
-const selectIconContainerStyles = _ref4 => {
+const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
+    buttonSize,
+    buttonsGapSize,
     paddingRight,
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
     paddingBottom
   };
 };
 
-const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const selectButtonsContainerStyle = _ref5 => {
   let {
-    value,
+    buttonsPaddingRight
+  } = _ref5;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    buttons = [],
     height,
-    initialValue,
     inactive,
-    readOnly,
+    initialValue,
+    onBlur,
     onChange,
     onChangeText,
     onFocus,
-    onBlur,
-    onMouseOver,
     onMouseOut,
+    onMouseOver,
     pattern,
+    readOnly,
     tokens,
+    value,
     variant = {},
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = event => {
@@ -197,7 +210,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const {
-    icon: IconComponent
+    icon: IconComponent,
+    buttonsGap
   } = themeTokens;
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
@@ -210,7 +224,9 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
-  };
+  }; // Get the actual gap value for the current viewport
+
+  const buttonsGapSize = useSpacingScale(buttonsGap);
   const {
     themeOptions
   } = useTheme();
@@ -226,30 +242,47 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+        buttonsGapSize
+      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
       })
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/_jsx(StackView, {
+        direction: "row",
+        space: buttonsGap,
+        children: buttons
+      })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: PropTypes.string,
+  buttons: PropTypes.arrayOf(PropTypes.node),
   height: PropTypes.number,
-  initialValue: PropTypes.string,
   inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
   variant: variantProp.propType
 };
 export default TextInputBase;
 const staticStyles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib-module/TextInput/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
+  }
+};

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

@@ -28,7 +28,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,7 +44,7 @@ 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'.
@@ -91,7 +91,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-module/ThemeProvider/utils/theme-tokens.js

@@ -17,29 +17,27 @@ export 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;
 };
 export 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;
 };
 export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
@@ -158,6 +156,10 @@ export 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 (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(pkg.name, " v").concat(pkg.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(pkg.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 ${pkg.name} v${pkg.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 ${pkg.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-module/Timeline/Timeline.js

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