jfs-components 0.0.61 → 0.0.63

package/lib/commonjs/components/ListItem/ListItem.js

@@ -14,13 +14,103 @@ 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); }
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- * This ensures that all child components in slots receive the modes prop from the parent.
- *
- * @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
- *                      Useful for slots that need to enforce specific context values.
- */
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Forced modes for the endSlot — `Context: 'ListItem'` can never be
+// overridden by external modes. Frozen so identity is stable across renders.
+const END_SLOT_FORCED_MODES = Object.freeze({
+  Context: 'ListItem'
+});
+
+// Pressed visual is applied on the host view through Pressable's style
+// callback, so a scroll-cancelled touch never schedules a React render.
+const pressedOverlayStyle = {
+  opacity: 0.85
+};
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes) tuple.
+// ---------------------------------------------------------------------------
+
+function resolveListItemTokens(modes) {
+  const resolvedModes = {
+    ...modes,
+    Context: 'ListItem'
+  };
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('listItem/gap', resolvedModes) ?? 8;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/top', resolvedModes) ?? 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/bottom', resolvedModes) ?? 0;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
+  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', resolvedModes) || '#0f0d0a';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', resolvedModes) || 14;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', resolvedModes) || 16;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', resolvedModes) || 'System';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', resolvedModes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', resolvedModes) || '#1f1a14';
+  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', resolvedModes) || 12;
+  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', resolvedModes) || 14;
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', resolvedModes) || 'System';
+  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', resolvedModes) || 500;
+  const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
+  return {
+    baseContainerStyle: {
+      paddingTop: paddingTop,
+      paddingBottom: paddingBottom,
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight
+    },
+    horizontalLayoutStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap
+    },
+    verticalLayoutStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap
+    },
+    innerContentBaseStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      gap
+    },
+    verticalContentBaseStyle: {
+      alignItems: 'center',
+      gap
+    },
+    titleTextStyle: {
+      color: titleColor,
+      fontSize: titleFontSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight
+    },
+    supportTextStyle: {
+      color: supportColor,
+      fontSize: supportFontSize,
+      lineHeight: supportLineHeight,
+      fontFamily: supportFontFamily,
+      fontWeight: supportFontWeight
+    },
+    trailingWrapperStyle: {
+      marginLeft: gap / 2
+    },
+    textWrapGap,
+    resolvedModes
+  };
+}
+const verticalSupportTextOverride = {
+  textAlign: 'center'
+};
 
 /**
  * ListItem component that mirrors the Figma "List Item" component.
@@ -53,8 +143,20 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes])`.
+ *  - The pressed visual is applied via Pressable's `style={({pressed}) => ...}`
+ *    callback so RN updates the host view directly — no React render is
+ *    scheduled by a touch. On iOS the touch is additionally delayed via
+ *    `unstable_pressDelay={130}` so a scroll-cancelled tap never even
+ *    transiently applies the pressed style. This is the fix for the
+ *    "People / Setup card flicker during scroll" report.
+ *  - User-supplied event handlers are read through a ref so the wrapper
+ *    handlers stay referentially stable across renders.
+ *  - The component is wrapped in `React.memo`.
  */
-function ListItem({
+function ListItemImpl({
   layout = 'Vertical',
   title = 'Title',
   supportText = 'Support Text',
@@ -63,7 +165,7 @@ function ListItem({
   supportSlot,
   endSlot,
   navArrow = true,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   onPress,
   style,
   contentStyle,
@@ -73,89 +175,21 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }) {
-  const resolvedModes = {
-    ...modes,
-    "Context": "ListItem"
-  };
-
-  // Resolve container spacing tokens
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('listItem/gap', resolvedModes) ?? 8;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/top', resolvedModes) ?? 0;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/bottom', resolvedModes) ?? 0;
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
-  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
+  const tokens = (0, _react.useMemo)(() => resolveListItemTokens(modes), [modes]);
 
-  // Title typography (horizontal layout)
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', resolvedModes) || '#0f0d0a';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', resolvedModes) || 14;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', resolvedModes) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', resolvedModes) || 'System';
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', resolvedModes) || 700;
-  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-
-  // Support text typography (used in both layouts)
-  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', resolvedModes) || '#1f1a14';
-  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', resolvedModes) || 12;
-  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', resolvedModes) || 14;
-  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', resolvedModes) || 'System';
-  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', resolvedModes) || 500;
-  const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
-  const baseContainerStyle = {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-  const sharedLayoutStyle = layout === 'Horizontal' ? {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap
-  } : {
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap
-  };
-  const innerContentBaseStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    gap
-  };
-  const verticalContentBaseStyle = {
-    alignItems: 'center',
-    gap
-  };
-  const titleTextStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    lineHeight: titleLineHeight,
-    fontFamily: titleFontFamily,
-    fontWeight: titleFontWeight
-  };
-  const supportTextStyle = {
-    color: supportColor,
-    fontSize: supportFontSize,
-    lineHeight: supportLineHeight,
-    fontFamily: supportFontFamily,
-    fontWeight: supportFontWeight
-  };
-  const trailingWrapperStyle = (0, _react.useMemo)(() => ({
-    marginLeft: gap / 2
-  }), [gap]);
+  // Mirror user-supplied handlers in a ref so our wrappers can stay
+  // referentially stable. Without this, every parent re-render hands
+  // Pressable a fresh function identity for each event prop.
+  const userHandlersRef = (0, _react.useRef)({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
 
   // Generate default accessibility label from title and supportText if not provided
   const defaultAccessibilityLabel = accessibilityLabel || (layout === 'Horizontal' ? `${title}${showSupportText && supportText ? `, ${supportText}` : ''}` : supportText);
 
-  // Get web platform support props (only used when onPress is defined)
-  const webPropsHorizontal = (0, _webPlatformUtils.usePressableWebSupport)({
-    restProps: rest,
-    onPress,
-    disabled: false,
-    accessibilityLabel: defaultAccessibilityLabel,
-    webAccessibilityProps
-  });
-  const webPropsVertical = (0, _webPlatformUtils.usePressableWebSupport)({
+  // Single web-platform support payload — the previous version called
+  // `usePressableWebSupport` twice with identical args, which was dead work.
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: rest,
     onPress,
     disabled: false,
@@ -163,60 +197,79 @@ function ListItem({
     webAccessibilityProps
   });
 
-  // Process leading slot to pass modes to children
-  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), resolvedModes) : [];
-  // Extract single element if array has one element, otherwise use array
-  const leadingElement = processedLeading.length > 0 ? processedLeading.length === 1 ? processedLeading[0] : processedLeading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-    modes: resolvedModes,
-    accessibilityLabel: undefined
-  });
-  const renderSupportContent = () => {
-    if (supportSlot) {
-      // Process supportSlot to pass modes to children
-      const processedSupportSlot = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), resolvedModes);
-      // Extract single element if array has one element, otherwise use array
-      return processedSupportSlot.length === 1 ? processedSupportSlot[0] : processedSupportSlot;
+  // Process leading slot to pass modes to children. Memoized on
+  // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
+  const leadingElement = (0, _react.useMemo)(() => {
+    const processed = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes) : [];
+    if (processed.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        modes: tokens.resolvedModes,
+        accessibilityLabel: undefined
+      });
     }
+    return processed.length === 1 ? processed[0] : processed;
+  }, [leading, tokens.resolvedModes]);
+  const processedSupportSlot = (0, _react.useMemo)(() => {
+    if (!supportSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), tokens.resolvedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [supportSlot, tokens.resolvedModes]);
+  const processedEndSlot = (0, _react.useMemo)(() => {
+    if (!endSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), tokens.resolvedModes, END_SLOT_FORCED_MODES);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [endSlot, tokens.resolvedModes]);
+  const renderSupportContent = () => {
+    if (processedSupportSlot) return processedSupportSlot;
 
-    // Default support text (used for:
-    //  - vertical layout main text
-    //  - horizontal layout secondary line)
+    // Default support text:
+    //  - vertical layout: main text (line-broken on spaces)
+    //  - horizontal layout: secondary line (clamped to 2 lines)
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [supportTextStyle, layout === 'Vertical' ? {
-        textAlign: 'center'
-      } : undefined],
+      style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
       numberOfLines: layout === 'Horizontal' ? 2 : undefined,
       children: displayText
     });
   };
+
+  // Stable handlers — user-supplied callbacks are forwarded via ref.
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const horizontalContainerStyleArray = (0, _react.useMemo)(() => [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style], [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]);
+  const verticalContainerStyleArray = (0, _react.useMemo)(() => [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style], [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]);
+  const horizontalPressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, pressed ? pressedOverlayStyle : null, style], [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]);
+  const verticalPressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.baseContainerStyle, tokens.verticalLayoutStyle, pressed ? pressedOverlayStyle : null, style], [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]);
+  const innerContentStyleArray = (0, _react.useMemo)(() => [tokens.innerContentBaseStyle, contentStyle], [tokens.innerContentBaseStyle, contentStyle]);
+  const verticalContentStyleArray = (0, _react.useMemo)(() => [tokens.verticalContentBaseStyle, contentStyle], [tokens.verticalContentBaseStyle, contentStyle]);
   if (layout === 'Horizontal') {
-    // Process endSlot to pass modes to children
-    // Force Context: 'ListItem' - this value can never be overridden by external modes
-    const processedEndSlot = endSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), resolvedModes, {
-      "Context": 'ListItem'
-    }) : [];
-    // Extract single element if array has one element, otherwise use array
-    const trailingContent = processedEndSlot.length > 0 ? processedEndSlot.length === 1 ? processedEndSlot[0] : processedEndSlot : null;
     const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [innerContentBaseStyle, contentStyle],
+      style: innerContentStyleArray,
       children: [leadingElement, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
           flex: 1,
           minWidth: 1,
-          gap: textWrapGap
+          gap: tokens.textWrapGap
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: titleTextStyle,
+          style: tokens.titleTextStyle,
           numberOfLines: 1,
           children: title
         }), showSupportText && renderSupportContent()]
-      }), trailingContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: trailingWrapperStyle,
-        children: trailingContent
+      }), processedEndSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.trailingWrapperStyle,
+        children: processedEndSlot
       }) : null, navArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
         direction: "Forward",
-        modes: resolvedModes
+        modes: tokens.resolvedModes
       })]
     });
     if (onPress) {
@@ -224,16 +277,13 @@ function ListItem({
         accessibilityRole: "button",
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint,
-        accessibilityState: {
-          ...accessibilityState
-        },
+        accessibilityState: accessibilityState,
         onPress: onPress,
-        style: ({
-          pressed
-        }) => [baseContainerStyle, sharedLayoutStyle, pressed ? {
-          opacity: 0.85
-        } : null, style],
-        ...webPropsHorizontal,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        unstable_pressDelay: PRESS_DELAY,
+        style: horizontalPressableStyle,
+        ...webProps,
         children: innerContent
       });
     }
@@ -241,15 +291,15 @@ function ListItem({
       accessibilityRole: undefined,
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
-      style: [baseContainerStyle, sharedLayoutStyle, style],
+      style: horizontalContainerStyleArray,
       ...rest,
       children: innerContent
     });
   }
 
-  // Vertical layout - icon on top, support text/slot below
+  // Vertical layout — icon on top, support text/slot below
   const verticalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [verticalContentBaseStyle, contentStyle],
+    style: verticalContentStyleArray,
     children: [leadingElement, renderSupportContent()]
   });
   if (onPress) {
@@ -257,16 +307,13 @@ function ListItem({
       accessibilityRole: "button",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
-      accessibilityState: {
-        ...accessibilityState
-      },
+      accessibilityState: accessibilityState,
       onPress: onPress,
-      style: ({
-        pressed
-      }) => [baseContainerStyle, sharedLayoutStyle, pressed ? {
-        opacity: 0.85
-      } : null, style],
-      ...webPropsVertical,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      unstable_pressDelay: PRESS_DELAY,
+      style: verticalPressableStyle,
+      ...webProps,
       children: verticalContent
     });
   }
@@ -274,9 +321,10 @@ function ListItem({
     accessibilityRole: undefined,
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
-    style: [baseContainerStyle, sharedLayoutStyle, style],
+    style: verticalContainerStyleArray,
     ...rest,
     children: verticalContent
   });
 }
+const ListItem = /*#__PURE__*/_react.default.memo(ListItemImpl);
 var _default = exports.default = ListItem;

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -13,12 +13,12 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * Context to share 'modes' with child components.
- */
-const MediaCardContext = /*#__PURE__*/(0, _react.createContext)({});
+ */const MediaCardContext = /*#__PURE__*/(0, _react.createContext)({});
 /**
  * MediaCard component implementation from Figma node 1241:4140.
  * 
@@ -27,7 +27,7 @@ const MediaCardContext = /*#__PURE__*/(0, _react.createContext)({});
 function MediaCard({
   media,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Container Tokens

package/lib/commonjs/components/MerchantProfile/MerchantProfile.js

@@ -7,6 +7,7 @@ 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 _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -49,7 +50,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function MerchantProfile({
   title = 'Uber India Systems Private Limited',
   subtitle = 'UPI ID: uberindia@ybl',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   avatarProps,
   accessibilityLabel

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Map of common ISO 4217 currency codes to display symbols
@@ -60,7 +61,7 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   valueStyle,
   currencyStyle,