@telus-uds/components-web 2.33.2 → 2.34.0

package/lib/OrderedList/OrderedList.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -14,8 +14,6 @@ var _Item = _interopRequireDefault(require("./Item"));
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
   displayName: "OrderedList__StyledOrderedListBase",
@@ -34,18 +32,18 @@ const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_Order
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const OrderedList = /*#__PURE__*/_react.default.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 = (0, _react.useMemo)(() => {
+  const childrenWithParentVariants = _react.default.useMemo(() => {
     const addVariantToProps = child => {
       var _child$props;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
@@ -74,7 +72,6 @@ const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 OrderedList.displayName = 'OrderedList';
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -85,11 +82,6 @@ OrderedList.propTypes = {
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   variant: _componentsBase.variantProp.propType
 };
-OrderedList.defaultProps = {
-  start: 1,
-  tokens: {},
-  variant: {}
-};
 OrderedList.Item = _Item.default;
 var _default = OrderedList;
 exports.default = _default;

package/lib/OrderedList/OrderedListBase.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ItemBase = _interopRequireDefault(require("./ItemBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   displayName: "OrderedListBase__StyledList",
   componentId: "components-web__sc-4m9lgj-0"
@@ -26,10 +24,10 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
-    start,
+    start = 1,
     ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
@@ -50,9 +48,6 @@ OrderedListBase.propTypes = {
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
-OrderedListBase.defaultProps = {
-  start: 1
-};
 OrderedListBase.Item = _ItemBase.default;
 var _default = OrderedListBase;
 exports.default = _default;

package/lib/Paragraph/Paragraph.js

@@ -40,7 +40,7 @@ const StyledParagraph = /*#__PURE__*/_styledComponents.default.p.withConfig({
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = _ref3 => {
+const Paragraph = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -52,6 +52,7 @@ const Paragraph = _ref3 => {
   } = _ref3;
   const style = (0, _utils.useTypographyTheme)(variant, tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
+    ref: ref,
     linesBetween: linesBetween,
     "data-testid": testID,
     align: align,
@@ -59,7 +60,8 @@ const Paragraph = _ref3 => {
     ...selectProps(rest),
     children: children
   });
-};
+});
+Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
@@ -81,7 +83,7 @@ Paragraph.propTypes = {
   /**
    * Paragraph takes the same tokens overrides as Typography
    */
-  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+  tokens: (0, _componentsBase.getTokensPropType)('Typography'),
   /**
    * Paragraph takes any of Typography's theme variants except for header sizes
    */

package/lib/PreviewCard/PreviewCard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.omit"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -12,11 +12,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
 var _AuthorDate = _interopRequireDefault(require("./AuthorDate"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
 
@@ -65,7 +63,7 @@ const defaultTokens = {
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tag,
     title,

package/lib/PriceLockup/PriceLockup.js

@@ -135,7 +135,7 @@ const selectStrikeThroughTokens = _ref13 => {
     strikeThroughColor
   };
 };
-const PriceLockup = _ref14 => {
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -257,6 +257,7 @@ const PriceLockup = _ref14 => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
     ...selectProps(rest),
+    ref: ref,
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -268,7 +269,8 @@ const PriceLockup = _ref14 => {
       }
     }), bottomText && renderFootnoteContent()]
   });
-};
+});
+PriceLockup.displayName = 'PriceLockup';
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/Progress/ProgressBar.js

@@ -50,7 +50,7 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = _ref2 => {
+const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
@@ -63,13 +63,15 @@ const ProgressBar = _ref2 => {
     percentage: percentage,
     tokens: tokens,
     variant: variant,
+    ref: ref,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
       ...themeTokens,
       percentage: percentage
     })
   });
-};
+});
+ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/QuantitySelector/QuantitySelector.js

@@ -4,45 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
+var _utils = require("../utils");
 var _styles = require("./styles");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _SideButton = _interopRequireDefault(require("./SideButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const {
   isNaN
 } = Number;
 const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
-const QuantitySelector = _ref => {
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _utils.htmlAttrs]);
+const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    id,
+    id = 'quantity-selector',
     minNumber,
     maxNumber,
     defaultValue,
     value,
     label,
     hint,
-    hintPosition,
+    hintPosition = 'inline',
     tooltip,
     onChange,
     dictionary = _dictionary.default,
     accessibilityLabel,
-    copy,
-    variant,
+    copy = 'en',
+    variant = {
+      alternative: false
+    },
     tokens,
-    testID
+    testID = 'quantity-selector-testid',
+    ...rest
   } = _ref;
   const {
     disabled
   } = variant;
-  const [error, setError] = (0, _react.useState)('');
+  const [error, setError] = _react.default.useState('');
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary,
     copy
@@ -101,12 +104,12 @@ const QuantitySelector = _ref => {
         inputBorderColor,
         textColor,
         inputBackgroundColor,
-        ...rest
+        ...restOfTokens
       } = getTokens({
         ...textInputState
       });
       return {
-        ...rest,
+        ...restOfTokens,
         order: 1,
         borderWidth: inputBorderWidth,
         backgroundColor: inputBackgroundColor,
@@ -132,8 +135,9 @@ const QuantitySelector = _ref => {
     order
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
-    space: 2,
     testID: testID,
+    ref: ref,
+    ...selectProps(rest),
     children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
       space: 2
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
@@ -176,7 +180,7 @@ const QuantitySelector = _ref => {
       })
     }) : null]
   });
-};
+});
 
 // If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = _propTypes.default.shape({
@@ -191,7 +195,9 @@ const dictionaryContentShape = _propTypes.default.shape({
     invalidCharacters: _propTypes.default.string.isRequired
   }).isRequired
 });
+QuantitySelector.displayName = 'QuantitySelector';
 QuantitySelector.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The id of the input field
    */
@@ -252,20 +258,11 @@ QuantitySelector.propTypes = {
     alternative: _propTypes.default.bool,
     disabled: _propTypes.default.bool
   }),
-  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelector'),
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
   testID: _propTypes.default.string
 };
-QuantitySelector.defaultProps = {
-  id: 'quantity-selector',
-  hintPosition: 'inline',
-  copy: 'en',
-  variant: {
-    alternative: false
-  },
-  testID: 'quantity-selector-testid'
-};
 var _default = QuantitySelector;
 exports.default = _default;

package/lib/QuantitySelector/SideButton.js

@@ -9,15 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SideButton = _ref => {
+const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    isEnabled,
-    onPress,
-    onDoubleClick,
-    accessibilityLabel,
-    accessibilityDisabled,
-    tokens,
-    variant
+    isEnabled = true,
+    onPress = () => {},
+    onDoubleClick = () => {},
+    accessibilityLabel = '',
+    accessibilityDisabled = false,
+    tokens = {},
+    variant = {}
   } = _ref;
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelectorSideButton', tokens, variant);
   const getButtonTokens = _ref2 => {
@@ -60,26 +60,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.default.bool,
   onPress: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   accessibilityLabel: _propTypes.default.string,
   accessibilityDisabled: _propTypes.default.bool,
-  tokens: _propTypes.default.object,
+  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelectorSideButton'),
   variant: _propTypes.default.object
 };
 var _default = SideButton;

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -22,7 +22,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = _ref => {
+const ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     xsSrc,
     smSrc,
@@ -36,6 +36,7 @@ const ResponsiveImage = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
     ...selectProps(rest),
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
       srcSet: xlSrc,
       media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.xl)}px)`
@@ -58,7 +59,8 @@ const ResponsiveImage = _ref => {
       loading: loading
     })]
   });
-};
+});
+ResponsiveImage.displayName = 'ResponsiveImage';
 ResponsiveImage.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/Ribbon/Ribbon.js

@@ -111,7 +111,7 @@ const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref17;
   return curveAfterWidth;
 });
-const Ribbon = _ref18 => {
+const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
   let {
     children,
     tokens,
@@ -167,6 +167,7 @@ const Ribbon = _ref18 => {
     left: left,
     top: top,
     "data-testid": "ribbon-wrapper",
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonContainer, {
       shouldWrap: shouldWrap,
@@ -203,7 +204,8 @@ const Ribbon = _ref18 => {
       curveAfterBackgroundColor: curveAfterBackgroundColor
     })]
   });
-};
+});
+Ribbon.displayName = 'Ribbon';
 Ribbon.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),

package/lib/SkeletonProvider/SkeletonImage.js

@@ -10,7 +10,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SkeletonImage = _ref => {
+const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     rounded,
     imgHeight,
@@ -29,9 +29,11 @@ const SkeletonImage = _ref => {
     size: size,
     sizePixels: sizePixels,
     sizeIndex: sizeIndex,
-    shape: shape
+    shape: shape,
+    ref: ref
   });
-};
+});
+SkeletonImage.displayName = 'SkeletonImage';
 SkeletonImage.propTypes = {
   imgHeight: _propTypes.default.number,
   rounded: _propTypes.default.oneOf(['circle', 'corners']),

package/lib/SkeletonProvider/SkeletonProvider.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _Image = _interopRequireDefault(require("../Image"));
@@ -12,8 +12,6 @@ var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography")
 var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const SkeletonProvider = _ref => {
   let {
     children,
@@ -32,7 +30,7 @@ const SkeletonProvider = _ref => {
         children: elementChildren
       } = childElement.props;
       const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
-      childElement = /*#__PURE__*/(0, _react.cloneElement)(childElement, {
+      childElement = /*#__PURE__*/_react.default.cloneElement(childElement, {
         children: mappedChildren
       });
     }
@@ -55,7 +53,7 @@ const SkeletonProvider = _ref => {
     return childElement;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: _react.Children.map(children, mapChild)
+    children: _react.default.Children.map(children, mapChild)
   });
 };
 SkeletonProvider.propTypes = {

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -10,7 +10,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SkeletonTypography = _ref => {
+const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     show,
     size,
@@ -28,9 +28,11 @@ const SkeletonTypography = _ref => {
     sizeIndex: sizeIndex,
     sizePixels: sizePixels,
     characters: characters,
-    lines: lines
+    lines: lines,
+    ref: ref
   });
-};
+});
+SkeletonTypography.displayName = 'SkeletonTypography';
 SkeletonTypography.propTypes = {
   show: _propTypes.default.bool.isRequired,
   children: _propTypes.default.node,

package/lib/Span/Span.js

@@ -28,7 +28,7 @@ const StyledSpan = /*#__PURE__*/_styledComponents.default.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.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,
@@ -42,10 +42,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.default.node.isRequired,
@@ -61,7 +63,7 @@ Span.propTypes = {
   /**
    * Span takes the same tokens overrides as Typography
    */
-  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+  tokens: (0, _componentsBase.getTokensPropType)('Typography'),
   /**
    * Span can take any of Typography's theme variants
    */

package/lib/Spinner/Spinner.js

@@ -84,7 +84,7 @@ const recursiveMap = (children, fn) => _react.default.Children.map(children, chi
 /**
  * Loading indicator.
  */
-const Spinner = _ref3 => {
+const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     fullScreen = false,
@@ -165,6 +165,7 @@ const Spinner = _ref3 => {
 
   // Standalone spinner
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
+    ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
       label: label,
@@ -175,7 +176,8 @@ const Spinner = _ref3 => {
       isStatic: isStatic
     })
   });
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Spinner'),

package/lib/Spinner/SpinnerContent.js

@@ -33,7 +33,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     })
   };
 });
-const SpinnerContent = _ref2 => {
+const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     label,
     labelPosition,
@@ -52,6 +52,7 @@ const SpinnerContent = _ref2 => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     overlay: overlay,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 3,
       tokens: {
@@ -71,7 +72,8 @@ const SpinnerContent = _ref2 => {
       })]
     })
   });
-};
+});
+SpinnerContent.displayName = 'SpinnerContent';
 SpinnerContent.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/StoryCard/StoryCard.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
 
@@ -56,7 +54,7 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const StoryCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tag,
     date,