jfs-components 0.1.48 → 0.1.50

package/CHANGELOG.md

@@ -4,7 +4,14 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
-## [0.1.48] - 2026-07-22
+## [0.1.50] - 2026-07-25
+
+- Token resolution pass — remapped unresolved `getVariableByName` refs and bad mode keys against Figma Code Connect / Coin Variables (CardCTA, CategoryCard, Checkbox, CircularProgressBarDoted, DonutChartSummary, ProductMerchandisingCard, ProductOverview, Radio, SavingsGoalSummary, SegmentedControl, SegmentedTrack, Slider, Tooltip, StatusHero, CardFeedback).
+- Coin Variables — repaired broken `nudge/radius` and Badge Semantic Intent System aliases; added `tooltip/radius` and `tooltip/maxWidth`.
+
+---
+
+## [0.1.48] - 2026-07-23
 
 - `CompareTable` (fixed-width scroll mode) — selection cards pin above the scroll surface (`stickyCards`, default `true`); accordion section titles stick under the cards and replace each other as you scroll (`stickyAccordionTitles`, default `true`); gray table-header sticky is now opt-in (`stickyHeaders` default `false`). Selection cards are square (corner radius forced to `0`).
 - `Accordion` — new `showHeader` / `showContent` props so hosts can split sticky titles from bodies in scroll layouts (used by `CompareTable`).

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -75,7 +75,8 @@ function CardCTA({
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes);
   const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes);
   const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes);
-  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingLeft = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/left', modes);
+  const leftPaddingRight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/right', modes);
   const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes);
   const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes);
   const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes);
@@ -221,7 +222,8 @@ function CardCTA({
     flexShrink: 1,
     flexBasis: 0,
     minWidth: 0,
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',
@@ -253,7 +255,7 @@ function CardCTA({
   // space allows and can never collapse below its content.
   const iconCapsuleModes = {
     ...modes,
-    'IconCapsule / Size': 'M',
+    'Icon Capsule Size': 'M',
     Emphasis: 'Medium',
     AppearanceBrand: 'Secondary'
   };
@@ -312,7 +314,8 @@ function CardCTA({
   };
   const sipWrapStyle = {
     width: '100%',
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -35,7 +35,7 @@ function CardFeedback({
   accessibilityLabel
 }) {
   const modes = {
-    'Appearance.System': 'positive',
+    'AppearanceSystem': 'positive',
     'Context': 'Nudge&Alert',
     'Semantic Intent': 'System',
     ...propModes

package/lib/commonjs/components/CategoryCard/CategoryCard.js

@@ -62,10 +62,10 @@ function resolveCategoryCardTokens(modes, active) {
   const backgroundColor = active ? activeBackground : idleBackground;
   const imageSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/image/width', resolvedModes), 36);
   const imageRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('image/radius', resolvedModes), 0);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontFamily', resolvedModes) ?? 'JioType Var';
-  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontSize', resolvedModes), 12);
-  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
-  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontWeight', resolvedModes), '500');
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', resolvedModes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/fontSize', resolvedModes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('label/fontWeight', resolvedModes), '500');
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/color', resolvedModes) ?? '#000000';
   return {
     containerStyle: {

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -107,8 +107,8 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   const idleStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/idle/stroke/color', modes) ?? '#666666';
   const hoverFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)';
   const hoverStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/stroke/color', modes) ?? '#666666';
-  const hoverRing = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hoverRing', modes) ?? 4;
-  const hoverShadow = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
+  const hoverSpread = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/spread/effect1', modes) ?? 4;
+  const hoverShadow = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/shadow/color', modes) ?? 'rgba(0,0,0,0.1)';
   const selectedFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/fill/color', modes) ?? '#cea15a';
   const selectedStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/stroke/color', modes) ?? '#0d0d0d';
   const selectedMarkColor = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/mark/color', modes) ?? '#0f0d0a';
@@ -120,8 +120,6 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   const disabledActiveBg = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/background/color', modes) ?? '#f6d19a';
   const disabledActiveBorder = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/border/color', modes) ?? '#f6d19a';
   const disabledActiveMark = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/mark/color', modes) ?? '#474d54';
-  const selectedHoverShadow = (0, _figmaVariablesResolver.getVariableByName)('selected/hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
-  const hoverShadowSize = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow/size', modes) ?? 4;
   const handlePress = (0, _react.useCallback)(() => {
     if (disabled) return;
     const next = !isChecked;
@@ -166,7 +164,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     if (isChecked) {
@@ -189,7 +187,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: hoverFill,
         borderColor: hoverStroke,
-        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     return {

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -87,18 +87,21 @@ function CircularProgressBarDoted({
   const scoreTierWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTier/width', modes), 116);
   const scoreTrendGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/gap', modes), 2);
   const scoreTrendHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/height', modes), 24);
-  const typographyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('Typography/Font Family', modes);
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/color', modes);
-  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/XS', modes), 12);
-  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body Low (Regular)', modes), '400');
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontSize', modes), 12);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontFamily', modes);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontWeight', modes), '400');
   const scoreColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/color', modes);
   const scoreFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
   const scoreFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontFamily', modes);
   const scoreLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
   const scoreFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900');
   const tierColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/color', modes);
-  const tierFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/M', modes), 16);
-  const tierFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body High', modes), '700');
+  const tierFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontSize', modes), 16);
+  const tierFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontFamily', modes);
+  const tierLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/lineHeight', modes), 20.8);
+  const tierFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontWeight', modes), '700');
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/color', modes);
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/size', modes), 24);
   const dots = (0, _react.useMemo)(() => Array.from({
@@ -159,10 +162,10 @@ function CircularProgressBarDoted({
   };
   const computedLabelStyle = {
     color: labelColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: labelFontFamily,
     fontSize: labelFontSize,
     fontWeight: labelFontWeight,
-    lineHeight: labelFontSize * 1.3,
+    lineHeight: labelLineHeight,
     textAlign: 'center'
   };
   const computedScoreLabelStyle = {
@@ -175,10 +178,10 @@ function CircularProgressBarDoted({
   };
   const computedTierLabelStyle = {
     color: tierColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: tierFontFamily,
     fontSize: tierFontSize,
     fontWeight: tierFontWeight,
-    lineHeight: tierFontSize * 1.3,
+    lineHeight: tierLineHeight,
     textAlign: 'center'
   };
   const resolvedScoreLabel = String(Math.round(normalizedValue));

package/lib/commonjs/components/DonutChartSummary/DonutChartSummary.js

@@ -92,8 +92,13 @@ function DonutChartSummary({
     ...globalModes,
     ...propModes
   };
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('donutChartSummary/gap', modes) ?? 16;
-  const legendGap = (0, _figmaVariablesResolver.getVariableByName)('donutChartSummary/legend/gap', modes) ?? 8;
+
+  // Figma DonutChartSummary (4203:51713) does not expose component-level
+  // gap variables — layout uses unbound 16px (donut→legend) and 8px
+  // (legend rows). Nested `textWrap/gap` / `metricLegendItem/gap` belong
+  // to child components and are not substitutes.
+  const gap = 16;
+  const legendGap = 8;
   const resolvedItems = items && items.length > 0 ? items : DEFAULT_ITEMS;
   const segments = resolvedItems.map((item, index) => ({
     key: item.key ?? `segment-${index}`,

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

@@ -334,7 +334,9 @@ function resolveTokens(modes) {
   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);
   const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var');
-  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontweight', modes), '700');
+  // No `productMerchandisingcard/footer/title/fontweight` in Coin Variables (Figma
+  // binds 700). `typography/title/fontWeight/high` is 800; use body/high (=700).
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('typography/body/fontWeight/high', modes), '700');
   const subtitleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5');
   const subtitleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontsize', modes), 12);
   const subtitleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');

package/lib/commonjs/components/ProductOverview/ProductOverview.js

@@ -35,12 +35,12 @@ const ProductOverview = ({
   const padding = (0, _figmaVariablesResolver.getVariableByName)('productOverview/padding', modes) ?? 24;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/gap', modes) ?? 12;
   const background = (0, _figmaVariablesResolver.getVariableByName)('productOverview/background', modes) ?? '#ffffff';
-  const productNameColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/high/color', modes) ?? '#0d0d0f';
   const productNameFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
   const productNameFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontSize', modes) ?? 26;
   const productNameFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontWeight', modes) ?? 900;
   const productNameLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/lineHeight', modes) ?? 26;
-  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/medium/color', modes) ?? '#1a1c1f';
   const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontFamily', modes) ?? 'JioType Var';
   const descriptionFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontSize', modes) ?? 14;
   const descriptionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontWeight', modes) ?? 500;

package/lib/commonjs/components/Radio/Radio.js

@@ -86,7 +86,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
   }
 
   // Border Color
-  let borderColorVar = `${prefix}/border/color`;
+  // Coin Variables has no `radio/focus/border/color` — focus indication is
+  // the yellow boxShadow ring; stroke reuses the published idle border.
+  let borderColorVar = visualState === 'focus' && !selected ? 'radio/idle/border/color' : `${prefix}/border/color`;
 
   // Border Width
   let borderWidthVar = `${prefix}/border/size`;
@@ -144,7 +146,6 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/width');
     (0, _figmaVariablesResolver.getVariableByName)('radio/height');
-    (0, _figmaVariablesResolver.getVariableByName)('radio/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/boxShadow/size');
@@ -158,13 +159,14 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/selector/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/background/color');
-    (0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/boxShadow/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/selector/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/size');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/border/color');

package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -129,7 +129,7 @@ function SavingsGoalSummary({
   // ~1.2x so descenders never clip on native (same guard `Title` uses).
   const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2));
   const valueFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/high/color', mergedModes) ?? '#0d0d0f';
 
   // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
   // (Figma 12 / 400). Only rendered when a `label` is supplied.
@@ -137,7 +137,7 @@ function SavingsGoalSummary({
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
   const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
   const labelFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/medium/color', mergedModes) ?? '#1a1c1f';
   const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [{
       color: labelColor,

package/lib/commonjs/components/Section/Section.js

@@ -546,6 +546,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
@@ -558,6 +559,7 @@ const sectionBentoUpiRowStyle = {
 function SectionBento({
   navSlot,
   upiSlot,
+  upi = true,
   modes = _reactUtils.EMPTY_MODES,
   style,
   // Same rationale as Section: accepted on the type but unused internally.
@@ -648,7 +650,7 @@ function SectionBento({
         animateExtrasFromIndex: collapsedCount,
         animateContainerLayout: true
       } : null)
-    }), processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), upi && processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: sectionBentoUpiRowStyle,
       children: processedUpiSlot
     })]

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -109,7 +109,7 @@ function SegmentedControl({
   }, [isControlled, onSelectionChange]);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/gap', modes) ?? 8;
   const background = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/background', modes) ?? '#f6f3ff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/radius', modes) ?? 24;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('segment/radius', modes) ?? 20;
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',

package/lib/commonjs/components/SegmentedTrack/SegmentedTrack.js

@@ -96,7 +96,7 @@ function SegmentedTrack({
     ...propModes
   };
   const trackHeight = (0, _figmaVariablesResolver.getVariableByName)('segmentedTrack/height', modes) ?? 24;
-  const trackRadius = (0, _figmaVariablesResolver.getVariableByName)('segmentedTrack/radius', modes) ?? 999;
+  const trackRadius = trackHeight / 2;
   const renderedSegments = renderSegments({
     segments,
     children,

package/lib/commonjs/components/Slider/Slider.js

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

package/lib/commonjs/components/StatusHero/StatusHero.js

@@ -129,7 +129,7 @@ function StatusHero({
       currency: currency,
       modes: {
         ...modes,
-        Context3: 'Balance'
+        Context3: 'Balance & Cards'
       }
     })]
   });

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -195,8 +195,10 @@ function TooltipContent({
   const bgColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes);
   const paddingH = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes));
   const paddingV = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes));
-  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('radius', modes));
-  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes));
+  // Figma still binds bare local radius/maxWidth; published names are tooltip/*.
+  // Not yet in Coin Variables export — fall back to Figma values (8 / 280).
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/radius', modes) ?? 8);
+  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/maxWidth', modes) ?? 280);
   const arrowWidth = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes));
   const arrowHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes));
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes);