@telus-uds/components-base 1.1.0 → 1.3.1

package/lib/Link/LinkBase.js

@@ -15,10 +15,12 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _propTypes2 = require("../utils/propTypes");
+var _props = require("../utils/props");
 
 var _pressability = require("../utils/pressability");
 
+var _utils = require("../utils");
+
 var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -33,6 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
+
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -120,7 +124,6 @@ const selectIconTokens = ({
 
 const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
-  onPress,
   icon,
   iconPosition = icon ? 'left' : undefined,
   iconProps,
@@ -128,18 +131,22 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens = {},
   children,
   accessibilityRole = 'link',
-  dataSet,
-  ...props
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...props
+  } = _props.clickProps.toPressProps(rawRest);
+
   const {
     hrefAttrs,
     rest
-  } = _propTypes2.hrefAttrsProp.bundle(props);
+  } = _props.hrefAttrsProp.bundle(props);
 
-  const linkPropSet = _propTypes2.linkProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _propTypes2.linkProps.handleHref({
+    onPress: _props.linkProps.handleHref({
       href,
       onPress
     }),
@@ -153,9 +160,8 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
 
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...linkPropSet,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
     ref: ref,
-    dataSet: dataSet,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
@@ -189,10 +195,9 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
-  ..._propTypes2.linkProps.types,
-  tokens: (0, _propTypes2.getTokensPropType)('Link'),
-  variant: _propTypes2.variantProp.propType,
+LinkBase.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('Link'),
+  variant: _props.variantProp.propType,
 
   /**
    * Optional variant that may be passed down to the link's icon if there is one
@@ -214,7 +219,7 @@ LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: _propTypes.default.shape(_propTypes2.hrefAttrsProp.types)
+  hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
 };
 
 const staticStyles = _StyleSheet.default.create({
@@ -231,5 +236,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = LinkBase;
+var _default = (0, _utils.withLinkRouter)(LinkBase);
+
 exports.default = _default;

package/lib/List/List.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _ListItem = _interopRequireDefault(require("./ListItem"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
+
 const List = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   showDivider,
@@ -43,8 +43,6 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
     default: 'none'
   });
 
-  const a11y = _propTypes2.a11yProps.select(rest);
-
   const items = _react.Children.map(children, (child, index) => {
     if (child.type.name === _ListItem.default.name) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
@@ -61,12 +59,12 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,
-    ...a11y,
+    ...selectProps(rest),
     children: items
   });
 });
 List.displayName = 'List';
-List.propTypes = { ..._propTypes2.a11yProps.types,
+List.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: (0, _utils.componentPropType)('ListItem'),

package/lib/List/ListItem.js

@@ -27,6 +27,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectBulletStyles = ({
   itemBulletWidth,
   itemBulletHeight,
@@ -108,7 +110,8 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   iconSize,
   showDivider,
   children,
-  isLastItem
+  isLastItem,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
@@ -182,6 +185,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     style: [staticStyles.itemContainer, getContainerStyle()],
     accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
     children: [renderMarker(), renderItem()]
   });
 });
@@ -196,7 +200,7 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-ListItem.propTypes = {
+ListItem.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,
   children: _propTypes.default.node.isRequired,

package/lib/Modal/Modal.js

@@ -37,6 +37,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectContainerStyles = ({
   containerPaddingLeft,
   containerPaddingRight,
@@ -119,7 +121,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   maxWidth,
   tokens,
   variant,
-  copy
+  copy,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
@@ -150,6 +153,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.positioningContainer],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -182,7 +186,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Modal.displayName = 'Modal';
-Modal.propTypes = {
+Modal.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
   copy: _utils.copyPropTypes,
   isOpen: _propTypes.default.bool,

package/lib/Notification/Notification.js

@@ -33,6 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
@@ -124,7 +126,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   dismissible,
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
@@ -155,6 +158,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    ...selectProps(rest),
     children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectIconContainerStyles(themeTokens),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
@@ -178,7 +182,8 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Notification.displayName = 'Notification';
-Notification.propTypes = {
+Notification.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Content of the `Notification`.
    */

package/lib/Pagination/PageButton.js

@@ -85,5 +85,7 @@ PageButton.propTypes = { ..._utils.linkProps.types,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
 };
-var _default = PageButton;
+
+var _default = (0, _utils.withLinkRouter)(PageButton);
+
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -35,6 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectTextStyles = ({
   color,
   fontName,
@@ -55,7 +57,10 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   sideButtonVariant,
-  sideButtonTokens
+  sideButtonTokens,
+  LinkRouter,
+  linkRouterProps,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -93,13 +98,21 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
-  }), ...items.map((child, itemIndex) => {
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
+  }), ...items.map((_child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const itemLinkRouterProps = { ...linkRouterProps,
+      ...itemProps.linkRouterProps
+    };
 
     if (shouldRenderButton(itemIndex)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
         isActive: isItemActive(itemIndex)
@@ -118,11 +131,14 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
     ref: ref,
+    ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
     .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       right: gap,
@@ -132,7 +148,8 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = {
+Pagination.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.propTypes,
   children: (0, _utils.componentPropType)('PageButton'),
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,

package/lib/Pagination/SideButton.js

@@ -125,5 +125,7 @@ SideButton.propTypes = {
   copy: _utils.copyPropTypes,
   ..._utils.linkProps.types
 };
-var _default = SideButton;
+
+var _default = (0, _utils.withLinkRouter)(SideButton);
+
 exports.default = _default;

package/lib/Progress/Progress.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -25,6 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -79,12 +79,13 @@ const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectProgressStyles(themeTokens),
-    ..._propTypes2.a11yProps.select(rest),
+    ...selectProps(rest),
     children: children
   });
 });
 Progress.displayName = 'Progress';
-Progress.propTypes = {
+Progress.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */

package/lib/Progress/ProgressBar.js

@@ -17,8 +17,6 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _ProgressBarBackground = _interopRequireDefault(require("./ProgressBarBackground"));
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -31,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectBarStyles = ({
   backgroundColor,
   borderRadius,
@@ -94,7 +94,7 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(({
     throw new Error('ProgressBar: `percentage` cannot exceed 100');
   }
 
-  const accessibilityProps = {
+  const selectedProps = selectProps({
     accessibilityRole: 'progressbar',
     accessibilityValue: {
       min: 0,
@@ -102,19 +102,20 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(({
       now: percentage,
       text: `${percentage}%`
     },
-    ..._propTypes2.a11yProps.select(rest)
-  };
+    ...rest
+  });
   return percentage > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
-    ...accessibilityProps,
+    ...selectedProps,
     children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant
     })
   }) : null;
 });
 ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = {
+ProgressBar.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Optional children that can be used to customize the progress bar filling.
    */

package/lib/Radio/Radio.js

@@ -25,8 +25,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -37,8 +35,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,
@@ -165,8 +163,6 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
-  const accessibilityProps = _propTypes2.a11yProps.select(rest);
-
   const uniqueId = (0, _utils.useUniqueId)('radio');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -179,7 +175,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
       checked: isChecked,
       disabled: inactive
     },
-    ...accessibilityProps,
+    ...selectProps(rest),
     children: ({
       focused: focus,
       hovered: hover,
@@ -220,7 +216,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Radio.displayName = 'Radio';
-Radio.propTypes = { ..._propTypes2.a11yProps.propTypes,
+Radio.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.

package/lib/Radio/RadioButton.js

@@ -29,8 +29,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// TODO: roll out a standard approach to token sets
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]); // TODO: roll out a standard approach to token sets
 // https://github.com/telus/universal-design-system/issues/782
+
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
 
 const selectRadioButtonTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
@@ -99,13 +100,15 @@ const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
   isControlled,
   handleChange,
   name: inputName,
-  value
+  value,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
     checked: isChecked
   }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
       testID: "Radio-Input",
@@ -127,7 +130,7 @@ const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 RadioButton.displayName = 'RadioButton';
-RadioButton.propTypes = {
+RadioButton.propTypes = { ...selectedSystemPropTypes,
   isChecked: _propTypes.default.bool,
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     allowFunction: true

package/lib/Radio/RadioGroup.js

@@ -31,6 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -79,6 +80,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * />
  * ```
  */
+
 const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioTokens,
@@ -94,7 +96,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   readOnly,
   name: inputGroupName,
-  inactive
+  inactive,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -149,6 +152,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     inactive: inactive,
     validation: validation,
     accessibilityRole: "radiogroup",
+    ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {
       space,
       direction: 'column'
@@ -156,7 +160,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 RadioGroup.displayName = 'RadioGroup';
-RadioGroup.propTypes = {
+RadioGroup.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */

package/lib/RadioCard/RadioCard.js

@@ -33,6 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
  * with need to show additional information for each option. The whole card is interactive as one item.
@@ -68,6 +69,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
+
 const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
@@ -98,8 +100,6 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   };
 
-  const a11y = _utils.a11yProps.select(rest);
-
   const uniqueId = (0, _utils.useUniqueId)('RadioCard');
   const inputId = id ?? uniqueId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
@@ -117,7 +117,7 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
       checked: isChecked,
       disabled: inactive
     },
-    ...a11y,
+    ...selectProps(rest),
     children: cardState => {
       const {
         radioSpace,
@@ -161,7 +161,7 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 RadioCard.displayName = 'RadioCard';
-RadioCard.propTypes = { ..._utils.a11yProps.propTypes,
+RadioCard.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Content to be displayed at the top of the card alongside the radio button