@telus-uds/components-web 2.10.0 → 2.12.0

package/lib-module/Listbox/GroupControl.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Icon, Spacer, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, Spacer, useThemeTokens, useListboxContext } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const StyledControlWrapper = /*#__PURE__*/styled.div.withConfig({
@@ -9,32 +9,41 @@ const StyledControlWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1r7ts3q-0"
 })(_ref => {
   let {
-    focus,
-    tokens
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
   } = _ref;
   return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.groupFontSize,
-    color: tokens.groupColor,
-    textDecoration: tokens.itemTextDecoration,
-    backgroundColor: tokens.groupBackgroundColor,
-    outline: tokens.itemOutline,
+    fontFamily: `${groupFontName}${groupFontWeight}normal`,
+    fontSize: groupFontSize,
+    color: groupColor,
+    textDecoration: itemTextDecoration,
+    backgroundColor: groupBackgroundColor,
+    outline: itemOutline,
     width: '100%',
+    height: groupHeight,
     display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
-    ...(focus ? {
-      border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
-      borderRadius: tokens.groupBorderRadius,
-      paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
-    } : {
-      paddingLeft: tokens.groupPaddingLeft,
-      paddingRight: tokens.groupPaddingRight,
-      paddingTop: tokens.groupPaddingTop,
-      paddingBottom: tokens.groupPaddingBottom
-    })
+    boxSizing: 'border-box',
+    border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+    borderRadius: groupBorderRadius,
+    paddingLeft: groupPaddingLeft - groupBorderWidth,
+    paddingRight: groupPaddingRight - groupBorderWidth,
+    paddingTop: groupPaddingTop - groupBorderWidth,
+    paddingBottom: groupPaddingBottom - groupBorderWidth
   };
 });
 
@@ -44,24 +53,31 @@ const GroupControl = _ref2 => {
     pressed,
     hover,
     focus,
-    current,
-    label
+    label,
+    id
   } = _ref2;
-  const tokens = useThemeTokens('ListBox', {}, {}, {
+  const {
+    selectedId,
+    setSelectedId
+  } = useListboxContext();
+  const tokens = useThemeTokens('Listbox', {}, {}, {
     expanded,
     pressed,
     hover,
-    current,
+    current: selectedId === id && id !== undefined,
     focus
   });
   return /*#__PURE__*/_jsxs(StyledControlWrapper, {
-    focus,
-    tokens,
+    onClick: () => setSelectedId(id),
+    ...tokens,
     children: [label, /*#__PURE__*/_jsx(Spacer, {
       space: 1,
       direction: "row"
     }), /*#__PURE__*/_jsx(Icon, {
       icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
       variant: {
         size: 'micro'
       }
@@ -70,11 +86,11 @@ const GroupControl = _ref2 => {
 };
 
 GroupControl.propTypes = {
+  id: PropTypes.string,
   expanded: PropTypes.bool,
   pressed: PropTypes.bool,
   hover: PropTypes.bool,
   focus: PropTypes.bool,
-  current: PropTypes.bool,
   label: PropTypes.string
 };
 export default GroupControl;

package/lib-module/Listbox/Listbox.js

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base';
+import { ExpandCollapse, useThemeTokens, withLinkRouter, ListboxContext } from '@telus-uds/components-base';
 import ListboxGroup from './ListboxGroup';
 import ListboxItem from './ListboxItem';
 import DropdownOverlay from './ListboxOverlay';
-import resolveItemSelection from '../NavigationBar/resolveItemSelection';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledList = /*#__PURE__*/styled.ul.withConfig({
@@ -26,12 +25,19 @@ const Listbox = _ref => {
     // focus will be moved to this one once within the menu
     parentRef = null,
     // to return focus to after leaving the last menu item
-    selectedId,
+    selectedId: defaultSelectedId,
     LinkRouter,
     itemRouterProps,
-    onClose
+    onClose,
+    variant,
+    tokens
   } = _ref;
-  const initialOpen = getInitialOpen(items, selectedId); // We need to keep track of each item's ref in order to be able to
+  const initialOpen = getInitialOpen(items, defaultSelectedId);
+  const [selectedId, setSelectedId] = useState(defaultSelectedId);
+  const {
+    minHeight,
+    minWidth
+  } = useThemeTokens('Listbox', variant, tokens); // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
 
   const itemRefs = useRef([]);
@@ -76,48 +82,50 @@ const Listbox = _ref => {
       window.removeEventListener('touchstart', onClose);
     };
   }, [onClose, handleKeydown]);
-  return /*#__PURE__*/_jsx(ExpandCollapse, {
-    initialOpen: initialOpen,
-    maxOpen: 1,
-    children: expandProps => /*#__PURE__*/_jsx(StyledList, {
-      role: "listbox",
-      children: items.map((item, index) => {
-        const {
-          id,
-          label,
-          items: nestedItems
-        } = item;
-        const {
-          itemId,
-          selected
-        } = resolveItemSelection({
-          id,
-          label,
-          items: nestedItems
-        }, selectedId); // Give `firstItemRef` to the first focusable item
+  return /*#__PURE__*/_jsx(ListboxContext.Provider, {
+    value: {
+      selectedId,
+      setSelectedId
+    },
+    children: /*#__PURE__*/_jsx(ExpandCollapse, {
+      initialOpen: initialOpen,
+      maxOpen: 1,
+      children: expandProps => /*#__PURE__*/_jsx(StyledList, {
+        role: "listbox",
+        style: {
+          minHeight,
+          minWidth
+        },
+        children: items.map((item, index) => {
+          const {
+            id,
+            label,
+            items: nestedItems
+          } = item;
+          const itemId = id ?? label; // Give `firstItemRef` to the first focusable item
 
-        const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
-          itemRefs.current[index] = ref;
-          return ref;
-        };
-        return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
-          selectedId: selectedId,
-          key: itemId,
-          expandProps: expandProps,
-          LinkRouter: LinkRouter,
-          itemRouterProps: itemRouterProps,
-          prevItemRef: itemRefs.current[index - 1] ?? null,
-          nextItemRef: itemRefs.current[index + 1] ?? null,
-          ref: itemRef
-        }) : /*#__PURE__*/_createElement(ListboxItem, { ...item,
-          selected: selected,
-          key: itemId,
-          LinkRouter: LinkRouter,
-          itemRouterProps: itemRouterProps,
-          prevItemRef: itemRefs.current[index - 1] ?? null,
-          nextItemRef: itemRefs.current[index + 1] ?? null,
-          ref: itemRef
-        });
+          const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
+            itemRefs.current[index] = ref;
+            return ref;
+          };
+          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
+            expandProps: expandProps,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: itemRef,
+            key: itemId
+          }) : /*#__PURE__*/_createElement(ListboxItem, { ...item,
+            key: itemId,
+            id: itemId,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: itemRef
+          });
+        })
       })
     })
   });

package/lib-module/Listbox/ListboxGroup.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base';
+import { ExpandCollapse, withLinkRouter, useListboxContext } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import ListboxItem from './ListboxItem';
 import GroupControl from './GroupControl';
@@ -33,7 +33,6 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     id,
     label,
     items,
-    selectedId,
     LinkRouter,
     linkRouterProps,
     expandProps,
@@ -41,7 +40,10 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     nextItemRef,
     prevItemRef
   } = _ref;
-  // TODO: implement keyboard navigation via refs for grouped items separately here
+  const {
+    selectedId
+  } = useListboxContext(); // TODO: implement keyboard navigation via refs for grouped items separately here
+
   return /*#__PURE__*/_jsx(StyledGroupWrapper, {
     role: "option",
     children: /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
@@ -51,11 +53,17 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
         paddingLeft: 'none',
         paddingRight: 'none',
         paddingTop: 'none',
-        paddingBottom: 'none'
+        paddingBottom: 'none',
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        textLine: 'none',
+        borderWidth: 0
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: controlProps => /*#__PURE__*/_jsx(GroupControl, { ...controlProps,
+      control: controlProps => /*#__PURE__*/_jsx(GroupControl, {
+        id: id ?? label,
+        ...controlProps,
         label: label
       }),
       ...expandProps,
@@ -63,25 +71,33 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
         contentPaddingLeft: 'none',
         contentPaddingRight: 'none',
         contentPaddingTop: 'none',
-        contentPaddingBottom: 'none'
+        contentPaddingBottom: 'none',
+        borderColor: 'transparent',
+        borderRadius: 0,
+        borderWidth: 0,
+        marginBottom: 0
       },
       controlRef: ref,
       children: /*#__PURE__*/_jsx(StyledList, {
-        children: items.map((item, index) => /*#__PURE__*/_jsx(ListboxItem, { ...item,
-          selected: item.id === selectedId,
-          isChild: true,
-          LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps,
-          ...(index === 0 && {
-            prevItemRef
-          }),
-          ...(index === items.length - 1 && {
-            nextItemRef
-          }),
-          ...(index === items.length - 1 && {
-            onBlur: onLastItemBlur
-          })
-        }, item.label))
+        children: items.map((item, index) => {
+          return /*#__PURE__*/_jsx(ListboxItem, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: true,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
       })
     })
   });

package/lib-module/Listbox/ListboxItem.js

@@ -2,9 +2,8 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, withLinkRouter, useThemeTokens } from '@telus-uds/components-base';
+import { selectSystemProps, withLinkRouter, useThemeTokensCallback, PressableItem } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
-import PressableItem from './PressableItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
@@ -23,48 +22,10 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
     margin: 0
   }
 });
-
-const getSelectedItemStyles = _ref2 => {
-  let {
-    tokens
-  } = _ref2;
-  return {
-    display: tokens.itemDisplay,
-    fontFamily: `${tokens.itemFontName}${tokens.itemFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    color: tokens.itemColor,
-    textDecoration: tokens.itemTextDecoration,
-    backgroundColor: tokens.itemBackgroundColor,
-    outline: tokens.itemOutline,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%'
-  };
-};
-
-const SelectedItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListboxItem__SelectedItem",
-  componentId: "components-web__sc-tlroet-1"
-})(_ref3 => {
-  let {
-    isChild,
-    tokens
-  } = _ref3;
-  return { ...getSelectedItemStyles({
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderLeftWidth}px solid ${tokens.itemBorderLeftColor}` : 'none'
-  };
-});
-const ListboxItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const ListboxItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     href,
     label,
-    onPress,
-    selected = false,
     isChild = false,
     onBlur,
     nextItemRef,
@@ -73,21 +34,22 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     variant = {},
     LinkRouter,
     linkRouterProps,
+    id,
+    onPress = () => {},
     ...rest
-  } = _ref4;
-  const selectedProps = selectProps(rest);
-  const systemTokens = useThemeTokens('ListBox', tokens, variant, {
+  } = _ref2;
+  const selectedProps = selectProps({
+    href,
+    ...rest
+  });
+  const getTokens = useThemeTokensCallback('Listbox', tokens, variant, {
     isChild
   });
   return /*#__PURE__*/_jsx(StyledItemContainer, {
     isChild: isChild,
     ...selectedProps,
     role: "option",
-    children: selected ? /*#__PURE__*/_jsx(SelectedItem, {
-      isChild: isChild,
-      tokens: systemTokens,
-      children: label
-    }) : /*#__PURE__*/_jsx(PressableItem, {
+    children: /*#__PURE__*/_jsx(PressableItem, {
       href: href,
       isChild: isChild,
       onPress: onPress,
@@ -95,6 +57,9 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
       nextItemRef: nextItemRef,
       prevItemRef: prevItemRef,
       ref: ref,
+      tokens: getTokens,
+      selectedProps: selectedProps,
+      id: id,
       children: label
     })
   });
@@ -107,7 +72,6 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func,
-  selected: PropTypes.bool
+  onPress: PropTypes.func
 };
 export default withLinkRouter(ListboxItem);

package/lib-module/Listbox/ListboxOverlay.js

@@ -31,7 +31,7 @@ const DropdownOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
     minWidth,
     onLayout
   } = _ref;
-  const systemTokens = useThemeTokens('ListBox', {}, {});
+  const systemTokens = useThemeTokens('Listbox', {}, {});
   return /*#__PURE__*/_jsx(WebPortal, {
     children: /*#__PURE__*/_jsx(View, {
       ref: ref,

package/lib-module/PriceLockup/PriceLockup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
@@ -293,6 +293,11 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: PropTypes.string
+  a11yText: PropTypes.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
 };
 export default PriceLockup;

package/lib-module/Video/ControlBar/ControlBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
+import { StackView, useThemeTokens, selectSystemProps, Icon, useViewport } from '@telus-uds/components-base';
 import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar';
 import VolumeSlider from './Controls/VolumeSlider/VolumeSlider';
 import VideoButton from './Controls/VideoButton/VideoButton';
@@ -37,13 +37,14 @@ const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-13y61ky-1"
 })(_ref2 => {
   let {
-    padding
+    padding,
+    height
   } = _ref2;
   return {
     boxSizing: 'border-box',
     position: 'absolute',
     width: '100%',
-    height: 56,
+    height,
     padding,
     bottom: 0,
     backgroundColor: 'rgba(42, 44, 46, 0.85)',
@@ -119,21 +120,23 @@ const ControlBar = _ref4 => {
     variant,
     ...rest
   } = _ref4;
+  const viewport = useViewport();
   const {
     paddingTop,
     paddingBottom,
-    paddingLeft: paddingLeftDefault,
-    paddingRight: paddingRightDefault,
-    paddingLeftCompactMode,
-    paddingRightCompactMode,
+    paddingLeft,
+    paddingRight,
     menuBottom,
     menuRight,
     menuMarginLeft,
     captionsIcon,
     settingsIcon,
     minimizeIcon,
-    maximizeIcon
-  } = useThemeTokens('VideoControlBar', tokens, variant);
+    maximizeIcon,
+    height
+  } = useThemeTokens('VideoControlBar', tokens, variant, {
+    viewport
+  });
 
   const parseVideoQuality = () => {
     return sources.map(source => {
@@ -162,8 +165,6 @@ const ControlBar = _ref4 => {
     return parsed;
   };
 
-  const paddingLeft = videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode;
-  const paddingRight = videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode;
   const menuContainerStyleProps = {
     menuBottom,
     menuRight,
@@ -175,10 +176,12 @@ const ControlBar = _ref4 => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StyledControlBar, {
       padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      height: `${height}px`,
       children: [/*#__PURE__*/_jsx(VideoProgressBarContainer, {
         children: /*#__PURE__*/_jsx(VideoProgressBar, {
           copy: copy,
           videoPlayer: videoPlayer,
+          playing: videoPlaying,
           videoLength: videoLength,
           videoCurrentTime: videoCurrentTime,
           videoBufferEnd: videoBufferEnd,

package/lib-module/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -122,6 +122,7 @@ const VideoProgressBar = _ref5 => {
     videoLength,
     videoCurrentTime,
     videoBufferEnd,
+    playing,
     setSeek,
     resetInactivityTimer,
     tokens,
@@ -137,7 +138,9 @@ const VideoProgressBar = _ref5 => {
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = useThemeTokens('VideoProgressBar', tokens, variant);
+  } = useThemeTokens('VideoProgressBar', tokens, variant, {
+    playing
+  });
   const videoProgressBar = /*#__PURE__*/React.createRef();
 
   const handleVideoSkip = () => {

package/lib-module/VideoPicker/VideoPicker.js

@@ -87,7 +87,7 @@ const VideoPicker = _ref6 => {
     setCurrentVideoId(selectedVideo);
   }, [selectedVideo]); // `frame` variant should only work on larger screens
 
-  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
+  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport);
   const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
   const listElements = videoList.map((video, index) => /*#__PURE__*/_jsx(VideoPickerThumbnail, {
     video: video,

package/lib-module/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -157,14 +157,25 @@ const selectButtonContentTokens = _ref14 => {
   };
 };
 
-const SplashButtonWithDetails = _ref15 => {
+const getLabelTokens = _ref15 => {
+  let {
+    labelFontName: fontName,
+    labelFontWeight: fontWeight
+  } = _ref15;
+  return {
+    fontName,
+    fontWeight
+  };
+};
+
+const SplashButtonWithDetails = _ref16 => {
   let {
     label,
     tokens,
     variant,
     copy,
     videoLength
-  } = _ref15;
+  } = _ref16;
   const {
     buttonContentChildrenBackground
   } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {
@@ -191,6 +202,7 @@ const SplashButtonWithDetails = _ref15 => {
           variant: {
             bold: true
           },
+          tokens: getLabelTokens(themeTokens),
           children: label
         }), /*#__PURE__*/_jsx(Typography, {
           variant: {

package/lib-module/utils/index.js

@@ -1,7 +1,7 @@
+import { htmlAttrs } from '@telus-uds/components-base';
 import { warn, deprecate } from './logger';
 import { transformGradient } from './transforms';
 import useTypographyTheme from './useTypographyTheme';
-import htmlAttrs from './htmlAttrs';
 import media from './media';
 import ssrStyles from './ssr';
 import renderStructuredContent from './renderStructuredContent';

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.51.1",
+    "@telus-uds/components-base": "1.53.0",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.34.0",
+    "@telus-uds/system-theme-tokens": "^2.36.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.10.0"
+  "version": "2.12.0"
 }