@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/InputLabel/InputLabel.js

@@ -1,12 +1,37 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, selectTokens, variantProp } from '../utils';
-import LabelContent from './LabelContent';
-import Tooltip from '../Tooltip';
+"use strict";
 
-const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _LabelContent = _interopRequireDefault(require("./LabelContent"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+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 selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
 const selectHintStyles = ({
   hintColor,
@@ -14,7 +39,7 @@ const selectHintStyles = ({
   hintFontSize,
   hintFontWeight,
   hintLineHeight
-}) => applyTextStyles({
+}) => (0, _ThemeProvider.applyTextStyles)({
   color: hintColor,
   fontName: hintFontName,
   fontSize: hintFontSize,
@@ -28,7 +53,7 @@ const selectGapStyles = ({
   marginRight: gap
 });
 
-function InputLabel({
+const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
   forId,
   hint,
@@ -37,43 +62,77 @@ function InputLabel({
   tooltip,
   tokens,
   variant
-}) {
-  const themeTokens = useThemeTokens('InputLabel', tokens, variant);
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
-  return /*#__PURE__*/React.createElement(View, {
-    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]
-  }, /*#__PURE__*/React.createElement(LabelContent, {
-    forId: forId
-  }, label)), hint && isHintInline && /*#__PURE__*/React.createElement(Text, {
-    style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
-    nativeID: hintId
-  }, hint), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltip
-  }), hint && !isHintInline && /*#__PURE__*/React.createElement(Text, {
-    style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
-    nativeID: hintId
-  }, hint));
-}
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+        forId: forId,
+        children: label
+      })
+    }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
+      nativeID: hintId,
+      children: hint
+    }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.tooltipAlign,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        content: tooltip
+      })
+    }), hint && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+      nativeID: hintId,
+      children: hint
+    })]
+  });
+});
+InputLabel.displayName = 'InputLabel';
 InputLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  forId: PropTypes.string,
-  hint: PropTypes.string,
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  hintId: PropTypes.string,
-  tooltip: PropTypes.string,
-  tokens: getTokensPropType('InputLabel'),
-  variant: variantProp.propType
+  /**
+   * The input label.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The id attribute of the input which this label refers to.
+   */
+  forId: _propTypes.default.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * The id attribute passed down to the hint element.
+   */
+  hintId: _propTypes.default.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+  tokens: (0, _utils.getTokensPropType)('InputLabel'),
+  variant: _utils.variantProp.propType
 };
-export default InputLabel;
-const staticStyles = StyleSheet.create({
+var _default = InputLabel;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'baseline'
   },
   containerWithHintBelow: {
     flexWrap: 'wrap'
@@ -84,5 +143,8 @@ const staticStyles = StyleSheet.create({
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'center'
   }
 });

package/lib/InputLabel/LabelContent.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  forId
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+  ref: ref,
+  htmlFor: forId,
+  style: staticStyles.inheritCursor,
+  children: children
+}));
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: _propTypes.default.string,
+  forId: _propTypes.default.string
+}; // Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+
+const staticStyles = {
+  inheritCursor: {
+    cursor: 'inherit'
+  }
+};
+var _default = LabelContent;
+exports.default = _default;

package/lib/InputLabel/LabelContent.native.js

@@ -1,8 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+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; }
+
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-function LabelContent({
+const LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
   children
-}) {
-  return children;
-}
-
-export default LabelContent;
+}, ref) => ref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
+  children: children
+}) : children);
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = LabelContent;
+exports.default = _default;

package/lib/InputLabel/index.js

@@ -1,2 +1,13 @@
-import InputLabel from './InputLabel';
-export default InputLabel;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _InputLabel.default;
+exports.default = _default;

package/lib/InputSupports/InputSupports.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _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 InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  label,
+  hint,
+  hintPosition = 'inline',
+  feedback,
+  tooltip,
+  validation
+}, ref) => {
+  const {
+    space
+  } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
+  const {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  } = (0, _useInputSupports.default)({
+    feedback,
+    hint,
+    label,
+    validation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: space,
+    ref: ref,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      label: label,
+      hint: hint,
+      hintPosition: hintPosition,
+      hintId: hintId,
+      tooltip: tooltip,
+      forId: inputId
+    }), typeof children === 'function' ? children({
+      a11yProps,
+      inputId
+    }) : children, feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+      id: feedbackId,
+      title: feedback,
+      validation: validation
+    })]
+  });
+});
+InputSupports.displayName = 'InputSupports';
+InputSupports.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * The input label.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = InputSupports;
+exports.default = _default;

package/lib/InputSupports/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _InputSupports = _interopRequireDefault(require("./InputSupports"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _InputSupports.default;
+exports.default = _default;

package/lib/InputSupports/propTypes.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const inputSupportProps = {
+  types: {
+    /**
+     * The input label.
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * A short description of the expected input.
+     */
+    hint: _propTypes.default.string,
+
+    /**
+     * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+     */
+    hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+    /**
+     * A detailed description of validation error/success or additional instructions.
+     * Visual variant is determined based on the `validation` prop.
+     */
+    feedback: _propTypes.default.string,
+
+    /**
+     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+     */
+    tooltip: _propTypes.default.string,
+
+    /**
+     * Use to visually mark an input as valid or invalid.
+     */
+    validation: _propTypes.default.oneOf(['error', 'success'])
+  },
+  select: ({
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    tooltip,
+    validation,
+    ...rest
+  }) => ({
+    props: {
+      label,
+      hint,
+      hintPosition,
+      feedback,
+      tooltip,
+      validation
+    },
+    rest
+  })
+};
+var _default = inputSupportProps;
+exports.default = _default;

package/lib/InputSupports/useInputSupports.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint
+}) => {
+  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 a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+    hint && hintId]),
+    accessibilityInvalid: hasValidationError
+  };
+  return {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  };
+};
+
+var _default = useInputSupports;
+exports.default = _default;

package/lib/Link/ChevronLink.js

@@ -1,43 +1,70 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import Link from './Link';
+"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 _utils = require("../utils");
+
+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; }
+
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
  * 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. If you have a use case outside of the above you are better off constructing theme variants of `Link`.
- * In that vein, note that the `tokens` and `variant` system props for `ChevronLink` are passed directly to the underlying `Link` component: ChevronLink itself does not support further customisation using these system props.
+ * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-
-const ChevronLink = ({
+const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'right',
   children,
   tokens,
+  variant,
+  dataSet,
   ...linkProps
-}) => {
-  const {
-    iconDisplace,
-    leftIcon,
-    rightIcon
-  } = useThemeTokens('ChevronLink', {}, {});
-  const icon = direction === 'right' ? rightIcon : leftIcon;
-
-  const tokensCallback = linkState => ({ ...(typeof tokens === 'function' ? tokens(linkState) : tokens),
-    iconGapBefore: 0,
-    iconGapAfter: 0,
-    iconTranslateX: linkState.hover ? iconDisplace * (direction === 'right' ? 1 : -1) : 0
-  });
+}, ref) => {
+  const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
 
-  return /*#__PURE__*/React.createElement(Link, Object.assign({
-    iconPosition: direction,
-    icon: icon
-  }, linkProps, {
-    tokens: tokensCallback
-  }), children);
-};
+  const applyChevronTokens = linkState => {
+    const {
+      leftIcon,
+      rightIcon,
+      iconDisplace,
+      ...otherTokens
+    } = getChevronTokens(linkState);
+    return { ...(0, _utils.selectTokens)('Link', otherTokens),
+      icon: direction === 'right' ? rightIcon : leftIcon,
+      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+    };
+  };
 
-ChevronLink.propTypes = { ...Link.propTypes,
-  direction: PropTypes.oneOf(['left', 'right'])
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, { ...linkProps,
+    iconPosition: direction,
+    tokens: getTokens,
+    dataSet: dataSet,
+    ref: ref,
+    children: children
+  });
+});
+ChevronLink.displayName = 'ChevronLink';
+ChevronLink.propTypes = { ..._LinkBase.default.propTypes,
+  tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
+  direction: _propTypes.default.oneOf(['left', 'right'])
 };
-export default ChevronLink;
+var _default = ChevronLink;
+exports.default = _default;

package/lib/Link/InlinePressable.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+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; }
+
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+
+/**
+ * InlinePressable is an alternative to React Native's Pressable that works better when nested
+ * inline inside Text. It accepts the same props as React Native's Pressable.
+ *
+ * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
+ *
+ * @param {PressableProps} PressableProps
+ */
+// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
+// eslint-disable-next-line react/prop-types
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  style,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  ref: ref,
+  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+  ...props,
+  children: pressState => typeof children === 'function' ? children(pressState) : children
+}));
+InlinePressable.displayName = 'InlinePressable';
+
+const staticStyles = _StyleSheet.default.create({
+  inline: {
+    // Stop Pressable defaulting to (block) flex
+    display: 'inline-flex'
+  }
+});
+
+var _default = InlinePressable;
+exports.default = _default;