@telus-uds/components-base 3.21.0 → 3.22.0

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 21 Oct 2025 14:46:26 GMT and should not be manually modified.
+This log was last generated on Wed, 29 Oct 2025 07:40:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.22.0
+
+Wed, 29 Oct 2025 07:40:46 GMT
+
+### Minor changes
+
+- `Carousel`: Add `loopDuration` prop (oscar.palencia@telus.com)
+- `Button`: add RNMQ support (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Interactive Card`: extra spacing fixed in interactive Cards when padding tokens are set to none (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.21.0
 
 Tue, 21 Oct 2025 14:46:26 GMT

package/lib/cjs/Button/Button.js

@@ -22,16 +22,23 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _ThemeProvider.useTheme)();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokensCallback : _ThemeProvider.useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';

package/lib/cjs/Button/ButtonBase.js

@@ -257,6 +257,13 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     iconProps,
     ...rawRest
   } = _ref12;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    viewport
+  } = rawRest;
+  const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport;
   const {
     onPress,
     ...rest
@@ -268,15 +275,55 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   };
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
+  let layoutMediaQueryStyles;
+  let flexAndWidthStylesIds;
+  if (enableMediaQueryStyleSheet) {
+    const defaultPressableState = {
+      pressed: false,
+      hovered: false,
+      focused: false
+    };
+    const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
+      let [vp, viewportTokens] = _ref13;
+      const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
+      acc[vp] = {
+        ...staticStyles.row,
+        ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+        ...selectOuterSizeStyles(viewportTokens)
+      };
+      return acc;
+    }, {});
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(layoutTokensByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      layout: {
+        ...mediaQueryStyles
+      }
+    });
+    layoutMediaQueryStyles = styles.layout;
+    flexAndWidthStylesIds = ids.layout;
+  }
   const getPressableStyle = pressableState => {
+    if (enableMediaQueryStyleSheet) {
+      const themeTokens = resolveButtonTokens(pressableState)[viewport];
+      return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)];
+    }
     const themeTokens = resolveButtonTokens(pressableState);
-    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
-  const {
-    themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
+    dataSet: {
+      ...(flexAndWidthStylesIds ? {
+        media: flexAndWidthStylesIds
+      } : {}),
+      ...rawRest.dataSet
+    }
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -288,8 +335,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     disabled: inactive,
     hrefAttrs: hrefAttrs,
     ...systemProps,
+    ...dataSetProp,
     children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
+      const themeTokens = enableMediaQueryStyleSheet ? resolveButtonTokens(pressableState)[viewport] : resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({

package/lib/cjs/Card/PressableCardBase.js

@@ -181,7 +181,9 @@ const staticStyles = _StyleSheet.default.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';

package/lib/cjs/Carousel/Carousel.js

@@ -358,6 +358,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     copy,
     slideDuration = 0,
     transitionDuration = 0,
+    loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
     ...rest
@@ -477,6 +478,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
+    const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -494,14 +496,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration * 1000
+        duration: applicableTransitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       _Animated.default.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
+        duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(panToAnimate, {
@@ -510,7 +512,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -1204,6 +1206,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: _propTypes.default.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: _propTypes.default.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/lib/cjs/ThemeProvider/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useTheme: true,
   useSetTheme: true,
-  useResponsiveThemeTokens: true
+  useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true
 };
 exports.default = void 0;
 Object.defineProperty(exports, "useResponsiveThemeTokens", {
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _useResponsiveThemeTokens.default;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveThemeTokensCallback.default;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -31,6 +38,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
 var _useResponsiveThemeTokens = _interopRequireDefault(require("./useResponsiveThemeTokens"));
+var _useResponsiveThemeTokensCallback = _interopRequireDefault(require("./useResponsiveThemeTokensCallback"));
 var _useThemeTokens = require("./useThemeTokens");
 Object.keys(_useThemeTokens).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _systemConstants = require("@telus-uds/system-constants");
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || _systemConstants.viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getResponsiveThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, (0, _utils.mergeAppearances)(variants, states), tokenOverrides);
+    return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
+  }, [componentTheme, tokens, variants]);
+  return getResponsiveThemeTokensCallback;
+};
+var _default = exports.default = useResponsiveThemeTokensCallback;

package/lib/cjs/index.js

@@ -93,6 +93,7 @@ var _exportNames = {
   applyTextStyles: true,
   applyShadowToken: true,
   useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -605,6 +606,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _ThemeProvider.useResponsiveThemeTokens;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokensCallback;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {

package/lib/esm/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokensCallback, useResponsiveThemeTokensCallback, useTheme } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,16 +13,23 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const viewport = useViewport();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokensCallback : useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, {
     ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';

package/lib/esm/Button/ButtonBase.js

@@ -6,7 +6,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps, createMediaQueryStyles, StyleSheet as StyleSheetUtils } from '../utils';
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
@@ -250,6 +250,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     iconProps,
     ...rawRest
   } = _ref12;
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    viewport
+  } = rawRest;
+  const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport;
   const {
     onPress,
     ...rest
@@ -261,15 +268,55 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   };
   const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
+  let layoutMediaQueryStyles;
+  let flexAndWidthStylesIds;
+  if (enableMediaQueryStyleSheet) {
+    const defaultPressableState = {
+      pressed: false,
+      hovered: false,
+      focused: false
+    };
+    const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
+      let [vp, viewportTokens] = _ref13;
+      const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
+      acc[vp] = {
+        ...staticStyles.row,
+        ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+        ...selectOuterSizeStyles(viewportTokens)
+      };
+      return acc;
+    }, {});
+    const mediaQueryStyles = createMediaQueryStyles(layoutTokensByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheetUtils.create({
+      layout: {
+        ...mediaQueryStyles
+      }
+    });
+    layoutMediaQueryStyles = styles.layout;
+    flexAndWidthStylesIds = ids.layout;
+  }
   const getPressableStyle = pressableState => {
+    if (enableMediaQueryStyleSheet) {
+      const themeTokens = resolveButtonTokens(pressableState)[viewport];
+      return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)];
+    }
     const themeTokens = resolveButtonTokens(pressableState);
-    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
-  const {
-    themeOptions
-  } = useTheme();
+  const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
+    dataSet: {
+      ...(flexAndWidthStylesIds ? {
+        media: flexAndWidthStylesIds
+      } : {}),
+      ...rawRest.dataSet
+    }
+  } : {};
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -281,8 +328,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     disabled: inactive,
     hrefAttrs: hrefAttrs,
     ...systemProps,
+    ...dataSetProp,
     children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
+      const themeTokens = enableMediaQueryStyleSheet ? resolveButtonTokens(pressableState)[viewport] : resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({

package/lib/esm/Card/PressableCardBase.js

@@ -173,7 +173,9 @@ const staticStyles = StyleSheet.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';

package/lib/esm/Carousel/Carousel.js

@@ -351,6 +351,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     copy,
     slideDuration = 0,
     transitionDuration = 0,
+    loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
     ...rest
@@ -470,6 +471,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
+    const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -487,14 +489,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration * 1000
+        duration: applicableTransitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       Animated.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
+        duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
       Animated.spring(panToAnimate, {
@@ -503,7 +505,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -1197,6 +1199,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: PropTypes.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/lib/esm/ThemeProvider/index.js

@@ -2,6 +2,7 @@ import ThemeProvider from './ThemeProvider';
 export { default as useTheme } from './useTheme';
 export { default as useSetTheme } from './useSetTheme';
 export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
+export { default as useResponsiveThemeTokensCallback } from './useResponsiveThemeTokensCallback';
 export * from './useThemeTokens';
 export * from './utils';
 export default ThemeProvider;

package/lib/esm/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { viewports } from '@telus-uds/system-constants';
+import useTheme from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = mergeAppearances(variants, states);
+  const tokensByViewport = Object.fromEntries(viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = resolveThemeTokens(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const getResponsiveThemeTokensCallback = useCallback((states, tokenOverrides) => {
+    const resolvedTokens = resolveThemeTokens(tokens, mergeAppearances(variants, states), tokenOverrides);
+    return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
+  }, [componentTheme, tokens, variants]);
+  return getResponsiveThemeTokensCallback;
+};
+export default useResponsiveThemeTokensCallback;

package/lib/esm/index.js

@@ -68,6 +68,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens, useResponsiveThemeTokensCallback } from './ThemeProvider';
 export * from './utils';
 export { default as Portal } from './Portal';

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.21.0",
+  "version": "3.22.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.21.0",
+  "version": "3.22.0",
   "types": "types/index.d.ts"
 }

package/src/Button/Button.jsx

@@ -2,17 +2,37 @@ import React from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  useThemeTokensCallback,
+  useResponsiveThemeTokensCallback,
+  useTheme
+} from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 
 const Button = React.forwardRef(
   ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
     const viewport = useViewport()
-    const buttonVariant = { viewport, ...variant }
-    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    const buttonVariant = enableMediaQueryStyleSheet ? variant : { viewport, ...variant }
+
+    const useTokens = enableMediaQueryStyleSheet
+      ? useResponsiveThemeTokensCallback
+      : useThemeTokensCallback
+
+    const getTokens = useTokens('Button', tokens, buttonVariant)
+
     return (
-      <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+      <ButtonBase
+        {...props}
+        tokens={getTokens}
+        accessibilityRole={accessibilityRole}
+        ref={ref}
+        viewport={viewport}
+      />
     )
   }
 )

package/src/Button/ButtonBase.jsx

@@ -16,7 +16,9 @@ import {
   viewProps,
   wrapStringsInText,
   withLinkRouter,
-  contentfulProps
+  contentfulProps,
+  createMediaQueryStyles,
+  StyleSheet as StyleSheetUtils
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -221,6 +223,9 @@ const ButtonBase = React.forwardRef(
     },
     ref
   ) => {
+    const { themeOptions } = useTheme()
+    const { viewport } = rawRest
+    const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const extraButtonState = { inactive, selected, iconPosition }
     const resolveButtonTokens = (pressableState) =>
@@ -228,9 +233,49 @@ const ButtonBase = React.forwardRef(
 
     const systemProps = selectProps(rest)
 
+    let layoutMediaQueryStyles
+    let flexAndWidthStylesIds
+
+    if (enableMediaQueryStyleSheet) {
+      const defaultPressableState = { pressed: false, hovered: false, focused: false }
+      const defaultTokensByViewport = resolveButtonTokens(defaultPressableState)
+
+      const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce(
+        (acc, [vp, viewportTokens]) => {
+          const flexAndWidthStyles =
+            viewportTokens.width === '100%' && viewportTokens.flex === 1
+              ? selectFlexAndWidthStyles(viewportTokens)
+              : {}
+
+          acc[vp] = {
+            ...staticStyles.row,
+            ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+            ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+            ...selectOuterSizeStyles(viewportTokens)
+          }
+          return acc
+        },
+        {}
+      )
+
+      const mediaQueryStyles = createMediaQueryStyles(layoutTokensByViewport)
+      const { ids, styles } = StyleSheetUtils.create({
+        layout: {
+          ...mediaQueryStyles
+        }
+      })
+
+      layoutMediaQueryStyles = styles.layout
+      flexAndWidthStylesIds = ids.layout
+    }
+
     const getPressableStyle = (pressableState) => {
+      if (enableMediaQueryStyleSheet) {
+        const themeTokens = resolveButtonTokens(pressableState)[viewport]
+        return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)]
+      }
+
       const themeTokens = resolveButtonTokens(pressableState)
-      // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
       const flexAndWidthStyles =
         themeTokens.width === '100%' && themeTokens.flex === 1
           ? selectFlexAndWidthStyles(themeTokens)
@@ -244,7 +289,16 @@ const ButtonBase = React.forwardRef(
         selectOuterSizeStyles(themeTokens)
       ]
     }
-    const { themeOptions } = useTheme()
+
+    const dataSetProp =
+      flexAndWidthStylesIds || rawRest.dataSet
+        ? {
+            dataSet: {
+              ...(flexAndWidthStylesIds ? { media: flexAndWidthStylesIds } : {}),
+              ...rawRest.dataSet
+            }
+          }
+        : {}
 
     return (
       <Pressable
@@ -255,9 +309,12 @@ const ButtonBase = React.forwardRef(
         disabled={inactive}
         hrefAttrs={hrefAttrs}
         {...systemProps}
+        {...dataSetProp}
       >
         {(pressableState) => {
-          const themeTokens = resolveButtonTokens(pressableState)
+          const themeTokens = enableMediaQueryStyleSheet
+            ? resolveButtonTokens(pressableState)[viewport]
+            : resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
           const textStyles = [

package/src/Card/PressableCardBase.jsx

@@ -204,7 +204,9 @@ const staticStyles = StyleSheet.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 })
 

package/src/Carousel/Carousel.jsx

@@ -399,6 +399,7 @@ const Carousel = React.forwardRef(
       copy,
       slideDuration = 0,
       transitionDuration = 0,
+      loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
       ...rest
@@ -533,6 +534,8 @@ const Carousel = React.forwardRef(
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex) => {
+        const applicableTransitionDuration =
+          isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
           Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
@@ -543,14 +546,14 @@ const Carousel = React.forwardRef(
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration * 1000
+            duration: applicableTransitionDuration * 1000
           }).start(handleAnimationEndToIndex)
         } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
           Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration ? transitionDuration * 1000 : 1000
+            duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
           }).start(handleAnimationEndToIndex)
         } else {
           Animated.spring(panToAnimate, {
@@ -564,6 +567,8 @@ const Carousel = React.forwardRef(
         springConfig,
         handleAnimationEnd,
         transitionDuration,
+        loopDuration,
+        isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
         enableDisplayMultipleItemsPerSlide
@@ -1390,6 +1395,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: PropTypes.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/src/PriceLockup/utils/renderPrice.jsx

@@ -102,28 +102,26 @@ const renderPrice = (
               )}
             </Text>
           ) : null}
-          {
-            <Text>
-              {renderAmount(
-                amount,
-                amountTypographyTokens,
+          <Text>
+            {renderAmount(
+              amount,
+              amountTypographyTokens,
+              strikeThrough,
+              a11yText,
+              fontColor,
+              themeTokens
+            )}
+            {isPriceBaseline &&
+              cents &&
+              renderAmount(
+                `${separator}${cents}`,
+                centsTypographyTokens,
                 strikeThrough,
                 a11yText,
                 fontColor,
                 themeTokens
               )}
-              {isPriceBaseline &&
-                cents &&
-                renderAmount(
-                  `${separator}${cents}`,
-                  centsTypographyTokens,
-                  strikeThrough,
-                  a11yText,
-                  fontColor,
-                  themeTokens
-                )}
-            </Text>
-          }
+          </Text>
           {cents && !isPriceBaseline
             ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
             : null}

package/src/ThemeProvider/index.js

@@ -3,6 +3,7 @@ import ThemeProvider from './ThemeProvider'
 export { default as useTheme } from './useTheme'
 export { default as useSetTheme } from './useSetTheme'
 export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens'
+export { default as useResponsiveThemeTokensCallback } from './useResponsiveThemeTokensCallback'
 export * from './useThemeTokens'
 
 export * from './utils'

package/src/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,129 @@
+import { useCallback } from 'react'
+import { viewports } from '@telus-uds/system-constants'
+import useTheme from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+
+const getResponsiveThemeTokens = (
+  { rules = [], tokens: defaultThemeTokens = {} },
+  tokensProp,
+  variants = {},
+  states
+) => {
+  const appearances = mergeAppearances(variants, states)
+
+  const tokensByViewport = Object.fromEntries(
+    viewports.keys.map((viewport) => [viewport, { ...defaultThemeTokens }])
+  )
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach((rule) => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports]
+      }
+      targetViewports.forEach((viewport) => {
+        tokensByViewport[viewport] = { ...tokensByViewport[viewport], ...rule.tokens }
+      })
+    }
+  })
+
+  Object.keys(tokensByViewport).forEach((viewport) => {
+    tokensByViewport[viewport] = resolveThemeTokens(
+      tokensByViewport[viewport],
+      appearances,
+      tokensProp
+    )
+  })
+
+  return tokensByViewport
+}
+
+const doesRuleApply = (rule, appearances) =>
+  Object.entries(rule.if).every((condition) => doesConditionApply(condition, appearances))
+
+const doesConditionApply = ([key, value], appearances) => {
+  if (key === 'viewport') {
+    return true
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue
+}
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ */
+
+/**
+ * Returns a memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const getResponsiveThemeTokensCallback = useCallback(
+    (states, tokenOverrides) => {
+      const resolvedTokens = resolveThemeTokens(
+        tokens,
+        mergeAppearances(variants, states),
+        tokenOverrides
+      )
+      return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states)
+    },
+    [componentTheme, tokens, variants]
+  )
+  return getResponsiveThemeTokensCallback
+}
+
+export default useResponsiveThemeTokensCallback

package/src/index.js

@@ -83,7 +83,8 @@ export {
   applyOuterBorder,
   applyTextStyles,
   applyShadowToken,
-  useResponsiveThemeTokens
+  useResponsiveThemeTokens,
+  useResponsiveThemeTokensCallback
 } from './ThemeProvider'
 
 export * from './utils'