@telus-uds/components-base 1.84.0 → 1.85.0

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,21 +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,
-      accessibilityRole: "dialog",
-      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
@@ -61,7 +67,8 @@ const staticStyles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0,
-    zIndex: 1000
+    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,

package/lib-module/ProductCard/ProductCard.js

@@ -35,7 +35,7 @@ const selectProductCardTokens = _ref => {
     paddingVertical
   };
 };
-const ProductCard = _ref2 => {
+const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _getCopy;
   let {
     copy = 'en',
@@ -102,6 +102,7 @@ const ProductCard = _ref2 => {
   return /*#__PURE__*/_jsxs(View, {
     ...selectProps(rest),
     style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    ref: ref,
     children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.imageContainer,
       children: /*#__PURE__*/_jsx(Image, {
@@ -173,7 +174,7 @@ const ProductCard = _ref2 => {
       })
     })]
   });
-};
+});
 ProductCard.displayName = 'ProductCard';
 
 // If a language dictionary entry is provided, it must contain every key

package/lib-module/ProductCardGroup/ProductCardGroup.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
@@ -6,13 +6,13 @@ import ProductCard from '../ProductCard';
 import { StackWrap } from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
-const ProductCardGroup = _ref => {
+const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     productCards,
     maxSelection = 1,
     ...rest
   } = _ref;
-  const [selectedCardIds, setSelectedCardIds] = useState([]);
+  const [selectedCardIds, setSelectedCardIds] = React.useState([]);
   const handleSelect = id => {
     const isAlreadySelected = selectedCardIds.includes(id);
     let updatedSelectedCardIds;
@@ -27,6 +27,7 @@ const ProductCardGroup = _ref => {
   };
   return /*#__PURE__*/_jsx(View, {
     ...selectProps(rest),
+    ref: ref,
     children: /*#__PURE__*/_jsx(StackWrap, {
       direction: {
         xs: 'column',
@@ -46,7 +47,7 @@ const ProductCardGroup = _ref => {
       })
     })
   });
-};
+});
 ProductCardGroup.displayName = 'ProductCardGroup';
 ProductCardGroup.propTypes = {
   ...selectedSystemPropTypes,

package/lib-module/Progress/Progress.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 { useThemeTokens } from '../ThemeProvider';
@@ -51,7 +51,7 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,

package/lib-module/Progress/ProgressBar.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";
@@ -58,7 +58,7 @@ const selectBarStyles = (_ref, percentage) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,

package/lib-module/Progress/ProgressBarBackground.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;

package/lib-module/QuickLinks/QuickLinks.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
@@ -14,7 +14,7 @@ import QuickLinksCard from './QuickLinksCard';
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -11,7 +11,7 @@ import CardBase from '../Card/CardBase';
  * QuickLinksCard theme rather than the Card theme.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksList = _ref => {
+const QuickLinksList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -20,9 +20,11 @@ const QuickLinksList = _ref => {
   const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant);
   return /*#__PURE__*/_jsx(CardBase, {
     tokens: themeTokens,
+    ref: ref,
     children: children
   });
-};
+});
+QuickLinksList.displayName = 'QuickLinksList';
 QuickLinksList.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),
   variant: variantProp.propType,

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
 import { useViewport } from '../ViewportProvider';
@@ -12,7 +12,7 @@ import ButtonBase from '../Button/ButtonBase';
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinksItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -1,6 +1,7 @@
-import React, { forwardRef, Children, cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StackWrap } from '../StackView';
+import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 
@@ -17,7 +18,7 @@ const isQuickListItem = element => {
  * QuickLinksFeature renders a list of interactive items.
  *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
  */
-const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
+const QuickLinksFeature = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -25,14 +26,17 @@ const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
+  const viewport = useViewport();
   const {
     stackGap,
     stackJustify,
     stackSpace
-  } = useThemeTokens('QuickLinksFeature', tokens, variant);
-  const items = Children.map(children, child => {
+  } = useThemeTokens('QuickLinksFeature', tokens, variant, {
+    viewport
+  });
+  const items = React.Children.map(children, child => {
     if (isQuickListItem(child)) {
-      return /*#__PURE__*/cloneElement(child, child.props);
+      return /*#__PURE__*/React.cloneElement(child, child.props);
     }
     return null;
   });