@planningcenter/chat-react-native 3.15.0-rc.1 → 3.15.0-rc.10

package/src/__tests__/event-polyfill.test.ts

@@ -0,0 +1,314 @@
+/**
+ * Tests for Event/CustomEvent/EventTarget polyfills
+ */
+
+import Event from '../polyfills/events/Event'
+import EventTarget from '../polyfills/events/EventTarget'
+import { CustomEvent } from '../polyfills/events/CustomEvent'
+
+// Set up global polyfill for tests
+;(global as any).Event = Event
+;(global as any).CustomEvent = CustomEvent
+
+describe('Event Polyfill', () => {
+  describe('Event', () => {
+    it('should create a basic event', () => {
+      const event = new Event('test')
+      expect(event.type).toBe('test')
+      expect(event.bubbles).toBe(false)
+      expect(event.cancelable).toBe(false)
+      expect(event.composed).toBe(false)
+      expect(event.defaultPrevented).toBe(false)
+      expect(event.isTrusted).toBe(false)
+      expect(event.eventPhase).toBe(Event.NONE)
+      expect(typeof event.timeStamp).toBe('number')
+    })
+
+    it('should create an event with options', () => {
+      const event = new Event('test', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      })
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+      expect(event.composed).toBe(true)
+    })
+
+    it('should have correct phase constants', () => {
+      expect(Event.NONE).toBe(0)
+      expect(Event.CAPTURING_PHASE).toBe(1)
+      expect(Event.AT_TARGET).toBe(2)
+      expect(Event.BUBBLING_PHASE).toBe(3)
+    })
+
+    it('should prevent default when cancelable', () => {
+      const event = new Event('test', { cancelable: true })
+      expect(event.defaultPrevented).toBe(false)
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should not prevent default when not cancelable', () => {
+      const event = new Event('test', { cancelable: false })
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(false)
+    })
+
+    it('should support stopPropagation', () => {
+      const event = new Event('test')
+      // No error thrown - internal flags are set
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    })
+  })
+
+  describe('CustomEvent', () => {
+    it('should create a custom event with detail', () => {
+      const detail = { foo: 'bar', count: 42 }
+      const event = new CustomEvent('custom', { detail })
+      expect(event.type).toBe('custom')
+      expect(event.detail).toEqual(detail)
+    })
+
+    it('should inherit from Event', () => {
+      const event = new CustomEvent('custom', {
+        bubbles: true,
+        cancelable: true,
+        detail: 'test',
+      })
+      expect(event instanceof Event).toBe(true)
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+    })
+
+    it('should handle undefined detail', () => {
+      const event = new CustomEvent('custom')
+      expect(event.detail).toBeUndefined()
+    })
+  })
+
+  describe('EventTarget', () => {
+    let target: EventTarget
+
+    beforeEach(() => {
+      target = new EventTarget()
+    })
+
+    it('should add and remove event listeners', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const event = new Event('test')
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener).toHaveBeenCalledTimes(1)
+      expect(result).toBe(true) // not prevented
+
+      target.removeEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // not called again
+    })
+
+    it('should handle multiple listeners for the same event', () => {
+      const listener1 = jest.fn()
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle once option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { once: true })
+
+      target.dispatchEvent(new Event('test'))
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle capture option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { capture: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+
+      target.removeEventListener('test', listener, { capture: true })
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle passive option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { passive: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle object listeners with handleEvent', () => {
+      const listener = {
+        handleEvent: jest.fn(),
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener.handleEvent).toHaveBeenCalledTimes(1)
+    })
+
+    it('should return false when event is prevented', () => {
+      const listener = (event: Event) => {
+        event.preventDefault()
+      }
+
+      target.addEventListener('test', listener)
+      const event = new Event('test', { cancelable: true })
+      const result = target.dispatchEvent(event)
+
+      expect(result).toBe(false)
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should set event properties during dispatch', () => {
+      let capturedEvent: Event | null = null
+
+      const listener = (event: Event) => {
+        capturedEvent = event
+        expect(event.target).toBe(target)
+        expect(event.currentTarget).toBe(target)
+        expect(event.eventPhase).toBe(Event.AT_TARGET)
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(capturedEvent).not.toBeNull()
+      // After dispatch, these should be reset
+      expect(capturedEvent!.currentTarget).toBeNull()
+      expect(capturedEvent!.eventPhase).toBe(Event.NONE)
+    })
+
+    it('should handle bubbling events', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const bubblingEvent = new Event('test', { bubbles: true })
+      target.dispatchEvent(bubblingEvent)
+
+      expect(listener).toHaveBeenCalledWith(bubblingEvent)
+    })
+
+    it('should handle error in listener gracefully', () => {
+      const errorListener = () => {
+        throw new Error('Test error')
+      }
+      const normalListener = jest.fn()
+
+      // Mock console.error to avoid test output noise
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
+
+      target.addEventListener('test', errorListener)
+      target.addEventListener('test', normalListener)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(normalListener).toHaveBeenCalledTimes(1)
+      expect(consoleErrorSpy).toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
+    })
+
+    it('should ignore null listeners', () => {
+      // Should not throw
+      target.addEventListener('test', null)
+      target.removeEventListener('test', null)
+      target.dispatchEvent(new Event('test'))
+    })
+
+    it('should handle composed path', () => {
+      let composedPath: readonly EventTarget[] | null = null
+
+      const listener = (event: Event) => {
+        composedPath = event.composedPath()
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(composedPath).toEqual([target])
+    })
+
+    it('should prevent duplicate listeners', () => {
+      const listener = jest.fn()
+
+      target.addEventListener('test', listener)
+      target.addEventListener('test', listener) // Same listener
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // Only called once
+    })
+  })
+
+  describe('Event flow integration', () => {
+    it('should work with CustomEvent dispatch', () => {
+      const target = new EventTarget()
+      const listener = jest.fn()
+      const detail = { message: 'hello' }
+
+      target.addEventListener('custom', listener)
+
+      const event = new CustomEvent('custom', {
+        detail,
+        bubbles: true,
+        cancelable: true,
+      })
+
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener.mock.calls[0][0].detail).toEqual(detail)
+      expect(result).toBe(true)
+    })
+
+    it('should handle stopImmediatePropagation', () => {
+      const target = new EventTarget()
+      const listener1 = jest.fn((event: Event) => {
+        event.stopImmediatePropagation()
+      })
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(0) // Stopped
+    })
+  })
+
+  describe('Global polyfill installation', () => {
+    it('should make Event available globally', () => {
+      // This tests that our polyfill setup works
+      expect(typeof (global as any).Event).toBe('function')
+      expect(typeof (global as any).CustomEvent).toBe('function')
+
+      const globalEvent = new (global as any).Event('test')
+      expect(globalEvent.type).toBe('test')
+
+      const globalCustomEvent = new (global as any).CustomEvent('custom', {
+        detail: 'test',
+      })
+      expect(globalCustomEvent.detail).toBe('test')
+    })
+  })
+})

package/src/components/conversations/conversation_actions.tsx

@@ -219,7 +219,7 @@ const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({
     swipeableChildContainer: {
-      backgroundColor: colors.surfaceColor100,
+      backgroundColor: colors.conversationActionsBackground,
     },
     actionButtonContainer: {
       flexDirection: 'row',

package/src/components/display/action_button.tsx

@@ -66,14 +66,11 @@ export const ActionButton = ({
   )
 }
 
-const SCALE_THAT_BUTTONS_WRAP = 1.15
-
 const useStyles = () => {
   const { fontScale } = useWindowDimensions()
   const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
   const containerVerticalPadding = 16
-  const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP
 
   return StyleSheet.create({
     container: {
@@ -87,7 +84,7 @@ const useStyles = () => {
     },
     buttonRow: {
       flexDirection: 'row',
-      justifyContent: isButtonsWrapping ? 'center' : 'space-between',
+      justifyContent: fontScale > 1 ? 'center' : 'space-between',
       alignItems: 'center',
       gap: 16,
       flexWrap: 'wrap-reverse',

package/src/components/display/avatar.tsx

@@ -12,6 +12,8 @@ interface AvatarProps {
   presence?: AvatarPresenceProps['presence']
   showFallback?: boolean
   fallbackIconName?: IconString
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function Avatar({
@@ -20,11 +22,13 @@ export function Avatar({
   sourceUri,
   showFallback = false,
   fallbackIconName = 'general.person',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarProps) {
   const shouldShowFallback = showFallback || !sourceUri
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/avatar_group.tsx

@@ -10,6 +10,8 @@ interface AvatarGroupDisplayProps {
   showFallback?: boolean
   fallbackIconName?: IconString
   size?: AvatarRootProps['size']
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function AvatarGroup({
@@ -17,11 +19,13 @@ export function AvatarGroup({
   showFallback = false,
   fallbackIconName = 'general.person',
   size = 'lg',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarGroupDisplayProps) {
   const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/icon.tsx

@@ -5,29 +5,17 @@ import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 
-// @ts-ignore
 import * as accounts from '@planningcenter/icons/paths/accounts'
-// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
-// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand'
-// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar'
-// @ts-ignore
 import * as chat from '@planningcenter/icons/paths/chat'
-// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
-// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general'
-// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups'
-// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark'
-// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people'
-// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
-// @ts-ignore
 import * as publishing from '@planningcenter/icons/paths/publishing'
 
 // =================================
@@ -57,7 +45,22 @@ export type IconStyle = ViewStyle & {
 }
 
 export type IconSetName = keyof typeof ICONS
-export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
+type IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string
+
+export type IconString =
+  | `accounts.${IconName<'accounts'>}`
+  | `api.${IconName<'api'>}`
+  | `brand.${IconName<'brand'>}`
+  | `calendar.${IconName<'calendar'>}`
+  | `chat.${IconName<'chat'>}`
+  | `churchCenter.${IconName<'churchCenter'>}`
+  | `general.${IconName<'general'>}`
+  | `groups.${IconName<'groups'>}`
+  | `logomark.${IconName<'logomark'>}`
+  | `people.${IconName<'people'>}`
+  | `services.${IconName<'services'>}`
+  | `publishing.${IconName<'publishing'>}`
 
 // =================================
 // ====== Component ================
@@ -137,7 +140,7 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
 const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName as IconSetName]?.[iconName]
+  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]
 }
 
 // =================================

package/src/components/display/index.ts

@@ -19,3 +19,4 @@ export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
 export * from './keyboard_view'
+export * from './pressable_row'

package/src/components/display/pressable_row.tsx

@@ -0,0 +1,103 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { PropsWithChildren } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Icon, IconProps } from './icon'
+import { Text } from './text'
+
+export interface PressableRowProps extends PropsWithChildren {
+  isActive?: boolean
+  onPress: () => void
+  style?: ViewStyle
+  textStyle?: any
+  text: string
+  iconPath?: IconProps['name']
+  iconColor?: string
+}
+
+export const PressableRow = ({
+  children,
+  isActive,
+  onPress,
+  style,
+  text,
+  textStyle,
+  iconPath,
+  iconColor,
+}: PressableRowProps) => {
+  const styles = useRowStyles({ isActive, iconColor })
+
+  return (
+    <PlatformPressable
+      style={styles.container}
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isActive }}
+    >
+      <View style={[styles.innerContainer, style]}>
+        {children}
+        <Text style={textStyle}>{text}</Text>
+        <Icon
+          name={iconPath || 'general.check'}
+          size={16}
+          style={styles.rowIconRight}
+          accessibilityElementsHidden
+        />
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useRowStyles = ({
+  isActive = false,
+  iconColor,
+}: { isActive?: boolean; iconColor?: string } = {}) => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      paddingLeft: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingVertical: 12,
+      paddingRight: 16,
+    },
+    borderLessRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 12,
+      paddingRight: 16,
+      paddingLeft: 16,
+    },
+    viewMoreButton: {
+      flex: 1,
+    },
+    row: {},
+    rowImage: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    rowContent: {
+      flexShrink: 1,
+    },
+    rowIconRight: {
+      marginLeft: 'auto',
+      color: iconColor || theme.colors.iconColorDefaultDim,
+      opacity: isActive ? 1 : 0,
+    },
+    rowTitle: {
+      fontSize: 16,
+      flexShrink: 1,
+    },
+  })
+}

package/src/components/primitive/avatar_primitive.tsx

@@ -85,6 +85,7 @@ interface AvatarContextType {
   size: AvatarSize
   allImagesLoaded: boolean
   setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
+  maxFontSizeMultiplier: number
 }
 
 const AvatarContext = createContext<AvatarContextType | null>(null)
@@ -104,15 +105,24 @@ function useAvatarContext() {
 interface AvatarRootProps {
   children: React.ReactNode
   size?: AvatarSize
+  style?: ViewProps['style']
+  maxFontSizeMultiplier?: number
 }
 
-function AvatarRoot({ children, size = 'md' }: AvatarRootProps) {
+function AvatarRoot({
+  children,
+  size = 'md',
+  style,
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+}: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles({ size })
+  const styles = useStyles({ size, maxFontSizeMultiplier })
 
   return (
-    <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
-      <View style={styles.rootContainer}>{children}</View>
+    <AvatarContext.Provider
+      value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}
+    >
+      <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>
   )
 }
@@ -126,7 +136,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const styles = useStyles()
+  const { maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>
@@ -146,8 +157,8 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
-  const { size } = useAvatarContext()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
   return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
@@ -172,9 +183,9 @@ interface AvatarImageFallbackProps {
 }
 
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
-  const { size } = useAvatarContext()
-  const styles = useStyles()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
@@ -202,8 +213,8 @@ interface AvatarGroupProps {
 type AvatarIndex = 0 | 1 | 2 | 3
 
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
-  const styles = useStyles()
-  const { setAllImagesLoaded } = useAvatarContext()
+  const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
   const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
@@ -312,9 +323,9 @@ AvatarGroup.displayName = 'Avatar.Group'
 // =================================
 
 function AvatarGroupLoader() {
-  const { size, allImagesLoaded } = useAvatarContext()
-  const styles = useStyles({ size })
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
@@ -337,8 +348,8 @@ interface AvatarPresenceProps extends ViewProps {
 }
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
-  const { size } = useAvatarContext()
-  const styles = useStyles({ size, presence })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, presence, maxFontSizeMultiplier })
 
   return <View style={styles.presence} {...props} />
 }
@@ -352,11 +363,16 @@ AvatarPresence.displayName = 'Avatar.Presence'
 interface Styles {
   size?: AvatarSize
   presence?: AvatarPresenceType
+  maxFontSizeMultiplier?: number
 }
 
-const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
+const useStyles = ({
+  size = 'md',
+  presence = 'offline',
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+}: Styles = {}) => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,