@telus-uds/components-base 1.2.0 → 1.4.0

package/lib-module/utils/withLinkRouter.js

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+/**
+ * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
+ * This may be used to provide custom wrappers for integrations with third party libraries.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
+ * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
+ * ```
+ */
+
+
+const withLinkRouter = Component => {
+  const wrappedComponent = /*#__PURE__*/forwardRef(({
+    LinkRouter,
+    linkRouterProps,
+    ...props
+  }, ref) => {
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/_jsx(LinkRouter, {
+      linkRouterProps: linkRouterProps,
+      Component: Component,
+      ref: ref,
+      ...props
+    });
+  }); // Ensure the returned component has appropriate outer properties set:
+
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+
+  const {
+    displayName,
+    name,
+    propTypes,
+    ...otherProperties
+  } = Component; // Apply unique component name as a displayName
+
+  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+
+  wrappedComponent.propTypes = { ...Component.propTypes,
+    ...withLinkRouter.propTypes
+  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+
+  Object.keys(otherProperties).forEach(key => {
+    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key];
+    }
+  });
+  return wrappedComponent;
+};
+
+withLinkRouter.propTypes = {
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
+};
+export default withLinkRouter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -9,7 +9,9 @@
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "UNLICENSED",
   "main": "lib/index.js",
+  "module": "lib-module/index.js",
   "react-native": "src/index.js",
+  "sideEffects": false,
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -24,7 +26,9 @@
     "lint:fix": "telus-standard --fix",
     "format": "prettier --write .",
     "build": "yarn build:code && yarn build:docs",
-    "build:code": "babel src -d lib",
+    "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:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
     "storybook": "start-storybook",
     "dev": "yarn build:code --watch",
@@ -46,7 +50,7 @@
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.0",
+    "@telus-uds/browserslist-config": "^1.0.1",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
@@ -54,8 +58,8 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.1-prerelease.0",
-    "@telus-uds/system-theme-tokens": "^1.2.0",
+    "@telus-uds/system-constants": "^1.0.2",
+    "@telus-uds/system-theme-tokens": "^1.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/A11yText/index.jsx

@@ -2,7 +2,9 @@ import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
@@ -11,7 +13,7 @@ import { a11yProps } from '../utils/propTypes'
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
 const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
-  const a11y = a11yProps.select({
+  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.
     // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
@@ -21,12 +23,14 @@ const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   })
-  return <View style={styles.invisible} ref={ref} {...a11y} />
+
+  return <View style={styles.invisible} ref={ref} {...selectedProps} />
 })
 
 A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
+  ...selectedSystemPropTypes,
   text: PropTypes.string.isRequired,
   heading: PropTypes.bool
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
+import { useA11yInfo } from '../A11yInfoProvider'
 
 const SVG_RADIUS = 20
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI
@@ -20,50 +21,61 @@ 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 }, ref) => (
-  <svg
-    ref={ref}
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 48 48"
-    aria-valuetext={label}
-    role="progressbar"
-    aria-busy={true}
-  >
-    <g>
-      <animateTransform
-        attributeName="transform"
-        type="rotate"
-        values={`-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`}
-        {...animationProps}
-      />
-      <circle
-        fill="none"
-        stroke={color}
-        strokeWidth={(thickness * 48) / size}
-        strokeLinecap="round"
-        cx="24"
-        cy="24"
-        r="20"
-        strokeDasharray={[MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
-        strokeDashoffset={0}
-      >
-        <animate
-          attributeName="stroke-dashoffset"
-          values={`0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`}
-          {...animationProps}
-          {...bezierProps}
-        />
-        <animate
-          attributeName="stroke-dasharray"
-          values={`${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`}
-          {...animationProps}
-          {...bezierProps}
-        />
-      </circle>
-    </g>
-  </svg>
-))
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+  const { reduceMotionEnabled } = useA11yInfo()
+  return (
+    <svg
+      ref={ref}
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 48 48"
+      aria-valuetext={label}
+      role="progressbar"
+      aria-busy={true}
+    >
+      <g>
+        {reduceMotionEnabled ? null : (
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values={`-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`}
+            {...animationProps}
+          />
+        )}
+        <circle
+          fill="none"
+          stroke={color}
+          strokeWidth={(thickness * 48) / size}
+          strokeLinecap="round"
+          cx="24"
+          cy="24"
+          r="20"
+          strokeDasharray={
+            reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]
+          }
+          strokeDashoffset={0}
+        >
+          {reduceMotionEnabled ? null : (
+            <>
+              <animate
+                attributeName="stroke-dashoffset"
+                values={`0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`}
+                {...animationProps}
+                {...bezierProps}
+              />
+              <animate
+                attributeName="stroke-dasharray"
+                values={`${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`}
+                {...animationProps}
+                {...bezierProps}
+              />
+            </>
+          )}
+        </circle>
+      </g>
+    </svg>
+  )
+})
 Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,12 +1,14 @@
 import React, { forwardRef } 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'
 
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
 const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
+  const { reduceMotionEnabled } = useA11yInfo()
 
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
@@ -17,16 +19,19 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       toValue: 1,
       isInteraction: false
     })
-    Animated.loop(loop).start()
-  }, [timer])
+
+    if (!reduceMotionEnabled) Animated.loop(loop).start()
+    else loop.stop()
+  }, [timer, reduceMotionEnabled])
 
   const frames = (60 * DURATION) / 1000
   const easing = Easing.bezier(...BEZIER)
   const containerStyle = {
     width: size,
-    height: size / 2,
+    height: size / (reduceMotionEnabled ? 1.5 : 2),
     overflow: 'hidden'
   }
+  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]
 
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
@@ -39,7 +44,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       accessibilityState={{ busy: true }}
     >
       <Animated.View style={[{ width: size, height: size }]} collapsable={false}>
-        {[0, 1].map((index) => {
+        {animationFrequency.map((index) => {
           const inputRange = Array.from(
             new Array(frames),
             (_, frameIndex) => frameIndex / (frames - 1)
@@ -59,8 +64,16 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
 
           const layerStyle = {
             width: size,
-            height: size,
-            transform: [
+            height: size
+          }
+
+          const viewportStyle = {
+            width: size,
+            height: size
+          }
+
+          if (!reduceMotionEnabled) {
+            layerStyle.transform = [
               {
                 rotate: timer.interpolate({
                   inputRange: [0, 1],
@@ -68,12 +81,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
                 })
               }
             ]
-          }
-
-          const viewportStyle = {
-            width: size,
-            height: size,
-            transform: [
+            viewportStyle.transform = [
               {
                 translateY: index ? -size / 2 : 0
               },

package/src/ActivityIndicator/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils/propTypes'
+import { getTokensPropType, variantProp } from '../utils/props'
 
 import Spinner from './Spinner'
 

package/src/Box/Box.jsx

@@ -4,19 +4,23 @@ import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
-  spacingProps,
-  variantProp,
+  getA11yPropsFromHtmlTag,
   getTokensPropType,
+  layoutTags,
+  selectSystemProps,
+  spacingProps,
   useSpacingScale,
-  viewProps,
-  getA11yPropsFromHtmlTag,
-  layoutTags
+  variantProp,
+  viewProps
 } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../utils/propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
 const selectBoxStyles = (tokens) => {
@@ -121,8 +125,7 @@ const Box = forwardRef(
   ) => {
     const props = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
+      ...selectProps(rest)
     }
 
     const themeTokens = useThemeTokens('Box', tokens, variant)
@@ -154,8 +157,7 @@ const Box = forwardRef(
 Box.displayName = 'Box'
 
 Box.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
   /**

package/src/Button/Button.jsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 
 const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
   const getTokens = useThemeTokensCallback('Button', tokens, variant)

package/src/Button/ButtonBase.jsx

@@ -11,10 +11,14 @@ import {
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
+  selectSystemProps,
+  viewProps,
   wrapStringsInText,
   withLinkRouter
 } from '../utils'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
@@ -144,7 +148,6 @@ const ButtonBase = forwardRef(
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
-      dataSet,
       ...rawRest
     },
     ref
@@ -154,13 +157,13 @@ const ButtonBase = forwardRef(
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
 
-    const a11y = a11yProps.select(rest)
+    const systemProps = selectProps(rest)
 
     const getPressableStyle = (pressableState) => {
       const themeTokens = resolveButtonTokens(pressableState)
       return [
         staticStyles.row,
-        selectWebOnlyStyles(inactive, themeTokens, a11y),
+        selectWebOnlyStyles(inactive, themeTokens, systemProps),
         selectOuterContainerStyles(themeTokens),
         selectOuterWidthStyles(themeTokens)
       ]
@@ -173,9 +176,8 @@ const ButtonBase = forwardRef(
         onPress={linkProps.handleHref({ href, onPress })}
         style={getPressableStyle}
         disabled={inactive}
-        dataSet={dataSet}
         hrefAttrs={hrefAttrs}
-        {...a11y}
+        {...systemProps}
       >
         {(pressableState) => {
           const themeTokens = resolveButtonTokens(pressableState)
@@ -224,9 +226,8 @@ ButtonBase.displayName = 'ButtonBase'
 
 ButtonBase.propTypes = {
   id: PropTypes.string,
-  ...a11yProps.types,
-  ...buttonPropTypes,
-  ...linkProps.types
+  ...selectedSystemPropTypes,
+  ...buttonPropTypes
 }
 ButtonBase.defaultProps = { id: undefined }
 

package/src/Button/ButtonGroup.jsx

@@ -10,13 +10,17 @@ import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   pressProps,
-  variantProp,
   getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const ButtonGroup = forwardRef(
   (
     {
@@ -51,14 +55,20 @@ const ButtonGroup = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const systemProps = selectProps({
       accessibilityRole,
       ...rest
     })
-    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
+    const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
     return (
-      <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens} ref={ref}>
+      <StackWrap
+        {...systemProps}
+        space={space}
+        direction={direction}
+        tokens={stackTokens}
+        ref={ref}
+      >
         {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
           const isSelected = currentValues.includes(id)
 
@@ -101,8 +111,7 @@ const ButtonGroup = forwardRef(
 ButtonGroup.displayName = 'ButtonGroup'
 
 ButtonGroup.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
   /**

package/src/Button/ButtonLink.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**

package/src/Button/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-import { variantProp } from '../utils/propTypes'
+import { variantProp, getTokensPropType } from '../utils/props'
 import A11yText from '../A11yText'
 
 export const textAndA11yText = ABBPropTypes.childrenOf(
@@ -8,6 +8,7 @@ export const textAndA11yText = ABBPropTypes.childrenOf(
 )
 
 const buttonPropTypes = {
+  tokens: getTokensPropType('Button'),
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/src/Card/Card.jsx

@@ -4,9 +4,11 @@ import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -58,18 +60,19 @@ import CardBase from './CardBase'
 const Card = ({ children, tokens, variant, dataSet, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+
   return (
-    <CardBase tokens={themeTokens} dataSet={dataSet} {...rest}>
+    <CardBase tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
       {children}
     </CardBase>
   )
 }
 
 Card.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType,
-  ...a11yProps.types
+  variant: variantProp.propType
 }
 
 export default Card

package/src/Card/CardBase.jsx

@@ -4,7 +4,9 @@ import { View } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
-import { a11yProps, viewProps } from '../utils/propTypes'
+import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // Ensure explicit selection of tokens
 const selectStyles = ({
@@ -39,7 +41,7 @@ const selectStyles = ({
  */
 const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
-  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
+  const props = selectProps(rest)
 
   return (
     <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
@@ -50,10 +52,9 @@ const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
 CardBase.displayName = 'CardBase'
 
 CardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
-  tokens: getTokensPropType('Card'),
-  ...viewProps.types,
-  ...a11yProps.types
+  tokens: getTokensPropType('Card')
 }
 
 export default CardBase