npm - @planningcenter/chat-react-native - Versions diffs - 3.15.0-rc.0 → 3.15.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/build/components/conversations/conversation_preview.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;~~AAUlD~~,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,kDAK7B,wBAAwB,~~sBAiE1B~~,CAAA;~~AAmCD~~,eAAO,MAAM,2BAA2B,yBAqBvC,CAAA"}
1	+ {"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAelD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,kDAK7B,wBAAwB,sBAoE1B,CAAA;AAqCD,eAAO,MAAM,2BAA2B,yBAqBvC,CAAA"}

package/build/components/conversations/conversation_preview.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { AvatarGroup, Heading, Text, Badge } from '../display';
 import { formatDatePreview } from '../../utils/date';
-import { useTheme, useAtFontScaleBreakpoint } from '../../hooks';
+import { useTheme, useAtFontScaleBreakpoint, useFontScale, useScalableNumberOfLines, } from '../../hooks';
 import { UnreadCountBadge } from './unread_count_badge';
 import { ConversationActions } from './conversation_actions';
 import { MuteIndicator } from './mute_indicator';
@@ -15,6 +15,8 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
     const shouldShowFallback = emptyConversation || !hasAvatarUrls;
     const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person';
     const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted;
+    const numberOfLinesScaledTitle = useScalableNumberOfLines(1);
+    const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2);
     const conversationPreviewText = lastMessageTextPreview
         ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
         : EMPTY_CONVERSATION_PREVIEW_TEXT;
@@ -25,10 +27,10 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
     return (<ConversationActions conversation={conversation} style={[styles.previewRow, style]} onPress={onPress} accessibilityLabel={conversationAccessibilityLabel}>
       <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} showFallback={shouldShowFallback} fallbackIconName={fallbackIconName}/>
       <View style={styles.conversationBody}>
-        <Heading numberOfLines={1} variant="h3" style={styles.title}>
+        <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={styles.title}>
           {title}
         </Heading>
-        <Text variant="tertiary" numberOfLines={2} style={emptyConversation && styles.emptyConversationPreviewText}>
+        <Text variant="tertiary" numberOfLines={numberOfLinesScaledPreviewText} style={emptyConversation && styles.emptyConversationPreviewText}>
           {conversationPreviewText}
         </Text>
         <ConversationBadges visible={showBadges} badges={badges}/>
@@ -44,11 +46,12 @@ export const ConversationPreview = ({ conversation, onPress, showBadges = true,
 };
 const ConversationBadges = ({ visible, badges }) => {
     const styles = useStyles();
+    const numberOfLinesScaled = useScalableNumberOfLines(1);
     if (!visible || !badges || badges.length === 0) {
         return null;
     }
     return (<View style={styles.badges}>
-      {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
+      {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''} numberOfLinesMetaLabel={numberOfLinesScaled}/>))}
     </View>);
 };
 const skeletonBadges = [
@@ -90,6 +93,7 @@ const getConversationAccessibilityLabel = ({ conversation, showBadges, }) => {
 const useStyles = () => {
     const { colors } = useTheme();
     const atFontScaleBreakpoint = useAtFontScaleBreakpoint();
+    const fontScale = useFontScale();
     return StyleSheet.create({
         previewRow: {
             flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
@@ -144,7 +148,7 @@ const useStyles = () => {
         statusContainer: {
             flexDirection: 'row',
             alignItems: 'center',
-            gap: 4,
+            gap: 4 * fontScale,
         },
     });
 };

package/build/components/conversations/conversation_preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport { useTheme, useAtFontScaleBreakpoint } from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\nimport { ConversationActions } from './conversation_actions'\nimport { MuteIndicator } from './mute_indicator'\n\nconst EMPTY_CONVERSATION_PREVIEW_TEXT = 'Send your first message'\n\ninterface ConversationPreviewProps {\n conversation: ConversationResource\n onPress: () => void\n showBadges?: boolean\n style?: ViewStyle\n}\n\nexport const ConversationPreview = ({\n conversation,\n onPress,\n showBadges = true,\n style,\n}: ConversationPreviewProps) => {\n const styles = useStyles()\n const {\n lastMessageAuthorName,\n lastMessageCreatedAt,\n lastMessageTextPreview,\n previewAvatarUrls,\n title,\n unreadCount,\n badges,\n muted,\n } = conversation\n\n const emptyConversation = !lastMessageCreatedAt\n const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0\n const shouldShowFallback = emptyConversation \|\| !hasAvatarUrls\n const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'\n const hasMetaContent = lastMessageCreatedAt \|\| unreadCount > 0 \|\| muted\n\n const conversationPreviewText = lastMessageTextPreview\n ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT\n\n const conversationAccessibilityLabel = getConversationAccessibilityLabel({\n conversation,\n showBadges,\n })\n\n return (\n <ConversationActions\n conversation={conversation}\n style={[styles.previewRow, style]}\n onPress={onPress}\n accessibilityLabel={conversationAccessibilityLabel}\n >\n <AvatarGroup\n size=\"lg\"\n sourceUris={previewAvatarUrls \|\| []}\n showFallback={shouldShowFallback}\n fallbackIconName={fallbackIconName}\n />\n <View style={styles.conversationBody}>\n <Heading numberOfLines={1} variant=\"h3\" style={styles.title}>\n {title}\n </Heading>\n <Text\n variant=\"tertiary\"\n numberOfLines={2}\n style={emptyConversation && styles.emptyConversationPreviewText}\n >\n {conversationPreviewText}\n </Text>\n <ConversationBadges visible={showBadges} badges={badges} />\n </View>\n {hasMetaContent && (\n <View style={styles.metaContainer}>\n <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n <View style={styles.statusContainer}>\n <UnreadCountBadge count={unreadCount} showDot={muted} />\n <MuteIndicator muted={muted} />\n </View>\n </View>\n )}\n </ConversationActions>\n )\n}\n\ninterface BadgeShape {\n appName?: BadgeProps['productLogoName']\n pcoResourceType: string\n text: string \| null\n}\nconst ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {\n const styles = useStyles()\n\n if (!visible \|\| !badges \|\| badges.length === 0) {\n return null\n }\n\n return (\n <View style={styles.badges}>\n {badges.map(badge => (\n <Badge\n key={badge.text}\n variant=\"meta\"\n productLogoName={badge.appName}\n label={badge.pcoResourceType}\n metaLabel={badge.text \|\| ''}\n />\n ))}\n </View>\n )\n}\n\nconst skeletonBadges: BadgeShape[] = [\n {\n pcoResourceType: ' ',\n text: ' ',\n },\n]\nexport const ConversationPreviewSkeleton = () => {\n const styles = useStyles()\n\n return (\n <View style={styles.previewRow}>\n <AvatarGroup\n size=\"lg\"\n sourceUris={[]}\n showFallback={true}\n fallbackIconName={'general.person'}\n />\n <View style={styles.conversationBody}>\n <View style={styles.titleLoading} />\n <View style={styles.subtitleLoading} />\n <ConversationBadges visible={true} badges={skeletonBadges} />\n </View>\n <View style={styles.metaContainer}>\n <View style={styles.dateLoading} />\n </View>\n </View>\n )\n}\n\ninterface GetConversationAccessibilityLabelProps {\n conversation: ConversationResource\n showBadges: boolean\n}\nconst getConversationAccessibilityLabel = ({\n conversation,\n showBadges,\n}: GetConversationAccessibilityLabelProps) => {\n const {\n badges,\n title,\n lastMessageAuthorName,\n lastMessageTextPreview,\n muted,\n unreadCount,\n lastMessageCreatedAt,\n } = conversation\n\n const hasBadges = badges && showBadges\n const hasUnreadMessages = unreadCount > 0\n const hasLastMessage = lastMessageCreatedAt\n\n const label = {\n title,\n badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text \|\| ''}` : '',\n muted: muted ? 'Muted' : '',\n readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',\n lastMessage: hasLastMessage\n ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT,\n }\n\n return `Select ${label.title}, ${label.badge}, ${label.muted}, ${label.readStatus}, ${label.lastMessage}`.trim()\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n previewRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n gap: 8,\n borderBottomWidth: 1,\n borderBottomColor: atFontScaleBreakpoint\n ? colors.borderColorDefaultDark\n : colors.borderColorDefaultDim,\n paddingTop: 12,\n paddingBottom: 12,\n paddingHorizontal: 16,\n },\n title: {\n fontSize: 16,\n color: colors.textColorDefaultPrimary,\n },\n titleLoading: {\n width: 120,\n height: 20,\n backgroundColor: colors.fillColorNeutral080,\n borderRadius: 4,\n },\n conversationBody: {\n flex: 1,\n rowGap: 2,\n },\n emptyConversationPreviewText: {\n color: colors.interaction,\n },\n subtitleLoading: {\n width: 80,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n metaContainer: {\n gap: 4,\n alignItems: atFontScaleBreakpoint ? 'center' : 'flex-end',\n justifyContent: atFontScaleBreakpoint ? 'space-between' : 'flex-start',\n flexDirection: atFontScaleBreakpoint ? 'row' : 'column',\n },\n dateLoading: {\n width: 60,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n badges: {\n marginTop: 4,\n alignItems: 'flex-start',\n },\n statusContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport {\n useTheme,\n useAtFontScaleBreakpoint,\n useFontScale,\n useScalableNumberOfLines,\n} from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\nimport { ConversationActions } from './conversation_actions'\nimport { MuteIndicator } from './mute_indicator'\n\nconst EMPTY_CONVERSATION_PREVIEW_TEXT = 'Send your first message'\n\ninterface ConversationPreviewProps {\n conversation: ConversationResource\n onPress: () => void\n showBadges?: boolean\n style?: ViewStyle\n}\n\nexport const ConversationPreview = ({\n conversation,\n onPress,\n showBadges = true,\n style,\n}: ConversationPreviewProps) => {\n const styles = useStyles()\n const {\n lastMessageAuthorName,\n lastMessageCreatedAt,\n lastMessageTextPreview,\n previewAvatarUrls,\n title,\n unreadCount,\n badges,\n muted,\n } = conversation\n\n const emptyConversation = !lastMessageCreatedAt\n const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0\n const shouldShowFallback = emptyConversation \|\| !hasAvatarUrls\n const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'\n const hasMetaContent = lastMessageCreatedAt \|\| unreadCount > 0 \|\| muted\n\n const numberOfLinesScaledTitle = useScalableNumberOfLines(1)\n const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2)\n\n const conversationPreviewText = lastMessageTextPreview\n ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT\n\n const conversationAccessibilityLabel = getConversationAccessibilityLabel({\n conversation,\n showBadges,\n })\n\n return (\n <ConversationActions\n conversation={conversation}\n style={[styles.previewRow, style]}\n onPress={onPress}\n accessibilityLabel={conversationAccessibilityLabel}\n >\n <AvatarGroup\n size=\"lg\"\n sourceUris={previewAvatarUrls \|\| []}\n showFallback={shouldShowFallback}\n fallbackIconName={fallbackIconName}\n />\n <View style={styles.conversationBody}>\n <Heading numberOfLines={numberOfLinesScaledTitle} variant=\"h3\" style={styles.title}>\n {title}\n </Heading>\n <Text\n variant=\"tertiary\"\n numberOfLines={numberOfLinesScaledPreviewText}\n style={emptyConversation && styles.emptyConversationPreviewText}\n >\n {conversationPreviewText}\n </Text>\n <ConversationBadges visible={showBadges} badges={badges} />\n </View>\n {hasMetaContent && (\n <View style={styles.metaContainer}>\n <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n <View style={styles.statusContainer}>\n <UnreadCountBadge count={unreadCount} showDot={muted} />\n <MuteIndicator muted={muted} />\n </View>\n </View>\n )}\n </ConversationActions>\n )\n}\n\ninterface BadgeShape {\n appName?: BadgeProps['productLogoName']\n pcoResourceType: string\n text: string \| null\n}\nconst ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {\n const styles = useStyles()\n const numberOfLinesScaled = useScalableNumberOfLines(1)\n\n if (!visible \|\| !badges \|\| badges.length === 0) {\n return null\n }\n\n return (\n <View style={styles.badges}>\n {badges.map(badge => (\n <Badge\n key={badge.text}\n variant=\"meta\"\n productLogoName={badge.appName}\n label={badge.pcoResourceType}\n metaLabel={badge.text \|\| ''}\n numberOfLinesMetaLabel={numberOfLinesScaled}\n />\n ))}\n </View>\n )\n}\n\nconst skeletonBadges: BadgeShape[] = [\n {\n pcoResourceType: ' ',\n text: ' ',\n },\n]\nexport const ConversationPreviewSkeleton = () => {\n const styles = useStyles()\n\n return (\n <View style={styles.previewRow}>\n <AvatarGroup\n size=\"lg\"\n sourceUris={[]}\n showFallback={true}\n fallbackIconName={'general.person'}\n />\n <View style={styles.conversationBody}>\n <View style={styles.titleLoading} />\n <View style={styles.subtitleLoading} />\n <ConversationBadges visible={true} badges={skeletonBadges} />\n </View>\n <View style={styles.metaContainer}>\n <View style={styles.dateLoading} />\n </View>\n </View>\n )\n}\n\ninterface GetConversationAccessibilityLabelProps {\n conversation: ConversationResource\n showBadges: boolean\n}\nconst getConversationAccessibilityLabel = ({\n conversation,\n showBadges,\n}: GetConversationAccessibilityLabelProps) => {\n const {\n badges,\n title,\n lastMessageAuthorName,\n lastMessageTextPreview,\n muted,\n unreadCount,\n lastMessageCreatedAt,\n } = conversation\n\n const hasBadges = badges && showBadges\n const hasUnreadMessages = unreadCount > 0\n const hasLastMessage = lastMessageCreatedAt\n\n const label = {\n title,\n badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text \|\| ''}` : '',\n muted: muted ? 'Muted' : '',\n readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',\n lastMessage: hasLastMessage\n ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`\n : EMPTY_CONVERSATION_PREVIEW_TEXT,\n }\n\n return `Select ${label.title}, ${label.badge}, ${label.muted}, ${label.readStatus}, ${label.lastMessage}`.trim()\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n const fontScale = useFontScale()\n\n return StyleSheet.create({\n previewRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n gap: 8,\n borderBottomWidth: 1,\n borderBottomColor: atFontScaleBreakpoint\n ? colors.borderColorDefaultDark\n : colors.borderColorDefaultDim,\n paddingTop: 12,\n paddingBottom: 12,\n paddingHorizontal: 16,\n },\n title: {\n fontSize: 16,\n color: colors.textColorDefaultPrimary,\n },\n titleLoading: {\n width: 120,\n height: 20,\n backgroundColor: colors.fillColorNeutral080,\n borderRadius: 4,\n },\n conversationBody: {\n flex: 1,\n rowGap: 2,\n },\n emptyConversationPreviewText: {\n color: colors.interaction,\n },\n subtitleLoading: {\n width: 80,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n metaContainer: {\n gap: 4,\n alignItems: atFontScaleBreakpoint ? 'center' : 'flex-end',\n justifyContent: atFontScaleBreakpoint ? 'space-between' : 'flex-start',\n flexDirection: atFontScaleBreakpoint ? 'row' : 'column',\n },\n dateLoading: {\n width: 60,\n height: 16,\n backgroundColor: colors.fillColorNeutral090,\n borderRadius: 4,\n },\n badges: {\n marginTop: 4,\n alignItems: 'flex-start',\n },\n statusContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4 * fontScale,\n },\n })\n}\n"]}

package/build/components/conversations/mute_indicator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mute_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAKzB~~,eAAO,MAAM,aAAa,cAAe;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,~~6BAM1D~~,CAAA"}
1	+ {"version":3,"file":"mute_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,aAAa,cAAe;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,6BAY1D,CAAA"}

package/build/components/conversations/mute_indicator.js CHANGED Viewed

@@ -2,17 +2,19 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Icon } from '../display';
 import { useTheme } from '../../hooks';
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils';
 export const MuteIndicator = ({ muted }) => {
     const styles = useStyles();
     if (!muted)
         return null;
-    return <Icon name="general.bellMuted" size={16} style={styles.mutedIcon}/>;
+    return (<Icon name="general.bellMuted" style={styles.mutedIcon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
         mutedIcon: {
             color: colors.iconColorDefaultDim,
+            fontSize: 16,
         },
     });
 };

package/build/components/conversations/mute_indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mute_indicator.js","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;~~AAEtC~~,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CAAC,IAAI,~~CAAC~~,IAAI,CAAC,mBAAmB,~~CAAC~~,~~IAAI~~,CAAC,CAAC,~~EAAE~~,CAAC,CAAC,~~KAAK~~,CAAC,CAAC,~~MAAM~~,CAAC,~~SAAS~~,~~CAAC~~,~~EAAG,~~CAAA;~~AAC7E~~,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,mBAAmB;~~SAClC~~;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Icon } from '../display'\nimport { useTheme } from '../../hooks'\n\nexport const MuteIndicator = ({ muted }: { muted: boolean }) => {\n const styles = useStyles()\n\n if (!muted) return null\n\n return <Icon name=\"general.bellMuted\" ~~size={16}~~ style={styles.mutedIcon} />\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n mutedIcon: {\n color: colors.iconColorDefaultDim,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"mute_indicator.js","sourceRoot":"","sources":["../../../src/components/conversations/mute_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,mBAAmB,CACxB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,qBAAqB,CAAC,CAAC,wBAAwB,CAAC,EAChD,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,mBAAmB;YACjC,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Icon } from '../display'\nimport { useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'\n\nexport const MuteIndicator = ({ muted }: { muted: boolean }) => {\n const styles = useStyles()\n\n if (!muted) return null\n\n return (\n <Icon\n name=\"general.bellMuted\"\n style={styles.mutedIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n mutedIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}

package/build/components/conversations/swipeable_toggle_button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"swipeable_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;~~AAM5D~~,UAAU,0BAA2B,SAAQ,cAAc;IACzD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,0BAA0B,~~qBAiC5B~~"}
1	+ {"version":3,"file":"swipeable_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAU5D,UAAU,0BAA2B,SAAQ,cAAc;IACzD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,0BAA0B,qBAyC5B"}

package/build/components/conversations/swipeable_toggle_button.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 import { Icon, Spinner, Text } from '../display';
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks';
-import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles';
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, platformPressedOpacityStyle, } from '../../utils/styles';
 import { tokens } from '../../vendor/tapestry/tokens';
 import { Haptic } from '../../utils/native_adapters/configuration';
 export function SwipeableToggleButton({ backgroundColor, onPress, toggleContent, disabled = false, toggled, loading = false, ...props }) {
@@ -17,8 +17,8 @@ export function SwipeableToggleButton({ backgroundColor, onPress, toggleContent,
             onPress?.(event);
         }} style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} disabled={disabled || loading} accessibilityRole="togglebutton" accessibilityState={{ checked: toggled }} {...props}>
       {loading ? (<Spinner size={20}/>) : (<>
-          <Icon name={iconName} style={styles.icon} size={20}/>
-          <Text variant="footnote" style={styles.text}>
+          <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Text variant="footnote" style={styles.text} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}>
             {label}
           </Text>
         </>)}
@@ -41,12 +41,15 @@ const useStyles = ({ backgroundColor, disabled }) => {
             backgroundColor: buttonBackgroundColor,
         },
         icon: {
+            fontSize: 20,
             color: fillColor,
             marginTop: 4,
         },
         text: {
             color: fillColor,
             fontWeight: platformFontWeightMedium,
+            textAlign: 'center',
+            paddingHorizontal: 8,
         },
     });
 };

package/build/components/conversations/swipeable_toggle_button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"swipeable_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAuB,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,IAAI,EAAc,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAE,2BAA2B,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACnE,OAAO,~~EAAE~~,wBAAwB,~~EAAE~~,2BAA2B,~~EAAE~~,MAAM,oBAAoB,CAAA;~~AAC1F~~,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAA;AAYlE,MAAM,UAAU,qBAAqB,CAAC,EACpC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACmB;IAC3B,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAA;IACvD,MAAM,kBAAkB,GAAG,2BAA2B,CAAC;QACrD,KAAK,EAAE,eAAe;KACvB,CAAC,CAAA;IAEF,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAErE,OAAO,CACL,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE;YACf,MAAM,CAAC,WAAW,EAAE,CAAA;YACpB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,IAAI,2BAA2B,CAAC,CAAC,CAChF,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACnF,QAAQ,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAC9B,iBAAiB,CAAC,cAAc,CAChC,kBAAkB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CACzC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CACtB,CAAC,CAAC,CAAC,CACF,EACE;UAAA,CAAC,IAAI,~~CAAC~~,IAAI,CAAC,CAAC,QAAQ,CAAC,~~CAAC~~,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,~~CAAC~~,~~IAAI~~,CAAC,CAAC,~~EAAE~~,CAAC,~~EACnD~~;UAAA,CAAC,IAAI,~~CAAC~~,OAAO,CAAC,UAAU,~~CAAC~~,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,~~CAC1C~~;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CACR;QAAA,GAAG,CACJ,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAuC,EAAE,EAAE;IACvF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAA;IAC1F,MAAM,qBAAqB,GAAG,QAAQ;QACpC,CAAC,CAAC,MAAM,CAAC,mCAAmC;QAC5C,CAAC,CAAC,eAAe,CAAA;IAEnB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,CAAC;YACP,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,qBAAqB;SACvC;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,CAAC;SACb;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,wBAAwB;~~SACrC~~;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\ninterface SwipeableToggleButtonProps extends PressableProps {\n backgroundColor: string\n toggled: boolean\n toggleContent: {\n true: { iconName: IconString; label: string }\n false: { iconName: IconString; label: string }\n }\n loading?: boolean\n}\n\nexport function SwipeableToggleButton({\n backgroundColor,\n onPress,\n toggleContent,\n disabled = false,\n toggled,\n loading = false,\n ...props\n}: SwipeableToggleButtonProps) {\n const styles = useStyles({ backgroundColor, disabled })\n const androidRippleColor = useCreateAndroidRippleColor({\n color: backgroundColor,\n })\n\n const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n return (\n <Pressable\n onPress={event => {\n Haptic.impactLight()\n onPress?.(event)\n }}\n style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n disabled={disabled \|\| loading}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: toggled }}\n {...props}\n >\n {loading ? (\n <Spinner size={20} />\n ) : (\n <>\n <Icon name={iconName} style={styles.icon} ~~size~~={20} />\n <Text variant=\"footnote\" style={styles.text}>\n {label}\n </Text>\n </>\n )}\n </Pressable>\n )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonProps>) => {\n const { colors } = useTheme()\n const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n const buttonBackgroundColor = disabled\n ? colors.fillColorButtonNeutralSolidDisabled\n : backgroundColor\n\n return StyleSheet.create({\n button: {\n flex: 1,\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n height: '100%',\n backgroundColor: buttonBackgroundColor,\n },\n icon: {\n color: fillColor,\n marginTop: 4,\n },\n text: {\n color: fillColor,\n fontWeight: platformFontWeightMedium,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"swipeable_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/swipeable_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport {\n MAX_FONT_SIZE_MULTIPLIER,\n platformFontWeightMedium,\n platformPressedOpacityStyle,\n} from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\ninterface SwipeableToggleButtonProps extends PressableProps {\n backgroundColor: string\n toggled: boolean\n toggleContent: {\n true: { iconName: IconString; label: string }\n false: { iconName: IconString; label: string }\n }\n loading?: boolean\n}\n\nexport function SwipeableToggleButton({\n backgroundColor,\n onPress,\n toggleContent,\n disabled = false,\n toggled,\n loading = false,\n ...props\n}: SwipeableToggleButtonProps) {\n const styles = useStyles({ backgroundColor, disabled })\n const androidRippleColor = useCreateAndroidRippleColor({\n color: backgroundColor,\n })\n\n const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n return (\n <Pressable\n onPress={event => {\n Haptic.impactLight()\n onPress?.(event)\n }}\n style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n disabled={disabled \|\| loading}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: toggled }}\n {...props}\n >\n {loading ? (\n <Spinner size={20} />\n ) : (\n <>\n <Icon\n name={iconName}\n style={styles.icon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n <Text\n variant=\"footnote\"\n style={styles.text}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n >\n {label}\n </Text>\n </>\n )}\n </Pressable>\n )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonProps>) => {\n const { colors } = useTheme()\n const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n const buttonBackgroundColor = disabled\n ? colors.fillColorButtonNeutralSolidDisabled\n : backgroundColor\n\n return StyleSheet.create({\n button: {\n flex: 1,\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n height: '100%',\n backgroundColor: buttonBackgroundColor,\n },\n icon: {\n fontSize: 20,\n color: fillColor,\n marginTop: 4,\n },\n text: {\n color: fillColor,\n fontWeight: platformFontWeightMedium,\n textAlign: 'center',\n paddingHorizontal: 8,\n },\n })\n}\n"]}

package/build/components/conversations/unread_count_badge.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Text } from '../display';
-import { useTheme } from '../../hooks';
-import { platformFontWeightBold } from '../../utils';
+import { useFontScale, useTheme } from '../../hooks';
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils';
 export const UnreadCountBadge = ({ count, showDot }) => {
     const styles = useStyles();
     const displayCount = count > 99 ? '99+' : count;
@@ -18,22 +18,25 @@ export const UnreadCountBadge = ({ count, showDot }) => {
 };
 const useStyles = () => {
     const { colors } = useTheme();
+    const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5;
+    const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit });
+    const size = 8 * fontScale;
     return StyleSheet.create({
         badge: {
             alignSelf: 'flex-end',
             backgroundColor: colors.fillColorInteractionDefault,
             paddingVertical: 2,
             paddingHorizontal: 8,
-            borderRadius: 24,
+            borderRadius: 24 * fontScale,
         },
         count: {
             fontWeight: platformFontWeightBold,
             color: 'white',
         },
         dot: {
-            width: 8,
-            height: 8,
-            borderRadius: 8,
+            width: size,
+            height: size,
+            borderRadius: size,
             backgroundColor: colors.fillColorInteractionDefault,
         },
     });

package/build/components/conversations/unread_count_badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"unread_count_badge.js","sourceRoot":"","sources":["../../../src/components/conversations/unread_count_badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;~~AACtC~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;~~AAEpD~~,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAuC,EAAE,EAAE;IAC1F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAE/C,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAC5B,IAAI,OAAO;QAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAG,CAAA;IAE/C,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAC3C;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;~~IAE7B~~,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU;YACrB,eAAe,EAAE,MAAM,CAAC,2BAA2B;YACnD,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;YACpB,YAAY,EAAE,EAAE;~~SACjB~~;QACD,KAAK,EAAE;YACL,UAAU,EAAE,sBAAsB;YAClC,KAAK,EAAE,OAAO;SACf;QACD,GAAG,EAAE;YACH,KAAK,EAAE,~~CAAC~~;~~YACR~~,MAAM,EAAE,~~CAAC~~;~~YACT~~,YAAY,EAAE,~~CAAC~~;~~YACf~~,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../display'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightBold } from '../../utils'\n\nexport const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {\n const styles = useStyles()\n const displayCount = count > 99 ? '99+' : count\n\n if (count === 0) return null\n if (showDot) return <View style={styles.dot} />\n\n return (\n <View style={styles.badge}>\n <Text variant=\"footnote\" style={styles.count}>\n {displayCount}\n </Text>\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n badge: {\n alignSelf: 'flex-end',\n backgroundColor: colors.fillColorInteractionDefault,\n paddingVertical: 2,\n paddingHorizontal: 8,\n borderRadius: 24,\n },\n count: {\n fontWeight: platformFontWeightBold,\n color: 'white',\n },\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: colors.fillColorInteractionDefault,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"unread_count_badge.js","sourceRoot":"","sources":["../../../src/components/conversations/unread_count_badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAE9E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAuC,EAAE,EAAE;IAC1F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;IAE/C,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAC5B,IAAI,OAAO;QAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAG,CAAA;IAE/C,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAC3C;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,aAAa,GAAG,wBAAwB,GAAG,GAAG,CAAA;IACpD,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC,CAAA;IACxE,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAA;IAE1B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU;YACrB,eAAe,EAAE,MAAM,CAAC,2BAA2B;YACnD,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;YACpB,YAAY,EAAE,EAAE,GAAG,SAAS;SAC7B;QACD,KAAK,EAAE;YACL,UAAU,EAAE,sBAAsB;YAClC,KAAK,EAAE,OAAO;SACf;QACD,GAAG,EAAE;YACH,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,MAAM,CAAC,2BAA2B;SACpD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../display'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'\n\nexport const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {\n const styles = useStyles()\n const displayCount = count > 99 ? '99+' : count\n\n if (count === 0) return null\n if (showDot) return <View style={styles.dot} />\n\n return (\n <View style={styles.badge}>\n <Text variant=\"footnote\" style={styles.count}>\n {displayCount}\n </Text>\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5\n const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })\n const size = 8 * fontScale\n\n return StyleSheet.create({\n badge: {\n alignSelf: 'flex-end',\n backgroundColor: colors.fillColorInteractionDefault,\n paddingVertical: 2,\n paddingHorizontal: 8,\n borderRadius: 24 * fontScale,\n },\n count: {\n fontWeight: platformFontWeightBold,\n color: 'white',\n },\n dot: {\n width: size,\n height: size,\n borderRadius: size,\n backgroundColor: colors.fillColorInteractionDefault,\n },\n })\n}\n"]}

package/build/components/display/action_button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,mGAStB;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,~~6BAoCA~~,CAAA"}
1	+ {"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,mGAStB;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,6BAsCA,CAAA"}

package/build/components/display/action_button.js CHANGED Viewed

@@ -23,7 +23,7 @@ export const ActionButton = ({ visible = true, disabled = false, onPress, title,
         </Text>)}
       <View style={styles.buttonRow}>
         {secondaryButton}
-        <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>
+        <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle={title}/>
       </View>
     </Animated.View>);
 };

package/build/components/display/action_button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAA;AAE/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,OAAO,GAAG,KAAK,GAUhB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,OAAO;YAAE,OAAM;QAE5B,OAAO,CAAC,OAAO,CAAC,CAAA;QAChB,eAAe,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACtE,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAA;IAEnB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzB,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACrC;MAAA,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAU,CAC9C;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,eAAe,CAChB;QAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,IAAI,CAAC,IAAI,CACT,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACvD,YAAY,CAAC,CAAC,kBAAkB,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,qBAAqB,CAAC,CAAC,iCAAiC,CAAC,~~EAE7D~~;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,uBAAuB,GAAG,IAAI,CAAA;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,wBAAwB,GAAG,EAAE,CAAA;IACnC,MAAM,iBAAiB,GAAG,SAAS,IAAI,uBAAuB,CAAA;IAE9D,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,wBAAwB;YACpC,aAAa,EAAE,MAAM,GAAG,wBAAwB;YAChD,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC,qBAAqB;YAC5C,GAAG,EAAE,EAAE;SACR;QACD,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe;YAC9D,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,cAAc;SACzB;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,CAAC;SACZ;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,QAAQ;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button } from './button'\nimport { useEffect } from 'react'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport { IconString } from './icon'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n}) => {\n const styles = useStyles()\n const [show, setShow] = useState(visible)\n\n useEffect(() => {\n if (show === visible) return\n\n setShow(visible)\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n }, [show, visible])\n\n if (!visible) return null\n\n return (\n <Animated.View style={styles.container}>\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n />\n </View>\n </Animated.View>\n )\n}\n\nconst SCALE_THAT_BUTTONS_WRAP = 1.15\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: isButtonsWrapping ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n })\n}\n"]}
1	+ {"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button } from './button'\nimport { useEffect } from 'react'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport { IconString } from './icon'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n}) => {\n const styles = useStyles()\n const [show, setShow] = useState(visible)\n\n useEffect(() => {\n if (show === visible) return\n\n setShow(visible)\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n }, [show, visible])\n\n if (!visible) return null\n\n return (\n <Animated.View style={styles.container}>\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={title}\n />\n </View>\n </Animated.View>\n )\n}\n\nconst SCALE_THAT_BUTTONS_WRAP = 1.15\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: isButtonsWrapping ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n })\n}\n"]}

package/build/components/display/badge.d.ts CHANGED Viewed

@@ -50,7 +50,11 @@ export interface BadgeProps {
      * Callback function when the badge is pressed.
      */
     onPress?: () => void;
+    /**
+     * Specifies the number of lines for the meta label before truncating.
+     */
+    numberOfLinesMetaLabel?: number;
 }
-export declare function Badge({ appearance, metaLabel, style, iconName, iconNameRight, label, productLogoName, variant, maxFontSizeMultiplier, onPress, }: BadgeProps): JSX.Element;
+export declare function Badge({ appearance, metaLabel, style, iconName, iconNameRight, label, productLogoName, variant, maxFontSizeMultiplier, numberOfLinesMetaLabel, onPress, }: BadgeProps): JSX.Element;
 export {};
 //# sourceMappingURL=badge.d.ts.map

package/build/components/display/badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;AAMnE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEzC,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAM/F,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAcpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;~~CACrB~~;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,EACrB,OAAO,GACR,EAAE,UAAU,eAsCZ"}
1	+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;AAMnE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEzC,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAM/F,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAcpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,EACrB,sBAA0B,EAC1B,OAAO,GACR,EAAE,UAAU,eAsCZ"}

package/build/components/display/badge.js CHANGED Viewed

@@ -21,7 +21,7 @@ const PRODUCT_LOGO_COMPONENT_MAP = {
     services: ServicesIcon,
     Services: ServicesIcon,
 };
-export function Badge({ appearance = 'neutral', metaLabel, style, iconName, iconNameRight, label, productLogoName, variant = 'default', maxFontSizeMultiplier, onPress, }) {
+export function Badge({ appearance = 'neutral', metaLabel, style, iconName, iconNameRight, label, productLogoName, variant = 'default', maxFontSizeMultiplier, numberOfLinesMetaLabel = 1, onPress, }) {
     const styles = useStyles({ appearance, maxFontSizeMultiplier, variant });
     const { showBadgeProductLogo } = useTheme();
     const isMetaSubtle = variant === 'metaSubtle';
@@ -38,7 +38,7 @@ export function Badge({ appearance = 'neutral', metaLabel, style, iconName, icon
         </Text>
         {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight}/>}
       </View>
-      {hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+      {hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={numberOfLinesMetaLabel} maxFontSizeMultiplier={maxFontSizeMultiplier}>
           {metaLabel}
         </Text>)}
     </BadgeWrapper>);

package/build/components/display/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n default: 'default',\n meta: 'meta',\n metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' \| 'Services' \| 'groups' \| 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /*\n Renders the main text.\n /\n label: string\n /\n Renders secondary meta text to the right of the label.\n /\n metaLabel?: string\n /\n Changes the status color for the badge and icon.\n /\n appearance?: StatusAppearanceUnion\n /\n Changes form of the logo to support a meta label and badge\n /\n variant?: VariantUnion\n /\n Adds a product logo to the left of the text.\n /\n productLogoName?: ProductLogoName\n /\n Shows an icon of the user choice to the left of the text.\n /\n iconName?: IconString\n /\n Shows an icon of the user choice to the right of the text.\n /\n iconNameRight?: IconString\n /\n Styles badge wrapper.\n /\n style?: ViewStyle\n /\n Specifies the maximum size a font can reach when allowFontScaling is enabled.\n /\n maxFontSizeMultiplier?: number\n /\n Callback function when the badge is pressed.\n /\n onPress?: () => void\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgeGap = 4 fontScale\n const badgePaddingHorizontal = 8\n const badgePaddingVertical = 4\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n borderRadius: variantStylesMap[variant].borderRadius - 2,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n alignSelf: 'center',\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
1	+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n default: 'default',\n meta: 'meta',\n metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' \| 'Services' \| 'groups' \| 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /*\n Renders the main text.\n /\n label: string\n /\n Renders secondary meta text to the right of the label.\n /\n metaLabel?: string\n /\n Changes the status color for the badge and icon.\n /\n appearance?: StatusAppearanceUnion\n /\n Changes form of the logo to support a meta label and badge\n /\n variant?: VariantUnion\n /\n Adds a product logo to the left of the text.\n /\n productLogoName?: ProductLogoName\n /\n Shows an icon of the user choice to the left of the text.\n /\n iconName?: IconString\n /\n Shows an icon of the user choice to the right of the text.\n /\n iconNameRight?: IconString\n /\n Styles badge wrapper.\n /\n style?: ViewStyle\n /\n Specifies the maximum size a font can reach when allowFontScaling is enabled.\n /\n maxFontSizeMultiplier?: number\n /\n Callback function when the badge is pressed.\n /\n onPress?: () => void\n /\n Specifies the number of lines for the meta label before truncating.\n /\n numberOfLinesMetaLabel?: number\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n numberOfLinesMetaLabel = 1,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={numberOfLinesMetaLabel}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgeGap = 4 fontScale\n const badgePaddingHorizontal = 8\n const badgePaddingVertical = 4\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n borderRadius: variantStylesMap[variant].borderRadius - 2,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n alignSelf: 'center',\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}

package/build/components/display/toggle_button.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { PressableProps } from 'react-native';
 import { IconString } from './icon';
-export interface ToggleButtonProps extends PressableProps {
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>;
+export interface ToggleButtonProps extends RestrictedPressableProps {
     /**
      * Pressable container styles
      */
@@ -44,4 +45,5 @@ export interface ToggleButtonProps extends PressableProps {
     hapticFeedback?: boolean;
 }
 export declare function ToggleButton({ active, adjustsFontSizeToFit, allowFontScaling, iconNameLeft, iconNameRight, maxFontSizeMultiplier, minimumFontScale, title, style, hapticFeedback, onPress, ...props }: ToggleButtonProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=toggle_button.d.ts.map

package/build/components/display/toggle_button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;AAazE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;~~AAQzC~~,MAAM,WAAW,iBAAkB,SAAQ,~~cAAc~~;~~IACvD~~;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,oBAA4B,EAC5B,gBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,qBAAyD,EACzD,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAqB,EACrB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,~~qBAsDnB~~"}
1	+ {"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;AAazE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAWzC,KAAK,wBAAwB,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAA;AAMnE,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,oBAA4B,EAC5B,gBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,qBAAyD,EACzD,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAqB,EACrB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwDnB"}

package/build/components/display/toggle_button.js CHANGED Viewed

@@ -21,7 +21,7 @@ export function ToggleButton({ active, adjustsFontSizeToFit = false, allowFontSc
             ...styles.pressable,
             ...(pressed ? platformPressedOpacityStyle : null),
             ...overrideStyles,
-        })} accessibilityRole="togglebutton" accessibilityState={{ checked: active }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} onPress={handlePress} {...props}>
+        })} accessibilityRole="togglebutton" accessibilityState={{ checked: active }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} onPress={handlePress} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle={title} {...props}>
       {iconNameLeft && (<Icon name={iconNameLeft} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
       <Text allowFontScaling={allowFontScaling} minimumFontScale={minimumFontScale} maxFontSizeMultiplier={maxFontSizeMultiplier} adjustsFontSizeToFit={adjustsFontSizeToFit} numberOfLines={1} style={styles.text} variant="tertiary">
         {title}

package/build/components/display/toggle_button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,2BAA2B,EAC3B,kCAAkC,GACnC,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,iCAAiC,EACjC,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,IAAI,EAAc,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAA;~~AAiDlE~~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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, GestureResponderEvent } from 'react-native'\nimport { Text } from './text'\nimport {\n useTheme,\n useFontScale,\n useCreateAndroidRippleColor,\n useInteractionGhostBackgroundColor,\n} from '../../hooks'\nimport {\n MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n platformFontWeightBold,\n platformPressedOpacityStyle,\n} from '../../utils'\nimport { Icon, IconString } from './icon'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ToggleButtonProps extends ~~PressableProps~~ {\n /*\n Pressable container styles\n /\n active: boolean\n /\n Specifies whether fonts should be scaled down automatically to fit given style constraints.\n /\n adjustsFontSizeToFit?: boolean\n /\n Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n /\n allowFontScaling?: boolean\n /\n Generates an icon to the left of the button text\n /\n iconNameLeft?: IconString\n /\n Generates an icon to the right of the button text\n /\n iconNameRight?: IconString\n /\n Specifies the maximum size a font can reach when allowFontScaling is enabled.\n /\n maxFontSizeMultiplier?: number\n /\n Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n /\n minimumFontScale?: number\n /\n Renders as text within the button\n /\n title: string\n /\n Pressable container styles\n /\n style?: PressableProps['style']\n /\n Specifies whether haptic feedback should be enabled.\n /\n hapticFeedback?: boolean\n}\n\nexport function ToggleButton({\n active,\n adjustsFontSizeToFit = false,\n allowFontScaling = true,\n iconNameLeft,\n iconNameRight,\n maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n minimumFontScale,\n title,\n style,\n hapticFeedback = true,\n onPress,\n ...props\n}: ToggleButtonProps) {\n const styles = useStyles({ active, maxFontSizeMultiplier })\n const { colors } = useTheme()\n const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied\n\n const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base\n const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n const handlePress = (event: GestureResponderEvent) => {\n if (hapticFeedback) Haptic.impactLight()\n\n onPress?.(event)\n }\n\n return (\n <Pressable\n style={({ pressed }) => ({\n ...styles.pressable,\n ...(pressed ? platformPressedOpacityStyle : null),\n ...overrideStyles,\n })}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: active }}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n onPress={handlePress}\n {...props}\n >\n {iconNameLeft && (\n <Icon\n name={iconNameLeft}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n <Text\n allowFontScaling={allowFontScaling}\n minimumFontScale={minimumFontScale}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n adjustsFontSizeToFit={adjustsFontSizeToFit}\n numberOfLines={1}\n style={styles.text}\n variant=\"tertiary\"\n >\n {title}\n </Text>\n {iconNameRight && (\n <Icon\n name={iconNameRight}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {\n const { colors, button } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const activeBackgroundColor = useInteractionGhostBackgroundColor()\n\n const color = active ? colors.interaction : colors.textColorDefaultSecondary\n\n return StyleSheet.create({\n pressable: {\n borderRadius: button.borderRadius fontScale,\n borderWidth: 1,\n borderColor: active ? colors.interaction : colors.borderColorDefaultBase,\n backgroundColor: active ? activeBackgroundColor : 'transparent',\n paddingHorizontal: 16 * fontScale,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n height: 32 * fontScale,\n gap: 6 * fontScale,\n overflow: 'hidden',\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n includeFontPadding: false,\n fontWeight: platformFontWeightBold,\n color,\n },\n icon: {\n fontSize: tokens.fontSizeSm * fontScale,\n color,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, GestureResponderEvent } from 'react-native'\nimport { Text } from './text'\nimport {\n useTheme,\n useFontScale,\n useCreateAndroidRippleColor,\n useInteractionGhostBackgroundColor,\n} from '../../hooks'\nimport {\n MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n platformFontWeightBold,\n platformPressedOpacityStyle,\n} from '../../utils'\nimport { Icon, IconString } from './icon'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\n// =================================\n// ====== Constants ================\n// =================================\n\n// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.\n// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.\n// Triggering this prop will display an almost full screen iOS a11y button.\ntype RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ToggleButtonProps extends RestrictedPressableProps {\n /*\n Pressable container styles\n /\n active: boolean\n /\n Specifies whether fonts should be scaled down automatically to fit given style constraints.\n /\n adjustsFontSizeToFit?: boolean\n /\n Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n /\n allowFontScaling?: boolean\n /\n Generates an icon to the left of the button text\n /\n iconNameLeft?: IconString\n /\n Generates an icon to the right of the button text\n /\n iconNameRight?: IconString\n /\n Specifies the maximum size a font can reach when allowFontScaling is enabled.\n /\n maxFontSizeMultiplier?: number\n /\n Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n /\n minimumFontScale?: number\n /\n Renders as text within the button\n /\n title: string\n /\n Pressable container styles\n /\n style?: PressableProps['style']\n /\n Specifies whether haptic feedback should be enabled.\n /\n hapticFeedback?: boolean\n}\n\nexport function ToggleButton({\n active,\n adjustsFontSizeToFit = false,\n allowFontScaling = true,\n iconNameLeft,\n iconNameRight,\n maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n minimumFontScale,\n title,\n style,\n hapticFeedback = true,\n onPress,\n ...props\n}: ToggleButtonProps) {\n const styles = useStyles({ active, maxFontSizeMultiplier })\n const { colors } = useTheme()\n const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied\n\n const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base\n const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n const handlePress = (event: GestureResponderEvent) => {\n if (hapticFeedback) Haptic.impactLight()\n\n onPress?.(event)\n }\n\n return (\n <Pressable\n style={({ pressed }) => ({\n ...styles.pressable,\n ...(pressed ? platformPressedOpacityStyle : null),\n ...overrideStyles,\n })}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: active }}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n onPress={handlePress}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={title}\n {...props}\n >\n {iconNameLeft && (\n <Icon\n name={iconNameLeft}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n <Text\n allowFontScaling={allowFontScaling}\n minimumFontScale={minimumFontScale}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n adjustsFontSizeToFit={adjustsFontSizeToFit}\n numberOfLines={1}\n style={styles.text}\n variant=\"tertiary\"\n >\n {title}\n </Text>\n {iconNameRight && (\n <Icon\n name={iconNameRight}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {\n const { colors, button } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const activeBackgroundColor = useInteractionGhostBackgroundColor()\n\n const color = active ? colors.interaction : colors.textColorDefaultSecondary\n\n return StyleSheet.create({\n pressable: {\n borderRadius: button.borderRadius fontScale,\n borderWidth: 1,\n borderColor: active ? colors.interaction : colors.borderColorDefaultBase,\n backgroundColor: active ? activeBackgroundColor : 'transparent',\n paddingHorizontal: 16 * fontScale,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n height: 32 * fontScale,\n gap: 6 * fontScale,\n overflow: 'hidden',\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n includeFontPadding: false,\n fontWeight: platformFontWeightBold,\n color,\n },\n icon: {\n fontSize: tokens.fontSizeSm * fontScale,\n color,\n },\n })\n}\n"]}

package/build/hooks/index.d.ts CHANGED Viewed

@@ -13,4 +13,5 @@ export * from './use_api_client';
 export * from './use_message_reaction_toggle';
 export * from './use_interaction_ghost_color';
 export * from './use_at_font_scale_breakpoint';
+export * from './use_scalable_number_of_lines';
 //# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA"}

package/build/hooks/index.js CHANGED Viewed

@@ -13,4 +13,5 @@ export * from './use_api_client';
 export * from './use_message_reaction_toggle';
 export * from './use_interaction_ghost_color';
 export * from './use_at_font_scale_breakpoint';
+export * from './use_scalable_number_of_lines';
 //# sourceMappingURL=index.js.map

package/build/hooks/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\nexport * from './use_message_reaction_toggle'\nexport * from './use_interaction_ghost_color'\nexport * from './use_at_font_scale_breakpoint'\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\nexport * from './use_message_reaction_toggle'\nexport * from './use_interaction_ghost_color'\nexport * from './use_at_font_scale_breakpoint'\nexport * from './use_scalable_number_of_lines'\n"]}

package/build/hooks/use_scalable_number_of_lines.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const useScalableNumberOfLines: (numberOfLines?: number) => number \| undefined;
2	+ //# sourceMappingURL=use_scalable_number_of_lines.d.ts.map

package/build/hooks/use_scalable_number_of_lines.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"use_scalable_number_of_lines.d.ts","sourceRoot":"","sources":["../../src/hooks/use_scalable_number_of_lines.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,mBAAoB,MAAM,KAAG,MAAM,GAAG,SAO1E,CAAA"}

package/build/hooks/use_scalable_number_of_lines.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint';
+export const useScalableNumberOfLines = (numberOfLines) => {
+    const atFontScaleBreakpoint = useAtFontScaleBreakpoint();
+    if (!numberOfLines)
+        return undefined;
+    const numberOfLinesDoubled = numberOfLines + 1;
+    return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines;
+};
+//# sourceMappingURL=use_scalable_number_of_lines.js.map

package/build/hooks/use_scalable_number_of_lines.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use_scalable_number_of_lines.js","sourceRoot":"","sources":["../../src/hooks/use_scalable_number_of_lines.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,aAAsB,EAAsB,EAAE;IACrF,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAA;IAExD,IAAI,CAAC,aAAa;QAAE,OAAO,SAAS,CAAA;IAEpC,MAAM,oBAAoB,GAAG,aAAa,GAAG,CAAC,CAAA;IAC9C,OAAO,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAA;AACrE,CAAC,CAAA","sourcesContent":["import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint'\n\nexport const useScalableNumberOfLines = (numberOfLines?: number): number | undefined => {\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n if (!numberOfLines) return undefined\n\n const numberOfLinesDoubled = numberOfLines + 1\n return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines\n}\n"]}

package/build/screens/conversations/components/list_header_component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAoBnD,eAAO,MAAM,mBAAmB,~~yBAiH~~/B,CAAA"}
1	+ {"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAoBnD,eAAO,MAAM,mBAAmB,yBAmH/B,CAAA"}

package/build/screens/conversations/components/list_header_component.js CHANGED Viewed

@@ -56,7 +56,7 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton onPress={alertMarkAllRead} disabled={isPending} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}>
+        <TextButton onPress={alertMarkAllRead} disabled={isPending} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle="Mark all read">
           Mark all read
         </TextButton>
       </View>
@@ -102,7 +102,7 @@ const useStyles = () => {
             rowGap: 8,
             columnGap: 16,
             paddingTop: 8,
-            paddingBottom: atFontScaleBreakpoint ? 8 : 0,
+            paddingBottom: atFontScaleBreakpoint ? 4 : 0,
             paddingHorizontal: ROW_PADDING_HORIZONTAL,
         },
         filterRow: {

package/build/screens/conversations/components/list_header_component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n All = 'All',\n Groups = 'Groups',\n Teams = 'Teams',\n More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n const styles = useStyles()\n const navigation = useNavigation()\n const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n const { chat_group_graph_id, group_source_app_name = '' } = route.params \|\| {}\n const currentPersonCache = useCurrentPersonCache()\n const { markAllRead, isPending } = useMarkAllRead()\n\n const active: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const handleMarkAllRead = useCallback(() => {\n currentPersonCache.update({ unreadCount: 0 })\n Haptic.notificationSuccess()\n markAllRead()\n }, [currentPersonCache, markAllRead])\n\n const alertMarkAllRead = useCallback(() => {\n if (active === FilterTypes.All) return handleMarkAllRead()\n\n Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n { text: 'Cancel' },\n { text: 'OK', onPress: () => handleMarkAllRead() },\n ])\n }, [active, handleMarkAllRead])\n\n const showAppFilters = canFilterByGroups && canFilterByTeams\n\n return (\n <View style={styles.listHeader}>\n <View style={styles.titleRow}>\n <Heading numberOfLines={1} variant=\"h2\">\n Conversations\n </Heading>\n <TextButton\n onPress={alertMarkAllRead}\n disabled={isPending}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n >\n Mark all read\n </TextButton>\n </View>\n <ScrollView\n horizontal\n showsHorizontalScrollIndicator={false}\n contentContainerStyle={styles.filterRow}\n accessibilityRole=\"toolbar\"\n >\n {showAppFilters && (\n <>\n <ToggleButton\n title={FilterTypes.All}\n active={active === FilterTypes.All}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: undefined,\n })\n }\n accessibilityLabel=\"Show all conversations\"\n />\n <ToggleButton\n title={FilterTypes.Groups}\n active={active === FilterTypes.Groups}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Groups',\n })\n }\n accessibilityLabel=\"Filter to group conversations\"\n />\n\n <ToggleButton\n title={FilterTypes.Teams}\n active={active === FilterTypes.Teams}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Services',\n })\n }\n accessibilityLabel=\"Filter to team conversations\"\n />\n </>\n )}\n <ToggleButton\n title={showAppFilters ? FilterTypes.More : 'Filter'}\n onPress={() =>\n navigation.navigate('ConversationFilters', {\n chat_group_graph_id,\n group_source_app_name,\n })\n }\n active={active === FilterTypes.More}\n iconNameRight=\"general.threeReducingHorizontalBars\"\n accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n />\n </ScrollView>\n <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n listHeader: {\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n paddingBottom: 16,\n gap: 12,\n },\n titleRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n justifyContent: 'space-between',\n alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n flexWrap: 'wrap',\n rowGap: 8,\n columnGap: 16,\n paddingTop: 8,\n paddingBottom: atFontScaleBreakpoint ? 8 : 0,\n paddingHorizontal: ROW_PADDING_HORIZONTAL,\n },\n filterRow: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n gap: 8,\n paddingHorizontal: ROW_PADDING_HORIZONTAL,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationsScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\nimport { Haptic } from '../../../utils/native_adapters'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'\n\nconst ROW_PADDING_HORIZONTAL = 16\n\nenum FilterTypes {\n All = 'All',\n Groups = 'Groups',\n Teams = 'Teams',\n More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n const styles = useStyles()\n const navigation = useNavigation()\n const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()\n const { chat_group_graph_id, group_source_app_name = '' } = route.params \|\| {}\n const currentPersonCache = useCurrentPersonCache()\n const { markAllRead, isPending } = useMarkAllRead()\n\n const active: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const handleMarkAllRead = useCallback(() => {\n currentPersonCache.update({ unreadCount: 0 })\n Haptic.notificationSuccess()\n markAllRead()\n }, [currentPersonCache, markAllRead])\n\n const alertMarkAllRead = useCallback(() => {\n if (active === FilterTypes.All) return handleMarkAllRead()\n\n Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n { text: 'Cancel' },\n { text: 'OK', onPress: () => handleMarkAllRead() },\n ])\n }, [active, handleMarkAllRead])\n\n const showAppFilters = canFilterByGroups && canFilterByTeams\n\n return (\n <View style={styles.listHeader}>\n <View style={styles.titleRow}>\n <Heading numberOfLines={1} variant=\"h2\">\n Conversations\n </Heading>\n <TextButton\n onPress={alertMarkAllRead}\n disabled={isPending}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle=\"Mark all read\"\n >\n Mark all read\n </TextButton>\n </View>\n <ScrollView\n horizontal\n showsHorizontalScrollIndicator={false}\n contentContainerStyle={styles.filterRow}\n accessibilityRole=\"toolbar\"\n >\n {showAppFilters && (\n <>\n <ToggleButton\n title={FilterTypes.All}\n active={active === FilterTypes.All}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: undefined,\n })\n }\n accessibilityLabel=\"Show all conversations\"\n />\n <ToggleButton\n title={FilterTypes.Groups}\n active={active === FilterTypes.Groups}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Groups',\n })\n }\n accessibilityLabel=\"Filter to group conversations\"\n />\n\n <ToggleButton\n title={FilterTypes.Teams}\n active={active === FilterTypes.Teams}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Services',\n })\n }\n accessibilityLabel=\"Filter to team conversations\"\n />\n </>\n )}\n <ToggleButton\n title={showAppFilters ? FilterTypes.More : 'Filter'}\n onPress={() =>\n navigation.navigate('ConversationFilters', {\n chat_group_graph_id,\n group_source_app_name,\n })\n }\n active={active === FilterTypes.More}\n iconNameRight=\"general.threeReducingHorizontalBars\"\n accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n />\n </ScrollView>\n <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const atFontScaleBreakpoint = useAtFontScaleBreakpoint()\n\n return StyleSheet.create({\n listHeader: {\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n paddingBottom: 16,\n gap: 12,\n },\n titleRow: {\n flexDirection: atFontScaleBreakpoint ? 'column' : 'row',\n justifyContent: 'space-between',\n alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',\n flexWrap: 'wrap',\n rowGap: 8,\n columnGap: 16,\n paddingTop: 8,\n paddingBottom: atFontScaleBreakpoint ? 4 : 0,\n paddingHorizontal: ROW_PADDING_HORIZONTAL,\n },\n filterRow: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n gap: 8,\n paddingHorizontal: ROW_PADDING_HORIZONTAL,\n },\n })\n}\n"]}

package/build/screens/conversations/conversations_screen.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAA;AAG9D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,~~qBAgEtE~~"}
1	+ {"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAA;AAG9D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,qBAkEtE"}

package/build/screens/conversations/conversations_screen.js CHANGED Viewed

@@ -48,7 +48,7 @@ export function ConversationsScreen({ route }) {
       <ConversationsContextProvider args={route.params}>
         <Conversations ListHeaderComponent={ListHeaderComponent}/>
       </ConversationsContextProvider>
-      <ActionButton visible={canCreateConversations} title="New conversation" onPress={handleNewConversationNavigation} buttonIconNameLeft="churchCenter.signups" secondaryButton={<TextButton variant="tertiary" onPress={reportABug} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}>
+      <ActionButton visible={canCreateConversations} title="New conversation" onPress={handleNewConversationNavigation} buttonIconNameLeft="churchCenter.signups" secondaryButton={<TextButton variant="tertiary" onPress={reportABug} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle="Report a bug">
             Report a bug
           </TextButton>}/>
     </View>);

package/build/screens/conversations/conversations_screen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAEvD,OAAO,EAAE,2BAA2B,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AASxE,MAAM,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAA4B;IACrE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAA;IAC1D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE,CAAA;IAClD,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAA;IAEpF,MAAM,+BAA+B,GAAG,GAAG,EAAE;QAC3C,IAAI,aAAa,KAAK,UAAU,EAAE,CAAC;YACjC,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,MAAM,EAAE,iBAAiB;gBACzB,MAAM,EAAE;oBACN,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;oBACpC,eAAe,EAAE,aAAa;oBAC9B,GAAG,KAAK,CAAC,MAAM;iBAChB;aACF,CAAC,CAAA;QACJ,CAAC;QACD,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,MAAM,EAAE,iBAAiB;gBACzB,MAAM,EAAE;oBACN,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,aAAa;oBAC9B,GAAG,KAAK,CAAC,MAAM;iBAChB;aACF,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;YAChC,MAAM,EAAE,8BAA8B;YACtC,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;aAChB;SACF,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAC/C;QAAA,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAC1D;MAAA,EAAE,4BAA4B,CAC9B;MAAA,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,+BAA+B,CAAC,CACzC,kBAAkB,CAAC,sBAAsB,CACzC,eAAe,CAAC,CACd,CAAC,UAAU,CACT,OAAO,CAAC,UAAU,CAClB,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,qBAAqB,CAAC,CAAC,iCAAiC,CAAC,~~CAEzD~~;;UACF,EAAE,UAAU,CACd,CAAC,EAEL;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations, TextButton } from '../../components'\nimport { ActionButton } from '../../components/display/action_button'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { useCanCreateConversations } from '../../hooks'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { ListHeaderComponent } from './components/list_header_component'\nimport { AppName } from '../../types/resources/app_name'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n title?: string\n chat_group_graph_id?: GraphId\n group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n const navigation = useNavigation()\n const canCreateConversations = useCanCreateConversations()\n const styles = useStyles()\n\n const { chat_group_graph_id } = route.params \|\| {}\n const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)\n\n const handleNewConversationNavigation = () => {\n if (sourceAppName === 'Services') {\n return navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n team_ids: sourceId ? [sourceId] : [],\n source_app_name: sourceAppName,\n ...route.params,\n },\n })\n }\n if (sourceAppName === 'Groups') {\n return navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n group_id: sourceId,\n source_app_name: sourceAppName,\n ...route.params,\n },\n })\n }\n\n return navigation.navigate('New', {\n screen: 'ConversationSelectRecipients',\n params: {\n ...route.params,\n },\n })\n }\n\n const reportABug = () => {\n return navigation.navigate('BugReport')\n }\n\n return (\n <View style={styles.container}>\n <ConversationsContextProvider args={route.params}>\n <Conversations ListHeaderComponent={ListHeaderComponent} />\n </ConversationsContextProvider>\n <ActionButton\n visible={canCreateConversations}\n title=\"New conversation\"\n onPress={handleNewConversationNavigation}\n buttonIconNameLeft=\"churchCenter.signups\"\n secondaryButton={\n <TextButton\n variant=\"tertiary\"\n onPress={reportABug}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n >\n Report a bug\n </TextButton>\n }\n />\n </View>\n )\n}\n\nconst useStyles = () => {\n return StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n },\n })\n}\n"]}
1	+ {"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAEvD,OAAO,EAAE,2BAA2B,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AASxE,MAAM,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAA4B;IACrE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAA;IAC1D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE,CAAA;IAClD,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAA;IAEpF,MAAM,+BAA+B,GAAG,GAAG,EAAE;QAC3C,IAAI,aAAa,KAAK,UAAU,EAAE,CAAC;YACjC,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,MAAM,EAAE,iBAAiB;gBACzB,MAAM,EAAE;oBACN,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;oBACpC,eAAe,EAAE,aAAa;oBAC9B,GAAG,KAAK,CAAC,MAAM;iBAChB;aACF,CAAC,CAAA;QACJ,CAAC;QACD,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,MAAM,EAAE,iBAAiB;gBACzB,MAAM,EAAE;oBACN,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,aAAa;oBAC9B,GAAG,KAAK,CAAC,MAAM;iBAChB;aACF,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;YAChC,MAAM,EAAE,8BAA8B;YACtC,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;aAChB;SACF,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAC/C;QAAA,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAC1D;MAAA,EAAE,4BAA4B,CAC9B;MAAA,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,+BAA+B,CAAC,CACzC,kBAAkB,CAAC,sBAAsB,CACzC,eAAe,CAAC,CACd,CAAC,UAAU,CACT,OAAO,CAAC,UAAU,CAClB,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,qBAAqB,CAAC,CAAC,iCAAiC,CAAC,CACzD,oCAAoC,CACpC,8BAA8B,CAAC,cAAc,CAE7C;;UACF,EAAE,UAAU,CACd,CAAC,EAEL;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations, TextButton } from '../../components'\nimport { ActionButton } from '../../components/display/action_button'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { useCanCreateConversations } from '../../hooks'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { ListHeaderComponent } from './components/list_header_component'\nimport { AppName } from '../../types/resources/app_name'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n title?: string\n chat_group_graph_id?: GraphId\n group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n const navigation = useNavigation()\n const canCreateConversations = useCanCreateConversations()\n const styles = useStyles()\n\n const { chat_group_graph_id } = route.params \|\| {}\n const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)\n\n const handleNewConversationNavigation = () => {\n if (sourceAppName === 'Services') {\n return navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n team_ids: sourceId ? [sourceId] : [],\n source_app_name: sourceAppName,\n ...route.params,\n },\n })\n }\n if (sourceAppName === 'Groups') {\n return navigation.navigate('New', {\n screen: 'ConversationNew',\n params: {\n group_id: sourceId,\n source_app_name: sourceAppName,\n ...route.params,\n },\n })\n }\n\n return navigation.navigate('New', {\n screen: 'ConversationSelectRecipients',\n params: {\n ...route.params,\n },\n })\n }\n\n const reportABug = () => {\n return navigation.navigate('BugReport')\n }\n\n return (\n <View style={styles.container}>\n <ConversationsContextProvider args={route.params}>\n <Conversations ListHeaderComponent={ListHeaderComponent} />\n </ConversationsContextProvider>\n <ActionButton\n visible={canCreateConversations}\n title=\"New conversation\"\n onPress={handleNewConversationNavigation}\n buttonIconNameLeft=\"churchCenter.signups\"\n secondaryButton={\n <TextButton\n variant=\"tertiary\"\n onPress={reportABug}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle=\"Report a bug\"\n >\n Report a bug\n </TextButton>\n }\n />\n </View>\n )\n}\n\nconst useStyles = () => {\n return StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n },\n })\n}\n"]}

package/build/utils/styles.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export declare const MAX_FONT_SIZE_MULTIPLIER = 1.5;
-export declare const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3;
+export declare const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2;
 export declare const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16;
 export declare const platformFontWeightMedium: "500" | "700" | undefined;
 export declare const platformFontWeightBold: "600" | "700" | undefined;

package/build/utils/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import { tokens } from '../vendor/tapestry/tokens';
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5;
-export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3; // Use in headers, footers, toolbars, etc.
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2; // Use in headers, footers, toolbars, etc.
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16; // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const platformFontWeightMedium = Platform.select({
     ios: tokens.fontWeightMedium,

package/build/utils/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAC3C,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA,CAAC,0CAA0C;AAE/F,MAAM,CAAC,MAAM,4CAA4C,GAAG,EAAE,CAAA,CAAC,4FAA4F;AAE3J,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,gBAAgB;IAC5B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC;IACzD,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACxB,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\nexport const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\n\nexport const platformFontWeightMedium = Platform.select({\n ios: tokens.fontWeightMedium,\n android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n ios: tokens.fontWeightSemiBold,\n android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n ios: { opacity: 0.5 },\n android: { opacity: 1 },\n})\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAC3C,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA,CAAC,0CAA0C;AAE/F,MAAM,CAAC,MAAM,4CAA4C,GAAG,EAAE,CAAA,CAAC,4FAA4F;AAE3J,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,gBAAgB;IAC5B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC;IACzD,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACxB,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\nexport const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\n\nexport const platformFontWeightMedium = Platform.select({\n ios: tokens.fontWeightMedium,\n android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n ios: tokens.fontWeightSemiBold,\n android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n ios: { opacity: 0.5 },\n android: { opacity: 1 },\n})\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.15.0-rc.0",
+  "version": "3.15.0-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "dc18b2159bfddbee7a105fc0b975ac2d371293c0"
+  "gitHead": "374e1b143d5267e4dfd7b35e50df600adda5f3c1"
 }

package/src/components/conversations/conversation_preview.tsx CHANGED Viewed

@@ -3,7 +3,12 @@ import { StyleSheet, View, ViewStyle } from 'react-native'
 import { ConversationResource } from '../../types'
 import { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'
 import { formatDatePreview } from '../../utils/date'
-import { useTheme, useAtFontScaleBreakpoint } from '../../hooks'
+import {
+  useTheme,
+  useAtFontScaleBreakpoint,
+  useFontScale,
+  useScalableNumberOfLines,
+} from '../../hooks'
 import { UnreadCountBadge } from './unread_count_badge'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
@@ -41,6 +46,9 @@ export const ConversationPreview = ({
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
+  const numberOfLinesScaledTitle = useScalableNumberOfLines(1)
+  const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2)
   const conversationPreviewText = lastMessageTextPreview
     ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
     : EMPTY_CONVERSATION_PREVIEW_TEXT
@@ -64,12 +72,12 @@ export const ConversationPreview = ({
         fallbackIconName={fallbackIconName}
       />
       <View style={styles.conversationBody}>
-        <Heading numberOfLines={1} variant="h3" style={styles.title}>
+        <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={styles.title}>
           {title}
         </Heading>
         <Text
           variant="tertiary"
-          numberOfLines={2}
+          numberOfLines={numberOfLinesScaledPreviewText}
           style={emptyConversation && styles.emptyConversationPreviewText}
         >
           {conversationPreviewText}
@@ -96,6 +104,7 @@ interface BadgeShape {
 }
 const ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {
   const styles = useStyles()
+  const numberOfLinesScaled = useScalableNumberOfLines(1)
   if (!visible || !badges || badges.length === 0) {
     return null
@@ -110,6 +119,7 @@ const ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: Ba
           productLogoName={badge.appName}
           label={badge.pcoResourceType}
           metaLabel={badge.text || ''}
+          numberOfLinesMetaLabel={numberOfLinesScaled}
         />
       ))}
     </View>
@@ -183,6 +193,7 @@ const getConversationAccessibilityLabel = ({
 const useStyles = () => {
   const { colors } = useTheme()
   const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const fontScale = useFontScale()
   return StyleSheet.create({
     previewRow: {
@@ -238,7 +249,7 @@ const useStyles = () => {
     statusContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 4,
+      gap: 4 * fontScale,
     },
   })
 }

package/src/components/conversations/mute_indicator.tsx CHANGED Viewed

@@ -2,13 +2,20 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { Icon } from '../display'
 import { useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
 export const MuteIndicator = ({ muted }: { muted: boolean }) => {
   const styles = useStyles()
   if (!muted) return null
-  return <Icon name="general.bellMuted" size={16} style={styles.mutedIcon} />
+  return (
+    <Icon
+      name="general.bellMuted"
+      style={styles.mutedIcon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
 }
 const useStyles = () => {
@@ -16,6 +23,7 @@ const useStyles = () => {
   return StyleSheet.create({
     mutedIcon: {
       color: colors.iconColorDefaultDim,
+      fontSize: 16,
     },
   })
 }

package/src/components/conversations/swipeable_toggle_button.tsx CHANGED Viewed

@@ -3,7 +3,11 @@ import { StyleSheet } from 'react-native'
 import { Pressable, type PressableProps } from 'react-native-gesture-handler'
 import { Icon, IconString, Spinner, Text } from '../display'
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
-import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'
+import {
+  MAX_FONT_SIZE_MULTIPLIER,
+  platformFontWeightMedium,
+  platformPressedOpacityStyle,
+} from '../../utils/styles'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
@@ -50,8 +54,16 @@ export function SwipeableToggleButton({
         <Spinner size={20} />
       ) : (
         <>
-          <Icon name={iconName} style={styles.icon} size={20} />
-          <Text variant="footnote" style={styles.text}>
+          <Icon
+            name={iconName}
+            style={styles.icon}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          />
+          <Text
+            variant="footnote"
+            style={styles.text}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          >
             {label}
           </Text>
         </>
@@ -78,12 +90,15 @@ const useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonP
       backgroundColor: buttonBackgroundColor,
     },
     icon: {
+      fontSize: 20,
       color: fillColor,
       marginTop: 4,
     },
     text: {
       color: fillColor,
       fontWeight: platformFontWeightMedium,
+      textAlign: 'center',
+      paddingHorizontal: 8,
     },
   })
 }

package/src/components/conversations/unread_count_badge.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Text } from '../display'
-import { useTheme } from '../../hooks'
-import { platformFontWeightBold } from '../../utils'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'
 export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {
   const styles = useStyles()
@@ -22,6 +22,9 @@ export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: b
 const useStyles = () => {
   const { colors } = useTheme()
+  const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5
+  const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })
+  const size = 8 * fontScale
   return StyleSheet.create({
     badge: {
@@ -29,16 +32,16 @@ const useStyles = () => {
       backgroundColor: colors.fillColorInteractionDefault,
       paddingVertical: 2,
       paddingHorizontal: 8,
-      borderRadius: 24,
+      borderRadius: 24 * fontScale,
     },
     count: {
       fontWeight: platformFontWeightBold,
       color: 'white',
     },
     dot: {
-      width: 8,
-      height: 8,
-      borderRadius: 8,
+      width: size,
+      height: size,
+      borderRadius: size,
       backgroundColor: colors.fillColorInteractionDefault,
     },
   })

package/src/components/display/action_button.tsx CHANGED Viewed

@@ -58,6 +58,8 @@ export const ActionButton = ({
           iconNameLeft={buttonIconNameLeft}
           loading={loading}
           maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle={title}
         />
       </View>
     </Animated.View>

package/src/components/display/badge.tsx CHANGED Viewed

@@ -91,6 +91,10 @@ export interface BadgeProps {
    * Callback function when the badge is pressed.
    */
   onPress?: () => void
+  /**
+   * Specifies the number of lines for the meta label before truncating.
+   */
+  numberOfLinesMetaLabel?: number
 }
 export function Badge({
@@ -103,6 +107,7 @@ export function Badge({
   productLogoName,
   variant = 'default',
   maxFontSizeMultiplier,
+  numberOfLinesMetaLabel = 1,
   onPress,
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
@@ -134,7 +139,7 @@ export function Badge({
         <Text
           variant="footnote"
           style={styles.metaLabel}
-          numberOfLines={1}
+          numberOfLines={numberOfLinesMetaLabel}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {metaLabel}

package/src/components/display/toggle_button.tsx CHANGED Viewed

@@ -17,11 +17,20 @@ import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
+// =================================
+// ====== Constants ================
+// =================================
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>
 // =================================
 // ====== Component ================
 // =================================
-export interface ToggleButtonProps extends PressableProps {
+export interface ToggleButtonProps extends RestrictedPressableProps {
   /**
    * Pressable container styles
    */
@@ -102,6 +111,8 @@ export function ToggleButton({
       accessibilityState={{ checked: active }}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={handlePress}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={title}
       {...props}
     >
       {iconNameLeft && (

package/src/hooks/index.ts CHANGED Viewed

@@ -13,3 +13,4 @@ export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
 export * from './use_at_font_scale_breakpoint'
+export * from './use_scalable_number_of_lines'

package/src/hooks/use_scalable_number_of_lines.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint'
+export const useScalableNumberOfLines = (numberOfLines?: number): number | undefined => {
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  if (!numberOfLines) return undefined
+  const numberOfLinesDoubled = numberOfLines + 1
+  return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines
+}

package/src/screens/conversations/components/list_header_component.tsx CHANGED Viewed

@@ -68,6 +68,8 @@ export const ListHeaderComponent = () => {
           onPress={alertMarkAllRead}
           disabled={isPending}
           maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle="Mark all read"
         >
           Mark all read
         </TextButton>
@@ -153,7 +155,7 @@ const useStyles = () => {
       rowGap: 8,
       columnGap: 16,
       paddingTop: 8,
-      paddingBottom: atFontScaleBreakpoint ? 8 : 0,
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     filterRow: {

package/src/screens/conversations/conversations_screen.tsx CHANGED Viewed

@@ -73,6 +73,8 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
             variant="tertiary"
             onPress={reportABug}
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Report a bug"
           >
             Report a bug
           </TextButton>

package/src/utils/styles.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
-export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created