jfs-components 0.1.12 → 0.1.18

package/lib/module/components/Avatar/Avatar.js

@@ -51,17 +51,17 @@ const monogramContainerStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveAvatarTokens(modes, isMonogram) {
-  const size = getVariableByName('avatar/size', modes) || 29;
-  const radiusRaw = getVariableByName('avatar/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500;
+  const size = getVariableByName('avatar/size', modes);
+  const radiusRaw = getVariableByName('avatar/radius', modes);
+  const backgroundColor = getVariableByName('avatar/background', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const labelColor = getVariableByName('avatar/label/color', modes);
+  const labelFontSize = getVariableByName('avatar/label/fontSize', modes);
+  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes);
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

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

@@ -1,27 +1,30 @@
 "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
 }) {
-  const gap = getVariableByName('avatarGroup/gap', modes) || 0;
-  const avatarSize = getVariableByName('avatar/size', modes) || 29;
-  const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-  const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-  const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+  // 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);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+  const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+  const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
   const validChildren = flattenChildren(children);
   const totalChildren = validChildren.length;
 
@@ -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/Badge/Badge.js

@@ -29,20 +29,20 @@ function Badge({
   // Resolve token values (fall back to sensible defaults). The glass type
   // swaps the solid fill for a translucent overlay + white label, matching the
   // Figma `badge/glass/*` tokens.
-  const backgroundColor = getVariableByName('badge/color/background', modes) || '#d8effe';
-  const glassBackground = getVariableByName('badge/glass/color/background', modes) || '#ffffff26';
-  const glassLabelColor = getVariableByName('badge/glass/color/label', modes) || '#ffffff';
-  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes) || '#000000';
-  const fontSize = Number(getVariableByName('badge/label/fontSize', modes)) || 12;
-  const fontFamily = getVariableByName('badge/fontFamily', modes) || undefined;
-  const fontWeight = getVariableByName('badge/label/fontWeight', modes) || '600';
-  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes)) || 6;
-  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
-  const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
-  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const backgroundColor = getVariableByName('badge/color/background', modes);
+  const glassBackground = getVariableByName('badge/glass/color/background', modes);
+  const glassLabelColor = getVariableByName('badge/glass/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes);
+  const fontSize = Number(getVariableByName('badge/label/fontSize', modes));
+  const fontFamily = getVariableByName('badge/fontFamily', modes);
+  const fontWeight = getVariableByName('badge/label/fontWeight', modes);
+  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes));
+  const borderRadius = Number(getVariableByName('badge/radius', modes));
+  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes));
   // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
   // same 1:1 mapping the merchandising card footer uses.
-  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)) || 29)));
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)))));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.

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)
   };
 }