@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/List/ListItemMark.js

@@ -60,7 +60,7 @@ const selectBulletContainerStyles = _ref4 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = _ref5 => {
+const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     icon,
     iconColor,
@@ -88,6 +88,7 @@ const ListItemMark = _ref5 => {
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   return /*#__PURE__*/_jsx(View, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
+    ref: ref,
     children: /*#__PURE__*/_jsx(View, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
       testID: "unordered-item-bullet",
@@ -99,7 +100,8 @@ const ListItemMark = _ref5 => {
       })
     })
   });
-};
+});
+ListItemMark.displayName = 'ListItemMark';
 ListItemMark.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,
   /**

package/lib-module/List/PressableListItemBase.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 Pressable from "react-native-web/dist/exports/Pressable";
@@ -36,7 +36,7 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,

package/lib-module/Listbox/GroupControl.js

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box'
   }
 });
-const GroupControl = _ref => {
+const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -73,6 +73,7 @@ const GroupControl = _ref => {
       paddingTop: groupPaddingTop - groupBorderWidth,
       paddingBottom: groupPaddingBottom - groupBorderWidth
     }],
+    ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
@@ -88,7 +89,8 @@ const GroupControl = _ref => {
       }
     })]
   });
-};
+});
+GroupControl.displayName = 'GroupControl';
 GroupControl.propTypes = {
   id: PropTypes.string,
   expanded: PropTypes.bool,

package/lib-module/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } 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";
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -34,7 +34,7 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = useState(defaultSelectedId);
+  const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
@@ -42,10 +42,10 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
-  const itemRefs = useRef([]);
+  const itemRefs = React.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const handleKeydown = useCallback(event => {
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const handleKeydown = React.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -77,7 +77,7 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  useEffect(() => {
+  React.useEffect(() => {
     if (Platform.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);

package/lib-module/Listbox/ListboxContext.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 const ListboxContext = /*#__PURE__*/React.createContext({});
-const useListboxContext = () => useContext(ListboxContext);
+const useListboxContext = () => React.useContext(ListboxContext);
 export { ListboxContext, useListboxContext };

package/lib-module/Listbox/ListboxGroup.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-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";
@@ -26,7 +26,7 @@ const getAccessibilityRole = () => Platform.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id,
     label,

package/lib-module/Listbox/ListboxItem.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-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";
@@ -20,7 +19,7 @@ const styles = StyleSheet.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     label,

package/lib-module/Listbox/ListboxOverlay.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-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";
@@ -24,7 +23,7 @@ const staticStyles = StyleSheet.create({
 });
 const paddingVertical = 0;
 const paddingHorizontal = 0;
-const DropdownOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     isReady = false,

package/lib-module/Listbox/PressableItem.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } 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";
@@ -51,7 +50,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     href,

package/lib-module/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
 import View from "react-native-web/dist/exports/View";
@@ -98,7 +98,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     isOpen,
@@ -147,9 +147,9 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const showCloseButton = closeButton !== null;
 
   // These refs are used to manage focus in the web modal container
-  const focusTrapRef = useRef(null);
-  const closeButtonRef = useRef(null);
-  useEffect(() => {
+  const focusTrapRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  React.useEffect(() => {
     if (Platform.OS === 'web') {
       const handleFocus = () => {
         // If the focus is on the last item of the web modal container, move it to the close button

package/lib-module/Modal/ModalContent.js

@@ -1,4 +1,4 @@
-import React, { useState } 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 Platform from "react-native-web/dist/exports/Platform";
@@ -12,7 +12,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ModalContent = _ref => {
+const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -39,8 +39,8 @@ const ModalContent = _ref => {
   } = useThemeTokens('Modal', tokens, variant, {
     viewport
   });
-  const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
-  const [scrollContentHeight, setScrollContentHeight] = useState(0);
+  const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = React.useState(0);
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -91,6 +91,7 @@ const ModalContent = _ref => {
   };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.modalContent,
+    ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
       style: headingStyles,
       children: [heading && /*#__PURE__*/_jsx(Typography, {
@@ -145,7 +146,8 @@ const ModalContent = _ref => {
       }) : null]
     })]
   });
-};
+});
+ModalContent.displayName = 'ModalContent';
 const styles = StyleSheet.create({
   modalContent: {
     flex: 1,

package/lib-module/Modal/WebModal.js

@@ -2,6 +2,7 @@ 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";
+import Portal from '../Portal';
 import { a11yProps, selectSystemProps, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -14,20 +15,26 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = _ref => {
+const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.container,
-    ...selectProps(rest),
+  return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsx(View, {
-      style: staticStyles.content,
-      children: children
+      style: staticStyles.container,
+      ...selectProps(rest),
+      ref: ref,
+      children: /*#__PURE__*/_jsx("div", {
+        style: staticStyles.content,
+        role: "dialog",
+        "aria-modal": true,
+        children: children
+      })
     })
   });
-};
+});
+WebModal.displayName = 'WebModal';
 WebModal.propTypes = {
   ...selectedSystemPropTypes,
   // children to be rendered within the modal
@@ -52,14 +59,16 @@ const staticStyles = StyleSheet.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000,
+    display: 'flex'
   }
 });
 export default WebModal;

package/lib-module/MultiSelectFilter/ModalOverlay.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";
@@ -54,7 +54,7 @@ const selectPaddingContainerStyles = _ref2 => {
     paddingRight
   };
 };
-const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     isReady = false,

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } 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";
@@ -46,7 +46,7 @@ const selectDividerToknes = _ref2 => {
     weight
   };
 };
-const MultiSelectFilter = _ref3 => {
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -79,9 +79,9 @@ const MultiSelectFilter = _ref3 => {
     onChange,
     readOnly
   });
-  const [isOpen, setIsOpen] = useState(false);
-  const [checkedIds, setCheckedIds] = useState(currentValues ?? []);
-  const [maxWidth, setMaxWidth] = useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = React.useState(false);
   const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
   const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
@@ -94,11 +94,11 @@ const MultiSelectFilter = _ref3 => {
   const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
   const isSelected = currentValues.length > 0;
   const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  useEffect(() => {
+  React.useEffect(() => {
     if (colSize === 1) return setMaxWidth(false);
     return colSize === 2 && setMaxWidth(true);
   }, [colSize]);
-  useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -201,6 +201,7 @@ const MultiSelectFilter = _ref3 => {
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
       isOpen: isOpen,
       onClose: onClose,
+      ref: ref,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
@@ -288,6 +289,7 @@ const MultiSelectFilter = _ref3 => {
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
+      ref: ref,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(View, {
           style: styles.textContainerStyle,
@@ -365,7 +367,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     })]
   });
-};
+});
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = StyleSheet.create({
   textContainerStyle: {

package/lib-module/Notification/Notification.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
@@ -268,7 +268,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => (
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     system,
@@ -278,7 +278,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
     variant,
     ...rest
   } = _ref6;
-  const [isDismissed, setIsDismissed] = useState(false);
+  const [isDismissed, setIsDismissed] = React.useState(false);
   const viewport = useViewport();
   const getCopy = useCopy({
     dictionary,
@@ -296,7 +296,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
     viewport
   });
   const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-  const notificationComponentRef = useRef({
+  const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},
     staticContentContainerStyles: {},
@@ -306,7 +306,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
     selectIconPropsStyles: {},
     selectDismissIconPropsStyles: {}
   });
-  const mediaIdsRef = useRef({
+  const mediaIdsRef = React.useRef({
     containerIds: {},
     contentContainerIds: {},
     staticContentContainerIds: {},

package/lib-module/OrderedList/Item.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";
@@ -63,13 +63,13 @@ const selectItemContentStyles = (_ref3, isLastChild) => {
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
-const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     index,
     isLastChild,
     title,
-    tokens,
+    tokens = {},
     variant,
     ...rest
   } = _ref4;
@@ -145,17 +145,13 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: getTokensPropType('List'),
+  tokens: getTokensPropType('OrderedList'),
   /**
    * Item variant
    */
   variant: variantProp.propType
 };
 Item.displayName = 'OrderedListItem';
-Item.defaultProps = {
-  title: undefined,
-  tokens: {}
-};
 export default Item;
 const staticStyles = StyleSheet.create({
   container: {

package/lib-module/OrderedList/ItemBase.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-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";
@@ -10,7 +10,7 @@ const getAccessibilityRole = () => Platform.select({
   android: 'none',
   web: 'listitem'
 });
-const Item = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     style,

package/lib-module/OrderedList/OrderedList.js

@@ -1,18 +1,18 @@
-import React, { forwardRef, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
+import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
+const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
-    start,
-    variant,
+    start = 1,
+    variant = {},
     ...rest
   } = _ref;
-  const childrenWithParentVariants = useMemo(() => {
+  const childrenWithParentVariants = React.useMemo(() => {
     const addVariantToProps = (child, i, isLastChild) => {
       var _child$props;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
@@ -41,7 +41,6 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
-  tokens: getTokensPropType('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -52,11 +51,6 @@ OrderedList.propTypes = {
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: variantProp.propType
 };
-OrderedList.defaultProps = {
-  start: 1,
-  tokens: {},
-  variant: {}
-};
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = Item;
 export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -1,11 +1,11 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-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";
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const OrderedListBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest

package/lib-module/Pagination/PageButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonBase from '../Button/ButtonBase';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -6,7 +6,7 @@ import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps,
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { createElement as _createElement } from "react";
-const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+const PageButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     label,
     onPress,

package/lib-module/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -29,7 +29,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
-const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     copy = 'en',

package/lib-module/Pagination/SideButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Text from "react-native-web/dist/exports/Text";
 import PropTypes from 'prop-types';
 import ButtonBase from '../Button/ButtonBase';
@@ -37,7 +37,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const SideButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,

package/lib-module/PriceLockup/PriceLockup.js

@@ -87,7 +87,7 @@ const selectBottomTextTypographyTokens = _ref6 => {
     lineHeight: bottomTextLineHeight
   };
 };
-const PriceLockup = _ref7 => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -129,9 +129,9 @@ const PriceLockup = _ref7 => {
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
   return /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.priceLockupContainer, {
-      ...selectProps(rest)
-    }],
+    style: [staticStyles.priceLockupContainer],
+    ref: ref,
+    ...selectProps(rest),
     children: [topText ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.topText,
       children: renderTypography(topText, topTextTypographyTokens)
@@ -145,7 +145,7 @@ const PriceLockup = _ref7 => {
       }), renderFootnoteContent(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
     }) : null]
   });
-};
+});
 PriceLockup.displayName = 'PriceLockup';
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,