@telus-uds/components-base 1.81.0 → 1.82.0

package/lib/ProductCardGroup/ProductCardGroup.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _ProductCard = _interopRequireDefault(require("../ProductCard"));
+var _StackView = require("../StackView");
+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); }
+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; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const ProductCardGroup = _ref => {
+  let {
+    productCards,
+    maxSelection = 1,
+    ...rest
+  } = _ref;
+  const [selectedCardIds, setSelectedCardIds] = (0, _react.useState)([]);
+  const handleSelect = id => {
+    const isAlreadySelected = selectedCardIds.includes(id);
+    let updatedSelectedCardIds;
+    if (isAlreadySelected) {
+      updatedSelectedCardIds = selectedCardIds.filter(cardId => cardId !== id);
+    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
+      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id);
+    } else {
+      updatedSelectedCardIds = [...selectedCardIds, id];
+    }
+    setSelectedCardIds(updatedSelectedCardIds);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: {
+        xs: 'column',
+        lg: 'row'
+      },
+      space: 4,
+      children: productCards.map((cardProperties, index) => {
+        const cardId = cardProperties.id || index;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.default, {
+            cardId: cardId,
+            isSelected: selectedCardIds.includes(cardId),
+            onSelect: handleSelect,
+            ...cardProperties
+          }, cardId)
+        }, cardId);
+      })
+    })
+  });
+};
+ProductCardGroup.displayName = 'ProductCardGroup';
+ProductCardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The maximum number of ProductCards a user may select at once. Defaults to 1.
+   * To have no limit and allow any number of selections, pass `null`.
+   */
+  maxSelection: _propTypes.default.number,
+  /**
+   * Props to be passed to the `ProductCard` component.
+   * id is required for each card.
+   * You may also pass in a custom dictionary object.
+   */
+  productCards: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    image: _propTypes.default.object,
+    dictionary: _propTypes.default.object
+  })).isRequired
+};
+var _default = ProductCardGroup;
+exports.default = _default;

package/lib/ProductCardGroup/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _ProductCardGroup.default;
+exports.default = _default;

package/lib/index.js

@@ -37,6 +37,8 @@ var _exportNames = {
   OrderedList: true,
   Pagination: true,
   PriceLockup: true,
+  ProductCard: true,
+  ProductCardGroup: true,
   Progress: true,
   QuickLinks: true,
   QuickLinksFeature: true,
@@ -292,6 +294,18 @@ Object.defineProperty(exports, "PriceLockup", {
     return _PriceLockup.default;
   }
 });
+Object.defineProperty(exports, "ProductCard", {
+  enumerable: true,
+  get: function () {
+    return _ProductCard.default;
+  }
+});
+Object.defineProperty(exports, "ProductCardGroup", {
+  enumerable: true,
+  get: function () {
+    return _ProductCardGroup.default;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -600,6 +614,8 @@ var _Notification = _interopRequireDefault(require("./Notification"));
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
+var _ProductCard = _interopRequireDefault(require("./ProductCard"));
+var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
 var _Progress = _interopRequireDefault(require("./Progress"));
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
 var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));

package/lib-module/Autocomplete/Autocomplete.js

@@ -239,6 +239,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
     if (nested) setNestedSelectedValue(newValue);
+    inputRef.current.focus();
   };
 
   /**
@@ -268,7 +269,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+      event.preventDefault();
       targetRef.current.focus();
     }
   };

package/lib-module/Icon/Icon.js

@@ -22,6 +22,25 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
     size: size,
     color: themeTokens.color
   });
+  const paddingStyles = variant !== null && variant !== void 0 && variant.padding ? {
+    padding: themeTokens.width,
+    width: themeTokens.size + themeTokens.width * 2,
+    // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
+    height: themeTokens.size + themeTokens.width * 2
+  } : {};
+  const getIconContentForMobile = () => {
+    if (Object.keys(paddingStyles).length) {
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
+        },
+        children: iconContent
+      });
+    }
+    return iconContent;
+  };
   return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
@@ -31,11 +50,14 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
       transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
-      ...style
+      ...style,
+      backgroundColor: themeTokens.backgroundColor,
+      borderRadius: themeTokens.borderRadius,
+      ...paddingStyles
     },
     dataSet: dataSet,
     children: iconContent
-  }) : iconContent;
+  }) : getIconContentForMobile();
 });
 Icon.displayName = 'Icon';
 export const iconComponentPropTypes = {

package/lib-module/Listbox/Listbox.js

@@ -67,8 +67,14 @@ const Listbox = _ref => {
       // Return focus to the dropdown control after leaving the last item
       parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
       if (onClose) onClose(event);
+    } else if (!nextItemRef && firstItemRef) {
+      var _firstItemRef$current;
+      // If the last item is focused, move the focus to the first one
+      event.preventDefault();
+      setFocusedIndex(0);
+      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 ? void 0 : _firstItemRef$current.focus();
     }
-  }, [focusedIndex, onClose, parentRef]);
+  }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
   useEffect(() => {

package/lib-module/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
 import View from "react-native-web/dist/exports/View";
@@ -13,8 +13,10 @@ import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import useScrollBlocking from '../utils/useScrollBlocking';
 import ModalContent from './ModalContent';
+import WebModal from './WebModal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -143,12 +145,32 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
   const showCloseButton = closeButton !== null;
+
+  // These refs are used to manage focus in the web modal container
+  const focusTrapRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const handleFocus = () => {
+        // If the focus is on the last item of the web modal container, move it to the close button
+        if (document.activeElement === focusTrapRef.current) {
+          closeButtonRef.current.focus();
+        }
+        return undefined;
+      };
+
+      // Add an event listener to manage focus in the web modal container
+      document.addEventListener('focusin', handleFocus);
+
+      // Clean up the event listener
+      return () => document.removeEventListener('focusin', handleFocus);
+    }
+    return undefined;
+  }, []);
   if (!isOpen) {
     return null;
   }
-  return /*#__PURE__*/_jsx(NativeModal, {
-    transparent: true,
-    ...selectProps(rest),
+  const content = /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(ScrollView, {
       contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
@@ -166,7 +188,8 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
               onPress: handleClose,
               icon: CloseIconComponent,
               accessibilityRole: "button",
-              accessibilityLabel: closeLabel
+              accessibilityLabel: closeLabel,
+              ref: closeButtonRef
             })
           }), /*#__PURE__*/_jsx(ModalContent, {
             tokens: tokens,
@@ -198,6 +221,20 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
       })]
     })
   });
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsxs(WebModal, {
+      ...selectProps(rest),
+      children: [content, /*#__PURE__*/_jsx(View, {
+        accessibilityRole: "button",
+        ref: focusTrapRef
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(NativeModal, {
+    transparent: true,
+    ...selectProps(rest),
+    children: content
+  });
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = {

package/lib-module/Modal/WebModal.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, selectSystemProps, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+/**
+ * WebModal component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {ReactNode} props.children - The content of the modal.
+ * @returns {JSX.Element} The rendered WebModal component.
+ */
+const WebModal = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    style: staticStyles.container,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(View, {
+      style: staticStyles.content,
+      children: children
+    })
+  });
+};
+WebModal.propTypes = {
+  ...selectedSystemPropTypes,
+  // children to be rendered within the modal
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    textDecoration: 'none',
+    zIndex: 1
+  },
+  content: {
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0
+  }
+});
+export default WebModal;

package/lib-module/PriceLockup/PriceLockup.js

@@ -112,7 +112,6 @@ const PriceLockup = _ref7 => {
     bottomTextMarginTop,
     priceMarginBottom,
     bottomLinksMarginLeft,
-    topTextMarginBottom,
     fontColor,
     dividerColor,
     ...themeTokens
@@ -134,6 +133,7 @@ const PriceLockup = _ref7 => {
       ...selectProps(rest)
     }],
     children: [topText ? /*#__PURE__*/_jsx(View, {
+      style: staticStyles.topText,
       children: renderTypography(topText, topTextTypographyTokens)
     }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
@@ -210,5 +210,8 @@ export default PriceLockup;
 const staticStyles = StyleSheet.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'
+  },
+  topText: {
+    marginBottom: 4
   }
 });

package/lib-module/PriceLockup/utils/renderFootnoteContent.js

@@ -44,13 +44,13 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
           bottomTextMarginTop
         }),
         children: [renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
-      }), footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+      }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
         style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib-module/PriceLockup/utils/renderFootnoteLinks.js

@@ -11,7 +11,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
   } = _ref;
   // This is used to apply the proper line height when there is 4 or more footnote links
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
-  const lineHeight = footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  const lineHeight = (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -20,7 +20,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote

package/lib-module/PriceLockup/utils/renderPrice.js

@@ -68,13 +68,13 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
       }), rateText ? /*#__PURE__*/_jsx(Text, {
         style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
         children: renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)
-      }) : null, !bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
+      }) : null, !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
         style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), !bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib-module/PriceLockup/utils/renderTypography.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '../../Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
 const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
-  const customProps = ratePosition === 'bottom' ? {
+  const customProps = ratePosition === 'bottom' && value !== '$' ? {
     variant: {
       size: 'micro'
     },

package/lib-module/ProductCard/ProductCard.js

@@ -0,0 +1,231 @@
+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 Image from "react-native-web/dist/exports/Image";
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import defaultDictionary from './dictionary';
+import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps, useInputValue, useCopy, a11yProps } from '../utils';
+import Badge from '../Badge';
+import PriceLockup from '../PriceLockup';
+import Typography from '../Typography';
+import { Button } from '../Button';
+import StackView from '../StackView';
+import Box from '../Box';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
+const selectProductCardTokens = _ref => {
+  let {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  } = _ref;
+  return {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  };
+};
+const ProductCard = _ref2 => {
+  var _getCopy;
+  let {
+    copy = 'en',
+    dictionary = defaultDictionary,
+    image = {
+      src: '',
+      alt: ''
+    },
+    cardId,
+    isSelected,
+    onSelect,
+    tokens,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('ProductCard', tokens, {
+    viewport
+  });
+  const getCopy = useCopy({
+    copy,
+    dictionary
+  });
+  const {
+    currentValue,
+    setValue
+  } = useInputValue();
+  const hasClicked = isSelected || currentValue;
+  const handlePress = event => {
+    if (cardId) {
+      onSelect(cardId);
+    } else {
+      setValue(!currentValue, event);
+    }
+  };
+  const renderButton = hasClicked ? /*#__PURE__*/_jsx(Box, {
+    vertical: 1,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      direction: "row",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: themeTokens.selectedButtonIcon,
+        variant: {
+          color: 'success'
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          fontWeight: 400
+        },
+        children: getCopy('selectedButtonLabel')
+      })]
+    })
+  }) : /*#__PURE__*/_jsx(Button, {
+    onPress: handlePress,
+    variant: {
+      purpose: 'primary',
+      size: 'small',
+      width: 'full'
+    },
+    children: getCopy('buttonLabel')
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ...selectProps(rest),
+    style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
+      style: staticStyles.imageContainer,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: image.src,
+        style: staticStyles.image,
+        alt: image.alt,
+        accessibilityLabel: image.alt,
+        resizeMethod: "resize",
+        accessibilityIgnoresInvertColors: true
+      })
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: staticStyles.textContainer,
+      children: /*#__PURE__*/_jsx(Box, {
+        left: 3,
+        children: /*#__PURE__*/_jsxs(StackView, {
+          space: 1,
+          children: [getCopy('badgeText') ? /*#__PURE__*/_jsx(Badge, {
+            variant: {
+              outline: true,
+              purpose: 'editorial'
+            },
+            children: getCopy('badgeText')
+          }) : null, /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h6'
+            },
+            children: getCopy('brandName')
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h4',
+              colour: 'brand'
+            },
+            tokens: {
+              fontWeight: 400
+            },
+            children: getCopy('productName')
+          }), /*#__PURE__*/_jsxs(StackView, {
+            space: 3,
+            divider: true,
+            direction: "row",
+            children: [/*#__PURE__*/_jsx(PriceLockup, {
+              ...getCopy('primaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
+              ...getCopy('secondaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }) : null]
+          }), /*#__PURE__*/_jsx(Box, {
+            top: 2,
+            children: /*#__PURE__*/_jsxs(StackView, {
+              space: 2,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: {
+                  size: 'h6'
+                },
+                tokens: {
+                  fontWeight: 500
+                },
+                children: getCopy('term')
+              }), getCopy('buttonLabel') ? /*#__PURE__*/_jsx(Box, {
+                top: 1,
+                children: renderButton
+              }) : null]
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+ProductCard.displayName = 'ProductCard';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  badgeText: PropTypes.string,
+  brandName: PropTypes.string.isRequired,
+  productName: PropTypes.string.isRequired,
+  primaryPrice: PropTypes.object.isRequired,
+  secondaryPrice: PropTypes.object,
+  term: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  selectedButtonLabel: PropTypes.string.isRequired
+});
+ProductCard.propTypes = {
+  ...selectedSystemPropTypes,
+  image: PropTypes.shape({
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    alt: PropTypes.string
+  }),
+  /**
+   * Select English or French copy for the place holder labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  tokens: getTokensPropType('ProductCard')
+};
+export default ProductCard;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  imageContainer: {
+    width: '30%',
+    minWidth: 96,
+    maxWidth: 96
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+    height: undefined,
+    // This is to maintain the aspect ratio
+    aspectRatio: 0.8
+  },
+  textContainer: {
+    width: '70%'
+  }
+});