@telus-uds/components-base 1.12.0 → 1.14.0

package/lib-module/List/ListItem.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -68,7 +68,7 @@ const selectBulletPositioningStyles = _ref5 => {
   };
 };
 
-const selectItemStyles = _ref6 => {
+const selectItemStyles = (_ref6, themeOptions) => {
   let {
     itemFontWeight,
     itemFontSize,
@@ -79,7 +79,8 @@ const selectItemStyles = _ref6 => {
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   });
 };
 
@@ -127,7 +128,10 @@ const ListItem = /*#__PURE__*/forwardRef((_ref9, ref) => {
     ...rest
   } = _ref9;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  const itemStyles = selectItemStyles(themeTokens);
+  const {
+    themeOptions
+  } = useTheme();
+  const itemStyles = selectItemStyles(themeTokens, themeOptions);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
@@ -221,7 +225,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Will set display icon color

package/lib-module/Notification/Notification.js

@@ -2,8 +2,8 @@ import React, { forwardRef, useState } from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -14,7 +14,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const selectTextStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+  themeOptions
+});
 
 const selectIconProps = _ref => {
   let {
@@ -55,6 +57,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     paddingLeft: dismissButtonGap
   };
 };
+
+const selectContentContainerStyle = maxWidth => ({
+  width: maxWidth || '100%'
+});
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -126,12 +132,16 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     dictionary,
     copy
   });
+  const {
+    themeOptions
+  } = useTheme();
+  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
   }
 
-  const textStyles = selectTextStyles(themeTokens);
+  const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
     textStyles
   }) : children, {
@@ -145,30 +155,33 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(ButtonBase, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/_jsx(ButtonBase, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -201,9 +214,16 @@ Notification.propTypes = { ...selectedSystemPropTypes,
 export default Notification;
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib-module/Pagination/Pagination.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { a11yProps, componentPropType, copyPropTypes, getTokensPropType, selectSystemProps, variantProp, viewProps, withLinkRouter } from '../utils';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
 import usePagination from './usePagination';
@@ -12,7 +12,7 @@ import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
     fontName,
@@ -25,7 +25,8 @@ const selectTextStyles = _ref => {
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   });
 };
 
@@ -49,6 +50,9 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = useThemeTokens('Pagination', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = useTheme();
   const items = React.Children.toArray(children);
   const {
     isItemActive,
@@ -63,7 +67,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     items,
     truncateAbove
   });
-  const ellipsisTextStyles = selectTextStyles(themeTokens);
+  const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
 
   if (items.length === 0) {
     return null;

package/lib-module/Radio/RadioGroup.js

@@ -69,6 +69,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -118,6 +119,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
 
     return /*#__PURE__*/_jsx(Radio, {
+      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -137,6 +139,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -192,6 +195,11 @@ RadioGroup.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/RadioCard/RadioCard.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 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 { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
 import { PressableCardBase, selectPressableCardTokens } from '../Card';
 import StackView from '../StackView';
@@ -84,6 +84,9 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));
 
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     inactive: inactive,
@@ -104,7 +107,9 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
       } = getTokens(cardState);
       const radioTokens = selectRadioButtonTokens(themeTokens, 'radio');
       const titleTokens = selectTokens('Typography', themeTokens);
-      const textStyle = applyTextStyles(titleTokens);
+      const textStyle = applyTextStyles({ ...titleTokens,
+        themeOptions
+      });
       return /*#__PURE__*/_jsxs(StackView, {
         direction: "row",
         space: radioSpace,

package/lib-module/RadioCard/RadioCardGroup.js

@@ -70,6 +70,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -114,6 +115,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive || readOnly,
@@ -199,6 +201,11 @@ RadioCardGroup.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/Select/Select.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import Picker from './Picker';
 import InputSupports from '../InputSupports';
@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -41,7 +41,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
   const webStyles = Platform.select({
     web: {
@@ -228,6 +229,9 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
     icon: IconComponent,
     validationIcon: ValidationIconComponent
   } = themeTokens;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
     children: _ref8 => {
@@ -239,7 +243,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/_jsx(Picker, {
           ref: ref,
-          style: selectInputStyles(themeTokens, inactive),
+          style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,

package/lib-module/SkipLink/SkipLink.js

@@ -0,0 +1,188 @@
+import React, { forwardRef } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]); // ensure explicit selection of tokens
+
+const selectStyles = _ref => {
+  let {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return {
+    color
+  };
+};
+/**
+ * A generic Skip link component, unstyled by default.
+ * A Skip link component help keyboard-only users, screen reader users to skip
+ * sections and navigate to the content they want.
+ *
+ * ## Component API
+ *
+ * For common uses, pass a `href` that is a # link to a DOM id that can be skipped to (web only).
+ *
+ * The element with this ID should be focusable, e.g. `<Box nativeID="skip-target" focusable>`.
+ *
+ * Other custom behaviour may be set by passing an `onPress` function, and routers may be integrated
+ * in the same way as other navigation-related components by passing a `LinkRouter`; but a # anchor
+ * href on web and/or a `targetRef` for cross-platform applications is the recommended approach.
+ *
+ * ## Visible styling
+ *
+ * When focused, the skip link shows as a visible element similar to a simplified ButtonLink using
+ * UDS theming. The `tokens` prop may be used to override these styles.
+ *
+ * To control the background of a skip link, the following tokens can be used:
+ *
+ * - `backgroundColor`
+ * *
+ * In order to control the color of the skip link text, the following tokens can be used:
+ *
+ * - `color`
+ *
+ * ### Padding
+ *
+ * The following padding tokens can be used:
+ *
+ * - `paddingHorizontal`
+ * - `paddingVertical`
+ *
+ * ### Outline
+ *
+ * The following tokens to control the outline:
+ *
+ * - `outlineColor`
+ * - `outlineOffset`
+ * - `outlineStyle`
+ * - `outlineWidth`
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The skip link component is visually hidden until a keyboard press activates it.
+ * - Usually, you should place the skip link immediately after the opening <body> tag.
+ * - This lets users bypass top-level navigation links and jump to the main content on a page.
+ * - Also consider using SkipLink before a complex feature containing many focusable elements.
+ *
+ * ## Accessibility
+ *
+ * Skip link supports all the common a11y and link props.
+ */
+
+
+const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    href,
+    children,
+    ...rawRest
+  } = _ref3;
+  const {
+    onPress,
+    ...rest
+  } = clickProps.toPressProps(rawRest);
+  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
+  const defaultTokens = getTokens();
+
+  const resolveLinkTokens = pressState => resolvePressableTokens(defaultTokens, pressState);
+
+  const handlePress = event => {
+    if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "link",
+    onPress: handlePress,
+    href: href,
+    style: _ref4 => {
+      let {
+        focused: focus
+      } = _ref4;
+      const themeTokens = getTokens({
+        focus
+      });
+      const skipLinkStyle = selectStyles(themeTokens);
+      return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden];
+    },
+    ...selectProps(rest),
+    children: pressState => {
+      const themeTokens = resolveLinkTokens(pressState);
+      const textStyles = selectTextStyles(themeTokens);
+      return /*#__PURE__*/_jsx(Text, {
+        style: [textStyles, staticStyles.baseline],
+        children: children
+      });
+    }
+  });
+});
+SkipLink.displayName = 'SkipLink';
+SkipLink.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The text content shown or read out when the SkipLink is focused, usually a string.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
+   */
+  href: PropTypes.string,
+  tokens: getTokensPropType('SkipLink'),
+  variant: variantProp.propType
+};
+const staticStyles = StyleSheet.create({
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  absolute: {
+    margin: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    overflow: 'hidden',
+    ...Platform.select({
+      web: {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)'
+      },
+      default: {
+        // width / height of 0 would make it non-focusable
+        height: 1,
+        width: 1,
+        opacity: 0
+      }
+    })
+  }
+});
+export default withLinkRouter(SkipLink);

package/lib-module/SkipLink/index.js

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

package/lib-module/StepTracker/Step.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 import StackView from '../StackView';
 import Icon from '../Icon';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { applyTextStyles } from '../ThemeProvider';
+import { applyTextStyles, useTheme } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -110,7 +110,7 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, isCurrent) => {
+const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -125,7 +125,8 @@ const selectLabelStyles = (_ref6, isCurrent) => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 
@@ -166,6 +167,9 @@ const Step = _ref7 => {
   const isCompleted = status > stepIndex;
   const isCurrent = status === stepIndex;
   const isActive = isCompleted || isCurrent;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsxs(StackView, {
     space: 0,
     tokens: {
@@ -200,12 +204,12 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/_jsx(Text, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
+        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",
         children: /*#__PURE__*/_jsx(Text, {
-          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, isCurrent)],
+          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, themeOptions, isCurrent)],
           children: label
         })
       })]

package/lib-module/StepTracker/StepTracker.js

@@ -4,7 +4,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 StackView from '../StackView';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import useCopy from '../utils/useCopy';
@@ -38,7 +38,7 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
   };
 };
 
-const selectStepTrackerLabelStyles = _ref3 => {
+const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontSize,
@@ -51,7 +51,8 @@ const selectStepTrackerLabelStyles = _ref3 => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 /**
@@ -113,6 +114,9 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
 
   const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
 
+  const {
+    themeOptions
+  } = useTheme();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -147,7 +151,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
       }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/_jsx(Text, {
-          style: selectStepTrackerLabelStyles(themeTokens),
+          style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
           children: stepTrackerLabel
         })
       })]

package/lib-module/Tabs/TabsItem.js

@@ -5,7 +5,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 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 { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import Spacer from '../Spacer';
 import { horizontalScrollUtils } from '../HorizontalScroll';
@@ -105,6 +105,9 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     onPress,
     ...rest
   } = clickProps.toPressProps(rawRest);
+  const {
+    themeOptions
+  } = useTheme();
   const getTokens = useThemeTokensCallback('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => resolvePressableTokens(getTokens, pressableState, {
@@ -170,6 +173,7 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
       const textStyles = applyTextStyles({ ...selectTokens('Typography', themeTokens),
+        themeOptions,
         textAlign
       });
       return /*#__PURE__*/_jsxs(View, {