jfs-components 0.1.36 → 0.1.49

package/lib/module/components/PageHero/PageHero.js

@@ -33,6 +33,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' }}
@@ -65,6 +66,7 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number(getVariableByName('PageHero/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes));
   const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes));
 
   // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
@@ -109,6 +111,7 @@ function PageHero({
     flexDirection: 'column',
     alignItems: 'center',
     gap,
+    paddingHorizontal,
     width: '100%'
   };
   const textWrapStyle = {

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -42,6 +42,7 @@ function ProductMerchandisingCard({
   title = 'Title',
   subtitle = 'Subtitle',
   badgeLabel,
+  badgeIcon,
   badge,
   showAvatar = true,
   avatarSource,
@@ -96,29 +97,33 @@ function ProductMerchandisingCard({
   }), [modes]);
   const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/_jsx(Badge, {
     label: badgeLabel,
+    leading: badgeIcon,
     modes: badgeModes
   }) : null);
   const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/_jsx(Avatar, {
     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__*/_jsx(Badge, {
     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
@@ -136,7 +141,9 @@ function ProductMerchandisingCard({
   const footerCta = cta ?? /*#__PURE__*/_jsx(Button, {
     label: ctaLabel,
     modes: ctaModes,
-    onPress: onCtaPress
+    ...(onCtaPress != null ? {
+      onPress: onCtaPress
+    } : {})
   });
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [imageSource != null ? /*#__PURE__*/_jsx(Image, {
@@ -297,12 +304,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;
@@ -322,6 +323,7 @@ function resolveTokens(modes) {
   const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16);
   const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16);
   const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2);
+  const textWrapMinWidth = asNum(getVariableByName('productMerchandisingcard/footer/textWrap/minWidth', modes), 100);
   const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29);
   const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
   const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14);
@@ -333,7 +335,20 @@ function resolveTokens(modes) {
   const subtitleWeight = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
   const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
   const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
-  const sbWeight = asStr(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(getVariableByName('badge/label/fontWeight', modes), '600');
+  const sbPadH = asNum(getVariableByName('productMerchandisingcard/specialbadge/padding/horizontal', modes), 6);
+  const sbGap = asNum(getVariableByName('productMerchandisingcard/specialbadge/gap', modes), 4);
+  const sbPadV = asNum(getVariableByName('badge/padding/vertical', modes), 4);
+  const sbRadius = asNum(getVariableByName('badge/radius', modes), 4);
+  const sbLabelColor = asStr(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(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
@@ -345,6 +360,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',
@@ -362,6 +381,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'
     },
@@ -381,8 +403,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,
@@ -408,16 +438,6 @@ const styles = 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/module/components/Section/Section.js

@@ -540,6 +540,7 @@ function SectionSlot({
  * @param {Object} props
  * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
  * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
+ * @param {boolean} [props.upi=true] - Toggles the UPI wrap (Figma boolean property "upi")
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section
@@ -552,6 +553,7 @@ const sectionBentoUpiRowStyle = {
 function SectionBento({
   navSlot,
   upiSlot,
+  upi = true,
   modes = EMPTY_MODES,
   style,
   // Same rationale as Section: accepted on the type but unused internally.
@@ -642,7 +644,7 @@ function SectionBento({
         animateExtrasFromIndex: collapsedCount,
         animateContainerLayout: true
       } : null)
-    }), processedUpiSlot && /*#__PURE__*/_jsx(View, {
+    }), upi && processedUpiSlot && /*#__PURE__*/_jsx(View, {
       style: sectionBentoUpiRowStyle,
       children: processedUpiSlot
     })]

package/lib/module/components/ValueBackMetric/ValueBackMetric.js

@@ -1,60 +1,94 @@
 "use strict";
 
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, Text as RNText, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../Icon/Icon';
-import Link from '../Link/Link';
+import Text from '../Text/Text';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 = getVariableByName('metricdata/title/color', modes) ?? '#000000';
+  const valueColor = getVariableByName('metricdata/value/color', modes) ?? '#000000';
+  const captionColor = getVariableByName('metricdata/caption/color', modes) ?? '#777777';
+  const titleFontFamily = getVariableByName('valueBackMetric/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('valueBackMetric/title/fontsize', modes) ?? 12;
+  const titleFontWeight = String(getVariableByName('valueBackMetric/title/fontweight', modes) ?? 500);
+  const valueFontFamily = getVariableByName('valueBackMetric/value/fontfamily', modes) ?? 'JioType Var';
+  const valueFontSize = 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 = getVariableByName('valueBackMetric/caption/fontfamily', modes) ?? 'JioType Var';
+  const captionFontSize = getVariableByName('valueBackMetric/caption/fontsize', modes) ?? 12;
+  const captionFontWeight = String(getVariableByName('valueBackMetric/caption/fontweight', modes) ?? 400);
+  const gap = getVariableByName('valueBackMetric/gap', modes) ?? 4;
+  const valueWrapGap = getVariableByName('metricdata/valueWrap/gap', modes) ?? 4;
+  // Design padding is 0 — do NOT fall back to metricdata/padding (10).
+  const paddingHorizontal = getVariableByName('valueBackMetric/padding/horizontal', modes) ?? 0;
+  const paddingVertical = getVariableByName('valueBackMetric/padding/vertical', modes) ?? 0;
+  const backgroundColor = getVariableByName('valueBackMetric/background/color', modes) ?? '#ffffff';
+  const iconColor = getVariableByName('icon/color', modes) ?? '#ad8444';
+  const iconSize = 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
@@ -74,6 +108,7 @@ function ValueBackMetric({
   value,
   caption,
   linkLabel,
+  link,
   onLinkPress,
   onPress,
   disabled,
@@ -84,84 +119,83 @@ function ValueBackMetric({
   captionStyle,
   accessibilityLabel
 }) {
-  const titleColor = getVariableByName('metricdata/title/color', modes) ?? '#000000';
-  const valueColor = getVariableByName('metricdata/value/color', modes) ?? '#000000';
-  const captionColor = 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.useMemo(() => ({
+  const tokens = 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 = 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 = getVariableByName('icon/color', modes) ?? '#ad8444';
-  const iconSize = getVariableByName('icon/size', modes) ?? ICON_SIZE;
-  const gap = getVariableByName('metricdata/gap', modes) ?? 4;
-  const valueWrapGap = getVariableByName('metricdata/valueWrap/gap', modes) ?? 4;
-  const paddingHorizontal = getVariableByName('metricdata/padding/horizontal', modes) ?? 10;
-  const paddingVertical = 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__*/_jsx(Icon, {
     iconName: icon,
-    size: iconSize,
-    color: iconColor,
+    size: tokens.iconSize,
+    color: tokens.iconColor,
     modes: modes,
     style: ICON_PADDING_RESET
   }) : 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 ? cloneChildrenWithModes(link, linkModes) : hasLinkLabel ? onLinkPress ? /*#__PURE__*/_jsx(Pressable, {
+    onPress: onLinkPress,
+    accessibilityRole: "link",
+    accessibilityLabel: linkLabel,
+    children: /*#__PURE__*/_jsx(Text, {
+      text: linkLabel,
+      textAlign: "Left",
+      modes: linkModes
+    })
+  }) : /*#__PURE__*/_jsx(Text, {
+    text: linkLabel,
+    textAlign: "Left",
+    modes: linkModes
+  }) : null;
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: valueWrapGap
+        gap: tokens.valueWrapGap
       },
-      children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/_jsx(Text, {
+      children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/_jsx(RNText, {
         style: [titleTextStyle, titleStyle],
         children: title
       }) : null]
@@ -169,23 +203,16 @@ function ValueBackMetric({
       style: {
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: 4
+        gap: TEXT_WRAP_GAP
       },
-      children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+      children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/_jsx(RNText, {
         style: [valueTextStyle, valueStyle],
         children: value
-      }) : value : null, hasCaption ? /*#__PURE__*/_jsx(Text, {
+      }) : value : null, hasCaption ? /*#__PURE__*/_jsx(RNText, {
         style: [captionTextStyle, captionStyle],
         children: caption
       }) : null]
-    }) : null, linkLabel ? /*#__PURE__*/_jsx(Link, {
-      text: linkLabel,
-      autolayout: "Hug",
-      modes: linkModes,
-      ...(onLinkPress ? {
-        onPress: onLinkPress
-      } : null)
-    }) : null]
+    }) : null, ctaNode]
   });
   if (onPress) {
     return /*#__PURE__*/_jsx(Pressable, {

package/lib/module/components/index.js

@@ -3,7 +3,7 @@
 export { default as AccountCard } from './AccountCard/AccountCard';
 export { default as ActionFooter } from './ActionFooter/ActionFooter';
 export { default as Attached } from './Attached/Attached';
-export { default as AppBar } from './AppBar/AppBar';
+export { default as AppBar, JioDot } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';