jfs-components 0.0.74 → 0.0.77

package/lib/commonjs/components/LottiePlayer/LottiePlayer.js

@@ -0,0 +1,116 @@
+"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 _loadNativeLottieView = require("./loadNativeLottieView");
+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); }
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  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 {
+    width,
+    height
+  } = (0, _react.useMemo)(() => resolveSize(size, modes), [size, modes]);
+  const NativeLottieView = (0, _react.useMemo)(() => (0, _loadNativeLottieView.getNativeLottieView)(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width,
+      height
+    }, style],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityLabel ? undefined : true,
+    importantForAccessibility: accessibilityLabel ? 'auto' : 'no',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NativeLottieView, {
+      source: source,
+      autoPlay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(LottiePlayer);

package/lib/commonjs/components/LottiePlayer/LottiePlayer.web.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _loadWebLottieView = require("./loadWebLottieView");
+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); }
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  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 {
+    width,
+    height
+  } = (0, _react.useMemo)(() => resolveSize(size, modes), [size, modes]);
+  const WebLottieView = (0, _react.useMemo)(() => (0, _loadWebLottieView.getWebLottieView)(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width,
+      height,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style
+    },
+    "data-testid": testID,
+    "aria-label": accessibilityLabel,
+    "aria-hidden": accessibilityLabel ? undefined : true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WebLottieView, {
+      animationData: source,
+      autoplay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(LottiePlayer);

package/lib/commonjs/components/LottiePlayer/loadNativeLottieView.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNativeLottieView = getNativeLottieView;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Props we forward to the underlying native Lottie view. */
+
+const INSTALL_HINT = 'LottiePlayer requires lottie-react-native in your app.\n' + '  npm install lottie-react-native\n' + '  cd ios && pod install';
+
+/**
+ * Metro resolves `require('lottie-react-native')` at bundle time even inside
+ * try/catch, which breaks apps that import `jfs-components` without having
+ * the optional peer installed. Splitting the module id into a runtime string
+ * keeps Metro from statically linking it — the native module is loaded only
+ * when present in the consumer's node_modules.
+ */
+function resolveNativeLottieModuleName() {
+  return ['lottie', '-react', '-native'].join('');
+}
+function LottieUnavailableView({
+  style
+}) {
+  if (__DEV__) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [style, {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 196, 0, 0.12)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 196, 0, 0.45)',
+        borderRadius: 8,
+        padding: 8
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: '#8a6d00',
+          fontSize: 11,
+          textAlign: 'center',
+          lineHeight: 15
+        },
+        children: INSTALL_HINT
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style
+  });
+}
+function LottieUnavailable(props) {
+  _react.default.useEffect(() => {
+    if (__DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LottieUnavailableView, {
+    style: props.style
+  });
+}
+let cachedView;
+function getNativeLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveNativeLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/commonjs/components/LottiePlayer/loadWebLottieView.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWebLottieView = getWebLottieView;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Props we forward to the underlying web Lottie view. */
+
+const INSTALL_HINT = 'LottiePlayer requires lottie-react in your app.\n' + '  npm install lottie-react';
+function resolveWebLottieModuleName() {
+  return ['lottie', '-react'].join('');
+}
+function LottieUnavailable(props) {
+  _react.default.useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      ...props.style,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(255, 196, 0, 0.12)',
+      border: '1px solid rgba(255, 196, 0, 0.45)',
+      borderRadius: 8,
+      padding: 8,
+      color: '#8a6d00',
+      fontSize: 11,
+      textAlign: 'center',
+      lineHeight: '15px'
+    },
+    children: typeof __DEV__ !== 'undefined' && __DEV__ ? INSTALL_HINT : null
+  });
+}
+let cachedView;
+function getWebLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveWebLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/commonjs/components/PageHero/PageHero.js

@@ -15,12 +15,14 @@ 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); }
 /**
  * PageHero displays a centered hero block typically used at the top of a page
- * or feature screen. It contains an eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -31,6 +33,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
  * />
  * ```
  */
@@ -43,6 +52,7 @@ function PageHero({
   onButtonPress,
   showButton = true,
   buttonSlot,
+  media,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   testID
@@ -57,6 +67,12 @@ function PageHero({
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
   const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes)) || 0;
   const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+
+  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
+  // Tokens fall back to 117 when not defined in the variables collection,
+  // so the layout stays stable on consumers that haven't tokenized this yet.
+  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || 117;
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || 117;
   const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff';
   const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System';
   const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18;
@@ -132,10 +148,30 @@ function PageHero({
     // shape never does.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+
+  // Sized container for the media slot. Always rendered when `media` is
+  // provided, so the slot has a predictable box (matches Figma frame
+  // 4540:7845 — 117×117 by default) even if the inner element omits its
+  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break
+  // the centered layout.
+  const mediaContent = (0, _react.useMemo)(() => {
+    if (media === undefined || media === null) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: mediaWidth,
+        height: mediaHeight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      children: (0, _reactUtils.cloneChildrenWithModes)(media, modes)
+    });
+  }, [media, mediaWidth, mediaHeight, modes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: textWrapStyle,
       children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: eyebrowStyle,

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -13,6 +13,21 @@ var _reactUtils = require("../../utils/react-utils");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
+const DEFAULT_BUTTON_GROUP_MODES = {
+  AppearanceBrand: 'Secondary',
+  'Button / Size': 'S',
+  Emphasis: 'High'
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
@@ -28,17 +43,19 @@ function RechargeCard({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes) || '#f6f3ff';
+  // Container Tokens (defaults mirror Figma node 2235:937).
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes) || '#ffffff';
   const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/horizontal', modes) || 16, 10);
   const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/vertical', modes) || 20, 10);
   const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/gap', modes) || 20, 10);
   const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes) || 328, 10);
+  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes) || 312, 10);
+  const strokeWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/strokeWidth', modes) || 1, 10);
+  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/stroke/color', modes) || '#ebebed';
 
   // Header Tokens
   const headerGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes) || '#13002d';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes) || '#000000';
   const titleFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontSize', modes) || 12, 10);
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontFamily', modes) || 'JioType Var';
   const titleLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -49,30 +66,25 @@ function RechargeCard({
   const specItemGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/gap', modes) || 4, 10);
 
   // Spec Label Tokens
-  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes) || '#13002d';
+  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes) || '#000000';
   const specLabelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
   const specLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
   const specLabelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
   const specLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
   // Spec Value Tokens
-  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes) || '#310064';
+  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes) || '#000000';
   const specValueFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
   const specValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
   const specValueLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
   const specValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
   // Disclaimer Tokens
-  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes) || '#22004a';
+  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes) || '#000000';
   const disclaimerFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
   const disclaimerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
   const disclaimerLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
   const disclaimerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontWeight', modes) || '400';
-
-  // Button Group Tokens
-  // Handled by ButtonGroup component directly
-
-  // Helpers
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)
@@ -85,6 +97,8 @@ function RechargeCard({
       paddingVertical,
       gap,
       borderRadius: radius,
+      borderWidth: strokeWidth,
+      borderColor: strokeColor,
       minWidth,
       alignItems: 'flex-start'
     }, style],
@@ -105,7 +119,10 @@ function RechargeCard({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
         value: price,
         currency: "\u20B9",
-        modes: modes
+        modes: {
+          ...DEFAULT_MONEY_VALUE_MODES,
+          ...modes
+        }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
@@ -194,10 +211,8 @@ function RechargeCard({
       children: disclaimer
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
       modes: {
-        ...modes,
-        "Appearance.Brand": "Secondary",
-        "Button / Size": "S",
-        "Emphasis": "High"
+        ...DEFAULT_BUTTON_GROUP_MODES,
+        ...modes
       },
       children: actions
     })]

package/lib/commonjs/components/Text/Text.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TEXT_ALIGN_MAP = {
@@ -20,7 +22,10 @@ function Text({
   textAlign = 'Left',
   modes = _reactUtils.EMPTY_MODES,
   style,
-  numberOfLines
+  numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines
 }) {
   const foreground = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType';
@@ -28,6 +33,31 @@ function Text({
   const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500';
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20;
   const letterSpacing = (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5;
+
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const resolvedFontSize = fontSize;
+    const resolvedLineHeight = lineHeight;
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1);
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength = typeof children === 'string' ? children.length : typeof text === 'string' ? text.length : 12;
+    const charWidth = resolvedFontSize * 0.55;
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "text",
+      width: skeletonWidth ?? computedWidth,
+      height: resolvedLineHeight * lines,
+      modes: modes
+    });
+  }
   const textStyle = {
     color: foreground,
     fontFamily: fontFamily,

package/lib/commonjs/components/index.js

@@ -387,6 +387,12 @@ Object.defineProperty(exports, "LottieIntroBlock", {
     return _LottieIntroBlock.default;
   }
 });
+Object.defineProperty(exports, "LottiePlayer", {
+  enumerable: true,
+  get: function () {
+    return _LottiePlayer.default;
+  }
+});
 Object.defineProperty(exports, "MediaCard", {
   enumerable: true,
   get: function () {
@@ -812,6 +818,7 @@ var _LinearMeter = _interopRequireDefault(require("./LinearMeter/LinearMeter"));
 var _LinearProgress = _interopRequireDefault(require("./LinearProgress/LinearProgress"));
 var _ListGroup = _interopRequireDefault(require("./ListGroup/ListGroup"));
 var _LottieIntroBlock = _interopRequireDefault(require("./LottieIntroBlock/LottieIntroBlock"));
+var _LottiePlayer = _interopRequireDefault(require("./LottiePlayer/LottiePlayer"));
 var _ListItem = _interopRequireDefault(require("./ListItem/ListItem"));
 var _MediaCard = _interopRequireDefault(require("./MediaCard/MediaCard"));
 var _MerchantProfile = _interopRequireDefault(require("./MerchantProfile/MerchantProfile"));