@telus-uds/components-base 1.10.0 → 1.12.1

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/InputSupports/InputSupports.js

@@ -16,7 +16,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     tooltip,
-    validation
+    validation,
+    nativeID
   } = _ref;
   const {
     space
@@ -30,7 +31,8 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     hint,
     label,
-    validation
+    validation,
+    nativeID
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -91,6 +93,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 };
 export default InputSupports;

package/lib-module/InputSupports/useInputSupports.js

@@ -7,7 +7,8 @@ const useInputSupports = _ref => {
     label,
     feedback,
     validation,
-    hint
+    hint,
+    nativeID
   } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
@@ -22,7 +23,7 @@ const useInputSupports = _ref => {
     accessibilityInvalid: hasValidationError
   };
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/lib-module/Link/LinkBase.js

@@ -7,7 +7,7 @@ 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]);
@@ -53,7 +53,7 @@ const selectTextStyles = _ref2 => {
   };
 };
 
-const selectBlockStyles = _ref3 => {
+const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
     blockFontSize,
@@ -64,7 +64,8 @@ const selectBlockStyles = _ref3 => {
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   });
 };
 
@@ -164,6 +165,9 @@ 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)
     ,
@@ -180,7 +184,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

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);

package/lib-module/Modal/Modal.js

@@ -10,6 +10,7 @@ import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy
 import { useViewport } from '../ViewportProvider';
 import IconButton from '../IconButton';
 import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -110,6 +111,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     viewport,
     maxWidth
   });
+  const modalRef = useScrollBlocking(isOpen);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -140,6 +142,7 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.positioningContainer],
+      ref: modalRef,
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events

package/lib-module/Notification/Notification.js

@@ -2,7 +2,7 @@ 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 { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText } from '../utils';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
@@ -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 {
@@ -126,12 +128,15 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     dictionary,
     copy
   });
+  const {
+    themeOptions
+  } = useTheme();
 
   if (isDismissed) {
     return null;
   }
 
-  const textStyles = selectTextStyles(themeTokens);
+  const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
     textStyles
   }) : children, {

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/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/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/Skeleton/Skeleton.js

@@ -19,6 +19,7 @@ const selectSkeletonStyles = _ref => {
   return {
     backgroundColor: color,
     borderRadius: radius,
+    maxWidth: '100%',
     ...fadeAnimation
   };
 };

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,26 +151,25 @@ 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
         })
       })]
     })
   });
 });
-StepTracker.displayName = 'StepTracker';
+StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+});
 StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    }),
-    fr: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),

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, {

package/lib-module/TextInput/TextInput.js

@@ -40,7 +40,9 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    nativeID: selectedProps.nativeID,
+    ...supportsProps,
     children: _ref2 => {
       let {
         inputId,

package/lib-module/TextInput/TextInputBase.js

@@ -4,13 +4,13 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, 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
   });
 
   function linesToHeight(lines) {
@@ -210,9 +211,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
+  const {
+    themeOptions
+  } = useTheme();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, inactive);
+  }, themeOptions, inactive);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -9,7 +9,11 @@ export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError)
 const ThemeProvider = _ref => {
   let {
     children,
-    defaultTheme
+    defaultTheme,
+    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    themeOptions = {
+      forceAbsoluteFontSizing: true
+    }
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
@@ -19,7 +23,9 @@ const ThemeProvider = _ref => {
   return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
-      value: theme,
+      value: { ...theme,
+        themeOptions
+      },
       children: children
     })
   });
@@ -31,6 +37,17 @@ ThemeProvider.propTypes = {
     metadata: PropTypes.shape({
       themeTokensVersion: PropTypes.string.isRequired
     }).isRequired
-  }).isRequired
+  }).isRequired,
+
+  /**
+   * An object containing options allowing to customize the theming experience:
+   *
+   * - `forceAbsoluteFontSizing`: available on web only; when set to true, allows
+   *   using absolute font sizing (in pixels, doesn't scale) instead of the
+   *   relative sizing (in `rem`, scales depending on the browser settings)
+   */
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool
+  })
 };
 export default ThemeProvider;

package/lib-module/ThemeProvider/utils/styles.js

@@ -14,14 +14,21 @@ export function applyTextStyles(_ref) {
     fontWeight = '400',
     fontName,
     fontStyle = 'normal',
+    themeOptions = {
+      // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+      forceAbsoluteFontSizing: true
+    },
     ...rest
   } = _ref;
   const styles = { ...rest
   };
+  const {
+    forceAbsoluteFontSizing
+  } = themeOptions;
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize;
+    styles.fontSize = Platform.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {