jfs-components 0.0.61 → 0.0.63

package/lib/module/components/SupportText/SupportText.js

@@ -5,6 +5,7 @@ import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportTextIcon from './SupportTextIcon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * SupportText component displaying a status icon and label.
@@ -14,7 +15,7 @@ function SupportText({
   status = 'Neutral',
   iconSlot,
   textSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style
 }) {
   const {

package/lib/module/components/SupportText/SupportTextIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const STATUS_ICON_MAP = {
   Neutral: 'ic_info',
@@ -14,7 +15,7 @@ const STATUS_ICON_MAP = {
 };
 function SupportTextIcon({
   status = 'Neutral',
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';

package/lib/module/components/SwappableAmount/SwappableAmount.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Button from '../Button/Button';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SwappableAmount({
   value = '49g',
@@ -12,7 +13,7 @@ function SwappableAmount({
   amountLabel = '₹5100',
   onSchedulePress,
   onAmountPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const gap = getVariableByName('swappableAmount/gap', modes) ?? 24;

package/lib/module/components/Tabs/TabItem.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Pressable, Text, View } 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";
 /**
  * Individual tab item used inside the Tabs container.
@@ -17,7 +18,7 @@ function TabItem({
   label = 'Tab item',
   active = false,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   accessibilityLabel

package/lib/module/components/Tabs/Tabs.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { ScrollView, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import TabItem from './TabItem';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tabs container component that lays out TabItem children horizontally.
@@ -28,7 +29,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function Tabs({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   scrollable = false,
   style
 }) {

package/lib/module/components/Text/Text.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -11,7 +12,7 @@ const TEXT_ALIGN_MAP = {
 function Text({
   text = 'Korem ipsum ',
   textAlign = 'Left',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   numberOfLines
 }) {

package/lib/module/components/TextInput/TextInput.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -102,7 +102,7 @@ function TextInput({
   leadingIconName = 'ic_search',
   leading,
   trailing,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   onFocus,
@@ -256,7 +256,7 @@ function TextInputSearch({
   value = '',
   onChangeText,
   leading,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   accessibilityLabel,

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -3,6 +3,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 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";
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
@@ -12,7 +13,7 @@ export default function ThreadHero({
   subtitle = 'Banking name: SHIVASHANKAR RAJAN',
   caption,
   renderAvatar,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Container Gaps

package/lib/module/components/Title/Title.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -13,7 +14,7 @@ function Title({
   title = 'Title',
   subtitle,
   textAlign = 'Left',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   textStyle,
   subtitleStyle,

package/lib/module/components/Toast/Toast.js

@@ -5,6 +5,7 @@ import { StyleSheet, Text } from 'react-native';
 import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { closeToast } from './useToast';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ANIMATION_DURATION = 250;
 function Toast({
@@ -12,7 +13,7 @@ function Toast({
   title,
   timeout = 4000,
   onClose,
-  modes = {},
+  modes = EMPTY_MODES,
   placement = 'bottom',
   style
 }) {

package/lib/module/components/Toggle/Toggle.js

@@ -3,6 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import { Pressable, View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Toggle (switch) component that maps directly to the Figma design using design tokens.
@@ -18,7 +19,7 @@ function Toggle({
   defaultValue = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/module/components/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { View, Text, Modal, Pressable, Platform, StyleSheet, Dimensions } from '
 import Svg, { Path } from 'react-native-svg';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 // --- Types ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +24,7 @@ function useTooltipContext() {
 
 export function Tooltip({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   open,
   onOpenChange,
   defaultOpen = false,

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue';
 import TransactionStatus from '../TransactionStatus/TransactionStatus';
 import NavArrow from '../NavArrow/NavArrow';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,7 +34,7 @@ function TransactionBubble({
   date = '20 Mar 2025',
   statusSlot,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   style,
   accessibilityLabel,

package/lib/module/components/TransactionDetails/TransactionDetails.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 
 // ===== Item Subcomponent =====
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Item({
   label = 'Label',
   value = 'Value',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   valueStyle,
@@ -116,7 +116,7 @@ function Item({
  */
 function TransactionDetails({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   ...rest

package/lib/module/components/TransactionStatus/TransactionStatus.js

@@ -4,11 +4,12 @@ import React from 'react';
 import { View, Text } 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';
 
 // --- Internal Icon Component ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StatusIcon = ({
-  modes = {},
+  modes = EMPTY_MODES,
   width = 15,
   height = 15,
   color
@@ -35,7 +36,7 @@ const StatusIcon = ({
 export default function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4;

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -1,158 +1,163 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { Pressable, View, Text, Image } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, View, Text, Image, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 
 // Default static asset from the component folder.
 // Consumers can override the image via the `avatarSource` prop if needed.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_AVATAR_IMAGE = require('./Image.png');
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const pressedOverlayStyle = {
+  transform: [{
+    scale: 0.98
+  }]
+};
+const focusOverlayStyle = {
+  borderWidth: 1,
+  borderColor: '#222'
+};
+function resolveUpiHandleTokens(modes) {
+  const backgroundColor = getVariableByName('upiHandle/background', modes) || '#f5f5f5';
+  const radius = getVariableByName('upiHandle/radius', modes) || 99999;
+  const paddingLeft = getVariableByName('upiHandle/padding/left', modes) || 4;
+  const paddingRight = getVariableByName('upiHandle/padding/right', modes) || 14;
+  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes) || 3;
+  const gap = getVariableByName('upiHandle/gap', modes) || 6;
+  const avatarSize = getVariableByName('upiHandle/image/size', modes) || 23;
+  const avatarRadius = getVariableByName('upiHandle/image/radius', modes) || 99999;
+  const labelColor = getVariableByName('upiHandle/label/color', modes) || '#0d0d0f';
+  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes) || 12;
+  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes) || 23;
+  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes) || 'System';
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  const iconColor = getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f';
+  const iconSize = getVariableByName('upiHandle/icon/size', modes) || 12;
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      paddingLeft,
+      paddingRight,
+      paddingVertical,
+      borderRadius: radius,
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      overflow: 'hidden'
+    },
+    labelStyle: {
+      color: labelColor,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontFamily: labelFontFamily,
+      fontWeight: labelFontWeight
+    },
+    iconColor,
+    iconSize,
+    iconPlaceholderStyle: {
+      width: iconSize,
+      height: iconSize
+    }
+  };
+}
+
 /**
  * UpiHandle pill that mirrors the Figma "UPI Handle" component.
  *
- * Layout:
- *  - Circular image/avatar on the left
- *  - Label text in the center
- *  - Optional QR-code style icon on the right
- *
- * All visual styling is resolved from Figma variables via `getVariableByName`
- * using a `modes` configuration object, matching the rest of this library.
- *
  * @component
  * @param {Object} props
  * @param {string} [props.label="Label"] - UPI handle text to display.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
- * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}` for additional safety inside scrollables.
+ *  - Focus state is mirrored on web only (gated setter).
+ *  - Wrapped in `React.memo`.
  */
 function UpiHandle({
   label = 'Label',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   showIcon = true,
   iconName = 'ic_scan_qr_code',
   avatarSource,
   onPress,
   onClick,
   disabled,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat; the
+  // wrapper renders `accessibilityLabel={undefined}` because the inner Text
+  // already carries the label.
+  accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
   const {
     modes: globalModes
   } = useTokens();
-  const modes = {
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
     ...globalModes,
     ...propModes
-  };
-  // Token‑driven container styling
-  const backgroundColor = getVariableByName('upiHandle/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('upiHandle/radius', modes) || 99999;
-  const paddingLeft = getVariableByName('upiHandle/padding/left', modes) || 4;
-  const paddingRight = getVariableByName('upiHandle/padding/right', modes) || 14;
-  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes) || 3;
-  const gap = getVariableByName('upiHandle/gap', modes) || 6;
-
-  // Avatar
-  const avatarSize = getVariableByName('upiHandle/image/size', modes) || 23;
-  const avatarRadius = getVariableByName('upiHandle/image/radius', modes) || 99999;
-
-  // Label typography
-  const labelColor = getVariableByName('upiHandle/label/color', modes) || '#0d0d0f';
-  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes) || 23;
-  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500;
-  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes]);
 
-  // Icon sizing
-  const iconColor = getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f';
-  const iconSize = getVariableByName('upiHandle/icon/size', modes) || 12;
-  const containerStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingVertical,
-    borderRadius: radius,
-    gap
-  };
-  const avatarBaseStyle = {
-    width: avatarSize,
-    height: avatarSize,
-    borderRadius: avatarRadius,
-    overflow: 'hidden'
-  };
-  const labelBaseStyle = {
-    color: labelColor,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontFamily: labelFontFamily,
-    fontWeight: labelFontWeight
-  };
-  const iconPlaceholderStyle = {
-    width: iconSize,
-    height: iconSize
-  };
-
-  // Use provided accessibilityLabel or fall back to label
-  const defaultAccessibilityLabel = accessibilityLabel || `UPI handle ${label}`;
-  const [isPressed, setIsPressed] = useState(false);
+  // Focus is a sustained visible state (web-only). Setter is gated so it
+  // never fires on native.
   const [isFocused, setIsFocused] = useState(false);
-  const pressedStyle = isPressed ? {
-    transform: [{
-      scale: 0.98
-    }]
-  } : null;
-  const focusStyle = isFocused ? {
-    borderWidth: 1,
-    borderColor: '#222'
-  } : null;
+  const userHandlersRef = useRef({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const handlePressIn = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleFocus = useCallback(e => {
+    if (IS_WEB) setIsFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = useCallback(e => {
+    if (IS_WEB) setIsFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
   const handlePress = onPress || onClick;
-  const Wrapper = rest?.onPress || handlePress ? Pressable : View;
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    style: [containerStyle, pressedStyle, focusStyle],
-    accessibilityRole: "text",
-    accessibilityLabel: undefined,
-    ...(accessibilityHint !== undefined ? {
-      accessibilityHint
-    } : {}),
-    onPress: handlePress,
-    disabled: rest?.disabled ?? disabled,
-    onPressIn: e => {
-      setIsPressed(true);
-      rest?.onPressIn?.(e);
-    },
-    onPressOut: e => {
-      setIsPressed(false);
-      rest?.onPressOut?.(e);
-    },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
-    ...rest,
+  const isPressable = !!(rest?.onPress || handlePress);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const staticContainerStyle = useMemo(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Image, {
       source: avatarSource || DEFAULT_AVATAR_IMAGE,
-      style: avatarBaseStyle,
+      style: tokens.avatarStyle,
       resizeMode: "cover",
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }), /*#__PURE__*/_jsx(Text, {
-      style: labelBaseStyle,
+      style: tokens.labelStyle,
       numberOfLines: 1,
       ellipsizeMode: "tail",
       accessibilityElementsHidden: true,
@@ -160,12 +165,41 @@ function UpiHandle({
       children: label
     }), showIcon && /*#__PURE__*/_jsx(Icon, {
       name: iconName,
-      size: iconSize,
-      color: iconColor,
-      style: iconPlaceholderStyle,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      style: tokens.iconPlaceholderStyle,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     })]
   });
+  if (isPressable) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: pressableStyle,
+      accessibilityRole: "text",
+      accessibilityLabel: undefined,
+      ...(accessibilityHint !== undefined ? {
+        accessibilityHint
+      } : {}),
+      onPress: handlePress,
+      disabled: rest?.disabled ?? disabled,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      unstable_pressDelay: PRESS_DELAY,
+      ...rest,
+      children: innerContent
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: staticContainerStyle,
+    accessibilityRole: "text",
+    accessibilityLabel: undefined,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: innerContent
+  });
 }
-export default UpiHandle;
+export default /*#__PURE__*/React.memo(UpiHandle);

package/lib/module/components/VStack/VStack.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * VStack component for vertical layout using design token spacing.
@@ -16,7 +16,7 @@ export const VStack = ({
   wrap,
   reverse = false,
   as,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   ...rest
 }) => {