jfs-components 0.1.17 → 0.1.19

package/lib/commonjs/utils/GlassFill/GlassFill.js

@@ -7,10 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _blur = require("@react-native-community/blur");
-var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DEFAULT_FALLBACK_DARK = '#1414174a';
 const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
@@ -20,32 +18,30 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
 const NATIVE_BLUR_NAME = _reactNative.Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
 
 /**
- * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
- * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
- * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
- * EASE in, so the blur swells smoothly toward the bottom instead of appearing
- * along a hard horizontal seam. That soft S-curve is what gives the surface its
- * "glass" feel rather than a flat translucent panel.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 
 /**
- * A single layer of the progressive ramp.
- *  - `stops` describe how this layer is revealed from top to bottom.
- *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * We stack just TWO layers on both platforms: a faint base blur that covers
- * most of the footer and a slightly stronger accent concentrated near the
- * bottom. Keeping the overlap shallow avoids compounding the dark tint of
- * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
- * heavy block), while still giving a genuine variable-radius result — the blur
- * radius grows toward the bottom where the two layers overlap.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
 
-// Base reveal: a faint trace of blur begins near the very top and grows
-// steadily downward, so the upper half still carries visible glass rather than
-// snapping clear. Also reused for the no-native-blur fallback scrim.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS = [{
   offset: 0.0,
   opacity: 0
@@ -62,26 +58,26 @@ const BASE_MASK_STOPS = [{
   offset: 1.0,
   opacity: 1
 }];
-const PROGRESSIVE_LAYERS = [{
-  amount: 0.65,
-  stops: BASE_MASK_STOPS
-},
-// Accent: the strongest blur, gathering over the lower portion for depth.
-{
-  amount: 1.0,
-  stops: [{
-    offset: 0.0,
-    opacity: 0
-  }, {
-    offset: 0.3,
-    opacity: 0.15
-  }, {
-    offset: 0.65,
-    opacity: 0.65
-  }, {
-    offset: 1.0,
-    opacity: 1
-  }]
+
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS = [{
+  start: 0.0,
+  amount: 0.18
+}, {
+  start: 0.3,
+  amount: 0.28
+}, {
+  start: 0.52,
+  amount: 0.38
+}, {
+  start: 0.7,
+  amount: 0.5
+}, {
+  start: 0.84,
+  amount: 0.6
 }];
 
 /**
@@ -114,13 +110,14 @@ const NATIVE_BLUR_SUPPORTED = (() => {
 })();
 
 /**
- * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
- * reveals its child in proportion to this mask's alpha, so feeding it an eased
- * multi-stop gradient makes the layer's blur swell in smoothly from top to
- * bottom instead of along a hard seam.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({
+function GradientScrim({
   id,
+  color,
   stops
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
@@ -135,7 +132,7 @@ function GradientMask({
         y2: "1",
         children: stops.map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
           offset: s.offset,
-          stopColor: "#000000",
+          stopColor: color,
           stopOpacity: s.opacity
         }, i))
       })
@@ -200,38 +197,37 @@ function GlassFill({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [_reactNative.StyleSheet.absoluteFill, style],
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
-            id: `${maskId}-fb`,
-            stops: BASE_MASK_STOPS
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [_reactNative.StyleSheet.absoluteFill, {
-              backgroundColor: fallbackColor
-            }]
-          })
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientScrim, {
+          id: `${maskId}-fb`,
+          color: fallbackColor,
+          stops: BASE_MASK_STOPS
         })
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, style],
       pointerEvents: "none",
-      children: PROGRESSIVE_LAYERS.map((layer, i) => {
-        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
-            id: `${maskId}-${i}`,
-            stops: layer.stops
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
-            style: _reactNative.StyleSheet.absoluteFill,
-            blurType: blurType,
-            blurAmount: amount,
-            reducedTransparencyFallbackColor: fallbackColor
-          })
-        }, i);
+      children: PROGRESSIVE_BANDS.map((band, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * band.amount));
+        return (
+          /*#__PURE__*/
+          // Each band is clipped to start at `band.start` and run to
+          // the bottom; its `BlurView` blurs the content (and any
+          // lower bands) behind it, so the radius compounds downward.
+          (0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [_reactNative.StyleSheet.absoluteFill, {
+              top: `${band.start * 100}%`,
+              overflow: 'hidden'
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+              style: _reactNative.StyleSheet.absoluteFill,
+              blurType: blurType,
+              blurAmount: amount,
+              reducedTransparencyFallbackColor: fallbackColor
+            })
+          }, i)
+        );
       })
     });
   }

package/lib/module/components/AvatarGroup/AvatarGroup.js

@@ -1,18 +1,21 @@
 "use strict";
 
-import React from 'react';
+import React, { useId } from 'react';
 import { View, Platform } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Path } from 'react-native-svg';
+import Svg, { Defs, Mask, Path, ForeignObject } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AvatarGroup({
   modes = EMPTY_MODES,
   children,
   style,
   ...rest
 }) {
+  // Stable, collision-free base for the per-avatar SVG mask ids so multiple
+  // groups on one screen (and multiple avatars in a group) never clash.
+  const rawId = useId();
+  const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
   const gap = getVariableByName('avatarGroup/gap', modes);
   const avatarSize = getVariableByName('avatar/size', modes);
   const avatarRadius = getVariableByName('avatar/radius', modes);
@@ -41,7 +44,11 @@ function AvatarGroup({
     y: r
   };
 
-  // Native Mask Path
+  // Native mask path: the full avatar square MINUS a circular hole where the
+  // next (overlapping) avatar sits. Drawn as a single `evenodd` path so the
+  // hole is cut out of the square. Filled WHITE because react-native-svg's
+  // `<Mask>` is a *luminance* mask (white = visible, black/absent = hidden) —
+  // the inverse of the old `@react-native-masked-view` alpha convention.
   const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
   const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
   const maskPath = `${rectPath} ${circlePath}`;
@@ -99,25 +106,40 @@ function AvatarGroup({
         }, index);
       }
 
-      // Native MaskedView
+      // Native: mask the avatar with react-native-svg instead of the
+      // unmaintained `@react-native-masked-view/masked-view`, whose
+      // legacy `requireNativeComponent('RNCMaskedView')` resolves to a
+      // plain object (crashing "Element type is invalid") under the New
+      // Architecture interop. react-native-svg ships a Fabric/codegen
+      // `<Mask>` + `<ForeignObject>` that resolves on both architectures;
+      // the avatar is hosted inside the `<ForeignObject>` and revealed
+      // through the luminance mask.
+      const maskId = `${maskBaseId}-${index}`;
       return /*#__PURE__*/_jsx(View, {
         style: wrapperStyle,
-        children: /*#__PURE__*/_jsx(MaskedView, {
-          style: {
-            flex: 1,
-            height: '100%'
-          },
-          maskElement: /*#__PURE__*/_jsx(Svg, {
-            height: "100%",
-            width: "100%",
-            viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
-            children: /*#__PURE__*/_jsx(Path, {
-              d: maskPath,
-              fill: "black",
-              fillRule: "evenodd"
+        children: /*#__PURE__*/_jsxs(Svg, {
+          height: "100%",
+          width: "100%",
+          viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
+          children: [/*#__PURE__*/_jsx(Defs, {
+            children: /*#__PURE__*/_jsx(Mask, {
+              id: maskId,
+              maskUnits: "userSpaceOnUse",
+              maskContentUnits: "userSpaceOnUse",
+              children: /*#__PURE__*/_jsx(Path, {
+                d: maskPath,
+                fill: "white",
+                fillRule: "evenodd"
+              })
             })
-          }),
-          children: clonedChild
+          }), /*#__PURE__*/_jsx(ForeignObject, {
+            x: "0",
+            y: "0",
+            width: avatarSizeInt,
+            height: avatarSizeInt,
+            mask: `url(#${maskId})`,
+            children: clonedChild
+          })]
         })
       }, index);
     })

package/lib/module/components/Card/Card.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
@@ -32,7 +32,10 @@ export function Card({
   children,
   modes = EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Resolve Card Container Tokens
   const backgroundColor = getVariableByName('card/background/color', modes);
@@ -96,22 +99,36 @@ export function Card({
     paddingHorizontal: contentPaddingHorizontal,
     paddingVertical: contentPaddingVertical
   };
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header && /*#__PURE__*/_jsx(View, {
+      style: headerWrapperStyle,
+      children: headerWithModes
+    }), media && /*#__PURE__*/_jsx(View, {
+      style: mediaWrapperStyle,
+      children: mediaWithModes
+    }), /*#__PURE__*/_jsx(View, {
+      style: contentWrapperStyle,
+      children: children
+    })]
+  });
   return /*#__PURE__*/_jsx(CardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsxs(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
-      children: [header && /*#__PURE__*/_jsx(View, {
-        style: headerWrapperStyle,
-        children: headerWithModes
-      }), media && /*#__PURE__*/_jsx(View, {
-        style: mediaWrapperStyle,
-        children: mediaWithModes
-      }), /*#__PURE__*/_jsx(View, {
-        style: contentWrapperStyle,
-        children: children
-      })]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,10 @@ const CardFeedbackContext = /*#__PURE__*/createContext({});
 export function CardFeedback({
   children,
   modes: propModes,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const modes = {
     'Appearance.System': 'positive',
@@ -46,8 +49,19 @@ export function CardFeedback({
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsx(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

package/lib/module/components/CardInsight/CardInsight.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Badge from '../Badge/Badge';
 import Divider from '../Divider/Divider';
 import Nudge from '../Nudge/Nudge';
 import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * `CardInsight` renders a single insight card composed of:
  *
@@ -28,7 +28,10 @@ function CardInsight({
   footer,
   divider,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
   const radius = getVariableByName('cardInsight/radius', modes) ?? 12;
@@ -101,18 +104,18 @@ function CardInsight({
   };
   const footerNode = renderFooter();
   const showDivider = footerNode !== null && divider !== false && divider !== null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      backgroundColor: background,
-      borderRadius: radius,
-      borderWidth,
-      borderColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      overflow: 'hidden',
-      alignItems: 'stretch'
-    }, style],
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth,
+    borderColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    overflow: 'hidden',
+    alignItems: 'stretch'
+  };
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
@@ -160,5 +163,23 @@ function CardInsight({
       children: renderSlot()
     }), showDivider ? renderDivider() : null, footerNode]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default CardInsight;

package/lib/module/components/CardProviderInfo/CardProviderInfo.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View } from 'react-native';
+import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import ProductLabel from '../ProductLabel/ProductLabel';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
  * 2-column grid of children (typically StatItem instances).
@@ -18,7 +18,10 @@ function CardProviderInfo({
   imageSource,
   children,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5';
   const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5';
@@ -43,8 +46,7 @@ function CardProviderInfo({
   for (let i = 0; i < childArray.length; i += 2) {
     rows.push(childArray.slice(i, i + 2));
   }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ProductLabel, {
       label: label,
       imageSource: imageSource,
@@ -67,5 +69,23 @@ function CardProviderInfo({
       }, i))
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default CardProviderInfo;

package/lib/module/components/DebitCard/DebitCard.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
 function DebitCard({
   cardholderName = 'Shruti Shukla',
@@ -17,7 +17,10 @@ function DebitCard({
   bankLogoSlot,
   providerLogoSlot,
   modes: propModes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const {
     modes: globalModes
@@ -116,8 +119,7 @@ function DebitCard({
     };
     return cardArtSource;
   }, [cardArtSource]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: headerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -157,5 +159,23 @@ function DebitCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default DebitCard;