@telus-uds/components-base 1.12.0 → 1.14.0

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -0,0 +1,126 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider';
+import { selectSystemProps, a11yProps, pressProps, viewProps, textProps, getTokensPropType, variantProp, resolvePressableState } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectTextProps, textPropTypes] = selectSystemProps([textProps]);
+
+const selectContainerStyles = _ref => {
+  let {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom = 0,
+    borderBottomColor,
+    borderBottomWidth = 0,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent
+  } = _ref;
+  return {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom: paddingBottom - borderBottomWidth,
+    borderBottomColor,
+    borderBottomWidth,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent,
+    ...Platform.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return applyTextStyles({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+
+const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    title,
+    selected,
+    inactive,
+    variant,
+    tokens,
+    accessibilityRole = 'tab',
+    ...rest
+  } = _ref3;
+  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+  const [isFocused, setIsFocused] = useState(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
+
+  const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {
+    selected
+  }));
+
+  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
+
+  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
+
+  const {
+    onPress,
+    ...selectedPressProps
+  } = selectPressProps(rest);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/_jsx(Text, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = { ...pressPropTypes,
+  ...textPropTypes,
+  title: PropTypes.string.isRequired,
+  selected: PropTypes.bool,
+  tokens: getTokensPropType('CarouselTabsPanelItem'),
+  variant: variantProp.propType
+};
+export default CarouselTabsPanelItem;

package/lib-module/Carousel/CarouselTabs/index.js

@@ -0,0 +1,2 @@
+import CarouselTabs from './CarouselTabs';
+export default CarouselTabs;

package/lib-module/Carousel/CarouselThumbnail.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Image from "react-native-web/dist/exports/Image";
+import { useCarousel } from './CarouselContext';
+/**
+ * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const CarouselThumbnail = _ref => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo,
+    themeTokens
+  } = useCarousel();
+  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+
+  const handlePress = () => goTo(index);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') goTo(index);
+  };
+
+  const {
+    thumbnailBorderColor,
+    thumbnailBorderRadius,
+    thumbnailBorderWidth,
+    thumbnailMargin,
+    thumbnailPadding,
+    thumbnailSelectedBorderColor,
+    thumbnailSelectedBorderWidth,
+    thumbnailSize
+  } = themeTokens;
+  const styles = {
+    pressable: {
+      borderColor: thumbnailBorderColor,
+      borderRadius: thumbnailBorderRadius,
+      borderWidth: thumbnailBorderWidth,
+      margin: thumbnailMargin,
+      padding: thumbnailPadding
+    },
+    image: {
+      height: thumbnailSize,
+      width: thumbnailSize
+    },
+    selected: {
+      borderColor: thumbnailSelectedBorderColor,
+      borderWidth: thumbnailSelectedBorderWidth,
+      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    onKeyDown: handleKeyDown,
+    onPress: handlePress,
+    style: [styles.pressable, index === activeIndex && styles.selected],
+    children: /*#__PURE__*/_jsx(Image, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+};
+
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: PropTypes.string,
+  alt: PropTypes.string,
+  index: PropTypes.number,
+  src: PropTypes.string
+};
+export default CarouselThumbnail;

package/lib-module/Carousel/CarouselThumbnailNavigation.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { useCarousel } from './CarouselContext';
+import CarouselThumbnail from './CarouselThumbnail';
+import { StackWrap } from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    thumbnails = []
+  } = _ref;
+  const {
+    totalItems,
+    themeTokens
+  } = useCarousel();
+
+  if (thumbnails.length !== totalItems) {
+    throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
+  }
+
+  const {
+    thumbnailContainerPaddingTop,
+    thumbnailMargin
+  } = themeTokens;
+  const stackWrapTokens = {
+    justifyContent: 'flex-start'
+  };
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyles,
+    children: /*#__PURE__*/_jsx(StackWrap, {
+      direction: "row",
+      tokens: stackWrapTokens,
+      ref: ref,
+      children: thumbnails.map((_ref2, index) => {
+        let {
+          accessibilityLabel,
+          alt,
+          src
+        } = _ref2;
+        return /*#__PURE__*/_jsx(CarouselThumbnail, {
+          accessibilityLabel: accessibilityLabel,
+          alt: alt,
+          index: index,
+          src: src
+        }, src);
+      })
+    })
+  });
+});
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation';
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    alt: PropTypes.string,
+    src: PropTypes.string
+  })).isRequired
+};
+export default CarouselThumbnailNavigation;

package/lib-module/Carousel/dictionary.js

@@ -4,13 +4,15 @@ export default {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}'
   },
   fr: {
     // TODO: French translations here
     carouselLabel: '(fr) %{stepCount} items',
     iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: '(fr) Skip %{title}'
   }
 };

package/lib-module/Carousel/index.js

@@ -1,2 +1,3 @@
 export * from './CarouselContext';
-export { default as Carousel } from './Carousel';
+export { default as Carousel } from './Carousel';
+export { default as CarouselTabs } from './CarouselTabs';

package/lib-module/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ import CheckboxInput from './CheckboxInput';
 import CheckboxLabel from '../InputLabel/LabelContent';
 import Feedback from '../Feedback';
 import StackView from '../StackView';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { applyShadowToken, applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import useUniqueId from '../utils/useUniqueId';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ const selectInputStyles = (_ref, isChecked) => {
   };
 };
 
-const selectLabelStyles = _ref2 => {
+const selectLabelStyles = (_ref2, themeOptions) => {
   let {
     labelColor,
     labelFontName,
@@ -63,7 +63,8 @@ const selectLabelStyles = _ref2 => {
       fontName: labelFontName,
       fontWeight: labelFontWeight,
       fontSize: labelFontSize,
-      lineHeight: labelLineHeight
+      lineHeight: labelLineHeight,
+      themeOptions
     })
   };
 };
@@ -187,6 +188,9 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const uniqueId = useUniqueId('checkbox');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -218,7 +222,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
-          const labelStyles = selectLabelStyles(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens, themeOptions);
           const alignWithLabel = label ? [staticStyles.alignWithLabel, {
             height: labelStyles.lineHeight
           }] : null;

package/lib-module/Checkbox/CheckboxGroup.js

@@ -46,7 +46,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },
@@ -67,6 +67,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedIds,
@@ -133,6 +134,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -182,6 +184,11 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: PropTypes.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/Feedback/Feedback.js

@@ -3,7 +3,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,24 +12,29 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectStyles = tokens => selectTokens('Feedback', tokens);
 
-const selectTitleTextStyles = _ref => {
+const selectTitleTextStyles = (_ref, themeOptions) => {
   let {
     titleFontSize,
     ...tokens
   } = _ref;
-  return applyTextStyles(selectTokens('Typography', { ...tokens,
-    fontSize: titleFontSize
-  }));
+  return applyTextStyles({ ...selectTokens('Typography', { ...tokens,
+      fontSize: titleFontSize,
+      themeOptions
+    }),
+    themeOptions
+  });
 };
 
-const selectContentTextStyles = _ref2 => {
+const selectContentTextStyles = (_ref2, themeOptions) => {
   let {
     contentFontSize,
     ...tokens
   } = _ref2;
-  return applyTextStyles(selectTokens('Typography', { ...tokens,
-    fontSize: contentFontSize
-  }));
+  return applyTextStyles({ ...selectTokens('Typography', { ...tokens,
+      fontSize: contentFontSize
+    }),
+    themeOptions
+  });
 };
 
 const selectIconTokens = _ref3 => {
@@ -90,8 +95,11 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     icon: IconComponent
   } = themeTokens;
-  const titleTextStyles = selectTitleTextStyles(themeTokens);
-  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const {
+    themeOptions
+  } = useTheme();
+  const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
+  const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
   const content = typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
     style: contentTextStyles,
     children: children

package/lib-module/Icon/IconText.js

@@ -51,6 +51,9 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  // eslint is having hard time seeing these props through forwardRef
+
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -65,7 +68,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
@@ -79,5 +82,7 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
+
 };
 export default IconText;

package/lib-module/InputLabel/InputLabel.js

@@ -3,7 +3,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import LabelContent from './LabelContent';
 import Tooltip from '../Tooltip';
@@ -12,9 +12,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+  themeOptions
+});
 
-const selectHintStyles = _ref => {
+const selectHintStyles = (_ref, themeOptions) => {
   let {
     hintColor,
     hintFontName,
@@ -27,7 +29,8 @@ const selectHintStyles = _ref => {
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   });
 };
 
@@ -56,19 +59,22 @@ const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       ref: ref,
       style: staticStyles.container,
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
         children: /*#__PURE__*/_jsx(LabelContent, {
           forId: forId,
           children: label
         })
       }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
-        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
         nativeID: hintId,
         children: hint
       }), hasTooltip && /*#__PURE__*/_jsx(View, {

package/lib-module/Link/InlinePressable.js

@@ -9,8 +9,6 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  * 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
@@ -21,12 +19,11 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     style,
-    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
-    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -34,11 +31,7 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
 InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 });
 export default InlinePressable;

package/lib-module/Link/LinkBase.js

@@ -7,12 +7,12 @@ import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, sel
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
-import { applyTextStyles, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 
-const selectOuterBorderStyles = _ref => {
+const selectOuterBorderStyles = (_ref, hasIcon) => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -33,7 +33,8 @@ const selectOuterBorderStyles = _ref => {
       }),
       // Stops focus ring stretching horizontally if parent has display: block
       // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-      display: 'inline-flex'
+      display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
+
     } : {}
   );
 };
@@ -53,7 +54,7 @@ const selectTextStyles = _ref2 => {
   };
 };
 
-const selectBlockStyles = _ref3 => {
+const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
     blockFontSize,
@@ -64,7 +65,8 @@ const selectBlockStyles = _ref3 => {
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   });
 };
 
@@ -164,15 +166,16 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
-    inline: hasIcon // assuming links without icons should be inline (even if they are long)
-    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
-      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -180,7 +183,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
       const iconTokens = selectIconTokens(themeTokens); // TODO: may need to apply some smarter text inheritance here if inline to avoid native
       // issues like double-application of line heights breaking align-items: baseline
 
-      const blockTextStyles = selectBlockStyles(themeTokens);
+      const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
       const IconComponent = icon || themeTokens.icon;
       const {
         iconSpace
@@ -214,7 +217,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * 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.func,
+  icon: PropTypes.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.