@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -4,7 +4,7 @@ import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
 import { variantProp } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselStepTracker = _ref => {
+const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -33,6 +33,7 @@ const CarouselStepTracker = _ref => {
   return /*#__PURE__*/_jsx(StackView, {
     direction: "row",
     tokens: stackViewTokens,
+    ref: ref,
     children: /*#__PURE__*/_jsx(StepTracker, {
       current: activeIndex,
       steps: steps,
@@ -45,7 +46,8 @@ const CarouselStepTracker = _ref => {
       variant: variant
     })
   });
-};
+});
+CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
   variant: variantProp.propType
 };

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,5 +1,5 @@
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
 import Carousel from '../Carousel';
@@ -8,7 +8,7 @@ import Carousel from '../Carousel';
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items,
     refocus = true,

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import StackView from '../../StackView';
@@ -9,7 +9,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -17,13 +17,13 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
     activeIndex,
     goTo
   } = useCarousel();
-  const nextFocusRef = useRef();
-  const firstTabRef = useRef();
-  const [isInverse, setIsInverse] = useState(false);
+  const nextFocusRef = React.useRef();
+  const firstTabRef = React.useRef();
+  const [isInverse, setIsInverse] = React.useState(false);
   const lastTabSelected = activeIndex === items.length - 1;
 
   // Get current select tab style
-  useEffect(() => {
+  React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
   }, [items, activeIndex]);

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
@@ -60,7 +60,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -73,7 +73,7 @@ const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
   // Don't allow disabled to be set while focus is true else focus state gets locked `true`
   // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const disabled = (inactive || selected) && !isFocused;
   const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
   const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {

package/lib-module/Carousel/CarouselThumbnail.js

@@ -27,7 +27,7 @@ const selectPressableTokens = _ref => {
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = _ref2 => {
+const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityLabel,
     alt,
@@ -93,6 +93,7 @@ const CarouselThumbnail = _ref2 => {
         outline: 'none'
       }] : styles.nonSelected];
     },
+    ref: ref,
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,
       accessibilityLabel: accessibilityLabel ?? alt,
@@ -101,7 +102,8 @@ const CarouselThumbnail = _ref2 => {
       title: thumbnailTitle
     })
   }, src);
-};
+});
+CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
   accessibilityLabel: PropTypes.string,
   alt: PropTypes.string,

package/lib-module/Carousel/CarouselThumbnailNavigation.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 { useCarousel } from './CarouselContext';
@@ -7,7 +7,7 @@ import { StackWrap } from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselThumbnailNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;

package/lib-module/Checkbox/Checkbox.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 Pressable from "react-native-web/dist/exports/Pressable";
@@ -128,7 +128,7 @@ const selectFeedbackTokens = _ref4 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     checked,
     defaultChecked,

package/lib-module/Checkbox/CheckboxButton.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";
@@ -60,7 +60,7 @@ export const selectCheckboxTokens = (themeTokens, prefix) => selectTokens(tokenK
  * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
-const CheckboxButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const CheckboxButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     isChecked,
     tokens,
@@ -77,7 +77,7 @@ const CheckboxButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const {
     icon: IconComponent,
     ...stateTokens
-  } = useThemeTokens('Checkbox', {}, {
+  } = useThemeTokens('Checkbox', tokens, {
     checked: isChecked
   });
   const iconTokens = selectIconTokens(stateTokens);

package/lib-module/Checkbox/CheckboxGroup.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 { useViewport } from '../ViewportProvider';
@@ -58,7 +58,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     radioTokens,

package/lib-module/Checkbox/CheckboxInput.js

@@ -1,19 +1,19 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * On Web we need to include an actual input but hide it.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CheckboxInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CheckboxInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
-    disabled,
+    disabled = false,
     id,
     isControlled,
     name,
-    onChange,
+    onChange = () => {},
     value
   } = _ref;
   const handleClick = event => {
@@ -47,12 +47,4 @@ CheckboxInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string
 };
-CheckboxInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
 export default CheckboxInput;

package/lib-module/CheckboxCard/CheckboxCard.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";
@@ -11,7 +11,7 @@ import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const CheckboxCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CheckboxCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
@@ -9,7 +9,7 @@ import Fieldset from '../Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const CheckboxCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CheckboxCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,

package/lib-module/ColourToggle/ColourBubble.js

@@ -1,10 +1,11 @@
-import React, { forwardRef, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { resolvePressableTokens } from '../utils/pressability';
 import { applyShadowToken } from '../ThemeProvider';
+import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
@@ -61,7 +62,7 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     tokens = {},
     id,
@@ -74,7 +75,7 @@ const ColourBubble = /*#__PURE__*/forwardRef((_ref4, ref) => {
     selected: isSelected
   });
   const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
-  const themeTokens = useMemo(() => tokens(), [tokens]);
+  const themeTokens = React.useMemo(() => tokens(), [tokens]);
   return /*#__PURE__*/_jsx(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
@@ -98,7 +99,7 @@ ColourBubble.propTypes = {
   /**
    * Colour toggle tokens callback.
    */
-  tokens: PropTypes.func,
+  tokens: getTokensPropType('ColourToggle'),
   /**
    * ID of each colour bubble
    */

package/lib-module/ColourToggle/ColourToggle.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 PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -9,7 +9,7 @@ import ColourBubble from './ColourBubble';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const ColourToggle = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -18,7 +18,7 @@ const ColourToggle = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange,
     ...rest
   } = _ref;
-  const [currentColourId, setCurrentColourId] = useState(defaultColourId);
+  const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
   const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant);
   const {
     space

package/lib-module/Divider/Divider.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 StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -52,7 +52,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Divider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     vertical = false,

package/lib-module/ExpandCollapse/Accordion.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ExpandCollapse from './ExpandCollapse';
 
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Accordion = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
+const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
   ref: ref,
   ...props,
   maxOpen: 1

package/lib-module/ExpandCollapse/Control.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -75,7 +75,7 @@ function selectIconTokens(tokens) {
     size: tokens.iconSize
   };
 }
-const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,

package/lib-module/ExpandCollapse/ExpandCollapse.js

@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
@@ -20,7 +21,7 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -45,16 +46,19 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
   return /*#__PURE__*/_jsx(View, {
+    style: staticStyles.container,
     ref: ref,
-    style: selectBorderStyles(themeTokens),
     ...selectProps(rest),
-    children: typeof children === 'function' ? children({
-      openIds,
-      onToggle,
-      resetValues,
-      setValues,
-      unsetValues
-    }) : children
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectBorderStyles(themeTokens),
+      children: typeof children === 'function' ? children({
+        openIds,
+        onToggle,
+        resetValues,
+        setValues,
+        unsetValues
+      }) : children
+    })
   });
 });
 ExpandCollapse.displayName = 'ExpandCollapse';
@@ -86,4 +90,9 @@ ExpandCollapse.propTypes = {
    */
   initialOpen: PropTypes.arrayOf(PropTypes.string)
 };
-export default ExpandCollapse;
+export default ExpandCollapse;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+});

package/lib-module/ExpandCollapse/Panel.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } 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 View from "react-native-web/dist/exports/View";
@@ -7,7 +7,8 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps, useCopy } from '../utils';
+import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -87,7 +88,7 @@ const selectControlPanelStyles = _ref4 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -100,10 +101,15 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
     variant,
     controlRef,
     content,
+    copy = 'en',
     ...rest
   } = _ref5;
-  const [containerHeight, setContainerHeight] = useState(null);
+  const [containerHeight, setContainerHeight] = React.useState(null);
   const isExpanded = openIds.includes(panelId);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const selectedProps = selectProps({
     ...rest,
     accessibilityState: {
@@ -134,15 +140,20 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
+  const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
+  const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/_jsx(View, {
     style: selectContentPanelStyles(themeTokens),
+    accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       style: selectTextStyles(themeTokens),
+      accessibilityLabel: subPanelAccessibilityLabel,
       children: children
     }) : children
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
+    accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/_jsx(View, {
       style: selectControlPanelStyles(themeTokens),
       children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
@@ -177,6 +188,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
           children: children
         })
       })

package/lib-module/ExpandCollapse/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    panel: 'Panel',
+    subPanel: 'SubPanel'
+  },
+  fr: {
+    panel: 'Panneau',
+    subPanel: 'Sous-Panneau'
+  }
+};

package/lib-module/Feedback/Feedback.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
@@ -74,7 +74,7 @@ const selectIconContainerStyles = _ref4 => {
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Feedback = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     title,
     children,

package/lib-module/Fieldset/Fieldset.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Feedback from '../Feedback';
 import { getTokensPropType, spacingProps, variantProp } from '../utils';
@@ -16,7 +16,7 @@ import useInputSupports from '../InputSupports/useInputSupports';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Fieldset = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     space,

package/lib-module/Fieldset/FieldsetContainer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cssReset from './cssReset';
 import { selectSystemProps, a11yProps, htmlAttrs } from '../utils';
@@ -8,7 +8,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htm
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inactive,

package/lib-module/Fieldset/FieldsetContainer.native.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 { selectSystemProps, a11yProps, viewProps } from '../utils';
@@ -7,7 +7,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     accessibilityRole,

package/lib-module/Fieldset/Legend.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cssReset from './cssReset';
 
@@ -7,7 +7,7 @@ import cssReset from './cssReset';
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;

package/lib-module/Fieldset/Legend.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;

package/lib-module/FlexGrid/Col/Col.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import GutterContext from '../providers/GutterContext';
@@ -7,7 +7,7 @@ import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '.
 import { useViewport } from '../../ViewportProvider';
 import { useTheme } from '../../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Col = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     children,
@@ -24,7 +24,7 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     flex,
     ...viewProps
   } = _ref;
-  const gutter = useContext(GutterContext);
+  const gutter = React.useContext(GutterContext);
   const viewport = useViewport();
   const {
     themeOptions: {

package/lib-module/FlexGrid/FlexGrid.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
@@ -15,7 +15,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
+const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     limitWidth = true,
     gutter = true,