@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/IconButton/IconButton.js

@@ -3,16 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.IconButtonBase = exports.IconButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+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 _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // function to get the dimentionals of the conditionals
@@ -22,7 +32,7 @@ const getPasswordDimensions = (password, width, height) => {
     height
   } : {};
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
@@ -40,8 +50,8 @@ const selectOuterStyle = (_ref, password) => {
   } = _ref;
   return [{
     backgroundColor,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...(0, _styles.applyShadowToken)(shadow),
+    ...(0, _styles.applyOuterBorder)({
       borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -125,7 +135,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.default.forwardRef((_ref3, ref) => {
+const IconButtonBase = exports.IconButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},
@@ -140,13 +150,13 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = _clickProps.clickProps.toPressProps(rawRest);
   const selectedProps = selectProps({
     ...rest,
     accessibilityRole
   });
   const handlePress = () => {
-    _utils.linkProps.handleHref({
+    _linkProps.linkProps.handleHref({
       href,
       onPress
     })({
@@ -159,8 +169,8 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...variant,
     inactive: true
   } : variant;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, mergedVariant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), mergedVariant.password));
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('IconButton', tokens, mergedVariant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _pressability.resolvePressableState)(pressableState), mergedVariant.password));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -171,24 +181,24 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     testID: testID,
     disabled: inactive,
     children: pressableState => {
-      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
+      const themeTokens = getTokens((0, _pressability.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens, mergedVariant.password),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          tokens: (0, _tokens.selectTokens)('Icon', themeTokens, 'icon'),
           variant: mergedVariant
         })
       });
     }
   });
 });
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
+IconButtonBase.displayName = 'IconButton';
+IconButtonBase.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('IconButton'),
   /**
    * A unique identifier for testing purposes.
    * Will be added as a `data-testid` attribute.
@@ -205,7 +215,7 @@ IconButton.propTypes = {
   /**
    * URL options to navigate to when the `Iconbutton` is pressed
    */
-  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  hrefAttrs: _propTypes.default.shape(_hrefAttrsProp.hrefAttrsProp.types),
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
@@ -220,4 +230,7 @@ const staticStyles = _StyleSheet.default.create({
     alignSelf: 'baseline'
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(IconButton);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const IconButton = exports.IconButton = (0, _withLinkRouter.withLinkRouter)(IconButtonBase);

package/lib/cjs/InputLabel/InputLabel.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InputLabel = void 0;
 var _react = _interopRequireDefault(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 _shared = _interopRequireDefault(require("../Tooltip/shared"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _LabelContent = require("./LabelContent");
+var _Tooltip = require("../Tooltip/Tooltip.native");
+var _shared = require("../Tooltip/shared");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const selectLabelStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({
-  ...(0, _utils.selectTokens)('Typography', tokens),
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const selectLabelStyles = (tokens, themeOptions) => (0, _styles.applyTextStyles)({
+  ...(0, _tokens.selectTokens)('Typography', tokens),
   themeOptions
 });
 const selectHintStyles = (_ref, themeOptions) => {
@@ -29,7 +35,7 @@ const selectHintStyles = (_ref, themeOptions) => {
     hintFontWeight,
     hintLineHeight
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color: hintColor,
     fontName: hintFontName,
     fontSize: hintFontSize,
@@ -46,7 +52,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const InputLabel = exports.InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,
@@ -61,12 +67,12 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     maxCharacterAllowed,
     ...rest
   } = _ref3;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const getTooltipProps = () => {
     return typeof tooltip === 'string' ? {
       content: tooltip
@@ -79,7 +85,7 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.LabelContent, {
           forId: forId,
           children: label
         })
@@ -92,7 +98,7 @@ const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height: themeTokens.fontSize * themeTokens.lineHeight,
           color: themeTokens.color
         }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
           copy: copy,
           ...getTooltipProps()
         })
@@ -149,7 +155,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.default), _propTypes.default.string]),
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.shape(_shared.propTypes), _propTypes.default.string]),
   /**
    * Current number of characterts of an input text.
    */
@@ -158,10 +164,9 @@ InputLabel.propTypes = {
    * Max number of characters that allows an input text.
    */
   maxCharacterAllowed: _propTypes.default.number,
-  tokens: (0, _utils.getTokensPropType)('InputLabel'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('InputLabel'),
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = InputLabel;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexShrink: 1,

package/lib/cjs/InputLabel/LabelContent.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LabelContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const LabelContent = exports.LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     forId
@@ -31,5 +31,4 @@ const staticStyles = {
   inheritCursor: {
     cursor: 'inherit'
   }
-};
-var _default = exports.default = LabelContent;
+};

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LabelContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const LabelContent = exports.LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -22,5 +22,4 @@ const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = LabelContent;
+};

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,
@@ -73,7 +74,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       inputId,
       ...a11yProps,
       validation: feedbackValidation
-    }) : 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,
@@ -112,7 +113,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.
    */
@@ -123,7 +124,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.
    */
@@ -140,5 +141,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]),
@@ -42,4 +41,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,8 +46,8 @@ 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,
@@ -57,18 +59,16 @@ 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
+    style: _propTypes.default.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse'])
   }),
-  ..._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;
+};