@telus-uds/components-base 3.20.0 → 3.21.0

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Oct 2025 15:11:05 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Oct 2025 14:46:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.21.0
+
+Tue, 21 Oct 2025 14:46:26 GMT
+
+### Minor changes
+
+- `StackView`: add RNMQ support (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Responsive`: fix console warning (guillermo.peitzner@telus.com)
+- `TabsDropdown`: outline unnecessary property removed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.20.0
 
 Fri, 10 Oct 2025 15:11:05 GMT

package/lib/cjs/Responsive/ResponsiveWithMediaQueryStyleSheet.js

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

package/lib/cjs/StackView/StackView.js

@@ -9,8 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
 var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
 var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -69,10 +68,15 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     tag,
     accessibilityRole,
+    dataSet,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _useTheme.default)();
   const selectedProps = selectProps({
     accessibilityRole,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
@@ -83,17 +87,58 @@ const StackView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     divider,
     space
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const size = {
-    width: themeTokens.width
-  };
+  const allTokens = (0, _utils.useAllViewportTokens)('StackView', tokens, variant);
+  let stackViewStyles;
+  let dataSetValue = dataSet;
+  if (enableMediaQueryStyleSheet) {
+    const stylesByViewport = {
+      xs: {
+        ...(0, _common.selectFlexStyles)(allTokens.xs),
+        width: allTokens.xs.width
+      },
+      sm: {
+        ...(0, _common.selectFlexStyles)(allTokens.sm),
+        width: allTokens.sm.width
+      },
+      md: {
+        ...(0, _common.selectFlexStyles)(allTokens.md),
+        width: allTokens.md.width
+      },
+      lg: {
+        ...(0, _common.selectFlexStyles)(allTokens.lg),
+        width: allTokens.lg.width
+      },
+      xl: {
+        ...(0, _common.selectFlexStyles)(allTokens.xl),
+        width: allTokens.xl.width
+      }
+    };
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      stackView: {
+        ...mediaQueryStyles
+      }
+    });
+    stackViewStyles = [_common.staticStyles[direction], styles.stackView];
+    dataSetValue = {
+      media: ids.stackView,
+      ...dataSet
+    };
+  } else {
+    const flexStyles = (0, _common.selectFlexStyles)(allTokens.current);
+    const size = {
+      width: allTokens.current.width
+    };
+    stackViewStyles = [flexStyles, _common.staticStyles[direction], size];
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles[direction], size],
+    style: stackViewStyles,
+    dataSet: dataSetValue,
     children: content
   });
 });
@@ -128,6 +173,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.default.node
+  children: _propTypes.default.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.default.object
 };
 var _default = exports.default = StackView;

package/lib/cjs/Tabs/TabsDropdown.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+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"));
@@ -233,20 +234,18 @@ const styles = _StyleSheet.default.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
+  pressable: _Platform.default.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
   }
 });
 var _default = exports.default = TabsDropdown;

package/lib/cjs/utils/ssr-media-query/index.js

@@ -10,8 +10,15 @@ Object.defineProperty(exports, "createMediaQueryStyles", {
     return _createMediaQueryStyles.default;
   }
 });
+Object.defineProperty(exports, "useAllViewportTokens", {
+  enumerable: true,
+  get: function () {
+    return _useAllViewportTokens.default;
+  }
+});
 var _createStylesheet = _interopRequireDefault(require("./create-stylesheet"));
 var _createMediaQueryStyles = _interopRequireDefault(require("./utils/create-media-query-styles"));
+var _useAllViewportTokens = _interopRequireDefault(require("./utils/use-all-viewport-tokens"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyleSheet = exports.StyleSheet = {
   create: _createStylesheet.default

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ThemeProvider = require("../../../ThemeProvider");
+var _ViewportProvider = require("../../../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 = (0, _ViewportProvider.useViewport)();
+  const xs = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'xs'
+  });
+  const sm = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'sm'
+  });
+  const md = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'md'
+  });
+  const lg = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'lg'
+  });
+  const xl = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport: 'xl'
+  });
+  const current = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+    viewport
+  });
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    current
+  };
+};
+var _default = exports.default = useAllViewportTokens;

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/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.21.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.21.0",
   "types": "types/index.d.ts"
 }

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -59,7 +59,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/src/StackView/StackView.jsx

@@ -13,10 +13,12 @@ import {
   spacingProps,
   useResponsiveProp,
   variantProp,
-  viewProps
+  viewProps,
+  StyleSheet as StyleSheetUtils,
+  createMediaQueryStyles,
+  useAllViewportTokens
 } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import useTheme from '../ThemeProvider/useTheme'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -75,24 +77,70 @@ const StackView = React.forwardRef(
       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),
       ...rest
     })
     const content = getStackedContent(children, { direction, 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 (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
+      <View ref={ref} {...selectedProps} style={stackViewStyles} dataSet={dataSetValue}>
         {content}
       </View>
     )
@@ -132,7 +180,12 @@ 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/src/Tabs/TabsDropdown.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
@@ -245,20 +245,21 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
-    outlineWidth: 0,
-    outlineStyle: 'none',
-    outlineColor: 'transparent'
-  },
+  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
   }
 })
 

package/src/utils/ssr-media-query/index.js

@@ -1,8 +1,9 @@
 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/src/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -0,0 +1,32 @@
+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