jfs-components 0.1.50 → 0.1.54

package/lib/module/components/HelloJioInput/HelloJioInput.js

@@ -10,13 +10,21 @@ import GlassFill from '../../utils/GlassFill/GlassFill';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
-const STATE_COLLECTION = 'HelloJioInput State';
+/** Figma collection name — must match `figma-modes.generated.ts` exactly. */
+const STATE_COLLECTION = 'Hello Jio Input State';
 
 /** Default IconButton modes matching the Figma send control. */
 const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
   AppearanceBrand: 'Primary',
   'Button / Size': 'S'
 });
+
+/**
+ * Figma `Hello Jio Input State` only exposes Idle | Active. The component-set
+ * variant IdleJioPlus is glass chrome on top of Idle tokens — never a mode
+ * value for this collection.
+ */
+
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {
     return Number.isFinite(value) ? value : fallback;
@@ -32,6 +40,29 @@ const toFontWeight = (value, fallback) => {
   if (typeof value === 'string') return value;
   return fallback;
 };
+
+/** True when a CSS/RN color string already carries a non-opaque alpha channel. */
+const hasAlphaChannel = color => {
+  const trimmed = color.trim();
+  if (/^#[0-9a-fA-F]{8}$/.test(trimmed)) {
+    const alpha = parseInt(trimmed.slice(7, 9), 16);
+    return alpha < 255;
+  }
+  if (/^#[0-9a-fA-F]{4}$/.test(trimmed)) {
+    const alphaNibble = parseInt(trimmed.slice(3, 4), 16);
+    return alphaNibble < 15;
+  }
+  const func = trimmed.match(/^(rgba|hsla)\(/i);
+  if (func) {
+    const parts = trimmed.slice(trimmed.indexOf('(') + 1, -1).split(',');
+    if (parts.length === 4) {
+      const alpha = Number(parts[3].trim());
+      return Number.isFinite(alpha) && alpha < 1;
+    }
+  }
+  return false;
+};
+
 /**
  * Fallback values from the Figma `HelloJioInput` component when local token
  * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
@@ -51,14 +82,11 @@ const STATE_FALLBACKS = {
     iconColor: '#24262b'
   },
   IdleJioPlus: {
-    // 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.
+    // Frosted IdleJioPlus fill. Figma paints `helloJioInput/background` over
+    // `glass/minimal` blur; the synced token is often opaque `#f5f5f5`, which
+    // would hide the blur. Match sibling GlassFill consumers (FavoriteToggle
+    // `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`) with alpha so the
+    // frost tints the blurred content.
     background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
@@ -88,6 +116,11 @@ function resolveHelloJioInputTokens(modes, visualState) {
   const blurMinimal = toNumber(getVariableByName('blur/minimal', modes), 29);
   const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)));
   const useGlass = visualState === 'IdleJioPlus';
+
+  // Figma IdleJioPlus paints `helloJioInput/background` over `glass/minimal`
+  // blur. The exported token is often opaque `#f5f5f5` (alpha lost in sync),
+  // which would fully hide the blur — keep a translucent frost when needed.
+  const glassOverlay = useGlass ? hasAlphaChannel(background) ? background : STATE_FALLBACKS.IdleJioPlus.background : background;
   return {
     containerStyle: {
       position: 'relative',
@@ -133,7 +166,8 @@ function resolveHelloJioInputTokens(modes, visualState) {
     iconColor,
     iconSize,
     blurIntensity,
-    useGlass
+    useGlass,
+    glassOverlay
   };
 }
 
@@ -180,12 +214,21 @@ const HelloJioInput = /*#__PURE__*/forwardRef(function HelloJioInput({
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const isControlled = value !== undefined;
   const currentValue = isControlled ? value : uncontrolledValue;
+
+  // Component-set visual vs token mode:
+  //  - Idle / Active map 1:1 onto `Hello Jio Input State`
+  //  - IdleJioPlus is Figma chrome (glass) on Idle tokens — never pass
+  //    "IdleJioPlus" into the state collection (that mode does not exist)
   const visualState = isFocused ? 'Active' : jioPlus ? 'IdleJioPlus' : 'Idle';
+  const tokenState = isFocused ? 'Active' : 'Idle';
   const modes = useMemo(() => ({
     ...globalModes,
     ...propModes,
-    [STATE_COLLECTION]: visualState
-  }), [globalModes, propModes, visualState]);
+    [STATE_COLLECTION]: tokenState
+  }), [globalModes, propModes, tokenState]);
+
+  // Defaults first; caller/`modes` may still override Size/Appearance.
+  // Custom chrome that must ignore parent modes belongs in `trailing`.
   const sendButtonModes = useMemo(() => ({
     ...DEFAULT_SEND_BUTTON_MODES,
     ...modes
@@ -233,12 +276,11 @@ const HelloJioInput = /*#__PURE__*/forwardRef(function HelloJioInput({
   const containerStyleArray = [tokens.containerStyle, hoverStyle, disabled ? {
     opacity: 0.5
   } : null, style];
-  const glassOverlay = getVariableByName('helloJioInput/background', modes) ?? STATE_FALLBACKS.IdleJioPlus.background;
   const inner = /*#__PURE__*/_jsxs(_Fragment, {
     children: [tokens.useGlass ? /*#__PURE__*/_jsx(GlassFill, {
       tint: "light",
       intensity: tokens.blurIntensity,
-      overlayColor: glassOverlay,
+      overlayColor: tokens.glassOverlay,
       androidTintWash: false
     }) : null, processedLeading ? /*#__PURE__*/_jsx(View, {
       accessibilityElementsHidden: true,

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -44,7 +44,7 @@ function resolveIconCapsuleTokens(modes) {
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"AppearanceBrand": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  *

package/lib/module/components/MetricData/MetricData.js

@@ -1,13 +1,12 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../Icon/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LINE_HEIGHT_RATIO = 1.2;
-const ICON_SIZE = 18;
 // Figma renders the value-row icon with no surrounding padding; the shared Icon
 // component pulls padding from `icon/padding/*` tokens, so we zero it here.
 const ICON_PADDING_RESET = {
@@ -20,9 +19,10 @@ const ICON_PADDING_RESET = {
  * MetricData — a compact, centered metric block.
  *
  * Stacks a small `title`, a prominent `value` (with an optional leading
- * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
- * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
- * are optional; only `value` is shown by default.
+ * `icon` in a `value wrap` row), and a muted `caption`. Typography, colours,
+ * gaps and padding resolve from the `metricdata/*` design tokens; the leading
+ * glyph uses `icon/*`. `title`, `caption` and `icon` are optional — omit
+ * `icon` to keep the legacy text-only layout.
  *
  * @example
  * ```tsx
@@ -42,10 +42,16 @@ function MetricData({
   captionStyle,
   accessibilityLabel
 }) {
+  // Figma's Metricdata instance seeds Secondary on the nested Icon so the
+  // default glyph is brand purple (`#5d00b5`). Caller `modes` still win.
+  const iconModes = useMemo(() => ({
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
   const titleColor = getVariableByName('metricdata/title/color', modes) ?? '#000000';
   const titleFontFamily = getVariableByName('metricdata/title/fontfamily', modes) ?? 'JioType Var';
   const titleFontSize = getVariableByName('metricdata/title/fontsize', modes) ?? 12;
-  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 400);
+  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 500);
   const valueColor = getVariableByName('metricdata/value/color', modes) ?? '#000000';
   const valueFontFamily = getVariableByName('metricdata/value/fontfamily', modes) ?? 'JioType Var';
   const valueFontSize = getVariableByName('metricdata/value/fontsize', modes) ?? 20;
@@ -53,11 +59,16 @@ function MetricData({
   const captionColor = getVariableByName('metricdata/caption/color', modes) ?? '#777777';
   const captionFontFamily = getVariableByName('metricdata/caption/fontfamily', modes) ?? 'JioType Var';
   const captionFontSize = getVariableByName('metricdata/caption/fontsize', modes) ?? 12;
-  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 500);
+  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 400);
   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;
+
+  // Resolve via getVariableByName so extract-tokens picks up the new bindings;
+  // Icon reads the same tokens when color/size props are omitted.
+  const iconColor = getVariableByName('icon/color', iconModes) ?? '#5d00b5';
+  const iconSize = getVariableByName('icon/size', iconModes) ?? 18;
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
@@ -92,11 +103,12 @@ function MetricData({
   };
   const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
     iconName: icon,
-    size: ICON_SIZE,
-    color: valueColor,
-    modes: modes,
+    size: iconSize,
+    color: iconColor,
+    modes: iconModes,
     style: ICON_PADDING_RESET
-  }) : icon;
+  }) : cloneChildrenWithModes(icon, iconModes);
+  const showValueWrap = iconNode != null || value !== undefined;
   const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption].filter(Boolean).join(', ') || undefined);
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
@@ -107,7 +119,7 @@ function MetricData({
     children: [title !== undefined && title !== '' ? /*#__PURE__*/_jsx(Text, {
       style: [titleTextStyle, titleStyle],
       children: title
-    }) : null, /*#__PURE__*/_jsxs(View, {
+    }) : null, showValueWrap ? /*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -118,7 +130,7 @@ function MetricData({
         style: [valueTextStyle, valueStyle],
         children: value
       }) : value]
-    }), caption !== undefined && caption !== '' ? /*#__PURE__*/_jsx(Text, {
+    }) : null, caption !== undefined && caption !== '' ? /*#__PURE__*/_jsx(Text, {
       style: [captionTextStyle, captionStyle],
       children: caption
     }) : null]

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -176,7 +176,7 @@ function MoneyValue({
   }, [focused, cursorOpacity]);
 
   // Keyboard avoidance — lift the component when the keyboard would cover it.
-  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Uses Keyboard.addListener + measureInWindow overlap math (field-local).
   // Resets when editing ends or the keyboard hides.
   const rootRef = useRef(null);
   const keyboardLift = useRef(new Animated.Value(0)).current;

package/lib/module/components/Nudge/Nudge.js

@@ -15,7 +15,7 @@ function toFontWeight(value, fallback) {
 }
 function resolveNudgeTokens(modes) {
   const background = getVariableByName('nudge/background', modes);
-  const radius = getVariableByName('nudge/radius', modes);
+  const radius = getVariableByName('nudge/borderRadius', modes);
   const paddingH = getVariableByName('nudge/padding/horizontal', modes);
   const paddingV = getVariableByName('nudge/padding/vertical', modes);
   const gap = getVariableByName('nudge/gap', modes);

package/lib/module/components/PdpCcCard/PdpCcCard.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useMemo } from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { View, Pressable, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Title from '../Title/Title';
@@ -9,10 +9,11 @@ import Divider from '../Divider/Divider';
 import Button from '../Button/Button';
 import Image from '../Image/Image';
 import Icon from '../Icon/Icon';
+import MetricData from '../MetricData/MetricData';
 
 /**
  * A single metric column inside the card's stats row: a small title, a bold
- * value and an optional muted caption.
+ * value (optionally preceded by an icon) and an optional muted caption.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
@@ -25,8 +26,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *    `imageSource` for the default image or `media` for a full slot override.
  *  - **Title** — a centered headline + subtitle rendered through the shared
  *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
- *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
- *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns composed via
+ *    {@link MetricData} (title / optional icon + value / caption) separated by
+ *    vertical `Divider`s (`metricdata/*`, `icon/*` tokens).
  *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
  *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
  *
@@ -78,12 +80,16 @@ function PdpCcCard({
   const ctaNode = button ? cloneChildrenWithModes(button, ctaModes) : /*#__PURE__*/_jsx(Button, {
     label: buttonLabel,
     modes: ctaModes,
-    onPress: onButtonPress,
-    leading: buttonIcon ? /*#__PURE__*/_jsx(Icon, {
-      iconName: buttonIcon,
-      size: tokens.buttonIconSize,
-      color: buttonForeground
-    }) : undefined
+    ...(onButtonPress !== undefined ? {
+      onPress: onButtonPress
+    } : null),
+    ...(buttonIcon ? {
+      leading: /*#__PURE__*/_jsx(Icon, {
+        iconName: buttonIcon,
+        size: tokens.buttonIconSize,
+        color: buttonForeground
+      })
+    } : null)
   });
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(View, {
@@ -94,9 +100,15 @@ function PdpCcCard({
       subtitle: subtitle,
       textAlign: "Center",
       modes: modes,
-      numberOfLines: numberOfLines,
-      disableTruncation: disableTruncation,
-      singleLine: singleLine
+      ...(numberOfLines !== undefined ? {
+        numberOfLines
+      } : null),
+      ...(disableTruncation !== undefined ? {
+        disableTruncation
+      } : null),
+      ...(singleLine !== undefined ? {
+        singleLine
+      } : null)
     }), metrics.length > 0 ? /*#__PURE__*/_jsx(View, {
       style: styles.metricsRow,
       children: metrics.map((metric, index) => /*#__PURE__*/_jsxs(React.Fragment, {
@@ -104,9 +116,21 @@ function PdpCcCard({
           direction: "vertical",
           modes: modes,
           style: styles.metricDivider
-        }) : null, /*#__PURE__*/_jsx(Metricdata, {
-          metric: metric,
-          tokens: tokens
+        }) : null, /*#__PURE__*/_jsx(MetricData, {
+          ...(metric.title !== undefined ? {
+            title: metric.title
+          } : null),
+          ...(metric.value !== undefined ? {
+            value: metric.value
+          } : null),
+          ...(metric.caption !== undefined ? {
+            caption: metric.caption
+          } : null),
+          ...(metric.icon !== undefined ? {
+            icon: metric.icon
+          } : null),
+          modes: modes,
+          style: styles.metricCell
         })]
       }, index))
     }) : null, showButton ? ctaNode : null]
@@ -133,29 +157,6 @@ function PdpCcCard({
   });
 }
 
-// ---------------------------------------------------------------------------
-// Metricdata — internal metric column (Figma node 5352:256)
-// ---------------------------------------------------------------------------
-
-function Metricdata({
-  metric,
-  tokens
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: tokens.metric,
-    children: [metric.title != null ? /*#__PURE__*/_jsx(Text, {
-      style: tokens.metricTitle,
-      children: metric.title
-    }) : null, metric.value != null ? /*#__PURE__*/_jsx(Text, {
-      style: tokens.metricValue,
-      children: metric.value
-    }) : null, metric.caption != null ? /*#__PURE__*/_jsx(Text, {
-      style: tokens.metricCaption,
-      children: metric.caption
-    }) : null]
-  });
-}
-
 // ---------------------------------------------------------------------------
 // Tokens / static styles
 // ---------------------------------------------------------------------------
@@ -178,21 +179,6 @@ function resolveTokens(modes) {
   const gap = asNum(getVariableByName('PDPcccard/gap', modes), 12);
   const imageRadius = asNum(getVariableByName('image/radius', modes), 8);
   const buttonIconSize = asNum(getVariableByName('button/iconSize', modes), 16);
-  const metricGap = asNum(getVariableByName('metricdata/gap', modes), 4);
-  const metricPadH = asNum(getVariableByName('metricdata/padding/horizontal', modes), 10);
-  const metricPadV = asNum(getVariableByName('metricdata/padding/vertical', modes), 10);
-  const titleColor = asStr(getVariableByName('metricdata/title/color', modes), '#000000');
-  const titleSize = asNum(getVariableByName('metricdata/title/fontsize', modes), 12);
-  const titleFamily = asStr(getVariableByName('metricdata/title/fontfamily', modes), 'JioType Var');
-  const titleWeight = asStr(getVariableByName('metricdata/title/fontweight', modes), '400');
-  const valueColor = asStr(getVariableByName('metricdata/value/color', modes), '#000000');
-  const valueSize = asNum(getVariableByName('metricdata/value/fontsize', modes), 20);
-  const valueFamily = asStr(getVariableByName('metricdata/value/fontfamily', modes), 'JioType Var');
-  const valueWeight = asStr(getVariableByName('metricdata/value/fontweight', modes), '700');
-  const captionColor = asStr(getVariableByName('metricdata/caption/color', modes), '#777777');
-  const captionSize = asNum(getVariableByName('metricdata/caption/fontsize', modes), 12);
-  const captionFamily = asStr(getVariableByName('metricdata/caption/fontfamily', modes), 'JioType Var');
-  const captionWeight = asStr(getVariableByName('metricdata/caption/fontweight', modes), '500');
   return {
     container: {
       backgroundColor: background,
@@ -204,52 +190,19 @@ function resolveTokens(modes) {
       justifyContent: 'center'
     },
     imageRadius,
-    buttonIconSize,
-    metric: {
-      flex: 1,
-      gap: metricGap,
-      paddingHorizontal: metricPadH,
-      paddingVertical: metricPadV,
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    metricTitle: {
-      color: titleColor,
-      fontSize: titleSize,
-      fontFamily: titleFamily,
-      fontWeight: titleWeight,
-      lineHeight: Math.round(titleSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    },
-    metricValue: {
-      color: valueColor,
-      fontSize: valueSize,
-      fontFamily: valueFamily,
-      fontWeight: valueWeight,
-      lineHeight: Math.round(valueSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    },
-    metricCaption: {
-      color: captionColor,
-      fontSize: captionSize,
-      fontFamily: captionFamily,
-      fontWeight: captionWeight,
-      lineHeight: Math.round(captionSize * 1.2),
-      textAlign: 'center',
-      includeFontPadding: false
-    }
+    buttonIconSize
   };
 }
 const DEFAULT_METRICS = [{
   title: 'Title',
   value: 'Value',
-  caption: 'caption'
+  caption: 'caption',
+  icon: 'ic_card'
 }, {
   title: 'Title',
   value: 'Value',
-  caption: 'caption'
+  caption: 'caption',
+  icon: 'ic_card'
 }];
 const styles = StyleSheet.create({
   mediaSlot: {
@@ -262,6 +215,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'stretch'
   },
+  metricCell: {
+    flex: 1
+  },
   metricDivider: {
     alignSelf: 'center',
     height: '70%'

package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js

@@ -39,6 +39,10 @@ const DEFAULT_ROWS = [{
   label: 'Bonus JioGold',
   showInfo: true,
   values: [false, '1%']
+}, {
+  label: 'Bonus JioSilver',
+  showInfo: true,
+  values: [false, '1%']
 }];
 
 /** Keeps every text layer on a single line. */
@@ -63,13 +67,15 @@ const planColumnStyle = {
  * current plan against one or more alternative plans across a set of feature
  * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
  *
- * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ * Structure: header (from `columns`) + Slot (default table from `rows`, or
+ * custom `children`). Columns use a 1.8fr / 1fr flex ratio (label vs plan).
  *
  * @component
  */
 function PlanComparisonCard({
   columns = DEFAULT_COLUMNS,
   rows = DEFAULT_ROWS,
+  children,
   modes = EMPTY_MODES,
   style
 }) {
@@ -166,6 +172,50 @@ function PlanComparisonCard({
     }
     return cloneChildrenWithModes(value, modes);
   };
+  const defaultTable = /*#__PURE__*/_jsx(View, {
+    style: {
+      width: '100%',
+      backgroundColor: tableBackground,
+      borderWidth: tableBorderSize,
+      borderColor: tableBorderColor,
+      borderRadius: tableRadius,
+      overflow: 'hidden'
+    },
+    children: rows.map((row, rowIndex) => {
+      const isLast = rowIndex === rows.length - 1;
+      const showInfo = row.showInfo || row.onInfoPress != null;
+      return /*#__PURE__*/_jsxs(View, {
+        style: [rowStyle, {
+          borderBottomWidth: isLast ? 0 : cellBorderSize,
+          borderBottomColor: cellBorderColor
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [labelColumnStyle, labelCellStyle],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: labelTextStyle,
+            children: row.label
+          }), showInfo && (row.onInfoPress ? /*#__PURE__*/_jsx(Pressable, {
+            onPress: row.onInfoPress,
+            accessibilityRole: "button",
+            accessibilityLabel: `More information about ${row.label}`,
+            hitSlop: 8,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "ic_info",
+              size: iconSize,
+              color: iconColor
+            })
+          }) : /*#__PURE__*/_jsx(Icon, {
+            name: "ic_info",
+            size: iconSize,
+            color: iconColor
+          }))]
+        }), columns.map((column, colIndex) => /*#__PURE__*/_jsx(View, {
+          style: [planColumnStyle, valueCellStyle],
+          children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+        }, column.label ?? colIndex))]
+      }, row.key ?? `${row.label}-${rowIndex}`);
+    })
+  });
   return /*#__PURE__*/_jsxs(View, {
     style: [{
       gap,
@@ -184,50 +234,7 @@ function PlanComparisonCard({
           children: column.label
         })
       }, column.label ?? index))]
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        width: '100%',
-        backgroundColor: tableBackground,
-        borderWidth: tableBorderSize,
-        borderColor: tableBorderColor,
-        borderRadius: tableRadius,
-        overflow: 'hidden'
-      },
-      children: rows.map((row, rowIndex) => {
-        const isLast = rowIndex === rows.length - 1;
-        const showInfo = row.showInfo || row.onInfoPress != null;
-        return /*#__PURE__*/_jsxs(View, {
-          style: [rowStyle, {
-            borderBottomWidth: isLast ? 0 : cellBorderSize,
-            borderBottomColor: cellBorderColor
-          }],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: [labelColumnStyle, labelCellStyle],
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: labelTextStyle,
-              children: row.label
-            }), showInfo && (row.onInfoPress ? /*#__PURE__*/_jsx(Pressable, {
-              onPress: row.onInfoPress,
-              accessibilityRole: "button",
-              accessibilityLabel: `More information about ${row.label}`,
-              hitSlop: 8,
-              children: /*#__PURE__*/_jsx(Icon, {
-                name: "ic_info",
-                size: iconSize,
-                color: iconColor
-              })
-            }) : /*#__PURE__*/_jsx(Icon, {
-              name: "ic_info",
-              size: iconSize,
-              color: iconColor
-            }))]
-          }), columns.map((column, colIndex) => /*#__PURE__*/_jsx(View, {
-            style: [planColumnStyle, valueCellStyle],
-            children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, column.label ?? colIndex))]
-        }, row.key ?? `${row.label}-${rowIndex}`);
-      })
-    })]
+    }), children != null ? cloneChildrenWithModes(children, modes) : defaultTable]
   });
 }
 export default PlanComparisonCard;

package/lib/module/components/PortfolioHero/PortfolioHero.js

@@ -13,7 +13,7 @@ function PortfolioHero({
   value = '12,000.11',
   currency = '₹',
   modes = {
-    Context3: 'Balance'
+    Context3: 'Balance & Cards'
   },
   children,
   style

package/lib/module/components/Slider/Slider.js

@@ -386,9 +386,9 @@ function resolveTokens(modes) {
   const tooltipBackground = asStr(getVariableByName('tooltip/background', modes), '#0f0d0a');
   const tooltipPaddingH = asNum(getVariableByName('tooltip/padding/horizontal', modes), 12);
   const tooltipPaddingV = asNum(getVariableByName('tooltip/padding/vertical', modes), 8);
-  // Not yet in Coin Variables export (Figma still binds bare local radius/maxWidth).
-  const tooltipRadius = asNum(getVariableByName('tooltip/radius', modes), 8);
-  const tooltipMaxWidth = asNum(getVariableByName('tooltip/maxWidth', modes), 280);
+  // Figma Tooltip binds bare local `radius` / `maxWidth` (not tooltip/*).
+  const tooltipRadius = Number(getVariableByName('radius', modes));
+  const tooltipMaxWidth = Number(getVariableByName('maxWidth', modes));
   const tipWidth = asNum(getVariableByName('tooltip/tipItem/width', modes), 16);
   const tipHeight = asNum(getVariableByName('tooltip/tipItem/height', modes), 8);
   const tooltipLabelColor = asStr(getVariableByName('tooltip/label/color', modes), '#ffffff');