@telus-uds/components-base 1.83.0 → 1.85.0

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import applyInheritance from '../helpers';
 import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
@@ -58,7 +58,7 @@ const distributeStyles = distribute => {
       return {};
   }
 };
-const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     verticalAlign,

package/lib-module/Footnote/Footnote.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } 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";
@@ -131,7 +131,7 @@ const selectCustomContentFontStyle = _ref5 => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = _ref6 => {
+const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     number = undefined,
@@ -152,10 +152,10 @@ const Footnote = _ref6 => {
     dictionary,
     copy
   });
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = React.useState(false);
   const screenHeight = Dimensions.get('screen').height;
   const screenWidth = Dimensions.get('screen').width;
-  const getFootnoteBodyContent = useCallback(() => {
+  const getFootnoteBodyContent = React.useCallback(() => {
     if (!number || !content) {
       return null;
     }
@@ -175,12 +175,12 @@ const Footnote = _ref6 => {
       }, number)
     });
   }, [content, number, themeTokens]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
     }
   }, [isOpen]);
-  const closeFootnote = useCallback((event, options) => {
+  const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
     setIsVisible(false);
   }, [onClose]);
@@ -189,6 +189,7 @@ const Footnote = _ref6 => {
   });
   return /*#__PURE__*/_jsx(View, {
     ...selectProps(rest),
+    ref: ref,
     children: /*#__PURE__*/_jsx(Modal, {
       visible: isVisible,
       animationType: "slide",
@@ -239,7 +240,8 @@ const Footnote = _ref6 => {
       })
     })
   });
-};
+});
+Footnote.displayName = 'Footnote';
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,
   heading: PropTypes.string.isRequired

package/lib-module/Footnote/FootnoteLink.js

@@ -8,7 +8,6 @@ import dictionary from './dictionary';
 import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, variantProp } from '../utils';
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 
 // The top property varies between devices due to how devices render the viewport.
@@ -33,7 +32,7 @@ const selectTextStyle = _ref => {
     })
   };
 };
-const FootnoteLink = _ref2 => {
+const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     content = [],
@@ -53,7 +52,8 @@ const FootnoteLink = _ref2 => {
     dictionary,
     copy
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
     children: numbers.map((num, index) => /*#__PURE__*/_jsx(View, {
       accessibilityLabel: getCopy('a11yLabel'),
       ref: refs[index],
@@ -71,7 +71,8 @@ const FootnoteLink = _ref2 => {
       })
     }, num))
   });
-};
+});
+FootnoteLink.displayName = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });

package/lib-module/HorizontalScroll/HorizontalScroll.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";
@@ -19,7 +19,7 @@ export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectToken
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
+const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     ScrollButton,
     tokens,
@@ -39,8 +39,8 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
   getTokensSetPropType(tokenKeys, {
     partial: true
   }), 'HorizontalScroll');
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [contentWidth, setContentWidth] = React.useState(0);
   const handleContentWidth = width => setContentWidth(width);
   const handleContainerLayout = _ref2 => {
     let {
@@ -55,7 +55,7 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   // Update the scroll position only when scrolling actions ends to minimally rerender
   // and update which buttons are conditionally rendered.
-  const [scrollOffset, setScrollOffset] = useState(0);
+  const [scrollOffset, setScrollOffset] = React.useState(0);
   const handleScrollEnd = _ref3 => {
     let {
       nativeEvent: {
@@ -69,7 +69,7 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
   const scrollMax = Math.max(0, contentWidth - containerWidth);
   const showNextButton = scrollOffset < scrollMax;
   const showPreviousButton = scrollOffset > 0;
-  const scrollRef = useRef(null);
+  const scrollRef = React.useRef(null);
   const scrollTo = targetX => {
     var _scrollRef$current;
     if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo) === 'function') {
@@ -96,8 +96,8 @@ const HorizontalScroll = /*#__PURE__*/forwardRef((_ref, ref) => {
   itemPositions.contentWidth = contentWidth;
   /* eslint-disable-next-line no-param-reassign */
   itemPositions.scrollOffset = scrollOffset;
-  const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0;
-  useEffect(() => {
+  const hasWidths = itemPositions.contentWidth > 0;
+  React.useEffect(() => {
     if (hasWidths) itemPositions.setIsReady(true);
     // itemPositions is a ref object so this should occur only when elements' widths are set in state
   }, [hasWidths, itemPositions]);

package/lib-module/HorizontalScroll/HorizontalScrollButton.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";
@@ -24,7 +24,7 @@ const selectContainerStyles = _ref => {
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const HorizontalScrollButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     direction = 'next',
     icon,

package/lib-module/HorizontalScroll/ScrollViewEnd.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 import debounce from 'lodash.debounce';
@@ -12,16 +12,16 @@ const DEBOUNCE_MS = 100;
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
-    onScroll,
+    onScroll = null,
     ...props
   } = _ref;
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceScrollEnd = useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
+  const debounceScrollEnd = React.useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
 
   // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
   const handleScroll = event => {
@@ -30,7 +30,7 @@ const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   // Cancel any lingering debounce timeouts on dismount
-  useEffect(() => debounceScrollEnd.cancel);
+  React.useEffect(() => debounceScrollEnd.cancel);
   return /*#__PURE__*/_jsx(ScrollView, {
     ref: ref,
     ...props,
@@ -43,7 +43,4 @@ ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired,
   onScroll: PropTypes.func
 };
-ScrollViewEnd.defaultProps = {
-  onScroll: null
-};
 export default ScrollViewEnd;

package/lib-module/HorizontalScroll/ScrollViewEnd.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 /**
@@ -7,7 +7,7 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     ...props

package/lib-module/Icon/Icon.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, scaleWithText, variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,

package/lib-module/Icon/IconText.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 View from "react-native-web/dist/exports/View";
@@ -15,7 +15,7 @@ import { spacingProps } from '../utils';
  *  - within a container with `flexDirection: 'row'`
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
+const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _iconProps$tokens, _iconProps$tokens2;
   let {
     space,
@@ -41,10 +41,10 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
    * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
    */
   const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
-  const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
+  const iconAdjustedAndroid = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
-        translateY: size * 0.2
+        translateY: valueTranslateY ? size * 0.2 : size * 0.01
       }]
     },
     children: iconContent
@@ -57,7 +57,7 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     children: iconContent
   });
-  const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
   return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,

package/lib-module/IconButton/IconButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -114,7 +114,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},

package/lib-module/InputLabel/InputLabel.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";
@@ -40,7 +40,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,

package/lib-module/InputLabel/LabelContent.js

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     forId

package/lib-module/InputLabel/LabelContent.native.js

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;

package/lib-module/InputSupports/InputSupports.js

@@ -1,13 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import InputLabel from '../InputLabel';
 import Feedback from '../Feedback';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
+import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
+const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     copy = 'en',
@@ -84,7 +85,7 @@ InputSupports.propTypes = {
   /**
    * Additional tokens to override the default feedback tokens.
    */
-  feedbackTokens: PropTypes.objectOf(PropTypes.string),
+  feedbackTokens: getTokensPropType('Feedback'),
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/Link/ChevronLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { selectTokens, getTokensPropType, linkProps } from '../utils';
@@ -11,7 +11,7 @@ import LinkBase from './LinkBase';
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,

package/lib-module/Link/InlinePressable.js

@@ -1,9 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
+
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -12,10 +15,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
 import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
+const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
@@ -30,6 +31,11 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  inlineFlex: PropTypes.bool,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
+};
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex

package/lib-module/Link/InlinePressable.native.js

@@ -1,10 +1,13 @@
 /* eslint-disable camelcase */
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import Text from "react-native-web/dist/exports/Text";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import PropTypes from 'prop-types';
+
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
+
 // TouchableWithoutFeedback and Pressable have similar but not identical props APIs
 import { jsx as _jsx } from "react/jsx-runtime";
 const pressablePropsToTouchable = _ref => {
@@ -40,19 +43,17 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
     style,
     ...rest
   } = _ref2;
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isPressed, setIsPressed] = useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
   const handlePressIn = () => setIsPressed(true);
   const handlePressOut = () => setIsPressed(false);
   const pressState = {
@@ -78,4 +79,9 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
+  onPress: PropTypes.func
+};
 export default InlinePressable;

package/lib-module/Link/Link.js

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     children,

package/lib-module/Link/LinkBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -131,7 +131,7 @@ const selectIconTokens = _ref5 => {
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,

package/lib-module/Link/TextButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
@@ -10,7 +10,7 @@ import { variantProp } from '../utils';
  * take place on the current page, or for navigation within an app.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,

package/lib-module/List/List.js

@@ -1,6 +1,7 @@
-import React, { cloneElement, forwardRef, Children } 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";
 import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +17,7 @@ const isListItem = element => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = /*#__PURE__*/forwardRef((_ref, ref) => {
+const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
@@ -28,12 +29,12 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
     }),
     ...rest
   } = _ref;
-  const items = Children.map(children, (child, index) => {
+  const items = React.Children.map(children, (child, index) => {
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
     if (isListItem(child)) {
-      return /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         showDivider,
-        isLastItem: index + 1 === Children.count(children),
+        isLastItem: index + 1 === React.Children.count(children),
         tokens,
         variant,
         ...child.props
@@ -43,15 +44,18 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: {
-      flexShrink: 1,
-      flex: 1
-    },
+    style: styles.list,
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items
   });
 });
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
+});
 List.displayName = 'List';
 List.propTypes = {
   ...selectedSystemPropTypes,

package/lib-module/List/ListItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ListItemBase from './ListItemBase';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
@@ -7,7 +7,7 @@ import { variantProp } from '../utils';
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/List/ListItemBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } 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";
@@ -36,7 +36,7 @@ const selectDividerStyles = _ref2 => {
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -86,7 +86,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
+    style: [staticStyles.container, getContainerStyle()],
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: typeof children === 'function' ? children({
@@ -96,10 +96,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/_jsxs(View, {
-      style: [{
-        flex: 1,
-        flexDirection: 'row'
-      }],
+      style: staticStyles.container,
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: {
           ...tokens,
@@ -126,7 +123,8 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 ListItemBase.displayName = 'ListItem';
 const staticStyles = StyleSheet.create({
-  itemContainer: {
+  container: {
+    flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {

package/lib-module/List/ListItemContent.js

@@ -38,7 +38,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = _ref2 => {
+const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     children
@@ -52,11 +52,13 @@ const ListItemContent = _ref2 => {
       textDecorationLine: tokens.itemUnderline,
       textDecorationColor: tokens.itemFontColor
     }],
+    ref: ref,
     children: wrapStringsInText(children, {
       style: textStyles
     })
   });
-};
+});
+ListItemContent.displayName = 'ListItemContent';
 const staticStyles = StyleSheet.create({
   wrap: {
     flex: 1,