@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/Link/MobileIconTextContent.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileIconTextContent = 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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Icon = require("../Icon/Icon");
+var _spacingProps = require("../utils/props/spacingProps");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MobileIconTextContent = exports.MobileIconTextContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = _react.default.useState(0);
+  const latestTranslateYRef = _react.default.useRef(0);
+  const layoutsRef = _react.default.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = _react.default.useCallback(() => {
+    const {
+      container,
+      text,
+      icon
+    } = layoutsRef.current;
+    if (!container || !icon || !icon.height) return;
+    const targetY = text ? text.y + text.height / 2 : container.height / 2;
+    const iconY = icon.y + icon.height / 2;
+    const nextTranslateY = Math.round((targetY - iconY) * 100) / 100;
+    if (!Number.isFinite(nextTranslateY)) return;
+    if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return;
+    latestTranslateYRef.current = nextTranslateY;
+    setTranslateY(nextTranslateY);
+  }, []);
+  const handleContainerLayout = _react.default.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = _react.default.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = _react.default.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: _spacingProps.spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: _propTypes.default.node
+};
+const staticStyles = _StyleSheet.default.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});

package/lib/cjs/Link/TextButton.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TextButton = 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 _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _LinkBase = require("./LinkBase");
+var _variantProp = require("../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * `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) => {
+ */
+const TextButton = exports.TextButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,
@@ -24,8 +25,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     accessibilityRole = 'button',
     ...linkProps
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('Link', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.LinkBase, {
     onPress: onPress,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -36,13 +37,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 });
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
-  ..._LinkBase.default.propTypes,
+  ..._LinkBase.LinkBase.propTypes,
   /** onPress function */
   onPress: _propTypes.default.func.isRequired,
   /** Children node that can be added */
   children: _propTypes.default.node.isRequired,
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /** Accesibility role for TextButton */
   accessibilityRole: _propTypes.default.string
-};
-var _default = exports.default = TextButton;
+};

package/lib/cjs/List/List.js

@@ -3,16 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.List = 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 _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const LIST_ITEM_TYPE = 'ListItem';
 const LINKS_ITEM_TYPE = 'LinksItem';
 const isListItem = element => {
@@ -28,7 +32,7 @@ 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 = exports.List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
@@ -82,8 +86,8 @@ const styles = _StyleSheet.default.create({
 List.displayName = 'List';
 List.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('List'),
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.node,
   /**
    * In case it is not the last item allow display divider
@@ -91,8 +95,7 @@ List.propTypes = {
   showDivider: _propTypes.default.bool,
   /**
    * The vertical alignment of the icon in ListItems.
-   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   * This prop is passed down to ListItem components and can be overridden in individual ListItem components.
    */
   iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom'])
-};
-var _default = exports.default = List;
+};

package/lib/cjs/List/ListItem.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _ListItemBase = require("./ListItemBase");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
- */const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ListItem = exports.ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -22,8 +24,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     iconVerticalAlign = 'top',
     ...listItemProps
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('List', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
@@ -35,9 +37,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
   /** Theme tokens for styling */
-  tokens: (0, _utils.getTokensPropType)('List'),
+  tokens: (0, _tokens.getTokensPropType)('List'),
   /** Variant configuration for the component */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /** Content to be rendered within the list item */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   /** Title of the list item */
@@ -50,5 +52,4 @@ ListItem.propTypes = {
   iconColor: _propTypes.default.string,
   /** Size of the icon */
   iconSize: _propTypes.default.number
-};
-var _default = exports.default = ListItem;
+};

package/lib/cjs/List/ListItemBase.js

@@ -3,20 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListItemBase = 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 _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _ThemeProvider = require("../ThemeProvider");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _ListItemContent = require("./ListItemContent");
+var _ListItemMark = require("./ListItemMark");
+var _Typography = require("../Typography/Typography");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const VERTICAL_CENTERING_DIVISOR = 2;
 const alignmentMap = {
   top: 'flex-start',
@@ -54,7 +58,7 @@ const selectAlignmentStyles = iconVerticalAlign => ({
 const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
   return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR;
 };
-const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const ListItemBase = exports.ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -81,7 +85,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     fontSize,
     lineHeight: lineHeightRatio
-  } = (0, _ThemeProvider.useThemeTokens)('Typography', {}, {
+  } = (0, _useThemeTokens.useThemeTokens)('Typography', {}, {
     size: 'h4',
     bold: true
   });
@@ -114,7 +118,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       isLastItem
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.ListItemMark, {
         tokens: {
           ...tokens,
           iconMarginTop: adjustedIconMarginTop
@@ -124,13 +128,13 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconSize: iconSize
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: [staticStyles.titleAndContentContainer],
-        children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           variant: {
             size: 'h4',
             bold: true
           },
           children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.ListItemContent, {
           tokens: tokens,
           children: children
         })]
@@ -158,8 +162,8 @@ const staticStyles = _StyleSheet.default.create({
 });
 ListItemBase.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('List'),
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   /** Controls the vertical alignment of the icon */
   iconVerticalAlign: _propTypes.default.oneOf(['top', 'center', 'bottom']),
@@ -185,5 +189,4 @@ ListItemBase.propTypes = {
    * In case it is not the last item allow display divider
    */
   showDivider: _propTypes.default.bool
-};
-var _default = exports.default = ListItemBase;
+};

package/lib/cjs/List/ListItemContent.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokenTypes = exports.default = void 0;
+exports.tokenTypes = exports.ListItemContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
+var _children = require("../utils/children");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _styles = require("../ThemeProvider/utils/styles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tokenTypes = exports.tokenTypes = {
@@ -28,7 +29,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontColor,
     itemTextColor
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
@@ -46,14 +47,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ListItemContent = exports.ListItemContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     children
   } = _ref2;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const textStyles = selectItemTextStyles(tokens, themeOptions);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [staticStyles.wrap, tokens?.itemUnderline && {
@@ -61,7 +62,7 @@ const ListItemContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       textDecorationColor: tokens.itemFontColor
     }],
     ref: ref,
-    children: (0, _utils.wrapStringsInText)(children, {
+    children: (0, _children.wrapStringsInText)(children, {
       style: textStyles
     })
   });
@@ -76,5 +77,4 @@ const staticStyles = _StyleSheet.default.create({
 ListItemContent.propTypes = {
   tokens: _propTypes.default.shape(tokenTypes).isRequired,
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = ListItemContent;
+};

package/lib/cjs/List/ListItemMark.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokenTypes = exports.default = void 0;
+exports.tokenTypes = exports.ListItemMark = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../utils");
+var _Icon = require("../Icon/Icon");
+var _useVariants = require("../utils/useVariants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tokenTypes = exports.tokenTypes = {
@@ -49,7 +49,7 @@ const getIconColorVariants = iconVariants => iconVariants?.filter(variant => var
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const ListItemMark = exports.ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     icon,
     iconColor,
@@ -58,7 +58,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const containerStyles = selectContainerStyles(themeTokens);
-  const iconVariants = (0, _utils.useVariants)('Icon');
+  const iconVariants = (0, _useVariants.useVariants)('Icon');
   const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
     const {
@@ -69,7 +69,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     const finalIconColor = iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: containerStyles,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: icon,
         tokens: {
           size: finalIconSize,
@@ -93,7 +93,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: bulletStyles,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: themeTokens.bulletIcon,
         tokens: {
           color: itemIconColor,
@@ -118,5 +118,4 @@ ListItemMark.propTypes = {
    * Allow the user define the icon size
    */
   iconSize: _propTypes.default.number
-};
-var _default = exports.default = ListItemMark;
+};

package/lib/cjs/List/PressableListItemBase.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PressableListItemBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
+var _pressability = require("../utils/pressability");
+var _clickProps = require("../utils/props/clickProps");
+var _linkProps = require("../utils/props/linkProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _tokens = require("../utils/props/tokens");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _ListItemBase = require("./ListItemBase");
+var _ListItemContent = require("./ListItemContent");
+var _ListItemMark = require("./ListItemMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableStyles = _ref => {
@@ -41,7 +45,7 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableListItemBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,
@@ -53,17 +57,17 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = _clickProps.clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rest: listItemProps
-  } = _utils.hrefAttrsProp.bundle(props);
-  const handlePress = _utils.linkProps.handleHref({
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
+  const handlePress = _linkProps.linkProps.handleHref({
     href,
     onPress
   });
-  const listItemTokens = (0, _utils.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const listItemTokens = (0, _tokens.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.ListItemBase, {
     ref: listItemRef,
     tokens: listItemTokens,
     ...listItemProps,
@@ -71,7 +75,7 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
       let {
         isLastItem
       } = _ref3;
-      const getTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+      const getTokens = pressableState => (0, _pressability.resolvePressableTokens)(tokens, pressableState, {
         last: isLastItem
       });
       const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
@@ -84,10 +88,10 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
         children: pressableState => {
           const themeTokens = getTokens(pressableState);
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.ListItemMark, {
               icon: icon,
               tokens: themeTokens
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.ListItemContent, {
               tokens: themeTokens,
               children: typeof children === 'function' ? children(pressableState) : children
             })]
@@ -97,22 +101,24 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
     }
   });
 });
-PressableListItemBase.displayName = 'PressableListItemBase';
-PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
+PressableListItemBaseInner.displayName = 'PressableListItemBase';
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
   }
 });
-PressableListItemBase.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
+PressableListItemBaseInner.propTypes = {
+  ..._withLinkRouter.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   onPress: _propTypes.default.func,
   // eslint-disable-next-line react/forbid-prop-types
   tokens: _propTypes.default.any,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  listItemRef: _airbnbPropTypes.default.ref()
+  listItemRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.any
+  })])
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(PressableListItemBase);
+const PressableListItemBase = exports.PressableListItemBase = (0, _withLinkRouter.withLinkRouter)(PressableListItemBaseInner);
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';