@telus-uds/components-web 1.11.0 → 2.0.0

package/lib/List/ListItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 }; }
+
+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 ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    title,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.ListItem, {
+    ref: ref,
+    ...rest,
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
+  });
+});
+ListItem.displayName = 'ListItem';
+ListItem.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string
+};
+ListItem.defaultProps = {
+  title: undefined
+};
+var _default = ListItem;
+exports.default = _default;

package/lib/List/index.js

@@ -0,0 +1,16 @@
+"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;

package/lib/PriceLockup/PriceLockup.js

@@ -93,24 +93,29 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;height:", ";background:", ";position:absolute;}"], _ref7 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref7 => {
   let {
-    strikeThroughHeight
+    strikeThroughPosition
   } = _ref7;
-  return strikeThroughHeight;
+  return `${strikeThroughPosition}px`;
 }, _ref8 => {
   let {
-    strikeThroughColor
+    strikeThroughHeight
   } = _ref8;
+  return `${strikeThroughHeight}px`;
+}, _ref9 => {
+  let {
+    strikeThroughColor
+  } = _ref9;
   return strikeThroughColor;
 });
 
-const selectFootnoteLinkStyles = _ref9 => {
+const selectFootnoteLinkStyles = _ref10 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight
-  } = _ref9;
+  } = _ref10;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -118,7 +123,20 @@ const selectFootnoteLinkStyles = _ref9 => {
   };
 };
 
-const PriceLockup = _ref10 => {
+const selectStrikeThroughTokens = _ref11 => {
+  let {
+    strikeThroughPosition,
+    strikeThroughHeight,
+    strikeThroughColor
+  } = _ref11;
+  return {
+    strikeThroughHeight,
+    strikeThroughPosition,
+    strikeThroughColor
+  };
+};
+
+const PriceLockup = _ref12 => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -134,7 +152,7 @@ const PriceLockup = _ref10 => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref10;
+  } = _ref12;
   const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
@@ -143,8 +161,6 @@ const PriceLockup = _ref10 => {
     priceMarginBottom,
     bottomLinksMarginLeft,
     topTextMarginBottom,
-    strikeThroughHeight,
-    strikeThroughColor,
     fontColor,
     dividerColor,
     footnoteLinkFontSize,
@@ -189,9 +205,7 @@ const PriceLockup = _ref10 => {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
           text: a11yText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
-          strikeThroughHeight: `${strikeThroughHeight}px`,
-          strikeThroughColor: strikeThroughColor,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, { ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
       });

package/lib/SkeletonProvider/SkeletonImage.js

@@ -0,0 +1,55 @@
+"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");
+
+var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SkeletonImage = _ref => {
+  let {
+    rounded,
+    imgHeight,
+    size,
+    sizeIndex,
+    // Size automatically from image height, unless any size prop is passed in
+    sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
+    show,
+    children
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  const shape = rounded !== 'circle' ? 'box' : rounded;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+    size: size,
+    sizePixels: sizePixels,
+    sizeIndex: sizeIndex,
+    shape: shape
+  });
+};
+
+SkeletonImage.propTypes = {
+  imgHeight: _propTypes.default.number,
+  rounded: _propTypes.default.oneOf(['circle', 'corners']),
+  size: (_Skeleton$propTypes = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node
+};
+var _default = SkeletonImage;
+exports.default = _default;

package/lib/SkeletonProvider/SkeletonProvider.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Image = _interopRequireDefault(require("../Image"));
+
+var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography"));
+
+var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
+
+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 SkeletonProvider = _ref => {
+  let {
+    children,
+    show
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  const mapChild = child => {
+    if (!child) {
+      return null;
+    }
+
+    let childElement = child;
+
+    if (childElement.props && 'children' in childElement.props) {
+      const {
+        children: elementChildren
+      } = childElement.props;
+      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
+      childElement = /*#__PURE__*/(0, _react.cloneElement)(childElement, {
+        children: mappedChildren
+      });
+    }
+
+    if (childElement.type === _componentsBase.Typography) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, { ...childElement.props.skeleton,
+        show: show,
+        children: childElement
+      });
+    }
+
+    if (childElement.type === _Image.default) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, { ...childElement.props.skeleton,
+        imgHeight: childElement.props.height,
+        rounded: childElement.props.rounded,
+        show: show,
+        children: childElement
+      });
+    }
+
+    return childElement;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: _react.Children.map(children, mapChild)
+  });
+};
+
+SkeletonProvider.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired
+};
+var _default = SkeletonProvider;
+exports.default = _default;

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -0,0 +1,54 @@
+"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");
+
+var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SkeletonTypography = _ref => {
+  let {
+    show,
+    size,
+    sizeIndex,
+    sizePixels,
+    characters,
+    lines,
+    children
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+    size: size,
+    sizeIndex: sizeIndex,
+    sizePixels: sizePixels,
+    characters: characters,
+    lines: lines
+  });
+};
+
+SkeletonTypography.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node,
+  size: (_Skeleton$propTypes = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  characters: (_Skeleton$propTypes4 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
+  lines: (_Skeleton$propTypes5 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+};
+var _default = SkeletonTypography;
+exports.default = _default;

package/lib/SkeletonProvider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _SkeletonProvider.default;
+exports.default = _default;

package/lib/Table/Table.js

@@ -35,7 +35,12 @@ const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;"]);
+})(["margin:0;padding:0;width:", ";"], _ref => {
+  let {
+    tableWidth
+  } = _ref;
+  return `${tableWidth}px`;
+});
 
 const TableContext = /*#__PURE__*/_react.default.createContext({});
 
@@ -58,14 +63,15 @@ const useTableContext = () => (0, _react.useContext)(TableContext);
 
 exports.useTableContext = useTableContext;
 
-const Table = _ref => {
+const Table = _ref2 => {
   let {
     children,
+    fullWidth = false,
     text = 'medium',
     tokens,
     variant,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     tablePaddingBottom
   } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
@@ -75,8 +81,10 @@ const Table = _ref => {
   const [tableWidth, setTableWidth] = (0, _react.useState)(0);
   (0, _componentsBase.useSafeLayoutEffect)(() => {
     const updateDimensions = () => {
-      setContainerWidth(containerRef.current.clientWidth);
-      setTableWidth(tableRef.current.clientWidth);
+      const containerClientWidth = containerRef.current.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth;
+      setContainerWidth(containerClientWidth);
+      setTableWidth(responsiveTableWidth);
     };
 
     const throttledUpdateDimensions = (0, _lodash.default)(updateDimensions, 100, {
@@ -105,6 +113,7 @@ const Table = _ref => {
         variant
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+        tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
         children: children

package/lib/Toast/Toast.js

@@ -39,7 +39,7 @@ const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s f
 const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
     containerBackgroundColor
   } = _ref;

package/lib/index.js

@@ -38,9 +38,11 @@ var _exportNames = {
   StoryCard: true,
   Disclaimer: true,
   Card: true,
+  List: true,
   TermsAndConditions: true,
   NavigationBar: true,
-  Progress: true
+  Progress: true,
+  SkeletonProvider: true
 };
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
@@ -120,6 +122,12 @@ Object.defineProperty(exports, "Image", {
     return _Image.default;
   }
 });
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
 Object.defineProperty(exports, "Listbox", {
   enumerable: true,
   get: function () {
@@ -192,6 +200,12 @@ Object.defineProperty(exports, "Ribbon", {
     return _Ribbon.default;
   }
 });
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.default;
+  }
+});
 Object.defineProperty(exports, "Span", {
   enumerable: true,
   get: function () {
@@ -333,12 +347,16 @@ var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
 
 var _Card = _interopRequireDefault(require("./Card"));
 
+var _List = _interopRequireDefault(require("./List"));
+
 var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
 
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
 
 var _Progress = _interopRequireDefault(require("./Progress"));
 
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -75,10 +75,16 @@ const getItems = (items, params, concatenatePaths) => {
     const isLast = i === filteredItems.length - 1;
     const breadcrumbName = getBreadcrumbName(item, params);
     const href = getPath(item.path, params, concatenatePaths, paths);
+    const {
+      LinkRouter,
+      linkRouterProps
+    } = item;
     return {
       breadcrumbName,
       href,
       current: isLast,
+      LinkRouter,
+      linkRouterProps,
       ...omitProps(selectProps(item))
     };
   });
@@ -106,7 +112,6 @@ const Breadcrumbs = _ref2 => {
     linkRouterProps,
     params = {},
     tokens,
-    reactRouterLinkComponent,
     routes,
     variant,
     LinkRouter,
@@ -165,7 +170,6 @@ const Breadcrumbs = _ref2 => {
           href,
           current,
           breadcrumbName,
-          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
@@ -176,9 +180,8 @@ const Breadcrumbs = _ref2 => {
           tokens: tokens,
           key: href,
           linkRouterProps: { ...linkRouterProps,
-            itemLinkRouterProps
+            ...itemLinkRouterProps
           },
-          reactRouterLinkComponent: linkComponent,
           variant: { ...variant,
             size: 'micro'
           },
@@ -207,12 +210,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
    */
   params: PropTypes.object,
 
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/lib-module/Breadcrumbs/Item/Item.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -51,7 +51,6 @@ const IconContainer = /*#__PURE__*/styled.span.withConfig({
 const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     href,
-    reactRouterLinkComponent: ReactRouterLink,
     children,
     current = false,
     tokens,
@@ -59,6 +58,8 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       light: true
     },
     // `light` variant (shared with the `Link` component) is default by design
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref5;
   const {
@@ -70,14 +71,9 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = useThemeTokens('Breadcrumbs', tokens, variant);
-  const linkOptions = clickProps.toPressProps(selectProps(rest));
-
-  if (ReactRouterLink) {
-    linkOptions.to = href;
-  } else {
-    linkOptions.href = href;
-  }
-
+  const linkOptions = { ...clickProps.toPressProps(selectProps(rest)),
+    href
+  };
   return /*#__PURE__*/_jsx(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
@@ -88,26 +84,14 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       },
       children: children
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [ReactRouterLink ? /*#__PURE__*/_jsx(ReactRouterLink, { ...linkOptions,
-        tokens: {
-          color,
-          blockFontSize: fontSize
-        } // TODO refactor
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ,
-        component: props => {
-          return /*#__PURE__*/_jsx(Link, { ...props,
-            variant: variant
-          });
-        },
+      children: [/*#__PURE__*/_jsx(Link, { ...linkOptions,
         ref: ref,
-        children: children
-      }) : /*#__PURE__*/_jsx(Link, { ...linkOptions,
         tokens: {
           color,
           blockFontSize: fontSize
         },
-        ref: ref,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, { ...themeTokens,
@@ -135,18 +119,11 @@ Item.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.bool,
 
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
 
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Variant to render.
    */
@@ -158,9 +135,8 @@ Item.propTypes = { ...selectedSystemPropTypes,
 
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: {
     light: true
   }
 };
-export default withLinkRouter(Item);
+export default Item;