jfs-components 0.0.99 → 0.1.2

package/lib/module/components/Accordion/Accordion.js

@@ -6,9 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
-
-// Enable LayoutAnimation on Android
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -92,7 +92,7 @@ const defaultFormatX = label => String(label);
  * @component
  */
 function AreaLineChart({
-  series,
+  series = [],
   xLabels,
   yMin,
   yMax,

package/lib/module/components/Balance/Balance.js

@@ -4,8 +4,15 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The Balance design renders its money value at the 36 px / 900-weight scale.
+// The `moneyValue/*` tokens alias into the `Context3` collection, where the
+// `Balance & Cards` mode supplies those larger values. Applied *before* the
+// caller's `modes` so any consumer can still override individual keys.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * Balance component that displays a title and a monetary value.
  *
@@ -29,7 +36,7 @@ function Balance({
   // Title styles
   const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10';
   const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14;
-  const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System';
+  const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'JioType Var';
   const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18;
   const titleFontWeightValue = getVariableByName('balance/title/fontWeight', modes) ?? 500;
   const titleFontWeight = typeof titleFontWeightValue === 'number' ? titleFontWeightValue.toString() : titleFontWeightValue;
@@ -46,15 +53,13 @@ function Balance({
     fontWeight: titleFontWeight
   };
 
-  // Handle slot children or default content
-  const content = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        modes
-      });
-    }
-    return child;
-  });
+  // The money value renders at the Balance & Cards scale. Merge the default
+  // context mode first so the caller's `modes` can still override it, and
+  // force that context onto any slotted children so custom money values match.
+  const moneyValueModes = {
+    ...DEFAULT_MONEY_VALUE_MODES,
+    ...modes
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     "data-node-id": "1986:6203",
@@ -62,10 +67,10 @@ function Balance({
       style: titleStyle,
       "data-node-id": "1986:2613",
       children: title
-    }), children ? content : /*#__PURE__*/_jsx(MoneyValue, {
+    }), children ? cloneChildrenWithModes(children, modes, DEFAULT_MONEY_VALUE_MODES) : /*#__PURE__*/_jsx(MoneyValue, {
       value: amount,
       currency: currency,
-      modes: modes
+      modes: moneyValueModes
     })]
   });
 }

package/lib/module/components/Card/Card.js

@@ -4,13 +4,12 @@ import React, { createContext, useContext, isValidElement, cloneElement } from '
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
  * needing explicit mode prop passing for every child.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CardContext = /*#__PURE__*/createContext({});
 /**
  * Card component implementation from Figma node 765:6186.

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -4,11 +4,10 @@ import React, { createContext, useContext, isValidElement, cloneElement } from '
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CardFeedbackContext = /*#__PURE__*/createContext({});
 /**
  * CardFeedback component from Figma node 1280:4481.

package/lib/module/components/Checkbox/Checkbox.js

@@ -5,13 +5,12 @@ import { Pressable, Platform, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
  * Capture-phase document listeners fire before any element-level handlers,
  * so the flag is always up-to-date when onFocus runs.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function useFocusVisible() {
   const [isFocusVisible, setIsFocusVisible] = useState(false);
   const hadKeyboardEventRef = useRef(false);

package/lib/module/components/Drawer/Drawer.js

@@ -6,6 +6,7 @@ import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handl
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Overlay from '../Overlay/Overlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
@@ -67,7 +68,9 @@ function DrawerInner({
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
-  onStateChange
+  onStateChange,
+  showOverlay = false,
+  onOverlayPress
 }, ref) {
   const {
     height: screenHeight
@@ -365,10 +368,15 @@ function DrawerInner({
     // Per the standard react-native-gesture-handler architecture, a single
     // GestureHandlerRootView must wrap the app root; this overlay only needs to
     // let touches fall through where the sheet isn't.
-    _jsx(View, {
+    _jsxs(View, {
       style: [styles.host, style],
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(GestureDetector, {
+      children: [showOverlay ? /*#__PURE__*/_jsx(Overlay, {
+        modes: modes,
+        ...(onOverlayPress ? {
+          onPress: onOverlayPress
+        } : {})
+      }) : null, /*#__PURE__*/_jsx(GestureDetector, {
         gesture: gesture,
         children: /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.sheet, {
@@ -441,7 +449,7 @@ function DrawerInner({
             })]
           })
         })
-      })
+      })]
     })
   );
 }

package/lib/module/components/Dropdown/Dropdown.js

@@ -170,18 +170,34 @@ export function Dropdown({
   const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
   const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
   const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
-  const containerStyle = {
+
+  // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
+  // On native, clipping a view also clips its shadow (iOS clips the layer
+  // shadow; Android clips the elevation shadow), so the soft popup shadow
+  // that renders fine on web (CSS box-shadow paints outside the box) would
+  // get cut off. The rounded-corner clipping is moved to a separate inner
+  // view below.
+  //
+  // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
+  // single source of truth so the designed color/offset/blur are honored on
+  // iOS, Android AND web. We intentionally do NOT also set the legacy
+  // `shadow*` / `elevation` props: on the new architecture (and web) those
+  // are translated into a box-shadow internally, so combining them with an
+  // explicit `boxShadow` would stack two shadows. Android's legacy
+  // `elevation` is also undesirable here because it ignores the shadow color
+  // and only paints a generic gray shadow.
+  const shadowStyle = {
     backgroundColor: background,
+    borderRadius: radius,
+    boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`
+  };
+
+  // Inner view carries the rounded corners + clipping so list/scroll content
+  // stays inside the radius without affecting the outer view's shadow.
+  const clipStyle = {
     borderRadius: radius,
     overflow: 'hidden',
-    shadowColor,
-    shadowOffset: {
-      width: shadowOffsetX,
-      height: shadowOffsetY
-    },
-    shadowOpacity: 1,
-    shadowRadius: shadowBlur / 2,
-    elevation: 4
+    backgroundColor: background
   };
   const content = /*#__PURE__*/_jsx(View, {
     style: {
@@ -190,17 +206,20 @@ export function Dropdown({
     children: cloneChildrenWithModes(children, modes)
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [containerStyle, style],
+    style: [shadowStyle, style],
     accessibilityRole: "menu",
     accessibilityLabel: accessibilityLabel || 'Dropdown menu',
-    children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
-      style: {
-        maxHeight
-      },
-      showsVerticalScrollIndicator: true,
-      keyboardShouldPersistTaps: "handled",
-      children: content
-    }) : content
+    children: /*#__PURE__*/_jsx(View, {
+      style: clipStyle,
+      children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          maxHeight
+        },
+        showsVerticalScrollIndicator: true,
+        keyboardShouldPersistTaps: "handled",
+        children: content
+      }) : content
+    })
   });
 }
 export default Dropdown;

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -531,7 +531,7 @@ function DropdownInput({
       transparent: true,
       statusBarTranslucent: true,
       navigationBarTranslucent: true,
-      animationType: "fade",
+      animationType: "none",
       onRequestClose: closeMenu,
       children: /*#__PURE__*/_jsx(Pressable, {
         style: StyleSheet.absoluteFill,

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
 import { View, Text, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -11,7 +11,7 @@ import Disclaimer from '../Disclaimer/Disclaimer';
 import IconButton from '../IconButton/IconButton';
 import ActionFooter from '../ActionFooter/ActionFooter';
 import Slot from '../Slot/Slot';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Forced modes
 //
@@ -24,7 +24,6 @@ import Slot from '../Slot/Slot';
 // stays hot, and so `cloneChildrenWithModes` can use it as the
 // always-wins `forcedModes` argument.
 // ---------------------------------------------------------------------------
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
   context5: 'Fullscreen Modal'
 });
@@ -184,6 +183,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -220,8 +220,8 @@ function FullscreenModal({
   // SafeAreaProvider — every inset is 0, so the layout is unchanged.
   const insets = useSafeAreaInsets();
   const closeButtonInsetStyle = useMemo(() => ({
-    top: 12 + insets.top
-  }), [insets.top]);
+    top: 12 + insets.top + closeOffsetY
+  }), [insets.top, closeOffsetY]);
   // Extend (not replace) the footer's token bottom padding by the bottom inset
   // so the action button never sits under the system navigation area.
   const footerInsetStyle = useMemo(() => {
@@ -247,7 +247,57 @@ function FullscreenModal({
     useNativeDriver: true
   }), [scrollY]);
   const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY]);
-  const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
+
+  // The hero media is a full-bleed background pinned to the top of the modal.
+  // Its wrapper is absolutely positioned (`top/left/right: 0`) so it never
+  // contributes to scroll height. We measure the modal's own width so we can
+  // give the hero media a DEFINITE { width, height } box (see
+  // `processedHeroMedia` below) — relying on the media's own `width: '100%'` +
+  // `aspectRatio` is unreliable inside an indefinite-height absolute box (RN's
+  // `<Image>` falls back to its intrinsic width and leaves a gap), so we size
+  // it explicitly here instead.
+  const [containerWidth, setContainerWidth] = useState(0);
+  const onContainerLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setContainerWidth(prev => prev !== w ? w : prev);
+  }, []);
+  const processedHeroMedia = useMemo(() => {
+    if (!heroMedia) return null;
+    // Defer rendering the hero until we have measured the modal width. This
+    // matters for image sharpness: React Native decodes a bitmap once, on the
+    // first render, and caches it. If we rendered the media before knowing the
+    // final box, that first decode would be sized/sampled for the wrong box and
+    // the cached (downsampled) bitmap would then just be scaled up — blurry.
+    // Rendering only once the explicit { width, height } box is known means the
+    // very first decode is already full-resolution for the correct box.
+    if (containerWidth <= 0) return null;
+    const withModes = cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES);
+
+    // Force the hero to fill the modal width edge to edge, top-aligned, with the
+    // height derived from the media's native aspect ratio.
+    //
+    // Why we inject explicit width/height instead of relying on the media's own
+    // `width: '100%'` + `aspectRatio`: the hero wrapper is absolutely positioned
+    // with an INDEFINITE height, and in that layout context React Native's
+    // `<Image>` falls back to its INTRINSIC width (so a 361px-wide asset renders
+    // 361px wide and leaves a gap on the right) rather than stretching to the
+    // parent. By computing `height = containerWidth / ratio` here and passing a
+    // DEFINITE { width, height } box (which makes `<Image>` skip aspectRatio and
+    // cover-fit into that exact box), the hero always fills the width with the
+    // correct ratio-derived height.
+    return React.Children.map(withModes, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      const props = child.props;
+      const ratio = typeof props.ratio === 'number' && props.ratio > 0 ? props.ratio : undefined;
+      // Only size media that exposes a numeric `ratio` and hasn't already been
+      // given an explicit box by the caller.
+      if (ratio == null || props.width != null || props.height != null) return child;
+      return /*#__PURE__*/React.cloneElement(child, {
+        width: containerWidth,
+        height: containerWidth / ratio
+      });
+    });
+  }, [heroMedia, modes, containerWidth]);
   const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
   // The hero text region always reserves `heroHeight` and anchors its content
@@ -300,8 +350,18 @@ function FullscreenModal({
   return /*#__PURE__*/_jsxs(View, {
     style: [rootStyle, style],
     testID: testID,
+    onLayout: onContainerLayout,
     children: [processedHeroMedia ? /*#__PURE__*/_jsx(Animated.View, {
-      style: [heroBackgroundStyle, {
+      style: [heroBackgroundStyle,
+      // Give the absolute wrapper a DEFINITE width (the measured modal
+      // width) so the media's `width: '100%'` + `aspectRatio` resolves to
+      // a true edge-to-edge fill with a ratio-derived height, top-aligned.
+      // Before the first layout pass `containerWidth` is 0 — fall back to
+      // stretching via `left/right: 0` so there is no flash of a mis-sized
+      // image.
+      containerWidth > 0 ? {
+        width: containerWidth
+      } : null, {
         transform: [{
           translateY: heroTranslateY
         }]

package/lib/module/components/Image/Image.js

@@ -37,6 +37,7 @@ function Image({
   imageSource,
   ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
+  resizeMethod,
   width,
   height,
   borderRadius,
@@ -47,11 +48,15 @@ function Image({
   loading
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
+
+  // Explicit { width, height } means a "fill an exact box" layout — typically a
+  // full-bleed hero/background where the asset is high-res and sharpness
+  // matters most. There, default to `'none'` (full-resolution, no pre-decode
+  // downsample) so detail is never thrown away. Aspect-ratio images keep the
+  // memory-safe `'scale'` default. A caller-supplied `resizeMethod` always wins.
+  const isExplicitBox = width != null && height != null;
+  const effectiveResizeMethod = resizeMethod ?? (isExplicitBox ? 'none' : 'scale');
   const layoutStyle = useMemo(() => {
-    // If the caller has fully specified width AND height, they're doing a
-    // non-aspect layout (e.g. "fill the parent") — respect that and skip
-    // `aspectRatio` so it doesn't conflict.
-    const isExplicitBox = width != null && height != null;
     const s = {
       width: width ?? '100%',
       ...(isExplicitBox ? {
@@ -65,7 +70,7 @@ function Image({
     };
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
-  }, [ratio, width, height, borderRadius]);
+  }, [ratio, width, height, borderRadius, isExplicitBox]);
   const {
     active: groupActive
   } = useSkeleton();
@@ -96,6 +101,7 @@ function Image({
     source: source,
     style: [layoutStyle, style],
     resizeMode: resizeMode,
+    resizeMethod: effectiveResizeMethod,
     accessibilityLabel: accessibilityLabel,
     accessibilityElementsHidden: accessibilityElementsHidden,
     importantForAccessibility: importantForAccessibility

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -6,11 +6,10 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {

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

@@ -6,17 +6,6 @@ import { Text, View } from 'react-native';
 /** Props we forward to the underlying native Lottie view. */
 import { jsx as _jsx } from "react/jsx-runtime";
 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
 }) {
@@ -60,8 +49,14 @@ let cachedView;
 export function getNativeLottieView() {
   if (cachedView !== undefined) return cachedView;
   try {
-    const mod = require(resolveNativeLottieModuleName());
-    cachedView = mod.default ?? LottieUnavailable;
+    // Static require so Metro resolves the module by its build-time numeric id.
+    // A runtime-constructed string path is NOT resolvable by Metro's `require`
+    // (it indexes modules by number, not path), so it would always throw and
+    // fall back to the install hint even when the package is installed. The
+    // dependency stays an *optional* peer: apps that use LottiePlayer install
+    // it; apps that don't simply never import this module.
+    const mod = require('lottie-react-native');
+    cachedView = mod.default ?? mod.LottieView ?? LottieUnavailable;
   } catch {
     cachedView = LottieUnavailable;
   }

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -4,9 +4,8 @@ import React, { useMemo, useEffect, useRef } from 'react';
 import { View, Text, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
-// Map of common ISO 4217 currency codes to display symbols
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
   INR: '₹',
   USD: '$',

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

@@ -7,11 +7,10 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportText from '../SupportText/SupportText';
 import Button from '../Button/Button';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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',

package/lib/module/components/Overlay/Overlay.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PLACEMENT_STYLE = {
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  top: {
+    justifyContent: 'flex-start',
+    alignItems: 'stretch'
+  },
+  bottom: {
+    justifyContent: 'flex-end',
+    alignItems: 'stretch'
+  },
+  stretch: {
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  }
+};
+
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+function Overlay({
+  children,
+  contentPlacement = 'center',
+  onPress,
+  fill = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = useMemo(() => {
+    const backgroundColor = getVariableByName('overlay/background', modes) ?? 'rgba(0, 0, 0, 0.7)';
+    const container = {
+      backgroundColor,
+      overflow: 'hidden',
+      ...PLACEMENT_STYLE[contentPlacement]
+    };
+    const processed = children ? cloneChildrenWithModes(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, contentPlacement]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [fill && StyleSheet.absoluteFill, containerStyle, style],
+    accessibilityViewIsModal: true,
+    ...rest,
+    children: [onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: StyleSheet.absoluteFill,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss overlay"
+    }) : null, processedChildren]
+  });
+}
+export default /*#__PURE__*/React.memo(Overlay);

package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js

@@ -5,9 +5,8 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
-
-/** Figma grid: label column 1.8fr, each plan column 1fr. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Figma grid: label column 1.8fr, each plan column 1fr. */
 const LABEL_COLUMN_FR = 1.8;
 const PLAN_COLUMN_FR = 1;
 

package/lib/module/components/PoweredByLabel/PoweredByLabel.js

@@ -6,10 +6,9 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default bundled FINVU brand logo, matching the Figma reference so the
 // component renders correctly out of the box without any image prop.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_LOGO = require('./finvu.png');
 const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
 const DEFAULT_IMAGE_WIDTH = 33;

package/lib/module/components/RechargeCard/RechargeCard.js

@@ -7,11 +7,10 @@ import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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").
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_BUTTON_GROUP_MODES = {
   AppearanceBrand: 'Secondary',
   'Button / Size': 'S',

package/lib/module/components/Section/Section.js

@@ -9,10 +9,9 @@ import IconCapsule from '../IconCapsule/IconCapsule';
 import ListItem from '../ListItem/ListItem';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
 // never applies the "pressed" style. See Button.tsx for the rationale.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
 const IS_IOS = Platform.OS === 'ios';
 const HEADER_PRESS_DELAY = IS_IOS ? 130 : 0;