@telus-uds/components-web 2.25.1 → 2.27.0

package/CHANGELOG.md

@@ -1,16 +1,46 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 27 Nov 2023 21:13:27 GMT and should not be manually modified.
+This log was last generated on Wed, 13 Dec 2023 21:13:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.27.0
+
+Wed, 13 Dec 2023 21:13:56 GMT
+
+### Minor changes
+
+- fixed WebVideo youtube callback type by adding event params (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/components-base to v1.72.0
+- Bump @telus-uds/system-theme-tokens to v2.48.0
+
+### Patches
+
+- `DatePicker`: Fix stacking context and positioning issue (shahzaibkhalidmalik@outlook.com)
+- fixes the size-by-height property (guillermo.peitzner@telus.com)
+- adding colour toggle to imports (mauricio.batresmontejo@telus.com)
+
+## 2.26.0
+
+Fri, 01 Dec 2023 21:08:36 GMT
+
+### Minor changes
+
+- `Card`: Add interactive section (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.71.0
+- Bump @telus-uds/system-theme-tokens to v2.47.0
+
+### Patches
+
+- fix tokens type for Multiselect props (email not defined)
+
 ## 2.25.1
 
-Mon, 27 Nov 2023 21:13:27 GMT
+Mon, 27 Nov 2023 21:20:44 GMT
 
 ### Patches
 
-- TS defenitions for WebVideo  (srikanthkhari@gmail.com)
+- TS defenitions for WebVideo (srikanthkhari@gmail.com)
 - Bump @telus-uds/components-base to v1.70.0
 
 ## 2.25.0

package/lib/Card/Card.js

@@ -16,27 +16,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 /* eslint-disable react/require-default-props */
 
-const selectCardBaseTokens = _ref => {
-  let {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  } = _ref;
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  };
-};
-
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 
@@ -75,8 +54,11 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
-    tokens,
+    tokens = {},
     variant,
+    interactiveCard,
+    onPress,
+    dataSet,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -93,9 +75,15 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const {
+    borderRadius
+  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter);
+  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
   // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
@@ -103,30 +91,46 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = tokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Card, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: selectCardBaseTokens(cardTokens),
+    tokens: restOfTokens,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,
       tokens: columnFlex,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        ...selectProps(rest),
+        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
         direction: contentStackDirection,
         tokens: {
           ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
           tokens: tokens,
           variant: variant,
           withFooter: hasFooter,
           children: children
-        }), fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentProps
         })]
@@ -179,7 +183,20 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: _propTypes.default.shape({
+    body: _propTypes.default.node,
+    tokens: (0, _componentsBase.getTokensPropType)('Card'),
+    variant: _componentsBase.variantProp.propType
+  })
 };
 var _default = Card;
 exports.default = _default;

package/lib/DatePicker/DatePicker.js

@@ -54,6 +54,24 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -76,7 +94,7 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -97,9 +115,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
   const [inputText, setInputText] = (0, _react.useState)(date instanceof _moment.default ? date.format(dateFormat) : '');
+  const textInputRef = (0, _react.useRef)();
+  const [datePickerPosition, setDatePickerPosition] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isClickedInside, setIsClickedInside] = (0, _react.useState)(false);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -116,10 +158,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -164,7 +206,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-2"
+    componentId: "components-web__sc-mz8fi3-3"
   })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
@@ -190,10 +232,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -205,10 +247,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -220,18 +262,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -243,68 +274,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
-          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
-          keepOpenOnDateSelect: true,
+          keepOpenOnDateSelect: false,
           daySize: daySize,
-          ref: ref,
           renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
-          id: id,
-          renderNavNextButton: renderNextButton,
-          renderMonthElement: _ref6 => {
+          renderMonthElement: _ref7 => {
             let {
               month
-            } = _ref6;
+            } = _ref7;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -315,6 +311,70 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+                date: inputDate,
+                disabled: disabled,
+                onDateChange: onChange,
+                focused: isFocused,
+                onFocusChange: onFocusChange,
+                numberOfMonths: 1,
+                hideKeyboardShortcutsPanel: true,
+                keepOpenOnDateSelect: true,
+                daySize: daySize,
+                ref: ref,
+                renderNavPrevButton: renderPrevButton,
+                isOutsideRange: isDayDisabled,
+                phrases: getCopy(),
+                id: id,
+                renderNavNextButton: renderNextButton,
+                renderMonthElement: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib/OptimizeImage/OptimizeImage.js

@@ -42,7 +42,7 @@ const OptimizeImage = _ref => {
         mdSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
         lgSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
         xlSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, xl, quality)
+        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, dimension, xl, quality)
       });
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);

package/lib/OptimizeImage/utils/getFallbackUrl.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getFallbackUrl;
 var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getFallbackUrl(url, width, quality) {
+function getFallbackUrl(url, dimension, size, quality) {
   if (!(0, _isSvgUrl.default)(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib/baseExports.js

@@ -93,6 +93,12 @@ Object.defineProperty(exports, "ChevronLink", {
     return _componentsBase.ChevronLink;
   }
 });
+Object.defineProperty(exports, "ColourToggle", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ColourToggle;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {

package/lib-module/Card/Card.js

@@ -1,34 +1,14 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, variantProp, a11yProps, viewProps } from '@telus-uds/components-base';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase } from '@telus-uds/components-base';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectCardBaseTokens = _ref => {
-  let {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  } = _ref;
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  };
-};
 
 // Passes React Native-oriented system props through UDS Card
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -66,8 +46,11 @@ const Card = /*#__PURE__*/forwardRef(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
-    tokens,
+    tokens = {},
     variant,
+    interactiveCard,
+    onPress,
+    dataSet,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -84,9 +67,15 @@ const Card = /*#__PURE__*/forwardRef(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const cardTokens = useThemeTokens('Card', tokens, variant);
+  const {
+    borderRadius
+  } = useThemeTokens('Card', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = getFullBleedBorderRadius(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter);
+  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
 
   // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
@@ -94,30 +83,46 @@ const Card = /*#__PURE__*/forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = tokens;
   return /*#__PURE__*/_jsx(CardBase, {
     ref: ref,
     variant: {
       ...variant,
       padding: 'custom'
     },
-    tokens: selectCardBaseTokens(cardTokens),
+    tokens: restOfTokens,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,
       tokens: columnFlex,
-      children: [/*#__PURE__*/_jsxs(StackView, {
+      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        ...selectProps(rest),
+        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      }) : null, /*#__PURE__*/_jsxs(StackView, {
         direction: contentStackDirection,
         tokens: {
           ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
-        children: [/*#__PURE__*/_jsx(CardContent, {
+        children: [children ? /*#__PURE__*/_jsx(CardContent, {
           tokens: tokens,
           variant: variant,
           withFooter: hasFooter,
           children: children
-        }), fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
+        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentProps
         })]
@@ -170,6 +175,19 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 };
 export default Card;