@telus-uds/components-base 3.20.0 → 3.22.0

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/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -61,7 +61,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
-  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 };

package/lib/esm/StackView/StackView.js

@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Divider from '../Divider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps, StyleSheet as StyleSheetUtils, createMediaQueryStyles, useAllViewportTokens } from '../utils';
+import useTheme from '../ThemeProvider/useTheme';
 import getStackedContent from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -62,10 +61,15 @@ const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     tag,
     accessibilityRole,
+    dataSet,
     ...rest
   } = _ref;
-  const viewport = useViewport();
   const direction = useResponsiveProp(directionProp, 'column');
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
   const selectedProps = selectProps({
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
@@ -76,17 +80,58 @@ const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     divider,
     space
   });
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = selectFlexStyles(themeTokens);
-  const size = {
-    width: themeTokens.width
-  };
+  const allTokens = useAllViewportTokens('StackView', tokens, variant);
+  let stackViewStyles;
+  let dataSetValue = dataSet;
+  if (enableMediaQueryStyleSheet) {
+    const stylesByViewport = {
+      xs: {
+        ...selectFlexStyles(allTokens.xs),
+        width: allTokens.xs.width
+      },
+      sm: {
+        ...selectFlexStyles(allTokens.sm),
+        width: allTokens.sm.width
+      },
+      md: {
+        ...selectFlexStyles(allTokens.md),
+        width: allTokens.md.width
+      },
+      lg: {
+        ...selectFlexStyles(allTokens.lg),
+        width: allTokens.lg.width
+      },
+      xl: {
+        ...selectFlexStyles(allTokens.xl),
+        width: allTokens.xl.width
+      }
+    };
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheetUtils.create({
+      stackView: {
+        ...mediaQueryStyles
+      }
+    });
+    stackViewStyles = [staticStyles[direction], styles.stackView];
+    dataSetValue = {
+      media: ids.stackView,
+      ...dataSet
+    };
+  } else {
+    const flexStyles = selectFlexStyles(allTokens.current);
+    const size = {
+      width: allTokens.current.width
+    };
+    stackViewStyles = [flexStyles, staticStyles[direction], size];
+  }
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, staticStyles[direction], size],
+    style: stackViewStyles,
+    dataSet: dataSetValue,
     children: content
   });
 });
@@ -121,6 +166,11 @@ StackView.propTypes = {
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be applied to the element. When media query stylesheet is enabled,
+   * this will include media query IDs for responsive styling.
+   */
+  dataSet: PropTypes.object
 };
 export default StackView;

package/lib/esm/Tabs/TabsDropdown.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
@@ -226,20 +227,18 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
+  pressable: Platform.OS === 'web' ? {
     outlineWidth: 0,
     outlineStyle: 'none',
     outlineColor: 'transparent'
-  },
+  } : {},
   buttonContent: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    minHeight: 44,
-    outline: 'none',
-    boxSizing: 'border-box'
+    minHeight: 44
   }
 });
 export default TabsDropdown;

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/esm/utils/ssr-media-query/index.js

@@ -1,6 +1,7 @@
 import createStyleSheet from './create-stylesheet';
 import createMediaQueryStyles from './utils/create-media-query-styles';
+import useAllViewportTokens from './utils/use-all-viewport-tokens';
 const StyleSheet = {
   create: createStyleSheet
 };
-export { StyleSheet, createMediaQueryStyles };
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens };

package/lib/esm/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -0,0 +1,48 @@
+import { useThemeTokens } from '../../../ThemeProvider';
+import { useViewport } from '../../../ViewportProvider';
+
+/**
+ * Hook to get theme tokens for all viewports at once.
+ * This is useful for components that need to support React Native Media Queries (RNMQ).
+ *
+ * All hooks are called unconditionally to comply with React's Rules of Hooks.
+ *
+ * @param {string} componentName - The name of the component to get tokens for
+ * @param {object|function} tokens - Custom tokens or token function
+ * @param {object} variant - Variant configuration
+ * @returns {object} Object with tokens for each viewport (xs, sm, md, lg, xl, current)
+ *
+ * @example
+ * const allTokens = useAllViewportTokens('StackView', tokens, variant)
+ * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
+ */
+const useAllViewportTokens = (componentName, tokens, variant) => {
+  const viewport = useViewport();
+  const xs = useThemeTokens(componentName, tokens, variant, {
+    viewport: 'xs'
+  });
+  const sm = useThemeTokens(componentName, tokens, variant, {
+    viewport: 'sm'
+  });
+  const md = useThemeTokens(componentName, tokens, variant, {
+    viewport: 'md'
+  });
+  const lg = useThemeTokens(componentName, tokens, variant, {
+    viewport: 'lg'
+  });
+  const xl = useThemeTokens(componentName, tokens, variant, {
+    viewport: 'xl'
+  });
+  const current = useThemeTokens(componentName, tokens, variant, {
+    viewport
+  });
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    current
+  };
+};
+export default useAllViewportTokens;

package/lib/package.json

@@ -34,7 +34,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "~7.0.1",
     "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "~18.0.0",
+    "react-test-renderer": "^18.0.0",
     "webpack": "5.x"
   },
   "exports": {
@@ -59,8 +59,8 @@
     "react": ">=18.2.0 <19.0.0",
     "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
-    "react-native-web": "^0.19.10",
-    "react-native-svg": "15.7.1"
+    "react-native-svg": "15.7.1",
+    "react-native-web": "^0.19.10"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.20.0",
+  "version": "3.22.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -34,7 +34,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "~7.0.1",
     "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "~18.0.0",
+    "react-test-renderer": "^18.0.0",
     "webpack": "5.x"
   },
   "exports": {
@@ -59,8 +59,8 @@
     "react": ">=18.2.0 <19.0.0",
     "react-dom": ">=18.2.0 <19.0.0",
     "react-native": "^0.74.5",
-    "react-native-web": "^0.19.10",
-    "react-native-svg": "15.7.1"
+    "react-native-svg": "15.7.1",
+    "react-native-web": "^0.19.10"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.20.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}
+      />
     )
   }
 )