@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/IconButton/IconButton.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+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) => {
   let {
     icon = null,
     action,
@@ -23,13 +16,13 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } : variant;
   const {
     icon: themeIcon
-  } = (0, _componentsBase.useThemeTokens)('IconButton', tokens, variantWithAction);
+  } = useThemeTokens('IconButton', tokens, variantWithAction);
   return (
     /*#__PURE__*/
     // If we want the arrow icons to have directional animation instead of scale, we can pass
     // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
     // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
-    (0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+    _jsx(IconButtonBase, {
       ref: ref,
       ...iconButtonProps,
       tokens: tokens,
@@ -48,16 +41,15 @@ const propsWithoutIcon = _ref2 => {
   return props;
 };
 IconButton.propTypes = {
-  ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
-  tokens: (0, _componentsBase.getTokensPropType)('IconButton'),
+  ...propsWithoutIcon(IconButtonBase.propTypes),
+  tokens: getTokensPropType('IconButton'),
   /**
    * To set the icon to a multi-brand compatabile icon
    */
-  action: _propTypes.default.oneOf(multiBrandIconNames),
+  action: PropTypes.oneOf(multiBrandIconNames),
   /**
    * To set a custom icon
    */
-  icon: _propTypes.default.func
+  icon: PropTypes.func
 };
-var _default = IconButton;
-exports.default = _default;
+export default IconButton;

package/lib/IconButton/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _IconButton = _interopRequireDefault(require("./IconButton"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _IconButton.default;
-exports.default = _default;
+import IconButton from './IconButton';
+export default IconButton;

package/lib/Image/Image.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _server = require("@telus-uds/components-base/server");
-var _logger = require("../utils/logger");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
-const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+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 { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Image = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     src,
     width,
@@ -31,7 +24,7 @@ const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
   if (isCircle && !isSquare) {
-    (0, _logger.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
+    warn('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
   }
   if (isCircle) {
     borderRadius = '50%';
@@ -43,7 +36,7 @@ const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     height: height ?? 'auto',
     maxWidth: '100%'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+  return /*#__PURE__*/_jsx("img", {
     ...selectProps(rest),
     style: style,
     src: src,
@@ -61,31 +54,30 @@ Image.propTypes = {
    * The src attribute for the HTML img element.
    */
 
-  src: _propTypes.default.string.isRequired,
+  src: PropTypes.string.isRequired,
   /**
    * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
    */
-  alt: _propTypes.default.string.isRequired,
+  alt: PropTypes.string.isRequired,
   /**
    * The image's width.
    */
-  width: _propTypes.default.number.isRequired,
+  width: PropTypes.number.isRequired,
   /**
    * The image's height.
    */
-  height: _propTypes.default.number,
+  height: PropTypes.number,
   /**
    * Loading strategy.
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+  loading: PropTypes.oneOf(['eager', 'lazy']),
   /**
    * Make image render as a circle or with rounded corners.
    */
-  rounded: _propTypes.default.oneOf(['circle', 'corners']),
-  tokens: (0, _server.getTokensPropType)('Image')
+  rounded: PropTypes.oneOf(['circle', 'corners']),
+  tokens: getTokensPropType('Image')
 };
 Image.displayName = 'Image';
-var _default = Image;
-exports.default = _default;
+export default Image;

package/lib/Image/index.js

@@ -1,21 +1,9 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DefaultImage", {
-  enumerable: true,
-  get: function () {
-    return _Image.default;
-  }
-});
-exports.default = void 0;
-var _Image = _interopRequireDefault(require("./Image"));
-var _withClientTheme = _interopRequireDefault(require("../utils/theming/with-client-theme"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+import Image from './Image';
+import withClientTheme from '../utils/theming/with-client-theme';
 
-const ClientThemedImage = (0, _withClientTheme.default)(_Image.default);
-var _default = ClientThemedImage;
-exports.default = _default;
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+export { Image as DefaultImage };
+const ClientThemedImage = withClientTheme(Image);
+export default ClientThemedImage;

package/lib/Image/server.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _withServerTheme = _interopRequireDefault(require("../utils/theming/with-server-theme"));
-var _Image = _interopRequireDefault(require("./Image"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ServerThemedImage = (0, _withServerTheme.default)(_Image.default, 'Image');
-var _default = ServerThemedImage;
-exports.default = _default;
+import withServerTheme from '../utils/theming/with-server-theme';
+import Image from './Image';
+const ServerThemedImage = withServerTheme(Image, 'Image');
+export default ServerThemedImage;

package/lib/List/List.js

@@ -1,9 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
-var _default = _componentsBase.ListBase;
-exports.default = _default;
+import { ListBase as List } from '@telus-uds/components-base';
+export default List;

package/lib/List/ListItem.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+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) => {
   let {
     children,
     title,
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.ListItem, {
+  return /*#__PURE__*/_jsxs(ListItemBase, {
     ref: ref,
     ...rest,
-    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
       variant: {
         size: 'h4'
       },
@@ -28,8 +21,7 @@ const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  title: _propTypes.default.string
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string
 };
-var _default = ListItem;
-exports.default = _default;
+export default ListItem;

package/lib/List/index.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _List = _interopRequireDefault(require("./List"));
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_List.default.Item = _ListItem.default;
-var _default = _List.default;
-exports.default = _default;
+import List from './List';
+import ListItem from './ListItem';
+List.Item = ListItem;
+export default List;

package/lib/NavigationBar/NavigationBar.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../utils");
-var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
-var _NavigationSubMenu = _interopRequireDefault(require("./NavigationSubMenu"));
-var _collapseItems = _interopRequireDefault(require("./collapseItems"));
-var _jsxRuntime = require("react/jsx-runtime");
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+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({
   displayName: "NavigationBar__Heading",
   componentId: "components-web__sc-1vis1gt-0"
 })({
@@ -34,7 +27,7 @@ const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -46,16 +39,16 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     linkRouterProps,
     ...rest
   } = _ref;
-  const direction = (0, _componentsBase.useResponsiveProp)({
+  const direction = useResponsiveProp({
     xs: 'column',
     sm: 'row'
   });
-  const itemsForViewport = (0, _componentsBase.useResponsiveProp)({
-    xs: (0, _collapseItems.default)(items, selectedId),
+  const itemsForViewport = useResponsiveProp({
+    xs: collapseItems(items, selectedId),
     lg: items
   });
-  const openOverlayRef = _react.default.useRef(null);
-  const [openSubMenuId, setOpenSubMenuId] = _react.default.useState(null);
+  const openOverlayRef = React.useRef(null);
+  const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
   const handleSubMenuClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
@@ -68,12 +61,12 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
-  const navRefDefault = _react.default.useRef(null);
+  const navRefDefault = React.useRef(null);
   const navRef = ref ?? navRefDefault;
-  const itemsRef = _react.default.useRef(null);
+  const itemsRef = React.useRef(null);
 
   // Close the submenu when the user clicks outside the navigation bar
-  const handleMouseDown = _react.default.useCallback(event => {
+  const handleMouseDown = React.useCallback(event => {
     if (navRef.current && itemsRef.current) {
       // Get the bounding rectangles of the navigation bar and the items container
       const navRect = navRef.current.getBoundingClientRect();
@@ -89,7 +82,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [navRef, itemsRef, setOpenSubMenuId]);
 
   // TODO: create a custom hook for that and use here and in the Footnote
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     // Add listeners for mouse clicks outside and for key presses
     document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
@@ -107,7 +100,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     };
   }, [openSubMenuId, handleMouseDown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+  return /*#__PURE__*/_jsxs(StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
     ref: navRef,
@@ -117,8 +110,8 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       justifyContent: 'flex-end'
     },
     ...selectProps(rest),
-    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    children: [heading && /*#__PURE__*/_jsx(Heading, {
+      children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'h5'
         },
@@ -142,12 +135,12 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         if (nestedItems) {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        onChange === null || onChange === void 0 ? void 0 : onChange(itemId, event);
+        onClick === null || onClick === void 0 || onClick(event);
+        onChange === null || onChange === void 0 || onChange(itemId, event);
       };
-      const ItemComponent = nestedItems ? _NavigationSubMenu.default : _NavigationItem.default;
+      const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
+      return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
         onClick: handleClick
@@ -178,7 +171,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
   ...selectedSystemPropTypes,
-  ..._componentsBase.withLinkRouter.propTypes,
+  ...withLinkRouter.propTypes,
   /**
    * NavigationBar pages
    *
@@ -187,45 +180,44 @@ NavigationBar.propTypes = {
    *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
    *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired,
-    href: _propTypes.default.string,
-    id: _propTypes.default.string.isRequired,
-    onClick: _propTypes.default.func,
-    selected: _propTypes.default.bool,
-    LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    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,
     // One layer of nested links is allowed
-    items: _propTypes.default.arrayOf(_propTypes.default.shape({
-      label: _propTypes.default.string.isRequired,
-      href: _propTypes.default.string,
-      id: _propTypes.default.string.isRequired,
-      onClick: _propTypes.default.func,
-      selected: _propTypes.default.bool,
-      LinkRouter: (_withLinkRouter$propT3 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
-      linkRouterProps: (_withLinkRouter$propT4 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+    items: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      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
     }))
   })).isRequired,
   /**
    * Common navigation bar heading.
    */
-  heading: _propTypes.default.string,
+  heading: PropTypes.string,
   /**
    * Sets the `headingLevel` of the `heading`
    */
-  headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
    * Matches the `id` property of the item in `items` corresponding to the current page
    */
-  selectedId: _propTypes.default.string.isRequired,
+  selectedId: PropTypes.string.isRequired,
   /**
    * Optional function to be called on pressing a link
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * Accesibility role for stackview
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-var _default = NavigationBar;
-exports.default = _default;
+export default NavigationBar;

package/lib/NavigationBar/NavigationItem.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const defaultMaxWidth = 192;
-const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavigationItem__ItemContainer",
   componentId: "components-web__sc-ql9x7c-0"
 })(_ref => {
@@ -35,7 +28,7 @@ const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
     // @todo switch to 'button' for dropdowns
@@ -54,19 +47,19 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const selectedProps = selectProps(rest);
-  const targetWidth = (0, _componentsBase.useResponsiveProp)({
+  const targetWidth = useResponsiveProp({
     xs: 288,
     lg: null
   });
-  const viewport = (0, _componentsBase.useViewport)();
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('NavigationBar', tokens, variant);
+  const viewport = useViewport();
+  const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant);
   const getStateTokens = state => getTokens({
     ...state,
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
+  return /*#__PURE__*/_jsx(ItemContainer, {
     targetWidth: targetWidth,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
+    children: /*#__PURE__*/_jsx(Button, {
       accessibilityRole: accessibilityRole,
       accessibilityState: accessibilityState,
       onPress: handleClick,
@@ -86,10 +79,9 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 NavigationItem.displayName = 'NavigationItem';
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
-  onClick: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired
+  tokens: getTokensPropType('NavigationBar'),
+  onClick: PropTypes.func,
+  selected: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 };
-var _default = NavigationItem;
-exports.default = _default;
+export default NavigationItem;