@telus-uds/components-base 1.12.0 → 1.14.0

package/lib/SkipLink/SkipLink.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    href,
+    children,
+    ...rawRest
+  } = _ref3;
+
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
+  const defaultTokens = getTokens();
+
+  const resolveLinkTokens = pressState => (0, _utils.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__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    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__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        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.default.node,
+
+  /**
+   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
+   */
+  href: _propTypes.default.string,
+  tokens: (0, _utils.getTokensPropType)('SkipLink'),
+  variant: _utils.variantProp.propType
+};
+
+const staticStyles = _StyleSheet.default.create({
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  absolute: {
+    margin: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    overflow: 'hidden',
+    ..._Platform.default.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
+      }
+    })
+  }
+});
+
+var _default = (0, _utils.withLinkRouter)(SkipLink);
+
+exports.default = _default;

package/lib/SkipLink/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _SkipLink = _interopRequireDefault(require("./SkipLink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _SkipLink.default;
+exports.default = _default;

package/lib/StepTracker/Step.js

@@ -128,7 +128,7 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, isCurrent) => {
+const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -143,7 +143,8 @@ const selectLabelStyles = (_ref6, isCurrent) => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 
@@ -184,6 +185,9 @@ const Step = _ref7 => {
   const isCompleted = status > stepIndex;
   const isCurrent = status === stepIndex;
   const isActive = isCompleted || isCurrent;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 0,
     tokens: {
@@ -218,12 +222,12 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
+        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
         direction: "row",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          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/StepTracker/StepTracker.js

@@ -63,7 +63,7 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
   };
 };
 
-const selectStepTrackerLabelStyles = _ref3 => {
+const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontSize,
@@ -76,7 +76,8 @@ const selectStepTrackerLabelStyles = _ref3 => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 /**
@@ -138,6 +139,9 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -172,7 +176,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: selectStepTrackerLabelStyles(themeTokens),
+          style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
           children: stepTrackerLabel
         })
       })]

package/lib/Tabs/TabsItem.js

@@ -131,6 +131,9 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -197,6 +200,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
       const textStyles = (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', themeTokens),
+        themeOptions,
         textAlign
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {

package/lib/TextInput/TextInputBase.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -62,7 +62,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   function linesToHeight(lines) {
@@ -233,9 +234,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, inactive);
+  }, themeOptions, inactive);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {

package/lib/ThemeProvider/ThemeProvider.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("./utils");
 
+var _responsiveProps = _interopRequireDefault(require("../utils/props/responsiveProps"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,7 +31,11 @@ exports.ThemeSetterContext = ThemeSetterContext;
 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] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
@@ -39,7 +45,9 @@ const ThemeProvider = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
-      value: theme,
+      value: { ...theme,
+        themeOptions
+      },
       children: children
     })
   });
@@ -51,7 +59,21 @@ ThemeProvider.propTypes = {
     metadata: _propTypes.default.shape({
       themeTokensVersion: _propTypes.default.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)
+   * - `contentMaxWidth`: allows configuration of the content max width to be used in components
+   *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   */
+  themeOptions: _propTypes.default.shape({
+    forceAbsoluteFontSizing: _propTypes.default.bool,
+    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
+  })
 };
 var _default = ThemeProvider;
 exports.default = _default;

package/lib/ThemeProvider/utils/styles.js

@@ -28,14 +28,21 @@ 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.default.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / _systemConstants.fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -194,7 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
   }
 };
 

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -49,6 +49,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive = false,
     feedback,
     hint,
+    hintPosition = 'inline',
     tooltip,
     legend,
     name: inputGroupName,
@@ -134,6 +135,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -216,6 +218,11 @@ ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/Typography/Typography.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
 const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -52,6 +52,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -76,10 +77,13 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };

package/lib/index.js

@@ -34,6 +34,7 @@ var _exportNames = {
   Select: true,
   SideNav: true,
   Skeleton: true,
+  SkipLink: true,
   Spacer: true,
   StackView: true,
   StepTracker: true,
@@ -249,6 +250,12 @@ Object.defineProperty(exports, "Skeleton", {
     return _Skeleton.default;
   }
 });
+Object.defineProperty(exports, "SkipLink", {
+  enumerable: true,
+  get: function () {
+    return _SkipLink.default;
+  }
+});
 Object.defineProperty(exports, "Spacer", {
   enumerable: true,
   get: function () {
@@ -524,6 +531,8 @@ var _SideNav = _interopRequireDefault(require("./SideNav"));
 
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
+var _SkipLink = _interopRequireDefault(require("./SkipLink"));
+
 var _Spacer = _interopRequireDefault(require("./Spacer"));
 
 var _StackView = _interopRequireWildcard(require("./StackView"));

package/lib-module/BaseProvider/index.js

@@ -10,12 +10,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const BaseProvider = _ref => {
   let {
     defaultTheme,
-    children
+    children,
+    themeOptions
   } = _ref;
   return /*#__PURE__*/_jsx(A11yInfoProvider, {
     children: /*#__PURE__*/_jsx(ViewportProvider, {
       children: /*#__PURE__*/_jsx(ThemeProvider, {
         defaultTheme: defaultTheme,
+        themeOptions: themeOptions,
         children: children
       })
     })
@@ -23,7 +25,10 @@ const BaseProvider = _ref => {
 };
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool
+  })
 };
 export default BaseProvider;

package/lib-module/Button/ButtonBase.js

@@ -4,9 +4,10 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils';
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
 import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 
@@ -131,7 +132,7 @@ const selectBorderStyles = _ref5 => {
   };
 };
 
-const selectTextStyles = _ref6 => {
+const selectTextStyles = (_ref6, themeOptions) => {
   let {
     fontSize,
     color,
@@ -146,6 +147,7 @@ const selectTextStyles = _ref6 => {
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   });
 };
@@ -166,7 +168,18 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   });
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
+const selectItemIconTokens = _ref8 => {
+  let {
+    color,
+    iconSize
+  } = _ref8;
+  return {
+    size: iconSize,
+    color
+  };
+};
+
+const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
   let {
     id,
     href,
@@ -177,8 +190,11 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
     // alias for inactive
     inactive = disabled,
     selected = false,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
     ...rawRest
-  } = _ref8;
+  } = _ref9;
   const {
     onPress,
     ...rest
@@ -197,6 +213,9 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -212,10 +231,15 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const iconTokens = selectItemIconTokens(themeTokens);
+      const {
+        iconSpace
+      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
+      const IconComponent = icon || themeTokens.icon;
       return /*#__PURE__*/_jsx(View, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
@@ -226,10 +250,18 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
             transition: 'background-color 200ms, border-color 200ms'
           }
         })],
-        children: wrapStringsInText(typeof children === 'function' ? children({ ...resolvePressableState(pressableState, extraButtonState),
-          textStyles
-        }) : children, {
-          style: textStyles
+        children: /*#__PURE__*/_jsx(IconText, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: iconSpace,
+          iconProps: { ...iconProps,
+            tokens: iconTokens
+          },
+          children: wrapStringsInText(typeof children === 'function' ? children({ ...resolvePressableState(pressableState, extraButtonState),
+            textStyles
+          }) : children, {
+            style: textStyles
+          })
         })
       });
     }