@telus-uds/components-base 1.2.0 → 1.4.0

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

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -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 selectContainerStyles = tokens => ({ ...tokens
 });
 
@@ -124,7 +124,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, {
@@ -140,10 +141,11 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   }
 
   const textStyles = selectTextStyles(themeTokens);
-  const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-    style: textStyles,
-    children: children
-  }) : children;
+  const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+    textStyles
+  }) : children, {
+    style: textStyles
+  });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent
@@ -155,6 +157,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 +181,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 _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,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 = _propTypes2.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 = { ..._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

package/lib/RadioCard/RadioCardGroup.js

@@ -29,6 +29,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 Cards that behave as a radio button group. Use when users select a single choice from mutually
  * exclusive options with need to show additional information for each option. The whole cards are each
@@ -79,6 +80,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * />
  * ```
  */
+
 const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioCardTokens,
@@ -94,7 +96,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   readOnly,
   name: inputGroupName,
-  inactive
+  inactive,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -128,9 +131,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     inactive: inactive || readOnly,
     validation: validation,
     accessibilityRole: "radiogroup",
-    children: ({
-      a11yProps
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {
+    ...selectProps(rest),
+    children: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {
       space: space,
       accessibilityRole: "radiogroup",
       children: items.map(({
@@ -156,7 +158,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
           tokens: radioCardTokens,
           variant: variant,
           readOnly: readOnly,
-          ...a11yProps,
+          ...props,
           children: content
         }, cardId);
       })
@@ -164,7 +166,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 RadioCardGroup.displayName = 'RadioCardGroup';
-RadioCardGroup.propTypes = {
+RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */

package/lib/Search/Search.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 selectInputTokens = ({
   searchTokens,
   buttonTokens,
@@ -97,7 +99,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   accessibilityLabel,
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [value, setValue] = (0, _react.useState)(initialValue);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
@@ -138,6 +141,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   const isEmpty = value === '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       ref: ref,
       tokens: appearances => selectInputTokens({
@@ -186,7 +190,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = {
+Search.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.

package/lib/Select/Select.js

@@ -23,8 +23,6 @@ var _Picker = _interopRequireDefault(require("./Picker"));
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
-var _propTypes2 = _interopRequireDefault(require("../InputSupports/propTypes"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -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.inputSupportsProps, _utils.viewProps]);
+
 const selectInputStyles = ({
   backgroundColor,
   color,
@@ -221,9 +221,9 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleMouseOut = () => setIsHovered(false);
 
   const {
-    props: supportsProps
-  } = _propTypes2.default.select(rest);
-
+    props: supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Select', tokens, variant, {
     focus: isFocused,
     hover: isHovered,
@@ -235,9 +235,10 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
     validationIcon: ValidationIconComponent
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    ...selectedProps,
     children: ({
-      a11yProps,
-      inputId
+      inputId,
+      ...props
     }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: selectOuterBorderStyles(themeTokens),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
@@ -254,7 +255,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
           label: placeholder,
           value: ''
         } : undefined,
-        ...a11yProps,
+        ...props,
         nativeID: inputId,
         testID: testID,
         children: children
@@ -277,7 +278,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Select.displayName = 'Select';
-Select.propTypes = { ..._propTypes2.default.types,
+Select.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * Initial value for the uncontrolled version.

package/lib/SideNav/Item.js

@@ -25,6 +25,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.linkProps, _utils.viewProps]);
+
 function selectItemStyles({
   backgroundColor,
   borderColor,
@@ -78,14 +80,13 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)(({
     rest
   } = _utils.hrefAttrsProp.bundle(props);
 
-  const linkPropSet = _utils.linkProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     href,
     onPress: handlePress,
     hrefAttrs,
     ...rest
   });
-
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', tokens, variant);
 
   const getAppearanceState = ({
@@ -101,11 +102,10 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: getPressableStyle,
-    ...linkPropSet,
     accessibilityState: {
       selected: isActive
     },
-    testID: testID,
+    ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens(getAppearanceState(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
@@ -116,7 +116,8 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Item.displayName = 'Item';
-Item.propTypes = {
+Item.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Text content of the `Item`.
    */
@@ -154,8 +155,7 @@ Item.propTypes = {
    */
   isExpanded: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType,
-  ..._utils.a11yProps.types
+  variant: _utils.variantProp.propType
 };
 var _default = Item;
 exports.default = _default;

package/lib/SideNav/SideNav.js

@@ -34,20 +34,22 @@ function selectBorderStyles(tokens) {
     borderBottomColor: tokens.borderColor
   };
 }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  ## Usage Criteria
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
 
-
 const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant = {},
   tokens,
   accordion = true,
   itemTokens,
-  groupTokens
+  groupTokens,
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = (0, _react.useState)({
@@ -70,6 +72,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     maxOpen: accordion ? 1 : null,
     style: selectBorderStyles(themeTokens),
+    ...selectProps(rest),
     children: ({
       openIds,
       onToggle
@@ -128,7 +131,8 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 SideNav.displayName = 'SideNav';
-SideNav.propTypes = {
+SideNav.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
    */