@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Card/Card.js

@@ -1,33 +1,57 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _props = require("../utils/props");
-
-var _CardBase = _interopRequireDefault(require("./CardBase"));
-
-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; }
+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',
+  None: undefined
+};
+const selectInputStyle = _ref => {
+  let {
+    paddingTop,
+    paddingRight
+  } = _ref;
+  return {
+    position: 'absolute',
+    top: paddingTop,
+    right: paddingRight
+  };
+};
+const getInputProps = _ref2 => {
+  let {
+    id,
+    checkColor,
+    boxBackgroundColor,
+    checkBackgroundColor,
+    isControlled,
+    isChecked,
+    isInactive,
+    handleChange
+  } = _ref2;
+  return {
+    inputId: id,
+    tokens: {
+      iconColor: checkColor,
+      inputBackgroundColor: boxBackgroundColor,
+      iconBackgroundColor: checkBackgroundColor
+    },
+    isControlled,
+    isChecked,
+    inactive: isInactive,
+    handleChange
+  };
+};
 
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
 /**
  * A basic card component, unstyled by default.
  *
@@ -76,32 +100,229 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-
-const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
     tokens,
     variant,
     dataSet,
+    onPress,
+    id,
+    interactiveCard,
+    backgroundImage,
     ...rest
-  } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Card', tokens, variant, {
+  } = _ref3;
+  const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
-    ref: ref,
-    tokens: themeTokens,
-    dataSet: dataSet,
-    ...selectProps(rest),
+  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 = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
+  // 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
+  } = selectionType ? getThemeTokens() : themeTokens;
+  const {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    iconColor,
+    icon,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  } = getThemeTokens();
+  const checkboxTokens = {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    icon,
+    iconColor,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  const radioTokens = {
+    iconBackgroundColor,
+    iconColor,
+    containerShadow: inputShadow,
+    icon,
+    inputBackgroundColor,
+    inputBorderRadius,
+    inputSize: inputHeight,
+    checkedSize: iconSize,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  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;
+  }
+  const renderInputPerSelectionType = props => {
+    switch (selectionType) {
+      case SelectionType.Checkbox:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(CheckboxButton, {
+            ...props,
+            tokens: {
+              ...checkboxTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      case SelectionType.Radio:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(RadioButton, {
+            ...props,
+            tokens: {
+              ...radioTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
+    style: {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    },
     children: children
   });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(CardBase, {
+      ref: ref,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      backgroundImage: backgroundImage,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
+      ...selectProps(rest),
+      children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(PressableCardBase, {
+          ref: ref,
+          tokens: getThemeTokens,
+          dataSet: dataSet,
+          onPress: onPress,
+          ...selectProps(rest),
+          children: cardState => {
+            const {
+              iconColor: checkColor,
+              inputBackgroundColor: boxBackgroundColor,
+              iconBackgroundColor: checkBackgroundColor
+            } = getThemeTokens({
+              ...cardState,
+              selected,
+              interactive: true,
+              isControl: true
+            }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [renderInputPerSelectionType(getInputProps({
+                id,
+                checkColor,
+                boxBackgroundColor,
+                checkBackgroundColor,
+                isControlled: true,
+                isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
+                isInactive: inactive,
+                onPress
+              })), typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+            });
+          }
+        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
+      }) : children
+    })
+  });
 });
 Card.displayName = 'Card';
-Card.propTypes = { ...selectedSystemPropTypes,
-  children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Card'),
-  variant: _utils.variantProp.propType
+Card.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
+  children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
+  tokens: getTokensPropType('Card'),
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactiveCard` prop is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Card ID.
+   */
+  id: PropTypes.string,
+  /**
+   * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
+        - `radiogroup`
+        - `checkbox`
+   * - variant: The variant to be used for the interactive card
+   */
+  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.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.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,32 +1,16 @@
-"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 _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 }; }
-
-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, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]); // Ensure explicit selection of tokens
+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 => {
   let {
     flex,
@@ -39,7 +23,9 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    shadow
+    shadow,
+    backgroundGradient,
+    gradient
   } = _ref;
   return {
     flex,
@@ -52,36 +38,77 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...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.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+    } : {})
   };
 };
+
 /**
  * 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__*/(0, _react.forwardRef)((_ref2, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
     dataSet,
+    backgroundImage,
     ...rest
   } = _ref2;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const {
+    src = '',
+    alt = '',
+    resizeMode = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
+  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: children
+    children: src ? /*#__PURE__*/_jsx(ImageBackground, {
+      alt: alt,
+      source: imageSourceViewport,
+      imageStyle: {
+        borderRadius: (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderRadius) - (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderWidth)
+      },
+      resizeMode: backgroundImageResizeMode,
+      style: styles.imageBackground,
+      children: children
+    }) : children
   });
 });
 CardBase.displayName = 'CardBase';
-CardBase.propTypes = { ...selectedSystemPropTypes,
-  children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Card')
+const styles = StyleSheet.create({
+  imageBackground: {
+    width: '100%',
+    height: '100%'
+  }
+});
+CardBase.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Card'),
+  /**
+   * Apply background image to the card.
+   */
+  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.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,49 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectPressableCardTokens = exports.default = void 0;
-
-var _react = _interopRequireWildcard(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 }; }
-
-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.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const tokenKeys = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
+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'];
+export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
 
-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__*/(0, _react.forwardRef)((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -52,31 +28,26 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive,
     href,
     hrefAttrs,
+    dataSet,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _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,
@@ -89,56 +60,53 @@ const PressableCardBase = /*#__PURE__*/(0, _react.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
   });
-
   const handleKeyDown = event => {
     // 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,
     onKeyDown: handleKeyDown,
     hrefAttrs: hrefAttrs,
     style: getOuterBorderStyle,
-    ...selectProps({ ...rest,
+    dataSet: dataSet,
+    ...selectProps({
+      ...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
     })
   });
 });
 PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = { ...selectedSystemPropTypes,
-  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
-    requireAll: true,
+PressableCardBase.propTypes = {
+  ...selectedSystemPropTypes,
+  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);