jfs-components 0.0.62 → 0.0.63

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [0.0.63] - 2026-04-20
+
+### Performance
+
+- **Pressable / scroll flicker (native):** `Button`, `Section` (header), `ListItem`, `Avatar`, `IconCapsule`, `NavArrow`, `UpiHandle`, `IconButton`, and `BottomNavItem` no longer mirror transient press state in React. Pressed visuals use `Pressable`’s `style` callback (host-view updates). On iOS, `unstable_pressDelay={130}` reduces accidental “pressed” flashes when a parent `ScrollView` cancels the gesture.
+- **Token resolution:** `getVariableByName` caches serialized mode keys per `modes` object via a `WeakMap` in `serializeModes`, avoiding repeated sort/join work when the same `modes` reference is used for many lookups in one render.
+- **Stable default modes:** Shared frozen `EMPTY_MODES` from `src/utils/react-utils.ts` replaces inline `modes = {}` defaults across components so default props do not allocate a new object every render (better `React.memo` hits and resolver cache locality).
+- **Memoization:** Heavy token reads are batched in `useMemo` where refactored; several interactive components are wrapped in `React.memo`.
+
+### Fixed
+
+- Intermittent visual flicker on interactive rows (e.g. People / Setup style cards) during vertical scroll on native devices.
+
+### Changed
+
+- **Breaking (none intended):** Public prop types and default behavior are preserved. Some components now ignore unused `accessibilityLabel` props on inner nodes (documented via `_accessibilityLabel` where applicable); screen-reader behavior should match prior intentional `accessibilityLabel={undefined}` usage.
+
+### Removed
+
+- Dead code: duplicate `usePressableWebSupport` usage in `ListItem`; unused computed labels in a few components; redundant pressed-style paths in `IconButton`.
+
+### Repository / tooling
+
+- Storybook and example app layout updates; addon and config changes as reflected in the repo.
+
+---
+
+## [0.0.62] and earlier
+
+See git history for releases prior to this changelog.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -50,7 +50,7 @@ function Accordion({
   onExpandedChange,
   disabled = false,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -40,7 +40,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function ActionFooter({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel = undefined
 }) {

package/lib/commonjs/components/ActionTile/ActionTile.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -20,7 +21,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function ActionTile({
   label = 'Cards',
   icon,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   onPress
 }) {

package/lib/commonjs/components/AmountInput/AmountInput.js

@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
 var _NoteInput = _interopRequireDefault(require("../NoteInput/NoteInput"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -20,7 +21,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function AmountInput({
   moneyValueSlot,
   noteInputSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/AppBar/AppBar.js

@@ -17,7 +17,7 @@ function AppBar({
   leadingSlot,
   middleSlot,
   actionsSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   onLeadingPress,
   style,
   accessibilityLabel,

package/lib/commonjs/components/Avatar/Avatar.js

@@ -4,22 +4,104 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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 _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); }
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
 
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Pressed visual is applied through Pressable's style callback so the host
+// view updates without scheduling a React render.
+const pressedOverlayStyle = {
+  transform: [{
+    scale: 0.98
+  }]
+};
+const focusOverlayStyle = {
+  borderColor: '#222',
+  borderWidth: 1
+};
+const imageContainerStyle = {
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden'
+};
+const imageBaseStyle = {
+  width: '100%',
+  height: '100%'
+};
+const monogramContainerStyle = {
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingVertical: 7,
+  paddingHorizontal: 5
+};
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes, style) tuple.
+// ---------------------------------------------------------------------------
+
+function resolveAvatarTokens(modes, isMonogram) {
+  const size = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/background', modes) || '#dbcfff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/color', modes) || '#5c00b5';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontSize', modes) || 12;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/lineHeight', modes) || 14;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontFamily', modes) || 'Inter';
+
+  // 9999 is the design-token sentinel for "perfect circle"
+  const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;
+  return {
+    containerStyle: {
+      width: size,
+      height: size,
+      borderRadius,
+      borderWidth: borderSize,
+      borderColor: borderColor,
+      overflow: 'hidden',
+      ...(isMonogram ? {
+        backgroundColor: backgroundColor
+      } : {})
+    },
+    imageContainerStyle: {
+      ...imageContainerStyle,
+      borderRadius
+    },
+    imageStyle: {
+      ...imageBaseStyle,
+      borderRadius
+    },
+    monogramTextStyle: {
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+      fontFamily: labelFontFamily,
+      color: labelColor,
+      textAlign: 'center'
+    }
+  };
+}
+
 /**
  * Avatar component that displays either an image or a monogram.
- * 
- * This component supports two styles:
- * - Image: Displays a user's profile picture
- * - Monogram: Displays user initials in a circular background
- * 
- * All styling values are resolved from Figma design tokens using the provided modes.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.monogram="MS"] - The initials to display when style is "Monogram"
@@ -27,182 +109,122 @@ const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Avatar Size": "M"})
  * @param {string} [props.imageSource] - Optional image source for Image style (defaults to built-in image)
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses monogram or "User avatar"
- * 
- * @example
- * ```jsx
- * // Image style
- * <Avatar style="Image" modes={{"Avatar Size": "M"}} />
- * 
- * // Monogram style
- * <Avatar style="Monogram" monogram="JD" modes={{"Avatar Size": "L"}} />
- * ```
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes, isMonogram])`.
+ *  - 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 stays in React (it's a sustained visual) but the setter is
+ *    gated to web only, where focus events actually fire.
  */
 
 function Avatar({
-  monogram = "MS",
-  style = "Image",
-  modes = {},
+  monogram = 'MS',
+  style = 'Image',
+  modes = _reactUtils.EMPTY_MODES,
   imageSource,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat but the
+  // component intentionally renders `accessibilityLabel={undefined}` on the
+  // wrapper (the inner Text/Image carry the label instead).
+  accessibilityLabel: _accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens using the provided modes
-  const size = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/background', modes) || '#dbcfff';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontWeight', modes) || 500;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontFamily', modes) || 'Inter';
+  const isMonogram = style === 'Monogram';
+  const tokens = (0, _react.useMemo)(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram]);
 
-  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
-  const borderRadius = radius === 9999 ? size / 2 : radius;
-
-  // Container style
-  const containerStyle = {
-    width: size,
-    height: size,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    overflow: 'hidden',
-    ...(style === 'Monogram' ? {
-      backgroundColor: backgroundColor
-    } : {})
-  };
+  // Focus is a sustained visible state — keep mirroring on web; gate the
+  // setter so it never fires on native (where focus events don't fire on
+  // these elements anyway).
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
-  // Image container style
-  const imageContainerStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius,
-    overflow: 'hidden'
-  };
-
-  // Image style
-  const imageStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius
-  };
+  // Mirror user handlers in a ref so our wrappers can stay referentially
+  // stable across renders.
+  const userHandlersRef = (0, _react.useRef)({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleFocus = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
+  const pressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const staticContainerStyle = (0, _react.useMemo)(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
 
-  // Monogram container style
-  const monogramContainerStyle = {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 7,
-    paddingHorizontal: 5
-  };
-
-  // Monogram text style
-  const monogramTextStyle = {
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight,
-    fontFamily: labelFontFamily,
-    color: labelColor,
-    textAlign: 'center'
-  };
-
-  // Generate default accessibility label
-  const defaultAccessibilityLabel = accessibilityLabel || (style === "Monogram" ? `Avatar with initials ${monogram}` : "User avatar");
-  // Interaction placeholders for press/focus
-  const [isPressed, setIsPressed] = _react.default.useState(false);
-  const [isFocused, setIsFocused] = _react.default.useState(false);
-  const pressedStyle = isPressed ? {
-    transform: [{
-      scale: 0.98
-    }]
-  } : null;
-  const focusStyle = isFocused ? {
-    borderColor: '#222',
-    borderWidth: 1
-  } : null;
-  if (style === "Monogram") {
-    const Wrapper = rest?.onPress ? _reactNative.Pressable : _reactNative.View;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-      style: [containerStyle, pressedStyle, focusStyle],
+  // The inner content varies; everything else (wrapper, handlers, style) is shared.
+  const innerContent = isMonogram ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: monogramContainerStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.monogramTextStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: monogram
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContent, {
+    tokens: tokens,
+    imageSource: imageSource
+  });
+  const isPressable = !!rest?.onPress;
+  if (isPressable) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: pressableStyle,
       accessibilityRole: "image",
       accessibilityLabel: undefined,
-      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);
-      },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      unstable_pressDelay: PRESS_DELAY,
       ...rest,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: monogramContainerStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: monogramTextStyle,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no",
-          children: monogram
-        })
-      })
+      children: innerContent
     });
   }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: staticContainerStyle,
+    accessibilityRole: "image",
+    accessibilityLabel: undefined,
+    ...rest,
+    children: innerContent
+  });
+}
 
-  // Normalize imageSource: if it's a string (URL), convert to { uri: string } format
-  // Otherwise, use it as-is (could be require() result or already { uri: ... } object)
-  const normalizedImageSource = _react.default.useMemo(() => {
+// Memoize the image normalization so a string URL that doesn't change
+// doesn't keep producing a new `{ uri }` object every render.
+function ImageContent({
+  tokens,
+  imageSource
+}) {
+  const normalizedImageSource = (0, _react.useMemo)(() => {
     if (!imageSource) return avatarImage;
     if (typeof imageSource === 'string') {
-      // If it's a string, treat it as a URL
       return {
         uri: imageSource
       };
     }
-    // Otherwise, use it as-is (could be require() result or { uri: ... } object)
     return imageSource;
   }, [imageSource]);
-  const Wrapper = rest?.onPress ? _reactNative.Pressable : _reactNative.View;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    style: [containerStyle, pressedStyle, focusStyle],
-    accessibilityRole: "image",
-    accessibilityLabel: undefined,
-    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,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: imageContainerStyle,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: normalizedImageSource,
-        resizeMode: "cover",
-        style: imageStyle,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
-      })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: tokens.imageContainerStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: normalizedImageSource,
+      resizeMode: "cover",
+      style: tokens.imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
     })
   });
 }
-var _default = exports.default = Avatar;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Avatar);

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -14,7 +14,7 @@ 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AvatarGroup({
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   children,
   style,
   ...rest

package/lib/commonjs/components/Badge/Badge.js

@@ -7,11 +7,12 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Badge({
   label = 'Label',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,

package/lib/commonjs/components/Balance/Balance.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -23,7 +24,7 @@ function Balance({
   title = "Total owed to people",
   amount = "500",
   currency = "₹",
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   children
 }) {

package/lib/commonjs/components/BottomNav/BottomNav.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _BottomNavItem = _interopRequireDefault(require("../BottomNavItem/BottomNavItem"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -26,7 +27,7 @@ function BottomNav({
   value,
   onChange,
   children,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
   accessibilityHint,