@telus-uds/components-base 1.84.0 → 1.85.1

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,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';
@@ -21,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,

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";
@@ -88,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,
@@ -104,7 +104,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
     copy = 'en',
     ...rest
   } = _ref5;
-  const [containerHeight, setContainerHeight] = useState(null);
+  const [containerHeight, setContainerHeight] = React.useState(null);
   const isExpanded = openIds.includes(panelId);
   const getCopy = useCopy({
     dictionary,

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,

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,9 @@ const FootnoteLink = _ref2 => {
     dictionary,
     copy
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: staticStyles.container,
     children: numbers.map((num, index) => /*#__PURE__*/_jsx(View, {
       accessibilityLabel: getCopy('a11yLabel'),
       ref: refs[index],
@@ -71,7 +72,8 @@ const FootnoteLink = _ref2 => {
       })
     }, num))
   });
-};
+});
+FootnoteLink.displayName = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });
@@ -98,5 +100,8 @@ const staticStyles = StyleSheet.create({
   text: {
     position: 'relative',
     textDecorationLine: 'underline'
+  },
+  container: {
+    flexDirection: 'row'
   }
 });

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,