@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

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

@@ -1,14 +1,33 @@
-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 useUniqueId from '../utils/useUniqueId';
+"use strict";
 
-const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-function InputSupports({
+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,
@@ -16,75 +35,75 @@ function InputSupports({
   feedback,
   tooltip,
   validation
-}) {
+}, ref) => {
   const {
     space
-  } = useThemeTokens('InputSupports');
-  const hasValidationError = validation === 'error';
-  const inputId = useUniqueId('input');
-  const hintId = useUniqueId('input-hint');
-  const feedbackId = useUniqueId('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]),
-    // introduced in RNW 0.15.0
-    accessibilityInvalid: hasValidationError // introduced in RNW 0.15.0
-
-  };
-  return /*#__PURE__*/React.createElement(StackView, {
-    space: space
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    hintId: hintId,
-    tooltip: tooltip,
-    forId: inputId
-  }), typeof children === 'function' ? children({
-    a11yProps,
-    inputId
-  }) : children, feedback && /*#__PURE__*/React.createElement(Feedback, {
-    id: feedbackId,
-    title: feedback,
-    validation: validation
-  }));
-}
-
+  } = (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.oneOfType([PropTypes.func, PropTypes.node]),
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
   /**
    * The input label.
    */
-  label: PropTypes.string,
+  label: _propTypes.default.string,
 
   /**
    * A short description of the expected input.
    */
-  hint: PropTypes.string,
+  hint: _propTypes.default.string,
 
   /**
    * Position of the hint relative to label.
    */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  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.string,
+  feedback: _propTypes.default.string,
 
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.string,
+  tooltip: _propTypes.default.string,
 
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: _propTypes.default.oneOf(['error', 'success'])
 };
-export default InputSupports;
+var _default = InputSupports;
+exports.default = _default;

package/lib/InputSupports/index.js

@@ -1,2 +1,13 @@
-import InputSupports from './InputSupports';
-export default InputSupports;
+"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

@@ -1,36 +1,46 @@
-import PropTypes from 'prop-types';
+"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.string,
+    label: _propTypes.default.string,
 
     /**
      * A short description of the expected input.
      */
-    hint: PropTypes.string,
+    hint: _propTypes.default.string,
 
     /**
      * Position of the hint relative to label. Use `below` to display a larger hint below the label.
      */
-    hintPosition: PropTypes.oneOf(['inline', 'below']),
+    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.string,
+    feedback: _propTypes.default.string,
 
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
-    tooltip: PropTypes.string,
+    tooltip: _propTypes.default.string,
 
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: _propTypes.default.oneOf(['error', 'success'])
   },
   select: ({
     label,
@@ -52,4 +62,5 @@ const inputSupportProps = {
     rest
   })
 };
-export default inputSupportProps;
+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,23 +1,43 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType } from '../utils';
-import LinkBase from './LinkBase';
+"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; variants passed to ChevronLink are forwarded to Link.
  */
-
-const ChevronLink = ({
+const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'right',
   children,
   tokens,
   variant,
+  dataSet,
   ...linkProps
-}) => {
-  const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
+}, ref) => {
+  const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
 
   const applyChevronTokens = linkState => {
     const {
@@ -26,21 +46,25 @@ const ChevronLink = ({
       iconDisplace,
       ...otherTokens
     } = getChevronTokens(linkState);
-    return { ...selectTokens('Link', otherTokens),
+    return { ...(0, _utils.selectTokens)('Link', otherTokens),
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };
   };
 
-  const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/React.createElement(LinkBase, Object.assign({}, linkProps, {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, { ...linkProps,
     iconPosition: direction,
-    tokens: getTokens
-  }), children);
-};
-
-ChevronLink.propTypes = { ...LinkBase.propTypes,
-  tokens: getTokensPropType('ChevronLink', 'Link'),
-  direction: PropTypes.oneOf(['left', 'right'])
+    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;