@telus-uds/components-web 3.2.1 → 3.4.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 21:06:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.4.0
+
+Wed, 22 Jan 2025 21:06:14 GMT
+
+### Minor changes
+
+- `Badge`: new size variant (sergio.ramirez@telus.com)
+- `SSR`: add router property (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v2.5.0
+
+### Patches
+
+- `TermsAndConditions`: throws nested button error as `Pressable` tends to render as a `button` rather than a `div` with `button` role (shahzaibkhalidmalik@outlook.com)
+- `Tooltip`: Customized/optional props interface types update (shivam.gupta3@telus.com)
+- `Callout`: include `tokens` to type definition. (jaime.tuyuc@telus.com)
+
+## 3.3.0
+
+Fri, 10 Jan 2025 21:49:25 GMT
+
+### Minor changes
+
+- "Search: iconLeftGap value added in the testTheme file for TextInput in Search" (35577399+JoshHC@users.noreply.github.com)
+- `Docs`: fixed camelcase and hardcoded path for components (kristina.kirpichnikova@telus.com)
+- `DatePicker`: update component to enable custom date formats (eduardo.pereira1@telus.com)
+- `PriceLockup`: new tokens `centsPaddingTop` and `currencySymbolPaddingTop` added to the component to match with Koodo design in the micro variant (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v2.4.0
+- Bump @telus-uds/system-theme-tokens to v3.3.0
+
+### Patches
+
+- "`DatePicker`: calendar position issue rendered incorrectly fixed" (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.2.1
 
-Thu, 19 Dec 2024 04:54:39 GMT
+Thu, 19 Dec 2024 05:02:20 GMT
 
 ### Patches
 

package/lib/Badge/Badge.js

@@ -22,6 +22,8 @@ const BadgeContainer = styled.div`
 }};
   display: inline-flex;
   justify-content: center;
+  align-items: center;
+  height: fit-content;
   padding: ${_ref3 => {
   let {
     padding

package/lib/Card/Card.js

@@ -92,9 +92,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const {
     borderRadius
   } = useThemeTokens('Card', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+    ...(interactiveCard?.variant || {})
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
@@ -118,7 +118,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     display: imgColCurrentViewport === 0 ? 'none' : undefined
   };
   const columnFlex = {
-    flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
+    flexGrow: interactiveCard?.body ? 0 : 1,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
@@ -140,13 +140,13 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     tokens: restOfTokens,
     backgroundImage: backgroundImage,
     ...selectProps(rest),
-    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+    children: [interactiveCard?.body ? /*#__PURE__*/_jsx(PressableCardBase, {
       ref: ref,
       tokens: getThemeTokens,
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
+      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {

package/lib/DatePicker/DatePicker.js

@@ -14,8 +14,6 @@ const {
   styled
 } = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const dateFormat = 'DD / MM / YYYY';
-const dateFormatWithoutSpaces = 'DD/MM/YYYY';
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
@@ -55,7 +53,6 @@ const PortalPositionedContainer = styled.div({
     return `${top}px`;
   }
 });
-const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   if (initialVisibleMonth === '' || inputDate instanceof moment) {
     return null;
@@ -85,11 +82,11 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
  * - Recommended for viewports greater than or equal to 576px
  */
 const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  var _dictionary$copy;
   let {
     copy = 'en',
     id,
     date,
+    dateFormat = 'DD / MM / YYYY',
     feedback,
     inline = false,
     isDayDisabled,
@@ -104,12 +101,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     disabled = false,
     prevTestID = '',
     nextTestID = '',
-    placeholder = 'DD / MM / YYYY',
+    placeholder = dateFormat,
     initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = React.useState(date instanceof moment ? date.format(dateFormat) : '');
+  const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '');
   const textInputRef = React.useRef();
   const prevButtonRef = React.useRef();
   const [datePickerPosition, setDatePickerPosition] = React.useState({
@@ -119,7 +117,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const datePickerRef = React.useRef(null);
   useSafeLayoutEffect(() => {
     const updateDatePickerPosition = () => {
-      if (inline || !(textInputRef !== null && textInputRef !== void 0 && textInputRef.current)) return;
+      if (inline || !textInputRef?.current) return;
       const {
         left,
         top
@@ -136,7 +134,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     });
 
     // Initial call to set the position
-    updateDatePickerPosition();
+    throttledUpdate();
 
     // Register event listeners
     window.addEventListener('resize', throttledUpdate);
@@ -165,7 +163,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       setInputDate(date);
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
-  }, [date, inputDate]);
+  }, [date, inputDate, dateFormat]);
   React.useEffect(() => {
     let timeoutId;
     if (prevButtonRef.current && isFocused) {
@@ -175,8 +173,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }, [isFocused]);
   React.useEffect(() => {
     if (inputText !== '' && inputDate !== undefined) {
-      var _textInputRef$current;
-      textInputRef === null || textInputRef === void 0 || (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 || _textInputRef$current.focus();
+      textInputRef?.current?.focus();
     }
   }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
@@ -217,10 +214,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     if (value === '' || moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
       if (value === '') {
         setInputDate(undefined); // Set inputDate to undefined if input is empty
-        onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+        onDateChange?.(undefined);
       } else {
         setInputDate(moment(value, dateFormat));
-        onDateChange === null || onDateChange === void 0 || onDateChange(moment(value, dateFormat));
+        onDateChange?.(moment(value, dateFormat));
       }
       setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
@@ -230,11 +227,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const handleOnKeyPress = event => {
     if (event.key === 'Backspace' && inputText === '') {
       setInputDate(undefined);
-      onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+      onDateChange?.(undefined);
     }
   };
   const handleValidation = inputValidation => {
-    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+    const momentDate = moment(inputText, dateFormat, true);
+    const isValidDate = momentDate.isValid();
+    if (!isValidDate && inputText !== '') {
       return 'error';
     }
     if (inputValidation === 'error' || inputValidation === 'success') {
@@ -368,7 +367,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
-        label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
+        label: label ?? dictionary[copy]?.roleDescription,
         value: inputText,
         validation: handleValidation(validation),
         inactive: disabled,
@@ -443,8 +442,11 @@ DatePicker.propTypes = {
    */
   date: momentPropTypes.momentObj,
   /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
    */
   feedback: PropTypes.string,
   /**
@@ -499,7 +501,7 @@ DatePicker.propTypes = {
    */
   nextTestID: PropTypes.string,
   /**
-   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
    */
   placeholder: PropTypes.string,
   /**

package/lib/Footnote/Footnote.js

@@ -220,7 +220,6 @@ const usePrevious = value => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _theme$themeOptions;
   const {
     copy = 'en',
     number,
@@ -290,7 +289,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const prevProps = usePrevious(props);
   const theme = useTheme();
-  const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const maxWidth = useResponsiveProp(theme.themeOptions?.contentMaxWidth);
   const [isScrollable, setIsScrollable] = React.useState(false);
   const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
@@ -304,7 +303,6 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
    * if there are no interactive elements the focus will remain inside the close button.
    */
   const manageFootnoteFocusAndClose = React.useCallback(event => {
-    var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
     }
@@ -325,11 +323,11 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
           firstElement.focus();
         }
       }
-    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef?.current && event.target && !footnoteRef?.current?.contains(event.target) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
-    } else if (event.type === 'touchstart' && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.touches[0].target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current2 = footnoteRef.current) !== null && _footnoteRef$current2 !== void 0 && _footnoteRef$current2.contains(event.touches[0].target)) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if (event.type === 'touchstart' && footnoteRef?.current && event.touches[0].target && !footnoteRef?.current?.contains(event.touches[0].target) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
@@ -381,8 +379,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Set height of header on mount
   React.useEffect(() => {
-    var _headerRef$current;
-    setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
+    setHeaderHeight(headerRef.current?.offsetHeight);
   }, []);
   const preventDefault = event => {
     if (!bodyRef.current.contains(event.touches[0].target)) {

package/lib/NavigationBar/NavigationBar.js

@@ -1,4 +1,3 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
@@ -59,14 +58,14 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         let {
           items: parentItems
         } = _ref3;
-        return parentItems === null || parentItems === void 0 ? void 0 : parentItems.some(_ref4 => {
+        return parentItems?.some(_ref4 => {
           let {
             href
           } = _ref4;
           return hash === href;
         });
       });
-      hashItem = parentItem === null || parentItem === void 0 ? void 0 : parentItem.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref5 => {
         let {
           href
         } = _ref5;
@@ -87,14 +86,13 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const openOverlayRef = React.useRef(null);
   const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
   const handleSubMenuClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setOpenSubMenuId(null);
       }
-    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+    } else if (event.type === 'click' && openOverlayRef?.current && event.target && !openOverlayRef?.current?.contains(event.target)) {
       setOpenSubMenuId(null);
-    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+    } else if (event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
       setOpenSubMenuId(null);
     }
   };
@@ -155,7 +153,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref6, index) => {
       let {
         href,
         label,
@@ -173,22 +171,22 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
           return;
         }
-        if (href !== null && href !== void 0 && href.startsWith('#')) {
+        if (href?.startsWith('#')) {
           scrollToAnchor(href, event, () => setValue(itemId, event));
         } else {
           setValue(itemId, event);
         }
-        onClick === null || onClick === void 0 || onClick(event);
+        onClick?.(event);
       };
       const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
-      const scrollableNestedItems = (nestedItems === null || nestedItems === void 0 ? void 0 : nestedItems.map(item => ({
+      const scrollableNestedItems = nestedItems?.map(item => ({
         ...item,
         onPress: event => {
           const nestedItemId = item.id ?? item.label;
           scrollToAnchor(item.href, event, () => setValue(nestedItemId, event));
         }
-      }))) ?? nestedItems;
+      })) ?? nestedItems;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
@@ -235,8 +233,8 @@ NavigationBar.propTypes = {
     id: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     selected: PropTypes.bool,
-    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,
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps,
     // One layer of nested links is allowed
     items: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.string.isRequired,
@@ -244,8 +242,8 @@ NavigationBar.propTypes = {
       id: PropTypes.string.isRequired,
       onClick: PropTypes.func,
       selected: PropTypes.bool,
-      LinkRouter: (_withLinkRouter$propT3 = withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
-      linkRouterProps: (_withLinkRouter$propT4 = withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+      LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+      linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
     }))
   })).isRequired,
   /**

package/lib/NavigationBar/NavigationSubMenu.js

@@ -99,7 +99,6 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       icon: icoMenu,
       tokens: tokens,
       children: _ref2 => {
-        var _textStyles$;
         let {
           textStyles
         } = _ref2;
@@ -109,7 +108,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
+            color: textStyles[0]?.color
           }
         }, `${id}_icon`)];
       }

package/lib/NavigationBar/collapseItems.js

@@ -2,7 +2,7 @@
  * Make a list of items into a one-item list where all items are nested under the first item
  */
 const collapseItems = (items, selectedId) => {
-  if (!(items !== null && items !== void 0 && items.length)) return items;
+  if (!items?.length) return items;
 
   // Give the root item the label of the current active link
   // (or the first item if for some reason there's no match on the selectedId)
@@ -17,12 +17,11 @@ const collapseItems = (items, selectedId) => {
 
   // Linter doesn't like for loops, simulate loop that breaks
   items.some(item => {
-    var _item$items;
     if (isSelected(item)) {
       rootLabel = item.label;
       return true; // break
     }
-    const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
+    const nestedMatch = item.items?.find(isSelected);
     if (nestedMatch) {
       rootLabel = nestedMatch.label;
       return true; // break

package/lib/NavigationBar/resolveItemSelection.js

@@ -7,7 +7,7 @@ const resolveItemSelection = (_ref, selectedId) => {
   const itemId = id ?? label;
 
   // Treat item as selected if it or any nested child matches the selected id
-  const selected = Boolean(selectedId === itemId || (items === null || items === void 0 ? void 0 : items.some(item => resolveItemSelection(item, selectedId).selected)));
+  const selected = Boolean(selectedId === itemId || items?.some(item => resolveItemSelection(item, selectedId).selected));
   return {
     itemId,
     selected

package/lib/OrderedList/OrderedList.js

@@ -38,9 +38,8 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariantsAndTokens = React.useMemo(() => {
     const addVariantAndTokensToProps = child => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         variant: {
           ...existingChildVariants,

package/lib/PriceLockup/PriceLockup.js

@@ -117,13 +117,22 @@ const StrikeThroughContainer = styled.div`
     position: absolute;
   }
 `;
-const selectFootnoteLinkStyles = _ref13 => {
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${_ref13 => {
+  let {
+    paddingTop
+  } = _ref13;
+  return `${paddingTop || 0}px`;
+}};
+`;
+const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref13;
+  } = _ref14;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -131,19 +140,19 @@ const selectFootnoteLinkStyles = _ref13 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref14 => {
+const selectStrikeThroughTokens = _ref15 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref14;
+  } = _ref15;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -160,7 +169,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref15;
+  } = _ref16;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -193,6 +202,10 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
   const renderTypography = (value, tokens, position) => {
+    const {
+      paddingTop,
+      ...restOfTokens
+    } = tokens;
     const customProps = position === 'bottom' ? {
       variant: {
         size: 'micro'
@@ -202,13 +215,16 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
       }
     } : {
       tokens: {
-        ...tokens,
+        ...restOfTokens,
         color: fontColor
       }
     };
-    return /*#__PURE__*/_jsx(Typography, {
-      ...customProps,
-      children: value
+    return /*#__PURE__*/_jsx(TypographyContainer, {
+      paddingTop: paddingTop,
+      children: /*#__PURE__*/_jsx(Typography, {
+        ...customProps,
+        children: value
+      })
     });
   };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);

package/lib/PriceLockup/tokens.js

@@ -7,12 +7,14 @@ export default _ref => {
     currencySymbolFontSize,
     currencySymbolLineHeight,
     currencySymbolFontWeight,
+    currencySymbolPaddingTop,
     amountFontSize,
     amountLineHeight,
     amountLetterSpacing,
     amountFontWeight,
     centsFontSize,
     centsLineHeight,
+    centsPaddingTop,
     rateFontSize,
     rateLineHeight,
     bottomTextFontSize,
@@ -28,7 +30,8 @@ export default _ref => {
     dollarSign: {
       fontSize: currencySymbolFontSize,
       lineHeight: currencySymbolLineHeight,
-      fontWeight: currencySymbolFontWeight
+      fontWeight: currencySymbolFontWeight,
+      paddingTop: currencySymbolPaddingTop
     },
     amount: {
       color: fontColor,
@@ -40,7 +43,8 @@ export default _ref => {
     cents: {
       fontSize: centsFontSize,
       lineHeight: centsLineHeight,
-      fontWeight: centsFontWeight
+      fontWeight: centsFontWeight,
+      paddingTop: centsPaddingTop
     },
     rate: {
       fontSize: rateFontSize,

package/lib/SkeletonProvider/SkeletonImage.js

@@ -1,4 +1,3 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
@@ -30,9 +29,9 @@ SkeletonImage.displayName = 'SkeletonImage';
 SkeletonImage.propTypes = {
   imgHeight: PropTypes.number,
   rounded: PropTypes.oneOf(['circle', 'corners']),
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
   show: PropTypes.bool.isRequired,
   children: PropTypes.node
 };

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -1,4 +1,3 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
@@ -29,10 +28,10 @@ SkeletonTypography.displayName = 'SkeletonTypography';
 SkeletonTypography.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.node,
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  characters: (_Skeleton$propTypes4 = Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
-  lines: (_Skeleton$propTypes5 = Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
+  characters: Skeleton.propTypes?.characters,
+  lines: Skeleton.propTypes?.lines
 };
 export default SkeletonTypography;

package/lib/Table/Table.js

@@ -62,9 +62,8 @@ const Table = _ref2 => {
   const [tableWidth, setTableWidth] = React.useState(0);
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      var _containerRef$current, _tableRef$current;
-      const containerClientWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth;
-      const responsiveTableWidth = fullWidth ? containerClientWidth : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth;
+      const containerClientWidth = containerRef.current?.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth;
       setContainerWidth(containerClientWidth);
       setTableWidth(responsiveTableWidth);
     };

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -114,7 +114,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
               },
               tokens: iconTokens,
               focusable: false,
-              accessibilityLabel: label
+              accessibilityLabel: label,
+              accessibilityRole: "none"
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),

package/lib/Toast/Toast.js

@@ -1,4 +1,3 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
@@ -201,8 +200,8 @@ Toast.propTypes = {
   link: PropTypes.shape({
     href: PropTypes.string.isRequired,
     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
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
   })
 };
 export default Toast;