jfs-components 0.1.36 → 0.1.48

package/lib/commonjs/components/HelloJioInput/HelloJioInput.js

@@ -57,7 +57,15 @@ const STATE_FALLBACKS = {
     iconColor: '#24262b'
   },
   IdleJioPlus: {
-    background: '#f5f5f5',
+    // Glass fill. In Figma the IdleJioPlus surface resolves
+    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
+    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
+    // MainPage mode gives). Painted over the backdrop blur, an opaque value
+    // would read as a solid bar and hide the blur entirely — so, matching the
+    // translucent glass fallbacks the sibling GlassFill consumers use
+    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
+    // this fallback carries alpha so the frost tints the blurred content.
+    background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
     iconColor: '#545961'
@@ -94,7 +102,11 @@ function resolveHelloJioInputTokens(modes, visualState) {
       // Glass keeps the container transparent so GlassFill shows through.
       backgroundColor: useGlass ? 'transparent' : background,
       borderColor,
-      borderWidth: strokeWidth,
+      // The Figma IdleJioPlus variant is a borderless frosted pill — it has no
+      // `border/color`/`strokeWidth` tokens. Drawing the Idle border color here
+      // would leave a faint light ring the design doesn't have, so drop the
+      // border entirely in the glass state.
+      borderWidth: useGlass ? 0 : strokeWidth,
       borderStyle: 'solid',
       borderRadius,
       paddingLeft,
@@ -201,11 +213,15 @@ const HelloJioInput = /*#__PURE__*/(0, _react.forwardRef)(function HelloJioInput
     setIsFocused(false);
     onBlur?.(e);
   }, [onBlur]);
-  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+
+  // Symmetric with `trailing`: an explicit `null` hides the leading icon
+  // (the design's `startSlot={false}`); `undefined` falls back to the
+  // default brand icon.
+  const leadingElement = leading === undefined ? leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     name: leadingIconName,
     size: tokens.iconSize,
     color: tokens.iconColor
-  }) : null);
+  }) : null : leading;
   const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leadingElement), modes) : null;
   const defaultTrailing = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
     iconName: sendIconName,

package/lib/commonjs/components/PageHero/PageHero.js

@@ -39,6 +39,7 @@ const MEDIA_FALLBACK = 117;
  *   eyebrow="Upgrade to JioFinance+"
  *   headline="Resume earning cashback, extra points, and 1% gold"
  *   supportingText="₹999/year · ₹0 until 2027"
+ *   body="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
  *   modes={{ 'Page type': 'JioPlus' }}
@@ -71,6 +72,7 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
   const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
 
   // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
@@ -115,6 +117,7 @@ function PageHero({
     flexDirection: 'column',
     alignItems: 'center',
     gap,
+    paddingHorizontal,
     width: '100%'
   };
   const textWrapStyle = {

package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -48,6 +48,7 @@ function ProductMerchandisingCard({
   title = 'Title',
   subtitle = 'Subtitle',
   badgeLabel,
+  badgeIcon,
   badge,
   showAvatar = true,
   avatarSource,
@@ -102,29 +103,33 @@ function ProductMerchandisingCard({
   }), [modes]);
   const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
     label: badgeLabel,
+    leading: badgeIcon,
     modes: badgeModes
   }) : null);
   const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
     style: avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image',
-    imageSource: avatarSource,
-    monogram: avatarMonogram,
+    ...(avatarSource != null ? {
+      imageSource: avatarSource
+    } : {}),
+    ...(avatarMonogram != null ? {
+      monogram: avatarMonogram
+    } : {}),
     modes: avatarModes
   }) : null;
 
-  // The footer "special badge" is now the shared <Badge type="glass">. The
-  // hardcoded literals that defined its look (warm frosted overlay, gentle
-  // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
-  // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
-  // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
-  // instantiation renders byte-for-byte the same as before.
+  // The footer "special badge" is the shared <Badge type="glass">. Overlay +
+  // blur come from `badge/glass/*` + `blur/minimal`; box/gap from
+  // `productMerchandisingcard/specialbadge/*`; label color/weight from the
+  // glass badge tokens (Figma: white / 600). Optional `specialBadgeIcon`
+  // maps to Badge's `leading` slot.
   const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
     type: "glass",
     label: specialBadgeLabel,
     leading: specialBadgeIcon,
-    glassOverlayColor: SPECIAL_BADGE_BG,
-    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    glassOverlayColor: tokens.specialBadgeBg,
+    glassIntensity: tokens.specialBadgeIntensity,
     modes: modes,
-    style: styles.specialBadge,
+    style: tokens.specialBadge,
     labelStyle: tokens.specialBadgeText,
     ...(disableTruncation != null ? {
       disableTruncation
@@ -142,7 +147,9 @@ function ProductMerchandisingCard({
   const footerCta = cta ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     label: ctaLabel,
     modes: ctaModes,
-    onPress: onCtaPress
+    ...(onCtaPress != null ? {
+      onPress: onCtaPress
+    } : {})
   });
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [imageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
@@ -303,12 +310,6 @@ function ProductMerchandisingCard({
 // the ramp (the strongest point); the upper part fades to fully clear. Kept
 // intentionally small to match the design's subtle "minimal" blur.
 const BLUR_INTENSITY_FACTOR = 1.0;
-
-// Special badge ("frosted" pill) — values are literals in the Figma node
-// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
-const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)';
-const SPECIAL_BADGE_INTENSITY = 17; // ~5px CSS blur / ~2 native blurAmount
-
 function asNum(raw, fallback) {
   const n = typeof raw === 'number' ? raw : parseFloat(raw);
   return Number.isFinite(n) ? n : fallback;
@@ -328,6 +329,7 @@ function resolveTokens(modes) {
   const footerPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/horizontal', modes), 16);
   const footerPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/vertical', modes), 16);
   const textGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/text/gap', modes), 2);
+  const textWrapMinWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/textWrap/minWidth', modes), 100);
   const blurRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes), 29);
   const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
   const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontsize', modes), 14);
@@ -339,7 +341,20 @@ function resolveTokens(modes) {
   const subtitleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
   const sbSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
   const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
-  const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+  // No dedicated `specialbadge/text/fontweight` in the collection — Figma
+  // binds the glass badge label to `badge/label/fontWeight` (600).
+  const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes), '600');
+  const sbPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/padding/horizontal', modes), 6);
+  const sbGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/gap', modes), 4);
+  const sbPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes), 4);
+  const sbRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes), 4);
+  const sbLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes), '#ffffff');
+
+  // The special badge is a `type="glass"` Badge: its overlay + blur come
+  // straight from the shared badge-glass tokens the design references
+  // (`badge/glass/color/background` and the `glass/minimal` → `blur/minimal`
+  // effect), so it frosts at the same strength as the footer.
+  const specialBadgeBg = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes), 'rgba(255,255,255,0.15)');
 
   // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
   // an identical Gaussian on iOS, Android and web — so unlike the old
@@ -351,6 +366,10 @@ function resolveTokens(modes) {
     radius,
     blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
     imageBlurStdDeviation,
+    specialBadgeBg,
+    // Same `blur/minimal`-derived intensity the footer glass uses, so the
+    // special badge frosts consistently with the surface behind it.
+    specialBadgeIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
     header: {
       flexDirection: 'row',
       alignItems: 'flex-start',
@@ -368,6 +387,9 @@ function resolveTokens(modes) {
     },
     textWrap: {
       flex: 1,
+      // The Figma footer pins the text column to a minimum width so a long
+      // CTA can never squeeze the title/subtitle away (`footer/textWrap/minWidth`).
+      minWidth: textWrapMinWidth,
       gap: textGap,
       justifyContent: 'center'
     },
@@ -387,8 +409,16 @@ function resolveTokens(modes) {
       lineHeight: Math.round(subtitleSize * 1.2),
       includeFontPadding: false
     },
+    // Pin the special-badge box to the card collection tokens so a parent
+    // `Badge Size` mode cannot inflate/deflate this pill away from Figma.
+    specialBadge: {
+      paddingHorizontal: sbPadH,
+      paddingVertical: sbPadV,
+      borderRadius: sbRadius,
+      gap: sbGap
+    },
     specialBadgeText: {
-      color: '#ffffff',
+      color: sbLabelColor,
       fontSize: sbSize,
       fontFamily: sbFamily,
       fontWeight: sbWeight,
@@ -414,16 +444,6 @@ const styles = _reactNative.StyleSheet.create({
     // the intended fade strength.
     opacity: 0.9
   },
-  // Overrides layered on top of <Badge type="glass">. Badge already supplies
-  // the row layout + 4px gap (when a leading icon is present), `overflow:
-  // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
-  // pin the special badge's literal Figma box (6/2 padding, 4px radius)
-  // regardless of the badge size tokens resolved by the active modes.
-  specialBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
   pressed: {
     opacity: 0.92
   }

package/lib/commonjs/components/ValueBackMetric/ValueBackMetric.js

@@ -4,62 +4,97 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _Link = _interopRequireDefault(require("../Link/Link"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const TITLE_LINE_HEIGHT_RATIO = 1.2;
 const VALUE_LINE_HEIGHT_RATIO = 1.2;
 const CAPTION_LINE_HEIGHT_RATIO = 1.5;
-
-// The Figma node binds the header-icon size and the per-part font sizes/weights
-// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
-// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
-// They also intentionally differ from the `metricdata/*` typography defaults
-// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
-// is 16px/500). So the sizes/weights below are encoded as literal constants
-// matching the Figma design exactly. Colours, gaps and padding DO exist as real
-// `metricdata/*` tokens (and match the design), so those resolve through
-// `getVariableByName` and stay themeable.
-const TITLE_FONT_SIZE = 12;
-const TITLE_FONT_WEIGHT = '500';
-const VALUE_FONT_SIZE = 16;
-const VALUE_FONT_WEIGHT = '500';
-const CAPTION_FONT_SIZE = 12;
-const CAPTION_FONT_WEIGHT = '400';
-const FONT_FAMILY = 'JioType Var';
-const CARD_BACKGROUND = '#ffffff';
 const CARD_MIN_HEIGHT = 82;
 const ICON_SIZE = 18;
+const TEXT_WRAP_GAP = 4;
+
 // Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
-// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
-// explicitly to keep the icon flush against the title.
+// shared Icon pulls padding from those tokens, so zero it explicitly.
 const ICON_PADDING_RESET = {
   paddingLeft: 0,
   paddingRight: 0,
   paddingTop: 0,
   paddingBottom: 0
 };
+// The `valueBackMetric/*` layout + typography tokens are bound on the Figma
+// node but are NOT yet in the committed variables snapshot
+// (`npm run tokens -- find valueBackMetric` → no matches). Colours and the
+// header-row gap do exist as `metricdata/*` / `icon/*` tokens. Until the
+// export is re-synced, `getVariableByName` returns undefined for the
+// valueBackMetric names and the Figma-node fallbacks below take over.
+function resolveTokens(modes) {
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontsize', modes) ?? 12;
+  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontweight', modes) ?? 500);
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/value/fontfamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/value/fontsize', modes) ?? 16;
+  // Figma binds the value face to JioType Medium; there is no dedicated
+  // valueBackMetric/value/fontweight token yet, so fall back to 500.
+  const valueFontWeight = '500';
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontfamily', modes) ?? 'JioType Var';
+  const captionFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontsize', modes) ?? 12;
+  const captionFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontweight', modes) ?? 400);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/gap', modes) ?? 4;
+  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
+  // Design padding is 0 — do NOT fall back to metricdata/padding (10).
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/padding/vertical', modes) ?? 0;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/background/color', modes) ?? '#ffffff';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) ?? '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) ?? ICON_SIZE;
+  return {
+    titleColor,
+    titleFontFamily,
+    titleFontSize,
+    titleFontWeight,
+    valueColor,
+    valueFontFamily,
+    valueFontSize,
+    valueFontWeight,
+    captionColor,
+    captionFontFamily,
+    captionFontSize,
+    captionFontWeight,
+    gap,
+    valueWrapGap,
+    paddingHorizontal,
+    paddingVertical,
+    backgroundColor,
+    iconColor,
+    iconSize
+  };
+}
+
 /**
  * ValueBackMetric — a compact, left-aligned "value back" card.
  *
  * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
- * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
- * `value`, `caption` and `linkLabel` each render only when provided; the header
- * (icon + title) always shows.
+ * `value`, a muted `caption`, and an optional bottom CTA (`linkLabel` / `link`
+ * slot, e.g. "Earn"). `value`, `caption` and the CTA each render only when
+ * provided; the header (icon + title) always shows.
  *
- * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
- * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
- * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
- * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
- * purple at 12px like the design (caller `modes` win). The per-part font
- * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
- * not yet in the committed token snapshot, so they are encoded as constants
- * matching the design.
+ * Colours resolve from the `metricdata/*` tokens; the header glyph from the
+ * `icon/*` tokens (default 18px gold); the CTA from the shared {@link Text}
+ * with `Text Appearance: Secondary` + `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). Layout/typography
+ * follow the Figma `valueBackMetric/*` variables — not yet in the committed
+ * token snapshot, so they resolve through `getVariableByName` with Figma-node
+ * fallbacks.
  *
  * @example
  * ```tsx
@@ -79,6 +114,7 @@ function ValueBackMetric({
   value,
   caption,
   linkLabel,
+  link,
   onLinkPress,
   onPress,
   disabled,
@@ -89,82 +125,81 @@ function ValueBackMetric({
   captionStyle,
   accessibilityLabel
 }) {
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
-  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
-  // The design's link is purple (`text/foreground` under `Text Appearance:
-  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
-  // header icon keeps the default gold `icon/color`. Seed only the link's
-  // modes; caller-supplied modes win.
-  const linkModes = _react.default.useMemo(() => ({
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // Figma Code-Connects the CTA to Text (not Link): purple, no underline.
+  // Seed Secondary + Small so it matches the design; caller modes win.
+  const linkModes = (0, _react.useMemo)(() => ({
     'Text Appearance': 'Secondary',
     'Text Sizes': 'Small',
     ...modes
   }), [modes]);
-
-  // The header glyph is token-driven: `icon/color` (gold by default, retinted
-  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
-  // MetricData does — makes the glyph deterministic instead of relying on the
-  // shared Icon's internal token lookups.
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) ?? '#ad8444';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) ?? ICON_SIZE;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes) ?? 4;
-  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes) ?? 10;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes) ?? 10;
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    gap,
-    paddingHorizontal,
-    paddingVertical,
+    gap: tokens.gap,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
     minHeight: CARD_MIN_HEIGHT,
-    backgroundColor: CARD_BACKGROUND
+    backgroundColor: tokens.backgroundColor
   };
   const titleTextStyle = {
-    color: titleColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: TITLE_FONT_SIZE,
-    fontWeight: TITLE_FONT_WEIGHT,
-    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO
+    color: tokens.titleColor,
+    fontFamily: tokens.titleFontFamily,
+    fontSize: tokens.titleFontSize,
+    fontWeight: tokens.titleFontWeight,
+    lineHeight: tokens.titleFontSize * TITLE_LINE_HEIGHT_RATIO
   };
   const valueTextStyle = {
-    color: valueColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: VALUE_FONT_SIZE,
-    fontWeight: VALUE_FONT_WEIGHT,
-    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO
+    color: tokens.valueColor,
+    fontFamily: tokens.valueFontFamily,
+    fontSize: tokens.valueFontSize,
+    fontWeight: tokens.valueFontWeight,
+    lineHeight: tokens.valueFontSize * VALUE_LINE_HEIGHT_RATIO
   };
   const captionTextStyle = {
-    color: captionColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: CAPTION_FONT_SIZE,
-    fontWeight: CAPTION_FONT_WEIGHT,
-    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO
+    color: tokens.captionColor,
+    fontFamily: tokens.captionFontFamily,
+    fontSize: tokens.captionFontSize,
+    fontWeight: tokens.captionFontWeight,
+    lineHeight: tokens.captionFontSize * CAPTION_LINE_HEIGHT_RATIO
   };
-
-  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
-  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
-  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
-  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
-  // Icon instance follows the icon tokens while an Image keeps its own sizing.
   const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     iconName: icon,
-    size: iconSize,
-    color: iconColor,
+    size: tokens.iconSize,
+    color: tokens.iconColor,
     modes: modes,
     style: ICON_PADDING_RESET
   }) : (0, _reactUtils.cloneChildrenWithModes)(icon, modes);
   const hasValue = value !== undefined && value !== null && value !== '';
   const hasCaption = caption !== undefined && caption !== '';
+  const hasLinkSlot = link !== undefined && link !== null && link !== false;
+  const hasLinkLabel = linkLabel !== undefined && linkLabel !== '';
   const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption, linkLabel].filter(Boolean).join(', ') || undefined);
+
+  // Seed Secondary + Small into the CTA slot too, so a bare `<Text text="Earn" />`
+  // matches the design without the consumer re-seeding. Child-level modes still win.
+  const ctaNode = hasLinkSlot ? (0, _reactUtils.cloneChildrenWithModes)(link, linkModes) : hasLinkLabel ? onLinkPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: onLinkPress,
+    accessibilityRole: "link",
+    accessibilityLabel: linkLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      text: linkLabel,
+      textAlign: "Left",
+      modes: linkModes
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    text: linkLabel,
+    textAlign: "Left",
+    modes: linkModes
+  }) : null;
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: valueWrapGap
+        gap: tokens.valueWrapGap
       },
       children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [titleTextStyle, titleStyle],
@@ -174,7 +209,7 @@ function ValueBackMetric({
       style: {
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: 4
+        gap: TEXT_WRAP_GAP
       },
       children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [valueTextStyle, valueStyle],
@@ -183,14 +218,7 @@ function ValueBackMetric({
         style: [captionTextStyle, captionStyle],
         children: caption
       }) : null]
-    }) : null, linkLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
-      text: linkLabel,
-      autolayout: "Hug",
-      modes: linkModes,
-      ...(onLinkPress ? {
-        onPress: onLinkPress
-      } : null)
-    }) : null]
+    }) : null, ctaNode]
   });
   if (onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/index.js

@@ -489,6 +489,12 @@ Object.defineProperty(exports, "InstitutionBadge", {
     return _InstitutionBadge.default;
   }
 });
+Object.defineProperty(exports, "JioDot", {
+  enumerable: true,
+  get: function () {
+    return _AppBar.JioDot;
+  }
+});
 Object.defineProperty(exports, "LazyList", {
   enumerable: true,
   get: function () {
@@ -1062,7 +1068,7 @@ Object.defineProperty(exports, "useToast", {
 var _AccountCard = _interopRequireDefault(require("./AccountCard/AccountCard"));
 var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
 var _Attached = _interopRequireDefault(require("./Attached/Attached"));
-var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
+var _AppBar = _interopRequireWildcard(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
 var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup/AvatarGroup"));
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));