@telus-uds/components-base 1.84.0 → 1.85.1

package/src/A11yInfoProvider/index.jsx

@@ -1,15 +1,15 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { AccessibilityInfo, Platform } from 'react-native'
 
-const ScreenReaderContext = createContext(false)
-const ReducedMotionContext = createContext(false)
+const ScreenReaderContext = React.createContext(false)
+const ReducedMotionContext = React.createContext(false)
 
 const A11yInfoProvider = ({ children }) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
@@ -65,8 +65,8 @@ A11yInfoProvider.propTypes = {
 export default A11yInfoProvider
 
 export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext)
-  const reduceMotionEnabled = useContext(ReducedMotionContext)
+  const screenReaderEnabled = React.useContext(ScreenReaderContext)
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext)
 
   return {
     reduceMotionEnabled,

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -12,7 +12,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
+const A11yText = React.forwardRef(({ text, heading, ...rest }, ref) => {
   const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.

package/src/ActivityIndicator/Spinner.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
 
@@ -21,7 +21,7 @@ const bezierProps = {
 }
 // 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.
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic
   return (

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
@@ -6,7 +6,7 @@ import { useA11yInfo } from '../A11yInfoProvider'
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
+const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
   const { reduceMotionEnabled } = useA11yInfo()
   const reduceMotion = reduceMotionEnabled || isStatic

package/src/Autocomplete/Autocomplete.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, Platform, View, StyleSheet } from 'react-native'
 import throttle from 'lodash.throttle'
@@ -83,7 +82,7 @@ const highlight = (items = [], text = '', color) =>
     return [...acc, item]
   }, [])
 
-const Autocomplete = forwardRef(
+const Autocomplete = React.forwardRef(
   (
     {
       children,
@@ -116,22 +115,24 @@ const Autocomplete = forwardRef(
     const isControlled = value !== undefined
 
     // We need to store current items for uncontrolled usage
-    const [currentItems, setCurrentItems] = useState(initialItems)
+    const [currentItems, setCurrentItems] = React.useState(initialItems)
 
-    const [otherItems, setOtherItems] = useState(items)
+    const [otherItems, setOtherItems] = React.useState(items)
 
     // We need to store the current value as well to be able to highlight it
-    const [currentValue, setCurrentValue] = useState(value ?? initialValue)
+    const [currentValue, setCurrentValue] = React.useState(value ?? initialValue)
     const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
 
     // Setting up the overlay
-    const openOverlayRef = useRef()
-    const [isExpanded, setIsExpanded] = useState((value ?? initialValue)?.length >= minToSuggestion)
-    const [isFocused, setisFocused] = useState(false)
-    const [sourceLayout, setSourceLayout] = useState(null)
+    const openOverlayRef = React.useRef()
+    const [isExpanded, setIsExpanded] = React.useState(
+      (value ?? initialValue)?.length >= minToSuggestion
+    )
+    const [isFocused, setisFocused] = React.useState(false)
+    const [sourceLayout, setSourceLayout] = React.useState(null)
 
     // When it's nested, selected value
-    const [nestedSelectedValue, setNestedSelectedValue] = useState(null)
+    const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null)
 
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
@@ -148,7 +149,7 @@ const Autocomplete = forwardRef(
         vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
       }
     })
-    const targetRef = useRef(null)
+    const targetRef = React.useRef(null)
     // We limit the number of suggestions displayed to avoid huge lists
     // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
     // within that height, which will unlock similar behaviour for `AutoComplete` as well
@@ -157,7 +158,7 @@ const Autocomplete = forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
     // Tracking input width changes to resize the listbox overlay accordingly
-    const [inputWidth, setInputWidth] = useState()
+    const [inputWidth, setInputWidth] = React.useState()
     useSafeLayoutEffect(() => {
       if (Platform.OS === 'web') {
         const updateInputWidth = () => {
@@ -227,7 +228,7 @@ const Autocomplete = forwardRef(
      * within the list, if doesn't exist the nested item is added to the top of the list,
      * the nested item is added with an id equal "0"
      */
-    useEffect(() => {
+    React.useEffect(() => {
       if (nestedSelectedValue && !items.find((item) => item.id === 0)) {
         const tmpItems = [...items]
         tmpItems.unshift({ label: nestedSelectedValue, title: true, id: 0 })

package/src/Autocomplete/Loading.jsx

@@ -5,14 +5,17 @@ import Typography from '../Typography'
 import Box from '../Box'
 import StackView from '../StackView'
 
-const Loading = ({ label }) => (
-  <Box space={3}>
+const Loading = React.forwardRef(({ label }, ref) => (
+  <Box space={3} ref={ref}>
     <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
       <ActivityIndicator variant={{ size: 'large' }} />
       <Typography>{label}</Typography>
     </StackView>
   </Box>
-)
+))
+
+Loading.displayName = 'Loading'
+
 Loading.propTypes = { label: PropTypes.string }
 
 export default Loading

package/src/Autocomplete/Suggestions.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import A11yText from '../A11yText'
 import Typography from '../Typography'
 import Box from '../Box'
 import Listbox from '../Listbox'
 
-const Suggestions = forwardRef(
+const Suggestions = React.forwardRef(
   ({ hasResults, items = [], noResults, onClose, onSelect, parentRef }, ref) => {
     const pressableItems = items.map(({ id, ...rest }) => ({
       id,

package/src/Badge/Badge.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
@@ -32,7 +32,7 @@ const getTypographyTokens = ({ fontName, fontWeight, color }) => ({ fontName, fo
 
 const getTypographyVariant = ({ fontSize }) => ({ size: fontSizeMapping[fontSize] })
 
-const Badge = forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
+const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Badge', tokens, variant)
 
   return (

package/src/BaseProvider/HydrationContext.jsx

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
 
-const HydrationContext = createContext()
+const HydrationContext = React.createContext()
 const isSSR = typeof window === 'undefined'
 const hasWebStyleTag = () => {
   if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
@@ -18,15 +18,15 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-export const useHydrationContext = () => useContext(HydrationContext)
+export const useHydrationContext = () => React.useContext(HydrationContext)
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
 export const HydrationProvider = ({ children }) => {
-  const [hasMounted, setHasMounted] = useState(false)
-  useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false)
+  React.useEffect(() => {
     setHasMounted(true)
   }, [])
 

package/src/Box/Box.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -181,7 +181,7 @@ const setBackgroundImage = ({
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = forwardRef(
+const Box = React.forwardRef(
   (
     {
       space,
@@ -230,8 +230,8 @@ const Box = forwardRef(
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
     const backgroundImagePosition = useResponsiveProp(position, 'none')
     const backgroundImageAlign = useResponsiveProp(align, 'stretch')
-    const [backgroundImageWidth, setBackgroundImageWidth] = useState(0)
-    const [backgroundImageHeight, setBackgroundImageHeight] = useState(0)
+    const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0)
+    const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0)
     if (backgroundImage)
       content = setBackgroundImage({
         src,
@@ -244,7 +244,7 @@ const Box = forwardRef(
         content
       })
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
         Image.getSize(src, (width, height) => {
           // Only update the state if the size has changed

package/src/Button/Button.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -6,14 +6,16 @@ import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 
-const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
-  const viewport = useViewport()
-  const buttonVariant = { viewport, ...variant }
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
-  return (
-    <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
-  )
-})
+const Button = React.forwardRef(
+  ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+    return (
+      <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+    )
+  }
+)
 Button.displayName = 'Button'
 
 Button.propTypes = {

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
@@ -185,7 +185,7 @@ const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   color: iconColor || color
 })
 
-const ButtonBase = forwardRef(
+const ButtonBase = React.forwardRef(
   (
     {
       id,
@@ -303,7 +303,6 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ...buttonPropTypes
 }
-ButtonBase.defaultProps = { id: undefined }
 
 const staticStyles = StyleSheet.create({
   row: {

package/src/Button/ButtonDropdown.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Text, View } from 'react-native'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -50,7 +50,7 @@ const selectIconTokens = ({
   }
 })
 
-const ButtonDropdown = forwardRef(
+const ButtonDropdown = React.forwardRef(
   (
     {
       value,

package/src/Button/ButtonGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
@@ -30,7 +30,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const ButtonGroup = forwardRef(
+const ButtonGroup = React.forwardRef(
   (
     {
       variant,

package/src/Button/ButtonLink.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -10,7 +10,7 @@ import { useViewport } from '../ViewportProvider'
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = forwardRef(
+const ButtonLink = React.forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const viewport = useViewport()

package/src/Card/Card.jsx

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-
 import {
   useThemeTokens,
   useThemeTokensCallback,
@@ -13,9 +12,45 @@ import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
 import PressableCardBase from './PressableCardBase'
+import CheckboxButton from '../Checkbox/CheckboxButton'
+import RadioButton from '../Radio/RadioButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+}
+
+const selectInputStyle = ({ paddingTop, paddingRight }) => ({
+  position: 'absolute',
+  top: paddingTop,
+  right: paddingRight
+})
+
+const getInputProps = ({
+  id,
+  checkColor,
+  boxBackgroundColor,
+  checkBackgroundColor,
+  isControlled,
+  isChecked,
+  isInactive,
+  handleChange
+}) => ({
+  inputId: id,
+  tokens: {
+    iconColor: checkColor,
+    inputBackgroundColor: boxBackgroundColor,
+    iconBackgroundColor: checkBackgroundColor
+  },
+  isControlled,
+  isChecked,
+  inactive: isInactive,
+  handleChange
+})
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -64,8 +99,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = forwardRef(
-  ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
+const Card = React.forwardRef(
+  ({ children, tokens, variant, dataSet, onPress, id, interactiveCard, ...rest }, ref) => {
     const viewport = useViewport()
     const { themeOptions } = useTheme()
 
@@ -80,13 +115,60 @@ const Card = forwardRef(
       !enableMediaQueryStyleSheet && { viewport }
     )
 
+    const selected = interactiveCard?.variant?.selected
+    const inactive = interactiveCard?.variant?.inactive
+    const selectionType = interactiveCard?.selectionType
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
     })
     // When interactive area is present, spacing tokens should only be applied
     // to individual Card sections, not Card as a whole
-    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = selectionType
+      ? getThemeTokens()
+      : themeTokens
+
+    const {
+      inputBackgroundColor,
+      iconBackgroundColor,
+      iconColor,
+      icon,
+      inputBorderRadius,
+      inputHeight,
+      inputWidth,
+      iconSize,
+      inputShadow,
+      inputBorderWidth,
+      inputBorderColor
+    } = getThemeTokens()
+
+    const checkboxTokens = {
+      inputBackgroundColor,
+      iconBackgroundColor,
+      icon,
+      iconColor,
+      inputBorderRadius,
+      inputHeight,
+      inputWidth,
+      iconSize,
+      inputShadow,
+      inputBorderWidth,
+      inputBorderColor
+    }
+
+    const radioTokens = {
+      iconBackgroundColor,
+      iconColor,
+      containerShadow: inputShadow,
+      icon,
+      inputBackgroundColor,
+      inputBorderRadius,
+      inputSize: inputHeight,
+      checkedSize: iconSize,
+      inputBorderWidth,
+      inputBorderColor
+    }
 
     let cardStyles
     let mediaIds
@@ -103,6 +185,29 @@ const Card = forwardRef(
       cardStyles = themeTokens
     }
 
+    const renderInputPerSelectionType = (props) => {
+      switch (selectionType) {
+        case SelectionType.Checkbox:
+          return (
+            <View style={selectInputStyle(getThemeTokens())}>
+              <CheckboxButton {...props} tokens={{ ...checkboxTokens, ...props?.tokens }} />
+            </View>
+          )
+        case SelectionType.Radio:
+          return (
+            <View style={selectInputStyle(getThemeTokens())}>
+              <RadioButton {...props} tokens={{ ...radioTokens, ...props?.tokens }} />
+            </View>
+          )
+        default:
+          return null
+      }
+    }
+
+    const renderNoSelectionView = () => (
+      <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+    )
+
     return (
       <>
         <CardBase
@@ -120,13 +225,40 @@ const Card = forwardRef(
                 onPress={onPress}
                 {...selectProps(rest)}
               >
-                {interactiveCard?.body}
+                {(cardState) => {
+                  const {
+                    iconColor: checkColor,
+                    inputBackgroundColor: boxBackgroundColor,
+                    iconBackgroundColor: checkBackgroundColor
+                  } = getThemeTokens(
+                    {
+                      ...cardState,
+                      selected,
+                      interactive: true,
+                      isControl: true
+                    },
+                    interactiveCard?.tokens
+                  )
+                  return (
+                    <>
+                      {renderInputPerSelectionType(
+                        getInputProps({
+                          id,
+                          checkColor,
+                          boxBackgroundColor,
+                          checkBackgroundColor,
+                          isControlled: true,
+                          isChecked: selected || cardState?.hover,
+                          isInactive: inactive,
+                          onPress
+                        })
+                      )}
+                      {interactiveCard?.body}
+                    </>
+                  )
+                }}
               </PressableCardBase>
-              {children ? (
-                <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>
-                  {children}
-                </View>
-              ) : null}
+              {children && selectionType !== SelectionType.None ? renderNoSelectionView() : null}
             </>
           ) : (
             children
@@ -158,15 +290,23 @@ Card.propTypes = {
    * Note: This is only available when `interactiveCard` prop is used.
    */
   onPress: PropTypes.func,
+  /**
+   * Card ID.
+   */
+  id: PropTypes.string,
   /**
    * Object to set interactive card's properties
    * - body: The body of the interactive card, can be any renderable node
    * - tokens: The tokens to be used for the interactive card
+   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
+        - `radiogroup`
+        - `checkbox`
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
     body: PropTypes.node,
     tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType
   })
 }

package/src/Card/CardBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 
@@ -50,7 +50,7 @@ const selectStyles = ({
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
+const CardBase = React.forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
   const props = selectProps(rest)
   return (

package/src/Card/PressableCardBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform } from 'react-native'
 
@@ -8,7 +8,6 @@ import {
   a11yProps,
   clickProps,
   focusHandlerProps,
-  getTokenNames,
   getTokensSetPropType,
   linkProps,
   resolvePressableState,
@@ -28,7 +27,22 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 ])
 
 const tokenKeys = [
-  ...getTokenNames('Card'),
+  'flex',
+  'backgroundColor',
+  'borderColor',
+  'gradient',
+  'borderRadius',
+  'borderWidth',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'minWidth',
+  'shadow',
+  'contentAlignItems',
+  'contentJustifyContent',
+  'contentFlexGrow',
+  'contentFlexShrink',
 
   // Outer border tokens. TODO: centralise common token sets like these as part of
   // https://github.com/telus/universal-design-system/issues/782
@@ -44,7 +58,7 @@ export const selectPressableCardTokens = (tokens) =>
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = forwardRef(
+const PressableCardBase = React.forwardRef(
   (
     {
       children,