@planningcenter/chat-react-native 1.5.1-qa-22.0 → 1.6.0

package/build/screens/display.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import React, { useState } from 'react';
+import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display';
-import { space } from '../utils/space';
+import { Avatar, AvatarGroup, Button, Heading, Icon, Image, Spinner, Text, TextButton, TextInlineButton, } from '../components/display';
+import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle } from '../utils';
 const URL = {
     image: 'https://picsum.photos/seed/picsum/200',
     broken: 'https://broken.url',
@@ -21,61 +21,279 @@ const URL = {
         'https://i.pravatar.cc/200?img=27',
     ],
 };
+const buttonPress = () => Alert.alert('Button clicked');
 export function DisplayScreen() {
     const styles = useStyles();
     return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
-      <View style={styles.column}>
-        <View style={[styles.row, styles.spinnerContainer]}>
-          <Spinner size={24}/>
-        </View>
-        <View style={styles.row}>
-          <Image source={{ uri: URL.broken }} style={styles.image}/>
-          <Image source={{ uri: URL.image }} style={styles.image}/>
-        </View>
-        <View style={styles.row}>
-          <Avatar sourceUri={URL.broken}/>
-          <Avatar size="md" sourceUri={URL.avatar_fallback}/>
-          <Avatar sourceUri={URL.avatar}/>
-        </View>
-        <View style={styles.row}>
-          <Avatar presence="offline" sourceUri={URL.broken}/>
-          <Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
-          <Avatar presence="offline" sourceUri={URL.avatar}/>
-        </View>
-        <View style={styles.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}/>
-        </View>
-        <View style={styles.row}>
-          <Icon name="missingIcon" size={20}/>
-          <Icon name="general.textMessage" size={20}/>
-          <Icon name="churchCenter.sort" style={styles.icon}/>
-        </View>
-        <View style={styles.row}>
-          <Text>Plain text</Text>
-          <Text variant="secondary">Secondary</Text>
-          <Text variant="tertiary">Tertiary</Text>
-          <Text variant="footnote">Footnote</Text>
-        </View>
-        <View style={styles.row}>
-          <Heading>Heading 1</Heading>
-          <Heading variant="h2">Heading 2</Heading>
-          <Heading variant="h3">Heading 3</Heading>
-          <Heading variant="h4">Heading 4</Heading>
-        </View>
-      </View>
+      <CollapsableSection title="Molecules">
+        <Row>
+          <Text>🚧 Coming soon! 🚧</Text>
+        </Row>
+      </CollapsableSection>
+      <CollapsableSection title="Atoms" isLast>
+        <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}/>
+          </Row>
+        </Group>
+        <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="Avatar" description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'>
+          <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>
+        </Group>
+        <Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.">
+          <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>
+        </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>
+            <Icon name="missingIcon" size={20}/>
+            <Icon name="general.textMessage" size={20}/>
+            <Icon name="churchCenter.sort" style={styles.icon}/>
+          </Row>
+        </Group>
+        <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="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>
+        <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.">
+          <Row>
+            <Heading>Heading 1</Heading>
+            <Heading variant="h2">Heading 2</Heading>
+            <Heading variant="h3">Heading 3</Heading>
+            <Heading variant="h4">Heading 4</Heading>
+          </Row>
+        </Group>
+        <Group title="Text" description="Use for body copy and supporting text.">
+          <Row>
+            <Text>Plain text</Text>
+            <Text variant="secondary">Secondary</Text>
+            <Text variant="tertiary">Tertiary</Text>
+            <Text variant="footnote">Footnote</Text>
+          </Row>
+        </Group>
+      </CollapsableSection>
     </ScrollView>);
 }
+function CollapsableSection({ children, title, isLast = false }) {
+    const styles = useStyles();
+    const { colors } = useTheme();
+    const [collapsed, setCollapsed] = useState(true);
+    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 (<View style={styles.group}>
+      <View style={styles.groupHeading}>
+        <Heading variant="h3">{title}</Heading>
+        {description && <Text variant="footnote">{description}</Text>}
+      </View>
+      {children}
+    </View>);
+}
+function Row({ children, style }) {
+    const styles = useStyles();
+    return <View style={[styles.row, style]}>{children}</View>;
+}
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
-        scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral100Inverted },
-        container: { gap: space(2), padding: space(3) },
+        scrollView: {
+            flex: 1,
+            backgroundColor: colors.fillColorNeutral100Inverted,
+        },
+        container: {
+            padding: space(3),
+        },
         listItem: { color: colors.fillColorNeutral020 },
+        section: {
+            gap: space(1),
+            borderColor: colors.fillColorNeutral020,
+        },
+        sectionBorderTop: {
+            borderTopWidth: 1,
+        },
+        sectionBorderBottom: {
+            borderBottomWidth: 1,
+        },
+        sectionHeader: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: space(3),
+        },
+        sectionChildren: {
+            paddingBottom: space(3),
+            gap: space(6),
+        },
         row: {
             gap: space(2),
             flexDirection: 'row',
@@ -83,7 +301,15 @@ const useStyles = () => {
             justifyContent: 'center',
             flexWrap: 'wrap',
         },
-        column: { gap: space(4) },
+        alignRowLeft: {
+            justifyContent: 'flex-start',
+        },
+        group: {
+            gap: space(3),
+        },
+        groupHeading: {
+            gap: space(1),
+        },
         spinnerContainer: {
             height: space(2.5),
         },

package/build/screens/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display'\nimport { space } from '../utils/space'\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\nexport function DisplayScreen() {\n  const styles = useStyles()\n\n  return (\n    <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>\n      <View style={styles.column}>\n        <View style={[styles.row, styles.spinnerContainer]}>\n          <Spinner size={24} />\n        </View>\n        <View style={styles.row}>\n          <Image source={{ uri: URL.broken }} style={styles.image} />\n          <Image source={{ uri: URL.image }} style={styles.image} />\n        </View>\n        <View style={styles.row}>\n          <Avatar sourceUri={URL.broken} />\n          <Avatar size=\"md\" sourceUri={URL.avatar_fallback} />\n          <Avatar sourceUri={URL.avatar} />\n        </View>\n        <View style={styles.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        </View>\n        <View style={styles.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        </View>\n        <View style={styles.row}>\n          <Icon name=\"missingIcon\" size={20} />\n          <Icon name=\"general.textMessage\" size={20} />\n          <Icon name=\"churchCenter.sort\" style={styles.icon} />\n        </View>\n        <View style={styles.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        </View>\n        <View style={styles.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        </View>\n      </View>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral100Inverted },\n    container: { gap: space(2), padding: space(3) },\n    listItem: { color: colors.fillColorNeutral020 },\n    row: {\n      gap: space(2),\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexWrap: 'wrap',\n    },\n    column: { gap: space(4) },\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  })\n}\n"]}
+{"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  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=\"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  })\n}\n"]}

package/build/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './session';
 export * from './theme';
 export * from './styles';
+export * from './space';
 export * from './client';
 export * from './uri';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA"}

package/build/utils/index.js

@@ -1,6 +1,7 @@
 export * from './session';
 export * from './theme';
 export * from './styles';
+export * from './space';
 export * from './client';
 export * from './uri';
 //# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './client'\nexport * from './uri'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\n"]}

package/build/utils/styles.d.ts

@@ -1,2 +1,7 @@
+export declare const MAX_FONT_SIZE_MULTIPLIER = 1.5;
+export declare const platformFontWeightMedium: "500" | "700" | undefined;
 export declare const platformFontWeightBold: "600" | "700" | undefined;
+export declare const platformPressedOpacityStyle: {
+    opacity: number;
+} | undefined;
 //# sourceMappingURL=styles.d.ts.map

package/build/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,2BAGjC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAE3C,eAAO,MAAM,wBAAwB,2BAGnC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BAGjC,CAAA;AAEF,eAAO,MAAM,2BAA2B;;aAGtC,CAAA"}

package/build/utils/styles.js

@@ -1,7 +1,16 @@
 import { Platform } from 'react-native';
 import { tokens } from '../vendor/tapestry/tokens';
+export const MAX_FONT_SIZE_MULTIPLIER = 1.5;
+export const platformFontWeightMedium = Platform.select({
+    ios: tokens.fontWeightMedium,
+    android: tokens.fontWeightBold,
+});
 export const platformFontWeightBold = Platform.select({
     ios: tokens.fontWeightSemiBold,
     android: tokens.fontWeightBold,
 });
+export const platformPressedOpacityStyle = Platform.select({
+    ios: { opacity: 0.5 },
+    android: { opacity: 1 },
+});
 //# sourceMappingURL=styles.js.map

package/build/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAE3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,gBAAgB;IAC5B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC;IACzD,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACxB,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\n\nexport const platformFontWeightMedium = Platform.select({\n  ios: tokens.fontWeightMedium,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n  ios: { opacity: 0.5 },\n  android: { opacity: 1 },\n})\n"]}

package/build/utils/theme.d.ts

@@ -27,7 +27,9 @@ export declare const defaultTheme: (colorScheme: ColorSchemeName) => DefaultThem
 export type TemporaryDefaultColorsType = Partial<ChatColors>;
 interface ChatColors {
     name: string;
-    temporaryButtonBackgroundColor: string;
+    buttonStart: string | undefined;
+    buttonEnd: string | undefined;
+    interaction: string;
     testColor: string;
 }
 export {};

package/build/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;gDAYgD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,qBAAqB,EAAE;QACrB,SAAS,EAAE,SAAS,CAAA;QACpB,IAAI,EAAE,SAAS,CAAA;KAChB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,YAgB3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,8BAA8B,EAAE,MAAM,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;CAClB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;gDAYgD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,qBAAqB,EAAE;QACrB,SAAS,EAAE,SAAS,CAAA;QACpB,IAAI,EAAE,SAAS,CAAA;KAChB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,YAgB3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB"}

package/build/utils/theme.js

@@ -18,12 +18,16 @@ export const defaultTheme = (colorScheme) => {
 };
 const colorsChatLight = {
     name: 'light',
-    temporaryButtonBackgroundColor: tokens.colorNeutral95,
+    buttonStart: undefined,
+    buttonEnd: undefined,
+    interaction: tokens.fillColorInteractionDefault,
     testColor: 'red',
 };
 const colorsChatDark = {
     name: 'dark',
-    temporaryButtonBackgroundColor: tokens.colorNeutral17,
+    buttonStart: undefined,
+    buttonEnd: undefined,
+    interaction: tokens.fillColorInteractionDefaultDark,
     testColor: 'blue',
 };
 const chatThemeColorMap = {

package/build/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA6B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAgB,EAAE;IACzE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,OAAO;QACL,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC;QACjC,qBAAqB,EAAE;YACrB,SAAS,EAAE;gBACT,iBAAiB,EAAE,MAAM,CAAC,QAAQ;gBAClC,eAAe,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,mBAAmB;gBAChE,WAAW,EAAE,MAAM,CAAC,iBAAiB;aACtC;YACD,IAAI,EAAE;gBACJ,SAAS,EAAE,QAAQ;aACpB;SACF;KACF,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,8BAA8B,EAAE,MAAM,CAAC,cAAc;IACrD,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,8BAA8B,EAAE,MAAM,CAAC,cAAc;IACrD,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  temporaryProductBadge: {\n    container: ViewStyle\n    text: TextStyle\n  }\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {\n  const scheme = colorScheme || 'light'\n\n  return {\n    colors: chatThemeColorMap[scheme],\n    temporaryProductBadge: {\n      container: {\n        paddingHorizontal: tokens.spacing1,\n        backgroundColor: aliasTokensColorMap[scheme].fillColorNeutral070,\n        borderWidth: tokens.borderSizeDefault,\n      },\n      text: {\n        textAlign: 'center',\n      },\n    },\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  temporaryButtonBackgroundColor: string\n  testColor: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  temporaryButtonBackgroundColor: tokens.colorNeutral95,\n  testColor: 'red',\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  temporaryButtonBackgroundColor: tokens.colorNeutral17,\n  testColor: 'blue',\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA6B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAgB,EAAE;IACzE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,OAAO;QACL,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC;QACjC,qBAAqB,EAAE;YACrB,SAAS,EAAE;gBACT,iBAAiB,EAAE,MAAM,CAAC,QAAQ;gBAClC,eAAe,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,mBAAmB;gBAChE,WAAW,EAAE,MAAM,CAAC,iBAAiB;aACtC;YACD,IAAI,EAAE;gBACJ,SAAS,EAAE,QAAQ;aACpB;SACF;KACF,CAAA;AACH,CAAC,CAAA;AAYD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  temporaryProductBadge: {\n    container: ViewStyle\n    text: TextStyle\n  }\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {\n  const scheme = colorScheme || 'light'\n\n  return {\n    colors: chatThemeColorMap[scheme],\n    temporaryProductBadge: {\n      container: {\n        paddingHorizontal: tokens.spacing1,\n        backgroundColor: aliasTokensColorMap[scheme].fillColorNeutral070,\n        borderWidth: tokens.borderSizeDefault,\n      },\n      text: {\n        textAlign: 'center',\n      },\n    },\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  testColor: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  testColor: 'red',\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  testColor: 'blue',\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/build/vendor/tapestry/alias_tokens_color_map.d.ts

@@ -13,6 +13,10 @@ export declare const aliasTokensColorMap: {
         readonly textColorDefaultPlaceholder: string;
         readonly textColorDefaultInverted: string;
         readonly fillColorInteractionOnlineDefault: string;
+        readonly fillColorInteractionDefault: string;
+        readonly fillColorStatusErrorMedium: string;
+        readonly fillColorButtonNeutralSolidDisabled: string;
+        readonly androidRippleNeutral: string;
         readonly fillColorNeutral000: string;
         readonly fillColorNeutral010: string;
         readonly fillColorNeutral020: string;
@@ -39,6 +43,10 @@ export declare const aliasTokensColorMap: {
         readonly textColorDefaultPlaceholder: string;
         readonly textColorDefaultInverted: string;
         readonly fillColorInteractionOnlineDefault: string;
+        readonly fillColorInteractionDefault: string;
+        readonly fillColorStatusErrorMedium: string;
+        readonly fillColorButtonNeutralSolidDisabled: string;
+        readonly androidRippleNeutral: string;
         readonly fillColorNeutral000: string;
         readonly fillColorNeutral010: string;
         readonly fillColorNeutral020: string;

package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAmGA,eAAO,MAAM,mBAAmB;;uBA/CxB,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;sCAxDpB,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;sCAxDpB,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAoF3B,CAAA"}
+{"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AA+GA,eAAO,MAAM,mBAAmB;;uBA3DxB,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;sCA5DP,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;sCA5DP,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAgG3B,CAAA"}