jfs-components 0.0.62 → 0.0.64

package/CHANGELOG.md

@@ -0,0 +1,59 @@
+# 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.64] - 2026-04-20
+
+### Added
+
+- **`Section.Bento` — expandable grid:** New built-in expand/collapse UX. Pass `collapsedCount` (default `4`) plus the full set of cells in `navSlot`, and `Section.Bento` auto-injects a toggle cell, owns the `expanded` boolean (uncontrolled), and animates extra cells in/out with a staggered fade cascade. Supports controlled mode via `expanded` + `onExpandedChange`, customizable labels (`toggleMoreLabel`, `toggleLessLabel`) and icons (`toggleMoreIcon`, `toggleLessIcon`), and a `renderToggle` escape hatch for non-`ListItem` toggles. The toggle is only injected when `navSlot.length > collapsedCount`, so existing usage at or below the threshold renders unchanged.
+- **Drawer drop-shadow tokens:** New design tokens `drawer/shadow/primary/{offsetX,offsetY,blur,color}` and `drawer/shadow/secondary/{offsetX,color}` resolve a layered Figma drop shadow. Web stacks both shadows via `boxShadow`; iOS applies the primary shadow natively; Android uses elevation.
+
+### Changed
+
+- **`SlotGrid` sizing — first-row-anchored:** `SlotGrid` (used by `Section.Bento`) now measures only the first row's cells once on mount and applies that max width to every cell in every row. Previously every cell was measured every render, which caused width jumps when the cell count changed (expand/collapse) and could cancel `Animated.View` `entering` cascades by re-rendering them in the same React batch as the mount. Result: stable cell width across toggles, no layout shift, animations play uninterrupted. Edge-flush behavior (first cell flush-left, last cell flush-right) is preserved via `justify-content: space-between`.
+- **`Section.Bento` height transition:** The section grows and shrinks via an explicit measured-height spring (`overflow: 'hidden'` clip + `withSpring`) instead of `LinearTransition`. Cells inside are never resized during the animation — only the container's clip rectangle interpolates.
+- **Drawer gesture policy:** Pan now requires a 10px vertical drag to activate (`activeOffsetY([-10, 10])`) and surrenders the gesture entirely after ~16px of horizontal movement (`failOffsetX([-16, 16])`). A defense-in-depth check in `onUpdate` skips Y translation on frames where horizontal motion dominates. This lets horizontal children (carousels, sliders, horizontal `FlatList`s) inside the drawer scroll cleanly without the sheet also translating.
+
+### Fixed
+
+- **Drawer iOS shadow clipping:** The sheet now renders content inside an inner clip layer so `overflow: 'hidden'` no longer trims the outer view's drop shadow on iOS.
+
+### Accessibility
+
+- All new `Section.Bento` animations honor the OS reduce-motion setting via Reanimated's `ReduceMotion.System`.
+
+---
+
+## [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,