@telus-uds/components-base 3.19.0 → 3.21.0

package/CHANGELOG.md

@@ -1,9 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 03 Oct 2025 20:34:06 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
+
+### Minor changes
+
+- `Spacer`: add RNMQ support (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.15.1
+
+### Patches
+
+- `ButtonDropdown`: Small size variant updates. (oscar.palencia@telus.com)
+- `MultiSelectfilter`: rowLimit prop issue causing display problems fixed (35577399+JoshHC@users.noreply.github.com)
+- `ExpandCollapseMini`: extra padding removed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.19.0
 
 Fri, 03 Oct 2025 20:34:06 GMT

package/lib/cjs/Button/ButtonDropdown.js

@@ -64,6 +64,7 @@ const selectDescriptionTextStyles = tokens => ({
     fontName: tokens?.descriptionFontName,
     fontSize: tokens?.descriptionFontSize,
     fontWeight: tokens?.descriptionFontWeight,
+    lineHeight: tokens?.descriptionLineHeight,
     fontColor: tokens?.color
   }),
   paddingBottom: tokens?.descriptionTextPaddingBottom

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -73,35 +73,21 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     const isHovered = hover || linkHover;
     const iconBaselineOffset = 0;
     const hoverTranslateY = 4;
-
-    // Calculate baseline alignment to vertically center icon with text
-    // This combines font and icon metrics with adjustments for visual balance
-    const fontBaseline = fontSize / hoverTranslateY; // Quarter of font size - adjusts for text's visual center point
-    const iconBaseline = iconSize / hoverTranslateY; // Quarter of icon size - adjusts for icon's visual center point
-    const staticOffset = hoverTranslateY; // Fixed downward adjustment to fine-tune vertical alignment
-    const sizeCompensation = -Math.abs(iconSize - fontSize); // Compensates when icon and text sizes differ significantly
-
+    const fontBaseline = fontSize / hoverTranslateY;
+    const iconBaseline = iconSize / hoverTranslateY;
+    const staticOffset = hoverTranslateY;
+    const sizeCompensation = -Math.abs(iconSize - fontSize);
     const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation;
-    if (_Platform.default.OS !== 'web') {
-      // For native platforms, use baseline alignment with optional offset
-      return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset
-      };
-    }
+    const mobileAdjustment = _Platform.default.OS !== 'web' ? -2 : 0;
     if (isHovered) {
-      // Apply animation offset to the baseline-aligned position
-      // When expanded: move icon UP (1.3 the hover distance for clear movement)
-      // When collapsed: move icon DOWN (single hover distance)
       const hoverMovementDistance = 1.3;
       const animationOffset = expanded ? -(hoverTranslateY * hoverMovementDistance) : hoverTranslateY;
       return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
+        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset + mobileAdjustment
       };
     }
-
-    // Default state uses baseline alignment with optional offset
     return {
-      iconTranslateY: baselineAlignment + iconBaselineOffset
+      iconTranslateY: baselineAlignment + iconBaselineOffset + mobileAdjustment
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
@@ -112,6 +98,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
       ...linkTokens,
       ...getTokens(linkState),
       iconSize,
+      blockFontSize: fontSize,
       blockLineHeight: lineHeight
     }),
     ref: ref,

package/lib/cjs/Link/LinkBase.js

@@ -187,7 +187,8 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, staticStyles.outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const mobileCompensation = null;
+      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -200,10 +201,12 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const {
         iconSpace
       } = themeTokens;
+      const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
+      const adjustedIconSpace = _Platform.default.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
-        space: iconSpace,
+        space: adjustedIconSpace,
         iconProps: {
           ...iconProps,
           tokens: iconTokens,
@@ -270,15 +273,11 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   },
-  outerBorderStyles: {
+  outerBorderCompensation: {
     ...(_Platform.default.OS !== 'web' && {
-      margin: 0,
       marginHorizontal: 2,
-      padding: 0
-    }),
-    ...(_Platform.default.OS === 'android' && {
-      paddingHorizontal: 2,
-      paddingTop: 2
+      paddingHorizontal: _Platform.default.OS === 'android' ? 2 : 0,
+      paddingTop: _Platform.default.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -71,7 +71,6 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MAX_ITEMS_THRESHOLD = 12;
 const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     label,
@@ -178,12 +177,13 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   });
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
   const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  let rowLength = items.length;
+  if (viewport !== 'xs' && colSize === 2) {
+    rowLength = Math.ceil(items.length / 2);
+  }
   _react.default.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
+    setMaxWidth(items.length >= rowLimit);
+  }, [items.length, rowLimit]);
   _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
@@ -430,14 +430,14 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
       overlaidPosition: overlaidPosition,
-      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
+      maxHeight: items.length >= rowLimit ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+        maxWidth: items.length >= rowLimit ? true : maxWidth,
         borderColor: containerBorderColor
       },
       copy: copy,

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

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _utils = require("../utils");
+var _useMediaQuerySpacing = _interopRequireDefault(require("../utils/useMediaQuerySpacing"));
+var _useTheme = _interopRequireDefault(require("../ThemeProvider/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -65,13 +67,66 @@ const Spacer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
+    dataSet,
     ...rest
   } = _ref;
-  const size = (0, _utils.useSpacingScale)(space);
-  const sizeStyle = selectSizeStyle(size, direction);
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _useTheme.default)();
+  const {
+    sizeByViewport
+  } = (0, _useMediaQuerySpacing.default)(space);
+  const fallbackSize = (0, _utils.useSpacingScale)(space);
+  const sizeStyle = selectSizeStyle(fallbackSize, direction);
+  let spacerStyles;
+  let dataSetValue = dataSet;
+  if (enableMediaQueryStyleSheet) {
+    const sizeKey = direction === 'row' ? 'width' : 'height';
+    const stylesByViewport = {
+      xs: {
+        [sizeKey]: sizeByViewport.xs,
+        ...staticStyles.stretch
+      },
+      sm: {
+        [sizeKey]: sizeByViewport.sm,
+        ...staticStyles.stretch
+      },
+      md: {
+        [sizeKey]: sizeByViewport.md,
+        ...staticStyles.stretch
+      },
+      lg: {
+        [sizeKey]: sizeByViewport.lg,
+        ...staticStyles.stretch
+      },
+      xl: {
+        [sizeKey]: sizeByViewport.xl,
+        ...staticStyles.stretch
+      }
+    };
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      spacer: {
+        ...mediaQueryStyles
+      }
+    });
+    spacerStyles = styles.spacer;
+    dataSetValue = {
+      media: ids.spacer,
+      ...dataSet
+    };
+  } else {
+    spacerStyles = [staticStyles.stretch, sizeStyle];
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.stretch, sizeStyle],
+    style: spacerStyles,
+    dataSet: dataSetValue,
     ...selectProps(rest)
   });
 });
@@ -90,7 +145,12 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: _propTypes.default.oneOf(['column', 'row'])
+  direction: _propTypes.default.oneOf(['column', 'row']),
+  /**
+   * 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
 };
 const staticStyles = _StyleSheet.default.create({
   stretch: {

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

@@ -8,6 +8,7 @@ var _exportNames = {
   useCopy: true,
   useHash: true,
   useSpacingScale: true,
+  useMediaQuerySpacing: true,
   useResponsiveProp: true,
   useOverlaidPosition: true,
   useSafeLayoutEffect: true,
@@ -90,6 +91,12 @@ Object.defineProperty(exports, "useHash", {
     return _useHash.default;
   }
 });
+Object.defineProperty(exports, "useMediaQuerySpacing", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuerySpacing.default;
+  }
+});
 Object.defineProperty(exports, "useOverlaidPosition", {
   enumerable: true,
   get: function () {
@@ -226,6 +233,7 @@ var _info = _interopRequireDefault(require("./info"));
 var _useCopy = _interopRequireDefault(require("./useCopy"));
 var _useHash = _interopRequireDefault(require("./useHash"));
 var _useSpacingScale = _interopRequireDefault(require("./useSpacingScale"));
+var _useMediaQuerySpacing = _interopRequireDefault(require("./useMediaQuerySpacing"));
 var _useResponsiveProp = _interopRequireWildcard(require("./useResponsiveProp"));
 Object.keys(_useResponsiveProp).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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/cjs/utils/useMediaQuerySpacing.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ThemeProvider = require("../ThemeProvider");
+var _useResponsiveProp = require("./useResponsiveProp");
+/**
+ * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ */
+
+/**
+ * A utility hook that simplifies implementing media query-based responsive spacing.
+ *
+ * This hook handles the complexity of:
+ * - Detecting if a space value is responsive (has viewport keys)
+ * - Fetching theme tokens for each viewport
+ * - Resolving the correct space index for each viewport
+ * - Extracting actual pixel values from theme tokens
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * const { sizeByViewport } = useMediaQuerySpacing(space, 'spacingScale')
+ *
+ * // Use sizeByViewport to create media query styles
+ * const stylesByViewport = {
+ *   xs: { padding: sizeByViewport.xs },
+ *   sm: { padding: sizeByViewport.sm },
+ *   md: { padding: sizeByViewport.md },
+ *   lg: { padding: sizeByViewport.lg },
+ *   xl: { padding: sizeByViewport.xl }
+ * }
+ * const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+ * ```
+ *
+ * ## Parameters
+ *
+ * @param {SpacingValue} spaceValue - A spacing value (number or responsive object with viewport keys)
+ * @param {string} tokenKey - The theme token key to use (e.g., 'spacingScale', 'Typography')
+ * @param {object} [tokens={}] - Additional tokens to pass to useThemeTokens
+ * @param {object} [variant={}] - Variant to pass to useThemeTokens
+ *
+ * ## Returns
+ *
+ * @returns {{
+ *   spaceIndexByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   sizeByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   tokensByViewport: { xs: object, sm: object, md: object, lg: object, xl: object }
+ * }}
+ *
+ * - `spaceIndexByViewport`: The resolved space index for each viewport
+ * - `sizeByViewport`: The actual pixel/number values for each viewport
+ * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
+ */
+const useMediaQuerySpacing = function (spaceValue) {
+  let tokenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'spacingScale';
+  let tokens = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let variant = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const isResponsive = typeof spaceValue === 'object' && spaceValue !== null && !spaceValue.space && !spaceValue.options;
+  const getSpaceIndex = viewport => {
+    if (isResponsive) {
+      return (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport);
+    }
+    if (typeof spaceValue === 'number') {
+      return spaceValue;
+    }
+    return spaceValue?.space ?? 1;
+  };
+  const spaceIndexByViewport = {
+    xs: getSpaceIndex('xs'),
+    sm: getSpaceIndex('sm'),
+    md: getSpaceIndex('md'),
+    lg: getSpaceIndex('lg'),
+    xl: getSpaceIndex('xl')
+  };
+  const tokensXs = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xs,
+    viewport: 'xs'
+  });
+  const tokensSm = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.sm,
+    viewport: 'sm'
+  });
+  const tokensMd = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.md,
+    viewport: 'md'
+  });
+  const tokensLg = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.lg,
+    viewport: 'lg'
+  });
+  const tokensXl = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xl,
+    viewport: 'xl'
+  });
+  const sizeByViewport = {
+    xs: tokensXs.size ?? 0,
+    sm: tokensSm.size ?? 0,
+    md: tokensMd.size ?? 0,
+    lg: tokensLg.size ?? 0,
+    xl: tokensXl.size ?? 0
+  };
+  const tokensByViewport = {
+    xs: tokensXs,
+    sm: tokensSm,
+    md: tokensMd,
+    lg: tokensLg,
+    xl: tokensXl
+  };
+  return {
+    spaceIndexByViewport,
+    sizeByViewport,
+    tokensByViewport
+  };
+};
+var _default = exports.default = useMediaQuerySpacing;

package/lib/esm/Button/ButtonDropdown.js

@@ -55,6 +55,7 @@ const selectDescriptionTextStyles = tokens => ({
     fontName: tokens?.descriptionFontName,
     fontSize: tokens?.descriptionFontSize,
     fontWeight: tokens?.descriptionFontWeight,
+    lineHeight: tokens?.descriptionLineHeight,
     fontColor: tokens?.color
   }),
   paddingBottom: tokens?.descriptionTextPaddingBottom