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

package/lib/esm/Icon/Icon.js

@@ -3,10 +3,11 @@ import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import useWindowDimensions from "react-native-web/dist/exports/useWindowDimensions";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,
@@ -97,5 +98,4 @@ Icon.propTypes = {
    * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
   icon: PropTypes.elementType.isRequired
-};
-export default Icon;
+};

package/lib/esm/Icon/IconText.js

@@ -4,9 +4,9 @@ import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Icon, { iconComponentPropTypes } from './Icon';
-import { getStackedContent } from '../StackView';
-import { spacingProps } from '../utils';
+import { Icon, iconComponentPropTypes } from './Icon';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { spacingProps } from '../utils/props/spacingProps';
 
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
@@ -17,7 +17,7 @@ import { spacingProps } from '../utils';
  *  - within a container with `flexDirection: 'row'`
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space,
     iconPosition = 'left',
@@ -105,5 +105,4 @@ const staticStyles = StyleSheet.create({
   adjustedContainer: {
     position: 'absolute'
   }
-});
-export default IconText;
+});

package/lib/esm/IconButton/IconButton.js

@@ -4,9 +4,19 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
-import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon';
+import { applyOuterBorder, applyShadowToken } from '../ThemeProvider/utils/styles';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { resolvePressableState } from '../utils/pressability';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { Icon } from '../Icon/Icon';
 
 // function to get the dimentionals of the conditionals
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -119,7 +129,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const IconButtonBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},
@@ -178,8 +188,8 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   });
 });
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
+IconButtonBase.displayName = 'IconButton';
+IconButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
@@ -214,4 +224,7 @@ const staticStyles = StyleSheet.create({
     alignSelf: 'baseline'
   }
 });
-export default withLinkRouter(IconButton);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { IconButtonBase };
+export const IconButton = withLinkRouter(IconButtonBase);

package/lib/esm/InputLabel/InputLabel.js

@@ -3,11 +3,17 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import LabelContent from './LabelContent';
-import Tooltip from '../Tooltip';
-import tooltipPropTypes from '../Tooltip/shared';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { LabelContent } from './LabelContent';
+import { Tooltip } from '../Tooltip/Tooltip.native';
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({
@@ -39,7 +45,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,
@@ -154,7 +160,6 @@ InputLabel.propTypes = {
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 };
-export default InputLabel;
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,

package/lib/esm/InputLabel/LabelContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     forId
@@ -24,5 +24,4 @@ const staticStyles = {
   inheritCursor: {
     cursor: 'inherit'
   }
-};
-export default LabelContent;
+};

package/lib/esm/InputLabel/LabelContent.native.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -14,5 +14,4 @@ const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: PropTypes.node
-};
-export default LabelContent;
+};

package/lib/esm/InputSupports/InputSupports.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import useInputSupports from './useInputSupports';
-import { getTokensPropType, useCopy } from '../utils';
-import dictionary from './dictionary';
-import tooltipPropTypes from '../Tooltip/shared';
+import { InputLabel } from '../InputLabel/InputLabel';
+import { Feedback } from '../Feedback/Feedback';
+import { StackView } from '../StackView/StackView';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useInputSupports } from './useInputSupports';
+import { getTokensPropType } from '../utils/props/tokens';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     copy = 'en',
@@ -134,5 +135,4 @@ InputSupports.propTypes = {
    * Max number of characters that allows an input text.
    */
   maxCharacterAllowed: PropTypes.number
-};
-export default InputSupports;
+};

package/lib/esm/InputSupports/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     maxCharacters: 'Maximum %{charCount} characters',
     charactersRemaining: '%{charCount} characters remaining',

package/lib/esm/InputSupports/useInputSupports.js

@@ -1,8 +1,8 @@
-import useUniqueId from '../utils/useUniqueId';
-import { useCopy } from '../utils';
-import dictionary from './dictionary';
+import { useUniqueId } from '../utils/useUniqueId';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
-const useInputSupports = _ref => {
+export const useInputSupports = _ref => {
   let {
     label,
     feedback,
@@ -36,5 +36,4 @@ const useInputSupports = _ref => {
     feedbackId,
     a11yProps
   };
-};
-export default useInputSupports;
+};

package/lib/esm/Link/ChevronLink.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType, linkProps } from '../utils';
-import LinkBase from './LinkBase';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { selectTokens, getTokensPropType } from '../utils/props/tokens';
+import { linkProps } from '../utils/props/linkProps';
+import { LinkBase } from './LinkBase';
 
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
@@ -11,7 +12,7 @@ import LinkBase from './LinkBase';
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,
@@ -42,6 +43,7 @@ const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
   return /*#__PURE__*/_jsx(LinkBase, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,
@@ -64,5 +66,4 @@ ChevronLink.propTypes = {
    * Changes direction of chevron icon
    */
   direction: PropTypes.oneOf(['left', 'right'])
-};
-export default ChevronLink;
+};

package/lib/esm/Link/InlinePressable.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
  * @param {PressableProps} PressableProps
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
@@ -44,5 +44,4 @@ const staticStyles = StyleSheet.create({
   inlineFlex: {
     display: 'inline-flex'
   }
-});
-export default InlinePressable;
+});

package/lib/esm/Link/InlinePressable.native.js

@@ -43,7 +43,7 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
@@ -82,5 +82,4 @@ InlinePressable.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
   onPress: PropTypes.func
-};
-export default InlinePressable;
+};

package/lib/esm/Link/Link.js

@@ -1,9 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import LinkBase from './LinkBase';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { LinkBase } from './LinkBase';
+import { iconComponentPropTypes } from '../Icon/Icon';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { linkProps as linkPropTypes } from '../utils/props/linkProps';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+
+// eslint-disable-next-line no-unused-vars
 import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const [_, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkPropTypes, viewProps, contentfulProps]);
+export const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     children,
@@ -26,10 +38,40 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Link.displayName = 'Link';
 Link.propTypes = {
-  ...LinkBase.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccessibilityRole 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.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.elementType,
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
+   */
+  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.shape(hrefAttrsProp.types),
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: PropTypes.object
-};
-export default Link;
+};

package/lib/esm/Link/LinkBase.js

@@ -3,12 +3,23 @@ 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, contentfulProps } from '../utils/props';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
 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 { MobileIconTextContent } from './MobileIconTextContent';
+import { InlinePressable } from './InlinePressable';
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { iconComponentPropTypes } from '../Icon/Icon';
+import { IconText } from '../Icon/IconText';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps, contentfulProps]);
 const selectOuterBorderStyles = _ref => {
@@ -127,7 +138,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.forwardRef((_ref6, ref) => {
+const LinkBaseInner = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,
@@ -137,6 +148,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -180,8 +192,8 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const mobileCompensation = null;
-      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const shouldUseMeasuredMobileContent = Platform.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -196,25 +208,38 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
+      const shouldUseMeasuredMobileContent = Platform.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/_jsx(Text, {
+        style: [textStyles, blockTextStyles, textBaselineStyle, staticStyles.bubblePointerEvents],
+        children: typeof children === 'function' ? children(linkState) : children
+      });
+      const sharedIconProps = {
+        ...iconProps,
+        tokens: iconTokens,
+        style: staticStyles.bubblePointerEvents
+      };
+      if (shouldUseMeasuredMobileContent) {
+        return /*#__PURE__*/_jsx(MobileIconTextContent, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
       return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
+        iconProps: sharedIconProps,
+        children: linkTextContent
       });
     }
   });
 });
-LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = {
+LinkBaseInner.displayName = 'LinkBase';
+LinkBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
   /**
@@ -222,9 +247,9 @@ LinkBase.propTypes = {
    */
   href: PropTypes.string,
   /**
-   * AccesibilityRole for the link base
+   * AccessibilityRole for the link base
    */
-  accessibilityrole: PropTypes.string,
+  accessibilityRole: PropTypes.string,
   /**
    * Children nodes that can be added
    */
@@ -266,12 +291,13 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 });
-export default withLinkRouter(LinkBase);
+export const LinkBase = withLinkRouter(LinkBaseInner);

package/lib/esm/Link/MobileIconTextContent.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { Icon, iconComponentPropTypes } from '../Icon/Icon';
+import { spacingProps } from '../utils/props/spacingProps';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = React.useState(0);
+  const latestTranslateYRef = React.useRef(0);
+  const layoutsRef = React.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = React.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.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = React.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = React.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/_jsx(View, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/_jsx(Text, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/_jsx(View, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/_jsx(View, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});