@planningcenter/chat-react-native 1.6.1 → 1.6.2-rc.1

package/build/components/display/icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import type { XmlProps } from 'react-native-svg';
 type IconStyle = ViewStyle & {
     fontSize?: number;
@@ -20,11 +20,15 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
      * Specifies the maximum size a font can reach when allowFontScaling is enabled.
      */
     maxFontSizeMultiplier?: number;
+    /**
+     * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.
+     */
+    color?: ColorValue;
     /**
      * Icon can handle ViewStyle, color, and fontSize.
      */
     style?: StyleProp<IconStyle>;
 }
-export declare function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): React.JSX.Element;
+export declare function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=icon.d.ts.map

package/build/components/display/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA4BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}

package/build/components/display/icon.js

@@ -9,11 +9,13 @@ import * as people from '@planningcenter/icons/paths/people';
 import * as churchCenter from '@planningcenter/icons/paths/church-center';
 import * as logomark from '@planningcenter/icons/paths/logomark';
 import * as brand from '@planningcenter/icons/paths/brand';
+import * as api from '@planningcenter/icons/paths/api';
 // =================================
 // ====== Constants ================
 // =================================
 const FALLBACK_SIZE = 12;
 const ICONS = {
+    api,
     calendar,
     people,
     churchCenter,
@@ -22,11 +24,11 @@ const ICONS = {
     logomark,
     brand,
 };
-export function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }) {
+export function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }) {
     const flattenStyles = StyleSheet.flatten(style);
     const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier);
     const path = getIconPath(name);
-    const styles = useStyles({ iconSize });
+    const styles = useStyles({ color, iconSize });
     if (!path) {
         console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`);
         return <View style={styles.noIcon}/>;
@@ -51,7 +53,7 @@ const getIconPath = (name) => {
 // =================================
 // ====== Styles ===================
 // =================================
-const useStyles = ({ iconSize }) => {
+const useStyles = ({ color, iconSize }) => {
     const { colors } = useTheme();
     return StyleSheet.create({
         noIcon: {
@@ -61,7 +63,7 @@ const useStyles = ({ iconSize }) => {
             borderRadius: iconSize / 2,
         },
         icon: {
-            color: colors.iconColorDefaultPrimary,
+            color: color || colors.iconColorDefaultPrimary,
         },
     });
 };

package/build/components/display/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as brand from '@planningcenter/icons/paths/brand'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n  calendar,\n  people,\n  churchCenter,\n  groups,\n  general,\n  logomark,\n  brand,\n} as const\n\ntype IconStyle = ViewStyle & {\n  fontSize?: number\n  color?: string\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n  /**\n   * Made up of the set.iconName.\n   * Example: \"general.textMessage\"\n   */\n  name: string\n  /**\n   * This sets a static size for the icon.\n   * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n   */\n  size?: number\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Icon can handle ViewStyle, color, and fontSize.\n   */\n  style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n  name,\n  size,\n  style,\n  accessibilityElementsHidden,\n  accessibilityLabel,\n  maxFontSizeMultiplier,\n  ...props\n}: IconProps) {\n  const flattenStyles = StyleSheet.flatten(style)\n  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n  const path = getIconPath(name)\n  const styles = useStyles({ iconSize })\n\n  if (!path) {\n    console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n    return <View style={styles.noIcon} />\n  }\n\n  return (\n    <SvgXml\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityLabel={accessibilityLabel}\n      xml={`\n          <svg viewBox=\"0 0 16 16\">\n            <path d=\"${path}\" fill=\"currentColor\" />\n          </svg>\n        `}\n      height={iconSize}\n      width={iconSize}\n      style={{ ...styles.icon, ...flattenStyles }}\n      {...props}\n    />\n  )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n  const fontSize = style?.fontSize\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  if (fontSize) return fontSize * fontScale\n\n  return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: string): string => {\n  const [setName, iconName] = name.split('.')\n\n  return ICONS[setName]?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ iconSize }: { iconSize: number }) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    noIcon: {\n      backgroundColor: colors.iconColorDefaultDisabled,\n      width: iconSize,\n      height: iconSize,\n      borderRadius: iconSize / 2,\n    },\n    icon: {\n      color: colors.iconColorDefaultPrimary,\n    },\n  })\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as brand from '@planningcenter/icons/paths/brand'\nimport * as api from '@planningcenter/icons/paths/api'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n  api,\n  calendar,\n  people,\n  churchCenter,\n  groups,\n  general,\n  logomark,\n  brand,\n} as const\n\ntype IconStyle = ViewStyle & {\n  fontSize?: number\n  color?: string\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n  /**\n   * Made up of the set.iconName.\n   * Example: \"general.textMessage\"\n   */\n  name: string\n  /**\n   * This sets a static size for the icon.\n   * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n   */\n  size?: number\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.\n   */\n  color?: ColorValue\n  /**\n   * Icon can handle ViewStyle, color, and fontSize.\n   */\n  style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n  color,\n  name,\n  size,\n  style,\n  accessibilityElementsHidden,\n  accessibilityLabel,\n  maxFontSizeMultiplier,\n  ...props\n}: IconProps) {\n  const flattenStyles = StyleSheet.flatten(style)\n  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n  const path = getIconPath(name)\n  const styles = useStyles({ color, iconSize })\n\n  if (!path) {\n    console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n    return <View style={styles.noIcon} />\n  }\n\n  return (\n    <SvgXml\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityLabel={accessibilityLabel}\n      xml={`\n          <svg viewBox=\"0 0 16 16\">\n            <path d=\"${path}\" fill=\"currentColor\" />\n          </svg>\n        `}\n      height={iconSize}\n      width={iconSize}\n      style={{ ...styles.icon, ...flattenStyles }}\n      {...props}\n    />\n  )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n  const fontSize = style?.fontSize\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  if (fontSize) return fontSize * fontScale\n\n  return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: string): string => {\n  const [setName, iconName] = name.split('.')\n\n  return ICONS[setName]?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    noIcon: {\n      backgroundColor: colors.iconColorDefaultDisabled,\n      width: iconSize,\n      height: iconSize,\n      borderRadius: iconSize / 2,\n    },\n    icon: {\n      color: color || colors.iconColorDefaultPrimary,\n    },\n  })\n}\n"]}

package/build/screens/design_system_screen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function DesignSystemScreen(): React.JSX.Element;
+//# sourceMappingURL=design_system_screen.d.ts.map

package/build/screens/design_system_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA6CvC,wBAAgB,kBAAkB,sBAmkBjC"}

package/build/screens/{display.js → design_system_screen.js}

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
 import { Avatar, AvatarGroup, Button, Heading, Icon, IconButton, Image, Spinner, Text, TextButton, TextInlineButton, } from '../components/display';
-import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils';
+import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
 const URL = {
     image: 'https://picsum.photos/seed/picsum/200',
     broken: 'https://broken.url',
@@ -22,15 +22,16 @@ const URL = {
     ],
 };
 const buttonPress = () => Alert.alert('Button clicked');
-export function DisplayScreen() {
+export function DesignSystemScreen() {
     const styles = useStyles();
+    const { colors } = useTheme();
     return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
       <CollapsableSection title="Molecules">
         <Row>
           <Text>🚧 Coming soon! 🚧</Text>
         </Row>
       </CollapsableSection>
-      <CollapsableSection title="Atoms" isLast>
+      <CollapsableSection title="Atoms">
         <Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
           <Row style={styles.spinnerContainer}>
             <Spinner size={24}/>
@@ -69,6 +70,7 @@ export function DisplayScreen() {
           <Row>
             <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>
@@ -258,6 +260,103 @@ export function DisplayScreen() {
           </Row>
         </Group>
       </CollapsableSection>
+      <CollapsableSection title="Theme" 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. 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/mobile/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>
+      {/* TODO: Enable & update when we install @planningcenter/tapestry */}
+      {/* <CollapsableSection title="Tokens" isLast>
+          <TextGroup>
+            <TextRow>
+              <Heading variant="h3">What are they?</Heading>
+              <Text>
+                Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
+                (e.g. colors, spacing amounts, and font weights.)
+              </Text>
+            </TextRow>
+            <TextRow>
+              <Heading variant="h3">Where do they come from?</Heading>
+              <Text>
+                Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
+                at this time the package only support light mode colors, so Chat uses a workaround.
+              </Text>
+              <Text>
+                Color-based tokens are infused into our theming system with two local files…
+              </Text>
+              <TextListItem label="1. `src/vendor/tapestry/tokens`:">
+                Primitive color values are stored* here. Primitives capture light or dark mode values,
+                but don't take into account the devices's colors scheme.
+              </TextListItem>
+              <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
+                Alias tokens reference the primitive color values token file* in light and dark mode
+                specfic objects. Our theming system then selects the right color to use based on the
+                device's color scheme.
+              </TextListItem>
+              <Text variant="footnote">
+                *If available, reference the color from the Tapestry package instead.
+              </Text>
+            </TextRow>
+            <TextRow>
+              <Heading variant="h3">How do we use them?</Heading>
+              <Text>There are two places to reference tokens at this time…</Text>
+              <TextListItem label="• Color tokens:">
+                Reference them from our internal `useTheme` hook to ensure the correct light or dark
+                mode color token is used.
+              </TextListItem>
+              <TextListItem label="• All other tokens:">
+                Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
+                string with the token's name. This function provides Typescript support and maps to
+                the token's raw CSS value. There is another function called `token`, but it maps to
+                CSS custom properties which React Native doesn't support.
+              </TextListItem>
+            </TextRow>
+          </TextGroup>
+        </CollapsableSection> */}
     </ScrollView>);
 }
 function CollapsableSection({ children, title, isLast = false }) {
@@ -286,6 +385,23 @@ function Row({ children, style }) {
     const styles = useStyles();
     return <View style={[styles.row, style]}>{children}</View>;
 }
+function TextGroup({ children }) {
+    const styles = useStyles();
+    return <View style={styles.textGroup}>{children}</View>;
+}
+function TextRow({ children, style }) {
+    const styles = useStyles();
+    return <View style={[styles.textRow, style]}>{children}</View>;
+}
+function TextListItem({ label, children }) {
+    const styles = useStyles();
+    return (<Text variant="tertiary">
+      <Text variant="tertiary" style={styles.mediumWeight}>
+        {label}
+      </Text>{' '}
+      {children}
+    </Text>);
+}
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
@@ -324,6 +440,15 @@ const useStyles = () => {
             justifyContent: 'center',
             flexWrap: 'wrap',
         },
+        textRow: {
+            gap: space(1.5),
+        },
+        textGroup: {
+            gap: space(2.5),
+        },
+        mediumWeight: {
+            fontWeight: platformFontWeightMedium,
+        },
         alignRowLeft: {
             justifyContent: 'flex-start',
         },
@@ -349,4 +474,4 @@ const useStyles = () => {
         },
     });
 };
-//# sourceMappingURL=display.js.map
+//# sourceMappingURL=design_system_screen.js.map

package/build/screens/design_system_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design_system_screen.js","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native'\nimport type { ViewStyle } from 'react-native'\nimport { useTheme } from '../hooks'\nimport {\n  Avatar,\n  AvatarGroup,\n  Button,\n  Heading,\n  Icon,\n  IconButton,\n  Image,\n  Spinner,\n  Text,\n  TextButton,\n  TextInlineButton,\n} from '../components/display'\nimport {\n  space,\n  MAX_FONT_SIZE_MULTIPLIER,\n  platformPressedOpacityStyle,\n  platformFontWeightMedium,\n} from '../utils'\n\nconst URL = {\n  image: 'https://picsum.photos/seed/picsum/200',\n  broken: 'https://broken.url',\n  avatar: 'https://i.pravatar.cc/200?img=22',\n  avatar_fallback: 'https://avatars.planningcenteronline.com/uploads/initials/PR.png',\n  two_avatars: ['https://i.pravatar.cc/200?img=22', 'https://i.pravatar.cc/200?img=23'],\n  three_avatars: [\n    'https://i.pravatar.cc/200?img=22',\n    'https://i.pravatar.cc/200?img=23',\n    'https://i.pravatar.cc/200?img=24',\n  ],\n  four_avatars: [\n    'https://i.pravatar.cc/200?img=30',\n    'https://i.pravatar.cc/200?img=29',\n    'https://i.pravatar.cc/200?img=28',\n    'https://i.pravatar.cc/200?img=27',\n  ],\n}\n\nconst buttonPress = () => Alert.alert('Button clicked')\n\nexport function DesignSystemScreen() {\n  const styles = useStyles()\n  const { colors } = useTheme()\n\n  return (\n    <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>\n      <CollapsableSection title=\"Molecules\">\n        <Row>\n          <Text>🚧 Coming soon! 🚧</Text>\n        </Row>\n      </CollapsableSection>\n      <CollapsableSection title=\"Atoms\">\n        <Group\n          title=\"Spinner\"\n          description=\"Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.\"\n        >\n          <Row style={styles.spinnerContainer}>\n            <Spinner size={24} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Image\"\n          description=\"Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.\"\n        >\n          <Row>\n            <Image source={{ uri: URL.broken }} style={styles.image} alt=\"Mountain sunrise\" />\n            <Image source={{ uri: URL.image }} style={styles.image} alt=\"Mountain sunrise\" />\n            <Image source={{ uri: URL.image }} style={styles.image} alt=\"\" />\n          </Row>\n        </Group>\n        <Group\n          title=\"Avatar\"\n          description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline \"presence\" indicator.'\n        >\n          <Row>\n            <Avatar sourceUri={URL.broken} />\n            <Avatar size=\"md\" sourceUri={URL.avatar_fallback} />\n            <Avatar sourceUri={URL.avatar} />\n          </Row>\n          <Row>\n            <Avatar presence=\"offline\" sourceUri={URL.broken} />\n            <Avatar presence=\"online\" size=\"md\" sourceUri={URL.avatar_fallback} />\n            <Avatar presence=\"offline\" sourceUri={URL.avatar} />\n          </Row>\n        </Group>\n        <Group\n          title=\"AvatarGroup\"\n          description=\"Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.\"\n        >\n          <Row>\n            <AvatarGroup sourceUris={[URL.broken]} />\n            <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />\n            <AvatarGroup sourceUris={[URL.avatar]} />\n            <AvatarGroup sourceUris={URL.two_avatars} />\n            <AvatarGroup sourceUris={URL.three_avatars} />\n            <AvatarGroup sourceUris={URL.four_avatars} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Icon\"\n          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.\"\n        >\n          <Row>\n            <Icon name=\"missingIcon\" size={20} />\n            <Icon name=\"general.textMessage\" size={20} />\n            <Icon name=\"general.bell\" size={20} color={colors.needsDesignPass} />\n            <Icon name=\"churchCenter.sort\" style={styles.icon} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Button\"\n          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.\"\n        >\n          <Row>\n            <Button onPress={buttonPress} title=\"Default\" size=\"sm\" />\n            <Button onPress={buttonPress} title=\"Default\" size=\"md\" />\n            <Button onPress={buttonPress} title=\"Danger\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button disabled onPress={buttonPress} title=\"Disabled\" size=\"sm\" />\n            <Button disabled onPress={buttonPress} title=\"Disabled\" size=\"md\" />\n            <Button disabled onPress={buttonPress} title=\"Disabled\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button loading onPress={buttonPress} title=\"Default\" size=\"sm\" />\n            <Button loading onPress={buttonPress} title=\"Default\" size=\"md\" />\n            <Button loading onPress={buttonPress} title=\"Danger\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button onPress={buttonPress} title=\"Default\" size=\"sm\" variant=\"outline\" />\n            <Button onPress={buttonPress} title=\"Default\" size=\"md\" variant=\"outline\" />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n            />\n          </Row>\n          <Row>\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n        </Group>\n        <Group\n          title=\"IconButton\"\n          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.\"\n        >\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n            />\n          </Row>\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n              disabled\n            />\n          </Row>\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n              loading\n            />\n          </Row>\n        </Group>\n        <Group\n          title=\"TextButton\"\n          description=\"Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.\"\n        >\n          <Row>\n            <TextButton onPress={buttonPress}>Default</TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\">\n              Default\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\">\n              Default\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\">\n              Default\n            </TextButton>\n          </Row>\n          <Row>\n            <TextButton onPress={buttonPress} appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\" appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\" appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\" appearance=\"danger\">\n              Danger\n            </TextButton>\n          </Row>\n          <Row>\n            <TextButton onPress={buttonPress} disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\" disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\" disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\" disabled>\n              Disabled\n            </TextButton>\n          </Row>\n        </Group>\n        <Group\n          title=\"TextInlineButton\"\n          description=\"Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.\"\n        >\n          <Row style={styles.alignRowLeft}>\n            <Text>\n              This text is next to{' '}\n              <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem\n              ipsum dolor{' '}\n              <TextInlineButton onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"secondary\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"tertiary\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"footnote\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n          </Row>\n        </Group>\n        <Group\n          title=\"Heading\"\n          description=\"Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.\"\n        >\n          <Row>\n            <Heading>Heading 1</Heading>\n            <Heading variant=\"h2\">Heading 2</Heading>\n            <Heading variant=\"h3\">Heading 3</Heading>\n            <Heading variant=\"h4\">Heading 4</Heading>\n          </Row>\n        </Group>\n        <Group title=\"Text\" description=\"Use for body copy and supporting text.\">\n          <Row>\n            <Text>Plain text</Text>\n            <Text variant=\"secondary\">Secondary</Text>\n            <Text variant=\"tertiary\">Tertiary</Text>\n            <Text variant=\"footnote\">Footnote</Text>\n          </Row>\n        </Group>\n      </CollapsableSection>\n      <CollapsableSection title=\"Theme\" isLast>\n        <TextGroup>\n          <Text>There are four main parts to our theming system…</Text>\n          <TextRow>\n            <Heading variant=\"h3\">Default theme</Heading>\n            <Text>\n              Start at `src/utils/theme` when adding new theme values. The file has more\n              instructions and examples.\n            </Text>\n            <Text>At a high level, it provides…</Text>\n            <TextListItem label=\"1.\">\n              Access to consuming app targets of what theme values that they can be customized.\n            </TextListItem>\n            <TextListItem label=\"2.\">\n              Fallback values for our components to use if the values weren't overriden.\n            </TextListItem>\n          </TextRow>\n          <TextRow>\n            <Heading variant=\"h3\">Customizing the theme</Heading>\n            <Text>\n              Apps can override any default theme value by passing a `theme` object to our\n              `ChatProvider` that holds a `theme` and a `colorScheme`.\n            </Text>\n            <Text>\n              Currently types can be enforced by setting the parent theme object to\n              `CreateChatThemeProps`.\n            </Text>\n            <Text variant=\"footnote\">\n              Example setup: `apps/mobile/src/context/chat_context_provider.tsx`\n            </Text>\n          </TextRow>\n          <TextRow>\n            <Heading variant=\"h3\">Merged theme</Heading>\n            <Text>\n              In `src/contexts/chat_context.tsx` we merge the default theme and any custom values\n              coming from a product target with the `useCreateChatTheme` hook. It creates a single\n              `ChatTheme` type.\n            </Text>\n          </TextRow>\n          <TextRow>\n            <Heading variant=\"h3\">Using theme values</Heading>\n            <Text>\n              Inside of our own `chat-react-native` components we can access the merged `ChatTheme`\n              object via our own `useTheme` hook.\n            </Text>\n            <Text variant=\"footnote\">Example setup: `src/components/display/button.tsx`</Text>\n          </TextRow>\n        </TextGroup>\n      </CollapsableSection>\n      {/* TODO: Enable & update when we install @planningcenter/tapestry */}\n      {/* <CollapsableSection title=\"Tokens\" isLast>\n        <TextGroup>\n          <TextRow>\n            <Heading variant=\"h3\">What are they?</Heading>\n            <Text>\n              Tokens are UX approved CSS values that we can use to style our UI in a consistent way.\n              (e.g. colors, spacing amounts, and font weights.)\n            </Text>\n          </TextRow>\n          <TextRow>\n            <Heading variant=\"h3\">Where do they come from?</Heading>\n            <Text>\n              Tokens primarily come from our internal `@planningcenter/tapestry` package. However,\n              at this time the package only support light mode colors, so Chat uses a workaround.\n            </Text>\n            <Text>\n              Color-based tokens are infused into our theming system with two local files…\n            </Text>\n            <TextListItem label=\"1. `src/vendor/tapestry/tokens`:\">\n              Primitive color values are stored* here. Primitives capture light or dark mode values,\n              but don't take into account the devices's colors scheme.\n            </TextListItem>\n            <TextListItem label=\"2. `src/vendor/tapestry/alias_tokens_color_map`:\">\n              Alias tokens reference the primitive color values token file* in light and dark mode\n              specfic objects. Our theming system then selects the right color to use based on the\n              device's color scheme.\n            </TextListItem>\n            <Text variant=\"footnote\">\n              *If available, reference the color from the Tapestry package instead.\n            </Text>\n          </TextRow>\n          <TextRow>\n            <Heading variant=\"h3\">How do we use them?</Heading>\n            <Text>There are two places to reference tokens at this time…</Text>\n            <TextListItem label=\"• Color tokens:\">\n              Reference them from our internal `useTheme` hook to ensure the correct light or dark\n              mode color token is used.\n            </TextListItem>\n            <TextListItem label=\"• All other tokens:\">\n              Use the `computedToken` function from `@planningcenter/tapestry` by passing it a\n              string with the token's name. This function provides Typescript support and maps to\n              the token's raw CSS value. There is another function called `token`, but it maps to\n              CSS custom properties which React Native doesn't support.\n            </TextListItem>\n          </TextRow>\n        </TextGroup>\n      </CollapsableSection> */}\n    </ScrollView>\n  )\n}\n\ninterface CollapsableSectionProps {\n  children: React.ReactNode\n  title: string\n  isLast?: boolean\n}\n\nfunction CollapsableSection({ children, title, isLast = false }: CollapsableSectionProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n  const [collapsed, setCollapsed] = useState(true)\n\n  return (\n    <View style={[styles.section, styles.sectionBorderTop, isLast && styles.sectionBorderBottom]}>\n      <Pressable\n        onPress={() => setCollapsed(!collapsed)}\n        style={({ pressed }) => [styles.sectionHeader, pressed && platformPressedOpacityStyle]}\n        android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n      >\n        <Heading>{title}</Heading>\n        <Icon name={collapsed ? 'general.plus' : 'general.minus'} size={16} />\n      </Pressable>\n      {!collapsed && <View style={styles.sectionChildren}>{children}</View>}\n    </View>\n  )\n}\n\ninterface GroupProps {\n  title: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction Group({ title, description, children }: GroupProps) {\n  const styles = useStyles()\n  return (\n    <View style={styles.group}>\n      <View style={styles.groupHeading}>\n        <Heading variant=\"h3\">{title}</Heading>\n        {description && <Text variant=\"footnote\">{description}</Text>}\n      </View>\n      {children}\n    </View>\n  )\n}\n\ninterface RowProps {\n  children: React.ReactNode\n  style?: ViewStyle\n}\n\nfunction Row({ children, style }: RowProps) {\n  const styles = useStyles()\n  return <View style={[styles.row, style]}>{children}</View>\n}\n\nfunction TextGroup({ children }: { children: React.ReactNode }) {\n  const styles = useStyles()\n  return <View style={styles.textGroup}>{children}</View>\n}\n\ninterface TextRowProps {\n  children: React.ReactNode\n  style?: ViewStyle\n}\n\nfunction TextRow({ children, style }: TextRowProps) {\n  const styles = useStyles()\n  return <View style={[styles.textRow, style]}>{children}</View>\n}\n\ninterface TextListItemProps {\n  label: string\n  children: React.ReactNode\n}\n\nfunction TextListItem({ label, children }: TextListItemProps) {\n  const styles = useStyles()\n  return (\n    <Text variant=\"tertiary\">\n      <Text variant=\"tertiary\" style={styles.mediumWeight}>\n        {label}\n      </Text>{' '}\n      {children}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: {\n      flex: 1,\n      backgroundColor: colors.fillColorNeutral100Inverted,\n    },\n    container: {\n      padding: space(3),\n    },\n    listItem: { color: colors.fillColorNeutral020 },\n    section: {\n      gap: space(1),\n      borderColor: colors.fillColorNeutral020,\n    },\n    sectionBorderTop: {\n      borderTopWidth: 1,\n    },\n    sectionBorderBottom: {\n      borderBottomWidth: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      paddingVertical: space(3),\n    },\n    sectionChildren: {\n      paddingBottom: space(3),\n      gap: space(6),\n    },\n    row: {\n      gap: space(2),\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexWrap: 'wrap',\n    },\n    textRow: {\n      gap: space(1.5),\n    },\n    textGroup: {\n      gap: space(2.5),\n    },\n    mediumWeight: {\n      fontWeight: platformFontWeightMedium,\n    },\n    alignRowLeft: {\n      justifyContent: 'flex-start',\n    },\n    group: {\n      gap: space(3),\n    },\n    groupHeading: {\n      gap: space(1),\n    },\n    spinnerContainer: {\n      height: space(2.5),\n    },\n    image: {\n      width: 100,\n      height: 100,\n    },\n    icon: {\n      fontSize: 20,\n      color: colors.iconColorDefaultSecondary,\n    },\n    customIconButtonColor: {\n      color: 'purple',\n    },\n  })\n}\n"]}

package/build/screens/index.d.ts

@@ -1,2 +1,2 @@
-export * from './display';
+export * from './design_system_screen';
 //# sourceMappingURL=index.d.ts.map

package/build/screens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/build/screens/index.js

@@ -1,2 +1,2 @@
-export * from './display';
+export * from './design_system_screen';
 //# sourceMappingURL=index.js.map

package/build/screens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA","sourcesContent":["export * from './display'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './design_system_screen'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.6.1",
+  "version": "1.6.2-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -46,5 +46,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "42d8be96d6f0ab7ac25b1b43c72bec714f3870f1"
+  "gitHead": "a8cf11f82abf54115ee5fbe47bf870074a11b950"
 }

package/src/components/display/icon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import type { StyleProp, ViewStyle } from 'react-native'
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
@@ -11,6 +11,7 @@ import * as people from '@planningcenter/icons/paths/people'
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
 import * as logomark from '@planningcenter/icons/paths/logomark'
 import * as brand from '@planningcenter/icons/paths/brand'
+import * as api from '@planningcenter/icons/paths/api'
 
 // =================================
 // ====== Constants ================
@@ -19,6 +20,7 @@ import * as brand from '@planningcenter/icons/paths/brand'
 const FALLBACK_SIZE = 12
 
 const ICONS = {
+  api,
   calendar,
   people,
   churchCenter,
@@ -52,6 +54,10 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
    * Specifies the maximum size a font can reach when allowFontScaling is enabled.
    */
   maxFontSizeMultiplier?: number
+  /**
+   * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.
+   */
+  color?: ColorValue
   /**
    * Icon can handle ViewStyle, color, and fontSize.
    */
@@ -59,6 +65,7 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
 }
 
 export function Icon({
+  color,
   name,
   size,
   style,
@@ -70,7 +77,7 @@ export function Icon({
   const flattenStyles = StyleSheet.flatten(style)
   const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)
   const path = getIconPath(name)
-  const styles = useStyles({ iconSize })
+  const styles = useStyles({ color, iconSize })
 
   if (!path) {
     console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`)
@@ -113,7 +120,7 @@ const getIconPath = (name: string): string => {
 // ====== Styles ===================
 // =================================
 
-const useStyles = ({ iconSize }: { iconSize: number }) => {
+const useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
@@ -124,7 +131,7 @@ const useStyles = ({ iconSize }: { iconSize: number }) => {
       borderRadius: iconSize / 2,
     },
     icon: {
-      color: colors.iconColorDefaultPrimary,
+      color: color || colors.iconColorDefaultPrimary,
     },
   })
 }

package/src/screens/{display.tsx → design_system_screen.tsx}

@@ -15,7 +15,12 @@ import {
   TextButton,
   TextInlineButton,
 } from '../components/display'
-import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils'
+import {
+  space,
+  MAX_FONT_SIZE_MULTIPLIER,
+  platformPressedOpacityStyle,
+  platformFontWeightMedium,
+} from '../utils'
 
 const URL = {
   image: 'https://picsum.photos/seed/picsum/200',
@@ -38,8 +43,9 @@ const URL = {
 
 const buttonPress = () => Alert.alert('Button clicked')
 
-export function DisplayScreen() {
+export function DesignSystemScreen() {
   const styles = useStyles()
+  const { colors } = useTheme()
 
   return (
     <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
@@ -48,7 +54,7 @@ export function DisplayScreen() {
           <Text>🚧 Coming soon! 🚧</Text>
         </Row>
       </CollapsableSection>
-      <CollapsableSection title="Atoms" isLast>
+      <CollapsableSection title="Atoms">
         <Group
           title="Spinner"
           description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading."
@@ -102,6 +108,7 @@ export function DisplayScreen() {
           <Row>
             <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>
@@ -516,6 +523,103 @@ export function DisplayScreen() {
           </Row>
         </Group>
       </CollapsableSection>
+      <CollapsableSection title="Theme" 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. 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/mobile/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>
+      {/* TODO: Enable & update when we install @planningcenter/tapestry */}
+      {/* <CollapsableSection title="Tokens" isLast>
+        <TextGroup>
+          <TextRow>
+            <Heading variant="h3">What are they?</Heading>
+            <Text>
+              Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
+              (e.g. colors, spacing amounts, and font weights.)
+            </Text>
+          </TextRow>
+          <TextRow>
+            <Heading variant="h3">Where do they come from?</Heading>
+            <Text>
+              Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
+              at this time the package only support light mode colors, so Chat uses a workaround.
+            </Text>
+            <Text>
+              Color-based tokens are infused into our theming system with two local files…
+            </Text>
+            <TextListItem label="1. `src/vendor/tapestry/tokens`:">
+              Primitive color values are stored* here. Primitives capture light or dark mode values,
+              but don't take into account the devices's colors scheme.
+            </TextListItem>
+            <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
+              Alias tokens reference the primitive color values token file* in light and dark mode
+              specfic objects. Our theming system then selects the right color to use based on the
+              device's color scheme.
+            </TextListItem>
+            <Text variant="footnote">
+              *If available, reference the color from the Tapestry package instead.
+            </Text>
+          </TextRow>
+          <TextRow>
+            <Heading variant="h3">How do we use them?</Heading>
+            <Text>There are two places to reference tokens at this time…</Text>
+            <TextListItem label="• Color tokens:">
+              Reference them from our internal `useTheme` hook to ensure the correct light or dark
+              mode color token is used.
+            </TextListItem>
+            <TextListItem label="• All other tokens:">
+              Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
+              string with the token's name. This function provides Typescript support and maps to
+              the token's raw CSS value. There is another function called `token`, but it maps to
+              CSS custom properties which React Native doesn't support.
+            </TextListItem>
+          </TextRow>
+        </TextGroup>
+      </CollapsableSection> */}
     </ScrollView>
   )
 }
@@ -575,6 +679,38 @@ function Row({ children, style }: RowProps) {
   return <View style={[styles.row, style]}>{children}</View>
 }
 
+function TextGroup({ children }: { children: React.ReactNode }) {
+  const styles = useStyles()
+  return <View style={styles.textGroup}>{children}</View>
+}
+
+interface TextRowProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+function TextRow({ children, style }: TextRowProps) {
+  const styles = useStyles()
+  return <View style={[styles.textRow, style]}>{children}</View>
+}
+
+interface TextListItemProps {
+  label: string
+  children: React.ReactNode
+}
+
+function TextListItem({ label, children }: TextListItemProps) {
+  const styles = useStyles()
+  return (
+    <Text variant="tertiary">
+      <Text variant="tertiary" style={styles.mediumWeight}>
+        {label}
+      </Text>{' '}
+      {children}
+    </Text>
+  )
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 
@@ -614,6 +750,15 @@ const useStyles = () => {
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
+    textRow: {
+      gap: space(1.5),
+    },
+    textGroup: {
+      gap: space(2.5),
+    },
+    mediumWeight: {
+      fontWeight: platformFontWeightMedium,
+    },
     alignRowLeft: {
       justifyContent: 'flex-start',
     },

package/src/screens/index.ts

@@ -1 +1 @@
-export * from './display'
+export * from './design_system_screen'

package/build/screens/display.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function DisplayScreen(): React.JSX.Element;
-//# sourceMappingURL=display.d.ts.map

package/build/screens/display.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAwCvC,wBAAgB,aAAa,sBAge5B"}

package/build/screens/display.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native'\nimport type { ViewStyle } from 'react-native'\nimport { useTheme } from '../hooks'\nimport {\n  Avatar,\n  AvatarGroup,\n  Button,\n  Heading,\n  Icon,\n  IconButton,\n  Image,\n  Spinner,\n  Text,\n  TextButton,\n  TextInlineButton,\n} from '../components/display'\nimport { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils'\n\nconst URL = {\n  image: 'https://picsum.photos/seed/picsum/200',\n  broken: 'https://broken.url',\n  avatar: 'https://i.pravatar.cc/200?img=22',\n  avatar_fallback: 'https://avatars.planningcenteronline.com/uploads/initials/PR.png',\n  two_avatars: ['https://i.pravatar.cc/200?img=22', 'https://i.pravatar.cc/200?img=23'],\n  three_avatars: [\n    'https://i.pravatar.cc/200?img=22',\n    'https://i.pravatar.cc/200?img=23',\n    'https://i.pravatar.cc/200?img=24',\n  ],\n  four_avatars: [\n    'https://i.pravatar.cc/200?img=30',\n    'https://i.pravatar.cc/200?img=29',\n    'https://i.pravatar.cc/200?img=28',\n    'https://i.pravatar.cc/200?img=27',\n  ],\n}\n\nconst buttonPress = () => Alert.alert('Button clicked')\n\nexport function DisplayScreen() {\n  const styles = useStyles()\n\n  return (\n    <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>\n      <CollapsableSection title=\"Molecules\">\n        <Row>\n          <Text>🚧 Coming soon! 🚧</Text>\n        </Row>\n      </CollapsableSection>\n      <CollapsableSection title=\"Atoms\" isLast>\n        <Group\n          title=\"Spinner\"\n          description=\"Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.\"\n        >\n          <Row style={styles.spinnerContainer}>\n            <Spinner size={24} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Image\"\n          description=\"Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.\"\n        >\n          <Row>\n            <Image source={{ uri: URL.broken }} style={styles.image} alt=\"Mountain sunrise\" />\n            <Image source={{ uri: URL.image }} style={styles.image} alt=\"Mountain sunrise\" />\n            <Image source={{ uri: URL.image }} style={styles.image} alt=\"\" />\n          </Row>\n        </Group>\n        <Group\n          title=\"Avatar\"\n          description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline \"presence\" indicator.'\n        >\n          <Row>\n            <Avatar sourceUri={URL.broken} />\n            <Avatar size=\"md\" sourceUri={URL.avatar_fallback} />\n            <Avatar sourceUri={URL.avatar} />\n          </Row>\n          <Row>\n            <Avatar presence=\"offline\" sourceUri={URL.broken} />\n            <Avatar presence=\"online\" size=\"md\" sourceUri={URL.avatar_fallback} />\n            <Avatar presence=\"offline\" sourceUri={URL.avatar} />\n          </Row>\n        </Group>\n        <Group\n          title=\"AvatarGroup\"\n          description=\"Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.\"\n        >\n          <Row>\n            <AvatarGroup sourceUris={[URL.broken]} />\n            <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />\n            <AvatarGroup sourceUris={[URL.avatar]} />\n            <AvatarGroup sourceUris={URL.two_avatars} />\n            <AvatarGroup sourceUris={URL.three_avatars} />\n            <AvatarGroup sourceUris={URL.four_avatars} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Icon\"\n          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.\"\n        >\n          <Row>\n            <Icon name=\"missingIcon\" size={20} />\n            <Icon name=\"general.textMessage\" size={20} />\n            <Icon name=\"churchCenter.sort\" style={styles.icon} />\n          </Row>\n        </Group>\n        <Group\n          title=\"Button\"\n          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.\"\n        >\n          <Row>\n            <Button onPress={buttonPress} title=\"Default\" size=\"sm\" />\n            <Button onPress={buttonPress} title=\"Default\" size=\"md\" />\n            <Button onPress={buttonPress} title=\"Danger\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button disabled onPress={buttonPress} title=\"Disabled\" size=\"sm\" />\n            <Button disabled onPress={buttonPress} title=\"Disabled\" size=\"md\" />\n            <Button disabled onPress={buttonPress} title=\"Disabled\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button loading onPress={buttonPress} title=\"Default\" size=\"sm\" />\n            <Button loading onPress={buttonPress} title=\"Default\" size=\"md\" />\n            <Button loading onPress={buttonPress} title=\"Danger\" appearance=\"danger\" size=\"lg\" />\n          </Row>\n          <Row>\n            <Button onPress={buttonPress} title=\"Default\" size=\"sm\" variant=\"outline\" />\n            <Button onPress={buttonPress} title=\"Default\" size=\"md\" variant=\"outline\" />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n            />\n          </Row>\n          <Row>\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              disabled\n              onPress={buttonPress}\n              title=\"Disabled\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n          <Row>\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"sm\"\n              variant=\"outline\"\n              iconNameLeft=\"general.plus\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Default\"\n              size=\"md\"\n              variant=\"outline\"\n              iconNameRight=\"churchCenter.sort\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n            <Button\n              loading\n              onPress={buttonPress}\n              title=\"Danger\"\n              appearance=\"danger\"\n              size=\"lg\"\n              variant=\"outline\"\n              iconNameLeft=\"groups.cards\"\n              iconNameRight=\"general.downChevron\"\n              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n            />\n          </Row>\n        </Group>\n        <Group\n          title=\"IconButton\"\n          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.\"\n        >\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n            />\n          </Row>\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n              disabled\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n              disabled\n            />\n          </Row>\n          <Row>\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"md\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"danger\"\n              size=\"lg\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              appearance=\"interaction\"\n              size=\"xl\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              iconStyle={styles.customIconButtonColor}\n              size=\"xxl\"\n              loading\n            />\n            <IconButton\n              onPress={buttonPress}\n              name=\"general.paperclip\"\n              accessibilityLabel=\"Add attachment\"\n              accessibilityHint=\"Opens your device's image gallary\"\n              size=\"xxxl\"\n              loading\n            />\n          </Row>\n        </Group>\n        <Group\n          title=\"TextButton\"\n          description=\"Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.\"\n        >\n          <Row>\n            <TextButton onPress={buttonPress}>Default</TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\">\n              Default\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\">\n              Default\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\">\n              Default\n            </TextButton>\n          </Row>\n          <Row>\n            <TextButton onPress={buttonPress} appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\" appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\" appearance=\"danger\">\n              Danger\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\" appearance=\"danger\">\n              Danger\n            </TextButton>\n          </Row>\n          <Row>\n            <TextButton onPress={buttonPress} disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"secondary\" disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"tertiary\" disabled>\n              Disabled\n            </TextButton>\n            <TextButton onPress={buttonPress} variant=\"footnote\" disabled>\n              Disabled\n            </TextButton>\n          </Row>\n        </Group>\n        <Group\n          title=\"TextInlineButton\"\n          description=\"Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.\"\n        >\n          <Row style={styles.alignRowLeft}>\n            <Text>\n              This text is next to{' '}\n              <TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem\n              ipsum dolor{' '}\n              <TextInlineButton onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"secondary\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"secondary\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"tertiary\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"tertiary\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n            <Text variant=\"footnote\">\n              This text is next to{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress}>\n                default button text\n              </TextInlineButton>{' '}\n              Lorem ipsum dolor{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress} appearance=\"danger\">\n                danger button text\n              </TextInlineButton>{' '}\n              consectetur{' '}\n              <TextInlineButton variant=\"footnote\" onPress={buttonPress} disabled>\n                disabled button text\n              </TextInlineButton>{' '}\n              elit.\n            </Text>\n          </Row>\n        </Group>\n        <Group\n          title=\"Heading\"\n          description=\"Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.\"\n        >\n          <Row>\n            <Heading>Heading 1</Heading>\n            <Heading variant=\"h2\">Heading 2</Heading>\n            <Heading variant=\"h3\">Heading 3</Heading>\n            <Heading variant=\"h4\">Heading 4</Heading>\n          </Row>\n        </Group>\n        <Group title=\"Text\" description=\"Use for body copy and supporting text.\">\n          <Row>\n            <Text>Plain text</Text>\n            <Text variant=\"secondary\">Secondary</Text>\n            <Text variant=\"tertiary\">Tertiary</Text>\n            <Text variant=\"footnote\">Footnote</Text>\n          </Row>\n        </Group>\n      </CollapsableSection>\n    </ScrollView>\n  )\n}\n\ninterface CollapsableSectionProps {\n  children: React.ReactNode\n  title: string\n  isLast?: boolean\n}\n\nfunction CollapsableSection({ children, title, isLast = false }: CollapsableSectionProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n  const [collapsed, setCollapsed] = useState(true)\n\n  return (\n    <View style={[styles.section, styles.sectionBorderTop, isLast && styles.sectionBorderBottom]}>\n      <Pressable\n        onPress={() => setCollapsed(!collapsed)}\n        style={({ pressed }) => [styles.sectionHeader, pressed && platformPressedOpacityStyle]}\n        android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n      >\n        <Heading>{title}</Heading>\n        <Icon name={collapsed ? 'general.plus' : 'general.minus'} size={16} />\n      </Pressable>\n      {!collapsed && <View style={styles.sectionChildren}>{children}</View>}\n    </View>\n  )\n}\n\ninterface GroupProps {\n  title: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction Group({ title, description, children }: GroupProps) {\n  const styles = useStyles()\n  return (\n    <View style={styles.group}>\n      <View style={styles.groupHeading}>\n        <Heading variant=\"h3\">{title}</Heading>\n        {description && <Text variant=\"footnote\">{description}</Text>}\n      </View>\n      {children}\n    </View>\n  )\n}\n\ninterface RowProps {\n  children: React.ReactNode\n  style?: ViewStyle\n}\n\nfunction Row({ children, style }: RowProps) {\n  const styles = useStyles()\n  return <View style={[styles.row, style]}>{children}</View>\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: {\n      flex: 1,\n      backgroundColor: colors.fillColorNeutral100Inverted,\n    },\n    container: {\n      padding: space(3),\n    },\n    listItem: { color: colors.fillColorNeutral020 },\n    section: {\n      gap: space(1),\n      borderColor: colors.fillColorNeutral020,\n    },\n    sectionBorderTop: {\n      borderTopWidth: 1,\n    },\n    sectionBorderBottom: {\n      borderBottomWidth: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      paddingVertical: space(3),\n    },\n    sectionChildren: {\n      paddingBottom: space(3),\n      gap: space(6),\n    },\n    row: {\n      gap: space(2),\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexWrap: 'wrap',\n    },\n    alignRowLeft: {\n      justifyContent: 'flex-start',\n    },\n    group: {\n      gap: space(3),\n    },\n    groupHeading: {\n      gap: space(1),\n    },\n    spinnerContainer: {\n      height: space(2.5),\n    },\n    image: {\n      width: 100,\n      height: 100,\n    },\n    icon: {\n      fontSize: 20,\n      color: colors.iconColorDefaultSecondary,\n    },\n    customIconButtonColor: {\n      color: 'purple',\n    },\n  })\n}\n"]}