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

package/lib/cjs/Scroll/ScrollProgress.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollProgress = 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 _pressability = require("../utils/pressability");
+var _useAnimatedValue = require("../utils/animation/useAnimatedValue");
+var _Progress = require("../Progress/Progress");
+var _ProgressBar = require("../Progress/ProgressBar");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MAX_PERCENTAGE = 100;
+const BORDER_RADIUS_DIVISOR = 2;
+const staticProgressTokens = {
+  borderWidth: 0,
+  borderColor: 'transparent'
+};
+const staticProgressBarTokens = {
+  gradient: null,
+  outlineWidth: 0
+};
+const selectProgressTokens = _ref => {
+  let {
+    progressTrackHeight,
+    progressBarHeight,
+    progressTrackColor
+  } = _ref;
+  return {
+    height: progressTrackHeight,
+    barHeight: progressBarHeight,
+    backgroundColor: progressTrackColor,
+    borderRadius: progressTrackHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const selectBarTokens = _ref2 => {
+  let {
+    progressBarColor,
+    progressBarHeight
+  } = _ref2;
+  return {
+    backgroundColor: progressBarColor,
+    borderRadius: progressBarHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const ScrollProgress = exports.ScrollProgress = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    pressableState,
+    getTokens,
+    thumbWrapperStyle,
+    getCopy
+  } = _ref3;
+  const state = (0, _pressability.resolvePressableState)(pressableState);
+  const themeTokens = getTokens(state);
+  const animatedBarHeight = (0, _useAnimatedValue.useAnimatedValue)(themeTokens.progressBarHeight);
+  const animatedTokens = {
+    ...themeTokens,
+    progressBarHeight: animatedBarHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+    tokens: {
+      ...staticProgressTokens,
+      ...selectProgressTokens(animatedTokens)
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: thumbWrapperStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+        percentage: MAX_PERCENTAGE,
+        tokens: {
+          ...staticProgressBarTokens,
+          ...selectBarTokens(animatedTokens)
+        },
+        accessibilityLabel: getCopy('progressBarLabel')
+      })
+    })
+  });
+});
+ScrollProgress.displayName = 'ScrollProgress';
+ScrollProgress.propTypes = {
+  /**
+   * State object from Pressable's render callback containing hovered, pressed, and focused states
+   */
+  pressableState: _propTypes.default.object.isRequired,
+  /**
+   * Theme token resolver callback from useThemeTokensCallback that accepts appearance state
+   */
+  getTokens: _propTypes.default.func.isRequired,
+  /**
+   * Style array for the thumb wrapper containing static and dynamic position styles
+   */
+  thumbWrapperStyle: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]).isRequired,
+  /**
+   * Copy resolver function from useCopy for retrieving localized strings
+   */
+  getCopy: _propTypes.default.func.isRequired
+};

package/lib/cjs/Scroll/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+};

package/lib/cjs/StackView/StackWrapBox.js

@@ -58,6 +58,7 @@ const StackWrapBox = exports.StackWrapBox = /*#__PURE__*/_react.default.forwardR
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _useViewport.useViewport)();
@@ -84,7 +85,8 @@ const StackWrapBox = exports.StackWrapBox = /*#__PURE__*/_react.default.forwardR
   const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -120,6 +122,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_semantics.layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: _propTypes.default.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/cjs/StackView/StackWrapGap.js

@@ -40,6 +40,7 @@ const StackWrapGap = exports.StackWrapGap = /*#__PURE__*/_react.default.forwardR
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _useViewport.useViewport)();
@@ -59,7 +60,8 @@ const StackWrapGap = exports.StackWrapGap = /*#__PURE__*/_react.default.forwardR
   };
   const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/cjs/StackView/getStackedContent.js

@@ -42,7 +42,8 @@ const getStackedContent = (children, _ref) => {
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -54,15 +55,24 @@ const getStackedContent = (children, _ref) => {
   const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.Box, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/(0, _react.createElement)(_Box.Box, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/_react.default.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/cjs/index.js

@@ -471,6 +471,18 @@ Object.defineProperty(exports, "Responsive", {
     return _Responsive.Responsive;
   }
 });
+Object.defineProperty(exports, "Scroll", {
+  enumerable: true,
+  get: function () {
+    return _Scroll.Scroll;
+  }
+});
+Object.defineProperty(exports, "ScrollItem", {
+  enumerable: true,
+  get: function () {
+    return _ScrollItem.ScrollItem;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {
@@ -1272,6 +1284,8 @@ var _RadioGroup = require("./Radio/RadioGroup");
 var _RadioCard = require("./RadioCard/RadioCard");
 var _RadioCardGroup = require("./RadioCard/RadioCardGroup");
 var _Responsive = require("./Responsive/Responsive");
+var _Scroll = require("./Scroll/Scroll");
+var _ScrollItem = require("./Scroll/ScrollItem");
 var _Search = require("./Search/Search");
 var _Select = require("./Select/Select");
 var _SelectItem = require("./Select/SelectItem");

package/lib/cjs/utils/animation/useAnimatedValue.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = _react.default.useState(targetValue);
+  const animatedValue = _react.default.useRef(new _Animated.default.Value(targetValue)).current;
+  _react.default.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  _react.default.useEffect(() => {
+    const animation = _Animated.default.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: _Easing.default.inOut(_Easing.default.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};
+exports.useAnimatedValue = useAnimatedValue;

package/lib/cjs/utils/children.js

@@ -54,7 +54,8 @@ const unpackFragment = child => {
 exports.unpackFragment = unpackFragment;
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.A11yText || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.A11yText || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/esm/ActionCard/ActionCard.js

@@ -2,7 +2,6 @@ import React from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
 import PropTypes from 'prop-types';
 import { a11yProps } from '../utils/props/a11yProps';
 import { getTokensPropType } from '../utils/props/tokens';
@@ -253,9 +252,10 @@ export const ActionCard = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
               style: staticStyles.header,
               children: [/*#__PURE__*/_jsx(View, {
                 style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/_jsxs(Text, {
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: staticStyles.titleRow,
                   children: [wrapStringsInText(title, {
-                    style: selectTitleTextStyles(themeTokens)
+                    style: [selectTitleTextStyles(themeTokens), staticStyles.titleText]
                   }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
                     style: staticStyles.statusIcon,
                     children: /*#__PURE__*/_jsx(Icon, {
@@ -344,6 +344,13 @@ const staticStyles = StyleSheet.create({
   title: {
     flexShrink: 1
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  titleText: {
+    flexShrink: 1
+  },
   statusIcon: {
     marginLeft: 4
   }

package/lib/esm/Card/Card.js

@@ -80,10 +80,10 @@ const getInputProps = _ref3 => {
  *
  * ## Component API
  *
- * ### Background
+ * ### Style
  *
- * In order to control the background of a card, the following tokens are currently
- * supported:
+ * In order to control the style of a card, use the `style` variant.
+ * The following tokens are supported:
  *
  * - `backgroundColor`
  *

package/lib/esm/Carousel/Carousel.js

@@ -1180,9 +1180,14 @@ Carousel.propTypes = {
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
   thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: PropTypes.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: PropTypes.string,
-    src: PropTypes.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: PropTypes.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   })),
   /**
    * Minimal part of slide width must be swiped for changing index.

package/lib/esm/Carousel/CarouselThumbnail.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Image from "react-native-web/dist/exports/Image";
+import View from "react-native-web/dist/exports/View";
 import { useCarousel } from './CarouselContext';
 import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
 import { useViewport } from '../ViewportProvider/useViewport';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../Icon/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectPressableTokens = _ref => {
   let {
     borderColor,
@@ -23,17 +26,64 @@ const selectPressableTokens = _ref => {
   };
 };
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55;
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2;
+const selectImageStyles = size => ({
+  width: size,
+  height: size
+});
+const selectSelectedStyles = _ref2 => {
+  let {
+    selectedBorderColor,
+    selectedBorderWidth,
+    padding,
+    margin
+  } = _ref2;
+  return {
+    borderColor: selectedBorderColor,
+    borderWidth: selectedBorderWidth,
+    padding: padding - selectedBorderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectNonSelectedStyles = _ref3 => {
+  let {
+    borderWidth,
+    padding,
+    margin,
+    selectedBorderWidth
+  } = _ref3;
+  return {
+    padding: padding - borderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectPlayIconCircleStyles = thumbnailSize => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO;
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  };
+};
+const selectPlayIconTokens = thumbnailSize => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+});
+
 /**
- * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselThumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-export const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     accessibilityLabel,
     alt,
     index,
+    isVideo,
     src
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     itemLabel,
@@ -55,58 +105,100 @@ export const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     selectedBorderColor,
     selectedBorderWidth,
     size,
-    margin
+    margin,
+    playIcon
   } = getThumbnailTokens({
     viewport
   });
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
-    }
-  };
   return /*#__PURE__*/_jsx(Pressable, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: _ref3 => {
+    style: _ref5 => {
       let {
         hovered,
         pressed,
         focused
-      } = _ref3;
+      } = _ref5;
       const pressableStyles = selectPressableTokens(getThumbnailTokens({
         hover: hovered,
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
+      return [pressableStyles, index === activeIndex ? [selectSelectedStyles({
+        selectedBorderColor,
+        selectedBorderWidth,
+        padding,
+        margin
+      }), staticStyles.selectedPressableOutline] : selectNonSelectedStyles({
+        borderWidth,
+        padding,
+        margin,
+        selectedBorderWidth
+      })];
     },
     ref: ref,
-    children: /*#__PURE__*/_jsx(Image, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.imageContainer, selectImageStyles(size)],
+      children: [/*#__PURE__*/_jsx(Image, {
+        accessibilityIgnoresInvertColors: true,
+        accessibilityLabel: accessibilityLabel ?? alt,
+        source: src,
+        style: selectImageStyles(size),
+        title: thumbnailTitle
+      }), isVideo && playIcon && /*#__PURE__*/_jsx(View, {
+        style: staticStyles.playIconOverlayContainer,
+        testID: `play-icon-overlay-${index}`,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground],
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: playIcon,
+            tokens: {
+              ...selectPlayIconTokens(size),
+              color: staticStyles.playIconSymbol.color
+            }
+          })
+        })
+      })]
     })
   }, src);
 });
 CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: PropTypes.string,
+  /** Alt text for the thumbnail image */
   alt: PropTypes.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: PropTypes.number,
-  src: PropTypes.string
-};
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: PropTypes.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+const staticStyles = StyleSheet.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: {
+    outlineStyle: 'none'
+  },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: {
+    color: 'rgb(255, 255, 255)'
+  }
+});

package/lib/esm/Carousel/CarouselThumbnailNavigation.js

@@ -45,12 +45,14 @@ export const CarouselThumbnailNavigation = /*#__PURE__*/React.forwardRef((_ref,
         let {
           accessibilityLabel,
           alt,
+          isVideo,
           src
         } = _ref2;
         return /*#__PURE__*/_jsx(CarouselThumbnail, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
+          isVideo: isVideo,
           src: src
         }, src);
       })
@@ -63,8 +65,13 @@ CarouselThumbnailNavigation.propTypes = {
    * An array of objects containing information on the thumbnail images.
    */
   thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: PropTypes.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: PropTypes.string,
-    src: PropTypes.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: PropTypes.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   })).isRequired
 };

package/lib/esm/Footnote/FootnoteLink.js

@@ -15,28 +15,28 @@ import { applyTextStyles } from '../ThemeProvider/utils/styles';
 import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const DEFAULT_LINE_HEIGHT = 1;
+const LINE_HEIGHT_MULTIPLIER = 2;
 const selectTextStyle = _ref => {
   let {
     fontSize,
     lineHeight
   } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ...Platform.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
+  return Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
+    },
+    web: {
+      fontSize,
+      lineHeight: lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
+    }
+  });
 };
 export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -80,6 +80,7 @@ export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 FootnoteLink.displayName = 'FootnoteLink';
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });

package/lib/esm/InputSupports/InputSupports.js

@@ -66,8 +66,7 @@ export const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation,
-      accessibilityDescribedBy: feedbackId
+      validation: feedbackValidation
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,