@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/Footnote/Footnote.jsx

@@ -13,9 +13,10 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import styled, { createGlobalStyle } from 'styled-components'
-import OrderedListBase from '../OrderedList/OrderedListBase'
+import { OrderedListBase } from '../OrderedList/OrderedListBase'
+import { OrderedListItemBase } from '../OrderedList/OrderedListItemBase'
 import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils'
-import defaultDictionary from './dictionary'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const viewportBreakpoint = 1440
@@ -25,14 +26,20 @@ const GlobalBodyScrollLock = createGlobalStyle({
 })
 
 const StyledFootnote = styled.div(
-  ({ footnoteBackground, isVisible, footnoteBorderTop, isScrollable, isMobileFullScreen }) => ({
+  ({
+    $footnoteBackground,
+    $isVisible,
+    $footnoteBorderTop,
+    $isScrollable,
+    $isMobileFullScreen
+  }) => ({
     position: 'fixed',
-    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
+    overflowY: $isVisible && $isScrollable ? 'scroll' : 'hidden',
     top: 0,
     left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
     height: '100vh',
     width: '100vw',
-    backgroundColor: footnoteBackground,
+    backgroundColor: $footnoteBackground,
     display: 'block',
     transform: 'translateY(100%)',
     translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
@@ -41,19 +48,19 @@ const StyledFootnote = styled.div(
       transition: 'none'
     },
     zIndex: 99999,
-    visibility: isVisible ? 'visible' : 'hidden',
+    visibility: $isVisible ? 'visible' : 'hidden',
     ...media()
-      .from(isMobileFullScreen ? 'md' : 'xs')
+      .from($isMobileFullScreen ? 'md' : 'xs')
       .css({
         top: 'auto',
         bottom: 0,
         height: 'auto',
         maxHeight: '50vh',
-        borderTop: footnoteBorderTop
+        borderTop: $footnoteBorderTop
       })
   }),
-  ({ isOpen }) => {
-    if (isOpen) {
+  ({ $isOpen }) => {
+    if ($isOpen) {
       return {
         transform: 'translateY(0)'
       }
@@ -69,90 +76,96 @@ const StyledFootnoteHeader = styled.div(() => ({
 
 const StyledHeader = styled.div(
   ({
-    footnoteHeaderPaddingLeft,
-    footnoteHeaderPaddingRight,
-    footnoteHeaderPaddingTop,
-    footnoteHeaderPaddingBottom
+    $footnoteHeaderPaddingLeft,
+    $footnoteHeaderPaddingRight,
+    $footnoteHeaderPaddingTop,
+    $footnoteHeaderPaddingBottom
   }) => ({
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingTop: footnoteHeaderPaddingTop,
-    paddingBottom: footnoteHeaderPaddingBottom,
-    paddingRight: footnoteHeaderPaddingRight,
-    paddingLeft: footnoteHeaderPaddingLeft
+    paddingTop: $footnoteHeaderPaddingTop,
+    paddingBottom: $footnoteHeaderPaddingBottom,
+    paddingRight: $footnoteHeaderPaddingRight,
+    paddingLeft: $footnoteHeaderPaddingLeft
   })
 )
 
 const StyledFootnoteBody = styled.div(
-  ({ footnoteBodyBackground, footnoteBodyPadding, headerHeight, bodyHeight, isTextVisible }) => ({
+  ({
+    $footnoteBodyBackground,
+    $footnoteBodyPadding,
+    $headerHeight,
+    $bodyHeight,
+    $isTextVisible
+  }) => ({
     overflow: 'auto',
     transition: 'height 300ms ease-out, opacity 200ms ease-out',
     transform: 'translateZ(0)',
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'height 1ms ease-out, opacity 1ms ease-out'
     },
-    backgroundColor: footnoteBodyBackground,
-    padding: footnoteBodyPadding,
-    maxHeight: `calc(100vh - ${headerHeight}px)`,
+    backgroundColor: $footnoteBodyBackground,
+    padding: $footnoteBodyPadding,
+    maxHeight: `calc(100vh - ${$headerHeight}px)`,
     ...media()
       .from('md')
       .css({
-        maxHeight: `calc(50vh - ${headerHeight}px)`
+        maxHeight: `calc(50vh - ${$headerHeight}px)`
       }),
-    height: bodyHeight,
-    opacity: isTextVisible ? 1 : 0
+    height: $bodyHeight,
+    opacity: $isTextVisible ? 1 : 0
   })
 )
 
-const List = styled(OrderedListBase)(({ listPaddingLeft }) => ({
+const List = styled(OrderedListBase)(({ $listPaddingLeft }) => ({
   listStylePosition: 'outside',
-  paddingLeft: listPaddingLeft
+  paddingLeft: $listPaddingLeft
 }))
 
-const ListItem = styled(OrderedListBase.Item)(
+const ListItem = styled(OrderedListItemBase)(
   ({
-    listItemMarkerFontSize,
-    listItemMarkerLineHeight,
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft
+    $listItemMarkerFontSize,
+    $listItemMarkerLineHeight,
+    $listItemColor,
+    $listItemFontSize,
+    $listItemLineHeight,
+    $listItemPaddingLeft
   }) => ({
     display: 'list-item',
     '&::marker': {
       fontFamily: 'HNforTELUSSA400normal',
-      fontSize: listItemMarkerFontSize,
-      lineHeight: listItemMarkerLineHeight,
+      fontSize: $listItemMarkerFontSize,
+      lineHeight: $listItemMarkerLineHeight,
       textAlign: 'end !important'
     },
-    color: listItemColor,
+    color: $listItemColor,
     fontFamily: 'HNforTELUSSA400normal',
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight,
-    paddingLeft: listItemPaddingLeft
+    fontSize: $listItemFontSize,
+    lineHeight: $listItemLineHeight,
+    paddingLeft: $listItemPaddingLeft
   })
 )
 
 const CloseButton = styled.button(
   ({
-    closeButtonBorder,
-    closeButtonHeight,
-    closeButtonBackgroundColor,
-    closeButtonMargin,
-    closeButtonWidth
+    $closeButtonBorder,
+    $closeButtonHeight,
+    $closeButtonBackgroundColor,
+    $closeButtonMargin,
+    $closeButtonWidth
   }) => ({
     alignItems: 'center',
     borderRadius: '50%',
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: closeButtonBackgroundColor,
-    border: closeButtonBorder,
-    height: closeButtonHeight,
-    margin: closeButtonMargin,
-    width: closeButtonWidth
+    backgroundColor: $closeButtonBackgroundColor,
+    border: $closeButtonBorder,
+    height: $closeButtonHeight,
+    margin: $closeButtonMargin,
+    width: $closeButtonWidth
   })
 )
 
@@ -164,17 +177,17 @@ const ContentContainer = styled.div(
     right: 0,
     maxWidth: '1200px'
   },
-  ({ maxWidth }) => ({
-    width: maxWidth
+  ({ $maxWidth }) => ({
+    width: $maxWidth
   })
 )
 
 const StyledCustomContentContainer = styled.div(
-  ({ listItemColor, listItemFontSize, listItemLineHeight, listItemPaddingLeft }) => ({
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight,
-    paddingLeft: listItemPaddingLeft,
-    color: listItemColor,
+  ({ $listItemColor, $listItemFontSize, $listItemLineHeight, $listItemPaddingLeft }) => ({
+    fontSize: $listItemFontSize,
+    lineHeight: $listItemLineHeight,
+    paddingLeft: $listItemPaddingLeft,
+    color: $listItemColor,
     fontFamily: 'HNforTELUSSA400normal'
   })
 )
@@ -208,7 +221,7 @@ const usePrevious = (value) => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = React.forwardRef((props, ref) => {
+export const Footnote = React.forwardRef((props, ref) => {
   const {
     copy = 'en',
     number,
@@ -436,10 +449,10 @@ const Footnote = React.forwardRef((props, ref) => {
     if (React.isValidElement(data.content)) {
       return (
         <StyledCustomContentContainer
-          listItemColor={listItemColor}
-          listItemFontSize={listItemFontSize}
-          listItemLineHeight={listItemLineHeight}
-          listItemPaddingLeft={listItemPaddingLeft}
+          $listItemColor={listItemColor}
+          $listItemFontSize={listItemFontSize}
+          $listItemLineHeight={listItemLineHeight}
+          $listItemPaddingLeft={listItemPaddingLeft}
           ref={contentRef}
         >
           {data.content}
@@ -447,14 +460,14 @@ const Footnote = React.forwardRef((props, ref) => {
       )
     }
     return (
-      <List start={data.number} ref={contentRef} listPaddingLeft={listPaddingLeft}>
+      <List start={data.number} ref={contentRef} $listPaddingLeft={listPaddingLeft}>
         <ListItem
-          listItemMarkerFontSize={listItemMarkerFontSize}
-          listItemMarkerLineHeight={listItemMarkerLineHeight}
-          listItemColor={listItemColor}
-          listItemFontSize={listItemFontSize}
-          listItemLineHeight={listItemLineHeight}
-          listItemPaddingLeft={listItemPaddingLeft}
+          $listItemMarkerFontSize={listItemMarkerFontSize}
+          $listItemMarkerLineHeight={listItemMarkerLineHeight}
+          $listItemColor={listItemColor}
+          $listItemFontSize={listItemFontSize}
+          $listItemLineHeight={listItemLineHeight}
+          $listItemPaddingLeft={listItemPaddingLeft}
         >
           <Typography
             tokens={{
@@ -503,23 +516,23 @@ const Footnote = React.forwardRef((props, ref) => {
         {isOpen && <GlobalBodyScrollLock />}
         <StyledFootnote
           ref={footnoteRef}
-          isOpen={isOpen}
-          isVisible={isVisible}
+          $isOpen={isOpen}
+          $isVisible={isVisible}
           onTransitionEnd={handleStyledFootnoteTransitionEnd}
           tabIndex={0}
-          footnoteBackground={footnoteBackground}
-          footnoteBorderTop={`${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`}
-          isScrollable={isScrollable}
-          isMobileFullScreen={isMobileFullScreen}
+          $footnoteBackground={footnoteBackground}
+          $footnoteBorderTop={`${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`}
+          $isScrollable={isScrollable}
+          $isMobileFullScreen={isMobileFullScreen}
         >
-          <ContentContainer maxWidth={maxWidth}>
+          <ContentContainer $maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef} viewport={viewport}>
               <StyledHeader
-                footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
-                footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
-                footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
-                footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
-                headerMargin={headerMargin}
+                $footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
+                $footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
+                $footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
+                $footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
+                $headerMargin={headerMargin}
               >
                 <Typography
                   tokens={{
@@ -532,11 +545,11 @@ const Footnote = React.forwardRef((props, ref) => {
                 </Typography>
                 <CloseButton
                   ref={closeButtonRef}
-                  closeButtonBorder={`${closeButtonBorderSize} solid ${closeButtonBorderColor}`}
-                  closeButtonWidth={`${closeButtonWidth}px`}
-                  closeButtonHeight={`${closeButtonHeight}px`}
-                  closeButtonBackgroundColor={closeButtonBackgroundColor}
-                  closeButtonMargin={`${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`}
+                  $closeButtonBorder={`${closeButtonBorderSize} solid ${closeButtonBorderColor}`}
+                  $closeButtonWidth={`${closeButtonWidth}px`}
+                  $closeButtonHeight={`${closeButtonHeight}px`}
+                  $closeButtonBackgroundColor={closeButtonBackgroundColor}
+                  $closeButtonMargin={`${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`}
                   onClick={(event) => {
                     closeFootnote(event, { returnFocus: true })
                   }}
@@ -548,13 +561,13 @@ const Footnote = React.forwardRef((props, ref) => {
             </StyledFootnoteHeader>
             <StyledFootnoteBody
               ref={bodyRef}
-              bodyHeight={bodyHeight}
-              headerHeight={headerHeight}
-              isTextVisible={isTextVisible}
+              $bodyHeight={bodyHeight}
+              $headerHeight={headerHeight}
+              $isTextVisible={isTextVisible}
               onTransitionEnd={handleTransitionEnd}
               maxWidth={theme.contentMaxWidth}
-              footnoteBodyBackground={footnoteBodyBackground}
-              footnoteBodyPadding={`${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`}
+              $footnoteBodyBackground={footnoteBodyBackground}
+              $footnoteBodyPadding={`${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`}
             >
               {getFootnoteBodyContent()}
             </StyledFootnoteBody>
@@ -619,5 +632,3 @@ Footnote.propTypes = {
    */
   isMobileFullScreen: PropTypes.bool
 }
-
-export default Footnote

package/src/Footnote/FootnoteLink.jsx

@@ -8,27 +8,27 @@ import {
   variantProp
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import dictionary from './dictionary'
+import { dictionary } from './dictionary'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledSup = styled.sup(
-  ({ fontSize, lineHeight, paddingLeft, paddingRight, ...fontNameAndWeight }) => {
+  ({ $fontSize, $lineHeight, $paddingLeft, $paddingRight, $fontName, $fontWeight, $color }) => {
     return {
       border: 0,
-      color: 'inherit',
+      color: $color ?? 'inherit',
       cursor: 'pointer',
       // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
-      fontSize: fontSize ? `${fontSize}px` : 'smaller',
-      lineHeight: lineHeight ?? `${fontSize * 2}px`,
+      fontSize: $fontSize ? `${$fontSize}px` : 'smaller',
+      lineHeight: $lineHeight ?? `${$fontSize * 2}px`,
       margin: 0,
       paddingVertical: 0,
-      paddingLeft,
-      paddingRight,
+      paddingLeft: $paddingLeft,
+      paddingRight: $paddingRight,
       textDecoration: 'underline',
       // apply font family
-      ...applyTextStyles(fontNameAndWeight)
+      ...applyTextStyles({ fontName: $fontName, fontWeight: $fontWeight })
     }
   }
 )
@@ -42,7 +42,7 @@ const StyledSup = styled.sup(
  * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
  *   the annotation as part of the content whenever possible.
  */
-const FootnoteLink = React.forwardRef(
+export const FootnoteLink = React.forwardRef(
   ({ copy = 'en', number = [], onClick, fontSize, tokens, variant = {}, ...rest }, ref) => {
     const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
     const numbers = Array.isArray(number) ? number : [number]
@@ -76,8 +76,13 @@ const FootnoteLink = React.forwardRef(
             onClick={(event) => handleOnClick(event, index)}
             tabIndex={0}
             {...selectProps(rest)}
-            {...themeTokens}
-            fontSize={fontSize ?? themeTokens.fontSize}
+            $fontSize={fontSize ?? themeTokens.fontSize}
+            $lineHeight={themeTokens.lineHeight}
+            $paddingLeft={themeTokens.paddingLeft}
+            $paddingRight={themeTokens.paddingRight}
+            $fontName={themeTokens.fontName}
+            $fontWeight={themeTokens.fontWeight}
+            $color={themeTokens.color}
           >
             {`${num}${index !== numbers.length - 1 ? ',' : ''}`}
           </StyledSup>
@@ -120,5 +125,3 @@ FootnoteLink.propTypes = {
    */
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
-
-export default FootnoteLink

package/src/Footnote/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     a11yLabel: 'Read legal footnote',
     close: 'close',

package/src/IconButton/IconButton.jsx

@@ -6,7 +6,7 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 
-const IconButton = React.forwardRef(
+export const IconButton = React.forwardRef(
   ({ icon = null, action, tokens = {}, variant = {}, ...iconButtonProps }, ref) => {
     const variantWithAction = action && !variant.action ? { ...variant, action } : variant
     const { icon: themeIcon } = useThemeTokens('IconButton', tokens, variantWithAction)
@@ -55,5 +55,3 @@ IconButton.propTypes = {
    */
   icon: PropTypes.func
 }
-
-export default IconButton

package/src/Image/Image.jsx

@@ -1,7 +1,10 @@
+'use client'
+
 import React from 'react'
 import PropTypes from 'prop-types'
 import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server'
 import { warn } from '../utils/logger'
+import { withClientTheme } from '../utils/theming/with-client-theme'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -85,4 +88,9 @@ Image.propTypes = {
 
 Image.displayName = 'Image'
 
-export default Image
+// Export unwrapped component for react-docgen to extract info for docsite
+export { Image as DefaultImage }
+
+// Export wrapped component as main Image export
+const ClientThemedImage = withClientTheme(Image)
+export { ClientThemedImage as Image }

package/src/Image/server.js

@@ -1,5 +1,5 @@
-import withServerTheme from '../utils/theming/with-server-theme'
-import Image from './Image'
+import { withServerTheme } from '../utils/theming/with-server-theme'
+import { DefaultImage } from './Image'
 
-const ServerThemedImage = withServerTheme(Image, 'Image')
-export default ServerThemedImage
+const ServerThemedImage = withServerTheme(DefaultImage, 'Image')
+export { ServerThemedImage }

package/src/List/List.jsx

@@ -1,3 +1,3 @@
-import { ListBase as List } from '@telus-uds/components-base'
+import { List } from '@telus-uds/components-base'
 
-export default List
+export { List }

package/src/List/ListItem.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base'
 
-const ListItem = React.forwardRef(({ children, title, ...rest }, ref) => (
+export const ListItem = React.forwardRef(({ children, title, ...rest }, ref) => (
   <ListItemBase ref={ref} {...rest}>
     {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
     {children}
@@ -15,5 +15,3 @@ ListItem.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string
 }
-
-export default ListItem

package/src/NavigationBar/NavigationBar.jsx

@@ -14,9 +14,9 @@ import {
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, scrollToAnchor } from '../utils'
-import NavigationItem from './NavigationItem'
-import NavigationSubMenu from './NavigationSubMenu'
-import collapseItems from './collapseItems'
+import { NavigationItem } from './NavigationItem'
+import { NavigationSubMenu } from './NavigationSubMenu'
+import { collapseItems } from './collapseItems'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -41,7 +41,7 @@ const ContentWrapper = styled.div(({ maxWidth }) => ({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = React.forwardRef(
+export const NavigationBar = React.forwardRef(
   (
     {
       accessibilityRole = 'navigation',
@@ -339,5 +339,3 @@ NavigationBar.propTypes = {
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
   })
 }
-
-export default NavigationBar

package/src/NavigationBar/NavigationItem.jsx

@@ -15,14 +15,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const defaultMaxWidth = 192
 
-const ItemContainer = styled.div(({ targetWidth, viewport }) => ({
+const ItemContainer = styled.div(({ $targetWidth, $viewport }) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
-  flexGrow: targetWidth ? 1 : 0,
+  maxWidth: $viewport !== 'xs' ? `${Math.max(defaultMaxWidth, $targetWidth ?? 0)}px` : '100%',
+  flexGrow: $targetWidth ? 1 : 0,
   flexShrink: 1,
-  ...(viewport === 'xs' && {
+  ...($viewport === 'xs' && {
     width: '100%',
     flex: 1
   })
@@ -33,7 +33,7 @@ const ItemContainer = styled.div(({ targetWidth, viewport }) => ({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = React.forwardRef(
+export const NavigationItem = React.forwardRef(
   (
     {
       accessibilityRole = 'link', // @todo switch to 'button' for dropdowns
@@ -66,7 +66,7 @@ const NavigationItem = React.forwardRef(
     }
 
     return (
-      <ItemContainer targetWidth={targetWidth} viewport={viewport}>
+      <ItemContainer $targetWidth={targetWidth} $viewport={viewport}>
         <Button
           accessibilityRole={accessibilityRole}
           accessibilityState={accessibilityState}
@@ -94,5 +94,3 @@ NavigationItem.propTypes = {
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 }
-
-export default NavigationItem

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -5,11 +5,12 @@ import {
   useResponsiveProp,
   useThemeTokens,
   Listbox,
+  ListboxOverlay,
   getTokensPropType
 } from '@telus-uds/components-base'
-import NavigationItem from './NavigationItem'
-import useOverlaidPosition from '../utils/useOverlaidPosition'
-import resolveItemSelection from './resolveItemSelection'
+import { NavigationItem } from './NavigationItem'
+import { useOverlaidPosition } from '../utils/useOverlaidPosition'
+import { resolveItemSelection } from './resolveItemSelection'
 
 const MIN_WIDTH = 192
 const MAX_WIDTH = 289
@@ -44,7 +45,7 @@ const getResponsiveBreakpoints = (sourceWidth) => ({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationSubMenu = React.forwardRef(
+export const NavigationSubMenu = React.forwardRef(
   (
     {
       children,
@@ -114,7 +115,7 @@ const NavigationSubMenu = React.forwardRef(
         </NavigationItem>
         {isOpen && (
           <>
-            <Listbox.Overlay
+            <ListboxOverlay
               overlaidPosition={overlaidPosition}
               maxWidth={maxWidth}
               minWidth={minWidth}
@@ -133,7 +134,7 @@ const NavigationSubMenu = React.forwardRef(
                 variant={variant}
                 ref={itemsContainerRef || ref}
               />
-            </Listbox.Overlay>
+            </ListboxOverlay>
             <div
               // This catches and shifts focus to other interactive elements.
               // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -166,5 +167,3 @@ NavigationSubMenu.propTypes = {
   itemsContainerRef: PropTypes.object,
   variant: PropTypes.object
 }
-
-export default NavigationSubMenu

package/src/NavigationBar/collapseItems.js

@@ -1,7 +1,7 @@
 /**
  * Make a list of items into a one-item list where all items are nested under the first item
  */
-const collapseItems = (items, selectedId) => {
+export const collapseItems = (items, selectedId) => {
   if (!items?.length) return items
 
   // Give the root item the label of the current active link
@@ -25,5 +25,3 @@ const collapseItems = (items, selectedId) => {
 
   return [{ id: 'navigation-bar-root', label: rootLabel, items }]
 }
-
-export default collapseItems

package/src/NavigationBar/resolveItemSelection.js

@@ -1,4 +1,4 @@
-const resolveItemSelection = ({ id, label, items }, selectedId) => {
+export const resolveItemSelection = ({ id, label, items }, selectedId) => {
   const itemId = id ?? label
 
   // Treat item as selected if it or any nested child matches the selected id
@@ -7,5 +7,3 @@ const resolveItemSelection = ({ id, label, items }, selectedId) => {
   )
   return { itemId, selected }
 }
-
-export default resolveItemSelection

package/src/OptimizeImage/OptimizeImage.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { selectSystemProps } from '@telus-uds/components-base'
-import ResponsiveImage from '../ResponsiveImage'
+import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
 import { hasWebpSupport, getImageUrls } from './utils'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const OptimizeImage = React.forwardRef(
+export const OptimizeImage = React.forwardRef(
   (
     {
       contentfulAssetUrl,
@@ -24,8 +24,7 @@ const OptimizeImage = React.forwardRef(
     },
     ref
   ) => {
-    // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
-    const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w'
+    const dimension = sizeByHeight ? 'h' : 'w'
     // by default assuming webP support for SSR
     const [imgUrls, setImgUrls] = React.useState(
       getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true)
@@ -106,5 +105,3 @@ OptimizeImage.propTypes = {
    */
   loading: PropTypes.oneOf(['eager', 'lazy'])
 }
-
-export default OptimizeImage