jfs-components 0.0.62 → 0.0.64

package/src/components/IconButton/IconButton.tsx

@@ -1,13 +1,16 @@
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
+  Platform,
   Pressable,
   type AccessibilityState,
+  type PressableStateCallbackType,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type IconButtonProps = SafePressableProps & {
   iconName?: string;
@@ -29,7 +32,7 @@ type IconButtonProps = SafePressableProps & {
   /**
    * Icon to display when isToggle is true and isActive is false
    */
-  inactiveIcon?: string; // Fixed typo in previous thought, user said "inactive icon"
+  inactiveIcon?: string;
   /**
    * Whether the toggle button is in active state (only used when isToggle is true)
    */
@@ -40,41 +43,75 @@ type IconButtonProps = SafePressableProps & {
   webAccessibilityProps?: WebAccessibilityProps;
 };
 
+// ---------------------------------------------------------------------------
+// Module-scope constants
+// ---------------------------------------------------------------------------
+
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = 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. Hover/focus stay mirrored
+// in React state because they're sustained visual states (web only).
+const pressedOverlayStyle: ViewStyle = { opacity: 0.7 }
+const hoverOverlayStyle: ViewStyle = { opacity: 0.85 }
+const focusOverlayStyle: ViewStyle = { borderWidth: 1, borderColor: '#222' }
+
+interface IconButtonTokens {
+  baseContainerStyle: ViewStyle;
+  iconColor: string;
+  iconSize: number;
+}
+
+function resolveIconButtonTokens(modes: Record<string, any>, disabled: boolean): IconButtonTokens {
+  const radiusRaw = (getVariableByName('iconButton/radius', modes) ?? 9999) as number
+  const padding = (getVariableByName('iconButton/padding', modes) ?? 12) as number
+  const backgroundColor = (getVariableByName('iconButton/background', modes) ?? '#cfa159') as string
+  const borderColor = (getVariableByName('iconButton/border/color', modes) ?? '#ffffff00') as string
+  const borderSize = (getVariableByName('iconButton/border/size', modes) ?? 1) as number
+  const iconColor = (getVariableByName('iconButton/icon/color', modes) ?? '#0f0d0a') as string
+  const iconSize = (getVariableByName('iconButton/icon/size', modes) ?? 18) as number
+
+  // 9999 is the design-token sentinel for "perfect circle"
+  const buttonSize = padding * 2 + iconSize
+  const borderRadius = radiusRaw === 9999 ? buttonSize / 2 : radiusRaw
+
+  return {
+    baseContainerStyle: {
+      width: buttonSize,
+      height: buttonSize,
+      borderRadius,
+      borderWidth: borderSize,
+      borderColor,
+      backgroundColor,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding,
+      opacity: disabled ? 0.5 : 1,
+    },
+    iconColor,
+    iconSize,
+  }
+}
+
 /**
  * IconButton component that displays an icon within a pressable button container.
- * 
- * This component displays an icon within a styled button container that can be pressed.
- * All styling values are resolved from Figma design tokens using the provided modes.
- * 
- * @component
- * @param {Object} props - Component props
- * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
- * @param {Function} [props.onPress] - Callback function called when the button is pressed
- * @param {boolean} [props.disabled=false] - Whether the button is disabled
- * @param {Object} [props.style] - Additional styles for the container
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- * @param {Object} [props.accessibilityState] - Additional accessibility state information
- * 
- * @example
- * ```jsx
- * // Default icon button
- * <IconButton modes={{}} />
- * 
- * // Custom icon with size mode
- * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
- * 
- * // With appearance mode
- * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
- * 
- * // With accessibility label
- * <IconButton iconName="ic_search" accessibilityLabel={undefined} accessibilityHint="Opens the search screen" />
- * ```
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, isToggle, isActive])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}`.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had a redundant `manualPressStyle` (a duplicate
+ *    pressed transform mirrored via React state) — removed.
+ *  - Wrapped in `React.memo`.
  */
 function IconButton({
-  iconName = "ic_card",
-  modes = {},
+  iconName = 'ic_card',
+  modes = EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -88,64 +125,52 @@ function IconButton({
   isActive = false,
   ...rest
 }: IconButtonProps) {
+  // Merge explicit props with modes for token resolution. Memoize the merged
+  // object so its identity is stable when none of the inputs change — that
+  // keeps the resolver's WeakMap cache hot.
+  const componentModes = useMemo(
+    () => ({
+      ...modes,
+      isToggle,
+      isActive,
+    }),
+    [modes, isToggle, isActive]
+  )
+
+  const tokens = useMemo(
+    () => resolveIconButtonTokens(componentModes, disabled),
+    [componentModes, disabled]
+  )
+
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [isPressed, setIsPressed] = useState(false)
-
-
-  // Merge explicit props with modes for token resolution
-  // This allows the variable resolver to pick up isToggle and isActive specific tokens
-  const componentModes = {
-    ...modes,
-    'isToggle': isToggle,
-    'isActive': isActive,
-  };
-
-  // Resolve design tokens using only the Figma-defined base tokens for Icon Button (node 72:14)
-  const radius = getVariableByName('iconButton/radius', componentModes) ?? 9999
-  const padding = getVariableByName('iconButton/padding', componentModes) ?? 12
-  const backgroundColor = getVariableByName('iconButton/background', componentModes) ?? '#cfa159'
-  const borderColor = getVariableByName('iconButton/border/color', componentModes) ?? '#ffffff00'
-  const borderSize = getVariableByName('iconButton/border/size', componentModes) ?? 1
-  const iconColor = getVariableByName('iconButton/icon/color', componentModes) ?? '#0f0d0a'
-  const iconSize = getVariableByName('iconButton/icon/size', componentModes) ?? 18
 
-  // Determine which icon to display
-  // If isToggle is yes, use active/inactive icons based on isActive state
-  // Otherwise use standard iconName
-  let finalIconName = iconName;
-  if (isToggle) {
-    if (isActive && activeIcon) {
-      finalIconName = activeIcon;
-    } else if (!isActive && inactiveIcon) {
-      finalIconName = inactiveIcon;
-    }
-  }
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onFocus?: (e: any) => void
+    onBlur?: (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.onFocus = (rest as any)?.onFocus
+  userHandlersRef.current.onBlur = (rest as any)?.onBlur
+  userHandlersRef.current.onHoverIn = (rest as any)?.onHoverIn
+  userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
 
-  // Convert radius to React Native format (if 9999, use padding*2 for perfect circle)
-  // For a button, the size is determined by padding, so radius should be padding*2 for a circle
-  const buttonSize = padding * 2 + iconSize
-  const borderRadius = radius === 9999 ? buttonSize / 2 : radius
-
-  // Container base style
-  const baseContainerStyle: ViewStyle = {
-    width: buttonSize,
-    height: buttonSize,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: padding,
-    opacity: disabled ? 0.5 : 1,
-  }
+  // Determine which icon to display
+  const finalIconName =
+    isToggle
+      ? (isActive && activeIcon
+        ? activeIcon
+        : (!isActive && inactiveIcon ? inactiveIcon : iconName))
+      : iconName
 
   // Generate default accessibility label from icon name if not provided
   const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
 
-  // Get web platform support props
   const webProps = usePressableWebSupport({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -154,6 +179,40 @@ function IconButton({
     webAccessibilityProps,
   })
 
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleFocus = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(true)
+    userHandlersRef.current.onFocus?.(e)
+  }, [])
+  const handleBlur = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(false)
+    userHandlersRef.current.onBlur?.(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)
+  }, [])
+
+  const styleCallback = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.baseContainerStyle,
+      style,
+      pressed && !disabled ? pressedOverlayStyle : null,
+      isHovered && !disabled ? hoverOverlayStyle : null,
+      isFocused && !disabled ? focusOverlayStyle : null,
+    ],
+    [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]
+  )
+
   return (
     <Pressable
       accessibilityRole="button"
@@ -161,54 +220,24 @@ function IconButton({
       accessibilityHint={accessibilityHint}
       accessibilityState={{
         disabled,
-        ...accessibilityState
+        ...accessibilityState,
       }}
       onPress={onPress}
       disabled={disabled}
-      onPressIn={(e: any) => {
-        setIsPressed(true)
-          ; (rest as any)?.onPressIn?.(e)
-      }}
-      onPressOut={(e: any) => {
-        setIsPressed(false)
-          ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
-      }}
-      onHoverIn={(e: any) => {
-        setIsHovered(true)
-          ; (rest as any)?.onHoverIn?.(e)
-      }}
-      onHoverOut={(e: any) => {
-        setIsHovered(false)
-          ; (rest as any)?.onHoverOut?.(e)
-      }}
-      style={({ pressed }) => {
-        const pressedStyle = pressed && !disabled ? { opacity: 0.7 } : null
-        const hoverStyle = isHovered && !disabled ? { opacity: 0.85 } : null
-        const focusStyle = isFocused && !disabled ? { borderWidth: 1, borderColor: '#222' } : null
-        const manualPressStyle = isPressed && !disabled ? { transform: [{ scale: 0.98 }] } : null
-        return [
-          baseContainerStyle,
-          style,
-          pressedStyle,
-          hoverStyle,
-          focusStyle,
-          manualPressStyle,
-        ] as StyleProp<ViewStyle>
-      }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      unstable_pressDelay={PRESS_DELAY}
+      style={styleCallback}
       {...webProps}
     >
       <Icon
         name={finalIconName}
-        size={iconSize}
-        color={iconColor}
+        size={tokens.iconSize}
+        color={tokens.iconColor}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       />
@@ -216,5 +245,4 @@ function IconButton({
   )
 }
 
-export default IconButton
-
+export default React.memo(IconButton)

package/src/components/IconCapsule/IconCapsule.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 
 type IconCapsuleProps = {
@@ -11,82 +12,101 @@ type IconCapsuleProps = {
   accessibilityRole?: string;
 } & React.ComponentProps<typeof View>;
 
+interface IconCapsuleTokens {
+  containerStyle: ViewStyle;
+  iconColor: string;
+  iconSize: number;
+}
+
+function resolveIconCapsuleTokens(modes: Record<string, any>): IconCapsuleTokens {
+  const size = (getVariableByName('iconCapsule/size', modes) || 42) as number
+  const radiusRaw = (getVariableByName('iconCapsule/radius', modes) || 9999) as number
+  const backgroundColor = (getVariableByName('iconCapsule/background', modes) || '#cfa159') as string
+  const borderColor = (getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)') as string
+  const borderSize = (getVariableByName('iconCapsule/border/size', modes) || 1) as number
+  const iconColor = (getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a') as string
+  const iconSize = (getVariableByName('iconCapsule/icon/size', modes) || 18) as number
+
+  // 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,
+      backgroundColor,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    iconColor,
+    iconSize,
+  }
+}
+
 /**
  * IconCapsule component that displays an icon within a circular or rounded container.
- * 
- * This component displays an icon (default: ic_card) within a styled capsule container.
+ *
  * All styling values are resolved from Figma design tokens using the provided modes.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
- * 
- * @example
- * ```jsx
- * // Default icon (ic_card)
- * <IconCapsule modes={{}} />
- * 
- * // Custom icon
- * <IconCapsule iconName="ic_rupee" modes={{}} />
- * 
- * // With appearance mode
- * <IconCapsule modes={{"Appearance": "Secondary"}} />
- * 
- * // With accessibility label
- * <IconCapsule iconName="ic_card" accessibilityLabel={undefined} />
- * ```
+ *
+ * Performance notes:
+ *  - All token reads collapsed into a single `useMemo([modes])`. The merged
+ *    `(globalModes + propModes)` object is also memoized so downstream
+ *    `getVariableByName` calls hit the resolver's per-modes-object cache.
+ *  - Wrapped in `React.memo`; with the shared `EMPTY_MODES` default the
+ *    common path benefits from full memoization.
  */
 function IconCapsule({
-  iconName = "ic_card",
-  modes: propModes = {},
-  accessibilityLabel,
-  accessibilityRole = "image",
+  iconName = 'ic_card',
+  modes: propModes = EMPTY_MODES,
+  // accessibilityLabel is accepted on the type for API back-compat but the
+  // component intentionally renders `accessibilityLabel={undefined}` (icons
+  // are decorative; the surrounding component owns the label).
+  accessibilityLabel: _accessibilityLabel,
+  accessibilityRole = 'image',
+  style: styleProp,
   ...rest
 }: IconCapsuleProps) {
   const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
-  // Resolve design tokens using the provided modes
-  const size = getVariableByName('iconCapsule/size', modes) || 42
-  const radius = getVariableByName('iconCapsule/radius', modes) || 9999
-  const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159'
-  const borderColor = getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = getVariableByName('iconCapsule/border/size', modes) || 1
-  const iconColor = getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a'
-  const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18
 
-  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
-  const borderRadius = radius === 9999 ? size / 2 : radius
+  // Memoize the merged modes object so its identity is stable across renders
+  // when neither the global nor the prop modes change. This is what lets the
+  // resolver's WeakMap cache hit on every subsequent `getVariableByName`.
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
 
-  // Container style
-  const containerStyle: ViewStyle = {
-    width: size,
-    height: size,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }
+  const tokens = useMemo(() => resolveIconCapsuleTokens(modes), [modes])
 
-  // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+  const composedStyle = useMemo<StyleProp<ViewStyle>>(
+    () => (styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle),
+    [tokens.containerStyle, styleProp]
+  )
 
   return (
     <View
-      style={containerStyle}
+      style={composedStyle}
       accessibilityRole={accessibilityRole}
       accessibilityLabel={undefined}
       {...rest}
     >
       <Icon
         name={iconName}
-        size={iconSize}
-        color={iconColor}
+        size={tokens.iconSize}
+        color={tokens.iconColor}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       />
@@ -94,5 +114,4 @@ function IconCapsule({
   )
 }
 
-export default IconCapsule
-
+export default React.memo(IconCapsule)

package/src/components/InputSearch/InputSearch.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import TextInput from '../TextInput/TextInput'
 
@@ -9,13 +10,19 @@ import TextInput from '../TextInput/TextInput'
  */
 type SupportTextProps = {
     label?: string;
+    /**
+     * Icon name from the icon registry (e.g. 'ic_info', 'ic_cart').
+     * Defaults to 'ic_info'.
+     */
+    iconName?: string;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
 }
 
 function SupportText({
     label = "Support Text",
-    modes = {},
+    iconName = "ic_info",
+    modes = EMPTY_MODES,
     style
 }: SupportTextProps) {
     // Resolve variables
@@ -35,7 +42,7 @@ function SupportText({
             alignItems: 'center',
             gap: gap,
         }, style]}>
-            <Icon name="ic_info" size={iconSize} color={foreground} />
+            <Icon name={iconName} size={iconSize} color={foreground} />
             <Text style={{
                 color: foreground,
                 fontSize: fontSize,
@@ -52,6 +59,11 @@ function SupportText({
 export type InputSearchProps = {
     supportText?: boolean;
     supportTextLabel?: string;
+    /**
+     * Icon name from the icon registry to render inside the support text
+     * (e.g. 'ic_info', 'ic_cart'). Defaults to 'ic_info'.
+     */
+    supportTextIcon?: string;
     modes?: Record<string, any>;
     containerStyle?: StyleProp<ViewStyle>;
 
@@ -66,12 +78,13 @@ export type InputSearchProps = {
     inputStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-}
+} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
 export default function InputSearch({
     supportText = true,
     supportTextLabel = "Support Text",
-    modes = {},
+    supportTextIcon = "ic_info",
+    modes = EMPTY_MODES,
     containerStyle,
     placeholder = "Search",
     value,
@@ -158,6 +171,7 @@ export default function InputSearch({
             {supportText && (
                 <SupportText
                     label={supportTextLabel}
+                    iconName={supportTextIcon}
                     modes={componentModes}
                 />
             )}

package/src/components/LazyList/LazyList.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 { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 type LazyListProps = {
   listGroupsSlot?: React.ReactNode;
@@ -32,7 +32,7 @@ type LazyListProps = {
  */
 function LazyList({
   listGroupsSlot,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
   accessibilityHint,

package/src/components/LinearMeter/LinearMeter.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle, type DimensionValue } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import MoneyValue from '../MoneyValue/MoneyValue'
 
 type LinearMeterLabelProps = {
@@ -11,7 +12,7 @@ type LinearMeterLabelProps = {
 
 const LinearMeterLabel = ({
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     ...rest
 }: LinearMeterLabelProps) => {
@@ -48,7 +49,7 @@ export type LinearMeterProps = {
 
 const LinearMeter = ({
     value = 0,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     trackStyle,
     indicatorStyle,

package/src/components/ListGroup/ListGroup.tsx

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * 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.
  */
-import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
 
 type ListGroupProps = {
   label?: string;
@@ -47,7 +47,7 @@ function ListGroup({
   label = '',
   listGroupSlot,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,