@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/Select/Select.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -181,7 +181,7 @@ const selectCustomFeedbackStyles = _ref7 => {
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -205,10 +205,10 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
     onChange,
     readOnly
   });
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
   const {

package/lib-module/SideNav/Item.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
@@ -39,7 +39,7 @@ function selectItemStyles(_ref) {
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,

package/lib-module/SideNav/ItemContent.js

@@ -21,7 +21,7 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = _ref => {
+const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
@@ -30,12 +30,14 @@ const ItemContent = _ref => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
       tokens: typographyTokens,
+      ref: ref,
       children: children
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]
     })]
   });
-};
+});
+ItemContent.displayName = 'ItemContent';
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node

package/lib-module/SideNav/ItemsGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ItemContent from './ItemContent';
 import ExpandCollapse from '../ExpandCollapse';
@@ -16,7 +16,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label,

package/lib-module/SideNav/SideNav.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
 import Item from './Item';
@@ -21,7 +21,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     variant = {},
@@ -32,7 +32,7 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const themeTokens = useThemeTokens('SideNav', tokens, variant);
-  const [active, setActive] = useState({
+  const [active, setActive] = React.useState({
     groupId: undefined,
     itemId: undefined
   });

package/lib-module/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -51,7 +51,7 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,

package/lib-module/SkipLink/SkipLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -105,7 +105,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,

package/lib-module/Spacer/Spacer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
@@ -56,7 +56,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',

package/lib-module/StackView/StackView.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Divider from '../Divider';
@@ -52,7 +52,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * 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__*/forwardRef((_ref, ref) => {
+const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 0,
     divider,

package/lib-module/StackView/StackWrap.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
 import StackWrapBox from './StackWrapBox';
@@ -22,8 +22,8 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = useState(false);
+const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
   const {
     space
   } = props;

package/lib-module/StackView/StackWrapBox.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
@@ -33,7 +33,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,

package/lib-module/StackView/StackWrapGap.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StackWrapBox from './StackWrapBox';
 import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
@@ -19,7 +19,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps]);
  * - 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__*/forwardRef((_ref, ref) => {
+const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,

package/lib-module/StackView/getStackedContent.js

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react';
+import React from 'react';
 import Box from '../Box';
 import Divider from '../Divider';
 import Spacer from '../Spacer';
@@ -46,7 +46,7 @@ const getStackedContent = (children, _ref) => {
 
   // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
-  const validChildren = Children.toArray(topLevelChildren).filter(Boolean);
+  const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
     const item = box ?
@@ -112,10 +112,10 @@ const getStackedContent = (children, _ref) => {
 const unpackFragment = child => {
   var _child$props;
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment);
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
   // When a fragment is found, unpack its children to the top level and check them
-  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;

package/lib-module/StepTracker/Step.js

@@ -155,7 +155,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = _ref8 => {
+const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     label,
     name,
@@ -189,6 +189,7 @@ const Step = _ref8 => {
     accessibilityLabel: label,
     accessibilityLevel: 2,
     accessibilityCurrent: status === stepIndex,
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsxs(StackView, {
       direction: "row",
@@ -226,7 +227,8 @@ const Step = _ref8 => {
       })]
     })]
   });
-};
+});
+Step.displayName = 'Step';
 Step.propTypes = {
   ...selectedSystemPropTypes,
   label: PropTypes.string.isRequired,

package/lib-module/StepTracker/StepTracker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
@@ -85,7 +85,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     current = 0,
     copy = 'en',

package/lib-module/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
@@ -43,7 +43,7 @@ const getStackViewTokens = variant => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     itemTokens,
@@ -70,7 +70,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange
   });
   const [itemPositions, isPositioningReady] = useItemPositions();
-  useHash(useCallback((hash, event) => {
+  useHash(React.useCallback((hash, event) => {
     const hashItem = hash && items.find(_ref2 => {
       let {
         href

package/lib-module/Tabs/TabsItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
@@ -80,7 +80,7 @@ const selectContainerStyles = _ref3 => {
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     href,
     variant,
@@ -135,7 +135,7 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     accessibilityState,
     ...rest
   });
-  useEffect(() => {
+  React.useEffect(() => {
     // If this is selected while off-screen, scroll it into view
     if (selected) {
       const position = itemPositions.positions[index];

package/lib-module/Tags/Tags.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
@@ -55,7 +55,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
 };
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Tags = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     variant,
     tokens,

package/lib-module/TextInput/TextArea.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
@@ -32,14 +32,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
+const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
     ...rest
   } = _ref;
   const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = useState();
+  const [inputHeight, setInputHeight] = React.useState();
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {

package/lib-module/TextInput/TextInput.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
@@ -27,7 +27,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * 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__*/forwardRef((_ref, ref) => {
+const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     nativeID,

package/lib-module/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -175,7 +175,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
+const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -198,8 +198,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     onKeyPress,
     ...rest
   } = _ref7;
-  const [isFocused, setIsFocused] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
   const handleFocus = event => {
     setIsFocused(true);
     if (typeof onFocus === 'function') onFocus(event);
@@ -208,7 +208,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     setIsFocused(false);
     if (typeof onBlur === 'function') onBlur(event);
   };
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = event => {
     setIsHovered(true);
     if (typeof onMouseOver === 'function') onMouseOver(event);
@@ -217,7 +217,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     setIsHovered(false);
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
-  const defaultRef = useRef();
+  const defaultRef = React.useRef();
   const inputRef = ref ?? defaultRef;
   const {
     currentValue,
@@ -239,7 +239,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   const isNumeric = numeric || type === 'card' || type === 'number';
   const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-  useEffect(() => {
+  React.useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
       // which a `pattern` user must provide anyway to call .checkValidity() on the element.

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,11 +1,11 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { validateThemeTokensVersion } from './utils';
 import responsiveProps from '../utils/props/responsiveProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError);
+export const ThemeContext = /*#__PURE__*/React.createContext(uninitialisedError);
+export const ThemeSetterContext = /*#__PURE__*/React.createContext(uninitialisedError);
 
 // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
 // This should change in future major releases to become "opt-in" legacy support.
@@ -24,8 +24,8 @@ const ThemeProvider = _ref => {
     defaultTheme,
     themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = useState(defaultTheme);
-  useEffect(() => {
+  const [theme, setTheme] = React.useState(defaultTheme);
+  React.useEffect(() => {
     if (theme.metadata.name !== defaultTheme.metadata.name) {
       setTheme(defaultTheme);
     }

package/lib-module/Timeline/Timeline.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
@@ -93,7 +93,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = /*#__PURE__*/forwardRef((_ref7, ref) => {
+const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     tokens,
     variant = {},

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -119,7 +119,7 @@ const selectLabelTokens = _ref8 => {
     lineHeight: labelLineHeight
   };
 };
-const ToggleSwitch = /*#__PURE__*/forwardRef((_ref9, ref) => {
+const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     copy = 'en',
     value,

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
@@ -11,7 +11,7 @@ import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, s
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     variant,

package/lib-module/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -110,7 +110,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipBut
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     content,
@@ -123,9 +123,9 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     nativeID,
     ...rest
   } = _ref6;
-  const [isOpen, setIsOpen] = useState(false);
-  const arrowRef = useRef();
-  const [tooltipDimensions, setTooltipDimensions] = useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const arrowRef = React.useRef();
+  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
   const positions = {
     auto: undefined,
     // Auto needs to specifically bet set to undefined
@@ -195,7 +195,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       });
     }
   };
-  useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) {
       setTooltipDimensions(null);
     }

package/lib-module/Tooltip/Tooltip.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
@@ -139,7 +139,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipBut
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     content,
@@ -152,12 +152,12 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     nativeID,
     ...rest
   } = _ref6;
-  const [isOpen, setIsOpen] = useState(false);
-  const controlRef = useRef();
-  const [controlLayout, setControlLayout] = useState(null);
-  const [tooltipDimensions, setTooltipDimensions] = useState(null);
-  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));
-  const [tooltipPosition, setTooltipPosition] = useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const controlRef = React.useRef();
+  const [controlLayout, setControlLayout] = React.useState(null);
+  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
+  const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'));
+  const [tooltipPosition, setTooltipPosition] = React.useState(null);
   const getCopy = useCopy({
     dictionary,
     copy
@@ -167,7 +167,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     arrowWidth,
     arrowOffset
   } = themeTokens;
-  useEffect(() => {
+  React.useEffect(() => {
     const subscription = Dimensions.addEventListener('change', _ref7 => {
       let {
         window
@@ -213,7 +213,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       });
     }
   };
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       controlRef.current.measureInWindow((x, y, width, height) => {
         setControlLayout({
@@ -229,10 +229,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       setTooltipPosition(null);
     }
   }, [isOpen]);
-  useEffect(() => {
+  React.useEffect(() => {
     setIsOpen(false);
   }, [windowDimensions]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
       return;
     }

package/lib-module/TooltipButton/TooltipButton.js

@@ -38,7 +38,7 @@ const selectIconTokens = _ref2 => {
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = _ref3 => {
+const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
@@ -54,6 +54,7 @@ const TooltipButton = _ref3 => {
       margin: -themeTokens.outerBorderWidth
     }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
+    ref: ref,
     children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
       children: IconComponent && /*#__PURE__*/_jsx(Icon, {
@@ -62,7 +63,8 @@ const TooltipButton = _ref3 => {
       })
     })
   });
-};
+});
+TooltipButton.displayName = 'TooltipButton';
 const staticStyles = StyleSheet.create({
   bubblePointerEvents: {
     ...Platform.select({