@telus-uds/components-base 1.39.0 → 1.41.0

package/lib/A11yInfoProvider/index.js

@@ -39,8 +39,6 @@ const A11yInfoProvider = _ref => {
 
     const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
 
-    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
       // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
@@ -61,12 +59,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
         _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {

package/lib/Button/ButtonBase.js

@@ -66,11 +66,12 @@ const selectOuterContainerStyles = _ref2 => {
   };
 };
 
-const selectOuterWidthStyles = _ref3 => {
+const selectOuterSizeStyles = _ref3 => {
   let {
     outerBorderGap,
     outerBorderWidth,
-    width
+    width,
+    height
   } = _ref3;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
@@ -78,10 +79,16 @@ const selectOuterWidthStyles = _ref3 => {
     outerBorderGap,
     outerBorderWidth
   });
-  const widthStyles = {};
+  const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+
+  if (typeof width === 'number' || typeof height === 'number') {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
+    return sizeStyles;
+  }
 
   if (!width) {
-    return { ...widthStyles,
+    return { ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ..._Platform.default.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -90,30 +97,26 @@ const selectOuterWidthStyles = _ref3 => {
         }
       })
     };
-  } // Apply width tokens: number === pixels, string === explicit units e.g. %
-
-
-  if (typeof width === 'number') {
-    widthStyles.width = width + outerBorderOffset * 2;
-    return widthStyles;
   } // Ensure the negative margin doesn't make element off-centre
 
 
   if (_Platform.default.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
-    return widthStyles;
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
+    return sizeStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
 
   if (width === '100%') {
-    widthStyles.flexGrow = 1;
-    return widthStyles;
+    sizeStyles.flexGrow = 1;
+    return sizeStyles;
   } // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
   // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
 
 
-  widthStyles.width = width;
-  return widthStyles;
+  sizeStyles.width = width;
+  sizeStyles.height = height;
+  return sizeStyles;
 };
 
 const selectInnerContainerStyles = _ref4 => {
@@ -125,38 +128,68 @@ const selectInnerContainerStyles = _ref4 => {
     paddingBottom,
     shadow,
     borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
     minWidth
   } = _ref4;
 
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
+  const offsetBorder = _ref5 => {
+    let {
+      value,
+      borderSize = borderWidth
+    } = _ref5;
+    return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
+  };
 
   return {
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
+    paddingLeft: offsetBorder({
+      value: paddingLeft,
+      borderSize: borderLeftWidth
+    }),
+    paddingRight: offsetBorder({
+      value: paddingRight,
+      borderSize: borderRightWidth
+    }),
+    paddingTop: offsetBorder({
+      value: paddingTop,
+      borderSize: borderTopWidth
+    }),
+    paddingBottom: offsetBorder({
+      value: paddingBottom,
+      borderSize: borderBottomWidth
+    }),
     backgroundColor,
     minWidth,
     ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
-const selectBorderStyles = _ref5 => {
+const selectBorderStyles = _ref6 => {
   let {
     borderColor,
     borderWidth,
-    borderRadius
-  } = _ref5;
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
+  } = _ref6;
   return {
     borderColor,
     borderWidth,
-    borderRadius
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
   };
 };
 
-const selectTextStyles = (_ref6, themeOptions) => {
+const selectTextStyles = (_ref7, themeOptions) => {
   let {
     fontSize,
     color,
@@ -166,7 +199,7 @@ const selectTextStyles = (_ref6, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref6;
+  } = _ref7;
   return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
     color,
@@ -180,10 +213,10 @@ const selectTextStyles = (_ref6, themeOptions) => {
   });
 };
 
-const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
-  } = _ref7;
+  } = _ref8;
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -196,19 +229,19 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   });
 };
 
-const selectItemIconTokens = _ref8 => {
+const selectItemIconTokens = _ref9 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref8;
+  } = _ref9;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
   let {
     id,
     href,
@@ -223,7 +256,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref9;
+  } = _ref10;
 
   const {
     onPress,
@@ -242,7 +275,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
 
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
   };
 
   const {
@@ -314,10 +347,7 @@ const staticStyles = _StyleSheet.default.create({
     // Apply all button alignment horizontally; no vertical stacking within a button
     flexDirection: 'row'
   },
-  text: {
-    flexGrow: 1,
-    // On native but not web, flexShrink here wraps text prematurely
-    ..._Platform.default.select({
+  text: { ..._Platform.default.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'

package/lib/ExpandCollapse/Panel.js

@@ -33,8 +33,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
 
-const selectGroupStyles = () => {};
-
 const selectContainerStyles = _ref => {
   let {
     contentPaddingLeft,
@@ -111,13 +109,21 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
-    style: selectGroupStyles(themeTokens),
+    style: themeTokens,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...selectedProps,
       isExpanded: isExpanded,
       tokens: controlTokens,
+      variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
       children: control
+    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        borderTopColor: themeTokens.expandDividerColor,
+        borderTopWidth: themeTokens.expanddDividerWidth,
+        marginLeft: themeTokens.contentPaddingLeft,
+        marginRight: themeTokens.contentPaddingRight
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
       ref: animatedRef,
       style: animatedStyles,

package/lib/Icon/IconText.js

@@ -53,7 +53,7 @@ const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
 
-  const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
+  const size = (iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
   const iconAdjustedAndriod = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: {
       transform: [{

package/lib/InputSupports/InputSupports.js

@@ -35,6 +35,7 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hint,
     hintPosition = 'inline',
     feedback,
+    feedbackTokens = {},
     tooltip,
     validation,
     nativeID
@@ -68,11 +69,12 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps
-    }) : children, feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+    }) : children, feedback ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback,
-      validation: validation
-    })]
+      validation: validation,
+      tokens: feedbackTokens
+    }) : null]
   });
 });
 InputSupports.displayName = 'InputSupports';
@@ -105,6 +107,11 @@ InputSupports.propTypes = {
    */
   feedback: _propTypes.default.string,
 
+  /**
+   * Additional tokens to override the default feedback tokens.
+   */
+  feedbackTokens: _propTypes.default.objectOf(_propTypes.default.string),
+
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib/Notification/Notification.js

@@ -17,12 +17,14 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,7 +58,8 @@ const selectIconContainerStyles = _ref2 => {
     iconGap
   } = _ref2;
   return {
-    paddingRight: iconGap
+    paddingRight: iconGap,
+    placeContent: 'center'
   };
 };
 
@@ -76,7 +79,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     dismissButtonGap
   } = _ref4;
   return {
-    paddingLeft: dismissButtonGap
+    paddingLeft: dismissButtonGap,
+    placeContent: 'center'
   };
 };
 
@@ -147,8 +151,10 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     ...rest
   } = _ref5;
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
+  const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
-    system
+    system,
+    viewport
   });
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
@@ -172,11 +178,11 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   });
   const {
     icon: IconComponent,
-    dismissIcon: DismissIconComponent
+    dismissIcon: DismissIconComponent,
+    dismissIconColor
   } = themeTokens;
 
-  const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-
+  const onDismissPress = () => setIsDismissed(true);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -196,10 +202,16 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectDismissButtonContainerStyles(themeTokens),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          action: "close",
           onPress: onDismissPress,
+          icon: DismissIconComponent,
           accessibilityRole: "button",
           accessibilityLabel: getCopy('dismiss'),
+          variant: {
+            inverse: dismissIconColor === '#ffffff',
+            size: 'small'
+          },
           children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
           })
         })
@@ -239,8 +251,7 @@ exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    flexDirection: 'row',
-    justifyContent: 'center'
+    flexDirection: 'row'
   },
   contentContainer: {
     flexDirection: 'row',

package/lib/Pagination/Pagination.js

@@ -78,6 +78,20 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const {
+    borderColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    ellipsisPadding,
+    ellipsisBorderRightWidth,
+    ellipsisBorderLeftWidth,
+    ellipsisBorderTopWidth,
+    ellipsisBorderBottomWidth,
+    ellipsisHeight
+  } = themeTokens;
 
   const items = _react.default.Children.toArray(children);
 
@@ -96,6 +110,18 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
 
+  const ellipisContainerStyles = _StyleSheet.default.create({
+    container: {
+      height: ellipsisHeight,
+      padding: ellipsisPadding,
+      borderRightWidth: ellipsisBorderRightWidth,
+      borderLeftWidth: ellipsisBorderLeftWidth,
+      borderTopWidth: ellipsisBorderTopWidth,
+      borderBottomWidth: ellipsisBorderBottomWidth,
+      borderColor
+    }
+  });
+
   if (items.length === 0) {
     return null;
   } // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
@@ -129,9 +155,14 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
 
     if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: ellipsisTextStyles,
-        children: "..."
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: { ...ellipisContainerStyles.container
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: { ...ellipsisTextStyles
+          },
+          children: "..."
+        })
       }, "...");
     }
 
@@ -145,19 +176,31 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.container,
+    style: { ...staticStyles.container
+    },
     ref: ref,
     ...selectProps(rest),
-    children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
-      let [element] = _ref3;
-      return element !== null;
-    }).map(_ref4 => {
-      let [element, key] = _ref4;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        right: gap,
-        children: element
-      }, key);
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        borderColor,
+        borderWidth,
+        borderLeftWidth,
+        borderRightWidth,
+        borderTopWidth,
+        borderBottomWidth,
+        ...staticStyles.container
+      },
+      children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+      .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
+        let [element] = _ref3;
+        return element !== null;
+      }).map(_ref4 => {
+        let [element, key] = _ref4;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          right: gap,
+          children: element
+        }, key);
+      })
     })
   });
 });

package/lib/Radio/Radio.js

@@ -66,6 +66,8 @@ const selectDescriptionStyles = _ref2 => {
     descriptionFontSize,
     descriptionLineHeight,
     descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
     inputSize,
     fontColor,
     labelMarginLeft = 0
@@ -75,7 +77,9 @@ const selectDescriptionStyles = _ref2 => {
     color: fontColor,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontSize: descriptionFontSize,
-      lineHeight: descriptionLineHeight
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
     })
   };
 };

package/lib/Select/Select.js

@@ -175,6 +175,15 @@ const selectValidationIconContainerStyles = _ref6 => {
     })
   };
 };
+
+const selectCustomFeedbackStyles = _ref7 => {
+  let {
+    feedbackBackgroundColor
+  } = _ref7;
+  return {
+    backgroundColor: feedbackBackgroundColor
+  };
+};
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -209,7 +218,7 @@ const selectValidationIconContainerStyles = _ref6 => {
  */
 
 
-const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -223,7 +232,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     variant,
     testID,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     currentValue,
     setValue
@@ -265,11 +274,12 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
     validation: validation,
-    children: _ref8 => {
+    feedbackTokens: selectCustomFeedbackStyles(themeTokens),
+    children: _ref9 => {
       let {
         inputId,
         ...props
-      } = _ref8;
+      } = _ref9;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {

package/lib/Typography/Typography.js

@@ -71,6 +71,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -117,16 +118,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     return resetTagStyling(children);
   };
 
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const textStyles = resolvedTextProps.style ? { ...resolvedTextProps.style,
+    textDecorationLine
+  } : {
+    textDecorationLine
+  };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
+      style: textStyles,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: textStyles,
     children: sanitizeChildren(children)
   });
 });
@@ -136,6 +145,11 @@ Typography.propTypes = { ...selectedContainerPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: _propTypes.default.bool,
+
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *

package/lib-module/A11yInfoProvider/index.js

@@ -20,7 +20,6 @@ const A11yInfoProvider = _ref => {
     }
 
     const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const screenReaderSubscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -42,12 +41,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {