jfs-components 0.0.72 → 0.0.73

package/lib/module/components/OTP/OTP.js

@@ -1,13 +1,252 @@
 "use strict";
 
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { View, Text, TextInput as RNTextInput, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportText from '../SupportText/SupportText';
+import Button from '../Button/Button';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
+
+// 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.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
+ */
+export 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] = useState(autoStart ? 'counting' : 'ready');
+  const [secondsLeft, setSecondsLeft] = 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 = useRef(onResend);
+  useEffect(() => {
+    onResendRef.current = onResend;
+  }, [onResend]);
+  const intervalRef = useRef(null);
+  const stopTicker = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const startTicker = 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.
+  useEffect(() => {
+    if (autoStart) startTicker(durationSeconds);
+    return stopTicker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const resend = 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 = useCallback(next => {
+    startTicker(next ?? durationSeconds);
+  }, [durationSeconds, startTicker]);
+  const skip = 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`;
+export function OTPResend({
+  durationSeconds = 30,
+  onResend,
+  autoStart = true,
+  formatCountdown,
+  sendingLabel = 'Sending…',
+  resendLabel = 'Resend',
+  countdownStatus = 'Loading',
+  resendButtonModes,
+  modes: propModes = EMPTY_MODES,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = 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 = 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__*/_jsx(SupportText, {
+      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__*/_jsx(SupportText, {
+      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__*/_jsx(Button, {
+    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,
@@ -22,20 +261,25 @@ function OTP({
   modes: propModes = EMPTY_MODES,
   style,
   supportText,
-  supportTextStatus
+  supportTextStatus,
+  errorMessage,
+  resend,
+  enableSmsAutofill = true
 }) {
   const {
     modes: globalModes
   } = useTokens();
-  const modes = {
+  const modes = useMemo(() => ({
     ...globalModes,
     ...propModes
-  };
+  }), [globalModes, propModes]);
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState(defaultValue);
   const currentValue = isControlled ? controlledValue : internalValue;
   const inputRef = useRef(null);
   const [isFocused, setIsFocused] = useState(false);
+
+  // --- Caret blink (unchanged) ---
   const caretAnim = useRef(new Animated.Value(1)).current;
   useEffect(() => {
     if (!isFocused) return;
@@ -81,7 +325,6 @@ function OTP({
   const otpPaddingV = Number(getVariableByName('otp/padding/vertical', modes)) || 8;
   const slotWidth = Number(getVariableByName('pinSlot/width', modes)) || 48;
   const slotGap = Number(getVariableByName('pinSlot/gap', modes)) || 8;
-  // digit/color has no state variants in Figma — resolved once from the Output collection
   const digitColor = getVariableByName('pinSlot/digit/color', modes) || '#000000';
   const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24;
   const digitFontFamily = getVariableByName('pinSlot/digit/fontFamily', modes) || 'JioType Var';
@@ -90,25 +333,68 @@ function OTP({
   const underlineHeight = Number(getVariableByName('pinSlot/underline/height', modes)) || 2;
   const underlineRadius = Number(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 = useMemo(() => getVariableByName('PinSlot/underline/color', {
+    ...modes,
+    'Input/PINSlot  States': 'Idle'
+  }) || '#303338', [modes]);
+  const activeUnderlineColor = useMemo(() => getVariableByName('PinSlot/underline/color', {
+    ...modes,
+    'Input/PINSlot  States': 'Active'
+  }) || '#5d00b5', [modes]);
+  const errorUnderlineColor = useMemo(() => 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 = 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 Animated.Value(initial));
+    }
+    slotAnimsRef.current = next;
+  }
+  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;
+      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 = {
@@ -128,12 +414,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 = getVariableByName('PinSlot/underline/color', slotModes) || '#303338';
     const slotStyle = {
       width: slotWidth,
       flexDirection: 'column',
@@ -150,11 +430,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 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__*/_jsxs(View, {
       style: slotStyle,
@@ -181,24 +472,67 @@ function OTP({
           }],
           children: '\u00A0'
         })
-      }), /*#__PURE__*/_jsx(View, {
+      }), /*#__PURE__*/_jsx(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 = useMemo(() => isInvalid ? {
+    ...modes,
+    Status: 'Error'
+  } : modes, [modes, isInvalid]);
+  const renderStaticSupportText = overrideStatus => {
     if (!supportText) return null;
     if (typeof supportText === 'string') {
       return /*#__PURE__*/_jsx(SupportText, {
         label: supportText,
-        status: supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral'),
-        modes: modes
+        status: overrideStatus ?? supportTextStatus ?? 'Neutral',
+        modes: supportModes
       });
     }
     return /*#__PURE__*/_jsx(_Fragment, {
-      children: cloneChildrenWithModes(React.Children.toArray(supportText), modes)
+      children: cloneChildrenWithModes(React.Children.toArray(supportText), supportModes)
     });
   };
+  const renderSupportArea = () => {
+    if (isInvalid) {
+      if (errorMessage) {
+        return /*#__PURE__*/_jsx(SupportText, {
+          label: errorMessage,
+          status: "Error",
+          modes: supportModes
+        });
+      }
+      return renderStaticSupportText('Error');
+    }
+    if (resend) {
+      return /*#__PURE__*/_jsx(OTPResend, {
+        ...resend,
+        modes: supportModes
+      });
+    }
+    return renderStaticSupportText();
+  };
   return /*#__PURE__*/_jsxs(Pressable, {
     style: [containerStyle, isDisabled && {
       opacity: 0.4
@@ -216,7 +550,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,
@@ -230,7 +573,7 @@ function OTP({
       children: Array.from({
         length
       }, (_, i) => renderSlot(i))
-    }), renderSupportText()]
+    }), renderSupportArea()]
   });
 }
 export default OTP;

package/lib/module/components/ProductOverview/ProductOverview.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Image from '../Image/Image';
+import ProductLabel from '../ProductLabel/ProductLabel';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 = EMPTY_MODES,
+  style,
+  children
+}) => {
+  const padding = getVariableByName('productOverview/padding', modes) ?? 24;
+  const gap = getVariableByName('productOverview/gap', modes) ?? 12;
+  const background = getVariableByName('productOverview/background', modes) ?? '#ffffff';
+  const productNameColor = getVariableByName('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameFontFamily = getVariableByName('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
+  const productNameFontSize = getVariableByName('productOverview/productName/fontSize', modes) ?? 26;
+  const productNameFontWeight = getVariableByName('productOverview/productName/fontWeight', modes) ?? 900;
+  const productNameLineHeight = getVariableByName('productOverview/productName/lineHeight', modes) ?? 26;
+  const descriptionColor = getVariableByName('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionFontFamily = getVariableByName('productOverview/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = getVariableByName('productOverview/description/fontSize', modes) ?? 14;
+  const descriptionFontWeight = getVariableByName('productOverview/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = getVariableByName('productOverview/description/lineHeight', modes) ?? 18.2;
+  const statGap = getVariableByName('productOverview/stat/gap', modes) ?? 2;
+  const statValueColor = getVariableByName('productOverview/stat/value/color', modes) ?? '#141414';
+  const statValueFontFamily = getVariableByName('productOverview/stat/value/fontFamily', modes) ?? 'JioType Var';
+  const statValueFontSize = getVariableByName('productOverview/stat/value/fontSize', modes) ?? 20;
+  const statValueFontWeight = getVariableByName('productOverview/stat/value/fontWeight', modes) ?? 900;
+  const statValueLineHeight = getVariableByName('productOverview/stat/value/lineHeight', modes) ?? 20;
+  const statLabelColor = productNameColor;
+  const statLabelFontFamily = getVariableByName('productOverview/stat/label/fontFamily', modes) ?? 'JioType Var';
+  const statLabelFontSize = getVariableByName('productOverview/stat/label/fontSize', modes) ?? 12;
+  const statLabelFontWeight = getVariableByName('productOverview/stat/label/fontWeight', modes) ?? 400;
+  const statLabelLineHeight = 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__*/_jsxs(View, {
+    style: [{
+      backgroundColor: background,
+      padding,
+      gap,
+      alignItems: 'center',
+      width: '100%'
+    }, style],
+    children: [imageSource != null && /*#__PURE__*/_jsx(Image, {
+      imageSource: imageSource,
+      ratio: imageRatio,
+      resizeMode: "contain",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/_jsx(ProductLabel, {
+      label: label,
+      ...(labelImageSource != null && {
+        imageSource: labelImageSource
+      }),
+      modes: modes
+    }), productName ? /*#__PURE__*/_jsx(Text, {
+      style: productNameStyle,
+      accessibilityRole: "header",
+      children: productName
+    }) : null, description ? /*#__PURE__*/_jsx(Text, {
+      style: descriptionStyle,
+      children: description
+    }) : null, children ? /*#__PURE__*/_jsx(_Fragment, {
+      children: cloneChildrenWithModes(children, modes)
+    }) : null, showStats && /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: stats.map((stat, index) => /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          alignItems: 'center',
+          gap: statGap,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: statValueStyle,
+          numberOfLines: 1,
+          children: stat.value
+        }), /*#__PURE__*/_jsx(Text, {
+          style: statLabelStyle,
+          numberOfLines: 1,
+          children: stat.label
+        })]
+      }, `${stat.label}-${index}`))
+    })]
+  });
+};
+export default ProductOverview;