@telus-uds/components-web 2.33.2 → 2.34.0

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps } from '@telus-uds/components-base';
 import ResponsiveImage from '../ResponsiveImage';
@@ -6,7 +6,7 @@ import { hasWebpSupport, getImageUrls } from './utils';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const OptimizeImage = _ref => {
+const OptimizeImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     contentfulAssetUrl,
     alt,
@@ -23,8 +23,8 @@ const OptimizeImage = _ref => {
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
   // by default assuming webP support for SSR
-  const [imgUrls, setImgUrls] = useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
-  useEffect(() => {
+  const [imgUrls, setImgUrls] = React.useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
+  React.useEffect(() => {
     // Checking for webP support for CSR
     hasWebpSupport().then(supportsWebp => {
       const imageUrls = getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
@@ -35,9 +35,11 @@ const OptimizeImage = _ref => {
   return /*#__PURE__*/_jsx(ResponsiveImage, {
     ...imgUrls,
     alt: alt,
-    ...selectProps(rest)
+    ...selectProps(rest),
+    ref: ref
   });
-};
+});
+OptimizeImage.displayName = 'OptimizeImage';
 OptimizeImage.propTypes = {
   ...selectedSystemPropTypes,
   /**

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 styled from 'styled-components';
 import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
@@ -69,12 +69,12 @@ const ItemContent = /*#__PURE__*/styled.div.withConfig({
 })({
   flex: 1
 });
-const Item = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     counterName,
     title,
-    tokens,
+    tokens = {},
     variant,
     ...rest
   } = _ref3;
@@ -133,8 +133,4 @@ Item.propTypes = {
    */
   tokens: getTokensPropType('List')
 };
-Item.defaultProps = {
-  title: undefined,
-  tokens: {}
-};
 export default Item;

package/lib-module/OrderedList/OrderedList.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
+import { selectSystemProps, variantProp } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
@@ -25,18 +25,18 @@ const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
-    start,
-    variant,
+    start = 1,
+    variant = {},
     ...rest
   } = _ref2;
   // Check if children is an array
   const isChildrenArray = Array.isArray(children);
 
   // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = useMemo(() => {
+  const childrenWithParentVariants = React.useMemo(() => {
     const addVariantToProps = child => {
       var _child$props;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
@@ -65,7 +65,6 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
 OrderedList.displayName = 'OrderedList';
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: getTokensPropType('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -76,10 +75,5 @@ OrderedList.propTypes = {
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: variantProp.propType
 };
-OrderedList.defaultProps = {
-  start: 1,
-  tokens: {},
-  variant: {}
-};
 OrderedList.Item = Item;
 export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ItemBase from './ItemBase';
@@ -17,10 +17,10 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
-    start,
+    start = 1,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(StyledList, {
@@ -41,8 +41,5 @@ OrderedListBase.propTypes = {
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-OrderedListBase.defaultProps = {
-  start: 1
-};
 OrderedListBase.Item = ItemBase;
 export default OrderedListBase;

package/lib-module/Paragraph/Paragraph.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps } from '@telus-uds/components-base';
+import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
 import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -33,7 +33,7 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = _ref3 => {
+const Paragraph = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -45,6 +45,7 @@ const Paragraph = _ref3 => {
   } = _ref3;
   const style = useTypographyTheme(variant, tokens);
   return /*#__PURE__*/_jsx(StyledParagraph, {
+    ref: ref,
     linesBetween: linesBetween,
     "data-testid": testID,
     align: align,
@@ -52,7 +53,8 @@ const Paragraph = _ref3 => {
     ...selectProps(rest),
     children: children
   });
-};
+});
+Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
@@ -74,7 +76,7 @@ Paragraph.propTypes = {
   /**
    * Paragraph takes the same tokens overrides as Typography
    */
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  tokens: getTokensPropType('Typography'),
   /**
    * Paragraph takes any of Typography's theme variants except for header sizes
    */

package/lib-module/PreviewCard/PreviewCard.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 omit from 'lodash.omit';
 import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
@@ -58,7 +57,7 @@ const defaultTokens = {
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const PreviewCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tag,
     title,

package/lib-module/PriceLockup/PriceLockup.js

@@ -130,7 +130,7 @@ const selectStrikeThroughTokens = _ref13 => {
     strikeThroughColor
   };
 };
-const PriceLockup = _ref14 => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -252,6 +252,7 @@ const PriceLockup = _ref14 => {
   }
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
+    ref: ref,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -263,7 +264,8 @@ const PriceLockup = _ref14 => {
       }
     }), bottomText && renderFootnoteContent()]
   });
-};
+});
+PriceLockup.displayName = 'PriceLockup';
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/Progress/ProgressBar.js

@@ -44,7 +44,7 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = _ref2 => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
@@ -57,13 +57,15 @@ const ProgressBar = _ref2 => {
     percentage: percentage,
     tokens: tokens,
     variant: variant,
+    ref: ref,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
       ...themeTokens,
       percentage: percentage
     })
   });
-};
+});
+ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback } from '@telus-uds/components-base';
+import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback, getTokensPropType, selectSystemProps, a11yProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
 import { InputField, InputWrapper } from './styles';
 import defaultDictionary from './dictionary';
 import SideButton from './SideButton';
@@ -12,29 +13,33 @@ const {
 const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
-const QuantitySelector = _ref => {
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
+const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    id,
+    id = 'quantity-selector',
     minNumber,
     maxNumber,
     defaultValue,
     value,
     label,
     hint,
-    hintPosition,
+    hintPosition = 'inline',
     tooltip,
     onChange,
     dictionary = defaultDictionary,
     accessibilityLabel,
-    copy,
-    variant,
+    copy = 'en',
+    variant = {
+      alternative: false
+    },
     tokens,
-    testID
+    testID = 'quantity-selector-testid',
+    ...rest
   } = _ref;
   const {
     disabled
   } = variant;
-  const [error, setError] = useState('');
+  const [error, setError] = React.useState('');
   const getCopy = useCopy({
     dictionary,
     copy
@@ -93,12 +98,12 @@ const QuantitySelector = _ref => {
         inputBorderColor,
         textColor,
         inputBackgroundColor,
-        ...rest
+        ...restOfTokens
       } = getTokens({
         ...textInputState
       });
       return {
-        ...rest,
+        ...restOfTokens,
         order: 1,
         borderWidth: inputBorderWidth,
         backgroundColor: inputBackgroundColor,
@@ -124,8 +129,9 @@ const QuantitySelector = _ref => {
     order
   });
   return /*#__PURE__*/_jsxs(Box, {
-    space: 2,
     testID: testID,
+    ref: ref,
+    ...selectProps(rest),
     children: [renderLabel(), /*#__PURE__*/_jsx(Spacer, {
       space: 2
     }), /*#__PURE__*/_jsxs(InputWrapper, {
@@ -168,7 +174,7 @@ const QuantitySelector = _ref => {
       })
     }) : null]
   });
-};
+});
 
 // If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
@@ -183,7 +189,9 @@ const dictionaryContentShape = PropTypes.shape({
     invalidCharacters: PropTypes.string.isRequired
   }).isRequired
 });
+QuantitySelector.displayName = 'QuantitySelector';
 QuantitySelector.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The id of the input field
    */
@@ -244,19 +252,10 @@ QuantitySelector.propTypes = {
     alternative: PropTypes.bool,
     disabled: PropTypes.bool
   }),
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  tokens: getTokensPropType('QuantitySelector'),
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
   testID: PropTypes.string
 };
-QuantitySelector.defaultProps = {
-  id: 'quantity-selector',
-  hintPosition: 'inline',
-  copy: 'en',
-  variant: {
-    alternative: false
-  },
-  testID: 'quantity-selector-testid'
-};
 export default QuantitySelector;

package/lib-module/QuantitySelector/SideButton.js

@@ -1,16 +1,16 @@
-import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
+import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-uds/components-base';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SideButton = _ref => {
+const SideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    isEnabled,
-    onPress,
-    onDoubleClick,
-    accessibilityLabel,
-    accessibilityDisabled,
-    tokens,
-    variant
+    isEnabled = true,
+    onPress = () => {},
+    onDoubleClick = () => {},
+    accessibilityLabel = '',
+    accessibilityDisabled = false,
+    tokens = {},
+    variant = {}
   } = _ref;
   const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
   const getButtonTokens = _ref2 => {
@@ -53,26 +53,18 @@ const SideButton = _ref => {
     onPress: onPress,
     onDoubleClick: onDoubleClick,
     accessibilityLabel: accessibilityLabel,
-    accessibilityDisabled: accessibilityDisabled
+    accessibilityDisabled: accessibilityDisabled,
+    ref: ref
   });
-};
+});
 SideButton.displayName = 'QuantitySelectorSideButton';
-SideButton.defaultProps = {
-  isEnabled: true,
-  onPress: () => {},
-  onDoubleClick: () => {},
-  accessibilityLabel: '',
-  accessibilityDisabled: false,
-  tokens: {},
-  variant: {}
-};
 SideButton.propTypes = {
   isEnabled: PropTypes.bool,
   onPress: PropTypes.func,
   onDoubleClick: PropTypes.func,
   accessibilityLabel: PropTypes.string,
   accessibilityDisabled: PropTypes.bool,
-  tokens: PropTypes.object,
+  tokens: getTokensPropType('QuantitySelectorSideButton'),
   variant: PropTypes.object
 };
 export default SideButton;

package/lib-module/ResponsiveImage/ResponsiveImage.js

@@ -16,7 +16,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = _ref => {
+const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     xsSrc,
     smSrc,
@@ -30,6 +30,7 @@ const ResponsiveImage = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsxs("picture", {
     ...selectProps(rest),
+    ref: ref,
     children: [/*#__PURE__*/_jsx("source", {
       srcSet: xlSrc,
       media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
@@ -52,7 +53,8 @@ const ResponsiveImage = _ref => {
       loading: loading
     })]
   });
-};
+});
+ResponsiveImage.displayName = 'ResponsiveImage';
 ResponsiveImage.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/Ribbon/Ribbon.js

@@ -105,7 +105,7 @@ const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   } = _ref17;
   return curveAfterWidth;
 });
-const Ribbon = _ref18 => {
+const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     children,
     tokens,
@@ -161,6 +161,7 @@ const Ribbon = _ref18 => {
     left: left,
     top: top,
     "data-testid": "ribbon-wrapper",
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(RibbonContainer, {
       shouldWrap: shouldWrap,
@@ -197,7 +198,8 @@ const Ribbon = _ref18 => {
       curveAfterBackgroundColor: curveAfterBackgroundColor
     })]
   });
-};
+});
+Ribbon.displayName = 'Ribbon';
 Ribbon.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Ribbon'),

package/lib-module/SkeletonProvider/SkeletonImage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonImage = _ref => {
+const SkeletonImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     rounded,
     imgHeight,
@@ -22,9 +22,11 @@ const SkeletonImage = _ref => {
     size: size,
     sizePixels: sizePixels,
     sizeIndex: sizeIndex,
-    shape: shape
+    shape: shape,
+    ref: ref
   });
-};
+});
+SkeletonImage.displayName = 'SkeletonImage';
 SkeletonImage.propTypes = {
   imgHeight: PropTypes.number,
   rounded: PropTypes.oneOf(['circle', 'corners']),

package/lib-module/SkeletonProvider/SkeletonProvider.js

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@telus-uds/components-base';
 import Image from '../Image';
@@ -24,7 +24,7 @@ const SkeletonProvider = _ref => {
         children: elementChildren
       } = childElement.props;
       const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
-      childElement = /*#__PURE__*/cloneElement(childElement, {
+      childElement = /*#__PURE__*/React.cloneElement(childElement, {
         children: mappedChildren
       });
     }
@@ -47,7 +47,7 @@ const SkeletonProvider = _ref => {
     return childElement;
   };
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: Children.map(children, mapChild)
+    children: React.Children.map(children, mapChild)
   });
 };
 SkeletonProvider.propTypes = {

package/lib-module/SkeletonProvider/SkeletonTypography.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonTypography = _ref => {
+const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     show,
     size,
@@ -21,9 +21,11 @@ const SkeletonTypography = _ref => {
     sizeIndex: sizeIndex,
     sizePixels: sizePixels,
     characters: characters,
-    lines: lines
+    lines: lines,
+    ref: ref
   });
-};
+});
+SkeletonTypography.displayName = 'SkeletonTypography';
 SkeletonTypography.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.node,

package/lib-module/Span/Span.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps } from '@telus-uds/components-base';
+import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
 import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -21,7 +21,7 @@ const StyledSpan = /*#__PURE__*/styled.span.withConfig({
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-const Span = _ref2 => {
+const Span = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,
@@ -35,10 +35,12 @@ const Span = _ref2 => {
     "data-testid": testID,
     flex: flex,
     style: style,
+    ref: ref,
     ...selectProps(rest),
     children: children
   });
-};
+});
+Span.displayName = 'Span';
 Span.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
@@ -54,7 +56,7 @@ Span.propTypes = {
   /**
    * Span takes the same tokens overrides as Typography
    */
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  tokens: getTokensPropType('Typography'),
   /**
    * Span can take any of Typography's theme variants
    */

package/lib-module/Spinner/Spinner.js

@@ -78,7 +78,7 @@ const recursiveMap = (children, fn) => React.Children.map(children, child => {
 /**
  * Loading indicator.
  */
-const Spinner = _ref3 => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     fullScreen = false,
@@ -159,6 +159,7 @@ const Spinner = _ref3 => {
 
   // Standalone spinner
   return /*#__PURE__*/_jsx(SpinnerContainer, {
+    ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(SpinnerContent, {
       label: label,
@@ -169,7 +170,8 @@ const Spinner = _ref3 => {
       isStatic: isStatic
     })
   });
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Spinner'),

package/lib-module/Spinner/SpinnerContent.js

@@ -27,7 +27,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-const SpinnerContent = _ref2 => {
+const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     label,
     labelPosition,
@@ -46,6 +46,7 @@ const SpinnerContent = _ref2 => {
   };
   return /*#__PURE__*/_jsx(Container, {
     overlay: overlay,
+    ref: ref,
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 3,
       tokens: {
@@ -65,7 +66,8 @@ const SpinnerContent = _ref2 => {
       })]
     })
   });
-};
+});
+SpinnerContent.displayName = 'SpinnerContent';
 SpinnerContent.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/StoryCard/StoryCard.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 { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -48,7 +47,7 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const StoryCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tag,
     date,