@telus-uds/components-base 1.3.0 → 1.5.0

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/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 _props = require("../utils/props");
-
 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]
     },
-    ..._props.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
@@ -48,7 +49,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   items = [],
   LinkRouter,
-  linkRouterProps
+  linkRouterProps,
+  ...rest
 }, ref) => {
   const {
     space,
@@ -77,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",
@@ -113,7 +116,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = { ..._utils.withLinkRouter.PropTypes,
+Tabs.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.PropTypes,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({ ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,

package/lib/Tabs/TabsItem.js

@@ -35,6 +35,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 {
   itemPositionsPropType,
   getItemPositionLayoutHandler
@@ -148,11 +149,11 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     if (onPress) onPress(...args);
     if (openHref) openHref(...args);
   } : undefined;
-  const a11y = {
+  const selectedProps = selectProps({
     accessibilityRole,
     accessibilityState,
-    ..._utils.a11yProps.select(rest)
-  };
+    ...rest
+  });
   (0, _react.useEffect)(() => {
     // If this is selected while off-screen, scroll it into view
     if (selected) {
@@ -173,7 +174,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href: href,
     style: getPressableStyle,
     onLayout: handleLayout,
-    ...a11y,
+    ...selectedProps,
     children: pressableState => {
       const {
         space,
@@ -211,7 +212,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
+TabsItem.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('TabsItem'),
   variant: _utils.variantProp.propType,
   onPress: _propTypes.default.func,

package/lib/Tags/Tags.js

@@ -41,6 +41,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.pressProps, _props.viewProps]);
+
 const selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -116,16 +118,14 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly
   });
-
-  const a11y = _props.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     ...rest
   });
-
   const itemA11yRole = 'checkbox';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     space: space,
     direction: direction,
     tokens: stackTokens,
@@ -202,8 +202,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tags.displayName = 'Tags';
-Tags.propTypes = { ..._props.a11yProps.propTypes,
-  ..._props.pressProps.propTypes,
+Tags.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _props.getTokensPropType)('Tags'),
   variant: _props.variantProp.propType,
 

package/lib/TextInput/TextArea.js

@@ -17,9 +17,7 @@ var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _propTypes = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -29,6 +27,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.inputSupportsProps, _utils.viewProps]);
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -53,10 +52,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
+
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
@@ -76,10 +76,9 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const {
     props: supportsProps,
-    rest
-  } = _propTypes.default.select(remainingProps);
-
-  const inputProps = { ...rest,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
     variant: { ...variant,
       validation: supportsProps.validation
     },
@@ -90,19 +89,19 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     children: ({
-      a11yProps,
-      inputId
+      inputId,
+      ...props
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       ref: ref,
       ...inputProps,
-      ...a11yProps,
-      nativeID: inputId
+      nativeID: inputId,
+      ...props
     })
   });
 });
 TextArea.displayName = 'TextArea';
-TextArea.propTypes = { ..._propTypes.default.types,
-  ..._propTypes2.default,
+TextArea.propTypes = { ...selectedSystemPropTypes,
+  ..._propTypes.default,
   tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
   variant: _utils.variantProp.propType

package/lib/TextInput/TextInput.js

@@ -13,9 +13,7 @@ var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
 var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
-var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _propTypes = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -25,6 +23,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.inputSupportsProps, _utils.viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -43,17 +42,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
+
 const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const {
     props: supportsProps,
-    rest
-  } = _propTypes.default.select(remainingProps);
-
-  const inputProps = { ...rest,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
     tokens,
     variant: { ...variant,
       validation: supportsProps.validation
@@ -61,19 +60,19 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     children: ({
-      a11yProps,
-      inputId
+      inputId,
+      ...props
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       ref: ref,
       ...inputProps,
-      ...a11yProps,
-      nativeID: inputId
+      nativeID: inputId,
+      ...props
     })
   });
 });
 TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ..._propTypes.default.types,
-  ..._propTypes2.default,
+TextInput.propTypes = { ...selectedSystemPropTypes,
+  ..._propTypes.default,
   tokens: (0, _utils.getTokensPropType)('TextInput'),
   variant: _utils.variantProp.propType
 };

package/lib/TextInput/TextInputBase.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 selectInputStyles = ({
   backgroundColor,
   color,
@@ -144,7 +146,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   onMouseOut,
   tokens,
   variant = {},
-  ...remainingProps
+  ...rest
 }, ref) => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
@@ -198,7 +200,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     icon: IconComponent
   } = themeTokens;
-  const inputProps = { ...remainingProps,
+  const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -229,7 +231,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = {
+TextInputBase.propTypes = { ...selectedSystemPropTypes,
   value: _propTypes.default.string,
   height: _propTypes.default.number,
   initialValue: _propTypes.default.string,

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -23,12 +23,10 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _props = require("../utils/props");
+var _utils = require("../utils");
 
 var _input = require("../utils/input");
 
-var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,7 +35,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; }
 
-const selectButtonTokens = tokens => (0, _props.selectTokens)('Button', { ...tokens,
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+
+const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
 }); // Map and rename icon-specific tokens to name used within Icon
@@ -117,7 +117,8 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   tooltip,
   variant,
   accessibilityRole = 'switch',
-  accessibilityLabel = label
+  accessibilityLabel = label,
+  ...rest
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
@@ -159,6 +160,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
         checked: currentValue
       },
       onPress: handlePress,
+      ...selectProps(rest),
       children: buttonState => {
         const stateTokens = getTokens(buttonState);
         const IconComponent = stateTokens.icon;
@@ -188,10 +190,9 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ..._props.a11yProps.propTypes,
-  ..._props.pressProps.propTypes,
-  tokens: (0, _props.getTokensPropType)('ToggleSwitch'),
-  variant: _props.variantProp.propType,
+ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  variant: _utils.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -35,6 +35,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, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
@@ -76,13 +77,11 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly
   });
-
-  const a11y = _props.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     ...rest
   });
-
-  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
   const toggleSwitches = items.map(({
     label,
     id = label,
@@ -128,7 +127,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    ...a11y,
+    ...selectedProps,
     children: (0, _StackView.getStackedContent)(toggleSwitches, {
       space,
       direction: 'column'
@@ -136,8 +135,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
-ToggleSwitchGroup.propTypes = { ..._props.a11yProps.propTypes,
-  ..._props.pressProps.propTypes,
+ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _props.getTokensPropType)('ToggleSwitchGroup'),
   variant: _props.variantProp.propType,
 

package/lib/Tooltip/Tooltip.js

@@ -43,6 +43,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 selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -167,7 +169,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   position = 'auto',
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
@@ -280,6 +283,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,
       ref: controlRef,
@@ -312,7 +316,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
+Tooltip.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/lib/TooltipButton/TooltipButton.js

@@ -21,6 +21,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 selectInnerContainerStyles = ({
   borderRadius,
   width
@@ -49,7 +51,8 @@ const selectIconTokens = ({
 const TooltipButton = ({
   pressableState,
   tokens,
-  variant
+  variant,
+  ...rest
 }) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
@@ -57,6 +60,7 @@ const TooltipButton = ({
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
       children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -67,7 +71,8 @@ const TooltipButton = ({
   });
 };
 
-TooltipButton.propTypes = {
+TooltipButton.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used as appearances when resolving theme tokens.
    */

package/lib/Typography/Typography.js

@@ -32,6 +32,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
+
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -76,24 +78,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils2.a11yProps.select(rest)
-  };
+  const selectedProps = selectProps({ ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
       children: children
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...textProps,
-    ...a11y,
+    ...selectedProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ..._utils2.a11yProps.types,
+Typography.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 

package/lib/index.js

@@ -46,6 +46,7 @@ var _exportNames = {
   BaseProvider: true,
   ViewportProvider: true,
   useViewport: true,
+  ViewportContext: true,
   ThemeProvider: true,
   useTheme: true,
   useSetTheme: true,
@@ -304,6 +305,12 @@ Object.defineProperty(exports, "useViewport", {
     return _ViewportProvider.useViewport;
   }
 });
+Object.defineProperty(exports, "ViewportContext", {
+  enumerable: true,
+  get: function () {
+    return _ViewportProvider.ViewportContext;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {