jfs-components 0.0.70 → 0.0.72

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

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
+var _CircularProgressBarDoted = _interopRequireDefault(require("../CircularProgressBarDoted/CircularProgressBarDoted"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveCircularRatingTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/gap', modes), 32);
+  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 footerTextFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontSize', modes), 12);
+  const footerTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/text/fontFamily', modes) || 'JioType Var';
+  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 {
+    containerStyle: {
+      alignItems: 'flex-start',
+      gap,
+      justifyContent: 'center',
+      padding
+    },
+    ratingStyle: {
+      height: 320,
+      width: 320
+    },
+    footerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: footerGap,
+      height: footerHeight,
+      justifyContent: 'center',
+      width: '100%'
+    },
+    footerTextStyle: {
+      color: footerTextColor,
+      fontFamily: footerTextFontFamily,
+      fontSize: footerTextFontSize,
+      fontWeight: footerTextFontWeight,
+      lineHeight: footerTextLineHeight,
+      textAlign: 'center'
+    },
+    footerIconColor: (0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/icon/color', modes) || '#1a1c1f',
+    footerIconSize: toNumber((0, _figmaVariablesResolver.getVariableByName)('circularRating/footer/icon/size', modes), 16)
+  };
+}
+function CircularRating({
+  value = 72,
+  dotCount = 24,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  footerText = 'Updated on 1 March',
+  showFooterIcon = true,
+  showNudge = true,
+  nudgeBody = 'Split this transaction into installments',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  onTierPress,
+  footerSlot,
+  nudgeSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ratingStyle,
+  footerStyle,
+  footerTextStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveCircularRatingTokens(modes), [modes]);
+  const processedFooterSlot = (0, _react.useMemo)(() => {
+    if (!footerSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(footerSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [footerSlot, modes]);
+  const processedNudgeSlot = (0, _react.useMemo)(() => {
+    if (!nudgeSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(nudgeSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [nudgeSlot, modes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${label}. ${Math.round(value)} out of 100. ${tierLabel}. ${footerText}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [tokens.ratingStyle, ratingStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBarDoted.default, {
+        value: value,
+        dotCount: dotCount,
+        label: label,
+        tierLabel: tierLabel,
+        onTierPress: onTierPress,
+        modes: modes
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [tokens.footerStyle, footerStyle],
+      children: processedFooterSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          numberOfLines: 1,
+          style: [tokens.footerTextStyle, footerTextStyle],
+          children: footerText
+        }), showFooterIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "ic_info",
+          size: tokens.footerIconSize,
+          color: tokens.footerIconColor,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no"
+        }) : null]
+      })
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+      type: "inline-compact",
+      body: nudgeBody,
+      buttonLabel: nudgeButtonLabel,
+      onPressButton: onPressNudgeButton,
+      modes: modes,
+      style: [{
+        width: 312
+      }, nudgeStyle]
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CircularRating);

package/lib/commonjs/components/Gauge/Gauge.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const clamp = (value, min, max) => {
+  if (max <= min) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+};
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+const getStrokeColor = (style, fallback) => {
+  const flattened = _reactNative.StyleSheet.flatten(style);
+  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+};
+function Gauge({
+  value = 84,
+  min = 0,
+  max = 100,
+  valueLabel,
+  title = 'Your score is based on strong data',
+  caption = 'Add more details for even better accuracy',
+  supportText = 'Support Text',
+  supportTextStatus = 'Success',
+  showTitle = true,
+  showCaption = true,
+  showSupportText = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  children,
+  style,
+  arcStyle,
+  readoutStyle,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  trackStyle,
+  progressStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const supportTextModes = {
+    ...modes,
+    Status: supportTextStatus
+  };
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/gap', modes), 30);
+  const padding = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/padding', modes), 16);
+  const width = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/width', modes), 299);
+  const arcWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/arc/width', modes), 267);
+  const arcHeight = arcWidth * (186 / 328);
+  const trackSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/track/size', modes), 244);
+  const trackInnerRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/track/radius', modes), 99);
+  const progressInnerRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/progress/radius', modes), 99);
+  const innerRadius = Math.min(trackInnerRadius, progressInnerRadius);
+  const strokeWidth = Math.max(1, trackSize / 2 - innerRadius);
+  const radius = innerRadius + strokeWidth / 2;
+  const centerX = arcWidth / 2;
+  const centerY = Math.min(arcHeight - strokeWidth / 2, radius + strokeWidth / 2);
+  const startX = centerX - radius;
+  const endX = centerX + radius;
+  const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
+  const arcLength = Math.PI * radius;
+  const progress = clamp(value, min, max);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/color', modes) || '#0c0d10';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontSize', modes), 23);
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/lineHeight', modes), 23);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontWeight', modes), '900');
+  const titleHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/height', modes), 46);
+  const readoutGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/gap', modes), 8);
+  const readoutPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/padding', modes), 8);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/color', modes) || '#0c0d10';
+  const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontSize', modes), 36);
+  const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/lineHeight', modes), 36);
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontFamily', modes) || 'JioType Var';
+  const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontWeight', modes), '800');
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/color', modes) || '#0c0d10';
+  const captionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontSize', modes), 14);
+  const captionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/lineHeight', modes), 18);
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontFamily', modes) || 'JioType Var';
+  const captionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontWeight', modes), '500');
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/track/color', modes) || '#f5f5f6');
+  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/progress/color', modes) || '#25ab21');
+  const containerStyle = {
+    alignItems: 'center',
+    gap,
+    padding,
+    width
+  };
+  const computedTitleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight,
+    minHeight: titleHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const computedArcStyle = {
+    height: arcHeight,
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%'
+  };
+  const computedReadoutStyle = {
+    alignItems: 'center',
+    gap: readoutGap,
+    left: 0,
+    padding: readoutPadding,
+    position: 'absolute',
+    right: 0,
+    top: arcHeight * 0.42
+  };
+  const computedValueStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: 'center'
+  };
+  const computedCaptionStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const defaultValueLabel = valueLabel ?? String(Math.round(value));
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${defaultValueLabel} out of ${max}. ${supportText}. ${caption}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min,
+      max,
+      now: value
+    },
+    style: [containerStyle, style],
+    ...rest,
+    children: [showTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [computedTitleStyle, titleStyle],
+      children: title
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [computedArcStyle, arcStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+        width: "100%",
+        height: arcHeight,
+        viewBox: `0 0 ${arcWidth} ${arcHeight}`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: arcPath,
+          stroke: trackColor,
+          strokeWidth: strokeWidth,
+          strokeLinecap: "butt",
+          fill: "none"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: arcPath,
+          stroke: progressColor,
+          strokeWidth: strokeWidth,
+          strokeLinecap: "butt",
+          fill: "none",
+          strokeDasharray: `${arcLength} ${arcLength}`,
+          strokeDashoffset: arcLength * (1 - progress)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [computedReadoutStyle, readoutStyle],
+        children: children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [computedValueStyle, valueStyle],
+            children: defaultValueLabel
+          }), showSupportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+            label: supportText,
+            status: supportTextStatus,
+            modes: supportTextModes
+          }) : null]
+        })
+      })]
+    }), showCaption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [computedCaptionStyle, captionStyle],
+      children: caption
+    }) : null]
+  });
+}
+var _default = exports.default = Gauge;

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -7,7 +7,7 @@ exports.default = HoldingsCard;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _RadioButton = _interopRequireDefault(require("../RadioButton/RadioButton"));
+var _Radio = _interopRequireDefault(require("../Radio/Radio"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -128,7 +128,7 @@ function HoldingsCard({
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
           selected: selected,
           disabled: disabled,
           modes: modes

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Default avatar asset (shared with the Avatar component) so that
+// InstitutionBadge has a sensible visual fallback when no `source` is
+// provided in stories or playgrounds.
+const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveInstitutionBadgeTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/gap', modes), 8);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes) || '#080d1a';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontSize', modes), 14);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/lineHeight', modes), 18);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontWeight', modes), '500');
+
+  // Avatar wrapper styled from shared `avatar/*` tokens so the badge stays
+  // visually consistent with other Avatar-bearing components.
+  const avatarSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes), 36);
+  const avatarRadiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes), 9999);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
+  const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes), 1);
+  return {
+    containerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      borderWidth: avatarBorderSize,
+      borderColor: avatarBorderColor,
+      overflow: 'hidden'
+    },
+    avatarSize,
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// Default Avatar Size = M (36px in tokens) — matches the Figma badge. Callers
+// can override via `modes` if needed.
+const DEFAULT_AVATAR_MODE = 'M';
+function InstitutionBadge({
+  label = 'State Bank of India',
+  source,
+  avatarSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': DEFAULT_AVATAR_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveInstitutionBadgeTokens(avatarModes), [avatarModes]);
+  const processedAvatarSlot = (0, _react.useMemo)(() => {
+    if (!avatarSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(avatarSlot), avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const resolvedSource = source ?? DEFAULT_AVATAR_IMAGE;
+  const defaultAccessibilityLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [processedAvatarSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.avatarStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+        source: resolvedSource,
+        size: tokens.avatarSize,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(InstitutionBadge);

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -52,7 +52,9 @@ function ListGroup({
 }) {
   // Resolve container tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/background', modes) || 'rgba(255,255,255,0)';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/border/color', modes) || 'rgba(255,255,255,0)';
+  // The current exported token aliases a missing Figma variable. Keep the
+  // transparent fallback without logging the missing alias on every render.
+  const borderColor = 'rgba(255,255,255,0)';
   const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listGroup/borderWidth', modes) || 0;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes) || 12;