jfs-components 0.0.72 → 0.0.73

package/lib/commonjs/components/OTP/OTP.js

@@ -3,17 +3,257 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.OTPResend = OTPResend;
 exports.default = void 0;
+exports.useOtpResend = useOtpResend;
 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 _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
 var _reactUtils = require("../../utils/react-utils");
 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 mode overrides for the resend Button. Per design: a small,
+// low-emphasis, neutral-appearance button. Consumers can override any of
+// these via OTPResendConfig.resendButtonModes.
+const DEFAULT_RESEND_BUTTON_MODES = {
+  AppearanceBrand: 'Neutral',
+  'Button / Size': 'S',
+  Emphasis: 'Low'
+};
+
+// ---------------------------------------------------------------------------
+// useOtpResend — headless state machine for the resend countdown.
+//
+// State machine: counting -> ready -> sending -> counting -> ...
+//
+//   counting  : timer is ticking down; resend button disabled.
+//   ready     : timer elapsed; resend button enabled.
+//   sending   : an in-flight onResend() promise is pending; button shows
+//               a transient "sending" label, prevents double-fire, and
+//               restarts the countdown only on resolve.
+//
+// Designed as a hook so consumers can render any UI they want and still
+// reuse the timing/lifecycle logic. The OTPResend component below is the
+// opinionated default.
+// ---------------------------------------------------------------------------
+
+/**
+ * Headless hook that drives an OTP resend countdown.
+ *
+ * The hook is intentionally UI-agnostic: it returns just enough state
+ * (`state`, `secondsLeft`, plus `resend()` / `restart()` / `skip()`) so
+ * consumers can render their own button, support text, etc. The bundled
+ * `OTPResend` component is the canonical UI on top of this hook.
+ */
+function useOtpResend({
+  durationSeconds = 30,
+  onResend,
+  autoStart = true
+} = {}) {
+  // Initial state: if we're auto-starting, we begin in 'counting' with
+  // the full duration; otherwise we go straight to 'ready' (handy for
+  // flows where a previous screen already triggered the SMS and we
+  // mount with the timer already elapsed).
+  const [state, setState] = (0, _react.useState)(autoStart ? 'counting' : 'ready');
+  const [secondsLeft, setSecondsLeft] = (0, _react.useState)(autoStart ? durationSeconds : 0);
+
+  // Keep a ref to the latest onResend so the resend() callback is stable
+  // even if consumers pass an inline arrow function on every render.
+  const onResendRef = (0, _react.useRef)(onResend);
+  (0, _react.useEffect)(() => {
+    onResendRef.current = onResend;
+  }, [onResend]);
+  const intervalRef = (0, _react.useRef)(null);
+  const stopTicker = (0, _react.useCallback)(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const startTicker = (0, _react.useCallback)(seconds => {
+    stopTicker();
+    const initial = Math.max(0, Math.floor(seconds));
+    if (initial === 0) {
+      setState('ready');
+      setSecondsLeft(0);
+      return;
+    }
+    setState('counting');
+    setSecondsLeft(initial);
+    intervalRef.current = setInterval(() => {
+      setSecondsLeft(prev => {
+        if (prev <= 1) {
+          stopTicker();
+          setState('ready');
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  }, [stopTicker]);
+
+  // Auto-start once on mount if requested. We deliberately omit
+  // `durationSeconds` from the dependency array so changing the prop
+  // mid-flight does not silently reset the countdown — consumers should
+  // call `restart()` explicitly when they want a new duration.
+  (0, _react.useEffect)(() => {
+    if (autoStart) startTicker(durationSeconds);
+    return stopTicker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const resend = (0, _react.useCallback)(async () => {
+    // Guard against double-fire and out-of-state taps (e.g. an
+    // accessibility re-tap while we're already in 'sending').
+    if (state !== 'ready') return;
+    try {
+      setState('sending');
+      const result = onResendRef.current?.();
+      if (result && typeof result.then === 'function') {
+        await result;
+      }
+      startTicker(durationSeconds);
+    } catch (e) {
+      // Surface the failure — the consumer can decide whether to
+      // show a toast, retry, etc. We move back to 'ready' so the
+      // user can try again immediately.
+      setState('ready');
+      throw e;
+    }
+  }, [state, durationSeconds, startTicker]);
+  const restart = (0, _react.useCallback)(next => {
+    startTicker(next ?? durationSeconds);
+  }, [durationSeconds, startTicker]);
+  const skip = (0, _react.useCallback)(() => {
+    stopTicker();
+    setState('ready');
+    setSecondsLeft(0);
+  }, [stopTicker]);
+  return {
+    state,
+    secondsLeft,
+    canResend: state === 'ready',
+    isSending: state === 'sending',
+    resend,
+    restart,
+    skip
+  };
+}
+
+// ---------------------------------------------------------------------------
+// OTPResend — opinionated UI built on useOtpResend.
+//
+// Renders a SupportText line that shows "Resend OTP in {n}s" while the
+// countdown is active, and turns into a tappable "Resend" button once the
+// countdown elapses. Re-tapping is debounced via the hook's state machine.
+//
+// Exported as a standalone so consumers can position it anywhere in their
+// layout (it does not need to live inside <OTP />). When passed via
+// <OTP resend={...} />, OTP renders this internally in the support area.
+// ---------------------------------------------------------------------------
+
+const defaultFormatCountdown = s => `Resend OTP in ${s}s`;
+function OTPResend({
+  durationSeconds = 30,
+  onResend,
+  autoStart = true,
+  formatCountdown,
+  sendingLabel = 'Sending…',
+  resendLabel = 'Resend',
+  countdownStatus = 'Loading',
+  resendButtonModes,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // The Button gets the consumer's modes layered first, then the
+  // component-default brand/size/emphasis trio, and finally any caller
+  // overrides via `resendButtonModes`. Spreading in this order lets
+  // consumers (a) keep theming like Color Mode propagating through,
+  // (b) rely on the small/low/neutral defaults out of the box, and
+  // (c) selectively override e.g. `Button / Size: 'M'` without losing
+  // the other defaults.
+  const resolvedButtonModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    ...DEFAULT_RESEND_BUTTON_MODES,
+    ...resendButtonModes
+  }), [modes, resendButtonModes]);
+  const {
+    state,
+    secondsLeft,
+    canResend,
+    resend
+  } = useOtpResend({
+    durationSeconds,
+    onResend,
+    autoStart
+  });
+  const formatter = formatCountdown ?? defaultFormatCountdown;
+
+  // counting → static SupportText. Not a Pressable: tapping the
+  // countdown should not do anything (it's an inert status line).
+  if (state === 'counting') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: formatter(secondsLeft),
+      status: countdownStatus,
+      modes: modes,
+      style: style
+    });
+  }
+
+  // sending → static SupportText with a transient "Sending…" label so
+  // the user has clear feedback that their tap was received and we
+  // don't accept another tap until the resend completes.
+  if (state === 'sending') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: sendingLabel,
+      status: countdownStatus,
+      modes: modes,
+      style: style
+    });
+  }
+
+  // ready → render a real Button (no leading/trailing icon — design
+  // calls for a clean text-only pill once the countdown elapses). The
+  // Button handles its own pressed/hover states from tokens, so we
+  // don't need to layer extra opacity etc. on top.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: resendLabel,
+    modes: resolvedButtonModes,
+    disabled: !canResend,
+    onPress: () => {
+      // Swallow rejections here — the hook re-throws so callers
+      // wiring useOtpResend directly can react, but at the
+      // component boundary we never want an unhandled promise.
+      resend().catch(() => {});
+    },
+    accessibilityLabel: resendLabel,
+    style: style
+  });
+}
+
+// ---------------------------------------------------------------------------
+// OTP
+// ---------------------------------------------------------------------------
+
 const DIGITS_ONLY = /^\d*$/;
+
+// How long the underline takes to fade in when a slot becomes
+// "highlighted" (filled or actively focused), and to fade out when a slot
+// reverts to idle (e.g. on backspace). The asymmetric durations make the
+// "fades back" cue intentional without being sluggish.
+const SLOT_FADE_IN_MS = 120;
+const SLOT_FADE_OUT_MS = 220;
 function OTP({
   length = 6,
   value: controlledValue,
@@ -28,20 +268,25 @@ function OTP({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   supportText,
-  supportTextStatus
+  supportTextStatus,
+  errorMessage,
+  resend,
+  enableSmsAutofill = true
 }) {
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
-  const modes = {
+  const modes = (0, _react.useMemo)(() => ({
     ...globalModes,
     ...propModes
-  };
+  }), [globalModes, propModes]);
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
   const currentValue = isControlled ? controlledValue : internalValue;
   const inputRef = (0, _react.useRef)(null);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  // --- Caret blink (unchanged) ---
   const caretAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
   (0, _react.useEffect)(() => {
     if (!isFocused) return;
@@ -87,7 +332,6 @@ function OTP({
   const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes)) || 8;
   const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes)) || 48;
   const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes)) || 8;
-  // digit/color has no state variants in Figma — resolved once from the Output collection
   const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes) || '#000000';
   const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes)) || 24;
   const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes) || 'JioType Var';
@@ -96,25 +340,68 @@ function OTP({
   const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes)) || 2;
   const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes)) || 1;
 
-  // --- State-driven slot modes ---
-  // Collection name in Figma is "Input/PINSlot  States" (double space before States).
-  // Only PinSlot/underline/color (capital P/S) lives in this collection with Idle/Active/Error modes.
-  // isInvalid takes priority over active focus; the component maps semantic state → token mode
-  // internally so consumers never need to know the collection key name.
-  const getSlotModes = isActiveSlot => {
-    if (isInvalid) return {
-      ...modes,
-      'Input/PINSlot  States': 'Error'
-    };
-    if (isActiveSlot && isFocused) return {
-      ...modes,
-      'Input/PINSlot  States': 'Active'
-    };
-    return {
-      ...modes,
-      'Input/PINSlot  States': 'Idle'
-    };
-  };
+  // --- Resolve the three underline colors ONCE per render. We then
+  // animate between idle ↔ active per-slot using interpolation; the
+  // error color is applied directly (no animation) when isInvalid.
+  const idleUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
+    ...modes,
+    'Input/PINSlot  States': 'Idle'
+  }) || '#303338', [modes]);
+  const activeUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
+    ...modes,
+    'Input/PINSlot  States': 'Active'
+  }) || '#5d00b5', [modes]);
+  const errorUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
+    ...modes,
+    'Input/PINSlot  States': 'Error'
+  }) || '#d92d20', [modes]);
+
+  // --- Per-slot underline highlight animations ---
+  //
+  // Each slot owns one Animated.Value in [0, 1]. 0 = Idle color, 1 =
+  // Active color. We re-target on every value/focus change:
+  //
+  //   highlighted = isFilled || (isActiveSlot && isFocused)
+  //
+  // Filled slots stay lit, so adding a digit instantly recruits its
+  // slot into the lit cohort. Deleting a digit transitions that slot
+  // (which is no longer the active slot — the cursor moved back) from
+  // 1 → 0, producing the "fades back" cue the design calls for.
+  //
+  // We use useNativeDriver:false because backgroundColor cannot run on
+  // the native driver (it's a JS-thread layout property). The overhead
+  // is fine here: at most `length` (≤ ~8) values transitioning briefly
+  // on each keystroke.
+  const slotAnimsRef = (0, _react.useRef)([]);
+  if (slotAnimsRef.current.length !== length) {
+    const next = [];
+    for (let i = 0; i < length; i++) {
+      const existing = slotAnimsRef.current[i];
+      // Initialize fresh slots to match their *current* highlight
+      // target. This avoids a flash on first mount when consumers
+      // pass a non-empty defaultValue (slots would otherwise fade
+      // in from 0 even though they're already filled).
+      const initial = i < currentValue.length ? 1 : 0;
+      next.push(existing ?? new _reactNative.Animated.Value(initial));
+    }
+    slotAnimsRef.current = next;
+  }
+  (0, _react.useEffect)(() => {
+    const anims = slotAnimsRef.current;
+    const filledLen = currentValue.length;
+    for (let i = 0; i < length; i++) {
+      const slotAnim = anims[i];
+      if (!slotAnim) continue;
+      const isFilled = i < filledLen;
+      const isActiveSlot = i === filledLen && filledLen < length && isFocused;
+      const target = isFilled || isActiveSlot ? 1 : 0;
+      _reactNative.Animated.timing(slotAnim, {
+        toValue: target,
+        duration: target === 1 ? SLOT_FADE_IN_MS : SLOT_FADE_OUT_MS,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [currentValue, isFocused, length]);
 
   // --- Styles ---
   const containerStyle = {
@@ -134,12 +421,6 @@ function OTP({
     const char = currentValue[index];
     const isActiveSlot = index === currentValue.length && currentValue.length < length;
     const isFilled = char !== undefined;
-
-    // Underline color is the only state-sensitive token (lives in "Input/PINSlot  States" collection).
-    // Note: token name is "PinSlot/underline/color" (capital P/S) — different from the static
-    // "pinSlot/underline/color" in the Output collection.
-    const slotModes = getSlotModes(isActiveSlot);
-    const underlineColor = (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', slotModes) || '#303338';
     const slotStyle = {
       width: slotWidth,
       flexDirection: 'column',
@@ -156,11 +437,22 @@ function OTP({
       textAlign: 'center',
       minWidth: '100%'
     };
+
+    // Pull the per-slot animated value (always exists by this point —
+    // we resync the ref array above before render).
+    const slotAnim = slotAnimsRef.current[index] ?? new _reactNative.Animated.Value(0);
+    const interpolatedColor = slotAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [idleUnderlineColor, activeUnderlineColor]
+    });
     const underlineStyle = {
       width: slotWidth,
       height: underlineHeight,
       borderRadius: underlineRadius,
-      backgroundColor: underlineColor
+      // Error state takes precedence and snaps directly to the
+      // error color — animating *to* an error feels less urgent
+      // than the snap, and the design uses an instant transition.
+      backgroundColor: isInvalid ? errorUnderlineColor : interpolatedColor
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: slotStyle,
@@ -187,24 +479,67 @@ function OTP({
           }],
           children: '\u00A0'
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         style: underlineStyle
       })]
     }, index);
   };
-  const renderSupportText = () => {
+
+  // --- Support area rendering ---
+  //
+  // Priority:
+  //   1. isInvalid → errorMessage (with Error status). Falls back to
+  //      `supportText` if errorMessage isn't provided, promoting its
+  //      status to Error.
+  //   2. resend (and !isInvalid) → managed countdown / button.
+  //   3. supportText → user's static support text.
+  //   4. nothing.
+  //
+  // This split keeps validation a parent concern (the component never
+  // tries to "know" what valid means) while still giving consumers a
+  // turnkey error UI when they flip `isInvalid`.
+  //
+  // While `isInvalid` is true we also inject `Status: 'Error'` into the
+  // mode set forwarded to the support area. This lets the SupportText
+  // (and any nested icon) resolve error-themed Figma tokens — foreground
+  // color, icon color, etc. — without consumers having to thread the
+  // collection mode in by hand.
+  const supportModes = (0, _react.useMemo)(() => isInvalid ? {
+    ...modes,
+    Status: 'Error'
+  } : modes, [modes, isInvalid]);
+  const renderStaticSupportText = overrideStatus => {
     if (!supportText) return null;
     if (typeof supportText === 'string') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
         label: supportText,
-        status: supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral'),
-        modes: modes
+        status: overrideStatus ?? supportTextStatus ?? 'Neutral',
+        modes: supportModes
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportText), modes)
+      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportText), supportModes)
     });
   };
+  const renderSupportArea = () => {
+    if (isInvalid) {
+      if (errorMessage) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+          label: errorMessage,
+          status: "Error",
+          modes: supportModes
+        });
+      }
+      return renderStaticSupportText('Error');
+    }
+    if (resend) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(OTPResend, {
+        ...resend,
+        modes: supportModes
+      });
+    }
+    return renderStaticSupportText();
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     style: [containerStyle, isDisabled && {
       opacity: 0.4
@@ -222,7 +557,16 @@ function OTP({
       editable: !isDisabled,
       onFocus: () => setIsFocused(true),
       onBlur: () => setIsFocused(false),
-      caretHidden: true,
+      caretHidden: true
+      // Cross-platform native one-time-code autofill. iOS reads
+      // `textContentType="oneTimeCode"` to surface SMS codes in
+      // the QuickType bar (no library needed). Android reads
+      // `autoComplete="one-time-code"` (the canonical RN value;
+      // also accepted as a hint by the SMS Retriever / SMS User
+      // Consent APIs that the host app wires up natively).
+      ,
+      textContentType: enableSmsAutofill ? 'oneTimeCode' : 'none',
+      autoComplete: enableSmsAutofill ? 'one-time-code' : 'off',
       style: {
         position: 'absolute',
         width: 1,
@@ -236,7 +580,7 @@ function OTP({
       children: Array.from({
         length
       }, (_, i) => renderSlot(i))
-    }), renderSupportText()]
+    }), renderSupportArea()]
   });
 }
 var _default = exports.default = OTP;

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

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _Image = _interopRequireDefault(require("../Image/Image"));
+var _ProductLabel = _interopRequireDefault(require("../ProductLabel/ProductLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_STATS = [{
+  value: '995',
+  label: 'Purity'
+}, {
+  value: '3%',
+  label: 'GST'
+}];
+const ProductOverview = ({
+  imageSource,
+  imageRatio = 288 / 170,
+  labelImageSource,
+  label = 'Gold',
+  productName = '0.5g Gold Coin',
+  description = 'Your gold is insured from our vault to you. If lost or damaged, we’ll replace it.',
+  stats = DEFAULT_STATS,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  children
+}) => {
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('productOverview/padding', modes) ?? 24;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/gap', modes) ?? 12;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('productOverview/background', modes) ?? '#ffffff';
+  const productNameColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
+  const productNameFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontSize', modes) ?? 26;
+  const productNameFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontWeight', modes) ?? 900;
+  const productNameLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/lineHeight', modes) ?? 26;
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontSize', modes) ?? 14;
+  const descriptionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/lineHeight', modes) ?? 18.2;
+  const statGap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/gap', modes) ?? 2;
+  const statValueColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/color', modes) ?? '#141414';
+  const statValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontFamily', modes) ?? 'JioType Var';
+  const statValueFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontSize', modes) ?? 20;
+  const statValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontWeight', modes) ?? 900;
+  const statValueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/lineHeight', modes) ?? 20;
+  const statLabelColor = productNameColor;
+  const statLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontFamily', modes) ?? 'JioType Var';
+  const statLabelFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontSize', modes) ?? 12;
+  const statLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontWeight', modes) ?? 400;
+  const statLabelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/lineHeight', modes) ?? 15.6;
+  const productNameStyle = {
+    color: productNameColor,
+    fontFamily: productNameFontFamily,
+    fontSize: productNameFontSize,
+    fontWeight: String(productNameFontWeight),
+    lineHeight: productNameLineHeight,
+    textAlign: 'center'
+  };
+  const descriptionStyle = {
+    color: descriptionColor,
+    fontFamily: descriptionFontFamily,
+    fontSize: descriptionFontSize,
+    fontWeight: String(descriptionFontWeight),
+    lineHeight: descriptionLineHeight,
+    textAlign: 'center'
+  };
+  const statValueStyle = {
+    color: statValueColor,
+    fontFamily: statValueFontFamily,
+    fontSize: statValueFontSize,
+    fontWeight: String(statValueFontWeight),
+    lineHeight: statValueLineHeight
+  };
+  const statLabelStyle = {
+    color: statLabelColor,
+    fontFamily: statLabelFontFamily,
+    fontSize: statLabelFontSize,
+    fontWeight: String(statLabelFontWeight),
+    lineHeight: statLabelLineHeight,
+    textAlign: 'center'
+  };
+  const showStats = Array.isArray(stats) && stats.length > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      backgroundColor: background,
+      padding,
+      gap,
+      alignItems: 'center',
+      width: '100%'
+    }, style],
+    children: [imageSource != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      imageSource: imageSource,
+      ratio: imageRatio,
+      resizeMode: "contain",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductLabel.default, {
+      label: label,
+      ...(labelImageSource != null && {
+        imageSource: labelImageSource
+      }),
+      modes: modes
+    }), productName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: productNameStyle,
+      accessibilityRole: "header",
+      children: productName
+    }) : null, description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: descriptionStyle,
+      children: description
+    }) : null, children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+    }) : null, showStats && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: stats.map((stat, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          alignItems: 'center',
+          gap: statGap,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: statValueStyle,
+          numberOfLines: 1,
+          children: stat.value
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: statLabelStyle,
+          numberOfLines: 1,
+          children: stat.label
+        })]
+      }, `${stat.label}-${index}`))
+    })]
+  });
+};
+var _default = exports.default = ProductOverview;