jfs-components 0.1.12 → 0.1.17

package/lib/module/components/BenefitCard/BenefitCard.js

@@ -9,6 +9,9 @@ import Text from '../Text/Text';
 import ListItem from '../ListItem/ListItem';
 import Divider from '../Divider/Divider';
 import Button from '../Button/Button';
+import Nudge from '../Nudge/Nudge';
+import Avatar from '../Avatar/Avatar';
+import TextSegment from '../TextSegment/TextSegment';
 
 /**
  * A single benefit row rendered with the shared `ListItem` primitive: a
@@ -38,8 +41,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 function BenefitCard({
   headerTitle = 'You will earn',
   headerItem,
+  headerItems,
+  header,
   showHeader = true,
-  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  bodyTitle,
+  bodyHeader,
   items,
   children,
   buttonLabel = 'Upgrade',
@@ -54,11 +60,16 @@ function BenefitCard({
 }) {
   const tokens = useMemo(() => resolveTokens(modes), [modes]);
 
-  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-  const listItemModes = 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 = 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 = useMemo(() => ({
     AppearanceBrand: 'Secondary',
     ...modes
@@ -72,6 +83,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 = useMemo(() => ({
+    AppearanceBrand: 'Neutral',
+    ...cascadeModes
+  }), [cascadeModes]);
   const renderItem = (item, key) => {
     const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/_jsx(Icon, {
       iconName: item.icon,
@@ -89,23 +107,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__*/_jsxs(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 = cloneChildrenWithModes(headerListSource, cascadeModes);
+  const headerNode = showHeader ? /*#__PURE__*/_jsxs(View, {
     style: styles.section,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.cardHeader,
       children: [headerTitle != null ? /*#__PURE__*/_jsx(RNText, {
         style: tokens.title,
         children: headerTitle
-      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: tokens.listWrap,
+        children: headerListNodes
+      })]
     }), /*#__PURE__*/_jsx(Divider, {
       modes: modes
     })]
   }) : null;
-  const bodyList = children ? 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__*/_jsx(RNText, {
+    style: tokens.title,
+    children: bodyTitle
+  }) : /*#__PURE__*/_jsx(Nudge, {
+    type: "inline-compact",
+    modes: {
+      ...nudgeModes,
+      ...cascadeModes
+    },
+    startSlot: DEFAULT_UPSELL_AVATAR,
+    children: /*#__PURE__*/_jsx(TextSegment, {
+      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 = cloneChildrenWithModes(bodyListSource, cascadeModes);
   const ctaNode = button ?? /*#__PURE__*/_jsx(Button, {
     label: buttonLabel,
     modes: ctaModes,
@@ -116,15 +171,9 @@ function BenefitCard({
     width
   }), [tokens.container, width]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [headerNode, /*#__PURE__*/_jsxs(View, {
-      style: tokens.body,
-      children: [bodyTitle != null ? /*#__PURE__*/_jsx(RNText, {
-        style: tokens.title,
-        children: bodyTitle
-      }) : null, /*#__PURE__*/_jsx(View, {
-        style: tokens.listWrap,
-        children: bodyList
-      })]
+    children: [headerNode, bodyHeaderNode, /*#__PURE__*/_jsx(View, {
+      style: tokens.listWrap,
+      children: bodyList
     }), showButton ? ctaNode : null]
   });
   if (onPress) {
@@ -183,10 +232,6 @@ function resolveTokens(modes) {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
-    body: {
-      alignSelf: 'stretch',
-      gap
-    },
     listWrap: {
       alignSelf: 'stretch',
       gap
@@ -202,6 +247,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 = 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'
@@ -209,6 +274,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__*/_jsx(Avatar, {
+  style: "Image",
+  modes: {
+    'Avatar Size': 'XS'
+  }
+});
 const styles = StyleSheet.create({
   section: {
     alignSelf: 'stretch',

package/lib/module/components/BottomNav/BottomNav.js

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

package/lib/module/components/BottomNavItem/BottomNavItem.js

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

package/lib/module/components/Button/Button.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Platform, Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
@@ -31,6 +31,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
 // ---------------------------------------------------------------------------
@@ -42,19 +53,19 @@ const containerLayoutStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveButtonTokens(modes, disabled) {
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = getVariableByName('button/background', modes);
+  const borderColor = getVariableByName('button/border/color', modes);
   const borderWidth = getVariableByName('button/border/size', modes);
-  const radius = getVariableByName('button/radius', modes) || 9999;
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20;
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12;
-  const gap = getVariableByName('button/gap', modes) || 8;
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System';
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700;
+  const radius = getVariableByName('button/radius', modes);
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('button/padding/vertical', modes);
+  const gap = getVariableByName('button/gap', modes);
+  const fontFamily = getVariableByName('button/fontFamily', modes);
+  const fontWeightValue = getVariableByName('button/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19;
-  const fontSize = getVariableByName('button/fontSize', modes) || 16;
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
+  const lineHeight = getVariableByName('button/lineHeight', modes);
+  const fontSize = getVariableByName('button/fontSize', modes);
+  const textColor = getVariableByName('button/foreground', modes);
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18;
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
@@ -63,9 +74,9 @@ function resolveButtonTokens(modes, disabled) {
     ...modes,
     'Button / State': 'Pressed'
   };
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor;
+  const pressedBg = getVariableByName('button/background', pressedModes);
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes);
+  const pressedTextColor = 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.
@@ -76,9 +87,9 @@ function resolveButtonTokens(modes, disabled) {
       ...modes,
       'Button / State': 'Hover'
     };
-    const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
-    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
-    hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
+    const hoverBg = getVariableByName('button/background', hoverModes);
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes);
+    hoverTextColor = getVariableByName('button/foreground', hoverModes);
     hoverContainer = {
       backgroundColor: hoverBg,
       borderColor: hoverBorderColor
@@ -214,8 +225,9 @@ function ButtonImpl({
     content = children;
   } else {
     content = /*#__PURE__*/_jsx(Text, {
-      style: activeLabelStyle,
-      ...resolveTruncation(disableTruncation, 1),
+      style: [activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE],
+      numberOfLines: disableTruncation ? undefined : 1,
+      ellipsizeMode: disableTruncation ? undefined : 'tail',
       children: label
     });
   }

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

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

package/lib/module/components/CardAdvisory/CardAdvisory.js

@@ -34,19 +34,19 @@ function resolveCardAdvisoryTokens(modes) {
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0);
   const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0);
-  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff';
+  const background = getVariableByName('cardAdvisory/background', modes);
   const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16);
   const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6);
   const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8);
-  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes);
   const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26);
-  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes);
   const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26);
   const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900');
   const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
-  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes);
   const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12);
-  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes);
   const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16);
   const descriptionFontWeight = toFontWeight(getVariableByName('cardAdvisory/description/fontWeight', modes), '500');
   return {
@@ -95,7 +95,7 @@ function resolveCardAdvisoryTokens(modes) {
       lineHeight: descriptionLineHeight,
       width: '100%'
     },
-    iconColor: getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconColor: getVariableByName('cardAdvisory/icon/color', modes),
     iconSize: toNumber(getVariableByName('cardAdvisory/icon/size', modes), 18)
   };
 }

package/lib/module/components/CardCTA/CardCTA.js

@@ -66,27 +66,27 @@ function CardCTA({
   const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
   const isRating = normalizedType === 'rating';
   const isSip = normalizedType === 'sip';
-  const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
-  const radius = getVariableByName('cardCTA/radius', modes) || 12;
-  const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
-  const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4';
-  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16;
-  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22;
-  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16;
-  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16;
-  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22;
-  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6;
-  const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10';
-  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var';
-  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18;
-  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700;
+  const background = getVariableByName('cardCTA/background', modes);
+  const radius = getVariableByName('cardCTA/radius', modes);
+  const borderSize = getVariableByName('cardCTA/border/size', modes);
+  const borderColor = getVariableByName('cardCTA/border/color', modes);
+  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes);
+  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes);
+  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes);
+  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes);
+  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes);
+  const titleColor = getVariableByName('cardCTA/title/color', modes);
+  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes);
+  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes);
+  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes);
+  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d';
-  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14;
-  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17;
-  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400;
+  const bodyColor = getVariableByName('cardCTA/body/color', modes);
+  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes);
+  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes);
+  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes);
+  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes);
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
   const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16);
@@ -135,7 +135,7 @@ function CardCTA({
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState(null);
-  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20;
+  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes);
   const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1;
   // Small safety pad so sub-pixel rounding between the measure pass and the
   // rendered glyph run can never clip the final character.

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

@@ -26,11 +26,11 @@ export function CardFeedback({
     ...propModes
   };
   // Container Tokens
-  const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
-  const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
-  const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
-  const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
-  const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+  const backgroundColor = getVariableByName('cardFeedback/background', modes);
+  const radius = parseFloat(getVariableByName('cardFeedback/radius', modes));
+  const gap = parseFloat(getVariableByName('cardFeedback/gap', modes));
+  const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes));
+  const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,
@@ -69,7 +69,7 @@ export function Icon({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+  const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes));
   // Color for the icon itself
   const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
   console.log(color);
@@ -115,7 +115,7 @@ export function Content({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+  const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes));
 
   // Pass modes to children (Title, Body, etc.)
   const childrenWithModes = React.Children.map(children, child => {
@@ -149,11 +149,11 @@ export function Title({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
-  const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
-  const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
-  const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+  const color = getVariableByName('cardFeedback/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -178,11 +178,11 @@ export function Body({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
-  const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
-  const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
-  const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+  const color = getVariableByName('cardFeedback/body/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes));
+  const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes));
+  const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -207,7 +207,7 @@ export function Action({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
+  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes));
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = React.Children.map(children, child => {

package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js

@@ -30,26 +30,26 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 function resolveCardFinancialConditionTokens(modes) {
-  const background = getVariableByName('financialConditionCard/background', modes) || '#ffffff';
+  const background = getVariableByName('financialConditionCard/background', modes);
   const radius = toNumber(getVariableByName('financialConditionCard/radius', modes), 16);
   const paddingH = toNumber(getVariableByName('financialConditionCard/padding/horizontal', modes), 16);
   const paddingV = toNumber(getVariableByName('financialConditionCard/padding/vertical', modes), 16);
   const gap = toNumber(getVariableByName('financialConditionCard/gap', modes), 8);
   const headerGap = toNumber(getVariableByName('financialConditionCard/header/gap', modes), 16);
   const textContentGap = toNumber(getVariableByName('financialConditionCard/textContent/gap', modes), 8);
-  const titleColor = getVariableByName('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleColor = getVariableByName('financialConditionCard/title/color', modes);
   const titleFontSize = toNumber(getVariableByName('financialConditionCard/title/fontSize', modes), 16);
-  const titleFontFamily = getVariableByName('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('financialConditionCard/title/fontFamily', modes);
   const titleLineHeight = toNumber(getVariableByName('financialConditionCard/title/lineHeight', modes), 18);
   const titleFontWeight = toFontWeight(getVariableByName('financialConditionCard/title/fontWeight', modes), '700');
-  const bodyColor = getVariableByName('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyColor = getVariableByName('financialConditionCard/body/color', modes);
   const bodyFontSize = toNumber(getVariableByName('financialConditionCard/body/fontSize', modes), 14);
-  const bodyFontFamily = getVariableByName('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontFamily = getVariableByName('financialConditionCard/body/fontFamily', modes);
   const bodyLineHeight = toNumber(getVariableByName('financialConditionCard/body/lineHeight', modes), 17);
   const bodyFontWeight = toFontWeight(getVariableByName('financialConditionCard/body/fontWeight', modes), '400');
-  const nudgeBodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyColor = getVariableByName('nudge/body/color', modes);
   const nudgeBodyFontSize = toNumber(getVariableByName('nudge/body/fontSize', modes), 12);
-  const nudgeBodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyFontFamily = getVariableByName('nudge/body/fontFamily', modes);
   const nudgeBodyLineHeight = toNumber(getVariableByName('nudge/body/lineHeight', modes), 16);
   const nudgeBodyFontWeight = toFontWeight(getVariableByName('nudge/body/fontWeight', modes), '500');
   return {

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

@@ -38,7 +38,6 @@ function CardInsight({
   const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
   const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
   const contentGap = getVariableByName('cardInsight/contentGap', modes) ?? 8;
-  const width = getVariableByName('cardInsight/width', modes) ?? 356;
   const slotBackground = getVariableByName('cardInsight/slot/background', modes) ?? '#ffffff';
   const headerGap = getVariableByName('cardInsight/header/gap', modes) ?? 8;
   const textGap = getVariableByName('cardInsight/text/gap', modes) ?? 4;
@@ -68,6 +67,7 @@ function CardInsight({
   const renderSlot = () => {
     if (!children) {
       return /*#__PURE__*/_jsx(SavingsGoalSummary, {
+        label: "Credit usage",
         modes: modes
       });
     }
@@ -103,7 +103,6 @@ function CardInsight({
   const showDivider = footerNode !== null && divider !== false && divider !== null;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
-      width,
       backgroundColor: background,
       borderRadius: radius,
       borderWidth,