@telus-uds/components-base 3.19.0 → 3.21.0

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -66,35 +66,21 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, 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.OS !== 'web') {
-      // For native platforms, use baseline alignment with optional offset
-      return {
-        iconTranslateY: baselineAlignment + iconBaselineOffset
-      };
-    }
+    const mobileAdjustment = Platform.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__*/_jsx(Link, {
@@ -105,6 +91,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...linkTokens,
       ...getTokens(linkState),
       iconSize,
+      blockFontSize: fontSize,
       blockLineHeight: lineHeight
     }),
     ref: ref,

package/lib/esm/Link/LinkBase.js

@@ -180,7 +180,8 @@ const LinkBase = /*#__PURE__*/React.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);
@@ -193,10 +194,12 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const {
         iconSpace
       } = themeTokens;
+      const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
+      const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
       return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
-        space: iconSpace,
+        space: adjustedIconSpace,
         iconProps: {
           ...iconProps,
           tokens: iconTokens,
@@ -263,15 +266,11 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderStyles: {
+  outerBorderCompensation: {
     ...(Platform.OS !== 'web' && {
-      margin: 0,
       marginHorizontal: 2,
-      padding: 0
-    }),
-    ...(Platform.OS === 'android' && {
-      paddingHorizontal: 2,
-      paddingTop: 2
+      paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
+      paddingTop: Platform.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -64,7 +64,6 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
   width: windowWidth
 });
 const TOTAL_COLUMNS = 12;
-const MAX_ITEMS_THRESHOLD = 12;
 const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
@@ -171,12 +170,13 @@ const MultiSelectFilter = /*#__PURE__*/React.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.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
+    setMaxWidth(items.length >= rowLimit);
+  }, [items.length, rowLimit]);
   React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
@@ -423,14 +423,14 @@ const MultiSelectFilter = /*#__PURE__*/React.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/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/Spacer/Spacer.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
-import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps, StyleSheet as StyleSheetUtils, createMediaQueryStyles } from '../utils';
+import useMediaQuerySpacing from '../utils/useMediaQuerySpacing';
+import useTheme from '../ThemeProvider/useTheme';
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
@@ -60,13 +62,66 @@ const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
+    dataSet,
     ...rest
   } = _ref;
-  const size = useSpacingScale(space);
-  const sizeStyle = selectSizeStyle(size, direction);
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const {
+    sizeByViewport
+  } = useMediaQuerySpacing(space);
+  const fallbackSize = 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 = createMediaQueryStyles(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheetUtils.create({
+      spacer: {
+        ...mediaQueryStyles
+      }
+    });
+    spacerStyles = styles.spacer;
+    dataSetValue = {
+      media: ids.spacer,
+      ...dataSet
+    };
+  } else {
+    spacerStyles = [staticStyles.stretch, sizeStyle];
+  }
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.stretch, sizeStyle],
+    style: spacerStyles,
+    dataSet: dataSetValue,
     ...selectProps(rest)
   });
 });
@@ -85,7 +140,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.oneOf(['column', 'row'])
+  direction: PropTypes.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.object
 };
 const staticStyles = StyleSheet.create({
   stretch: {

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

@@ -9,6 +9,7 @@ export { default as info } from './info';
 export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';
 export { default as useSpacingScale } from './useSpacingScale';
+export { default as useMediaQuerySpacing } from './useMediaQuerySpacing';
 export { default as useResponsiveProp } from './useResponsiveProp';
 export { default as useOverlaidPosition } from './useOverlaidPosition';
 export { default as useSafeLayoutEffect } from './useSafeLayoutEffect';

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

@@ -0,0 +1,116 @@
+import { useThemeTokens } from '../ThemeProvider';
+import { resolveResponsiveProp } from './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 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 = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xs,
+    viewport: 'xs'
+  });
+  const tokensSm = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.sm,
+    viewport: 'sm'
+  });
+  const tokensMd = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.md,
+    viewport: 'md'
+  });
+  const tokensLg = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.lg,
+    viewport: 'lg'
+  });
+  const tokensXl = 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
+  };
+};
+export default useMediaQuerySpacing;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.15.0",
+    "@telus-uds/system-theme-tokens": "^4.15.1",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -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.19.0",
+  "version": "3.21.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.15.0",
+    "@telus-uds/system-theme-tokens": "^4.15.1",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -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.19.0",
+  "version": "3.21.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonDropdown.jsx

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