@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Button/ButtonLink.js

@@ -1,24 +1,17 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ButtonBase from './ButtonBase';
+import buttonPropTypes, { textAndA11yText } from './propTypes';
+import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
-var _props = require("../utils/props");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
- */const ButtonLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ButtonLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,
@@ -29,14 +22,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   const {
     hrefAttrs,
     rest
-  } = _props.hrefAttrsProp.bundle(props);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = hrefAttrsProp.bundle(props);
+  const viewport = useViewport();
   const buttonVariant = {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
+  return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -47,12 +40,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 ButtonLink.displayName = 'ButtonLink';
 ButtonLink.propTypes = {
-  ..._props.a11yProps.types,
-  ..._propTypes2.default,
-  ..._props.linkProps.types,
-  children: _propTypes2.textAndA11yText,
-  dataSet: _propTypes.default.object,
-  accessibilityRole: _propTypes.default.string
+  ...a11yProps.types,
+  ...buttonPropTypes,
+  ...linkProps.types,
+  children: textAndA11yText,
+  dataSet: PropTypes.object,
+  accessibilityRole: PropTypes.string
 };
-var _default = ButtonLink;
-exports.default = _default;
+export default ButtonLink;

package/lib/Button/index.js

@@ -1,34 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.default;
-  }
-});
-Object.defineProperty(exports, "ButtonDropdown", {
-  enumerable: true,
-  get: function () {
-    return _ButtonDropdown.default;
-  }
-});
-Object.defineProperty(exports, "ButtonGroup", {
-  enumerable: true,
-  get: function () {
-    return _ButtonGroup.default;
-  }
-});
-Object.defineProperty(exports, "ButtonLink", {
-  enumerable: true,
-  get: function () {
-    return _ButtonLink.default;
-  }
-});
-var _Button = _interopRequireDefault(require("./Button"));
-var _ButtonLink = _interopRequireDefault(require("./ButtonLink"));
-var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
-var _ButtonDropdown = _interopRequireDefault(require("./ButtonDropdown"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import Button from './Button';
+import ButtonLink from './ButtonLink';
+import ButtonGroup from './ButtonGroup';
+import ButtonDropdown from './ButtonDropdown';
+export { Button, ButtonDropdown, ButtonGroup, ButtonLink };

package/lib/Button/propTypes.js

@@ -1,28 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.textAndA11yText = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _props = require("../utils/props");
-var _A11yText = _interopRequireDefault(require("../A11yText"));
-var _Icon = require("../Icon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
-exports.textAndA11yText = textAndA11yText;
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import { variantProp, getTokensPropType } from '../utils/props';
+import A11yText from '../A11yText';
+import { iconComponentPropTypes } from '../Icon';
+export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
 const buttonPropTypes = {
-  tokens: (0, _props.getTokensPropType)('Button'),
+  tokens: getTokensPropType('Button'),
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * Alias for `inactive`
    */
-  disabled: _propTypes.default.bool,
+  disabled: PropTypes.bool,
   /**
    * Button's children must be either:
    *  - One or more text strings and / or A11yText components
@@ -31,25 +23,24 @@ const buttonPropTypes = {
    * { hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }
    * ```
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.func, textAndA11yText]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, textAndA11yText]).isRequired,
   /**
    * Function called when the button is pressed. Required unless the button has a href.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
-  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  iconProps: PropTypes.exact(iconComponentPropTypes),
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   /**
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: _propTypes.default.func,
-  variant: _props.variantProp.propType
+  icon: PropTypes.func,
+  variant: variantProp.propType
 };
-var _default = buttonPropTypes;
-exports.default = _default;
+export default buttonPropTypes;

package/lib/Card/Card.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _props = require("../utils/props");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
-var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
-var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
-var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props';
+import CardBase from './CardBase';
+import PressableCardBase from './PressableCardBase';
+import CheckboxButton from '../Checkbox/CheckboxButton';
+import RadioButton from '../Radio/RadioButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps]);
 const SelectionType = {
   Checkbox: 'checkbox',
   Radio: 'radiogroup',
@@ -107,7 +100,7 @@ const getInputProps = _ref2 => {
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
@@ -120,21 +113,21 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     backgroundImage,
     ...rest
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   const {
     enableMediaQueryStyleSheet
   } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
   const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  const selected = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
-  const inactive = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
+  const selected = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
+  const inactive = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
   const selectionType = interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.selectionType;
-  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
     interactive: true,
     ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
   });
@@ -188,11 +181,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = StyleSheet.create({
       card: mediaQueryStyleSheet
     });
     cardStyles = styles.card;
@@ -203,9 +196,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const renderInputPerSelectionType = props => {
     switch (selectionType) {
       case SelectionType.Checkbox:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        return /*#__PURE__*/_jsx(View, {
           style: selectInputStyle(getThemeTokens()),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+          children: /*#__PURE__*/_jsx(CheckboxButton, {
             ...props,
             tokens: {
               ...checkboxTokens,
@@ -214,9 +207,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           })
         });
       case SelectionType.Radio:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        return /*#__PURE__*/_jsx(View, {
           style: selectInputStyle(getThemeTokens()),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+          children: /*#__PURE__*/_jsx(RadioButton, {
             ...props,
             tokens: {
               ...radioTokens,
@@ -228,7 +221,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         return null;
     }
   };
-  const renderNoSelectionView = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
     style: {
       paddingTop,
       paddingBottom,
@@ -237,8 +230,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     },
     children: children
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
       tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
@@ -246,8 +239,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         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, {
+      children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(PressableCardBase, {
           ref: ref,
           tokens: getThemeTokens,
           dataSet: dataSet,
@@ -264,7 +257,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               interactive: true,
               isControl: true
             }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            return /*#__PURE__*/_jsxs(_Fragment, {
               children: [renderInputPerSelectionType(getInputProps({
                 id,
                 checkColor,
@@ -288,24 +281,24 @@ Card.propTypes = {
   /**
    * Card content.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Card tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Card'),
+  tokens: getTokensPropType('Card'),
   /**
    * Card variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Function to call on pressing the card.
    * Note: This is only available when `interactiveCard` prop is used.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Card ID.
    */
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   /**
    * Object to set interactive card's properties
    * - body: The body of the interactive card, can be any renderable node
@@ -315,22 +308,21 @@ Card.propTypes = {
         - `checkbox`
    * - variant: The variant to be used for the interactive card
    */
-  interactiveCard: _propTypes.default.shape({
-    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-    tokens: (0, _utils.getTokensPropType)('Card'),
-    selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
-    variant: _utils.variantProp.propType
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
+    variant: variantProp.propType
   }),
   /**
    * Apply background image to the card.
    */
-  backgroundImage: _propTypes.default.shape({
+  backgroundImage: PropTypes.shape({
     // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
     // src is an object when used responsively to provide different image sources for different screen sizes
-    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
-    alt: _propTypes.default.string,
-    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
-var _default = Card;
-exports.default = _default;
+export default Card;

package/lib/Card/CardBase.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _props = require("../utils/props");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { applyShadowToken } from '../ThemeProvider';
+import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
+import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 // Ensure explicit selection of tokens
 const selectStyles = _ref => {
@@ -45,14 +38,14 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
-    ...(gradient && _Platform.default.OS === 'web' ? {
+    ...applyShadowToken(shadow),
+    ...(gradient && Platform.OS === 'web' ? {
       backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
     } : {}),
-    ...(backgroundGradient && _Platform.default.OS === 'web' ? {
+    ...(backgroundGradient && Platform.OS === 'web' ? {
       backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
@@ -62,7 +55,7 @@ const selectStyles = _ref => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -77,14 +70,14 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     alt = '',
     resizeMode = ''
   } = backgroundImage || {};
-  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
+  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    children: src ? /*#__PURE__*/_jsx(ImageBackground, {
       alt: alt,
       source: imageSourceViewport,
       imageStyle: {
@@ -97,7 +90,7 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   imageBackground: {
     width: '100%',
     height: '100%'
@@ -105,18 +98,17 @@ const styles = _StyleSheet.default.create({
 });
 CardBase.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Card'),
+  children: PropTypes.node,
+  tokens: getTokensPropType('Card'),
   /**
    * Apply background image to the card.
    */
-  backgroundImage: _propTypes.default.shape({
+  backgroundImage: PropTypes.shape({
     // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
     // src is an object when used responsively to provide different image sources for different screen sizes
-    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
-    alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
-var _default = CardBase;
-exports.default = _default;
+export default CardBase;

package/lib/Card/PressableCardBase.js

@@ -1,33 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectPressableCardTokens = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useViewport } from '../ViewportProvider';
+import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
+import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import CardBase from './CardBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
-const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
+export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
 
 /**
  * A pressable themeless base component that handles pressable states and passes tokens
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -43,19 +35,19 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = clickProps.toPressProps(rawRest);
+  const viewport = useViewport();
   const additionalState = {
     checked,
     validation,
     inactive,
     viewport
   };
-  const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
-  const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
+  const getCardState = pressableState => resolvePressableState(pressableState, additionalState);
+  const getTokens = pressableState => validateThemeTokens(resolvePressableTokens(tokens, pressableState, additionalState), getTokensSetPropType(tokenKeys, {
     requireAll: true
   }), 'PressableCard');
-  const getCardTokens = pressableState => (0, _utils.selectTokens)('Card', getTokens(pressableState));
+  const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
   const getOuterBorderStyle = pressableState => {
     const {
       flex,
@@ -68,20 +60,20 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     return {
       flex,
       minWidth: minWidth + outerBorderGap + outerBorderWidth,
-      ...(0, _ThemeProvider.applyOuterBorder)({
+      ...applyOuterBorder({
         outerBorderColor,
         outerBorderGap,
         outerBorderWidth,
         borderRadius
       }),
-      ..._Platform.default.select({
+      ...Platform.select({
         web: {
           outline: 'none'
         }
       })
     };
   };
-  const handleChange = _utils.linkProps.handleHref({
+  const handleChange = linkProps.handleHref({
     href,
     onPress
   });
@@ -89,7 +81,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     // The expected keyboard shortcut for selecting a focused item is the Space key
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
     onPress: handleChange,
@@ -101,7 +93,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       ...rest,
       accessibilityRole
     }),
-    children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    children: pressableState => /*#__PURE__*/_jsx(CardBase, {
       tokens: getCardTokens(pressableState),
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
@@ -110,12 +102,11 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  tokens: getTokensSetPropType(tokenKeys, {
     partial: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = (0, _utils.withLinkRouter)(PressableCardBase);
-exports.default = _default;
+export default withLinkRouter(PressableCardBase);