jfs-components 0.0.47 → 0.0.49

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CardCTA({
+  title = 'If you have 1 line',
+  body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
+  iconName = 'ic_upi_number',
+  buttonLabel = 'Button',
+  onPressButton,
+  modes: propModes = {},
+  iconSlot,
+  buttonSlot,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes) || '#e3e4e4';
+  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes) || 16;
+  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes) || 22;
+  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes) || 16;
+  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes) || 16;
+  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes) || 22;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes) || 6;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 10;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth: borderSize,
+    borderColor,
+    flexDirection: 'row',
+    overflow: 'hidden'
+  };
+  const leftWrapStyle = {
+    flex: 3,
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'center'
+  };
+  const rightWrapStyle = {
+    flex: 2,
+    paddingHorizontal: rightPaddingH,
+    paddingVertical: rightPaddingV,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-start'
+  };
+  const textWrapStyle = {
+    gap: textGap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontFamily: bodyFontFamily,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontWeight: bodyFontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: leftWrapStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: textWrapStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: titleStyle,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: bodyStyle,
+          children: body
+        })]
+      }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, {
+        ...modes,
+        AppearanceBrand: 'Secondary',
+        'Button / Size': 'S'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        label: buttonLabel,
+        onPress: onPressButton || (() => {}),
+        modes: {
+          ...modes,
+          AppearanceBrand: 'Secondary',
+          'Button / Size': 'S'
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: rightWrapStyle,
+      children: iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, {
+        ...modes,
+        'IconCapsule / Size': 'M',
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: iconName,
+        modes: {
+          ...modes,
+          'IconCapsule / Size': 'M',
+          Emphasis: 'Medium',
+          AppearanceBrand: 'Secondary'
+        }
+      })
+    })]
+  });
+}
+var _default = exports.default = CardCTA;

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
+function DebitCard({
+  cardholderName = 'Shruti Shukla',
+  cardNumber = '•••• 1234',
+  expireDate = '02/28',
+  bankName = 'JioFinance',
+  cardType = 'Debit',
+  cardArtSource = defaultCardArt,
+  bankLogoSlot,
+  providerLogoSlot,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = (0, _figmaVariablesResolver.getVariableByName)('debitCard/background', modes) || '#cea15a';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/radius', modes) || 16;
+  const width = (0, _figmaVariablesResolver.getVariableByName)('debitCard/width', modes) || 328;
+  const height = (0, _figmaVariablesResolver.getVariableByName)('debitCard/height', modes) || 224;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/padding/bottom', modes) || 24;
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/horizontal', modes) || 20;
+  const headerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/top', modes) || 16;
+  const headerPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/bottom', modes) || 28;
+  const cardArtHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/height', modes) || 50;
+  const cardArtRadius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/radius', modes) || 4;
+  const footerGap = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/gap', modes) || 16;
+  const footerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/horizontal', modes) || 20;
+  const footerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/top', modes) || 16;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('debitCard/foreground', modes) || '#141414';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontSize', modes) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontFamily', modes) || 'JioType Var';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/lineHeight', modes) || 17;
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontWeight', modes) || 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    width,
+    height,
+    paddingBottom,
+    overflow: 'hidden'
+  };
+  const headerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: headerPaddingH,
+    paddingTop: headerPaddingTop,
+    paddingBottom: headerPaddingBottom,
+    overflow: 'hidden'
+  };
+  const headerLeftStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  };
+  const headerRightStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  };
+  const headerTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight: fontSize * 1.2
+  };
+  const cardArtContainerStyle = {
+    height: cardArtHeight,
+    width: '100%',
+    borderRadius: cardArtRadius,
+    overflow: 'hidden'
+  };
+  const cardArtImageStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: cardArtRadius
+  };
+  const footerStyle = {
+    flex: 1,
+    gap: footerGap,
+    paddingHorizontal: footerPaddingH,
+    paddingTop: footerPaddingTop,
+    overflow: 'hidden'
+  };
+  const textStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight
+  };
+  const stackStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  };
+  const normalizedCardArt = _react.default.useMemo(() => {
+    if (!cardArtSource) return null;
+    if (typeof cardArtSource === 'string') return {
+      uri: cardArtSource
+    };
+    return cardArtSource;
+  }, [cardArtSource]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: headerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: headerLeftStyle,
+        children: [bankLogoSlot ? (0, _reactUtils.cloneChildrenWithModes)(bankLogoSlot, modes) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: bankName
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: headerRightStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: cardType
+        }), providerLogoSlot ? (0, _reactUtils.cloneChildrenWithModes)(providerLogoSlot, modes) : null]
+      })]
+    }), normalizedCardArt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: cardArtContainerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: normalizedCardArt,
+        style: cardArtImageStyle,
+        resizeMode: "cover"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: footerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: textStyle,
+        children: cardNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: stackStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: textStyle,
+          children: cardholderName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: textStyle,
+          children: expireDate
+        })]
+      })]
+    })]
+  });
+}
+var _default = exports.default = DebitCard;

package/lib/commonjs/components/Section/Section.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -144,12 +144,9 @@ function Section({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
-      }), onPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        name: "ic_chevron_right",
-        size: 24,
-        color: titleColor,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
+      }), onPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+        direction: "Forward",
+        modes: modes
       })]
     }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: supportTextStyle,
@@ -207,7 +204,7 @@ function Section({
         flexDirection: slotDirection,
         gap
       },
-      children: slot
+      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(slot), modes)
     })]
   });
 }

package/lib/commonjs/components/Tabs/TabItem.js

@@ -31,8 +31,12 @@ function TabItem({
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/fontFamily', modes) ?? 'JioType Var';
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/size', modes) ?? 14;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/lineHeight', modes) ?? 17;
+  const fontWeight = String((0, _figmaVariablesResolver.getVariableByName)('tabItem/label/fontWeight', modes) ?? 500);
   const idleLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/idle/label/color', modes) ?? '#303338';
-  const activeLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/active/label/color', modes) ?? '#cea15a';
+  const activeLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/active/label/color', modes) ?? '#000000';
+  const indicatorBackground = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/background', modes) ?? '#CEA15A';
+  const indicatorHeight = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/height', modes) ?? 2;
+  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/radius', modes) ?? 99;
   const labelColor = active ? activeLabelColor : idleLabelColor;
   const containerStyle = {
     flexDirection: 'column',
@@ -45,16 +49,16 @@ function TabItem({
     fontFamily,
     fontSize,
     lineHeight,
-    fontWeight: '500'
+    fontWeight
   };
   const indicatorStyle = {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 2,
-    backgroundColor: activeLabelColor,
-    borderRadius: 1
+    height: indicatorHeight,
+    backgroundColor: indicatorBackground,
+    borderRadius: indicatorRadius
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     style: ({

package/lib/commonjs/components/Tabs/Tabs.js

@@ -64,11 +64,13 @@ function Tabs({
   });
   const containerStyle = {
     flexDirection: 'row',
+    alignItems: 'flex-start',
     gap,
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    overflow: 'hidden'
   };
   if (scrollable) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {

package/lib/commonjs/components/Title/Title.js

@@ -10,31 +10,18 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Title component that mirrors the Figma "Title" component.
- *
- * This component displays a title with design-token driven styling
- * via `getVariableByName` and `modes`.
- *
- * @component
- * @param {Object} props
- * @param {string} [props.title='Page Title'] - Title text to display
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {Object} [props.textStyle] - Optional text style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
 const TEXT_ALIGN_MAP = {
   Left: 'left',
   Center: 'center'
 };
 function Title({
-  title = 'Page Title',
+  title = 'Title',
+  subtitle,
   textAlign = 'Left',
   modes: propModes = {},
   style,
   textStyle,
+  subtitleStyle,
   numberOfLines,
   accessibilityLabel,
   accessibilityHint,
@@ -49,21 +36,29 @@ function Title({
   };
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('title/padding/horizontal', modes) || 16;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('title/padding/vertical', modes) || 8;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('title/gap', modes) || 8;
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('title/label/color', modes) || '#0d0d0f';
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('title/fontSize', modes) || 26;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('title/lineHeight', modes) || 26;
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('title/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('title/fontWeight', modes) || 700;
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('title/fontWeight', modes) || 900;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/label/color', modes) || '#0d0d0f';
+  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontSize', modes) || 14;
+  const subtitleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontFamily', modes) || 'System';
+  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontWeight', modes) || 500;
+  const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
   const containerStyle = {
     flexDirection: 'column',
     alignItems: textAlign === 'Center' ? 'center' : 'stretch',
     justifyContent: 'center',
     paddingHorizontal,
     paddingVertical,
+    gap,
     width: '100%'
   };
-  const textStyleObj = {
+  const titleTextStyle = {
     color: labelColor,
     fontSize,
     lineHeight,
@@ -72,20 +67,33 @@ function Title({
     flexShrink: 1,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
-  const defaultAccessibilityLabel = accessibilityLabel || title;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const subtitleTextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight,
+    flexShrink: 1,
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityRole: "header",
-    accessibilityLabel: undefined,
+    accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [textStyleObj, textStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [titleTextStyle, textStyle],
       numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title
-    })
+    }), subtitle != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [subtitleTextStyle, subtitleStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: subtitle
+    })]
   });
 }
 var _default = exports.default = Title;

package/lib/commonjs/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "CardCTA", {
+  enumerable: true,
+  get: function () {
+    return _CardCTA.default;
+  }
+});
 Object.defineProperty(exports, "CardFeedback", {
   enumerable: true,
   get: function () {
@@ -123,10 +129,10 @@ Object.defineProperty(exports, "ChipSelect", {
     return _ChipSelect.default;
   }
 });
-Object.defineProperty(exports, "CtaCard", {
+Object.defineProperty(exports, "DebitCard", {
   enumerable: true,
   get: function () {
-    return _CtaCard.default;
+    return _DebitCard.default;
   }
 });
 Object.defineProperty(exports, "Disclaimer", {
@@ -498,7 +504,8 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
-var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
+var _CardCTA = _interopRequireDefault(require("./CardCTA/CardCTA"));
+var _DebitCard = _interopRequireDefault(require("./DebitCard/DebitCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _Form = _interopRequireWildcard(require("./Form/Form"));
 var _FormField = _interopRequireDefault(require("./FormField/FormField"));