jfs-components 0.1.8 → 0.1.17

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
 /**
@@ -102,7 +103,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   } = useFocusVisible();
   const size = (0, _figmaVariablesResolver.getVariableByName)('checkbox/size', modes) ?? 18;
   const radius = (0, _figmaVariablesResolver.getVariableByName)('checkbox/radius', modes) ?? 4;
-  const strokeWidth = (0, _figmaVariablesResolver.getVariableByName)('strokeWidth', modes) ?? 1;
+  const strokeWidth = 1;
   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';
@@ -157,7 +158,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
       };
     }
     if (isChecked && isHovered) {
@@ -165,7 +166,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
       };
     }
     if (isChecked) {
@@ -180,7 +181,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: focusFill,
         borderColor: focusStroke,
-        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
       };
     }
     if (isHovered) {
@@ -188,7 +189,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: hoverFill,
         borderColor: hoverStroke,
-        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
       };
     }
     return {
@@ -228,12 +229,4 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
     })
   });
 });
-function boxShadow(value) {
-  if (_reactNative.Platform.OS === 'web') {
-    return {
-      boxShadow: value
-    };
-  }
-  return {};
-}
 var _default = exports.default = Checkbox;

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -21,7 +21,7 @@ function ChipGroup({
   testID
 }) {
   // --- Token Resolution ---
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10) || 8;
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10);
 
   // --- Styles ---
   const containerStyle = {

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -32,23 +32,23 @@ function ChipSelect({
   };
 
   // --- Token Resolution ---
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/gap', resolvedModes), 10) || 4;
-  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/radius', resolvedModes), 10) || 999;
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/gap', resolvedModes), 10);
+  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/horizontal', resolvedModes), 10);
+  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/vertical', resolvedModes), 10);
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/radius', resolvedModes), 10);
 
   // Background
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/background', resolvedModes) || '#f5f5f5';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/background', resolvedModes);
 
   // Text Styles
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontSize', resolvedModes), 10) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/lineHeight', resolvedModes), 10) || 32;
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontWeight', resolvedModes) || '700';
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/foreground', resolvedModes);
+  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontSize', resolvedModes), 10);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontFamily', resolvedModes);
+  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/lineHeight', resolvedModes), 10);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontWeight', resolvedModes);
 
   // Icon Styles
-  const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/icon/size', resolvedModes), 10) || 16;
+  const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/icon/size', resolvedModes), 10);
 
   // --- Styles ---
   const containerStyle = {

package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js

@@ -36,8 +36,11 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 const getStrokeColor = (style, fallback) => {
+  // `StyleSheet.flatten(undefined)` returns `undefined`, so guard before
+  // reading `backgroundColor` — otherwise omitting the optional style prop
+  // crashes with "Cannot read property 'backgroundColor' of undefined".
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return typeof flattened?.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBar({
   value = 70,
@@ -51,6 +54,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -78,13 +82,13 @@ function CircularProgressBar({
   const radius = Math.max(0, (size - strokeWidth) / 2);
   const center = size / 2;
   const circumference = 2 * Math.PI * radius;
-  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes) || '#ebebed');
-  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes) || '#25ab21');
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes) || '#666666';
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes));
+  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes));
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes);
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/size', modes), 24);
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes) || '#0d0d0f';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes);
   const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontSize', modes), 18);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes) || 'JioType Var';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes);
   const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/lineHeight', modes), 21);
   const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontWeight', modes), '700');
   const supportFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontSize', modes), 11);
@@ -175,11 +179,11 @@ function CircularProgressBar({
       pointerEvents: "none",
       children: [hasSupportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [computedSupportTextStyle, supportTextStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: supportText
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [computedValueStyle, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: displayValue
       })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMinus.IconMinus, {

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

@@ -36,7 +36,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getBackgroundColor = (style, fallback) => {
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBarDoted({
   value = 72,
@@ -59,6 +59,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }) {
@@ -79,26 +80,26 @@ function CircularProgressBarDoted({
   const outerDotSize = dotSize;
   const ringSize = layoutSize;
   const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);
-  const trackDotColor = getBackgroundColor(trackDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/trackDot/bg', modes) || '#ebebed');
-  const progressDotColor = getBackgroundColor(progressDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/progressDot/bg', modes) || '#25ab21');
+  const trackDotColor = getBackgroundColor(trackDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/trackDot/bg', modes));
+  const progressDotColor = getBackgroundColor(progressDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/progressDot/bg', modes));
   const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/gap', modes), 12);
   const scoreTierGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTier/gap', modes), 6);
   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) || 'JioType Var';
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/color', modes) || '#080d1a';
+  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 scoreColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/color', modes) || '#080d1a';
+  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) || 'JioType Var';
+  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) || '#080d1a';
+  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 iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/color', modes) || '#303338';
+  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({
     length: resolvedDotCount
@@ -193,7 +194,7 @@ function CircularProgressBarDoted({
   };
   const trendContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: [computedTierLabelStyle, tierLabelStyle],
       children: tierLabel
     }), showChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconChevronright.IconChevronright, {

package/lib/commonjs/components/CircularRating/CircularRating.js

@@ -39,9 +39,9 @@ function resolveCircularRatingTokens(modes) {
   const padding = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/padding', modes), 10);
   const footerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/gap', modes), 4);
   const footerHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/height', modes), 16);
-  const footerTextColor = (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/color', modes) || '#0d0d0f';
+  const footerTextColor = (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/color', modes);
   const footerTextFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontSize', modes), 12);
-  const footerTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontFamily', modes) || 'JioType Var';
+  const footerTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontFamily', modes);
   const footerTextLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/lineHeight', modes), 16);
   const footerTextFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontWeight', modes), '400');
   return {
@@ -71,7 +71,7 @@ function resolveCircularRatingTokens(modes) {
       lineHeight: footerTextLineHeight,
       textAlign: 'center'
     },
-    footerIconColor: (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/icon/color', modes) || '#1a1c1f',
+    footerIconColor: (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/icon/color', modes),
     footerIconSize: toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/icon/size', modes), 16)
   };
 }
@@ -96,6 +96,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -135,7 +136,7 @@ function CircularRating({
       style: [tokens.footerStyle, footerStyle],
       children: processedFooterSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           style: [tokens.footerTextStyle, footerTextStyle],
           children: footerText
         }), showFooterIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/ClusterBubble/ClusterBubble.js

@@ -88,7 +88,8 @@ function ClusterBubble({
   circleStyle,
   style,
   modes: propModes = _reactUtils.EMPTY_MODES,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -135,7 +136,7 @@ function ClusterBubble({
     if (typeof node === 'string' || typeof node === 'number') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [baseStyle, override],
-        numberOfLines: 2,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
         children: node
       });
     }

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _Accordion = _interopRequireDefault(require("../Accordion/Accordion"));
+var _Table = _interopRequireDefault(require("../Table/Table"));
 var _Image = _interopRequireDefault(require("../Image/Image"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
@@ -109,7 +110,8 @@ function CompareTable({
   addColumnLabel = 'Add a card',
   maxColumns = 4,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -123,6 +125,11 @@ function CompareTable({
   const cardLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = (0, _figmaVariablesResolver.getVariableByName)('image/radius', modes) ?? 8;
+  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
+  // The published token store is still out of sync (the variable resolves to
+  // `0` in the design), so the read falls back to `0` and will pick up a
+  // rounded value automatically once the store syncs.
+  const cardRadius = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/radius', modes) ?? 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -132,30 +139,35 @@ function CompareTable({
   const addBorderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', modes) ?? 1;
   const addPadding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', modes) ?? 11;
   const addIconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', modes) ?? 18;
+  // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+  // circle"), mirroring IconButton's own resolution.
+  const addRadius = (0, _figmaVariablesResolver.getVariableByName)('iconButton/radius', modes) ?? 9999;
   const addBg = ADD_BUTTON_BG;
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
   // --- table header tokens --------------------------------------------------
-  const headerBg = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/background/color', modes) ?? '#f5f5f5';
-  const headerLabelColor = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/color', modes) ?? '#000000';
-  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontsize', modes) ?? 14;
-  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
-  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontweight', modes) ?? 600;
-  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/horizontal', modes) ?? 12;
-  const headerPaddingV = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/vertical', modes) ?? 12;
+  const headerBg = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/vertical', modes) ?? 12;
 
   // --- table cell tokens ----------------------------------------------------
-  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/color', modes) ?? '#eeeeee';
-  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/size', modes) ?? 1;
-  const cellBg = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/background/color', modes) ?? '#ffffff';
-  const cellLabelColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/color', modes) ?? '#000000';
-  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontsize', modes) ?? 14;
-  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
-  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontweight', modes) ?? 400;
-  const cellPaddingH = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/horizontal', modes) ?? 12;
-  const cellPaddingV = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/vertical', modes) ?? 12;
+  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/size', modes) ?? 1;
+  const cellBg = (0, _figmaVariablesResolver.getVariableByName)('tableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = (0, _figmaVariablesResolver.getVariableByName)('tableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = (0, _figmaVariablesResolver.getVariableByName)('tableCell/padding/vertical', modes) ?? 12;
   const columnCount = columns.length;
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
+  /** Grid columns shared by the selection-card row and every table row. */
+  const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -190,6 +202,7 @@ function CompareTable({
     minWidth: 0,
     minHeight: 147,
     backgroundColor: cardBg,
+    borderRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -214,7 +227,7 @@ function CompareTable({
         accessibilityLabel: column.label
       }), column.label != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: cardLabelStyle,
-        numberOfLines: 2,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
         children: column.label
       }), column.actionLabel != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: column.onActionPress,
@@ -251,7 +264,7 @@ function CompareTable({
       style: {
         width: addPadding * 2 + addIconSize,
         height: addPadding * 2 + addIconSize,
-        borderRadius: 9999,
+        borderRadius: addRadius,
         borderWidth: addBorderSize,
         borderColor: addBorderColor,
         backgroundColor: addBg,
@@ -267,7 +280,7 @@ function CompareTable({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: cardLabelStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: addColumnLabel
     })]
   }, "__add_card__");
@@ -290,53 +303,72 @@ function CompareTable({
     }
     return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
   };
-  const renderTable = section => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // Renders a section's comparison grid using the shared `Table` component.
+  // CompareTable keeps ownership of token resolution and passes the resolved
+  // values as style overrides so the appearance is byte-identical to the
+  // previous hand-rolled grid (full outer border + suppressed last-edge
+  // dividers), while reusing Table's structure and `modes` cascade.
+  //
+  // When the "Add a card" tile is visible, each table row appends an empty
+  // trailing cell with the same flex weight so data columns stay 1:1 beneath
+  // their selection card.
+  const renderTableCell = (content, colIndex, isLastRow, key) => {
+    const isLastCol = colIndex === gridColumnCount - 1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Cell, {
+      modes: modes,
+      flex: 1,
+      align: "left",
+      isLastColumn: isLastCol,
+      isLastRow: isLastRow,
+      style: {
+        backgroundColor: cellBg,
+        borderColor: cellBorderColor,
+        borderRightWidth: isLastCol ? 0 : cellBorderSize,
+        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+        paddingHorizontal: cellPaddingH,
+        paddingVertical: cellPaddingV
+      },
+      children: content
+    }, key);
+  };
+  const renderTable = section => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.default, {
+    modes: modes,
     style: {
       width: '100%',
       borderWidth: cellBorderSize,
-      borderColor: cellBorderColor,
-      overflow: 'hidden'
+      borderColor: cellBorderColor
     },
-    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Header, {
+      modes: modes,
       style: {
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
         borderBottomWidth: cellBorderSize,
         borderBottomColor: cellBorderColor
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), section.rows.map((row, rowIndex) => {
-      const isLastRow = rowIndex === section.rows.length - 1;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.HeaderCell, {
+        modes: modes,
+        flex: 1,
         style: {
-          flexDirection: 'row',
-          width: '100%'
+          backgroundColor: headerBg,
+          paddingHorizontal: headerPaddingH,
+          paddingVertical: headerPaddingV
         },
-        children: Array.from({
-          length: columnCount
-        }).map((_, colIndex) => {
-          const isLastCol = colIndex === columnCount - 1;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: {
-              flex: 1,
-              minWidth: 0,
-              backgroundColor: cellBg,
-              justifyContent: 'center',
-              paddingHorizontal: cellPaddingH,
-              paddingVertical: cellPaddingV,
-              borderRightWidth: isLastCol ? 0 : cellBorderSize,
-              borderRightColor: cellBorderColor,
-              borderBottomWidth: isLastRow ? 0 : cellBorderSize,
-              borderBottomColor: cellBorderColor
-            },
-            children: renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, colIndex);
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: section.header
         })
-      }, row.key ?? rowIndex);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Body, {
+      modes: modes,
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.default.Row, {
+          modes: modes,
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
+      })
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -361,9 +393,6 @@ function CompareTable({
         title: section.title,
         defaultExpanded: section.defaultExpanded ?? index === 0,
         modes: modes,
-        style: {
-          paddingHorizontal: headerPaddingH
-        },
         children: renderTable(section)
       }, section.key ?? section.title ?? index))
     })]

package/lib/commonjs/components/CoverageBarComparison/CoverageBarComparison.js

@@ -142,7 +142,8 @@ function CoverageBarComparison({
   chartStyle,
   legendStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -228,7 +229,7 @@ function CoverageBarComparison({
             minWidth: 1
           },
           children: [hasLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [computedLabelStyle, labelStyle],
             children: original.label
           }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(BarShape, {

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -31,24 +31,24 @@ function DebitCard({
     ...globalModes,
     ...propModes
   };
-  const background = (0, _figmaVariablesResolver.getVariableByName)('debitCard/background', modes) || '#cea15a';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/radius', modes) || 16;
-  const width = (0, _figmaVariablesResolver.getVariableByName)('debitCard/width', modes) || 328;
-  const height = (0, _figmaVariablesResolver.getVariableByName)('debitCard/height', modes) || 224;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/padding/bottom', modes) || 24;
-  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/horizontal', modes) || 20;
-  const headerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/top', modes) || 16;
-  const headerPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/bottom', modes) || 28;
-  const cardArtHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/height', modes) || 50;
-  const cardArtRadius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/radius', modes) || 4;
-  const footerGap = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/gap', modes) || 16;
-  const footerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/horizontal', modes) || 20;
-  const footerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/top', modes) || 16;
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('debitCard/foreground', modes) || '#141414';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontSize', modes) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontFamily', modes) || 'JioType Var';
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/lineHeight', modes) || 17;
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontWeight', modes) || 500;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('debitCard/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/radius', modes);
+  const width = (0, _figmaVariablesResolver.getVariableByName)('debitCard/width', modes);
+  const height = (0, _figmaVariablesResolver.getVariableByName)('debitCard/height', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/padding/bottom', modes);
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/horizontal', modes);
+  const headerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/top', modes);
+  const headerPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/bottom', modes);
+  const cardArtHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/height', modes);
+  const cardArtRadius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/radius', modes);
+  const footerGap = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/gap', modes);
+  const footerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/horizontal', modes);
+  const footerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/top', modes);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('debitCard/foreground', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontSize', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontFamily', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/lineHeight', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const containerStyle = {
     backgroundColor: background,

package/lib/commonjs/components/Disclaimer/Disclaimer.js

@@ -49,11 +49,11 @@ function Disclaimer({
     ...propModes
   };
   // Resolve typography and color from Figma variables
-  const color = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/color', modes) || '#24262b';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontSize', modes) || 10;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/lineHeight', modes) || 12;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontWeight', modes) || 500;
+  const color = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/color', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontSize', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/lineHeight', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontFamily', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const baseTextStyle = {
     color,