@telus-uds/components-base 1.16.0 → 1.18.0

package/lib/Timeline/Timeline.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineColor
+  };
+};
+
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+
+const Timeline = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = { ...selectProps(rest),
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      var _child$props;
+
+      const childrenProps = { ...(0, _utils.getA11yPropsFromHtmlTag)(childrenTag, (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || 'listitem')
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectLineItemContainer(themeTokens) // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, "timeline-".concat(index, "-").concat(child.displayName));
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Timeline'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: _propTypes.default.arrayOf(_propTypes.default.node).isRequired,
+
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  childrenTag: _propTypes.default.oneOf(_utils.layoutTags)
+};
+var _default = Timeline;
+exports.default = _default;

package/lib/Timeline/index.js

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

package/lib/ViewportProvider/useViewportListener.js

@@ -5,28 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("react");
-
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 
 var _systemConstants = require("@telus-uds/system-constants");
 
+var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
 // to update on every pixel change during window resize; but we only want rerenders to occur
 // when a viewport threshold has been crossed.
 const lookupViewport = () => _systemConstants.viewports.select(_Dimensions.default.get('window').width);
-/**
- * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
- * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
- *
- * To avoid these warnings while still conforming to the rules of hooks, always use this
- * explicitly no-op hook, instead of the useLayoutEffect that is implicitly no-op on SSR.
- */
-
-
-const useViewportListenerSSR = () => {};
 /**
  * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
  * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
@@ -34,8 +24,8 @@ const useViewportListenerSSR = () => {};
  */
 
 
-const useViewportListenerCSR = setViewport => {
-  (0, _react.useLayoutEffect)(() => {
+const useViewportListener = setViewport => {
+  (0, _useSafeLayoutEffect.default)(() => {
     setViewport(lookupViewport());
 
     const onChange = _ref => {
@@ -57,10 +47,7 @@ const useViewportListenerCSR = setViewport => {
       }
     };
   }, [setViewport]);
-}; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
-
+};
 
-const isSSR = typeof window === 'undefined';
-const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
 var _default = useViewportListener;
 exports.default = _default;

package/lib/index.js

@@ -28,6 +28,7 @@ var _exportNames = {
   Notification: true,
   Pagination: true,
   Progress: true,
+  QuickLinks: true,
   Radio: true,
   RadioCard: true,
   Search: true,
@@ -40,6 +41,7 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
+  Timeline: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -56,7 +58,8 @@ var _exportNames = {
   getThemeTokens: true,
   applyOuterBorder: true,
   applyTextStyles: true,
-  applyShadowToken: true
+  applyShadowToken: true,
+  Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
   enumerable: true,
@@ -202,6 +205,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _portal.Portal;
+  }
+});
 Object.defineProperty(exports, "PressableCardBase", {
   enumerable: true,
   get: function () {
@@ -214,6 +223,12 @@ Object.defineProperty(exports, "Progress", {
     return _Progress.default;
   }
 });
+Object.defineProperty(exports, "QuickLinks", {
+  enumerable: true,
+  get: function () {
+    return _QuickLinks.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -292,6 +307,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -495,6 +516,8 @@ var _Pagination = _interopRequireDefault(require("./Pagination"));
 
 var _Progress = _interopRequireDefault(require("./Progress"));
 
+var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
+
 var _Radio = _interopRequireWildcard(require("./Radio"));
 
 Object.keys(_Radio).forEach(function (key) {
@@ -569,6 +592,8 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
+var _Timeline = _interopRequireDefault(require("./Timeline"));
+
 var _ToggleSwitch = require("./ToggleSwitch");
 
 Object.keys(_ToggleSwitch).forEach(function (key) {
@@ -611,6 +636,8 @@ Object.keys(_utils).forEach(function (key) {
   });
 });
 
+var _portal = require("@gorhom/portal");
+
 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; }

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -13,6 +13,8 @@ var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _useSafeLayoutEffect = _interopRequireDefault(require("../useSafeLayoutEffect"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // TODO: systematise animations
@@ -32,7 +34,7 @@ function useVerticalExpandAnimation(_ref) {
     expandDuration,
     collapseDuration
   } = tokens;
-  (0, _react.useLayoutEffect)(() => {
+  (0, _useSafeLayoutEffect.default)(() => {
     if (expandStateChanged) {
       setIsAnimating(true);
       setWasExpanded(isExpanded);

package/lib/utils/index.js

@@ -9,6 +9,7 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
+  useSafeLayoutEffect: true,
   useScrollBlocking: true,
   useUniqueId: true,
   withLinkRouter: true,
@@ -44,6 +45,12 @@ Object.defineProperty(exports, "useResponsiveProp", {
     return _useResponsiveProp.default;
   }
 });
+Object.defineProperty(exports, "useSafeLayoutEffect", {
+  enumerable: true,
+  get: function () {
+    return _useSafeLayoutEffect.default;
+  }
+});
 Object.defineProperty(exports, "useScrollBlocking", {
   enumerable: true,
   get: function () {
@@ -175,6 +182,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
   });
 });
 
+var _useSafeLayoutEffect = _interopRequireDefault(require("./useSafeLayoutEffect"));
+
 var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));
 
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));

package/lib/utils/useSafeLayoutEffect.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _HydrationContext = require("../BaseProvider/HydrationContext");
+
+const isSSR = typeof window === 'undefined';
+
+const noop = () => {};
+/**
+ * useSafeLayoutEffect is a alternative to useLayoutEffect that avoids SSR hydration problems:
+ *  - In a client-side render, it uses useLayoutEffect to avoid flashing the pre-render UI to the user.
+ *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
+ *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
+ */
+
+
+const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
+: function (fn) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const isHydrating = (0, _HydrationContext.useHydrationContext)(); // Callback updates and effect re-runs when deps array content changes, like useEffect.
+
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+
+  const callback = (0, _react.useCallback)(fn, deps);
+  (0, _react.useLayoutEffect)(() => {
+    // Do nothing before hydrating server-generated content, like useEffect. When hydration completes,
+    // useHydrationContext provides false, re-rendering this hook and re-running the effect.
+    if (isHydrating) return noop; // If there's no hydration in progress, behave like useLayoutEffect.
+
+    return callback();
+  }, [isHydrating, callback]);
+};
+var _default = useSafeLayoutEffect;
+exports.default = _default;

package/lib-module/BaseProvider/HydrationContext.js

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HydrationContext = /*#__PURE__*/createContext();
+const isSSR = typeof window === 'undefined';
+
+const hasWebStyleTag = () => {
+  var _document;
+
+  if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
+    return false;
+  }
+
+  return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
+};
+/**
+ * Returns true if this render cycle is the hydration of existing SSR content.
+ *
+ * Use this when changing how content renders based on data that is instantly available
+ * during the very first client-side render or hydration, but not available on the server,
+ * to ensure no changes happen until the original SSR DOM has been hydrated.
+ */
+
+
+export const useHydrationContext = () => useContext(HydrationContext);
+/**
+ * Allows components and hooks to observe if SSR hydration is currently in progress
+ * and if so, to re-render with content that differs to the server when it is complete.
+ */
+
+export const HydrationProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
+
+  const valueFromAncestor = useHydrationContext();
+  const isHydrating = valueFromAncestor !== null && valueFromAncestor !== void 0 ? valueFromAncestor : Boolean(!hasMounted && hasWebStyleTag());
+  return /*#__PURE__*/_jsx(HydrationContext.Provider, {
+    value: isHydrating,
+    children: children
+  });
+};
+HydrationProvider.propTypes = {
+  children: PropTypes.node
+};
+export default HydrationProvider;

package/lib-module/BaseProvider/index.js

@@ -2,9 +2,11 @@ var _ThemeProvider$propTy;
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { PortalProvider } from '@gorhom/portal';
 import A11yInfoProvider from '../A11yInfoProvider';
 import ViewportProvider from '../ViewportProvider';
 import ThemeProvider from '../ThemeProvider';
+import { HydrationProvider } from './HydrationContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const BaseProvider = _ref => {
@@ -13,12 +15,16 @@ const BaseProvider = _ref => {
     children,
     themeOptions
   } = _ref;
-  return /*#__PURE__*/_jsx(A11yInfoProvider, {
-    children: /*#__PURE__*/_jsx(ViewportProvider, {
-      children: /*#__PURE__*/_jsx(ThemeProvider, {
-        defaultTheme: defaultTheme,
-        themeOptions: themeOptions,
-        children: children
+  return /*#__PURE__*/_jsx(HydrationProvider, {
+    children: /*#__PURE__*/_jsx(A11yInfoProvider, {
+      children: /*#__PURE__*/_jsx(ViewportProvider, {
+        children: /*#__PURE__*/_jsx(ThemeProvider, {
+          defaultTheme: defaultTheme,
+          themeOptions: themeOptions,
+          children: /*#__PURE__*/_jsx(PortalProvider, {
+            children: children
+          })
+        })
       })
     })
   });

package/lib-module/Button/ButtonBase.js

@@ -171,11 +171,12 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
 const selectItemIconTokens = _ref8 => {
   let {
     color,
+    iconColor,
     iconSize
   } = _ref8;
   return {
     size: iconSize,
-    color
+    color: iconColor || color
   };
 };
 

package/lib-module/List/List.js

@@ -2,15 +2,23 @@ import React, { cloneElement, forwardRef, Children } from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import ListItem from './ListItem';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const isListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name); // Match our own ListItem, and also, custom list items
+
+  return Boolean(elementName.match(/Item/));
+};
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 
+
 const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -24,12 +32,8 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const items = Children.map(children, (child, index) => {
-    var _child$type, _child$type2;
-
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
-    const isListItem = componentName => Boolean(componentName === ListItem.displayName);
-
-    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
+    if (isListItem(child)) {
       return /*#__PURE__*/cloneElement(child, {
         showDivider,
         isLastItem: index + 1 === Children.count(children),
@@ -52,7 +56,7 @@ List.displayName = 'List';
 List.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
-  children: componentPropType('ListItem'),
+  children: PropTypes.node,
 
   /**
    * In case it is not the last item allow display divider

package/lib-module/List/PressableListItemBase.js

@@ -4,10 +4,10 @@ import ABBPropTypes from 'airbnb-prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, withLinkRouter } from '../utils';
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
 import ListItemBase from './ListItemBase';
-import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent';
-import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -57,9 +57,10 @@ const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
     href,
     onPress
   });
+  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
   return /*#__PURE__*/_jsx(ListItemBase, {
     ref: listItemRef,
-    tokens: tokens(),
+    tokens: listItemTokens,
     ...listItemProps,
     children: _ref3 => {
       let {
@@ -99,16 +100,11 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
-  },
-  tokens: { ...contentTokenTypes,
-    ...markTokenTypes
   }
 });
-PressableListItemBase.propTypes = {
+PressableListItemBase.propTypes = { ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
-  // TODO - type this better, maybe import the subcomponent token types and run it through util
-  // eslint-disable-next-line react/forbid-prop-types
   tokens: PropTypes.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),