@telus-uds/components-base 3.7.0 → 3.8.0

package/lib/esm/ActivityIndicator/RenderActivityIndicator.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Spinner from './Spinner';
+import Dots from './Dots';
+import { DOTS_STYLE } from './shared';
+
+/**
+ * Return <Dots/> or <Spinner/> based on `variant?.dots`.
+ * Reused in all the variants of the component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const RenderActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variant = {},
+    dotSize,
+    size,
+    color,
+    indicatorBackgroundColor,
+    thickness,
+    label,
+    isStatic
+  } = _ref;
+  const {
+    dots,
+    style
+  } = variant || {};
+  const isDots = dots === true || style === DOTS_STYLE;
+  return isDots ? /*#__PURE__*/_jsx(Dots, {
+    ref: ref,
+    size: dotSize,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    label: label,
+    isStatic: isStatic
+  }) : /*#__PURE__*/_jsx(Spinner, {
+    ref: ref,
+    size: size,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    thickness: thickness,
+    label: label,
+    isStatic: isStatic
+  });
+});
+RenderActivityIndicator.displayName = 'RenderActivityIndicator';
+RenderActivityIndicator.propTypes = {
+  /**
+   * ActivityIndicator variants
+   * */
+  variant: PropTypes.shape({
+    dots: PropTypes.bool,
+    style: PropTypes.oneOf([DOTS_STYLE])
+  }),
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the indicator
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Label for the ActivityIndicator
+   * */
+  label: PropTypes.string,
+  /**
+   * if true, there's no animation for ActivityIndicator
+   * */
+  isStatic: PropTypes.bool
+};
+export default RenderActivityIndicator;

package/lib/esm/ActivityIndicator/index.js

@@ -1,45 +1,83 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import { useScrollBlocking } from '../utils';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils/props';
-import Spinner from './Spinner';
-import Dots from './Dots';
+import FullScreenIndicator from './FullScreenIndicator';
+import OverlayIndicator from './OverlayIndicator';
+import InlineIndicator from './InlineIndicator';
+import { jsx as _jsx } from "react/jsx-runtime";
+const labelMapping = {
+  top: 'column-reverse',
+  bottom: 'column',
+  left: 'row-reverse',
+  right: 'row'
+};
 
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const ActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     tokens,
     label,
-    isStatic = false
+    labelPosition = 'bottom',
+    showLabel = true,
+    inline = false,
+    fullScreen = false,
+    overlay = false,
+    isStatic = false,
+    children,
+    fullScreenBackgroundColor
   } = _ref;
   const {
     size,
     dotSize,
     color,
     indicatorBackgroundColor,
+    fullScreenOverlayBackground,
     thickness
   } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return variant?.dots ? /*#__PURE__*/_jsx(Dots, {
-    ref: ref,
-    size: dotSize,
-    color: color,
-    indicatorBackgroundColor: indicatorBackgroundColor,
-    label: label,
-    isStatic: isStatic
-  }) : /*#__PURE__*/_jsx(Spinner, {
-    ref: ref,
-    size: size,
-    color: color,
-    indicatorBackgroundColor: indicatorBackgroundColor,
-    thickness: thickness,
-    label: label,
-    isStatic: isStatic
-  });
+  useScrollBlocking([Platform.OS === 'web' && fullScreen]);
+  const variantProps = {
+    variant,
+    dotSize,
+    size,
+    color,
+    indicatorBackgroundColor,
+    thickness,
+    isStatic
+  };
+  const visibleLabel = showLabel && !!label;
+  const commonProps = {
+    ref,
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    showLabel: visibleLabel
+  };
+  switch (true) {
+    case fullScreen:
+      return /*#__PURE__*/_jsx(FullScreenIndicator, {
+        ...commonProps,
+        backgroundColor: fullScreenBackgroundColor || fullScreenOverlayBackground
+      });
+    case overlay:
+      return /*#__PURE__*/_jsx(OverlayIndicator, {
+        ...commonProps,
+        inline: inline,
+        isActive: overlay,
+        children: children
+      });
+    default:
+      return /*#__PURE__*/_jsx(InlineIndicator, {
+        ...commonProps
+      });
+  }
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
 ActivityIndicator.propTypes = {
@@ -48,10 +86,38 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  /**
+   * If true, it should render a static ActivityIndicator
+   */
+  isStatic: PropTypes.bool,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * show or hide the label
+   */
+  showLabel: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in full screen mode
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed inline
+   */
+  inline: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in overlay mode
+   */
+  overlay: PropTypes.bool,
+  /**
+   * Children to be rendered inside ActivityIndicator
+   */
+  children: PropTypes.node,
   /**
-   * If true, it should render a static spinner
+   * Background color of the full screen overlay
    */
-  isStatic: PropTypes.bool
+  fullScreenBackgroundColor: PropTypes.string
 };
 export default ActivityIndicator;

package/lib/esm/ActivityIndicator/shared.js

@@ -50,6 +50,17 @@ export const DOT_FADEOUT_OUTPUT_RANGE = [1, 1, 0, 0];
 export const DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1];
 export const DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1];
 export const DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1];
+
+// Backdrop
+export const BACKDROP_OPACITY = 0.06;
+export const BACKDROP_Z_INDEX = 1400;
+
+// Space
+export const SPACE_WITH_LABEL = 3;
+export const SPACE_WITHOUT_LABEL = 0;
+
+// Style
+export const DOTS_STYLE = 'dots';
 export const propTypes = {
   color: PropTypes.string.isRequired,
   baseColor: PropTypes.string,

package/lib/esm/ActivityIndicator/sharedProptypes.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+
+/**
+ * PropTypes for the 3 variants of the ActivityIndicator:
+ *   - InlineIndicator
+ *   - OverlayIndicator
+ *   - FullScreenIndicator
+ */
+export const activityIndicatorVariantProps = PropTypes.shape({
+  /**
+   * Indicates the variant style for the ActivityIndicator
+   * */
+  variant: PropTypes.object,
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the ActivityIndicator Spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color (Spinner)
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the ActivityIndicator Spinner
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Indicates if the ActivityIndicator is static
+   * (not animated)
+   * */
+  isStatic: PropTypes.bool
+}).isRequired;
+export const activityIndicatorCommonProps = {
+  /**
+   * Props used by RenderActivityIndicator
+   * */
+  variantProps: activityIndicatorVariantProps,
+  /**
+   * Shows or hide the label
+   * */
+  showLabel: PropTypes.bool,
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: PropTypes.string,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Map of flex-direction position for label
+   * */
+  labelMapping: PropTypes.object.isRequired
+};

package/lib/esm/Card/Card.js

@@ -126,6 +126,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const selected = interactiveCard?.variant?.selected;
   const inactive = interactiveCard?.variant?.inactive;
   const selectionType = interactiveCard?.selectionType;
+  const isControl = interactiveCard?.variant?.isControl === true;
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
     ...(interactiveCard?.variant || {})
@@ -193,6 +194,9 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     cardStyles = themeTokens;
   }
   const renderInputPerSelectionType = props => {
+    if (!isControl) {
+      return null;
+    }
     switch (selectionType) {
       case SelectionType.Checkbox:
         return /*#__PURE__*/_jsx(View, {
@@ -220,17 +224,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         return null;
     }
   };
-  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
-    style: {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight
-    },
-    children: children
-  });
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(CardBase, {
+    children: /*#__PURE__*/_jsxs(CardBase, {
       ref: ref,
       tokens: interactiveCard?.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
@@ -238,41 +233,39 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         media: mediaIds
       },
       ...selectProps(rest),
-      children: interactiveCard?.body ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(PressableCardBase, {
-          ref: ref,
-          tokens: getThemeTokens,
-          dataSet: dataSet,
-          onPress: onPress,
-          href: interactiveCard?.href,
-          hrefAttrs: interactiveCard?.hrefAttrs,
-          ...selectProps(rest),
-          children: cardState => {
-            const {
-              iconColor: checkColor,
-              inputBackgroundColor: boxBackgroundColor,
-              iconBackgroundColor: checkBackgroundColor
-            } = getThemeTokens({
-              ...cardState,
-              selected,
-              interactive: true,
-              isControl: true
-            }, interactiveCard?.tokens);
-            return /*#__PURE__*/_jsxs(_Fragment, {
-              children: [renderInputPerSelectionType(getInputProps({
-                id,
-                checkColor,
-                boxBackgroundColor,
-                checkBackgroundColor,
-                isControlled: true,
-                isChecked: selected || cardState?.hover,
-                isInactive: inactive,
-                onPress
-              })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
-            });
-          }
-        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
-      }) : children
+      children: [interactiveCard?.body && /*#__PURE__*/_jsx(PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        href: interactiveCard?.href,
+        hrefAttrs: interactiveCard?.hrefAttrs,
+        ...selectProps(rest),
+        children: cardState => {
+          const {
+            iconColor: checkColor,
+            inputBackgroundColor: boxBackgroundColor,
+            iconBackgroundColor: checkBackgroundColor
+          } = getThemeTokens({
+            ...cardState,
+            selected,
+            interactive: true,
+            isControl
+          }, interactiveCard?.tokens);
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [renderInputPerSelectionType(getInputProps({
+              id,
+              checkColor,
+              boxBackgroundColor,
+              checkBackgroundColor,
+              isControlled: true,
+              isChecked: selected || cardState?.hover,
+              isInactive: inactive,
+              onPress
+            })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+          });
+        }
+      }), children]
     })
   });
 });

package/lib/esm/Card/PressableCardBase.js

@@ -125,7 +125,10 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setFocused(false);
           setPressed(false);
         },
-        style: staticStyles.container,
+        style: {
+          ...staticStyles.container,
+          textDecoration: 'none'
+        },
         ...(hrefAttrs || {}),
         children: /*#__PURE__*/_jsx(CardBase, {
           tokens: getCardTokens({

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -38,7 +38,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const isFocusVisible = Platform.OS === 'web' ? focus && !pressed && !hover : expanded;
   const linkTokens = useThemeTokens('Link', {}, {
     ...variant,
-    quiet: expanded ?? quiet
+    quiet
   }, {
     focus: isFocusVisible,
     hover,

package/lib/esm/List/ListItemMark.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Icon from '../Icon';
+import { useVariants } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
@@ -53,6 +54,7 @@ const selectBulletContainerStyles = _ref4 => {
     alignItems: itemBulletContainerAlign
   };
 };
+const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
 
 /**
  * Subcomponent used within ListItem and similar components for rendering bullets or icons
@@ -71,6 +73,10 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
+
+  // TODO: Remove it when iconColor custom colors are deprecated.
+  const iconVariants = useVariants('Icon');
+  const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
@@ -78,10 +84,15 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: icon,
         tokens: {
-          size: iconSize ?? iconTokens.size
+          size: iconSize ?? iconTokens.size,
+          ...((iconColor && !iconColorVariants?.includes(iconColor) || !iconColor) && {
+            color: iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
+          })
         },
         variant: {
-          color: iconColor ?? iconTokens.color
+          ...(iconColorVariants?.includes(iconColor) && {
+            color: iconColor
+          })
         }
       })
     });

package/lib/esm/MultiSelectFilter/ModalOverlay.js

@@ -10,6 +10,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import dictionary from './dictionary';
 import Card from '../Card';
 import IconButton from '../IconButton';
+import useDetectOutsideClick from '../utils/useDetectOutsideClick';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -89,13 +90,16 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     tokens,
     copy,
     onClose,
-    enableFullscreen = false
+    enableFullscreen = false,
+    dismissWhenPressedOutside = false
   } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
+  const containerRef = React.useRef(ref || null);
+  useDetectOutsideClick(containerRef, onClose, dismissWhenPressedOutside);
   const containerWidthHeight = {
     minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
     minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -112,7 +116,7 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const closeLabel = getCopy('closeButton');
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsx(View, {
-      ref: ref,
+      ref: containerRef,
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/_jsxs(Card, {
@@ -150,6 +154,11 @@ ModalOverlay.propTypes = {
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
   onClose: PropTypes.func,
-  enableFullscreen: PropTypes.bool
+  enableFullscreen: PropTypes.bool,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: PropTypes.bool
 };
 export default ModalOverlay;

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -85,6 +85,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     inactive = false,
     rowLimit = 12,
     dictionary = defaultDictionary,
+    dismissWhenPressedOutside = false,
     ...rest
   } = _ref3;
   const viewport = useViewport();
@@ -396,8 +397,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         })]
       })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
-      overlaidPosition: overlaidPosition,
+      dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
+      overlaidPosition: overlaidPosition,
       maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -541,6 +543,11 @@ MultiSelectFilter.propTypes = {
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: PropTypes.number
+  rowLimit: PropTypes.number,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: PropTypes.bool
 };
 export default MultiSelectFilter;

package/lib/esm/utils/index.js

@@ -23,4 +23,5 @@ export { default as htmlAttrs } from './htmlAttrs';
 export { transformGradient } from './transformGradient';
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
 export { default as formatImageSource } from './formatImageSource';
-export { default as getSpacingScale } from './getSpacingScale';
+export { default as getSpacingScale } from './getSpacingScale';
+export { default as useVariants } from './useVariants';

package/lib/esm/utils/useDetectOutsideClick.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * Hook to detect clicks outside of a ref, only on web.
+ *
+ * @param {React.RefObject<HTMLElement>} ref
+ *   Reference to the element you want to “protect.”
+ * @param {() => void} onOutside
+ *   Callback invoked when a click occurs outside that ref.
+ * @param {boolean} [enabled=true]
+ *   Flag to enable or disable the outside-click detection at runtime.
+ *   @deprecated Will be removed in next major release; detection will always be enabled.
+ */
+function useDetectOutsideClick(ref, onOutside) {
+  let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  React.useEffect(() => {
+    if (!enabled || Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleClickOutside = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOutside();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, onOutside, enabled]);
+}
+export default useDetectOutsideClick;

package/lib/esm/utils/useVariants.js

@@ -0,0 +1,41 @@
+import { getComponentTheme, useTheme } from '../ThemeProvider';
+
+/**
+ * Generates a label string for a variant based on the provided key and value.
+ *
+ * @param {string} key - The name of the variant.
+ * @param {*} value - The value of the variant. If it's a string, it will be appended to the key.
+ * @returns {string} The formatted variant label (e.g., "color: red" or "size").
+ */
+const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `: ${value}` : ''}`;
+
+/**
+ * Retrieves the variant options for a given component from the theme.
+ *
+ * @param {string} componentName - The name of the component to get variants for.
+ * @returns {Array<Array>} An array of variant tuples. Each tuple contains:
+ *   - {string|undefined} The variant key (e.g., 'size', 'color', or undefined for default).
+ *   - {string|undefined} The variant value (e.g., 'small', 'primary', or undefined for default).
+ *   - {string} The human-readable label for the variant.
+ *   Returns [['default', {}]] if no componentName is provided.
+ * @throws {Error} If the theme does not define appearances for the given component.
+ */
+const useVariants = componentName => {
+  const theme = useTheme();
+  if (!componentName) return [['default', {}]];
+  const {
+    appearances
+  } = getComponentTheme(theme, componentName);
+  if (!appearances) {
+    throw new Error(`Theme ${theme.metadata?.name} does not have any appearances set for ${componentName}`);
+  }
+  const variants = Object.entries(appearances).reduce((pairs, _ref) => {
+    let [key, {
+      values,
+      type
+    } = {}] = _ref;
+    return type === 'variant' ? [...pairs, ...values.map(value => [key, value, getVariantLabel(key, value)])] : pairs;
+  }, [[undefined, undefined, 'default style']]);
+  return variants;
+};
+export default useVariants;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.5.0",
+    "@telus-uds/system-theme-tokens": "^4.6.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.7.0",
+  "version": "3.8.0",
   "types": "types/index.d.ts"
 }