@telus-uds/components-base 1.77.1 → 1.78.1

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 20 Feb 2024 23:07:37 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Feb 2024 23:55:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.78.1
+
+Wed, 28 Feb 2024 23:55:55 GMT
+
+### Patches
+
+- fix notification component icon alignment" (guillermo.peitzner@telus.com)
+- fix box component background image on mobile devices (guillermo.peitzner@telus.com)
+- fix carousel component icon background color (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.1
+
+## 1.78.0
+
+Fri, 23 Feb 2024 19:39:17 GMT
+
+### Minor changes
+
+- refactoring Card component to add media queries as an option to prevent layout shifts (hoss.agina@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.0
+
+### Patches
+
+- Onpress function reverted due to several bugs (35577399+JoshHC@users.noreply.github.com)
+- fix Link component keyboard interaction (guillermo.peitzner@telus.com)
+- prevent typography dataset property to be overruled (guillermo.peitzner@telus.com)
+- New changes of notification component merged with old changes to support the users in the migraiton to the new ones (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.77.1
 
-Tue, 20 Feb 2024 23:07:37 GMT
+Tue, 20 Feb 2024 23:14:38 GMT
 
 ### Patches
 

package/lib/Box/Box.js

@@ -92,7 +92,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: containedViewStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -101,7 +103,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib/Card/Card.js

@@ -78,7 +78,14 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -94,11 +101,28 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {

package/lib/Carousel/Carousel.js

@@ -70,6 +70,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -126,7 +134,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -157,7 +165,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
     viewport
@@ -214,7 +222,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const animatedY = _react.default.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -223,7 +231,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -231,14 +239,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = _react.default.useCallback(() => {
@@ -350,16 +358,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   _react.default.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -453,7 +461,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
         ref: firstFocusRef,
@@ -499,7 +508,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib/Link/ChevronLink.js

@@ -25,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
@@ -54,7 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib/Link/InlinePressable.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -25,30 +24,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+// eslint-disable-next-line react/prop-types
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = (0, _react.useCallback)(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = (0, _react.useCallback)(e => {
-    e.preventDefault();
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: _Platform.default.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib/Link/LinkBase.js

@@ -187,7 +187,6 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib/Notification/Notification.js

@@ -49,7 +49,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/lib/Typography/Typography.js

@@ -104,7 +104,6 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -136,15 +135,17 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -152,9 +153,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -199,7 +198,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = Typography;
 exports.default = _default;

package/lib-module/Box/Box.js

@@ -84,7 +84,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/_jsx(View, {
         style: containedViewStyle,
         children: /*#__PURE__*/_jsx(Image, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -93,7 +95,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/_jsx(ImageBackground, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib-module/Card/Card.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
@@ -71,7 +71,14 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -87,11 +94,28 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(PressableCardBase, {

package/lib-module/Carousel/Carousel.js

@@ -64,6 +64,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -120,7 +128,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -151,7 +159,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Carousel', tokens, variant, {
     viewport
@@ -208,7 +216,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const animatedY = React.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -217,7 +225,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -225,14 +233,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = React.useCallback(() => {
@@ -344,16 +352,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -447,7 +455,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
         ref: firstFocusRef,
@@ -493,7 +502,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib-module/Link/ChevronLink.js

@@ -18,7 +18,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
@@ -47,7 +46,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib-module/Link/InlinePressable.js

@@ -1,7 +1,6 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -14,32 +13,18 @@ import Platform from "react-native-web/dist/exports/Platform";
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line react/prop-types
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = useCallback(e => {
-    e.preventDefault();
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: Platform.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib-module/Link/LinkBase.js

@@ -178,7 +178,6 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib-module/Notification/Notification.js

@@ -41,7 +41,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/lib-module/Typography/Typography.js

@@ -96,7 +96,6 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -128,15 +127,17 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
@@ -144,9 +145,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -191,6 +190,10 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 };
 export default Typography;

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.51.0",
+    "@telus-uds/system-theme-tokens": "^2.52.1",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.77.1",
+  "version": "1.78.1",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -94,7 +94,7 @@ const setBackgroundImage = ({
       <View style={staticStyles.containedContainer}>
         <View style={containedViewStyle}>
           <Image
-            source={src}
+            source={{ uri: src }}
             alt={alt}
             style={staticStyles.containedImage}
             accessibilityIgnoresInvertColors
@@ -106,7 +106,7 @@ const setBackgroundImage = ({
   }
   return (
     <ImageBackground
-      source={src}
+      source={{ uri: src }}
       alt={alt}
       style={staticStyles.backgroundImageContainer}
       resizeMode={backgroundImageResizeMode}

package/src/Card/Card.jsx

@@ -2,8 +2,13 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  useThemeTokens,
+  useThemeTokensCallback,
+  useResponsiveThemeTokens,
+  useTheme
+} from '../ThemeProvider'
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
@@ -62,7 +67,19 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const Card = forwardRef(
   ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+
+    const themeTokens = useTokens(
+      'Card',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
@@ -71,12 +88,27 @@ const Card = forwardRef(
     // to individual Card sections, not Card as a whole
     const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
 
+    let cardStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+
+      const { ids, styles } = StyleSheet.create({
+        card: mediaQueryStyleSheet
+      })
+      cardStyles = styles.card
+      mediaIds = ids.card
+    } else {
+      cardStyles = themeTokens
+    }
+
     return (
       <>
         <CardBase
           ref={ref}
-          tokens={interactiveCard?.body ? restOfTokens : themeTokens}
-          dataSet={dataSet}
+          tokens={interactiveCard?.body ? restOfTokens : cardStyles}
+          dataSet={mediaIds && { media: mediaIds }}
           {...selectProps(rest)}
         >
           {interactiveCard?.body ? (

package/src/Carousel/Carousel.jsx

@@ -81,6 +81,8 @@ const selectPreviousNextNavigationButtonStyles = (
   return styles
 }
 
+const selectIconStyles = ({ iconBackgroundColor }) => ({ backgroundColor: iconBackgroundColor })
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -509,6 +511,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}
@@ -570,6 +573,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex + 2
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}

package/src/Link/ChevronLink.jsx

@@ -12,10 +12,7 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  (
-    { direction = 'right', children, tokens = {}, variant, dataSet, onPress, ...otherlinkProps },
-    ref
-  ) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -41,7 +38,6 @@ const ChevronLink = forwardRef(
         tokens={getTokens}
         dataSet={dataSet}
         ref={ref}
-        onPress={onPress}
       >
         {children}
       </LinkBase>

package/src/Link/InlinePressable.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useCallback } from 'react'
-import { Pressable, StyleSheet, Platform } from 'react-native'
+import React, { forwardRef } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -14,42 +14,20 @@ import { Pressable, StyleSheet, Platform } from 'react-native'
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
-const InlinePressable = forwardRef(
-  ({ children, inlineFlex = true, style, onPress, ...props }, ref) => {
-    const handlePress = useCallback(() => {
-      if (onPress) {
-        onPress()
-      }
-    }, [onPress])
+// eslint-disable-next-line react/prop-types
+const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
+  <Pressable
+    ref={ref}
+    style={(pressState) => [
+      typeof style === 'function' ? style(pressState) : style,
+      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
+    ]}
+    {...props}
+  >
+    {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
+  </Pressable>
+))
 
-    const handleKeyPress = useCallback(
-      (e) => {
-        e.preventDefault()
-
-        if (e.key === 'Enter' || e.key === ' ') {
-          handlePress()
-        }
-      },
-      [handlePress]
-    )
-
-    return (
-      <Pressable
-        ref={ref}
-        style={(pressState) => [
-          typeof style === 'function' ? style(pressState) : style,
-          staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
-        ]}
-        onPress={handlePress}
-        onKeyDown={Platform.OS === 'web' ? handleKeyPress : undefined}
-        {...props}
-      >
-        {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
-      </Pressable>
-    )
-  }
-)
 InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({

package/src/Link/LinkBase.jsx

@@ -162,7 +162,6 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}
-        keyboardShouldPersistTaps="handled"
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)

package/src/Notification/Notification.jsx

@@ -51,7 +51,7 @@ const selectIconProps = ({ iconSize, iconColor }) => ({
 
 const selectIconContainerStyles = ({ iconGap }) => ({
   paddingRight: iconGap,
-  placeContent: 'center'
+  placeContent: 'start'
 })
 
 const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({

package/src/Typography/Typography.jsx

@@ -124,7 +124,6 @@ const Typography = forwardRef(
 
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      dataSet,
       maxFontSizeMultiplier
     }
 
@@ -158,9 +157,11 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles} dataSet={mediaIds && { media: mediaIds }}>
+        <Text {...resolvedTextProps} style={textStyles} dataSet={dataSetValue}>
           {sanitizeChildren(children)}
         </Text>
       </View>
@@ -170,7 +171,7 @@ const Typography = forwardRef(
         {...containerProps}
         {...resolvedTextProps}
         style={textStyles}
-        dataSet={mediaIds && { media: mediaIds }}
+        dataSet={dataSetValue}
       >
         {sanitizeChildren(children)}
       </Text>
@@ -219,7 +220,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 }
 
 export default Typography