@telus-uds/components-web 2.17.2 → 2.18.0

package/lib/Autocomplete/Autocomplete.js

@@ -401,7 +401,30 @@ Autocomplete.propTypes = { ...selectedSystemPropTypes,
   /**
    * Input value for controlled usage
    */
-  value: _propTypes.default.string
+  value: _propTypes.default.string,
+
+  /**
+   * Can be used to set the initial items of the component
+   */
+  initialItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+
+  /**
+   * Initial value for the component
+   */
+  initialValue: _propTypes.default.string,
+
+  /**
+   * Boolean to set if it's readonly or not
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
 };
 var _default = Autocomplete;
 exports.default = _default;

package/lib/Badge/Badge.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/BlockQuote/BlockQuote.js

@@ -195,6 +195,15 @@ const BlockQuote = _ref8 => {
 
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.withLinkRouter.propTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('BlockQuote'),
+  variant: _propTypes.default.exact({
+    alternative: _propTypes.default.bool,
+    size: _propTypes.default.string
+  }),
+
+  /**
+   * Children nodes that can be added
+   */
   children: _propTypes.default.node.isRequired,
 
   /**

package/lib/Callout/Callout.js

@@ -136,11 +136,16 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Callout'),
 
   /**
    * Icon to display on the left side of the Callout
    */
   icon: _propTypes.default.elementType,
+
+  /**
+   * Children nodes that can be added
+   */
   children: _propTypes.default.node.isRequired,
 
   /**

package/lib/DatePicker/DatePicker.js

@@ -122,6 +122,8 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant = {},
     validation,
     disabled,
+    prevTestID,
+    nextTestID,
     ...rest
   } = _ref;
   const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
@@ -237,7 +239,8 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       icon: previousIcon,
       variant: {
         size: 'small'
-      }
+      },
+      testID: prevTestID
     });
   };
 
@@ -252,7 +255,8 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       icon: nextIcon,
       variant: {
         size: 'small'
-      }
+      },
+      testID: nextTestID
     });
   };
 
@@ -423,7 +427,21 @@ DatePicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * Disable the input which will not open the calendar picker
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * A unique identifier for the previous icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-prev` attribute for example.
+   */
+  prevTestID: _propTypes.default.string,
+
+  /**
+   * A unique identifier for the next icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-next` attribute for example.
+   */
+  nextTestID: _propTypes.default.string
 };
 DatePicker.defaultProps = {
   copy: 'en',
@@ -437,7 +455,9 @@ DatePicker.defaultProps = {
   tooltip: undefined,
   onDateChange: () => {},
   validation: undefined,
-  disabled: false
+  disabled: false,
+  prevTestID: '',
+  nextTestID: ''
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/Disclaimer/Disclaimer.js

@@ -62,6 +62,10 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Children nodes that can be added
+   */
   children: _propTypes.default.node.isRequired
 };
 var _default = Disclaimer;

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -75,10 +75,16 @@ ExpandCollapseMini.propTypes = { ..._ExpandCollapseMiniControl.default.propTypes
    * ID for DOM element on web
    */
   nativeID: _propTypes.default.string,
-  children: _propTypes.default.node.isRequired
+
+  /**
+   * Children nodes that can be added
+   */
+  children: _propTypes.default.node.isRequired,
+  tokens: (0, _componentsBase.getTokensPropType)('ExpandCollapseMini')
 };
 ExpandCollapseMini.defaultProps = {
   onToggle: () => {},
+  tokens: {},
   nativeID: ''
 };
 var _default = ExpandCollapseMini;

package/lib/Listbox/Listbox.js

@@ -172,7 +172,13 @@ Listbox.propTypes = { ..._componentsBase.withLinkRouter.propTypes,
   /**
    * To select an item by default
    */
-  selectedId: _propTypes.default.string
+  selectedId: _propTypes.default.string,
+
+  /**
+   * onClose event
+   */
+  onClose: _propTypes.default.func,
+  tokens: (0, _componentsBase.getTokensPropType)('Listbox')
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = Listbox;

package/lib/NavigationBar/NavigationBar.js

@@ -224,12 +224,18 @@ NavigationBar.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional function to be called on pressing a link
    */
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+
+  /**
+   * Accesibility role for stackview
+   */
+  accessibilityRole: _propTypes.default.string
 };
 NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
-  onChange: () => {}
+  onChange: () => {},
+  accessibilityRole: ''
 };
 var _default = NavigationBar;
 exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -84,10 +84,12 @@ OrderedList.propTypes = { ...selectedSystemPropTypes,
   /**
    * The position to start the list with.
    */
-  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  variant: _componentsBase.variantProp.propType
 };
 OrderedList.defaultProps = {
-  start: 1
+  start: 1,
+  variant: {}
 };
 OrderedList.Item = _Item.default;
 var _default = OrderedList;

package/lib/Ribbon/Ribbon.js

@@ -230,7 +230,8 @@ Ribbon.propTypes = { ...selectedSystemPropTypes,
   left: _propTypes.default.number,
 
   /** sets the top offset (triggers absolute positioning) */
-  top: _propTypes.default.number
+  top: _propTypes.default.number,
+  tokens: (0, _componentsBase.getTokensPropType)('Ribbon')
 };
 var _default = Ribbon;
 exports.default = _default;

package/lib/Toast/Toast.js

@@ -179,7 +179,8 @@ 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/Video/Video.js

@@ -1054,7 +1054,9 @@ Video.propTypes = { ...selectedSystemPropTypes,
    * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
    * @since 1.3.0
    */
-  videoTitle: _propTypes.default.string
+  videoTitle: _propTypes.default.string,
+  tokens: (0, _componentsBase.getTokensPropType)('Video'),
+  variant: _componentsBase.variantProp.propType
 };
 Video.defaultProps = {
   tracks: undefined,

package/lib/WaffleGrid/WaffleGrid.js

@@ -30,19 +30,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 DEFAULT_ROW_SIZE = {
-  sm: 2,
-  lg: 3,
-  xl: 6
-};
 
-const row = (rowSize, rowBorderSize) => ({
+const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
   [`:not(:nth-of-type(${rowSize}n + 1))`]: {
-    borderLeftWidth: `${rowBorderSize}px`
+    borderLeftWidth: `${rowBorderWidth}px`
   },
   [`:nth-of-type(n+${rowSize + 1})`]: {
-    borderTopWidth: `${rowBorderSize}px`
+    borderTopWidth: `${rowBorderWidth}px`
   }
 });
 
@@ -67,9 +62,11 @@ const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).with
   } = _ref;
   return {
     display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 0,
-    flexShrink: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
     padding: `${itemPadding}px`,
     boxSizing: 'border-box',
     borderStyle: 'solid',
@@ -97,24 +94,24 @@ const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
 const WaffleGrid = _ref2 => {
   let {
     items,
-    rowSize = DEFAULT_ROW_SIZE,
+    rowSize = null,
     LinkRouter,
     tokens,
     variant,
     linkRouterProps,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _componentsBase.useThemeTokens)('WaffleGrid', tokens, variant);
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('WaffleGrid', tokens, variant, {
+    viewport
+  });
   const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, { ...selectProps(rest),
     children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, { ...themeTokens,
       key: child.href,
-      rowSize: currentRowSize
+      rowSize: rowSize ? currentRowSize : themeTokens.rowSize
     }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
       href: child.href,
-      variant: {
-        alternative: true
-      },
       LinkRouter: child.LinkRouter || LinkRouter,
       linkRouterProps: { ...linkRouterProps,
         ...child.linkRouterProps
@@ -126,10 +123,13 @@ const WaffleGrid = _ref2 => {
         (0, _jsxRuntime.jsx)(_Image.default, {
           src: child.image,
           alt: child.imageAltText,
-          width: 64,
-          height: 64
+          width: 96,
+          height: 128
         }) : // Otherwise it must be an arbitrary content, which we just display by itself
-        child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            weight: 'semibold'
+          },
           children: child.text
         })]
       })

package/lib-module/Autocomplete/Autocomplete.js

@@ -378,6 +378,29 @@ Autocomplete.propTypes = { ...selectedSystemPropTypes,
   /**
    * Input value for controlled usage
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+
+  /**
+   * Can be used to set the initial items of the component
+   */
+  initialItems: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  })),
+
+  /**
+   * Initial value for the component
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * Boolean to set if it's readonly or not
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
 };
 export default Autocomplete;

package/lib-module/Badge/Badge.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
-import styled from 'styled-components';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);

package/lib-module/BlockQuote/BlockQuote.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport } from '@telus-uds/components-base';
+import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -179,6 +179,15 @@ const BlockQuote = _ref8 => {
 
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('BlockQuote'),
+  variant: PropTypes.exact({
+    alternative: PropTypes.bool,
+    size: PropTypes.string
+  }),
+
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired,
 
   /**

package/lib-module/Callout/Callout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -122,11 +122,16 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Callout'),
 
   /**
    * Icon to display on the left side of the Callout
    */
   icon: PropTypes.elementType,
+
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired,
 
   /**

package/lib-module/DatePicker/DatePicker.js

@@ -95,6 +95,8 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant = {},
     validation,
     disabled,
+    prevTestID,
+    nextTestID,
     ...rest
   } = _ref;
   const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
@@ -208,7 +210,8 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       icon: previousIcon,
       variant: {
         size: 'small'
-      }
+      },
+      testID: prevTestID
     });
   };
 
@@ -223,7 +226,8 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       icon: nextIcon,
       variant: {
         size: 'small'
-      }
+      },
+      testID: nextTestID
     });
   };
 
@@ -394,7 +398,21 @@ DatePicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * Disable the input which will not open the calendar picker
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * A unique identifier for the previous icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-prev` attribute for example.
+   */
+  prevTestID: PropTypes.string,
+
+  /**
+   * A unique identifier for the next icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-next` attribute for example.
+   */
+  nextTestID: PropTypes.string
 };
 DatePicker.defaultProps = {
   copy: 'en',
@@ -408,6 +426,8 @@ DatePicker.defaultProps = {
   tooltip: undefined,
   onDateChange: () => {},
   validation: undefined,
-  disabled: false
+  disabled: false,
+  prevTestID: '',
+  nextTestID: ''
 };
 export default DatePicker;

package/lib-module/Disclaimer/Disclaimer.js

@@ -45,6 +45,10 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired
 };
 export default Disclaimer;

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse } from '@telus-uds/components-base';
+import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -57,10 +57,16 @@ ExpandCollapseMini.propTypes = { ...ExpandCollapseMiniControl.propTypes,
    * ID for DOM element on web
    */
   nativeID: PropTypes.string,
-  children: PropTypes.node.isRequired
+
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  tokens: getTokensPropType('ExpandCollapseMini')
 };
 ExpandCollapseMini.defaultProps = {
   onToggle: () => {},
+  tokens: {},
   nativeID: ''
 };
 export default ExpandCollapseMini;

package/lib-module/Listbox/Listbox.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { ExpandCollapse, useThemeTokens, withLinkRouter, ListboxContext } from '@telus-uds/components-base';
+import { ExpandCollapse, useThemeTokens, withLinkRouter, ListboxContext, getTokensPropType } from '@telus-uds/components-base';
 import ListboxGroup from './ListboxGroup';
 import ListboxItem from './ListboxItem';
 import DropdownOverlay from './ListboxOverlay';
@@ -152,7 +152,13 @@ Listbox.propTypes = { ...withLinkRouter.propTypes,
   /**
    * To select an item by default
    */
-  selectedId: PropTypes.string
+  selectedId: PropTypes.string,
+
+  /**
+   * onClose event
+   */
+  onClose: PropTypes.func,
+  tokens: getTokensPropType('Listbox')
 };
 Listbox.Overlay = DropdownOverlay;
 export default Listbox;

package/lib-module/NavigationBar/NavigationBar.js

@@ -201,11 +201,17 @@ NavigationBar.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional function to be called on pressing a link
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+
+  /**
+   * Accesibility role for stackview
+   */
+  accessibilityRole: PropTypes.string
 };
 NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
-  onChange: () => {}
+  onChange: () => {},
+  accessibilityRole: ''
 };
 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 } 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';
@@ -62,10 +62,12 @@ OrderedList.propTypes = { ...selectedSystemPropTypes,
   /**
    * The position to start the list with.
    */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType
 };
 OrderedList.defaultProps = {
-  start: 1
+  start: 1,
+  variant: {}
 };
 OrderedList.Item = Item;
 export default OrderedList;

package/lib-module/Ribbon/Ribbon.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -213,6 +213,7 @@ Ribbon.propTypes = { ...selectedSystemPropTypes,
   left: PropTypes.number,
 
   /** sets the top offset (triggers absolute positioning) */
-  top: PropTypes.number
+  top: PropTypes.number,
+  tokens: getTokensPropType('Ribbon')
 };
 export default Ribbon;

package/lib-module/Toast/Toast.js

@@ -2,7 +2,7 @@ var _withLinkRouter$propT, _withLinkRouter$propT2;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport } from '@telus-uds/components-base';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled, { keyframes, css } from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -161,6 +161,7 @@ Toast.propTypes = { ...selectedSystemPropTypes,
     text: PropTypes.string.isRequired,
     LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
     linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
-  })
+  }),
+  tokens: getTokensPropType('Toast')
 };
 export default Toast;

package/lib-module/Video/Video.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import fscreen from 'fscreen';
-import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import { useThemeTokens, selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
 import Spinner from '../Spinner';
 import { warn, htmlAttrs } from '../utils';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
@@ -1025,7 +1025,9 @@ Video.propTypes = { ...selectedSystemPropTypes,
    * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
    * @since 1.3.0
    */
-  videoTitle: PropTypes.string
+  videoTitle: PropTypes.string,
+  tokens: getTokensPropType('Video'),
+  variant: variantProp.propType
 };
 Video.defaultProps = {
   tracks: undefined,