@planningcenter/chat-react-native 4.4.0-rc.7 → 4.4.0

package/src/screens/message_actions_screen.tsx

@@ -9,6 +9,7 @@ import { useReactionStyles } from '../components/conversation/message_reaction'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
+import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -49,6 +50,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     { conversation_id },
     { refetchOnMount: false }
   )
+  const { data: conversation } = useConversation({ conversation_id }, { refetchOnMount: false })
   const message = messages.find(m => m.id === message_id)
 
   if (!message) return null
@@ -57,6 +59,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     <MessageActionsScreenContent
       message={message}
       conversation_id={conversation_id}
+      conversationDisabled={!!conversation.disabled}
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
@@ -69,6 +72,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
 function MessageActionsScreenContent({
   message,
   conversation_id,
+  conversationDisabled,
   canDeleteNonAuthoredMessages,
   refetchMessages,
   inReplyScreen,
@@ -77,6 +81,7 @@ function MessageActionsScreenContent({
 }: {
   message: MessageResource
   conversation_id: number
+  conversationDisabled: boolean
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
   inReplyScreen?: boolean
@@ -241,28 +246,32 @@ function MessageActionsScreenContent({
 
   const showReportMessageAction =
     !message?.mine && featureEnabled(availableFeatures.message_reporting)
+  const showDeleteMessageAction =
+    !conversationDisabled && (message?.mine || canDeleteNonAuthoredMessages)
 
   return (
     <FormSheet.Root style={styles.formSheetContent}>
-      <View style={styles.reactionList}>
-        {availableReactions.map((reaction, index) => (
-          <Reaction
-            key={index}
-            reaction={reaction}
-            onPress={() => {
-              Haptic.impactLight()
-              handleReactionToggle({
-                value: reaction.value,
-                mine: reaction.mine,
-              })
-              navigation.goBack()
-            }}
-          />
-        ))}
-      </View>
+      {!conversationDisabled && (
+        <View style={styles.reactionList}>
+          {availableReactions.map((reaction, index) => (
+            <Reaction
+              key={index}
+              reaction={reaction}
+              onPress={() => {
+                Haptic.impactLight()
+                handleReactionToggle({
+                  value: reaction.value,
+                  mine: reaction.mine,
+                })
+                navigation.goBack()
+              }}
+            />
+          ))}
+        </View>
+      )}
       {!isSystemMessage && (
         <View style={styles.actions}>
-          {!inReplyScreen && (
+          {!inReplyScreen && !conversationDisabled && (
             <FormSheet.Action
               onPress={handleReplyPress}
               title="Reply to message"
@@ -285,7 +294,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Opens a form to report this message"
             />
           )}
-          {message?.mine && (
+          {message?.mine && !conversationDisabled && (
             <FormSheet.Action
               onPress={() => handleEditPress()}
               title="Edit message"
@@ -301,7 +310,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Opens a modal with a list of people who read your message."
             />
           )}
-          {message?.mine && hasExpandedLink && (
+          {message?.mine && hasExpandedLink && !conversationDisabled && (
             <FormSheet.Action
               onPress={() => handleRemoveLinkPreviewConfirm()}
               title="Remove link preview"
@@ -309,7 +318,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Removes an expanded link preview from the message."
             />
           )}
-          {(message?.mine || canDeleteNonAuthoredMessages) && (
+          {showDeleteMessageAction && (
             <FormSheet.Action
               onPress={() => handleDeleteConfirm()}
               title="Delete message"

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render } from '@testing-library/react-native'
 import React from 'react'
-import { Keyboard } from 'react-native'
+import { Keyboard, ScrollView } from 'react-native'
 import type { useSearchResults } from '../../../hooks/use_search_results'
 import type {
   ConversationSearchResultResource,
@@ -116,6 +116,18 @@ describe('SearchScreen', () => {
     expect(view.getByLabelText('Loading results')).toBeTruthy()
   })
 
+  it('lets the prompt scroll while taps still reach the field', () => {
+    const view = render(<SearchScreen />)
+
+    const scrollView = view.UNSAFE_getByType(ScrollView)
+    expect(scrollView.props.keyboardShouldPersistTaps).toBe('handled')
+    expect(scrollView.props.contentContainerStyle).toMatchObject({
+      flexGrow: 1,
+      justifyContent: 'center',
+    })
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+
   it('returns to the prompt as soon as the term is cleared', () => {
     const view = render(<SearchScreen />)
     const input = view.getByLabelText(inputLabel)

package/src/screens/search/search_screen.tsx

@@ -4,7 +4,7 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
 import React, { useRef, useState } from 'react'
-import { Keyboard, StyleSheet, View } from 'react-native'
+import { Keyboard, ScrollView, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
   composeOptions,
@@ -73,7 +73,9 @@ export function SearchScreen() {
             onSettled={publishSearch}
           />
         ) : (
-          <SearchPromptBlankState />
+          <ScrollView contentContainerStyle={styles.prompt} keyboardShouldPersistTaps="handled">
+            <SearchPromptBlankState />
+          </ScrollView>
         )}
       </View>
     </KeyboardView>
@@ -84,4 +86,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  prompt: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
 })

package/src/screens/send_giphy_screen.tsx

@@ -17,16 +17,18 @@ export const SendGiphyScreenOptions = getFormSheetScreenOptions({
 
 export type SendGiphyScreenProps = StaticScreenProps<{
   conversation_id: number
+  reply_root_id?: string | null
   search_term: string
 }>
 
 export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
-  const { conversation_id, search_term } = route.params
+  const { conversation_id, reply_root_id, search_term } = route.params
   const styles = useStyles()
   const navigation = useNavigation()
 
   const { isPending, mutate } = useMessageCreateOrUpdate({
     conversationId: conversation_id,
+    replyRootId: reply_root_id,
   })
   const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)
   const disabled = isPending || isSearching
@@ -53,11 +55,12 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
 
   function goBack({ clearInput = false }) {
     if (clearInput) {
+      const routeName = reply_root_id ? 'ConversationReply' : 'Conversation'
       const routes = navigation.getState()?.routes || []
-      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}
+      const conversationParams = routes.findLast(r => r.name === routeName)?.params || {}
 
       navigation.dispatch(
-        StackActions.popTo('Conversation', {
+        StackActions.popTo(routeName, {
           ...conversationParams,
           conversation_id,
           clear_input: true,

package/src/screens/team_conversation_screen.tsx

@@ -39,7 +39,7 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
     navigation.dispatch(
       StackActions.replace('Conversation', {
         conversation_id: conversation.id,
-        title: conversation.title,
+        title: conversation.title ?? undefined,
       })
     )
 

package/src/types/jolt_events/message_events.ts

@@ -1,5 +1,6 @@
 import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import { DenormalizedAttachmentResource } from '../resources/denormalized_attachment_resource'
+import type { SystemTextFormat } from '../resources/message'
 
 interface BaseMessageEventData extends Record<string, unknown> {
   data: {
@@ -21,6 +22,7 @@ interface BaseMessageEventData extends Record<string, unknown> {
     message_type: string
     system_event_person_ids: number[] | null
     system_text_parts: { names: string[]; overflow_count: number; action: string } | null
+    system_text_format: SystemTextFormat | null
   }
 }
 

package/src/types/resources/conversation.ts

@@ -6,7 +6,7 @@ import { MemberAbilityResource } from './member_ability'
 import { ReactionCountResource } from './reaction'
 
 export interface ConversationPreviewData {
-  kind: 'reaction' | 'message'
+  kind: 'reaction' | 'message' | 'system'
   authorName: string
   value: ReactionCountResource['value'] | null
   text: string
@@ -41,7 +41,7 @@ export interface ConversationResource {
   memberAbility?: MemberAbilityResource
   muted: boolean
   repliesDisabled: boolean
-  title: string
+  title: string | null
   unreadCount: number
   unreadReaction: boolean
   updatedAt: string

package/src/types/resources/member_ability.ts

@@ -6,4 +6,6 @@ export interface MemberAbilityResource {
   leader: boolean
   canReply: boolean
   canMessageAvailableMembers: boolean
+  canArchive: boolean
+  canUnarchive: boolean
 }

package/src/types/resources/message.ts

@@ -3,6 +3,8 @@ import { DenormalizedAttachmentResourceForCreate } from './denormalized_attachme
 import type { PersonResource } from './person'
 import type { ReactionCountResource } from './reaction'
 
+export type SystemTextFormat = 'people' | 'actor'
+
 export interface MessageResource {
   type: 'Message'
   id: string
@@ -22,6 +24,7 @@ export interface MessageResource {
   messageType: string
   personIdsForSystemEvent?: number[] | null
   systemTextParts?: { names: string[]; overflowCount: number; action: string } | null
+  systemTextFormat?: SystemTextFormat | null
 
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean

package/src/types/resources/person.ts

@@ -23,5 +23,6 @@ export interface CurrentPersonResource extends PersonResource {
   ageQualificationStatus?: AgeQualificationStatus
   directMessagesDisabled: boolean
   directMessagesEligible: boolean
+  canBrowseArchivedConversations?: boolean
   under_18: boolean
 }

package/src/utils/__tests__/conversation.test.ts

@@ -12,6 +12,7 @@ describe('getConversationsRequestArgs', () => {
     ],
     ['chat_group_graph_id', { chat_group_graph_id: groupId }, 'mine_or_not_empty,group'],
     ['show_direct_messages', { show_direct_messages: true }, 'mine_or_not_empty,direct_message'],
+    ['show_archived', { show_archived: true }, 'mine_or_not_empty,archived'],
   ])('%s uses filter: %s', (_label, args, expectedFilter) => {
     expect(getConversationsRequestArgs(args).data.filter).toBe(expectedFilter)
   })

package/src/utils/__tests__/date.test.ts

@@ -0,0 +1,23 @@
+import { formatEventDateTime } from '../date'
+
+describe('formatEventDateTime', () => {
+  beforeEach(() => {
+    jest.useFakeTimers({ now: new Date(2026, 5, 15, 12, 0) })
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('leaves out the year for dates in the current year', () => {
+    expect(formatEventDateTime(new Date(2026, 1, 3, 14, 18))).toBe('Feb 3 at 2:18pm')
+  })
+
+  it('includes the year for dates in other years', () => {
+    expect(formatEventDateTime(new Date(2025, 1, 3, 14, 18))).toBe('Feb 3, 2025 at 2:18pm')
+  })
+
+  it('drops the minutes on the hour', () => {
+    expect(formatEventDateTime(new Date(2026, 1, 3, 14, 0))).toBe('Feb 3 at 2pm')
+  })
+})

package/src/utils/__tests__/group_messages.test.ts

@@ -206,6 +206,7 @@ describe('groupMessages — system messages', () => {
     const messages = [
       message('sys', {
         messageType: 'user_joined',
+        systemTextFormat: 'people',
         systemTextParts: { names: ['A'], overflowCount: 0, action: 'joined' },
         personIdsForSystemEvent: [1],
       }),

package/src/utils/archived_conversation.ts

@@ -0,0 +1,13 @@
+import type { ConversationResource } from '../types/resources/conversation'
+
+export const ARCHIVED_DISABLED_REASON = 'archived'
+
+const DEFAULT_ARCHIVED_MESSAGE = 'This conversation is archived.'
+
+export const isArchivedConversation = (
+  conversation: Pick<ConversationResource, 'disabledReason'>
+) => conversation.disabledReason === ARCHIVED_DISABLED_REASON
+
+export const archivedConversationMessage = (
+  conversation: Pick<ConversationResource, 'disabledMessage'>
+) => conversation.disabledMessage || DEFAULT_ARCHIVED_MESSAGE

package/src/utils/date.ts

@@ -61,3 +61,11 @@ export function relativeTime(date: DateProps): string {
     return dayjs(date).format('h:mma')
   }
 }
+
+export function formatEventDateTime(date: DateProps) {
+  const { isThisYear } = getRelativeDateStatus(date)
+  const local = dayjs(date)
+  const day = local.format(isThisYear ? 'MMM D' : 'MMM D, YYYY')
+  const time = local.format(local.minute() === 0 ? 'ha' : 'h:mma')
+  return `${day} at ${time}`
+}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './archived_conversation'
 export * from './assert_keys_are_numbers'
 export * from './attachment_kind'
 export * from './chat_type_label'

package/src/utils/jolt/__tests__/transform_message_event_data_to_message_resource.test.ts

@@ -0,0 +1,35 @@
+import type { MessageCreatedEvent } from '../../../types/jolt_events/message_events'
+import { isSystemMessage } from '../../system_messages'
+import { transformMessageEventDataToMessageResource } from '../transform_message_event_data_to_message_resource'
+
+const archivedEventData: MessageCreatedEvent['data']['data'] = {
+  author_avatar: '',
+  author_id: 1,
+  author_name: 'Wes',
+  conversation_id: 1,
+  created_at: '2026-01-01T00:00:00Z',
+  deleted_at: null,
+  organization_id: 1,
+  sort_key: '01J0000000000000000000001',
+  text: 'This conversation was archived by Wes',
+  text_edited_at: null,
+  html: '',
+  attachments: [],
+  reply_count: 0,
+  reply_root_id: null,
+  message_type: 'conversation_archived',
+  system_event_person_ids: [1],
+  system_text_parts: null,
+  system_text_format: 'actor',
+}
+
+describe('transformMessageEventDataToMessageResource', () => {
+  it('keeps the system text format so realtime archive events render as system messages', () => {
+    const message = transformMessageEventDataToMessageResource({
+      data: archivedEventData,
+      currentPersonId: 2,
+    })
+
+    expect(isSystemMessage(message)).toBe(true)
+  })
+})

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -39,5 +39,6 @@ export function transformMessageEventDataToMessageResource({
           action: data.system_text_parts.action,
         }
       : null,
+    systemTextFormat: data.system_text_format,
   }
 }

package/src/utils/native_adapters/__tests__/menu.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { MenuAdapter, MenuViewProps } from '../menu'
+
+const actions = [{ id: 'all', title: 'All' }]
+
+describe('MenuAdapter', () => {
+  it('renders the trigger and warns when the host configured no menu', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const { View, isConfigured } = new MenuAdapter()
+
+    expect(isConfigured).toBe(false)
+
+    render(
+      <View actions={actions}>
+        <Text>Trigger</Text>
+      </View>
+    )
+
+    expect(screen.getByText('Trigger')).toBeTruthy()
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
+  it('renders through the view the host supplies', () => {
+    const HostMenuView = ({ actions: hostActions, children }: MenuViewProps) => (
+      <>
+        {children}
+        <Text>{hostActions.map(action => action.title).join(',')}</Text>
+      </>
+    )
+    const { View, isConfigured } = new MenuAdapter({ View: HostMenuView })
+
+    expect(isConfigured).toBe(true)
+
+    render(
+      <View actions={actions}>
+        <Text>Trigger</Text>
+      </View>
+    )
+
+    expect(screen.getByText('Trigger')).toBeTruthy()
+    expect(screen.getByText('All')).toBeTruthy()
+  })
+})

package/src/utils/native_adapters/configuration.ts

@@ -7,6 +7,7 @@ import { HapticAdapter } from './haptic'
 import { ImagePickerAdapter } from './image_picker'
 import { LinkingAdapter } from './linking'
 import { LogAdapter } from './log'
+import { MenuAdapter } from './menu'
 import { StorageAdapter } from './storage_adapter'
 import { VideoAdapter } from './video'
 
@@ -19,6 +20,7 @@ type ChatConfigurations = {
   log?: LogAdapter
   linking?: LinkingAdapter
   haptic?: HapticAdapter
+  menu?: MenuAdapter
 }
 
 export class ChatAdapters {
@@ -31,6 +33,7 @@ export class ChatAdapters {
     Log = configurations.log || new LogAdapter()
     Linking = configurations.linking || new LinkingAdapter(RNLinking)
     Haptic = configurations.haptic || new HapticAdapter()
+    Menu = configurations.menu || new MenuAdapter()
   }
 }
 
@@ -82,6 +85,8 @@ export let Linking: LinkingAdapter = new LinkingAdapter(RNLinking)
 
 export let Haptic: HapticAdapter = new HapticAdapter()
 
+export let Menu: MenuAdapter = new MenuAdapter()
+
 export let Storage = new StorageAdapter({
   getItem: AsyncStorage.getItem,
   setItem: AsyncStorage.setItem,

package/src/utils/native_adapters/index.ts

@@ -5,6 +5,7 @@ export * from './document_picker'
 export * from './image_picker'
 export * from './linking'
 export * from './log'
+export * from './menu'
 export * from './video'
 export * from './haptic'
 export * from './storage_adapter'

package/src/utils/native_adapters/menu.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react'
+import { StyleProp, View, ViewStyle } from 'react-native'
+
+// =================================
+// ====== Types ====================
+// =================================
+
+// Mirrors the props shared by `@expo/ui/community/menu` and
+// `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.
+
+export type MenuActionState = 'on' | 'off'
+
+export interface MenuActionAttributes {
+  destructive?: boolean
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export interface MenuAction {
+  id?: string
+  title: string
+  state?: MenuActionState
+  attributes?: MenuActionAttributes
+  subactions?: MenuAction[]
+  displayInline?: boolean
+}
+
+export interface MenuActionEvent {
+  nativeEvent: { event: string }
+}
+
+export interface MenuViewProps {
+  actions: MenuAction[]
+  onPressAction?: (event: MenuActionEvent) => void
+  onOpenMenu?: () => void
+  onCloseMenu?: () => void
+  shouldOpenOnLongPress?: boolean
+  title?: string
+  style?: StyleProp<ViewStyle>
+  testID?: string
+  children?: React.ReactNode
+}
+
+export type MenuView = React.ComponentType<MenuViewProps>
+
+// =================================
+// ====== Adapter ==================
+// =================================
+
+function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
+  useEffect(() => {
+    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')
+  }, [])
+
+  return (
+    <View style={style} testID={testID}>
+      {children}
+    </View>
+  )
+}
+
+export class MenuAdapter {
+  View: MenuView
+  isConfigured: boolean
+
+  constructor(methods?: { View: MenuView }) {
+    this.View = methods?.View ?? UnconfiguredMenuView
+    this.isConfigured = !!methods?.View
+  }
+}

package/src/utils/request/conversation.ts

@@ -6,6 +6,7 @@ export interface ConversationRequestArgs {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
   show_direct_messages?: boolean
+  show_archived?: boolean
 }
 
 export const getConversationsRequestArgs = ({
@@ -13,10 +14,13 @@ export const getConversationsRequestArgs = ({
   chat_group_graph_id,
   group_source_app_name,
   show_direct_messages,
+  show_archived,
 }: Partial<ConversationRequestArgs> = {}): GetRequest => {
   let filter: string
   if (chat_group_graph_id) {
     filter = 'mine_or_not_empty,group'
+  } else if (show_archived) {
+    filter = 'mine_or_not_empty,archived'
   } else if (show_direct_messages) {
     filter = 'mine_or_not_empty,direct_message'
   } else if (group_source_app_name) {

package/src/utils/request/messages_data_options.ts

@@ -14,6 +14,7 @@ export const getMessageFields = {
     'message_type',
     'person_ids_for_system_event',
     'system_text_parts',
+    'system_text_format',
   ],
   Person: ['name', 'avatar'],
   ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],

package/src/utils/system_messages.ts

@@ -1,16 +1,25 @@
 import type { MessageResource } from '../types'
 
-const SYSTEM_MESSAGE_TYPES = ['user_joined'] as const
-
-type SystemMessageType = (typeof SYSTEM_MESSAGE_TYPES)[number]
-
-export interface SystemMessageResource extends MessageResource {
-  messageType: SystemMessageType
+export interface PeopleSystemMessageResource extends MessageResource {
+  systemTextFormat: 'people'
   systemTextParts: { names: string[]; overflowCount: number; action: string }
   personIdsForSystemEvent: number[]
 }
 
-export const isSystemMessage = (message: MessageResource): message is SystemMessageResource =>
-  SYSTEM_MESSAGE_TYPES.includes(message.messageType as SystemMessageType) &&
-  message.systemTextParts != null &&
-  message.personIdsForSystemEvent != null
+export interface ActorSystemMessageResource extends MessageResource {
+  systemTextFormat: 'actor'
+  text: string
+}
+
+export type SystemMessageResource = PeopleSystemMessageResource | ActorSystemMessageResource
+
+export const isSystemMessage = (message: MessageResource): message is SystemMessageResource => {
+  switch (message.systemTextFormat) {
+    case 'people':
+      return message.systemTextParts != null && message.personIdsForSystemEvent != null
+    case 'actor':
+      return !!message.text
+    default:
+      return false
+  }
+}

package/src/vendor/font_awesome_pro_solid_icons.ts

@@ -608,3 +608,15 @@ export const faTag: IconDefinition = {
     'M32.5 96l0 149.5c0 17 6.7 33.3 18.7 45.3l192 192c25 25 65.5 25 90.5 0L483.2 333.3c25-25 25-65.5 0-90.5l-192-192C279.2 38.7 263 32 246 32L96.5 32c-35.3 0-64 28.7-64 64zm112 16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z',
   ],
 }
+
+export const faBoxArchive: IconDefinition = {
+  prefix: 'fas',
+  iconName: 'box-archive',
+  icon: [
+    512,
+    512,
+    ['archive'],
+    'f187',
+    'M0 64C0 46.3 14.3 32 32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64zM32 176l448 0 0 240c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-240zm152 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z',
+  ],
+}