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

package/lib/esm/Footnote/Footnote.js

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const viewportBreakpoint = 1440;
@@ -18,20 +19,20 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-0"
 })(_ref => {
   let {
-    footnoteBackground,
-    isVisible,
-    footnoteBorderTop,
-    isScrollable,
-    isMobileFullScreen
+    $footnoteBackground,
+    $isVisible,
+    $footnoteBorderTop,
+    $isScrollable,
+    $isMobileFullScreen
   } = _ref;
   return {
     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%' : '',
@@ -40,20 +41,20 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
       transition: 'none'
     },
     zIndex: 99999,
-    visibility: isVisible ? 'visible' : 'hidden',
-    ...media().from(isMobileFullScreen ? 'md' : 'xs').css({
+    visibility: $isVisible ? 'visible' : 'hidden',
+    ...media().from($isMobileFullScreen ? 'md' : 'xs').css({
       top: 'auto',
       bottom: 0,
       height: 'auto',
       maxHeight: '50vh',
-      borderTop: footnoteBorderTop
+      borderTop: $footnoteBorderTop
     })
   };
 }, _ref2 => {
   let {
-    isOpen
+    $isOpen
   } = _ref2;
-  if (isOpen) {
+  if ($isOpen) {
     return {
       transform: 'translateY(0)'
     };
@@ -72,20 +73,20 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    footnoteHeaderPaddingLeft,
-    footnoteHeaderPaddingRight,
-    footnoteHeaderPaddingTop,
-    footnoteHeaderPaddingBottom
+    $footnoteHeaderPaddingLeft,
+    $footnoteHeaderPaddingRight,
+    $footnoteHeaderPaddingTop,
+    $footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     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 = /*#__PURE__*/styled.div.withConfig({
@@ -93,11 +94,11 @@ const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-3"
 })(_ref4 => {
   let {
-    footnoteBodyBackground,
-    footnoteBodyPadding,
-    headerHeight,
-    bodyHeight,
-    isTextVisible
+    $footnoteBodyBackground,
+    $footnoteBodyPadding,
+    $headerHeight,
+    $bodyHeight,
+    $isTextVisible
   } = _ref4;
   return {
     overflow: 'auto',
@@ -106,14 +107,14 @@ const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
     '@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 = /*#__PURE__*/styled(OrderedListBase).withConfig({
@@ -121,38 +122,38 @@ const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
   componentId: "components-web__sc-1563bo5-4"
 })(_ref5 => {
   let {
-    listPaddingLeft
+    $listPaddingLeft
   } = _ref5;
   return {
     listStylePosition: 'outside',
-    paddingLeft: listPaddingLeft
+    paddingLeft: $listPaddingLeft
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
+const ListItem = /*#__PURE__*/styled(OrderedListItemBase).withConfig({
   displayName: "Footnote__ListItem",
   componentId: "components-web__sc-1563bo5-5"
 })(_ref6 => {
   let {
-    listItemMarkerFontSize,
-    listItemMarkerLineHeight,
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft
+    $listItemMarkerFontSize,
+    $listItemMarkerLineHeight,
+    $listItemColor,
+    $listItemFontSize,
+    $listItemLineHeight,
+    $listItemPaddingLeft
   } = _ref6;
   return {
     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 = /*#__PURE__*/styled.button.withConfig({
@@ -160,11 +161,11 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "components-web__sc-1563bo5-6"
 })(_ref7 => {
   let {
-    closeButtonBorder,
-    closeButtonHeight,
-    closeButtonBackgroundColor,
-    closeButtonMargin,
-    closeButtonWidth
+    $closeButtonBorder,
+    $closeButtonHeight,
+    $closeButtonBackgroundColor,
+    $closeButtonMargin,
+    $closeButtonWidth
   } = _ref7;
   return {
     alignItems: 'center',
@@ -172,11 +173,11 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     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
   };
 });
 const ContentContainer = /*#__PURE__*/styled.div.withConfig({
@@ -190,10 +191,10 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
   maxWidth: '1200px'
 }, _ref8 => {
   let {
-    maxWidth
+    $maxWidth
   } = _ref8;
   return {
-    width: maxWidth
+    width: $maxWidth
   };
 });
 const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
@@ -201,16 +202,16 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-8"
 })(_ref9 => {
   let {
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft
+    $listItemColor,
+    $listItemFontSize,
+    $listItemLineHeight,
+    $listItemPaddingLeft
   } = _ref9;
   return {
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight,
-    paddingLeft: listItemPaddingLeft,
-    color: listItemColor,
+    fontSize: $listItemFontSize,
+    lineHeight: $listItemLineHeight,
+    paddingLeft: $listItemPaddingLeft,
+    color: $listItemColor,
     fontFamily: 'HNforTELUSSA400normal'
   };
 });
@@ -243,7 +244,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 = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     copy = 'en',
     number,
@@ -458,10 +459,10 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     if (/*#__PURE__*/React.isValidElement(data.content)) {
       return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
-        listItemColor: listItemColor,
-        listItemFontSize: listItemFontSize,
-        listItemLineHeight: listItemLineHeight,
-        listItemPaddingLeft: listItemPaddingLeft,
+        $listItemColor: listItemColor,
+        $listItemFontSize: listItemFontSize,
+        $listItemLineHeight: listItemLineHeight,
+        $listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -469,14 +470,14 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
     return /*#__PURE__*/_jsx(List, {
       start: data.number,
       ref: contentRef,
-      listPaddingLeft: listPaddingLeft,
+      $listPaddingLeft: listPaddingLeft,
       children: /*#__PURE__*/_jsx(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,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             fontSize: listItemFontSize,
@@ -508,25 +509,25 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
       ref: ref,
       children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(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,
         children: /*#__PURE__*/_jsxs(ContentContainer, {
-          maxWidth: maxWidth,
+          $maxWidth: maxWidth,
           children: [/*#__PURE__*/_jsx(StyledFootnoteHeader, {
             ref: headerRef,
             viewport: viewport,
             children: /*#__PURE__*/_jsxs(StyledHeader, {
-              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
-              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
-              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
-              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
-              headerMargin: headerMargin,
+              $footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              $footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              $footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              $footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
+              $headerMargin: headerMargin,
               children: [/*#__PURE__*/_jsx(Typography, {
                 tokens: {
                   fontSize: headerFontSize,
@@ -538,11 +539,11 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(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
@@ -559,13 +560,13 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
             })
           }), /*#__PURE__*/_jsx(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`,
             children: getFootnoteBodyContent()
           })]
         })
@@ -624,5 +625,4 @@ Footnote.propTypes = {
    * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
    */
   isMobileFullScreen: PropTypes.bool
-};
-export default Footnote;
+};

package/lib/esm/Footnote/FootnoteLink.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import dictionary from './dictionary';
+import { dictionary } from './dictionary';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -11,26 +11,31 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
   componentId: "components-web__sc-17nd7xo-0"
 })(_ref => {
   let {
-    fontSize,
-    lineHeight,
-    paddingLeft,
-    paddingRight,
-    ...fontNameAndWeight
+    $fontSize,
+    $lineHeight,
+    $paddingLeft,
+    $paddingRight,
+    $fontName,
+    $fontWeight,
+    $color
   } = _ref;
   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
+    })
   };
 });
 
@@ -43,7 +48,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
  * - 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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     number = [],
@@ -83,8 +88,13 @@ const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       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,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -114,5 +124,4 @@ FootnoteLink.propTypes = {
    * Override default `fontSize` to set specific font size value
    */
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-export default FootnoteLink;
+};

package/lib/esm/Footnote/dictionary.js

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

package/lib/esm/IconButton/IconButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { IconButton as IconButtonBase, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon = null,
     action,
@@ -51,5 +51,4 @@ IconButton.propTypes = {
    * To set a custom icon
    */
   icon: PropTypes.func
-};
-export default IconButton;
+};

package/lib/esm/Image/Image.js

@@ -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';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const Image = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -80,4 +83,10 @@ Image.propTypes = {
   tokens: getTokensPropType('Image')
 };
 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/lib/esm/Image/server.js

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

package/lib/esm/List/List.js

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

package/lib/esm/List/ListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     title,
@@ -23,5 +23,4 @@ ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string
-};
-export default ListItem;
+};

package/lib/esm/NavigationBar/NavigationBar.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter, variantProp, resolveContentMaxWidth, useTheme } 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const Heading = /*#__PURE__*/styled.div.withConfig({
@@ -42,7 +42,7 @@ const ContentWrapper = /*#__PURE__*/styled.div.withConfig({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const NavigationBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -321,5 +321,4 @@ NavigationBar.propTypes = {
     sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
   })
-};
-export default NavigationBar;
+};

package/lib/esm/NavigationBar/NavigationItem.js

@@ -11,17 +11,17 @@ const ItemContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-ql9x7c-0"
 })(_ref => {
   let {
-    targetWidth,
-    viewport
+    $targetWidth,
+    $viewport
   } = _ref;
   return {
     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 = /*#__PURE__*/styled.div.withConfig({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
     // @todo switch to 'button' for dropdowns
@@ -75,8 +75,8 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     return tokensWithoutWidth;
   };
   return /*#__PURE__*/_jsx(ItemContainer, {
-    targetWidth: targetWidth,
-    viewport: viewport,
+    $targetWidth: targetWidth,
+    $viewport: viewport,
     children: /*#__PURE__*/_jsx(Button, {
       accessibilityRole: accessibilityRole,
       accessibilityState: accessibilityState,
@@ -104,5 +104,4 @@ NavigationItem.propTypes = {
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
-};
-export default NavigationItem;
+};

package/lib/esm/NavigationBar/NavigationSubMenu.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } from '@telus-uds/components-base';
-import NavigationItem from './NavigationItem';
-import useOverlaidPosition from '../utils/useOverlaidPosition';
-import resolveItemSelection from './resolveItemSelection';
+import { Icon, useResponsiveProp, useThemeTokens, Listbox, ListboxOverlay, getTokensPropType } from '@telus-uds/components-base';
+import { NavigationItem } from './NavigationItem';
+import { useOverlaidPosition } from '../utils/useOverlaidPosition';
+import { resolveItemSelection } from './resolveItemSelection';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const MIN_WIDTH = 192;
 const MAX_WIDTH = 289;
@@ -50,7 +50,7 @@ const getResponsiveBreakpoints = sourceWidth => ({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -129,7 +129,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         }, `${id}_icon`)];
       }
     }), isOpen && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
+      children: [/*#__PURE__*/_jsx(ListboxOverlay, {
         overlaidPosition: overlaidPosition,
         maxWidth: maxWidth,
         minWidth: minWidth,
@@ -174,5 +174,4 @@ NavigationSubMenu.propTypes = {
   linkRouterProps: PropTypes.object,
   itemsContainerRef: PropTypes.object,
   variant: PropTypes.object
-};
-export default NavigationSubMenu;
+};