jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/BenefitCard/BenefitCard.js

@@ -13,6 +13,9 @@ var _Text = _interopRequireDefault(require("../Text/Text"));
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 var _Divider = _interopRequireDefault(require("../Divider/Divider"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _TextSegment = _interopRequireDefault(require("../TextSegment/TextSegment"));
 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); }
@@ -44,8 +47,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function BenefitCard({
   headerTitle = 'You will earn',
   headerItem,
+  headerItems,
+  header,
   showHeader = true,
-  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  bodyTitle,
+  bodyHeader,
   items,
   children,
   buttonLabel = 'Upgrade',
@@ -60,11 +66,16 @@ function BenefitCard({
 }) {
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
 
-  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-  const listItemModes = (0, _react.useMemo)(() => ({
+  // Component-level modes. `List Item Style: Minimal` and `Nudge padding: None`
+  // are BenefitCard's own defaults: they live on the card and cascade down into
+  // every child (the list-wrap rows and the upsell nudge) rather than being
+  // threaded onto each individual item. Consumer `modes` always win.
+  const cascadeModes = (0, _react.useMemo)(() => ({
     'List Item Style': 'Minimal',
+    'Nudge padding': 'None',
     ...modes
   }), [modes]);
+  // Sub-element modes layer their own specifics on top of the consumer modes.
   const iconModes = (0, _react.useMemo)(() => ({
     AppearanceBrand: 'Secondary',
     ...modes
@@ -78,6 +89,13 @@ function BenefitCard({
     'Button / Size': 'S',
     ...modes
   }), [modes]);
+  // The upsell nudge keeps a white/transparent background (`AppearanceBrand:
+  // Neutral` → `nudge/background: #ffffff`); its `Nudge padding: None` cascades
+  // in from `cascadeModes` so it sits flush with the card.
+  const nudgeModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Neutral',
+    ...cascadeModes
+  }), [cascadeModes]);
   const renderItem = (item, key) => {
     const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       iconName: item.icon,
@@ -95,23 +113,60 @@ function BenefitCard({
       title: item.title,
       leading: leading,
       trailing: trailing,
-      onPress: item.onPress,
-      modes: listItemModes
+      onPress: item.onPress
     }, key);
   };
-  const headerNode = showHeader && (headerTitle != null || headerItem != null) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // Header "list wrap" — slot-based. Precedence: `header` slot > `headerItems`
+  // array > legacy single `headerItem` > Figma default rows. The component-level
+  // `cascadeModes` are pushed into the whole group at once, so individual rows
+  // never carry their own list-item modes.
+  const headerListSource = header ? header : (headerItems ?? (headerItem ? [headerItem] : DEFAULT_HEADER_ITEMS)).map((item, index) => renderItem(item, `header-${index}`));
+  const headerListNodes = (0, _reactUtils.cloneChildrenWithModes)(headerListSource, cascadeModes);
+  const headerNode = showHeader ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.section,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.cardHeader,
       children: [headerTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: tokens.title,
         children: headerTitle
-      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.listWrap,
+        children: headerListNodes
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       modes: modes
     })]
   }) : null;
-  const bodyList = children ? (0, _reactUtils.cloneChildrenWithModes)(children, listItemModes) : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+
+  // Body "header" slot (between the divider and the body list). Precedence:
+  // explicit `bodyHeader` slot > legacy `bodyTitle` text > Figma upsell nudge.
+  const bodyHeaderNode = bodyHeader === null || bodyHeader === false ? null : bodyHeader !== undefined ? renderSlot(bodyHeader, cascadeModes) : bodyTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: tokens.title,
+    children: bodyTitle
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+    type: "inline-compact",
+    modes: {
+      ...nudgeModes,
+      ...cascadeModes
+    },
+    startSlot: DEFAULT_UPSELL_AVATAR,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSegment.default, {
+      modes: cascadeModes,
+      segments: [{
+        text: 'Upgrade to '
+      }, {
+        text: 'JioFinance+',
+        modes: {
+          'Text Appearance': 'Primary'
+        }
+      }, {
+        text: ' and earn more'
+      }]
+    })
+  });
+  const bodyListSource = children ? children : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+  const bodyList = (0, _reactUtils.cloneChildrenWithModes)(bodyListSource, cascadeModes);
   const ctaNode = button ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     label: buttonLabel,
     modes: ctaModes,
@@ -122,15 +177,9 @@ function BenefitCard({
     width
   }), [tokens.container, width]);
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [headerNode, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: tokens.body,
-      children: [bodyTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: tokens.title,
-        children: bodyTitle
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: tokens.listWrap,
-        children: bodyList
-      })]
+    children: [headerNode, bodyHeaderNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.listWrap,
+      children: bodyList
     }), showButton ? ctaNode : null]
   });
   if (onPress) {
@@ -189,10 +238,6 @@ function resolveTokens(modes) {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
-    body: {
-      alignSelf: 'stretch',
-      gap
-    },
     listWrap: {
       alignSelf: 'stretch',
       gap
@@ -208,6 +253,26 @@ function resolveTokens(modes) {
     }
   };
 }
+
+// Cascades `modes` into a slot node and unwraps a single child so the slot can
+// be rendered inline without an extra fragment.
+function renderSlot(node, modes) {
+  const processed = (0, _reactUtils.cloneChildrenWithModes)(node, modes);
+  return processed.length === 1 ? processed[0] : processed;
+}
+
+// Figma reference rows for the header list wrap (two highlighted "JioPoints"
+// rows). Used only when no `header` slot / `headerItems` / legacy `headerItem`
+// is supplied.
+const DEFAULT_HEADER_ITEMS = [{
+  icon: 'ic_jewellery_diamond',
+  title: 'JioPoints',
+  trailingText: 'Up to 2000 pts'
+}, {
+  icon: 'ic_jewellery_diamond',
+  title: 'JioPoints',
+  trailingText: 'Up to 2000 pts'
+}];
 const DEFAULT_ITEMS = [{
   icon: 'ic_card',
   title: 'Up to ₹5000 cashback'
@@ -215,6 +280,15 @@ const DEFAULT_ITEMS = [{
   icon: 'ic_card',
   title: '25% extra JioPoints'
 }];
+
+// Start-slot avatar for the default upsell nudge. `modes` cascade in from the
+// nudge (XS keeps it compact next to the inline message).
+const DEFAULT_UPSELL_AVATAR = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  style: "Image",
+  modes: {
+    'Avatar Size': 'XS'
+  }
+});
 const styles = _reactNative.StyleSheet.create({
   section: {
     alignSelf: 'stretch',

package/lib/commonjs/components/BottomNav/BottomNav.js

@@ -42,8 +42,8 @@ function BottomNav({
   };
 
   // Resolve container styling tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/background', modes) || '#ffffff';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/color', modes) || '#cccfd1';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/color', modes);
   const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/width', modes) ?? 1;
   const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/padding/top', modes) ?? 10;
   const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/padding/bottom', modes) ?? 23;

package/lib/commonjs/components/BottomNavItem/BottomNavItem.js

@@ -29,13 +29,13 @@ const focusOverlayStyle = {
 };
 function resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/gap', modes) ?? 6;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes);
   const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontSize', modes) ?? 11;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/lineHeight', modes) ?? 14;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes) || '#0d0d0f';
-  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes) || '#ad8545';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes);
+  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes);
   const resolvedIconSize = iconSizeOverride ?? (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/size', modes) ?? 24;
   return {
     baseContainerStyle: {

package/lib/commonjs/components/BrandChip/BrandChip.js

@@ -95,7 +95,8 @@ function BrandChip({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,8 +127,7 @@ function BrandChip({
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [avatarNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       children: label
     })]
   });

package/lib/commonjs/components/Button/Button.js

@@ -37,6 +37,17 @@ const containerLayoutStyle = {
   justifyContent: 'center'
 };
 
+// Keeps the label on a single line. `flexShrink: 0` stops a tight flex parent
+// from squeezing the text; on web `whiteSpace: 'nowrap'` is what actually
+// prevents the line break (a bare `numberOfLines` line-clamp still allows the
+// text to wrap inside a width-constrained pill in react-native-web).
+const NO_WRAP_LABEL_STYLE = {
+  flexShrink: 0,
+  ...(IS_WEB ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -48,19 +59,19 @@ const containerLayoutStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveButtonTokens(modes, disabled) {
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes);
   const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes) || 9999;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes) || 20;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes) || 12;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes) || 8;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes) || 'System';
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes) || 700;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes);
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes);
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes);
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
@@ -69,9 +80,9 @@ function resolveButtonTokens(modes, disabled) {
     ...modes,
     'Button / State': 'Pressed'
   };
-  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
+  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes);
+  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes);
+  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes);
 
   // Hover tokens are only meaningful on web. Skipping them on native saves
   // ~3 token lookups + an object spread per render on every Button.
@@ -82,9 +93,9 @@ function resolveButtonTokens(modes, disabled) {
       ...modes,
       'Button / State': 'Hover'
     };
-    const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
-    const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
-    hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
+    const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes);
+    const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes);
+    hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes);
     hoverContainer = {
       backgroundColor: hoverBg,
       borderColor: hoverBorderColor
@@ -176,6 +187,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -219,8 +231,9 @@ function ButtonImpl({
     content = children;
   } else {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: activeLabelStyle,
-      numberOfLines: 1,
+      style: [activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE],
+      numberOfLines: disableTruncation ? undefined : 1,
+      ellipsizeMode: disableTruncation ? undefined : 'tail',
       children: label
     });
   }

package/lib/commonjs/components/Card/Card.js

@@ -41,18 +41,18 @@ function Card({
   style
 }) {
   // Resolve Card Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes) || '#ffffff';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('card/border/color', modes) || '#ebebed';
-  const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/strokeWidth', modes) || '0.5'); // Ensure number
-  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/radius', modes) || '8');
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/gap', modes) || '4');
-  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-horizontal', modes) || '0');
-  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-vertical', modes) || '0');
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('card/border/color', modes);
+  const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/strokeWidth', modes)); // Ensure number
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/radius', modes));
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/gap', modes));
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-horizontal', modes));
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/padding-vertical', modes));
 
   // Resolve Content Wrapper Tokens
-  const contentGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/gap', modes) || '4');
-  const contentPaddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/horizontal', modes) || '12');
-  const contentPaddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/vertical', modes) || '16');
+  const contentGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/gap', modes));
+  const contentPaddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/horizontal', modes));
+  const contentPaddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/content/padding/vertical', modes));
 
   // Clone media to pass modes if it's a valid element, facilitating nested style resolution
   const mediaWithModes = /*#__PURE__*/(0, _react.isValidElement)(media) ? /*#__PURE__*/(0, _react.cloneElement)(media, {
@@ -137,14 +137,14 @@ function Title({
 }) {
   const context = (0, _react.useContext)(CardContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('card/title/color', modes) || '#081007';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/fontSize', modes) || '16');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/lineHeight', modes) || '18');
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/title/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/title/lineHeight', modes));
 
   // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
   // We check both keys to be safe.
-  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontWeight', modes) || (0, _figmaVariablesResolver.getVariableByName)('card/title/fonwWeight', modes) || '900';
+  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/title/fontWeight', modes);
   const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
   const textStyle = {
     color,
@@ -170,11 +170,11 @@ function SupportText({
 }) {
   const context = (0, _react.useContext)(CardContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/color', modes) || '#191b1e';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontSize', modes) || '12');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/lineHeight', modes) || '16');
-  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontWeight', modes) || '400';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/lineHeight', modes));
+  const rawFontWeight = (0, _figmaVariablesResolver.getVariableByName)('card/supportive-text/fontWeight', modes);
   const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
   const textStyle = {
     color,

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -40,19 +40,19 @@ function resolveCardAdvisoryTokens(modes) {
   const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 0);
   const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/radius', modes), 0);
-  const background = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/background', modes) || '#ffffff';
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/background', modes);
   const mainContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/mainContent/gap', modes), 16);
   const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/content/gap', modes), 6);
   const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/header/gap', modes), 8);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/foreground', modes);
   const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontSize', modes), 26);
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontFamily', modes);
   const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/lineHeight', modes), 26);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontWeight', modes), '900');
   const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
-  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/foreground', modes);
   const descriptionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontSize', modes), 12);
-  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontFamily', modes);
   const descriptionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/lineHeight', modes), 16);
   const descriptionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontWeight', modes), '500');
   return {
@@ -101,7 +101,7 @@ function resolveCardAdvisoryTokens(modes) {
       lineHeight: descriptionLineHeight,
       width: '100%'
     },
-    iconColor: (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/color', modes),
     iconSize: toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/size', modes), 18)
   };
 }
@@ -126,6 +126,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -163,7 +164,7 @@ function CardAdvisory({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: tokens.headerStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [tokens.titleStyle, titleStyle],
             children: title
           }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/CardBankAccount/CardBankAccount.js

@@ -72,7 +72,8 @@ function CardBankAccount({
   footer,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   // Merge caller modes on top of `DEFAULT_MODES` so every default key
   // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -189,7 +190,7 @@ function CardBankAccount({
           })
         }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: valueTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: item.value
         }) : (0, _reactUtils.cloneChildrenWithModes)(item.value, modes)]
       }, `${item.label}-${index}`))