@telus-uds/components-base 1.3.0 → 1.3.1

package/lib/Feedback/Feedback.js

@@ -29,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 selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
 const selectTitleTextStyles = ({
@@ -102,17 +104,15 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
     style: contentTextStyles,
     children: children
   }) : children;
-
-  const accessibilityProps = _utils.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole: validation === 'error' ? 'alert' : undefined,
     ...rest
   });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectStyles(themeTokens),
-    ...accessibilityProps,
     nativeID: id,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: space,
       children: [title !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
@@ -133,7 +133,8 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Feedback.displayName = 'Feedback';
-Feedback.propTypes = {
+Feedback.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
    */

package/lib/Fieldset/Fieldset.js

@@ -81,9 +81,7 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
 
   const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: typeof children === 'function' ? children({
-      a11yProps
-    }) : children
+    children: typeof children === 'function' ? children(a11yProps) : children
   });
   const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
   const stackedContent = (0, _StackView.getStackedContent)(orderedContent, {

package/lib/HorizontalScroll/HorizontalScroll.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]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
 
 const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
@@ -38,7 +39,7 @@ const selectHorizontalScrollTokens = (themeTokens, prefix) => (0, _utils.selectT
  * Base component that scrolls horizontally and displays left and right buttons if
  * there is content to the left and the right which can be scrolled to.
  *
- * @TODO revist `ScrollButton` after IconButton is stable.
+ * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 
 
@@ -138,9 +139,7 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
 
-  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
-
-  const a11y = _utils.a11yProps.select(rest); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance); // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
   // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
 
 
@@ -159,7 +158,7 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
         borderBottomWidth,
         borderBottomColor
       }],
-      ...a11y,
+      ...selectProps(rest),
       children: children
     }), showPreviousButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButton, {
       icon: previousIcon,
@@ -188,7 +187,7 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-HorizontalScroll.propTypes = {
+HorizontalScroll.propTypes = { ...selectedSystemPropTypes,
   itemPositions: _itemPositions.itemPositionsPropType,
   ScrollButton: _propTypes.default.elementType,
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {

package/lib/IconButton/IconButton.js

@@ -21,8 +21,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,6 +31,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 selectOuterStyle = ({
   backgroundColor,
   borderRadius,
@@ -91,7 +91,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
 
-  const a11y = _props.a11yProps.select({ ...rest,
+  const selectedProps = selectProps({ ...rest,
     accessibilityRole
   });
 
@@ -110,14 +110,14 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
     onPress: handlePress,
     hrefAttrs: hrefAttrs,
     style: getOuterStyle,
-    ...a11y,
+    ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
-          title: a11y.accessibilityLabel,
+          title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
         })
       });
@@ -125,7 +125,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 IconButton.displayName = 'IconButton';
-IconButton.propTypes = { ..._props.a11yProps.types,
+IconButton.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('IconButton'),
   icon: _propTypes.default.elementType.isRequired,

package/lib/InputLabel/InputLabel.js

@@ -31,6 +31,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 selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
 const selectHintStyles = ({
@@ -61,7 +63,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   hintId,
   tooltip,
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
@@ -69,6 +72,7 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
@@ -92,7 +96,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 InputLabel.displayName = 'InputLabel';
-InputLabel.propTypes = {
+InputLabel.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * The input label.
    */

package/lib/InputSupports/InputSupports.js

@@ -61,8 +61,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
       tooltip: tooltip,
       forId: inputId
     }), typeof children === 'function' ? children({
-      a11yProps,
-      inputId
+      inputId,
+      ...a11yProps
     }) : children, feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback,

package/lib/Link/LinkBase.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, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
+
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -129,7 +131,6 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens = {},
   children,
   accessibilityRole = 'link',
-  dataSet,
   ...rawRest
 }, ref) => {
   const {
@@ -142,7 +143,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
     rest
   } = _props.hrefAttrsProp.bundle(props);
 
-  const linkPropSet = _props.linkProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     href,
     onPress: _props.linkProps.handleHref({
@@ -159,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);
@@ -195,8 +195,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ..._props.a11yProps.types,
-  ..._props.linkProps.types,
+LinkBase.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _props.getTokensPropType)('Link'),
   variant: _props.variantProp.propType,
 

package/lib/List/List.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var _props = require("../utils/props");
-
 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 = _props.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 = { ..._props.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/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,
@@ -57,7 +59,8 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   sideButtonVariant,
   sideButtonTokens,
   LinkRouter,
-  linkRouterProps
+  linkRouterProps,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -98,7 +101,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     tokens: sideButtonTokens,
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
-  }), ...items.map((child, itemIndex) => {
+  }), ...items.map((_child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
     const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
@@ -135,6 +138,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   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,
@@ -144,7 +148,8 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = { ..._utils.withLinkRouter.propTypes,
+Pagination.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.propTypes,
   children: (0, _utils.componentPropType)('PageButton'),
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,

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 _props = require("../utils/props");
-
 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),
-    ..._props.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 _props = require("../utils/props");
-
 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}%`
     },
-    ..._props.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 _props = require("../utils/props");
-
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -37,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 selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,
@@ -163,8 +163,6 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
-  const accessibilityProps = _props.a11yProps.select(rest);
-
   const uniqueId = (0, _utils.useUniqueId)('radio');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -177,7 +175,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
       checked: isChecked,
       disabled: inactive
     },
-    ...accessibilityProps,
+    ...selectProps(rest),
     children: ({
       focused: focus,
       hovered: hover,
@@ -218,7 +216,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Radio.displayName = 'Radio';
-Radio.propTypes = { ..._props.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