@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/utils/input.js

@@ -5,43 +5,39 @@ import { useCallback, useRef, useState } from 'react';
 
 const pluralHooks = ['useMultipleInputValues'];
 
-const validateProps = ({
-  value,
-  onChange,
-  readOnly,
-  initialValue
-}, {
-  isCurrentlyControlled,
-  isControlled
-}, hookName) => {
+const validateProps = (_ref, _ref2, hookName) => {
+  let {
+    value,
+    onChange,
+    readOnly,
+    initialValue
+  } = _ref;
+  let {
+    isCurrentlyControlled,
+    isControlled
+  } = _ref2;
   const s = pluralHooks.includes(hookName) ? 's' : '';
 
   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(`${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\`.
-`);
+    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"));
   };
 
   if (value && !onChange && !readOnly) {
-    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
   }
 
   if (initialValue && value) {
-    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
   }
 };
 /**
@@ -69,7 +65,9 @@ Consumers of this hook must be one of:
  */
 
 
-export const useInputValue = (props = {}, hookName = 'useInputValue') => {
+export const useInputValue = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
   const isCurrentlyControlled = props.value !== undefined;
   const [isControlled] = useState(isCurrentlyControlled);
   validateProps(props, {
@@ -133,13 +131,14 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  * }}
  */
 
-export const useMultipleInputValues = ({
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly
-} = {}) => {
+export const useMultipleInputValues = function () {
+  let {
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     currentValue,
     setValue,
@@ -149,7 +148,7 @@ export const useMultipleInputValues = ({
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
   }, 'useMultipleInputValues');
   const enforceMaxValues = useCallback(newValues => {
     if (!maxValues) return newValues;

package/lib-module/utils/pressability.js

@@ -19,11 +19,12 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
  * @returns
  */
 
-export const getCursorStyle = ({
-  inactive,
-  disabled,
-  accessibilityRole
-}) => {
+export const getCursorStyle = _ref => {
+  let {
+    inactive,
+    disabled,
+    accessibilityRole
+  } = _ref;
   if (Platform.OS !== 'web') return undefined;
   if (inactive || disabled) return staticStyles.notAllowed;
   if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
@@ -44,15 +45,19 @@ export const getCursorStyle = ({
  * @returns {object}
  */
 
-export const resolvePressableState = ({
-  pressed = false,
-  focused = false,
-  hovered = false
-} = {}, additionalState) => ({ ...additionalState,
-  focus: focused,
-  hover: hovered,
-  pressed
-});
+export const resolvePressableState = function () {
+  let {
+    pressed = false,
+    focused = false,
+    hovered = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let additionalState = arguments.length > 1 ? arguments[1] : undefined;
+  return { ...additionalState,
+    focus: focused,
+    hover: hovered,
+    pressed
+  };
+};
 /**
  * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
  * object passed from the React Native `Pressable` component and optional extra properties.
@@ -85,13 +90,22 @@ const staticStyles = StyleSheet.create(Platform.select({
  * to pass in press handlers that are then called with state or values that is otherwise internal.
  */
 
-export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+export const getPressHandlersWithArgs = function () {
+  let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
-    [key]: (...defaultArgs) => {
-      // Pass each handler data on this button and current selection
-      handler(...args, ...defaultArgs);
-    }
-  })));
+  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(_ref2 => {
+    let [key, handler] = _ref2;
+    return {
+      [key]: function () {
+        for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+          defaultArgs[_key] = arguments[_key];
+        }
+
+        // Pass each handler data on this button and current selection
+        handler(...args, ...defaultArgs);
+      }
+    };
+  }));
   return pressHandlers;
 };

package/lib-module/utils/props/clickProps.js

@@ -18,7 +18,8 @@ export default {
    * web-oriented tooling that injects web-oriented event handlers directly. For example, for
    * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
    */
-  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(_ref => {
+    let [originalName, value] = _ref;
     const translatedName = clickHandlerMapping[originalName];
     return translatedName ? [translatedName, value] : [originalName, value];
   }))

package/lib-module/utils/props/componentPropType.js

@@ -26,8 +26,8 @@ export default 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 ${nameInProp}` : typeof props[propName];
-      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
+      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 ')));
     }
 
     return undefined;
@@ -35,7 +35,7 @@ export default function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
     }
 
     return undefined;

package/lib-module/utils/props/getPropSelector.js

@@ -1,6 +1,9 @@
 export default function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
-  return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-    [key]: value
-  } : items, {});
+  return props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
+      [key]: value
+    } : items;
+  }, {});
 }

package/lib-module/utils/props/handlerProps.js

@@ -11,13 +11,16 @@ export const focusHandlerProps = {
      */
     onFocus: PropTypes.func
   },
-  select: ({
-    onBlur,
-    onFocus
-  }) => ({
-    onBlur,
-    onFocus
-  })
+  select: _ref => {
+    let {
+      onBlur,
+      onFocus
+    } = _ref;
+    return {
+      onBlur,
+      onFocus
+    };
+  }
 };
 export const textInputHandlerProps = {
   types: {
@@ -41,17 +44,20 @@ export const textInputHandlerProps = {
      */
     onSubmitEditing: PropTypes.func
   },
-  select: ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  }) => ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  })
+  select: _ref2 => {
+    let {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    } = _ref2;
+    return {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    };
+  }
 };
 export default {
   focusHandlerProps,

package/lib-module/utils/props/hrefAttrsProp.js

@@ -14,17 +14,20 @@ export default {
    * Takes a props object, bundles any hrefAttrs props present into one object
    * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
    */
-  bundle: ({
-    download,
-    rel,
-    target,
-    ...rest
-  }) => ({
-    hrefAttrs: {
+  bundle: _ref => {
+    let {
       download,
       rel,
-      target
-    },
-    rest
-  })
+      target,
+      ...rest
+    } = _ref;
+    return {
+      hrefAttrs: {
+        download,
+        rel,
+        target
+      },
+      rest
+    };
+  }
 };

package/lib-module/utils/props/inputSupportsProps.js

@@ -37,16 +37,8 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({
-    copy,
-    label,
-    hint,
-    hintPosition,
-    feedback,
-    tooltip,
-    validation
-  }) => ({
-    supportsProps: {
+  select: _ref => {
+    let {
       copy,
       label,
       hint,
@@ -54,6 +46,17 @@ export default {
       feedback,
       tooltip,
       validation
-    }
-  })
+    } = _ref;
+    return {
+      supportsProps: {
+        copy,
+        label,
+        hint,
+        hintPosition,
+        feedback,
+        tooltip,
+        validation
+      }
+    };
+  }
 };

package/lib-module/utils/props/linkProps.js

@@ -28,14 +28,15 @@ export default {
    * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
    * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
-  handleHref: ({
-    onPress,
-    href
-  }) => {
+  handleHref: _ref => {
+    let {
+      onPress,
+      href
+    } = _ref;
     return Platform.select({
       web: onPress,
-      default: (...args) => {
-        if (onPress) onPress(...args);
+      default: function () {
+        if (onPress) onPress(...arguments);
         if (href) Linking.openURL(href);
       }
     });

package/lib-module/utils/props/selectSystemProps.js

@@ -3,7 +3,7 @@
 export default 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 ${propHelper}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
     }
 
     return { ...acc,
@@ -13,7 +13,7 @@ export default 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 ${propHelper}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
     }
 
     return { ...acc,

package/lib-module/utils/props/tokens.js

@@ -9,7 +9,7 @@ export const getTokenNames = componentName => {
   const componentTokenSchema = tokenKeys[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
   }
 
   return Object.keys(componentTokenSchema);
@@ -47,7 +47,7 @@ export const getTokenNames = componentName => {
 export const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
+    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token
@@ -84,16 +84,22 @@ export const selectTokens = (specifier, tokens, prefix) => {
  * }
  */
 
-export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  PropTypes.checkPropTypes({
-    [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-  }, props, propName, componentName);
+export const getTokensPropType = function () {
+  for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    componentsNames[_key] = arguments[_key];
+  }
 
-  if (typeof props[propName] !== 'function') {
+  return (props, propName, componentName) => {
     PropTypes.checkPropTypes({
-      [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
     }, props, propName, componentName);
-  }
+
+    if (typeof props[propName] !== 'function') {
+      PropTypes.checkPropTypes({
+        [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      }, props, propName, componentName);
+    }
+  };
 };
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
@@ -110,11 +116,18 @@ export const getTokensPropType = (...componentsNames) => (props, propName, compo
  * @returns
  */
 
-export const getTokensSetPropType = (componentTokenKeys, {
-  partial = false,
-  allowFunction = false
-} = {}) => {
+export const getTokensSetPropType = function (componentTokenKeys) {
+  let {
+    partial = false,
+    allowFunction = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
-  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+  function (props, propName) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      args[_key2 - 2] = arguments[_key2];
+    }
+
+    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+  }])));
   return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
 };

package/lib-module/utils/ssr.js

@@ -12,7 +12,8 @@ import AppRegistry from "react-native-web/dist/exports/AppRegistry";
  * @returns {ReactElement[]}
  */
 
-export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+export const getReactNativeWebSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   AppRegistry.registerComponent(appName, () => AppRoot);
   const {
     getStyleElement
@@ -29,7 +30,9 @@ export const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
  * @returns {ReactElement[]}
  */
 
-export const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+export const getSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
   ];
 };

package/lib-module/utils/useCopy.js

@@ -27,10 +27,12 @@ export const DEFAULT_COPY = 'en';
  * @return {function(string): string}
  */
 
-function useCopy({
-  dictionary,
-  copy = DEFAULT_COPY
-}) {
+function useCopy(_ref) {
+  let {
+    dictionary,
+    copy = DEFAULT_COPY
+  } = _ref;
+
   if (typeof copy === 'string') {
     return key => key ? dictionary[copy][key] : dictionary[copy];
   } // support overriding the entire copy dictionary with an object for a single language

package/lib-module/utils/useHash.js

@@ -22,7 +22,8 @@ const doAction = (action, event) => {
  */
 
 
-const useHash = (action, isReady = true) => {
+const useHash = function (action) {
+  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const [isDone, setIsDone] = useState(false); // Do the action just once when ready after component mount, from hash on page load
 
   const isToDo = isReady && !isDone;

package/lib-module/utils/useSpacingScale.js

@@ -101,6 +101,8 @@ 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 = useViewport();
@@ -110,7 +112,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {

package/lib-module/utils/useUniqueId.js

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

package/lib-module/utils/withLinkRouter.js

@@ -35,11 +35,12 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
 
 
 const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/forwardRef(({
-    LinkRouter,
-    linkRouterProps,
-    ...props
-  }, ref) => {
+  const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
+    let {
+      LinkRouter,
+      linkRouterProps,
+      ...props
+    } = _ref;
     if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
       ref: ref
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,16 +22,17 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "yarn --cwd ../.. lint:path --color packages/components-base",
-    "lint:fix": "yarn --cwd ../.. lint:path --fix packages/components-base",
+    "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
+    "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "yarn build:code && yarn build:docs",
+    "build": "npm run build:code && npm run build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "yarn build:main && yarn build:module",
+    "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
-    "dev": "yarn build:code --watch"
+    "build-storybook": "build-storybook",
+    "dev": "npm run build:code --watch"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -44,7 +45,7 @@
   ],
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "*",
+    "react-dom": "^17.0.2",
     "react-native": "*",
     "react-native-web": "^0.17.0"
   },
@@ -55,16 +56,17 @@
     "@storybook/react": "^6.5.6",
     "@storybook/builder-webpack5": "^6.5.6",
     "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.2",
+    "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2"
+    "react-test-renderer": "^16.3.2",
+    "webpack": "5.x"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.3",
-    "@telus-uds/system-theme-tokens": "^2.0.1",
+    "@telus-uds/system-constants": "^1.0.4",
+    "@telus-uds/system-theme-tokens": "^2.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",