@telus-uds/components-web 2.19.5 → 2.20.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 27 Sep 2023 20:45:15 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Oct 2023 22:48:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.20.1
+
+Mon, 16 Oct 2023 22:48:33 GMT
+
+### Patches
+
+- new stories for border radius variant for card (mauricio.batresmontejo@telus.com)
+- allow custom height input in image component (evander.owusu@telus.com)
+
+## 2.20.0
+
+Wed, 04 Oct 2023 18:39:58 GMT
+
+### Minor changes
+
+- update components web imports (evander.owusu@telus.com)
+- Bump @telus-uds/components-base to v1.63.0
+
 ## 2.19.5
 
-Wed, 27 Sep 2023 20:45:15 GMT
+Wed, 27 Sep 2023 20:47:22 GMT
 
 ### Patches
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -211,6 +211,7 @@ const Breadcrumbs = _ref2 => {
 };
 
 Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Breadcrumbs'),
   ..._componentsBase.withLinkRouter.propTypes,
 
   /**

package/lib/Countdown/Countdown.js

@@ -180,6 +180,7 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 Countdown.displayName = 'Countdown';
 Countdown.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Countdown'),
 
   /**
    * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with

package/lib/DatePicker/DatePicker.js

@@ -359,6 +359,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('DatePicker'),
 
   /**
    * A unique identifier.
@@ -456,6 +457,7 @@ DatePicker.defaultProps = {
   onDateChange: () => {},
   validation: undefined,
   disabled: false,
+  tokens: undefined,
   prevTestID: '',
   nextTestID: ''
 };

package/lib/Disclaimer/Disclaimer.js

@@ -62,10 +62,7 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Children nodes that can be added
-   */
+  tokens: (0, _componentsBase.getTokensPropType)('Disclaimer'),
   children: _propTypes.default.node.isRequired
 };
 var _default = Disclaimer;

package/lib/Footnote/Footnote.js

@@ -602,6 +602,7 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 
 Footnote.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Footnote'),
 
   /**
    * The content.

package/lib/IconButton/IconButton.js

@@ -59,6 +59,7 @@ const propsWithoutIcon = _ref2 => {
 };
 
 IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+  tokens: (0, _componentsBase.getTokensPropType)('IconButton'),
 
   /**
    * To set the icon to a multi-brand compatabile icon
@@ -72,7 +73,8 @@ IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propType
   icon: _propTypes.default.func
 };
 IconButton.defaultProps = {
-  icon: null
+  icon: null,
+  tokens: {}
 };
 var _default = IconButton;
 exports.default = _default;

package/lib/Image/Image.js

@@ -24,18 +24,23 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const StyledImage = /*#__PURE__*/_styledComponents.default.img.withConfig({
   displayName: "Image__StyledImage",
   componentId: "components-web__sc-blwu4l-0"
-})({
-  height: 'auto',
-  maxWidth: '100%'
+})(_ref => {
+  let {
+    height
+  } = _ref;
+  return {
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
 });
 
 const StyledRoundedImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
   displayName: "Image__StyledRoundedImage",
   componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref => {
+})(["border-radius:", "px;"], _ref2 => {
   let {
     borderRadius
-  } = _ref;
+  } = _ref2;
   return borderRadius;
 });
 const StyledCircularImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
@@ -45,7 +50,7 @@ const StyledCircularImage = /*#__PURE__*/(0, _styledComponents.default)(StyledIm
   borderRadius: '50%'
 });
 
-const Image = _ref2 => {
+const Image = _ref3 => {
   let {
     src,
     width,
@@ -56,7 +61,7 @@ const Image = _ref2 => {
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const {
     borderRadius
   } = (0, _componentsBase.useThemeTokens)('Image', tokens, variant);
@@ -120,7 +125,8 @@ Image.propTypes = { ...selectedSystemPropTypes,
   /**
    * Make image render as a circle or with rounded corners.
    */
-  rounded: _propTypes.default.oneOf(['circle', 'corners'])
+  rounded: _propTypes.default.oneOf(['circle', 'corners']),
+  tokens: (0, _componentsBase.getTokensPropType)('Image')
 };
 var _default = Image;
 exports.default = _default;

package/lib/NavigationBar/NavigationBar.js

@@ -176,6 +176,7 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
   ..._componentsBase.withLinkRouter.propTypes,
 
   /**
@@ -235,7 +236,8 @@ NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
   onChange: () => {},
-  accessibilityRole: ''
+  accessibilityRole: '',
+  tokens: {}
 };
 var _default = NavigationBar;
 exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -75,6 +75,7 @@ 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`.
@@ -89,6 +90,7 @@ OrderedList.propTypes = { ...selectedSystemPropTypes,
 };
 OrderedList.defaultProps = {
   start: 1,
+  tokens: {},
   variant: {}
 };
 OrderedList.Item = _Item.default;

package/lib/PreviewCard/PreviewCard.js

@@ -188,6 +188,7 @@ PreviewCard.displayName = 'PreviewCard'; // Provide standard author/date footer
 
 PreviewCard.AuthorDate = _AuthorDate.default;
 PreviewCard.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('PreviewCard'),
 
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within

package/lib/Ribbon/Ribbon.js

@@ -219,6 +219,7 @@ const Ribbon = _ref18 => {
 };
 
 Ribbon.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),
   children: _propTypes.default.node,
 
   /** show/hide the ribbon fold
@@ -230,8 +231,7 @@ Ribbon.propTypes = { ...selectedSystemPropTypes,
   left: _propTypes.default.number,
 
   /** sets the top offset (triggers absolute positioning) */
-  top: _propTypes.default.number,
-  tokens: (0, _componentsBase.getTokensPropType)('Ribbon')
+  top: _propTypes.default.number
 };
 var _default = Ribbon;
 exports.default = _default;

package/lib/Spinner/Spinner.js

@@ -198,6 +198,7 @@ const Spinner = _ref3 => {
 };
 
 Spinner.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Spinner'),
 
   /**
    * Content to be overlaid while the spinner is active. Can be text, any HTML element,

package/lib/StoryCard/StoryCard.js

@@ -188,6 +188,7 @@ const StoryCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 StoryCard.displayName = 'StoryCard';
 StoryCard.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('StoryCard'),
 
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within

package/lib/Table/Table.js

@@ -128,6 +128,7 @@ const Table = _ref2 => {
 };
 
 Table.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Table'),
   children: _propTypes.default.node,
 
   /**

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -221,6 +221,11 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
     nonIndexedTitle: _propTypes.default.string
   })]),
 
+  /**
+   * Sets the tokens for TermsAndConditions element.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('TermsAndConditions'),
+
   /**
    * An array of nodes, strings, or a combination to be displayed in an ordered list.
    *
@@ -247,7 +252,8 @@ TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
   nonIndexedContent: [],
-  dictionary: _dictionary.default
+  dictionary: _dictionary.default,
+  tokens: {}
 };
 var _default = TermsAndConditions;
 exports.default = _default;

package/lib/Testimonial/Testimonial.js

@@ -223,6 +223,7 @@ const Testimonial = _ref5 => {
 };
 
 Testimonial.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Testimonial'),
 
   /**
    * Testimonial content

package/lib/Toast/Toast.js

@@ -155,6 +155,7 @@ const Toast = _ref5 => {
 };
 
 Toast.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Toast'),
 
   /**
    * If true, the toast will be displayed
@@ -179,8 +180,7 @@ Toast.propTypes = { ...selectedSystemPropTypes,
     text: _propTypes.default.string.isRequired,
     LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
     linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
-  }),
-  tokens: (0, _componentsBase.getTokensPropType)('Toast')
+  })
 };
 var _default = Toast;
 exports.default = _default;

package/lib/VideoPicker/VideoPicker.js

@@ -163,6 +163,7 @@ const VideoPicker = _ref6 => {
 };
 
 VideoPicker.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('VideoPicker'),
 
   /**
    * Id of the currently selected video (defaults to the first video if not set).

package/lib/WaffleGrid/WaffleGrid.js

@@ -166,6 +166,11 @@ WaffleGrid.propTypes = { ...selectedSystemPropTypes,
     ..._componentsBase.withLinkRouter.propTypes
   })).isRequired,
 
+  /**
+   * Sets the tokens for WaffleGrid element.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('WaffleGrid'),
+
   /**
    * Row size, optionally depending on the viewport
    */

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter } from '@telus-uds/components-base';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import Item from './Item/Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -193,6 +193,7 @@ const Breadcrumbs = _ref2 => {
 };
 
 Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Breadcrumbs'),
   ...withLinkRouter.propTypes,
 
   /**

package/lib-module/Countdown/Countdown.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
+import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
 import { viewports } from '@telus-uds/system-constants';
 import styled from 'styled-components'; // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
@@ -157,6 +157,7 @@ const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 Countdown.displayName = 'Countdown';
 Countdown.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Countdown'),
 
   /**
    * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with

package/lib-module/DatePicker/DatePicker.js

@@ -5,7 +5,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
+import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
 import moment from 'moment';
 import { isUndefined } from 'lodash';
 import CalendarContainer from './CalendarContainer';
@@ -330,6 +330,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('DatePicker'),
 
   /**
    * A unique identifier.
@@ -427,6 +428,7 @@ DatePicker.defaultProps = {
   onDateChange: () => {},
   validation: undefined,
   disabled: false,
+  tokens: undefined,
   prevTestID: '',
   nextTestID: ''
 };

package/lib-module/Disclaimer/Disclaimer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { applyTextStyles, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
+import { applyTextStyles, selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -45,10 +45,7 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Children nodes that can be added
-   */
+  tokens: getTokensPropType('Disclaimer'),
   children: PropTypes.node.isRequired
 };
 export default Disclaimer;

package/lib-module/Footnote/Footnote.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
-import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
 import defaultDictionary from './dictionary';
@@ -572,6 +572,7 @@ const dictionaryContentShape = PropTypes.shape({
   heading: PropTypes.string.isRequired
 });
 Footnote.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Footnote'),
 
   /**
    * The content.

package/lib-module/IconButton/IconButton.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton as IconButtonBase, useThemeTokens } from '@telus-uds/components-base';
+import { IconButton as IconButtonBase, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
 const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -42,6 +42,7 @@ const propsWithoutIcon = _ref2 => {
 };
 
 IconButton.propTypes = { ...propsWithoutIcon(IconButtonBase.propTypes),
+  tokens: getTokensPropType('IconButton'),
 
   /**
    * To set the icon to a multi-brand compatabile icon
@@ -55,6 +56,7 @@ IconButton.propTypes = { ...propsWithoutIcon(IconButtonBase.propTypes),
   icon: PropTypes.func
 };
 IconButton.defaultProps = {
-  icon: null
+  icon: null,
+  tokens: {}
 };
 export default IconButton;

package/lib-module/Image/Image.js

@@ -1,24 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
+import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { htmlAttrs, warn } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledImage = /*#__PURE__*/styled.img.withConfig({
   displayName: "Image__StyledImage",
   componentId: "components-web__sc-blwu4l-0"
-})({
-  height: 'auto',
-  maxWidth: '100%'
+})(_ref => {
+  let {
+    height
+  } = _ref;
+  return {
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
 });
 const StyledRoundedImage = /*#__PURE__*/styled(StyledImage).withConfig({
   displayName: "Image__StyledRoundedImage",
   componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref => {
+})(["border-radius:", "px;"], _ref2 => {
   let {
     borderRadius
-  } = _ref;
+  } = _ref2;
   return borderRadius;
 });
 const StyledCircularImage = /*#__PURE__*/styled(StyledImage).withConfig({
@@ -28,7 +33,7 @@ const StyledCircularImage = /*#__PURE__*/styled(StyledImage).withConfig({
   borderRadius: '50%'
 });
 
-const Image = _ref2 => {
+const Image = _ref3 => {
   let {
     src,
     width,
@@ -39,7 +44,7 @@ const Image = _ref2 => {
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const {
     borderRadius
   } = useThemeTokens('Image', tokens, variant);
@@ -103,6 +108,7 @@ Image.propTypes = { ...selectedSystemPropTypes,
   /**
    * Make image render as a circle or with rounded corners.
    */
-  rounded: PropTypes.oneOf(['circle', 'corners'])
+  rounded: PropTypes.oneOf(['circle', 'corners']),
+  tokens: getTokensPropType('Image')
 };
 export default Image;

package/lib-module/NavigationBar/NavigationBar.js

@@ -2,7 +2,7 @@ var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _with
 
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
+import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import NavigationItem from './NavigationItem';
@@ -153,6 +153,7 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('NavigationBar'),
   ...withLinkRouter.propTypes,
 
   /**
@@ -212,6 +213,7 @@ NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
   onChange: () => {},
-  accessibilityRole: ''
+  accessibilityRole: '',
+  tokens: {}
 };
 export default NavigationBar;

package/lib-module/OrderedList/OrderedList.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, variantProp } from '@telus-uds/components-base';
+import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
@@ -53,6 +53,7 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 OrderedList.displayName = 'OrderedList';
 OrderedList.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('OrderedList'),
 
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
@@ -67,6 +68,7 @@ OrderedList.propTypes = { ...selectedSystemPropTypes,
 };
 OrderedList.defaultProps = {
   start: 1,
+  tokens: {},
   variant: {}
 };
 OrderedList.Item = Item;

package/lib-module/PreviewCard/PreviewCard.js

@@ -2,7 +2,7 @@
 import React, { forwardRef } 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 } from '@telus-uds/components-base';
+import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 import AuthorDate from './AuthorDate'; // Passes React Native-oriented system props through UDS PressableCardBase
@@ -166,6 +166,7 @@ PreviewCard.displayName = 'PreviewCard'; // Provide standard author/date footer
 
 PreviewCard.AuthorDate = AuthorDate;
 PreviewCard.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('PreviewCard'),
 
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within

package/lib-module/Ribbon/Ribbon.js

@@ -202,6 +202,7 @@ const Ribbon = _ref18 => {
 };
 
 Ribbon.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Ribbon'),
   children: PropTypes.node,
 
   /** show/hide the ribbon fold
@@ -213,7 +214,6 @@ Ribbon.propTypes = { ...selectedSystemPropTypes,
   left: PropTypes.number,
 
   /** sets the top offset (triggers absolute positioning) */
-  top: PropTypes.number,
-  tokens: getTokensPropType('Ribbon')
+  top: PropTypes.number
 };
 export default Ribbon;

package/lib-module/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base';
+import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { Portal } from '@gorhom/portal';
 import SpinnerContent from './SpinnerContent';
 import { htmlAttrs, media } from '../utils';
@@ -177,6 +177,7 @@ const Spinner = _ref3 => {
 };
 
 Spinner.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Spinner'),
 
   /**
    * Content to be overlaid while the spinner is active. Can be text, any HTML element,

package/lib-module/StoryCard/StoryCard.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback } from '@telus-uds/components-base';
+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';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent'; // Passes React Native-oriented system props through UDS PressableCardBase
 
@@ -167,6 +167,7 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 StoryCard.displayName = 'StoryCard';
 StoryCard.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('StoryCard'),
 
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within

package/lib-module/Table/Table.js

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base';
+import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import throttle from 'lodash.throttle';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -101,6 +101,7 @@ const Table = _ref2 => {
 };
 
 Table.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Table'),
   children: PropTypes.node,
 
   /**