@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Link/LinkBase.js

@@ -1,42 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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 }; }
-
-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, _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,
@@ -45,28 +19,32 @@ const selectOuterBorderStyles = _ref => {
     borderRadius,
     outerBorderOutline
   } = _ref;
-  return (// A view wrapper with a border on native messes up inline text alignment
+  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,
-        borderRadius
-      })
+        outerBorderGap
+      }),
+      borderRadius
     } : {}
   );
 };
-
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    blockFontSize
   } = _ref2;
   return {
     color,
-    ..._Platform.default.select({
+    ...applyTextStyles({
+      blockFontSize
+    }),
+    ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
         transition: 'color 200ms'
@@ -74,7 +52,6 @@ const selectTextStyles = _ref2 => {
     })
   };
 };
-
 const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
@@ -82,26 +59,27 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockLineHeight,
     blockFontName
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   });
 };
-
 const selectDecorationStyles = _ref4 => {
   let {
     color,
     textLine,
-    textLineStyle
+    textLineStyle,
+    alignSelf
   } = _ref4;
   return {
     color,
     textDecorationLine: textLine,
     textDecorationStyle: textLineStyle,
-    ..._Platform.default.select({
+    alignSelf,
+    ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
         transition: 'color 200ms'
@@ -109,21 +87,28 @@ const selectDecorationStyles = _ref4 => {
     })
   };
 };
-
 const selectIconTokens = _ref5 => {
   let {
     color,
     iconSize,
-    iconTranslateX,
-    iconTranslateY
+    blockFontSize,
+    iconTranslateX
   } = _ref5;
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text.
+   * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
+   * where X = blockFontSize, Y = iconSize and Z = translateY
+   */
+  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,
-    translateY: iconTranslateY,
+    translateY: translateY < 0 ? 0 : translateY,
     size: iconSize
   };
 };
+
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
  * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
@@ -146,55 +131,51 @@ 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__*/(0, _react.forwardRef)((_ref6, ref) => {
+const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,
     iconPosition = icon ? 'left' : undefined,
-    iconProps,
+    iconProps = {},
     variant,
     tokens = {},
     children,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
-
   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 hasIcon = Boolean(icon || defaultThemeTokens.icon);
 
-  const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
+  // On web, this makes focus rings wrap only the link, not the entire block
+  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
-    inlineFlex: hasIcon // assuming links without icons should be inline (even if they are long)
+  } = useTheme();
+  return /*#__PURE__*/_jsx(InlinePressable, {
+    ...selectedProps,
+    inlineFlex: hasIcon
+    // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
     style: linkState => {
@@ -206,71 +187,83 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const textStyles = selectTextStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // TODO: may need to apply some smarter text inheritance here if inline to avoid native
+      const iconTokens = selectIconTokens(themeTokens);
+      // TODO: may need to apply some smarter text inheritance here if inline to avoid native
       // issues like double-application of line heights breaking align-items: baseline
-
       const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
       const IconComponent = icon || themeTokens.icon;
       const {
         iconSpace
       } = themeTokens;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+      return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: iconSpace,
-        iconProps: { ...iconProps,
-          tokens: iconTokens
+        iconProps: {
+          ...iconProps,
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
-          children: children
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
+          children: typeof children === 'function' ? children(linkState) : children
         })
       });
     }
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('Link'),
-  variant: _props.variantProp.propType,
-
+LinkBase.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  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 or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
-
+  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'
   },
   rowContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'flex-start'
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
-
-var _default = (0, _utils.withLinkRouter)(LinkBase);
-
-exports.default = _default;
+export default withLinkRouter(LinkBase);

package/lib/Link/TextButton.js

@@ -1,32 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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 }; }
-
-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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import LinkBase from './LinkBase';
+import { variantProp } from '../utils';
 
 /**
  * `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__*/(0, _react.forwardRef)((_ref, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,
@@ -35,8 +19,8 @@ const TextButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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,
@@ -46,8 +30,14 @@ const TextButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 TextButton.displayName = 'TextButton';
-TextButton.propTypes = { ..._LinkBase.default.propTypes,
-  onPress: _propTypes.default.func.isRequired
+TextButton.propTypes = {
+  ...LinkBase.propTypes,
+  /** onPress function */
+  onPress: PropTypes.func.isRequired,
+  /** Children node that can be added */
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  /** Accesibility role for TextButton */
+  accessibilityRole: PropTypes.string
 };
-var _default = TextButton;
-exports.default = _default;
+export default TextButton;

package/lib/Link/index.js

@@ -1,39 +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,88 +1,77 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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 _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 }; }
-
-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, _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); // Match our own ListItem, and also, custom list items
-
+  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/));
 };
+
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-
-
-const List = /*#__PURE__*/(0, _react.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.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__*/(0, _react.cloneElement)(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         showDivider,
-        isLastItem: index + 1 === _react.Children.count(children),
+        isLastItem: index + 1 === React.Children.count(children),
         tokens,
         variant,
         ...child.props
       });
     }
-
     return child;
   });
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    ref: ref,
+  const content = /*#__PURE__*/_jsx(View, {
+    style: styles.list,
     accessibilityRole: accessibilityRole,
+    ref: ref,
     ...selectProps(rest),
     children: items
   });
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx("div", {
+    style: styles.container,
+    children: content
+  }) : content;
+});
+const styles = StyleSheet.create({
+  container: {
+    display: 'block'
+  },
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
 });
 List.displayName = 'List';
-List.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
-  variant: _utils.variantProp.propType,
-  children: _propTypes.default.node,
-
+List.propTypes = {
+  ...selectedSystemPropTypes,
+  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,32 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-
-var _Typography = _interopRequireDefault(require("../Typography"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-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; }
+import React from 'react';
+import ListItemBase from './ListItemBase';
+import { useThemeTokens } from '../ThemeProvider';
+import { variantProp } from '../utils';
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -34,23 +15,18 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     title,
     ...listItemProps
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemBase.default, {
+  const themeTokens = useThemeTokens('List', tokens, variant);
+  return /*#__PURE__*/_jsx(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      variant: {
-        size: 'h4'
-      },
-      children: title
-    }), children]
+    title: title,
+    children: children
   });
 });
 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;