jfs-components 0.0.62 → 0.0.63

package/src/components/Button/Button.tsx

@@ -1,7 +1,18 @@
-import React, { useMemo, useState } from 'react'
-import { Pressable, Text, View, type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  Platform,
+  Pressable,
+  Text,
+  View,
+  type AccessibilityState,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 
 export type ButtonProps = SafePressableProps & {
@@ -45,6 +56,123 @@ export type ButtonProps = SafePressableProps & {
   webAccessibilityProps?: WebAccessibilityProps;
 };
 
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+
+// iOS Pressable inside a ScrollView fires onPressIn on touchstart by default,
+// which causes a visible "press" flash that snaps back when ScrollView claims
+// the gesture. Delaying press by ~130ms lets the scroll responder cancel the
+// gesture before the pressed visual is ever applied.
+//
+// Android uses the responder system + the touchable cancellation pipeline and
+// does not need an extra delay; setting it to 0 keeps tap latency identical
+// to today's behavior on Android.
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+const containerLayoutStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  justifyContent: 'center' as const,
+}
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+//
+// Memoizing all token reads in a single useMemo keyed on (modes, disabled)
+// turns the previous ~21 cache lookups + arithmetic per render into a single
+// resolve per (modes, disabled) tuple. With `EMPTY_MODES` as the default,
+// the most common path (no modes prop) is resolved once for the whole app.
+// ---------------------------------------------------------------------------
+
+interface ButtonTokens {
+  container: ViewStyle;
+  baseLabel: TextStyle;
+  hoverContainer: ViewStyle | null;
+  pressedContainer: ViewStyle;
+  hoverTextColor: string | null;
+  pressedTextColor: string;
+  baseIconColor: string;
+  hoverIconColor: string | null;
+  pressedIconColor: string;
+  iconSize: number;
+  accessoryOffset: number;
+}
+
+function resolveButtonTokens(modes: Record<string, any>, disabled: boolean): ButtonTokens {
+  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
+  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
+  const borderWidth = getVariableByName('button/border/size', modes)
+  const radius = getVariableByName('button/radius', modes) || 9999
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20
+  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12
+  const gap = getVariableByName('button/gap', modes) || 8
+
+  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System'
+  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
+  const lineHeight = getVariableByName('button/lineHeight', modes) || 19
+  const fontSize = getVariableByName('button/fontSize', modes) || 16
+  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
+  const iconSize = (getVariableByName('button/icon/size', modes) ?? 18) as number
+
+  // Pressed tokens are always resolved so the Pressable `style` callback can
+  // apply the pressed visual without scheduling a React render.
+  const pressedModes = { ...modes, 'Button / State': 'Pressed' }
+  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
+  const pressedTextColor = (getVariableByName('button/foreground', pressedModes) || textColor) as string
+
+  // Hover tokens are only meaningful on web. Skipping them on native saves
+  // ~3 token lookups + an object spread per render on every Button.
+  let hoverContainer: ViewStyle | null = null
+  let hoverTextColor: string | null = null
+  if (IS_WEB) {
+    const hoverModes = { ...modes, 'Button / State': 'Hover' }
+    const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
+    hoverTextColor = (getVariableByName('button/foreground', hoverModes) || textColor) as string
+    hoverContainer = { backgroundColor: hoverBg as string, borderColor: hoverBorderColor as string }
+  }
+
+  return {
+    container: {
+      ...containerLayoutStyle,
+      paddingHorizontal: paddingHorizontal as number,
+      paddingVertical: paddingVertical as number,
+      borderRadius: radius as number,
+      borderWidth: (borderWidth ?? 1) as number,
+      borderColor: borderColor as string,
+      backgroundColor: backgroundColor as string,
+      gap: gap as number,
+      opacity: disabled ? 0.5 : 1,
+    },
+    baseLabel: {
+      color: textColor as string,
+      fontFamily: fontFamily as string,
+      fontWeight: fontWeight as TextStyle['fontWeight'],
+      fontSize: fontSize as number,
+      lineHeight: lineHeight as number,
+    },
+    hoverContainer,
+    pressedContainer: {
+      backgroundColor: pressedBg as string,
+      borderColor: pressedBorderColor as string,
+    },
+    hoverTextColor,
+    pressedTextColor,
+    baseIconColor: textColor as string,
+    hoverIconColor: hoverTextColor,
+    pressedIconColor: pressedTextColor,
+    iconSize,
+    accessoryOffset: (gap as number) / 2,
+  }
+}
+
 /**
  * Button component that maps directly to the Figma design using design tokens.
  *
@@ -63,15 +191,31 @@ export type ButtonProps = SafePressableProps & {
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - The pressed visual (background/border swap) is applied through the
+ *    Pressable `style` callback, NOT a mirrored React state. This avoids the
+ *    flicker that scrolling parents previously caused: when a ScrollView
+ *    cancels a touch the host view simply reverts its style without React
+ *    rendering. On iOS we additionally use `unstable_pressDelay` so the
+ *    pressed visual is never even applied during a scroll-cancelled touch.
+ *  - Hover state is only mirrored into React state on web (where hover events
+ *    fire). On native the setter call is gated out so the component never
+ *    re-renders due to hover.
+ *  - All design-token reads are folded into a single `useMemo` keyed on
+ *    `(modes, disabled)`.
+ *  - The component is wrapped in `React.memo`. Callers that want to take
+ *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
+ *    is already stable) and stable callback props.
  */
-function Button({
+function ButtonImpl({
   label = 'Button',
   children,
   renderContent,
   leading,
   trailing,
   icon,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -82,65 +226,57 @@ function Button({
   webAccessibilityProps,
   ...rest
 }: ButtonProps) {
-  // Resolve design tokens with the provided modes
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderWidth = getVariableByName('button/border/size', modes)
-  const radius = getVariableByName('button/radius', modes) || 9999
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12
-  const gap = getVariableByName('button/gap', modes) || 8
-
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System'
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700
-  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19
-  const fontSize = getVariableByName('button/fontSize', modes) || 16
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
-  const iconColor = textColor
-  const iconSize = getVariableByName('button/icon/size', modes) ?? 18
-
+  // Hover state is web-only in practice; the setter is gated so native taps
+  // never schedule a re-render through this hook.
   const [isHovered, setIsHovered] = useState(false)
-  const [isPressed, setIsPressed] = useState(false)
 
-  const hoverModes = { ...modes, "Button / State": "Hover" }
-  const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
-  const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
-  const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor
-  const hoverIconColor = hoverTextColor
+  // Mirror user-supplied handlers in a ref so our wrapper handlers can stay
+  // referentially stable (otherwise Pressable would re-bind every render).
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onHoverIn?: (e: any) => void
+    onHoverOut?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
+  userHandlersRef.current.onHoverIn = (rest as any)?.onHoverIn
+  userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
 
-  const pressedModes = { ...modes, "Button / State": "Pressed" }
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
-  const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor
-  const pressedIconColor = pressedTextColor
-
-  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor
-  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor
+  const tokens = useMemo(
+    () => resolveButtonTokens(modes, disabled),
+    [modes, disabled]
+  )
 
-  const baseLabelTextStyle: TextStyle = {
-    color: activeTextColor,
-    fontFamily,
-    fontWeight,
-    fontSize,
-    lineHeight,
-  }
+  // Active label color: base by default; hover override (web-only) when hovered.
+  // Press color is intentionally NOT applied to the label on native — applying
+  // it would require a React render per touch and re-introduce the flicker.
+  const activeLabelStyle = useMemo<StyleProp<TextStyle>>(() => {
+    const hoverOverride: TextStyle | null =
+      isHovered && !disabled && tokens.hoverTextColor
+        ? { color: tokens.hoverTextColor }
+        : null
+    return [tokens.baseLabel, hoverOverride, labelStyle]
+  }, [tokens.baseLabel, tokens.hoverTextColor, isHovered, disabled, labelStyle])
 
-  const mergedLabelTextStyle: StyleProp<TextStyle> = [baseLabelTextStyle, labelStyle]
+  const activeIconColor =
+    isHovered && !disabled && tokens.hoverIconColor
+      ? tokens.hoverIconColor
+      : tokens.baseIconColor
 
   let content: React.ReactNode
 
   if (renderContent) {
     // Preferred extension point: caller fully controls the inner node but we
     // still provide the token-derived text styles.
-    content = renderContent(mergedLabelTextStyle)
+    content = renderContent(activeLabelStyle)
   } else if (children !== undefined && children !== null) {
     // Full-content override: label and labelStyle are intentionally ignored.
     content = children
   } else {
     content = (
       <Text
-        style={mergedLabelTextStyle}
+        style={activeLabelStyle}
         numberOfLines={1}
       >
         {label}
@@ -148,30 +284,14 @@ function Button({
     )
   }
 
-  const containerBaseStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal,
-    paddingVertical,
-    borderRadius: radius,
-    borderWidth: borderWidth ?? 1,
-    borderColor,
-    backgroundColor,
-    gap,
-    opacity: disabled ? 0.5 : 1,
-  }
-
-  const accessoryOffset = gap / 2
-
-  const leadingAccessoryStyle = useMemo(
-    () => ({ marginRight: accessoryOffset }),
-    [accessoryOffset],
+  const leadingAccessoryStyle = useMemo<ViewStyle>(
+    () => ({ marginRight: tokens.accessoryOffset }),
+    [tokens.accessoryOffset]
   )
 
-  const trailingAccessoryStyle = useMemo(
-    () => ({ marginLeft: accessoryOffset }),
-    [accessoryOffset],
+  const trailingAccessoryStyle = useMemo<ViewStyle>(
+    () => ({ marginLeft: tokens.accessoryOffset }),
+    [tokens.accessoryOffset]
   )
 
   // Use provided accessibilityLabel, or fall back to label text
@@ -186,8 +306,37 @@ function Button({
     webAccessibilityProps,
   })
 
-  const hoverStyle = { backgroundColor: hoverBg, borderColor: hoverBorderColor }
-  const pressedStyle = { backgroundColor: pressedBg, borderColor: pressedBorderColor }
+  // Stable handler identities. The user's handlers are read through a ref so
+  // these wrappers do not need to be re-created when the user passes inline
+  // closures, which would defeat React.memo on Pressable.
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleHoverIn = useCallback((e: any) => {
+    if (IS_WEB) setIsHovered(true)
+    userHandlersRef.current.onHoverIn?.(e)
+  }, [])
+  const handleHoverOut = useCallback((e: any) => {
+    if (IS_WEB) setIsHovered(false)
+    userHandlersRef.current.onHoverOut?.(e)
+  }, [])
+
+  // The Pressable style callback receives `pressed` from RN's gesture
+  // pipeline and applies the pressed visual to the host view directly,
+  // without going through React. This is the key to flicker-free behavior:
+  // a scroll-cancelled touch reverts the style on the native side only.
+  const styleCallback = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.container,
+      isHovered && !disabled ? tokens.hoverContainer : null,
+      pressed && !disabled ? tokens.pressedContainer : null,
+      style,
+    ],
+    [tokens.container, tokens.hoverContainer, tokens.pressedContainer, isHovered, disabled, style]
+  )
 
   if (__DEV__) {
     if (children && labelStyle) {
@@ -216,28 +365,12 @@ function Button({
       }}
       disabled={disabled}
       {...(onPress !== undefined ? { onPress } : {})}
-      onPressIn={(e: any) => {
-        setIsPressed(true)
-        ;(rest as any)?.onPressIn?.(e)
-      }}
-      onPressOut={(e: any) => {
-        setIsPressed(false)
-        ;(rest as any)?.onPressOut?.(e)
-      }}
-      onHoverIn={(e: any) => {
-        setIsHovered(true)
-          ; (rest as any)?.onHoverIn?.(e)
-      }}
-      onHoverOut={(e: any) => {
-        setIsHovered(false)
-          ; (rest as any)?.onHoverOut?.(e)
-      }}
-      style={({ pressed }) => [
-        containerBaseStyle,
-        isHovered && !disabled ? hoverStyle : null,
-        (pressed || isPressed) && !disabled ? pressedStyle : null,
-        style,
-      ] as StyleProp<ViewStyle>}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      unstable_pressDelay={PRESS_DELAY}
+      style={styleCallback}
       {...webProps}
     >
       {leading ? (
@@ -248,7 +381,7 @@ function Button({
       {content}
       {icon ? (
         <View style={trailingAccessoryStyle}>
-          <Icon name={icon} size={iconSize as number} color={activeIconColor as string} accessibilityElementsHidden={true} importantForAccessibility="no" />
+          <Icon name={icon} size={tokens.iconSize} color={activeIconColor} accessibilityElementsHidden={true} importantForAccessibility="no" />
         </View>
       ) : trailing ? (
         <View style={trailingAccessoryStyle}>
@@ -259,12 +392,6 @@ function Button({
   )
 }
 
-export default Button
-
-
-
-
-
-
-
+const Button = React.memo(ButtonImpl)
 
+export default Button

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -5,7 +5,7 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
 import IconButton from '../IconButton/IconButton'
 
 export type ButtonGroupProps = {
@@ -44,7 +44,7 @@ export type ButtonGroupProps = {
  */
 function ButtonGroup({
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: ButtonGroupProps) {
     // Resolve design tokens

package/src/components/Card/Card.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
@@ -50,7 +51,7 @@ export interface CardProps {
 export function Card({
     media,
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     mediaAspectRatio = 154 / 116,
     style,
 }: CardProps) {

package/src/components/CardCTA/CardCTA.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle, type StyleProp } 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 IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
 
@@ -33,7 +33,7 @@ function CardCTA({
     iconName = 'ic_upi_number',
     buttonLabel = 'Button',
     onPressButton,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     iconSlot,
     buttonSlot,
     style,

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import ProductLabel from '../ProductLabel/ProductLabel'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type CardProviderInfoProps = {
   /** Product name shown in the ProductLabel header. */
@@ -28,7 +28,7 @@ function CardProviderInfo({
   label = 'Gold',
   imageSource,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: CardProviderInfoProps) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5'

package/src/components/Carousel/Carousel.tsx

@@ -19,6 +19,7 @@ import {
   type LayoutChangeEvent,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 // ---------------------------------------------------------------------------
 // Context
@@ -34,7 +35,7 @@ interface CarouselContextValue {
 }
 
 const CarouselContext = createContext<CarouselContextValue>({
-  modes: {},
+  modes: EMPTY_MODES,
   activeIndex: 0,
   totalItems: 0,
   goTo: () => { },
@@ -76,7 +77,7 @@ export interface CarouselProps {
 
 export function Carousel({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   autoPlay = false,
   autoPlayInterval = 4000,
   showPagination = true,

package/src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import {
 } 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'
 
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
@@ -81,7 +82,7 @@ function Checkbox({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
 }: CheckboxProps) {

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 
 export type ChipGroupProps = {
     /**
@@ -30,7 +30,7 @@ export type ChipGroupProps = {
  */
 function ChipGroup({
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     testID,
 }: ChipGroupProps) {

package/src/components/ChipSelect/ChipSelect.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 
 export type ChipSelectProps = {
@@ -45,7 +46,7 @@ function ChipSelect({
     label = 'Date',
     active = false,
     icon = 'ic_calendar_week',
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     labelSlot,
     onPress,

package/src/components/DebitCard/DebitCard.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, type StyleProp, type ImageSourcePropType } 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'
 
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png')
 
@@ -38,7 +38,7 @@ function DebitCard({
     cardArtSource = defaultCardArt,
     bankLogoSlot,
     providerLogoSlot,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
 }: DebitCardProps) {
     const { modes: globalModes } = useTokens()

package/src/components/Disclaimer/Disclaimer.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type DisclaimerProps = {
   disclaimer?: string;
@@ -35,7 +36,7 @@ type DisclaimerProps = {
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   textStyle,
   accessibilityLabel,

package/src/components/Divider/Divider.tsx

@@ -5,6 +5,7 @@ import {
   type StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type DividerDirection = 'horizontal' | 'vertical'
 
@@ -56,7 +57,7 @@ export type DividerProps = {
  */
 function Divider({
   direction = 'horizontal',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
 }: DividerProps) {

package/src/components/Drawer/Drawer.tsx

@@ -15,6 +15,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
@@ -86,7 +87,7 @@ type DrawerProps = {
  */
 function Drawer({
 
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   title,
   header,

package/src/components/EmptyState/EmptyState.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type EmptyStateProps = {
     /**
@@ -50,7 +51,7 @@ function EmptyState({
     showDescription = true,
     iconSlot,
     buttonSlot,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     testID,
 }: EmptyStateProps) {