@telus-uds/components-web 2.43.0 → 3.0.0

package/.eslintrc.cjs

@@ -0,0 +1,26 @@
+const path = require('path')
+const base = require('../../eslintrc.base.cjs')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+
+base.settings = {
+  ...base.settings,
+  'import/resolver': {
+    node: {
+      ...base.settings?.['import/resolver']?.node,
+      moduleDirectory: [
+        path.join(__dirname, 'node_modules'),
+        path.join(__dirname, '../../node_modules')
+      ]
+    },
+    exports: true,
+    alias: {
+      map: [['@telus-uds/components-base/server', '../components-base/lib/server.js']]
+    }
+  }
+}
+
+module.exports = base

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
+<!-- This log was last generated on Fri, 22 Nov 2024 23:40:07 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 3.0.0
+
+Fri, 22 Nov 2024 23:40:07 GMT
+
+### Major changes
+
+- Upgrade `react-native` and many other dependencies and refactor to ESM-only builds (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.97.1
+- Bump @telus-uds/system-constants to v2.0.0
+- Bump @telus-uds/system-theme-tokens to v3.0.0
+
+## 2.44.0
+
+Wed, 13 Nov 2024 17:23:43 GMT
+
+### Minor changes
+
+- `DatePicker`: add initialVisibleMonth prop (guillermo.peitzner@telus.com)
+
 ## 2.43.0
 
-Thu, 31 Oct 2024 05:02:44 GMT
+Thu, 31 Oct 2024 05:09:12 GMT
 
 ### Minor changes
 

package/babel.config.cjs

@@ -0,0 +1,4 @@
+const baseConfig = require('../../babel.config.base.cjs')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = baseConfig(name)

package/jest.config.cjs

@@ -0,0 +1,29 @@
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = {
+  displayName: {
+    name,
+    color: 'magenta'
+  },
+  testEnvironment: 'jsdom',
+  // __dirname here tells babel to look in ds-allium/ for babel root when running from monorepo root
+  transform: { '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
+  moduleNameMapper: {
+    '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
+    // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
+    '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
+    '\\.css': '<rootDir>/__mocks__/styleMock.js',
+    '^@telus-uds/components-base/server$': '<rootDir>/../components-base/lib/server.js'
+  },
+  testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
+  ],
+  setupFilesAfterEnv: [
+    './jest-setup.js',
+    // Fail tests that use console.error or console.warn
+    '<rootDir>/../../jest-no-console.cjs'
+  ],
+  // Count everything in src when calculating coverage
+  collectCoverageFrom: ['src/**/*.{js,jsx}']
+}

package/lib/Badge/Badge.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-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]);
-const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs, transformGradient } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
 })(["background:", ";border:", ";display:inline-flex;justify-content:center;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
@@ -53,7 +46,7 @@ const fontSizeMapping = {
   14: 'small',
   16: 'h6'
 };
-const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -74,8 +67,8 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     fontName,
     fontWeight,
     fontSize
-  } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
-  const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
+  } = useThemeTokens('Badge', tokens, variant);
+  const semanticGradient = gradient && transformGradient(gradient);
   const {
     outline,
     purpose,
@@ -88,7 +81,7 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   } else if (purpose === 'offer' && gradient) {
     background = semanticGradient;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
+  return /*#__PURE__*/_jsx(BadgeContainer, {
     isOutlineOffer: isOutlineOffer,
     isAlternative: alternative,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
@@ -100,7 +93,7 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     border: `${borderWidth}px solid ${borderColor}`,
     ref: ref,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    children: /*#__PURE__*/_jsx(Typography, {
       tokens: {
         fontName,
         fontWeight,
@@ -116,14 +109,13 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
 Badge.displayName = 'Badge';
 Badge.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.node,
-  tokens: (0, _componentsBase.getTokensPropType)('Badge'),
-  variant: _propTypes.default.exact({
-    outline: _propTypes.default.bool,
-    purpose: _propTypes.default.oneOf(['offer', 'editorial']),
-    alternative: _propTypes.default.bool,
-    inverse: _propTypes.default.bool
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: PropTypes.exact({
+    outline: PropTypes.bool,
+    purpose: PropTypes.oneOf(['offer', 'editorial']),
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
   })
 };
-var _default = Badge;
-exports.default = _default;
+export default Badge;

package/lib/Badge/index.js

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

package/lib/BlockQuote/BlockQuote.js

@@ -1,18 +1,11 @@
-"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]);
-const BlockQuoteContainer = /*#__PURE__*/_styledComponents.default.blockquote.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs, transformGradient } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
   displayName: "BlockQuote__BlockQuoteContainer",
   componentId: "components-web__sc-vals3u-0"
 })(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
@@ -44,9 +37,9 @@ const BlockQuoteContainer = /*#__PURE__*/_styledComponents.default.blockquote.wi
   let {
     backgroundGradient
   } = _ref6;
-  return backgroundGradient && (0, _utils.transformGradient)(backgroundGradient);
+  return backgroundGradient && transformGradient(backgroundGradient);
 });
-const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlockQuote__QuoteContainer",
   componentId: "components-web__sc-vals3u-1"
 })(["margin-bottom:", ";"], _ref7 => {
@@ -55,7 +48,7 @@ const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref7;
   return `${marginBottom}px`;
 });
-const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     children,
     link,
@@ -68,7 +61,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     variant,
     ...rest
   } = _ref8;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     color,
     paddingTop,
@@ -90,7 +83,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     linkFontName,
     linkFontWeight,
     linkLineHeight
-  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant, {
+  } = useThemeTokens('BlockQuote', tokens, variant, {
     viewport
   });
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
@@ -107,7 +100,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   };
   const renderLink = () => {
     if (linkHref) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+      return /*#__PURE__*/_jsx(Link, {
         href: linkHref,
         tokens: {
           blockFontSize: linkFontSize,
@@ -124,7 +117,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         children: link
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    return /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
         fontName: linkFontName,
@@ -136,7 +129,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     });
   };
   const renderQuote = () => {
-    const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    const quote = /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
         ...titleTokens
@@ -147,14 +140,14 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       children: children
     });
     if (additionalInfo || link) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteContainer, {
+      return /*#__PURE__*/_jsx(QuoteContainer, {
         marginBottom: marginBottom,
         children: quote
       });
     }
     return quote;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockQuoteContainer, {
+  return /*#__PURE__*/_jsxs(BlockQuoteContainer, {
     ...selectProps(rest),
     paddingTop: paddingTop,
     paddingBottom: paddingBottom,
@@ -163,9 +156,9 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     width: width,
     backgroundGradient: backgroundGradient,
     ref: ref,
-    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/_jsxs(StackView, {
       space: 0,
-      children: [link && renderLink(), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: [link && renderLink(), additionalInfo && /*#__PURE__*/_jsx(Typography, {
         tokens: {
           color
         },
@@ -180,32 +173,31 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
 BlockQuote.displayName = 'BlockQuote';
 BlockQuote.propTypes = {
   ...selectedSystemPropTypes,
-  ..._componentsBase.withLinkRouter.propTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('BlockQuote'),
-  variant: _propTypes.default.exact({
-    alternative: _propTypes.default.bool,
-    size: _propTypes.default.string
+  ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('BlockQuote'),
+  variant: PropTypes.exact({
+    alternative: PropTypes.bool,
+    size: PropTypes.string
   }),
   /**
    * Children nodes that can be added
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * External source's identifier (e.g. author's name)
    */
-  link: _propTypes.default.string,
+  link: PropTypes.string,
   /**
    * External source's URL
    */
-  linkHref: _propTypes.default.string,
+  linkHref: PropTypes.string,
   /**
    * To provide additional information about the source, rendered underneath `link`
    */
-  additionalInfo: _propTypes.default.string,
+  additionalInfo: PropTypes.string,
   /**
    * Whether to render BlockQuote as a heading size of `h3` or large text size
    */
-  textStyle: _propTypes.default.oneOf(['large', 'heading'])
+  textStyle: PropTypes.oneOf(['large', 'heading'])
 };
-var _default = BlockQuote;
-exports.default = _default;
+export default BlockQuote;

package/lib/BlockQuote/index.js

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

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -1,23 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactHelmetAsync = require("react-helmet-async");
-var _lodash = require("lodash");
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
-var _Item = _interopRequireDefault(require("./Item/Item"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
+import React, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { isEqual } from 'lodash';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import Item from './Item/Item';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledList = /*#__PURE__*/styled.ol.withConfig({
   displayName: "Breadcrumbs__StyledList",
   componentId: "components-web__sc-gwwxrc-0"
 })({
@@ -104,7 +95,7 @@ const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     baseUrl,
     children,
@@ -125,7 +116,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref3 => {
+  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref3 => {
     let {
       props: {
         href,
@@ -141,12 +132,12 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ...itemRest
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
-  const [optionsHidden, setOptionsHidden] = _react.default.useState(false);
-  const [itemsToBeRendered, setItemsToBeRendered] = _react.default.useState([]);
-  const viewport = (0, _componentsBase.useViewport)();
-  _react.default.useEffect(() => {
+  const [optionsHidden, setOptionsHidden] = React.useState(false);
+  const [itemsToBeRendered, setItemsToBeRendered] = React.useState([]);
+  const viewport = useViewport();
+  React.useEffect(() => {
     if (optionsHidden) {
-      if (viewport !== 'xs' && !(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+      if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
         setItemsToBeRendered(activeRoutes);
       }
       return;
@@ -163,16 +154,16 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }, activeRoutes[activeRoutes.length - 1]];
       setItemsToBeRendered(newItems);
       setOptionsHidden(true);
-    } else if (!(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+    } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
       setItemsToBeRendered(activeRoutes);
     }
   }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
   const items = getItems(itemsToBeRendered, params, !children);
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
-  const metadata = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.HelmetProvider, {
+  const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant);
+  const metadata = /*#__PURE__*/_jsx(HelmetProvider, {
     context: helmetContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.Helmet, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+    children: /*#__PURE__*/_jsx(Helmet, {
+      children: /*#__PURE__*/_jsx("script", {
         type: "application/ld+json",
         children: `
             {
@@ -184,11 +175,11 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       })
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+  return /*#__PURE__*/_jsxs("nav", {
     "aria-label": "Breadcrumb",
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
+    children: [/*#__PURE__*/_jsx(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
       children: items.map(_ref4 => {
         let {
@@ -200,7 +191,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           onPress,
           ...itemRest
         } = _ref4;
-        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+        return /*#__PURE__*/_createElement(Item, {
           ...itemRest,
           current: current,
           href: href,
@@ -224,35 +215,34 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 Breadcrumbs.displayName = 'Breadcrumbs';
 Breadcrumbs.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Breadcrumbs'),
-  ..._componentsBase.withLinkRouter.propTypes,
+  tokens: getTokensPropType('Breadcrumbs'),
+  ...withLinkRouter.propTypes,
   /**
    * Base URL used to build structured data.
    */
-  baseUrl: _propTypes.default.string,
+  baseUrl: PropTypes.string,
   /**
    * A list of Items to be used as an alternative to the `routes` prop.
    */
-  children: (0, _componentsBase.componentPropType)('Item'),
+  children: componentPropType('Item'),
   /**
    * React Router params.
    */
-  params: _propTypes.default.object,
+  params: PropTypes.object,
   /**
    * An array of routes to be displayed as breadcrumbs.
    */
-  routes: _propTypes.default.arrayOf(_propTypes.default.shape({
-    path: _propTypes.default.string,
-    breadcrumbName: _propTypes.default.string
+  routes: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string,
+    breadcrumbName: PropTypes.string
   })),
   /**
    * Variant to render.
    */
-  variant: _propTypes.default.shape({
-    inverse: _propTypes.default.bool,
-    light: _propTypes.default.bool
+  variant: PropTypes.shape({
+    inverse: PropTypes.bool,
+    light: PropTypes.bool
   })
 };
-Breadcrumbs.Item = _Item.default;
-var _default = Breadcrumbs;
-exports.default = _default;
+Breadcrumbs.Item = Item;
+export default Breadcrumbs;