@telus-uds/components-base 1.1.0 → 1.3.1

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`.
    */

package/lib/Skeleton/Skeleton.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 selectSkeletonStyles = ({
   color,
   radius,
@@ -68,7 +70,8 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   size,
   characters,
   lines,
-  shape = 'line'
+  shape = 'line',
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
   const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
@@ -121,11 +124,12 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
     space: themeTokens.spaceBetweenLines,
     ref: ref,
+    ...selectProps(rest),
     children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
   });
 });
 Skeleton.displayName = 'Skeleton';
-Skeleton.propTypes = {
+Skeleton.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Skeleton'),
   variant: _utils.variantProp.propType,
   size: _propTypes.default.number,

package/lib/Spacer/Spacer.js

@@ -24,9 +24,11 @@ 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; }
 
 /**
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
@@ -77,20 +79,19 @@ const selectSizeStyle = (size, direction) => ({
 const Spacer = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   direction = 'column',
-  testID,
-  dataSet
+  ...rest
 }, ref) => {
   const size = (0, _utils.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(size, direction);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    testID: testID,
     style: [staticStyles.stretch, sizeStyle],
-    dataSet: dataSet
+    ...selectProps(rest)
   });
 });
 Spacer.displayName = 'Spacer';
-Spacer.propTypes = {
+Spacer.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
@@ -104,19 +105,7 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: _propTypes.default.oneOf(['column', 'row']),
-
-  /**
-   * @ignore
-   */
-  dataSet: _propTypes.default.object,
-
-  /**
-   * @ignore
-   * In tests, the only way to select Spacers is with testID prop and getByTestId, since they have no content,
-   * no accessibility role, and there is no equivalent of nextSibling in React Native Testing Library.
-   */
-  testID: _propTypes.default.string
+  direction: _propTypes.default.oneOf(['column', 'row'])
 };
 
 const staticStyles = _StyleSheet.default.create({

package/lib/StackView/StackView.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]);
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -73,6 +74,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
+
 const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   divider,
@@ -86,10 +88,9 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
-  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils.a11yProps.select(rest),
-    ..._utils.viewProps.select(rest)
-  };
+  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
   const content = (0, _getStackedContent.default)(children, {
     direction,
     divider,
@@ -101,14 +102,13 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)(({
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...props,
+    ...selectedProps,
     style: [flexStyles, _common.staticStyles[direction]],
     children: content
   });
 });
 StackView.displayName = 'StackView';
-StackView.propTypes = { ..._utils.a11yProps.propTypes,
-  ..._utils.viewProps.types,
+StackView.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('StackView'),
   variant: _utils.variantProp.propType,
 

package/lib/StackView/StackWrapBox.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]);
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -71,10 +72,9 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils.a11yProps.select(rest),
-    ..._utils.viewProps.select(rest)
-  }; // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
 
   const gapSize = (0, _utils.useSpacingScale)(gap);
   const offsetStyle = {
@@ -91,14 +91,13 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...props,
+    ...selectedProps,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
     children: content
   });
 });
 StackWrapBox.displayName = 'StackWrapBox';
-StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
-  ..._utils.viewProps.types,
+StackWrapBox.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('StackView'),
 
   /**

package/lib/StackView/StackWrapGap.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] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * The primary implementation of StackWrap.
  *
@@ -39,6 +40,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
+
 const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   tokens,
@@ -55,10 +57,9 @@ const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils.a11yProps.select(rest),
-    ..._utils.viewProps.select(rest)
-  };
+  const selectedProps = selectProps({ ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
   const size = (0, _utils.useSpacingScale)(space);
   const gapStyle = {
     gap: size
@@ -69,7 +70,7 @@ const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...props,
+    ...selectedProps,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
     children: content
   });

package/lib/StackView/getStackedContent.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  */
 
 /**

package/lib/StepTracker/Step.js

@@ -27,6 +27,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectCompletedIconTokens = ({
   completedIconColor,
   completedIconSize
@@ -149,7 +151,8 @@ const Step = ({
   status = 0,
   stepCount = 0,
   stepIndex = 0,
-  tokens
+  tokens,
+  ...rest
 }) => {
   const {
     completedIcon,
@@ -170,7 +173,8 @@ const Step = ({
     },
     accessibilityLabel: label,
     accessibilityLevel: 2,
-    accessibilityCurrent: status === stepIndex ? 'true' : 'false',
+    accessibilityCurrent: status === stepIndex,
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: "row",
       space: 0,
@@ -208,7 +212,7 @@ const Step = ({
   });
 };
 
-Step.propTypes = {
+Step.propTypes = { ...selectedSystemPropTypes,
   label: _propTypes.default.string.isRequired,
   name: _propTypes.default.string.isRequired,
   status: _propTypes.default.number.isRequired,

package/lib/StepTracker/StepTracker.js

@@ -21,8 +21,6 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _propTypes2 = require("../utils/propTypes");
-
 var _ViewportProvider = require("../ViewportProvider");
 
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
@@ -39,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 = ({
   containerPaddingBottom,
   containerPaddingLeft,
@@ -126,7 +126,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const stepTrackerLabel = getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]);
   if (!steps.length) return null;
-  const accessibilityProps = {
+  const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
     accessibilityLevel: 1,
     accessibilityRole: 'progressbar',
@@ -136,12 +136,12 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
       now: current,
       text: steps[current]
     },
-    ..._propTypes2.a11yProps.select(rest)
-  };
+    ...rest
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: selectContainerStyles(themeTokens),
-    ...accessibilityProps,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -167,7 +167,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 StepTracker.displayName = 'StepTracker';
-StepTracker.propTypes = {
+StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: _propTypes.default.number,
   copy: _propTypes.default.oneOf(['en', 'fr']),
   dictionary: _propTypes.default.shape({

package/lib/Tabs/Tabs.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]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -46,7 +47,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
-  items = []
+  items = [],
+  LinkRouter,
+  linkRouterProps,
+  ...rest
 }, ref) => {
   const {
     space,
@@ -75,6 +79,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
     tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
     accessibilityRole: "tablist",
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
       space: space,
       direction: "row",
@@ -82,7 +87,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
         href,
         label,
         id,
-        ref: itemRef
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps
       }, index) => {
         const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
@@ -98,6 +105,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          LinkRouter: ItemLinkRouter,
+          linkRouterProps: { ...linkRouterProps,
+            ...itemLinkRouterProps
+          },
           children: label
         }, itemId);
       })
@@ -105,8 +116,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+Tabs.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.PropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,