@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Link/InlinePressable.native.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable camelcase */
+import React from 'react';
+import Text from "react-native-web/dist/exports/Text";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import PropTypes from 'prop-types';
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
 
 // TouchableWithoutFeedback and Pressable have similar but not identical props APIs
+import { jsx as _jsx } from "react/jsx-runtime";
 const pressablePropsToTouchable = _ref => {
   let {
     unstable_pressDelay,
@@ -50,17 +43,17 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
     style,
     ...rest
   } = _ref2;
-  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isPressed, setIsPressed] = _react.default.useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
   const handlePressIn = () => setIsPressed(true);
   const handlePressOut = () => setIsPressed(false);
   const pressState = {
@@ -69,9 +62,8 @@ const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     // limited support on native
     hover: false // not yet supported on native
   };
-
   const currentStyle = typeof style === 'function' ? style(pressState) : style;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+  return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
     onPress: onPress,
     onPressIn: handlePressIn,
     onPressOut: handlePressOut,
@@ -79,7 +71,7 @@ const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onBlur: handleBlur,
     ref: ref,
     ...pressablePropsToTouchable(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    children: /*#__PURE__*/_jsx(Text, {
       style: currentStyle,
       children: typeof children === 'function' ? children(pressState) : children
     })
@@ -87,9 +79,8 @@ const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 InlinePressable.displayName = 'InlinePressable';
 InlinePressable.propTypes = {
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func]),
-  onPress: _propTypes.default.func
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
+  onPress: PropTypes.func
 };
-var _default = InlinePressable;
-exports.default = _default;
+export default InlinePressable;

package/lib/Link/Link.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ThemeProvider = require("../ThemeProvider");
-var _LinkBase = _interopRequireDefault(require("./LinkBase"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import LinkBase from './LinkBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     children,
@@ -19,8 +12,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet,
     ...linkProps
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+  const getTokens = useThemeTokensCallback('Link', tokens, variant);
+  return /*#__PURE__*/_jsx(LinkBase, {
     href: href,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -31,6 +24,5 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = _LinkBase.default.propTypes;
-var _default = Link;
-exports.default = _default;
+Link.propTypes = LinkBase.propTypes;
+export default Link;

package/lib/Link/LinkBase.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _props = require("../utils/props");
-var _pressability = require("../utils/pressability");
-var _utils = require("../utils");
-var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Icon = require("../Icon");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
+import { resolvePressableTokens } from '../utils/pressability';
+import { withLinkRouter } from '../utils';
+import InlinePressable from './InlinePressable';
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
+import { IconText, iconComponentPropTypes } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,
@@ -29,10 +22,10 @@ const selectOuterBorderStyles = _ref => {
   return (
     // A view wrapper with a border on native messes up inline text alignment
     // so for now make focus styles strictly web-only
-    _Platform.default.OS === 'web' ? {
+    Platform.OS === 'web' ? {
       // Allow theme to define outline, or, turn off outline and use border if rounded corners required
       outline: outerBorderOutline,
-      ...(0, _ThemeProvider.applyOuterBorder)({
+      ...applyOuterBorder({
         outerBorderColor,
         outerBorderWidth,
         outerBorderGap
@@ -48,10 +41,10 @@ const selectTextStyles = _ref2 => {
   } = _ref2;
   return {
     color,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    ...applyTextStyles({
       blockFontSize
     }),
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
         transition: 'color 200ms'
@@ -66,7 +59,7 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockLineHeight,
     blockFontName
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
@@ -86,7 +79,7 @@ const selectDecorationStyles = _ref4 => {
     textDecorationLine: textLine,
     textDecorationStyle: textLineStyle,
     alignSelf,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
         transition: 'color 200ms'
@@ -138,7 +131,7 @@ const selectIconTokens = _ref5 => {
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,
@@ -153,33 +146,33 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   const {
     onPress,
     ...props
-  } = _props.clickProps.toPressProps(rawRest);
+  } = clickProps.toPressProps(rawRest);
   const {
     hrefAttrs,
     rest
-  } = _props.hrefAttrsProp.bundle(props);
+  } = hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _props.linkProps.handleHref({
+    onPress: linkProps.handleHref({
       href,
       onPress
     }),
     hrefAttrs,
     ...rest
   });
-  const resolveLinkTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {
+  const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
     iconPosition
   });
   const defaultThemeTokens = resolveLinkTokens({});
   const hasIcon = Boolean(icon || defaultThemeTokens.icon);
 
   // On web, this makes focus rings wrap only the link, not the entire block
-  const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
+  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
+  } = useTheme();
+  return /*#__PURE__*/_jsx(InlinePressable, {
     ...selectedProps,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
@@ -202,7 +195,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const {
         iconSpace
       } = themeTokens;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+      return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: iconSpace,
@@ -211,7 +204,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
           tokens: iconTokens,
           style: staticStyles.bubblePointerEvents
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: /*#__PURE__*/_jsx(Text, {
           style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
@@ -222,39 +215,39 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
 LinkBase.displayName = 'LinkBase';
 LinkBase.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('Link'),
+  tokens: getTokensPropType('Link'),
   /**
    * href for the Link
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * AccesibilityRole for the link base
    */
-  accessibilityrole: _propTypes.default.string,
+  accessibilityrole: PropTypes.string,
   /**
    * Children nodes that can be added
    */
-  variant: _props.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
-  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  iconProps: PropTypes.exact(iconComponentPropTypes),
   /**
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   blockLeft: {
     alignSelf: 'flex-start'
   },
@@ -266,12 +259,11 @@ const staticStyles = _StyleSheet.default.create({
     alignSelf: 'baseline'
   },
   bubblePointerEvents: {
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         pointerEvents: 'none'
       }
     })
   }
 });
-var _default = (0, _utils.withLinkRouter)(LinkBase);
-exports.default = _default;
+export default withLinkRouter(LinkBase);

package/lib/Link/TextButton.js

@@ -1,21 +1,16 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import LinkBase from './LinkBase';
+import { variantProp } from '../utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _LinkBase = _interopRequireDefault(require("./LinkBase"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
- */const TextButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,
@@ -24,8 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     accessibilityRole = 'button',
     ...linkProps
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+  const getTokens = useThemeTokensCallback('Link', tokens, variant);
+  return /*#__PURE__*/_jsx(LinkBase, {
     onPress: onPress,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -36,14 +31,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
-  ..._LinkBase.default.propTypes,
+  ...LinkBase.propTypes,
   /** onPress function */
-  onPress: _propTypes.default.func.isRequired,
+  onPress: PropTypes.func.isRequired,
   /** Children node that can be added */
-  children: _propTypes.default.node.isRequired,
-  variant: _utils.variantProp.propType,
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
   /** Accesibility role for TextButton */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-var _default = TextButton;
-exports.default = _default;
+export default TextButton;

package/lib/Link/index.js

@@ -1,34 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ChevronLink", {
-  enumerable: true,
-  get: function () {
-    return _ChevronLink.default;
-  }
-});
-Object.defineProperty(exports, "Link", {
-  enumerable: true,
-  get: function () {
-    return _Link.default;
-  }
-});
-Object.defineProperty(exports, "LinkBase", {
-  enumerable: true,
-  get: function () {
-    return _LinkBase.default;
-  }
-});
-Object.defineProperty(exports, "TextButton", {
-  enumerable: true,
-  get: function () {
-    return _TextButton.default;
-  }
-});
-var _ChevronLink = _interopRequireDefault(require("./ChevronLink"));
-var _Link = _interopRequireDefault(require("./Link"));
-var _LinkBase = _interopRequireDefault(require("./LinkBase"));
-var _TextButton = _interopRequireDefault(require("./TextButton"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import ChevronLink from './ChevronLink';
+import Link from './Link';
+import LinkBase from './LinkBase';
+import TextButton from './TextButton';
+export { ChevronLink, Link, LinkBase, TextButton };

package/lib/List/List.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+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);
+  const elementName = (element === null || element === void 0 || (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === 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/));
 };
@@ -24,24 +17,24 @@ const isListItem = element => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
     tokens,
     variant,
-    accessibilityRole = _Platform.default.select({
+    accessibilityRole = Platform.select({
       web: 'list',
       default: undefined
     }),
     ...rest
   } = _ref;
-  const items = _react.default.Children.map(children, (child, index) => {
+  const items = React.Children.map(children, (child, index) => {
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
     if (isListItem(child)) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         showDivider,
-        isLastItem: index + 1 === _react.default.Children.count(children),
+        isLastItem: index + 1 === React.Children.count(children),
         tokens,
         variant,
         ...child.props
@@ -49,19 +42,19 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return child;
   });
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const content = /*#__PURE__*/_jsx(View, {
     style: styles.list,
     accessibilityRole: accessibilityRole,
     ref: ref,
     ...selectProps(rest),
     children: items
   });
-  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx("div", {
     style: styles.container,
     children: content
   }) : content;
 });
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   container: {
     display: 'block'
   },
@@ -73,13 +66,12 @@ const styles = _StyleSheet.default.create({
 List.displayName = 'List';
 List.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
-  variant: _utils.variantProp.propType,
-  children: _propTypes.default.node,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.node,
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: _propTypes.default.bool
+  showDivider: PropTypes.bool
 };
-var _default = List;
-exports.default = _default;
+export default List;

package/lib/List/ListItem.js

@@ -1,18 +1,13 @@
-"use strict";
+import React from 'react';
+import ListItemBase from './ListItemBase';
+import { useThemeTokens } from '../ThemeProvider';
+import { variantProp } from '../utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
- */const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -20,8 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     title,
     ...listItemProps
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const themeTokens = useThemeTokens('List', tokens, variant);
+  return /*#__PURE__*/_jsx(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
@@ -31,8 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
-  variant: _utils.variantProp.propType,
-  ..._ListItemBase.default.propTypes
+  variant: variantProp.propType,
+  ...ListItemBase.propTypes
 };
-var _default = ListItem;
-exports.default = _default;
+export default ListItem;