@planningcenter/chat-react-native 3.42.2-qa-821.1 → 3.42.2-qa-staging.3

package/build/screens/design_system_screen.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, ConversationAvatar, EmojiAvatar, IconAvatar, ToggleButton, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, ImageAttachmentPreview, } from '../components/display';
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview';
@@ -53,51 +52,524 @@ const buttonPress = () => Alert.alert('Button clicked');
 // =================================
 export function DesignSystemScreen() {
     const styles = useStyles();
-    return (_jsxs(ScrollView, { contentContainerStyle: styles.container, style: styles.scrollView, children: [_jsx(ThemeSection, {}), _jsx(IndicatorsSection, {}), _jsx(HeadingTextSection, {}), _jsx(PressablesSection, {}), _jsx(HapticsSection, {}), _jsx(ImageIconsSection, {}), _jsx(FormControlsSection, {}), _jsx(StatusComponentsSection, {}), _jsx(FontAwesomeIconsSection, {}), _jsx(MiscComponentsSection, { isLast: true })] }));
+    return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
+      <ThemeSection />
+      <IndicatorsSection />
+      <HeadingTextSection />
+      <PressablesSection />
+      <HapticsSection />
+      <ImageIconsSection />
+      <FormControlsSection />
+      <StatusComponentsSection />
+      <FontAwesomeIconsSection />
+      <MiscComponentsSection isLast/>
+    </ScrollView>);
 }
 function ThemeSection({ isLast }) {
-    return (_jsx(CollapsableSection, { title: "Theme", isLast: isLast, children: _jsxs(TextGroup, { children: [_jsx(Text, { children: "There are four main parts to our theming system\u2026" }), _jsxs(TextRow, { children: [_jsx(Heading, { variant: "h3", children: "Default theme" }), _jsx(Text, { children: "Start at `src/utils/theme` when adding new theme values or checking what target apps have access to. The file has more instructions and examples." }), _jsx(Text, { children: "At a high level, it provides\u2026" }), _jsx(TextListItem, { label: "1.", children: "Access to consuming app targets of what theme values that they can be customized." }), _jsx(TextListItem, { label: "2.", children: "Fallback values for our components to use if the values weren't overriden." })] }), _jsxs(TextRow, { children: [_jsx(Heading, { variant: "h3", children: "Customizing the theme" }), _jsx(Text, { children: "Apps can override any default theme value by passing a `theme` object to our `ChatProvider` that holds a `theme` and a `colorScheme`." }), _jsx(Text, { children: "Currently types can be enforced by setting the parent theme object to `CreateChatThemeProps`." }), _jsx(Text, { variant: "footnote", children: "Example setup: `apps/sandbox/src/context/chat_context_provider.tsx`" })] }), _jsxs(TextRow, { children: [_jsx(Heading, { variant: "h3", children: "Merged theme" }), _jsx(Text, { children: "In `src/contexts/chat_context.tsx` we merge the default theme and any custom values coming from a product target with the `useCreateChatTheme` hook. It creates a single `ChatTheme` type." })] }), _jsxs(TextRow, { children: [_jsx(Heading, { variant: "h3", children: "Using theme values" }), _jsx(Text, { children: "Inside of our own `chat-react-native` components we can access the merged `ChatTheme` object via our own `useTheme` hook." }), _jsx(Text, { variant: "footnote", children: "Example setup: `src/components/display/button.tsx`" })] })] }) }));
+    return (<CollapsableSection title="Theme" isLast={isLast}>
+      <TextGroup>
+        <Text>There are four main parts to our theming system…</Text>
+        <TextRow>
+          <Heading variant="h3">Default theme</Heading>
+          <Text>
+            Start at `src/utils/theme` when adding new theme values or checking what target apps
+            have access to. The file has more instructions and examples.
+          </Text>
+          <Text>At a high level, it provides…</Text>
+          <TextListItem label="1.">
+            Access to consuming app targets of what theme values that they can be customized.
+          </TextListItem>
+          <TextListItem label="2.">
+            Fallback values for our components to use if the values weren't overriden.
+          </TextListItem>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Customizing the theme</Heading>
+          <Text>
+            Apps can override any default theme value by passing a `theme` object to our
+            `ChatProvider` that holds a `theme` and a `colorScheme`.
+          </Text>
+          <Text>
+            Currently types can be enforced by setting the parent theme object to
+            `CreateChatThemeProps`.
+          </Text>
+          <Text variant="footnote">
+            Example setup: `apps/sandbox/src/context/chat_context_provider.tsx`
+          </Text>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Merged theme</Heading>
+          <Text>
+            In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
+            coming from a product target with the `useCreateChatTheme` hook. It creates a single
+            `ChatTheme` type.
+          </Text>
+        </TextRow>
+        <TextRow>
+          <Heading variant="h3">Using theme values</Heading>
+          <Text>
+            Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
+            object via our own `useTheme` hook.
+          </Text>
+          <Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
+        </TextRow>
+      </TextGroup>
+    </CollapsableSection>);
 }
 function IndicatorsSection({ isLast }) {
-    return (_jsx(CollapsableSection, { title: "Indicators", isLast: isLast, children: _jsx(Group, { title: "Spinner", description: "Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.", children: _jsx(Row, { children: _jsx(Spinner, { size: 24 }) }) }) }));
+    return (<CollapsableSection title="Indicators" isLast={isLast}>
+      <Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
+        <Row>
+          <Spinner size={24}/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function HeadingTextSection({ isLast }) {
     const styles = useStyles();
-    return (_jsxs(CollapsableSection, { title: "Heading & Text", isLast: isLast, children: [_jsx(Group, { title: "Heading", description: "Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.", children: _jsxs(Column, { style: styles.columnCenter, children: [_jsx(Heading, { children: "Heading 1" }), _jsx(Heading, { variant: "h2", children: "Heading 2" }), _jsx(Heading, { variant: "h3", children: "Heading 3" }), _jsx(Heading, { variant: "h4", children: "Heading 4" })] }) }), _jsx(Group, { title: "Text", description: "Use for body copy and supporting text.", children: _jsxs(Column, { style: styles.columnCenter, children: [_jsx(Text, { children: "Plain text" }), _jsx(Text, { variant: "secondary", children: "Secondary" }), _jsx(Text, { variant: "tertiary", children: "Tertiary" }), _jsx(Text, { variant: "footnote", children: "Footnote" })] }) })] }));
+    return (<CollapsableSection title="Heading & Text" isLast={isLast}>
+      <Group title="Heading" description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.">
+        <Column style={styles.columnCenter}>
+          <Heading>Heading 1</Heading>
+          <Heading variant="h2">Heading 2</Heading>
+          <Heading variant="h3">Heading 3</Heading>
+          <Heading variant="h4">Heading 4</Heading>
+        </Column>
+      </Group>
+      <Group title="Text" description="Use for body copy and supporting text.">
+        <Column style={styles.columnCenter}>
+          <Text>Plain text</Text>
+          <Text variant="secondary">Secondary</Text>
+          <Text variant="tertiary">Tertiary</Text>
+          <Text variant="footnote">Footnote</Text>
+        </Column>
+      </Group>
+    </CollapsableSection>);
 }
 function PressablesSection({ isLast }) {
     const styles = useStyles();
     const [filterSelected, setFilterSelected] = useState('Groups');
-    return (_jsxs(CollapsableSection, { title: "Pressables", isLast: isLast, children: [_jsxs(Group, { title: "Button", description: "Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.", children: [_jsxs(Row, { children: [_jsx(Button, { onPress: buttonPress, title: "Default", size: "sm" }), _jsx(Button, { onPress: buttonPress, title: "Default", size: "md" }), _jsx(Button, { onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", size: "sm" }), _jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", size: "md" }), _jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", appearance: "danger", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Button, { onPress: buttonPress, title: "Default", size: "sm", iconNameLeft: "general.plus", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { onPress: buttonPress, title: "Default", size: "md", iconNameRight: "churchCenter.sort", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg", iconNameLeft: "groups.cards", iconNameRight: "general.downChevron", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })] }), _jsxs(Row, { children: [_jsx(Button, { loading: true, onPress: buttonPress, title: "Default", size: "sm" }), _jsx(Button, { loading: true, onPress: buttonPress, title: "Default", size: "md" }), _jsx(Button, { loading: true, onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Button, { onPress: buttonPress, title: "Default", size: "sm", variant: "outline" }), _jsx(Button, { onPress: buttonPress, title: "Default", size: "md", variant: "outline" }), _jsx(Button, { onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg", variant: "outline" })] }), _jsxs(Row, { children: [_jsx(Button, { onPress: buttonPress, title: "Default", size: "sm", variant: "outline", iconNameLeft: "general.plus", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { onPress: buttonPress, title: "Default", size: "md", variant: "outline", iconNameRight: "churchCenter.sort", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg", variant: "outline", iconNameLeft: "groups.cards", iconNameRight: "general.downChevron", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })] }), _jsxs(Row, { children: [_jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", size: "sm", variant: "outline", iconNameLeft: "general.plus", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", size: "md", variant: "outline", iconNameRight: "churchCenter.sort", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { disabled: true, onPress: buttonPress, title: "Disabled", appearance: "danger", size: "lg", variant: "outline", iconNameLeft: "groups.cards", iconNameRight: "general.downChevron", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })] }), _jsxs(Row, { children: [_jsx(Button, { loading: true, onPress: buttonPress, title: "Default", size: "sm", variant: "outline", iconNameLeft: "general.plus", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { loading: true, onPress: buttonPress, title: "Default", size: "md", variant: "outline", iconNameRight: "churchCenter.sort", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER }), _jsx(Button, { loading: true, onPress: buttonPress, title: "Danger", appearance: "danger", size: "lg", variant: "outline", iconNameLeft: "groups.cards", iconNameRight: "general.downChevron", maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })] })] }), _jsx(Group, { title: "ToggleButton", description: "Button with active and deactive states. Supports right & left icons, along with standard pressable props.", children: _jsxs(Row, { children: [_jsx(ToggleButton, { onPress: () => setFilterSelected('Groups'), title: "Groups", active: filterSelected === 'Groups', accessibilityLabel: "Filter to group conversations" }), _jsx(ToggleButton, { onPress: () => setFilterSelected('Teams'), title: "Teams", active: filterSelected === 'Teams', accessibilityLabel: "Filter to team conversations" }), _jsx(ToggleButton, { onPress: () => setFilterSelected('More'), title: "More", active: filterSelected === 'More', iconNameRight: "general.threeReducingHorizontalBars", accessibilityLabel: "View more filters" })] }) }), _jsxs(Group, { title: "IconButton", description: "Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.", children: [_jsxs(Row, { children: [_jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "md" }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "danger", size: "lg" }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "interaction", size: "xl" }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", iconStyle: styles.customIconButtonColor, size: "xxl" }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "xxxl" })] }), _jsxs(Row, { children: [_jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "md", disabled: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "danger", size: "lg", disabled: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "interaction", size: "xl", disabled: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", iconStyle: styles.customIconButtonColor, size: "xxl", disabled: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "xxxl", disabled: true })] }), _jsxs(Row, { children: [_jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "md", loading: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "danger", size: "lg", loading: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", appearance: "interaction", size: "xl", loading: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", iconStyle: styles.customIconButtonColor, size: "xxl", loading: true }), _jsx(IconButton, { onPress: buttonPress, name: "general.paperclip", accessibilityLabel: "Add attachment", accessibilityHint: "Opens your device's image gallary", size: "xxxl", loading: true })] })] }), _jsxs(Group, { title: "TextButton", description: "Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.", children: [_jsxs(Row, { children: [_jsx(TextButton, { onPress: buttonPress, children: "Default" }), _jsx(TextButton, { onPress: buttonPress, variant: "secondary", children: "Default" }), _jsx(TextButton, { onPress: buttonPress, variant: "tertiary", children: "Default" }), _jsx(TextButton, { onPress: buttonPress, variant: "footnote", children: "Default" })] }), _jsxs(Row, { children: [_jsx(TextButton, { onPress: buttonPress, appearance: "danger", children: "Danger" }), _jsx(TextButton, { onPress: buttonPress, variant: "secondary", appearance: "danger", children: "Danger" }), _jsx(TextButton, { onPress: buttonPress, variant: "tertiary", appearance: "danger", children: "Danger" }), _jsx(TextButton, { onPress: buttonPress, variant: "footnote", appearance: "danger", children: "Danger" })] }), _jsxs(Row, { children: [_jsx(TextButton, { onPress: buttonPress, disabled: true, children: "Disabled" }), _jsx(TextButton, { onPress: buttonPress, variant: "secondary", disabled: true, children: "Disabled" }), _jsx(TextButton, { onPress: buttonPress, variant: "tertiary", disabled: true, children: "Disabled" }), _jsx(TextButton, { onPress: buttonPress, variant: "footnote", disabled: true, children: "Disabled" })] })] }), _jsx(Group, { title: "TextInlineButton", description: "Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.", children: _jsxs(Row, { style: styles.alignRowLeft, children: [_jsxs(Text, { children: ["This text is next to", ' ', _jsx(TextInlineButton, { onPress: buttonPress, children: "default button text" }), " Lorem ipsum dolor", ' ', _jsx(TextInlineButton, { onPress: buttonPress, appearance: "danger", children: "danger button text" }), ' ', "consectetur", ' ', _jsx(TextInlineButton, { onPress: buttonPress, disabled: true, children: "disabled button text" }), ' ', "elit."] }), _jsxs(Text, { variant: "secondary", children: ["This text is next to", ' ', _jsx(TextInlineButton, { variant: "secondary", onPress: buttonPress, children: "default button text" }), ' ', "Lorem ipsum dolor", ' ', _jsx(TextInlineButton, { variant: "secondary", onPress: buttonPress, appearance: "danger", children: "danger button text" }), ' ', "consectetur", ' ', _jsx(TextInlineButton, { variant: "secondary", onPress: buttonPress, disabled: true, children: "disabled button text" }), ' ', "elit."] }), _jsxs(Text, { variant: "tertiary", children: ["This text is next to", ' ', _jsx(TextInlineButton, { variant: "tertiary", onPress: buttonPress, children: "default button text" }), ' ', "Lorem ipsum dolor", ' ', _jsx(TextInlineButton, { variant: "tertiary", onPress: buttonPress, appearance: "danger", children: "danger button text" }), ' ', "consectetur", ' ', _jsx(TextInlineButton, { variant: "tertiary", onPress: buttonPress, disabled: true, children: "disabled button text" }), ' ', "elit."] }), _jsxs(Text, { variant: "footnote", children: ["This text is next to", ' ', _jsx(TextInlineButton, { variant: "footnote", onPress: buttonPress, children: "default button text" }), ' ', "Lorem ipsum dolor", ' ', _jsx(TextInlineButton, { variant: "footnote", onPress: buttonPress, appearance: "danger", children: "danger button text" }), ' ', "consectetur", ' ', _jsx(TextInlineButton, { variant: "footnote", onPress: buttonPress, disabled: true, children: "disabled button text" }), ' ', "elit."] })] }) })] }));
+    return (<CollapsableSection title="Pressables" isLast={isLast}>
+      <Group title="Button" description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.">
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm"/>
+          <Button onPress={buttonPress} title="Default" size="md"/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button disabled onPress={buttonPress} title="Disabled" size="sm"/>
+          <Button disabled onPress={buttonPress} title="Disabled" size="md"/>
+          <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Default" size="md" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button loading onPress={buttonPress} title="Default" size="sm"/>
+          <Button loading onPress={buttonPress} title="Default" size="md"/>
+          <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" variant="outline"/>
+          <Button onPress={buttonPress} title="Default" size="md" variant="outline"/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline"/>
+        </Row>
+        <Row>
+          <Button onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button disabled onPress={buttonPress} title="Disabled" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button disabled onPress={buttonPress} title="Disabled" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+        <Row>
+          <Button loading onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button loading onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </Row>
+      </Group>
+      <Group title="ToggleButton" description="Button with active and deactive states. Supports right & left icons, along with standard pressable props.">
+        <Row>
+          <ToggleButton onPress={() => setFilterSelected('Groups')} title="Groups" active={filterSelected === 'Groups'} accessibilityLabel="Filter to group conversations"/>
+          <ToggleButton onPress={() => setFilterSelected('Teams')} title="Teams" active={filterSelected === 'Teams'} accessibilityLabel="Filter to team conversations"/>
+          <ToggleButton onPress={() => setFilterSelected('More')} title="More" active={filterSelected === 'More'} iconNameRight="general.threeReducingHorizontalBars" accessibilityLabel="View more filters"/>
+        </Row>
+      </Group>
+      <Group title="IconButton" description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.">
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl"/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl"/>
+        </Row>
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" disabled/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" disabled/>
+        </Row>
+        <Row>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" loading/>
+          <IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" loading/>
+        </Row>
+      </Group>
+      <Group title="TextButton" description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.">
+        <Row>
+          <TextButton onPress={buttonPress}>Default</TextButton>
+          <TextButton onPress={buttonPress} variant="secondary">
+            Default
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary">
+            Default
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote">
+            Default
+          </TextButton>
+        </Row>
+        <Row>
+          <TextButton onPress={buttonPress} appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="secondary" appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
+            Danger
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote" appearance="danger">
+            Danger
+          </TextButton>
+        </Row>
+        <Row>
+          <TextButton onPress={buttonPress} disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="secondary" disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="tertiary" disabled>
+            Disabled
+          </TextButton>
+          <TextButton onPress={buttonPress} variant="footnote" disabled>
+            Disabled
+          </TextButton>
+        </Row>
+      </Group>
+      <Group title="TextInlineButton" description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.">
+        <Row style={styles.alignRowLeft}>
+          <Text>
+            This text is next to{' '}
+            <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
+            ipsum dolor{' '}
+            <TextInlineButton onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="secondary">
+            This text is next to{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="secondary" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="tertiary">
+            This text is next to{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+          <Text variant="footnote">
+            This text is next to{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress}>
+              default button text
+            </TextInlineButton>{' '}
+            Lorem ipsum dolor{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
+              danger button text
+            </TextInlineButton>{' '}
+            consectetur{' '}
+            <TextInlineButton variant="footnote" onPress={buttonPress} disabled>
+              disabled button text
+            </TextInlineButton>{' '}
+            elit.
+          </Text>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function HapticsSection({ isLast }) {
-    return (_jsxs(CollapsableSection, { title: "Haptics", isLast: isLast, children: [_jsx(TextGroup, { children: _jsx(Text, { children: "Haptics help communicate changes and interactions in the UI by making them feel physical and \"weighty\". They are a progressive enhancement and shouldn't replace visual feedback." }) }), _jsx(Group, { title: "Impact", description: "Communicates that a user interaction is occurring.", children: _jsxs(Row, { children: [_jsx(HapticButton, { title: "Impact Light", onPress: () => Haptic.impactLight() }), _jsx(HapticButton, { title: "Impact Medium", onPress: () => Haptic.impactMedium() }), _jsx(HapticButton, { title: "Impact Heavy", onPress: () => Haptic.impactHeavy() }), _jsx(HapticButton, { title: "Rigid", onPress: () => Haptic.rigid() }), _jsx(HapticButton, { title: "Soft", onPress: () => Haptic.soft() })] }) }), _jsx(Group, { title: "Notification", description: "Communicates the result of a user or application action.", children: _jsxs(Row, { children: [_jsx(HapticButton, { title: "Notification Success", onPress: () => Haptic.notificationSuccess() }), _jsx(HapticButton, { title: "Notification Warning", onPress: () => Haptic.notificationWarning() }), _jsx(HapticButton, { title: "Notification Error", onPress: () => Haptic.notificationError() })] }) })] }));
+    return (<CollapsableSection title="Haptics" isLast={isLast}>
+      <TextGroup>
+        <Text>
+          Haptics help communicate changes and interactions in the UI by making them feel physical
+          and "weighty". They are a progressive enhancement and shouldn't replace visual feedback.
+        </Text>
+      </TextGroup>
+      <Group title="Impact" description="Communicates that a user interaction is occurring.">
+        <Row>
+          <HapticButton title="Impact Light" onPress={() => Haptic.impactLight()}/>
+          <HapticButton title="Impact Medium" onPress={() => Haptic.impactMedium()}/>
+          <HapticButton title="Impact Heavy" onPress={() => Haptic.impactHeavy()}/>
+          <HapticButton title="Rigid" onPress={() => Haptic.rigid()}/>
+          <HapticButton title="Soft" onPress={() => Haptic.soft()}/>
+        </Row>
+      </Group>
+      <Group title="Notification" description="Communicates the result of a user or application action.">
+        <Row>
+          <HapticButton title="Notification Success" onPress={() => Haptic.notificationSuccess()}/>
+          <HapticButton title="Notification Warning" onPress={() => Haptic.notificationWarning()}/>
+          <HapticButton title="Notification Error" onPress={() => Haptic.notificationError()}/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function ImageIconsSection({ isLast }) {
     const styles = useStyles();
     const { colors } = useTheme();
-    return (_jsxs(CollapsableSection, { title: "Images & Icons", isLast: isLast, children: [_jsx(Group, { title: "Image", description: "Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.", children: _jsxs(Row, { children: [_jsx(Image, { source: { uri: URL.broken }, style: styles.image, alt: "Mountain sunrise" }), _jsx(Image, { source: { uri: URL.image }, style: styles.image, alt: "Mountain sunrise" }), _jsx(Image, { source: { uri: URL.image }, style: styles.image, alt: "" })] }) }), _jsx(Group, { title: "ImageAttachmentPreview", description: "Displays an image attachment in different sizes with a close button. It takes a `fileName` prop that gets passed to the image's `alt` attribute. Can show loading and error states.", children: _jsxs(Row, { children: [_jsx(ImageAttachmentPreview, { size: "sm", uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress }), _jsx(ImageAttachmentPreview, { uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress }), _jsx(ImageAttachmentPreview, { size: "sm", uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress, loading: true, hideRemoveButton: true }), _jsx(ImageAttachmentPreview, { uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress, loading: true, hideRemoveButton: true }), _jsx(ImageAttachmentPreview, { size: "sm", uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress, error: true }), _jsx(ImageAttachmentPreview, { uri: URL.image, fileName: "mountains.jpg", onRemovePress: buttonPress, error: true })] }) }), _jsx(Group, { title: "VideoAttachmentPreview", description: "Displays an video attachment with a close button. It takes a `name` prop, an optional duration, and can show loading and error states.", children: _jsxs(Row, { children: [_jsx(VideoAttachmentPreview, { name: "mountains.mp4", onRemovePress: buttonPress }), _jsx(VideoAttachmentPreview, { name: "mountains.mp4", duration: "1:20", onRemovePress: buttonPress }), _jsx(VideoAttachmentPreview, { name: "mountains.mp4", onRemovePress: buttonPress, loading: true, hideRemoveButton: true }), _jsx(VideoAttachmentPreview, { name: "mountains.mp4", duration: "1:20", onRemovePress: buttonPress, error: true })] }) }), _jsxs(Group, { title: "Avatar", description: 'Displays the profile image for a user in different sizes and has a loading spinner. Can optionally show an online/offline "presence" indicator. Fallback condition and icon are optionally configurable.', children: [_jsxs(Row, { children: [_jsx(Avatar, { sourceUri: URL.broken }), _jsx(Avatar, { size: "md", sourceUri: URL.avatar_fallback }), _jsx(Avatar, { sourceUri: URL.avatar })] }), _jsxs(Row, { children: [_jsx(Avatar, { presence: "offline", sourceUri: URL.broken }), _jsx(Avatar, { presence: "online", size: "md", sourceUri: URL.avatar_fallback }), _jsx(Avatar, { presence: "offline", sourceUri: URL.avatar })] }), _jsxs(Row, { children: [_jsx(Avatar, { sourceUri: "" }), _jsx(Avatar, { sourceUri: "", size: "md" }), _jsx(Avatar, { sourceUri: "", size: "sm" }), _jsx(Avatar, { sourceUri: URL.broken, showFallback: true, fallbackIconName: "general.star", size: "sm" })] })] }), _jsxs(Group, { title: "AvatarGroup", description: "Shows 1-4 images in a grid at different sizes. Loading spinner shows until all images successfully load. Fallback condition and icon are optionally configurable.", children: [_jsxs(Row, { children: [_jsx(AvatarGroup, { sourceUris: [URL.broken] }), _jsx(AvatarGroup, { sourceUris: [URL.broken, URL.broken, ...URL.two_avatars] }), _jsx(AvatarGroup, { sourceUris: [URL.avatar] }), _jsx(AvatarGroup, { sourceUris: URL.two_avatars }), _jsx(AvatarGroup, { sourceUris: URL.three_avatars }), _jsx(AvatarGroup, { sourceUris: URL.four_avatars })] }), _jsxs(Row, { children: [_jsx(AvatarGroup, { sourceUris: [], showFallback: true, fallbackIconName: "general.person" }), _jsx(AvatarGroup, { sourceUris: [], showFallback: true, fallbackIconName: "people.noTextMessage" }), _jsx(AvatarGroup, { sourceUris: [], showFallback: true, fallbackIconName: "general.star", size: "md" }), _jsx(AvatarGroup, { sourceUris: [], showFallback: true, fallbackIconName: "general.heart", size: "sm" })] })] }), _jsxs(Group, { title: "IconAvatar", description: "Renders a FontAwesome icon centered on a gradient background. Used by ConversationAvatar for icon-type custom avatars, and reusable in the avatar picker UI.", children: [_jsxs(Row, { children: [_jsx(IconAvatar, { iconKey: "church", color: "warm-sunset", size: "lg" }), _jsx(IconAvatar, { iconKey: "guitar", color: "cosmic", size: "lg" }), _jsx(IconAvatar, { iconKey: "music", color: "iris", size: "md" }), _jsx(IconAvatar, { iconKey: "dove", color: "rose-teal", size: "sm" }), _jsx(IconAvatar, { iconKey: "cross", color: "gold", size: "xs" })] }), _jsxs(Row, { children: [_jsx(IconAvatar, { iconKey: "church", color: "garden", size: "lg" }), _jsx(IconAvatar, { iconKey: "church", color: "twilight", size: "lg" }), _jsx(IconAvatar, { iconKey: "church", color: "amethyst", size: "lg" }), _jsx(IconAvatar, { iconKey: "church", color: "rainbow", size: "lg" })] })] }), _jsx(Group, { title: "EmojiAvatar", description: "Renders an emoji centered on a gradient background. Used by ConversationAvatar for emoji-type custom avatars.", children: _jsxs(Row, { children: [_jsx(EmojiAvatar, { emoji: "\uD83C\uDF89", color: "warm-sunset", size: "lg" }), _jsx(EmojiAvatar, { emoji: "\uD83D\uDD25", color: "cosmic", size: "lg" }), _jsx(EmojiAvatar, { emoji: "\uD83D\uDCAC", color: "iris", size: "md" }), _jsx(EmojiAvatar, { emoji: "\u2B50", color: "gold", size: "sm" }), _jsx(EmojiAvatar, { emoji: "\uD83C\uDFB5", color: "navy-purple", size: "xs" })] }) }), _jsx(Group, { title: "ConversationAvatar", description: "Smart avatar that resolves a conversation's custom avatar (image, icon, or emoji) or falls back to the member AvatarGroup. Takes a conversation object and delegates to IconAvatar, EmojiAvatar, or AvatarGroup.", children: _jsxs(Row, { children: [_jsx(ConversationAvatar, { conversation: {
-                                customAvatarType: 'icon',
-                                customAvatarKey: 'church',
-                                customAvatarColor: 'warm-sunset',
-                            } }), _jsx(ConversationAvatar, { conversation: {
-                                customAvatarType: 'emoji',
-                                customAvatarKey: '🎉',
-                                customAvatarColor: 'cosmic',
-                            } }), _jsx(ConversationAvatar, { conversation: {
-                                customAvatarType: 'image',
-                                customAvatarImageUrl: URL.avatar,
-                            } }), _jsx(ConversationAvatar, { conversation: {
-                                previewAvatarUrls: URL.two_avatars,
-                            } }), _jsx(ConversationAvatar, { conversation: {}, fallbackIconName: "people.noTextMessage" })] }) }), _jsx(Group, { title: "Icon", description: "Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.", children: _jsxs(Row, { children: [_jsx(Icon, { name: "missingIcon", size: 20 }), _jsx(Icon, { name: "general.textMessage", size: 20 }), _jsx(Icon, { name: "general.bell", size: 20, color: colors.needsDesignPass }), _jsx(Icon, { name: "churchCenter.sort", style: styles.icon })] }) })] }));
+    return (<CollapsableSection title="Images & Icons" isLast={isLast}>
+      <Group title="Image" description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.">
+        <Row>
+          <Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise"/>
+          <Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise"/>
+          <Image source={{ uri: URL.image }} style={styles.image} alt=""/>
+        </Row>
+      </Group>
+      <Group title="ImageAttachmentPreview" description="Displays an image attachment in different sizes with a close button. It takes a `fileName` prop that gets passed to the image's `alt` attribute. Can show loading and error states.">
+        <Row>
+          <ImageAttachmentPreview size="sm" uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress}/>
+          <ImageAttachmentPreview uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress}/>
+          <ImageAttachmentPreview size="sm" uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress} loading hideRemoveButton/>
+          <ImageAttachmentPreview uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress} loading hideRemoveButton/>
+          <ImageAttachmentPreview size="sm" uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress} error/>
+          <ImageAttachmentPreview uri={URL.image} fileName="mountains.jpg" onRemovePress={buttonPress} error/>
+        </Row>
+      </Group>
+      <Group title="VideoAttachmentPreview" description="Displays an video attachment with a close button. It takes a `name` prop, an optional duration, and can show loading and error states.">
+        <Row>
+          <VideoAttachmentPreview name="mountains.mp4" onRemovePress={buttonPress}/>
+          <VideoAttachmentPreview name="mountains.mp4" duration="1:20" onRemovePress={buttonPress}/>
+          <VideoAttachmentPreview name="mountains.mp4" onRemovePress={buttonPress} loading hideRemoveButton/>
+          <VideoAttachmentPreview name="mountains.mp4" duration="1:20" onRemovePress={buttonPress} error/>
+        </Row>
+      </Group>
+      <Group title="Avatar" description='Displays the profile image for a user in different sizes and has a loading spinner. Can optionally show an online/offline "presence" indicator. Fallback condition and icon are optionally configurable.'>
+        <Row>
+          <Avatar sourceUri={URL.broken}/>
+          <Avatar size="md" sourceUri={URL.avatar_fallback}/>
+          <Avatar sourceUri={URL.avatar}/>
+        </Row>
+        <Row>
+          <Avatar presence="offline" sourceUri={URL.broken}/>
+          <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
+          <Avatar presence="offline" sourceUri={URL.avatar}/>
+        </Row>
+        <Row>
+          <Avatar sourceUri=""/>
+          <Avatar sourceUri="" size="md"/>
+          <Avatar sourceUri="" size="sm"/>
+          <Avatar sourceUri={URL.broken} showFallback={true} fallbackIconName="general.star" size="sm"/>
+        </Row>
+      </Group>
+      <Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading spinner shows until all images successfully load. Fallback condition and icon are optionally configurable.">
+        <Row>
+          <AvatarGroup sourceUris={[URL.broken]}/>
+          <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]}/>
+          <AvatarGroup sourceUris={[URL.avatar]}/>
+          <AvatarGroup sourceUris={URL.two_avatars}/>
+          <AvatarGroup sourceUris={URL.three_avatars}/>
+          <AvatarGroup sourceUris={URL.four_avatars}/>
+        </Row>
+        <Row>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="general.person"/>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="people.noTextMessage"/>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="general.star" size="md"/>
+          <AvatarGroup sourceUris={[]} showFallback={true} fallbackIconName="general.heart" size="sm"/>
+        </Row>
+      </Group>
+      <Group title="IconAvatar" description="Renders a FontAwesome icon centered on a gradient background. Used by ConversationAvatar for icon-type custom avatars, and reusable in the avatar picker UI.">
+        <Row>
+          <IconAvatar iconKey="church" color="warm-sunset" size="lg"/>
+          <IconAvatar iconKey="guitar" color="cosmic" size="lg"/>
+          <IconAvatar iconKey="music" color="iris" size="md"/>
+          <IconAvatar iconKey="dove" color="rose-teal" size="sm"/>
+          <IconAvatar iconKey="cross" color="gold" size="xs"/>
+        </Row>
+        <Row>
+          <IconAvatar iconKey="church" color="garden" size="lg"/>
+          <IconAvatar iconKey="church" color="twilight" size="lg"/>
+          <IconAvatar iconKey="church" color="amethyst" size="lg"/>
+          <IconAvatar iconKey="church" color="rainbow" size="lg"/>
+        </Row>
+      </Group>
+      <Group title="EmojiAvatar" description="Renders an emoji centered on a gradient background. Used by ConversationAvatar for emoji-type custom avatars.">
+        <Row>
+          <EmojiAvatar emoji="🎉" color="warm-sunset" size="lg"/>
+          <EmojiAvatar emoji="🔥" color="cosmic" size="lg"/>
+          <EmojiAvatar emoji="💬" color="iris" size="md"/>
+          <EmojiAvatar emoji="⭐" color="gold" size="sm"/>
+          <EmojiAvatar emoji="🎵" color="navy-purple" size="xs"/>
+        </Row>
+      </Group>
+      <Group title="ConversationAvatar" description="Smart avatar that resolves a conversation's custom avatar (image, icon, or emoji) or falls back to the member AvatarGroup. Takes a conversation object and delegates to IconAvatar, EmojiAvatar, or AvatarGroup.">
+        <Row>
+          <ConversationAvatar conversation={{
+            customAvatarType: 'icon',
+            customAvatarKey: 'church',
+            customAvatarColor: 'warm-sunset',
+        }}/>
+          <ConversationAvatar conversation={{
+            customAvatarType: 'emoji',
+            customAvatarKey: '🎉',
+            customAvatarColor: 'cosmic',
+        }}/>
+          <ConversationAvatar conversation={{
+            customAvatarType: 'image',
+            customAvatarImageUrl: URL.avatar,
+        }}/>
+          <ConversationAvatar conversation={{
+            previewAvatarUrls: URL.two_avatars,
+        }}/>
+          <ConversationAvatar conversation={{}} fallbackIconName="people.noTextMessage"/>
+        </Row>
+      </Group>
+      <Group title="Icon" description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.">
+        <Row>
+          {/* @ts-expect-error - Testing missing icon fallback */}
+          <Icon name="missingIcon" size={20}/>
+          <Icon name="general.textMessage" size={20}/>
+          <Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
+          <Icon name="churchCenter.sort" style={styles.icon}/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function FormControlsSection({ isLast }) {
     const [switchOn, setSwitchOn] = useState(true);
     const [switchOff, setSwitchOff] = useState(false);
-    return (_jsx(CollapsableSection, { title: "Form Controls", isLast: isLast, children: _jsx(Group, { title: "Switch", description: "Use to toggle a boolean value for some sort of contained setting. (ie. Muting a conversation) This is a light wrapper that takes into account themed colors.", children: _jsxs(Row, { children: [_jsx(Switch, { value: switchOn, onValueChange: value => setSwitchOn(value) }), _jsx(Switch, { value: switchOff, onValueChange: value => setSwitchOff(value) }), _jsx(Switch, { value: true, disabled: true }), _jsx(Switch, { value: false, disabled: true })] }) }) }));
+    return (<CollapsableSection title="Form Controls" isLast={isLast}>
+      <Group title="Switch" description="Use to toggle a boolean value for some sort of contained setting. (ie. Muting a conversation) This is a light wrapper that takes into account themed colors.">
+        <Row>
+          <Switch value={switchOn} onValueChange={value => setSwitchOn(value)}/>
+          <Switch value={switchOff} onValueChange={value => setSwitchOff(value)}/>
+          <Switch value={true} disabled/>
+          <Switch value={false} disabled/>
+        </Row>
+      </Group>
+    </CollapsableSection>);
 }
 function StatusComponentsSection({ isLast }) {
-    return (_jsxs(CollapsableSection, { title: "Status components", isLast: isLast, children: [_jsxs(Group, { title: "Badge", description: "Badge that can convey a status and show an icon. It also supports a meta label and product logo for the conversation list and conversation header. Target products can change colors and hide the logo via theming.", children: [_jsxs(Row, { children: [_jsx(Badge, { label: "Neutral", appearance: "neutral" }), _jsx(Badge, { label: "Error", appearance: "error" }), _jsx(Badge, { label: "Info", appearance: "info" }), _jsx(Badge, { label: "Success", appearance: "success" }), _jsx(Badge, { label: "Warning", appearance: "warning" })] }), _jsxs(Row, { children: [_jsx(Badge, { label: "Neutral", appearance: "neutral", iconName: "general.star" }), _jsx(Badge, { label: "Error", appearance: "error", iconName: "general.exclamationTriangle" }), _jsx(Badge, { label: "Info", appearance: "info", iconName: "general.outlinedInfoCircle" }), _jsx(Badge, { label: "Success", appearance: "success", iconName: "general.check" }), _jsx(Badge, { label: "Warning", appearance: "warning", iconName: "general.shieldExclamation" })] }), _jsxs(Row, { children: [_jsx(Badge, { variant: "meta", productLogoName: "groups", label: "Group", metaLabel: "Worlds longest group name that will probably overflow if it gets very much longer" }), _jsx(Badge, { variant: "meta", productLogoName: "groups", label: "Group", metaLabel: "Young adults" }), _jsx(Badge, { variant: "meta", productLogoName: "services", label: "Plan", metaLabel: "June 19, 2025" }), _jsx(Badge, { variant: "meta", productLogoName: "services", label: "Team" })] }), _jsxs(Row, { children: [_jsx(Badge, { variant: "metaSubtle", productLogoName: "groups", label: "Group", metaLabel: "Worlds longest group name that will probably overflow if it gets very much longer" }), _jsx(Badge, { variant: "metaSubtle", productLogoName: "groups", label: "Group", metaLabel: "Young adults" }), _jsx(Badge, { variant: "metaSubtle", productLogoName: "services", label: "Plan", metaLabel: "June 19, 2025" }), _jsx(Badge, { variant: "metaSubtle", productLogoName: "services", label: "Team" })] })] }), _jsx(Group, { title: "Banner", description: "Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming.", children: _jsxs(Column, { children: [_jsx(Banner, { appearance: "neutral", showIcon: false, description: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." }), _jsx(Banner, { appearance: "info", heading: "Banner heading", description: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." }), _jsx(Banner, { appearance: "success", heading: "Banner heading", description: _jsxs(BannerPrimitive.Text, { children: ["Et sint Quis non excepturi", ' ', _jsx(BannerPrimitive.Link, { onPress: buttonPress, children: "enim et conseq atur porro est" }), ' ', "galisum labore ea volupt."] }) }), _jsx(Banner, { appearance: "warning", iconName: "general.shieldExclamation", heading: "13 members under age 13", description: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." }), _jsx(Banner, { appearance: "error", heading: "Banner heading", description: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." })] }) }), _jsx(Group, { title: "BannerCollapsible", description: "Same as `Banner` but takes children that can be hidden/revealed on a tap.", children: _jsxs(Column, { children: [_jsx(BannerCollapsible, { appearance: "neutral", showIcon: false, heading: "Banner heading", children: _jsx(BannerPrimitive.Text, { children: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." }) }), _jsx(BannerCollapsible, { appearance: "info", heading: "Banner heading", children: _jsx(BannerPrimitive.Text, { children: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt." }) }), _jsx(BannerCollapsible, { appearance: "success", heading: "Banner heading", children: _jsxs(BannerPrimitive.Text, { children: ["Et sint Quis non excepturi", ' ', _jsx(BannerPrimitive.Link, { onPress: buttonPress, children: "enim et conseq atur porro est" }), ' ', "galisum labore ea volupt."] }) }), _jsx(BannerCollapsible, { appearance: "warning", iconName: "general.shieldExclamation", heading: "13 members under age 13", description: "Et sint Quis non excepturi enim et conse.", children: _jsx(BannerPrimitive.Text, { children: "More hdden content that can be revealed on a tap. Lorem ipsum dolor sit amet, consectetur" }) }), _jsx(BannerCollapsible, { appearance: "error", heading: "Banner heading", description: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.", children: _jsx(BannerPrimitive.Text, { children: "Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et sint Quis non excepturi enim et ." }) })] }) })] }));
+    return (<CollapsableSection title="Status components" isLast={isLast}>
+      <Group title="Badge" description="Badge that can convey a status and show an icon. It also supports a meta label and product logo for the conversation list and conversation header. Target products can change colors and hide the logo via theming.">
+        <Row>
+          <Badge label="Neutral" appearance="neutral"/>
+          <Badge label="Error" appearance="error"/>
+          <Badge label="Info" appearance="info"/>
+          <Badge label="Success" appearance="success"/>
+          <Badge label="Warning" appearance="warning"/>
+        </Row>
+        <Row>
+          <Badge label="Neutral" appearance="neutral" iconName="general.star"/>
+          <Badge label="Error" appearance="error" iconName="general.exclamationTriangle"/>
+          <Badge label="Info" appearance="info" iconName="general.outlinedInfoCircle"/>
+          <Badge label="Success" appearance="success" iconName="general.check"/>
+          <Badge label="Warning" appearance="warning" iconName="general.shieldExclamation"/>
+        </Row>
+        <Row>
+          <Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
+          <Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Young adults"/>
+          <Badge variant="meta" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
+          <Badge variant="meta" productLogoName="services" label="Team"/>
+        </Row>
+        <Row>
+          <Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
+          <Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Young adults"/>
+          <Badge variant="metaSubtle" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
+          <Badge variant="metaSubtle" productLogoName="services" label="Team"/>
+        </Row>
+      </Group>
+      <Group title="Banner" description="Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming.">
+        <Column>
+          <Banner appearance="neutral" showIcon={false} description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="info" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="success" heading="Banner heading" description={<BannerPrimitive.Text>
+                Et sint Quis non excepturi{' '}
+                <BannerPrimitive.Link onPress={buttonPress}>
+                  enim et conseq atur porro est
+                </BannerPrimitive.Link>{' '}
+                galisum labore ea volupt.
+              </BannerPrimitive.Text>}/>
+          <Banner appearance="warning" iconName="general.shieldExclamation" heading="13 members under age 13" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+        </Column>
+      </Group>
+      <Group title="BannerCollapsible" description="Same as `Banner` but takes children that can be hidden/revealed on a tap.">
+        <Column>
+          <BannerCollapsible appearance="neutral" showIcon={false} heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="info" heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="success" heading="Banner heading">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi{' '}
+              <BannerPrimitive.Link onPress={buttonPress}>
+                enim et conseq atur porro est
+              </BannerPrimitive.Link>{' '}
+              galisum labore ea volupt.
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading="13 members under age 13" description="Et sint Quis non excepturi enim et conse.">
+            <BannerPrimitive.Text>
+              More hdden content that can be revealed on a tap. Lorem ipsum dolor sit amet,
+              consectetur
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+          <BannerCollapsible appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt.">
+            <BannerPrimitive.Text>
+              Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et
+              sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt. Et
+              sint Quis non excepturi enim et .
+            </BannerPrimitive.Text>
+          </BannerCollapsible>
+        </Column>
+      </Group>
+    </CollapsableSection>);
 }
 const FA_ICONS = [
     {
@@ -164,7 +636,18 @@ const FA_ICONS = [
 ];
 function FontAwesomeIconsSection({ isLast }) {
     const { colors } = useTheme();
-    return (_jsx(CollapsableSection, { title: "FontAwesome Pro Icons", isLast: isLast, children: FA_ICONS.map(({ category, icons }) => (_jsx(Group, { title: category, children: _jsx(View, { style: faStyles.grid, children: icons.map(name => (_jsxs(View, { style: faStyles.cell, children: [_jsx(FontAwesomeIcon, { icon: ['fas', name], size: 20, color: colors.iconColorDefaultSecondary }), _jsx(Text, { variant: "footnote", numberOfLines: 1, children: name })] }, name))) }) }, category))) }));
+    return (<CollapsableSection title="FontAwesome Pro Icons" isLast={isLast}>
+      {FA_ICONS.map(({ category, icons }) => (<Group key={category} title={category}>
+          <View style={faStyles.grid}>
+            {icons.map(name => (<View key={name} style={faStyles.cell}>
+                <FontAwesomeIcon icon={['fas', name]} size={20} color={colors.iconColorDefaultSecondary}/>
+                <Text variant="footnote" numberOfLines={1}>
+                  {name}
+                </Text>
+              </View>))}
+          </View>
+        </Group>))}
+    </CollapsableSection>);
 }
 const faStyles = StyleSheet.create({
     grid: {
@@ -179,44 +662,84 @@ const faStyles = StyleSheet.create({
     },
 });
 function MiscComponentsSection({ isLast }) {
-    return (_jsxs(CollapsableSection, { title: "Misc components", isLast: isLast, children: [_jsx(Group, { title: "Person", description: "Takes a person object (`MemberResource` type) and displays an avatar, name, and badges. If person is a child we show a special badge and faded styles. Implomentation is based on a similar Chat Web component.", children: _jsxs(Column, { children: [_jsx(Person, { person: personAdult }), _jsx(Person, { person: personChild })] }) }), _jsx(Group, { title: "BlankState", description: "Compound component with primitives to display imagary, heading, title, and a button.", children: _jsx(Column, { children: _jsxs(BlankState.Root, { children: [_jsx(BlankState.Imagery, { name: "general.outlinedTextMessage" }), _jsxs(BlankState.Content, { children: [_jsx(BlankState.Heading, { children: "No messages" }), _jsx(BlankState.Text, { children: "Conversation is hidden from everyone until you send a message." })] }), _jsx(BlankState.Button, { onPress: buttonPress, title: "Go back", accessibilityHint: "Navigates back to the conversations list", accessibilityRole: "link" })] }) }) })] }));
+    return (<CollapsableSection title="Misc components" isLast={isLast}>
+      <Group title="Person" description="Takes a person object (`MemberResource` type) and displays an avatar, name, and badges. If person is a child we show a special badge and faded styles. Implomentation is based on a similar Chat Web component.">
+        <Column>
+          <Person person={personAdult}/>
+          <Person person={personChild}/>
+        </Column>
+      </Group>
+      <Group title="BlankState" description="Compound component with primitives to display imagary, heading, title, and a button.">
+        <Column>
+          <BlankState.Root>
+            <BlankState.Imagery name="general.outlinedTextMessage"/>
+            <BlankState.Content>
+              <BlankState.Heading>No messages</BlankState.Heading>
+              <BlankState.Text>
+                Conversation is hidden from everyone until you send a message.
+              </BlankState.Text>
+            </BlankState.Content>
+            <BlankState.Button onPress={buttonPress} title="Go back" accessibilityHint="Navigates back to the conversations list" accessibilityRole="link"/>
+          </BlankState.Root>
+        </Column>
+      </Group>
+    </CollapsableSection>);
 }
 function CollapsableSection({ children, title, isLast = false }) {
     const styles = useStyles();
     const { colors } = useTheme();
     const [collapsed, setCollapsed] = useState(true);
-    return (_jsxs(View, { style: [styles.section, styles.sectionBorderTop, isLast && styles.sectionBorderBottom], children: [_jsxs(Pressable, { onPress: () => setCollapsed(!collapsed), style: ({ pressed }) => [styles.sectionHeader, pressed && platformPressedOpacityStyle], android_ripple: { color: colors.androidRippleNeutral, borderless: false, foreground: true }, children: [_jsx(Heading, { children: title }), _jsx(Icon, { name: collapsed ? 'general.plus' : 'general.minus', size: 16 })] }), !collapsed && _jsx(View, { style: styles.sectionChildren, children: children })] }));
+    return (<View style={[styles.section, styles.sectionBorderTop, isLast && styles.sectionBorderBottom]}>
+      <Pressable onPress={() => setCollapsed(!collapsed)} style={({ pressed }) => [styles.sectionHeader, pressed && platformPressedOpacityStyle]} android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}>
+        <Heading>{title}</Heading>
+        <Icon name={collapsed ? 'general.plus' : 'general.minus'} size={16}/>
+      </Pressable>
+      {!collapsed && <View style={styles.sectionChildren}>{children}</View>}
+    </View>);
 }
 function Group({ title, description, children }) {
     const styles = useStyles();
-    return (_jsxs(View, { style: styles.group, children: [_jsxs(View, { style: styles.groupHeading, children: [_jsx(Heading, { variant: "h3", children: title }), description && _jsx(Text, { variant: "tertiary", children: description })] }), children] }));
+    return (<View style={styles.group}>
+      <View style={styles.groupHeading}>
+        <Heading variant="h3">{title}</Heading>
+        {description && <Text variant="tertiary">{description}</Text>}
+      </View>
+      {children}
+    </View>);
 }
 function Row({ children, style }) {
     const styles = useStyles();
-    return _jsx(View, { style: [styles.row, style], children: children });
+    return <View style={[styles.row, style]}>{children}</View>;
 }
 function Column({ children, style }) {
     const styles = useStyles();
-    return _jsx(View, { style: [styles.column, style], children: children });
+    return <View style={[styles.column, style]}>{children}</View>;
 }
 function TextGroup({ children }) {
     const styles = useStyles();
-    return _jsx(View, { style: styles.textGroup, children: children });
+    return <View style={styles.textGroup}>{children}</View>;
 }
 function TextRow({ children, style }) {
     const styles = useStyles();
-    return _jsx(View, { style: [styles.textRow, style], children: children });
+    return <View style={[styles.textRow, style]}>{children}</View>;
 }
 function TextListItem({ label, children }) {
     const styles = useStyles();
-    return (_jsxs(Text, { variant: "tertiary", children: [_jsx(Text, { variant: "tertiary", style: styles.mediumWeight, children: label }), ' ', children] }));
+    return (<Text variant="tertiary">
+      <Text variant="tertiary" style={styles.mediumWeight}>
+        {label}
+      </Text>{' '}
+      {children}
+    </Text>);
 }
 function HapticButton({ title, onPress }) {
     const styles = useStyles();
-    return (_jsx(Pressable, { onPress: onPress, style: ({ pressed }) => ({
+    return (<Pressable onPress={onPress} style={({ pressed }) => ({
             ...styles.hapticButton,
             ...{ opacity: pressed ? 0.5 : 1 },
-        }), children: _jsx(Text, { style: styles.hapticButtonText, children: title }) }));
+        })}>
+      <Text style={styles.hapticButtonText}>{title}</Text>
+    </Pressable>);
 }
 // =================================
 // ====== Styles ===================