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

package/lib/cjs/InputSupports/InputSupports.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InputSupports = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _InputLabel = _interopRequireDefault(require("../InputLabel"));
-var _Feedback = _interopRequireDefault(require("../Feedback"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _useInputSupports = _interopRequireDefault(require("./useInputSupports"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _shared = _interopRequireDefault(require("../Tooltip/shared"));
+var _InputLabel = require("../InputLabel/InputLabel");
+var _Feedback = require("../Feedback/Feedback");
+var _StackView = require("../StackView/StackView");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useInputSupports = require("./useInputSupports");
+var _tokens = require("../utils/props/tokens");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
+var _shared = require("../Tooltip/shared");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const InputSupports = exports.InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     copy = 'en',
@@ -34,9 +35,9 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     space
-  } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  } = (0, _useThemeTokens.useThemeTokens)('InputSupports');
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const maxCharsReachedErrorMessage = inputValue?.length > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
@@ -46,7 +47,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintId,
     feedbackId,
     a11yProps
-  } = (0, _useInputSupports.default)({
+  } = (0, _useInputSupports.useInputSupports)({
     feedback,
     hint,
     label,
@@ -56,10 +57,10 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     maxCharacterAllowed,
     charactersCount: maxCharacterAllowed - inputValue?.length
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
     space: space,
     ref: ref,
-    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.InputLabel, {
       copy: copy,
       label: label,
       hint: hint,
@@ -74,7 +75,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...a11yProps,
       validation: feedbackValidation,
       accessibilityDescribedBy: feedbackId
-    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,
       validation: feedbackValidation,
@@ -113,7 +114,7 @@ InputSupports.propTypes = {
   /**
    * Additional tokens to override the default feedback tokens.
    */
-  feedbackTokens: (0, _utils.getTokensPropType)('Feedback'),
+  feedbackTokens: (0, _tokens.getTokensPropType)('Feedback'),
   /**
    * Additional props to pass to the `Feedback` component.
    */
@@ -124,7 +125,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.default), _propTypes.default.string]),
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.propTypes), _propTypes.default.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */
@@ -141,5 +142,4 @@ InputSupports.propTypes = {
    * Max number of characters that allows an input text.
    */
   maxCharacterAllowed: _propTypes.default.number
-};
-var _default = exports.default = InputSupports;
+};

package/lib/cjs/InputSupports/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     maxCharacters: 'Maximum %{charCount} characters',
     charactersRemaining: '%{charCount} characters remaining',

package/lib/cjs/InputSupports/useInputSupports.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.useInputSupports = void 0;
+var _useUniqueId = require("../utils/useUniqueId");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
 const useInputSupports = _ref => {
   let {
@@ -20,14 +19,14 @@ const useInputSupports = _ref => {
     maxCharacterAllowed,
     charactersCount
   } = _ref;
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const hasValidationError = validation === 'error';
-  const inputId = (0, _useUniqueId.default)('input');
-  const hintId = (0, _useUniqueId.default)('input-hint');
-  const feedbackId = (0, _useUniqueId.default)('input-feedback');
+  const inputId = (0, _useUniqueId.useUniqueId)('input');
+  const hintId = (0, _useUniqueId.useUniqueId)('input-hint');
+  const feedbackId = (0, _useUniqueId.useUniqueId)('input-feedback');
   const a11yProps = {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
@@ -44,4 +43,4 @@ const useInputSupports = _ref => {
     a11yProps
   };
 };
-var _default = exports.default = useInputSupports;
+exports.useInputSupports = useInputSupports;

package/lib/cjs/Link/ChevronLink.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ChevronLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _tokens = require("../utils/props/tokens");
+var _linkProps = require("../utils/props/linkProps");
+var _LinkBase = require("./LinkBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -16,7 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * It effectively pre-binds left and right icons, and a directional translation of the icon on hover.
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
- */const ChevronLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ChevronLink = exports.ChevronLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,
@@ -25,7 +27,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     dataSet,
     ...otherlinkProps
   } = _ref;
-  const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
+  const getChevronTokens = (0, _useThemeTokens.useThemeTokensCallback)('ChevronLink', tokens, variant);
   const applyChevronTokens = linkState => {
     const {
       leftIcon,
@@ -35,7 +37,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
-    const linkTokens = (0, _utils.selectTokens)('Link', otherTokens);
+    const linkTokens = (0, _tokens.selectTokens)('Link', otherTokens);
     return {
       ...linkTokens,
       height,
@@ -44,9 +46,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('Link', applyChevronTokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.LinkBase, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,
@@ -56,18 +59,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 });
 ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = {
-  ..._LinkBase.default.propTypes,
+  ..._LinkBase.LinkBase.propTypes,
   children: _propTypes.default.node,
   variant: _propTypes.default.exact({
     size: _propTypes.default.oneOf(['large', 'small', 'micro']),
     alternative: _propTypes.default.bool,
     inverse: _propTypes.default.bool
   }),
-  ..._utils.linkProps.types,
-  tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
+  ..._linkProps.linkProps.types,
+  tokens: (0, _tokens.getTokensPropType)('ChevronLink', 'Link'),
   /**
    * Changes direction of chevron icon
    */
   direction: _propTypes.default.oneOf(['left', 'right'])
-};
-var _default = exports.default = ChevronLink;
+};

package/lib/cjs/Link/InlinePressable.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InlinePressable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -21,7 +21,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
  *
  * @param {PressableProps} PressableProps
- */const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const InlinePressable = exports.InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
@@ -49,5 +50,4 @@ const staticStyles = _StyleSheet.default.create({
   inlineFlex: {
     display: 'inline-flex'
   }
-});
-var _default = exports.default = InlinePressable;
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InlinePressable = 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"));
@@ -50,7 +50,7 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const InlinePressable = exports.InlinePressable = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
@@ -89,5 +89,4 @@ 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
-};
-var _default = exports.default = InlinePressable;
+};

package/lib/cjs/Link/Link.js

@@ -3,14 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Link = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _LinkBase = require("./LinkBase");
+var _Icon = require("../Icon/Icon");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _linkProps = require("../utils/props/linkProps");
+var _viewProps = require("../utils/props/viewProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+// eslint-disable-next-line no-unused-vars
+const [_, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps, _contentfulProps.contentfulProps]);
+const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     href,
     children,
@@ -20,8 +31,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 = (0, _useThemeTokens.useThemeTokensCallback)('Link', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.LinkBase, {
     href: href,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -33,10 +44,40 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Link.displayName = 'Link';
 Link.propTypes = {
-  ..._LinkBase.default.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: (0, _tokens.getTokensPropType)('Link'),
+  /**
+   * href for the Link
+   */
+  href: _propTypes.default.string,
+  /**
+   * AccessibilityRole for the link base
+   */
+  accessibilityRole: _propTypes.default.string,
+  /**
+   * Children nodes that can be added
+   */
+  variant: _variantProp.variantProp.propType,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: _propTypes.default.exact(_Icon.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,
+  /**
+   * 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']),
+  /**
+   * On Web if href is passed, React Native Web maps this object's props to
+   * `rel`, `target` and `download` attrs.
+   */
+  hrefAttrs: _propTypes.default.shape(_hrefAttrsProp.hrefAttrsProp.types),
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: _propTypes.default.object
-};
-var _default = exports.default = Link;
+};

package/lib/cjs/Link/LinkBase.js

@@ -3,21 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LinkBase = 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 _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _tokens = require("../utils/props/tokens");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
 var _pressability = require("../utils/pressability");
-var _utils = require("../utils");
-var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Icon = require("../Icon");
+var _MobileIconTextContent = require("./MobileIconTextContent");
+var _InlinePressable = require("./InlinePressable");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _Icon = require("../Icon/Icon");
+var _IconText = require("../Icon/IconText");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps, _props.contentfulProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps, _contentfulProps.contentfulProps]);
 const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,
@@ -28,7 +39,7 @@ const selectOuterBorderStyles = _ref => {
   } = _ref;
   return {
     outline: outerBorderOutline,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyOuterBorder)({
       outerBorderColor,
       outerBorderWidth,
       outerBorderGap
@@ -43,7 +54,7 @@ const selectTextStyles = _ref2 => {
   } = _ref2;
   return {
     color,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    ...(0, _styles.applyTextStyles)({
       blockFontSize
     }),
     ..._Platform.default.select({
@@ -61,7 +72,7 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockLineHeight,
     blockFontName
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
@@ -134,7 +145,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 LinkBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,
@@ -144,21 +155,22 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
   const {
     onPress,
     ...props
-  } = _props.clickProps.toPressProps(rawRest);
+  } = _clickProps.clickProps.toPressProps(rawRest);
   const {
     hrefAttrs,
     rest
-  } = _props.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _props.linkProps.handleHref({
+    onPress: _linkProps.linkProps.handleHref({
       href,
       onPress
     }),
@@ -175,8 +187,8 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
+  } = (0, _useTheme.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.InlinePressable, {
     ...selectedProps,
     dataSet: dataSet,
     inlineFlex: hasIcon
@@ -187,8 +199,8 @@ const LinkBase = /*#__PURE__*/_react.default.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.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -203,39 +215,52 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = _Platform.default.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+      const shouldUseMeasuredMobileContent = _Platform.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        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__*/(0, _jsxRuntime.jsx)(_MobileIconTextContent.MobileIconTextContent, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconText.IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          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: (0, _props.getTokensPropType)('Link'),
+  tokens: (0, _tokens.getTokensPropType)('Link'),
   /**
    * href for the Link
    */
   href: _propTypes.default.string,
   /**
-   * AccesibilityRole for the link base
+   * AccessibilityRole for the link base
    */
-  accessibilityrole: _propTypes.default.string,
+  accessibilityRole: _propTypes.default.string,
   /**
    * Children nodes that can be added
    */
-  variant: _props.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
@@ -253,7 +278,7 @@ LinkBase.propTypes = {
    * 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.default.shape(_hrefAttrsProp.hrefAttrsProp.types)
 };
 const staticStyles = _StyleSheet.default.create({
   blockLeft: {
@@ -273,12 +298,13 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(_Platform.default.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: _Platform.default.OS === 'android' ? 2 : 0,
-      paddingTop: _Platform.default.OS === 'android' ? 2 : 0
+      paddingVertical: _Platform.default.OS === 'android' ? 2 : 0
     })
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(LinkBase);
+const LinkBase = exports.LinkBase = (0, _withLinkRouter.withLinkRouter)(LinkBaseInner);