@planningcenter/chat-react-native 1.3.0-rc.4 → 1.3.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.0-rc.5](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.5) (2025-02-10)
+
+
+### Features
+
+* add auth to the example app ([#50](https://github.com/planningcenter/chat-js/issues/50)) ([5e0ae00](https://github.com/planningcenter/chat-js/commit/5e0ae008345743f6bba388e982a3ad768265971a))
+* create higher fidelity components ([#54](https://github.com/planningcenter/chat-js/issues/54)) ([367b707](https://github.com/planningcenter/chat-js/commit/367b7076b6d3a81ede7852248e98a199adea9978))
+* drop stream and set global dependencies ([#49](https://github.com/planningcenter/chat-js/issues/49)) ([1214b9f](https://github.com/planningcenter/chat-js/commit/1214b9fbc17f4ab67a1de1d39954604a28268f35))
+* **StreamChat:** export core package ([#41](https://github.com/planningcenter/chat-js/issues/41)) ([e9afde0](https://github.com/planningcenter/chat-js/commit/e9afde0e2a11d9c7e13b84f8eee8a6cfa7aff795)), closes [#45](https://github.com/planningcenter/chat-js/issues/45)
+
+
+
 ## [1.3.0-rc.4](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.4) (2025-02-07)
 
 

package/build/components/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAYnD,wBAAgB,aAAa,sBAQ5B"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAanD,wBAAgB,aAAa,sBAQ5B"}

package/build/components/conversations.js

@@ -1,8 +1,9 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import React, { Suspense, useContext } from 'react';
 import { FlatList, StyleSheet, Text } from 'react-native';
-import { ChatContext } from '../context/chat_context';
+import { ChatContext } from '../contexts/chat_context';
 import ErrorBoundary from './error_boundary';
+import { useTheme } from '../hooks/use_theme';
 export function Conversations() {
     return (<ErrorBoundary>
       <Suspense fallback={<></>}>
@@ -31,12 +32,14 @@ const Loaded = () => {
             return null;
         }),
     });
-    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text>{item.attributes.title}</Text>}/>);
+    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}/>);
 };
 const useStyles = () => {
+    const { colors } = useTheme();
     return StyleSheet.create({
-        container: { columnGap: 16 },
-        foo: { fontSize: 24 },
+        container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+        foo: { fontSize: 24, color: colors.testColor },
+        listItem: { color: colors.fillColorNeutral020 },
     });
 };
 const validateResponse = (response) => {

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAQ5C,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,CAAC,aAAa,CACZ;MAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACxB;QAAA,CAAC,MAAM,CAAC,AAAD,EACT;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,aAAa,CAAC,CACjB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE;QACZ,mCAAmC;QACnC,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,EAAE,YAAY,EAAE;aAC/C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAC;KACP,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EAC/D,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;QAC5B,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../context/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<></>}>\n        <Loaded />\n      </Suspense>\n    </ErrorBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const { token, onTokenExpired } = useContext(ChatContext)\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['conversations', token],\n    queryFn: () =>\n      // TODO: replace with an api client\n      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n        headers: {\n          Authorization: `Bearer ${token?.access_token}`,\n        },\n      })\n        .then(validateResponse)\n        .then(response => response.json())\n        .catch(error => {\n          if (error.message === 'Token expired') {\n            onTokenExpired()\n          }\n          return null\n        }),\n  })\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}\n    />\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: { columnGap: 16 },\n    foo: { fontSize: 24 },\n  })\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAQ7C,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,CAAC,aAAa,CACZ;MAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACxB;QAAA,CAAC,MAAM,CAAC,AAAD,EACT;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,aAAa,CAAC,CACjB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE;QACZ,mCAAmC;QACnC,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,EAAE,YAAY,EAAE;aAC/C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAC;KACP,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EACvF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACzE,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\nimport { useTheme } from '../hooks/use_theme'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<></>}>\n        <Loaded />\n      </Suspense>\n    </ErrorBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const { token, onTokenExpired } = useContext(ChatContext)\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['conversations', token],\n    queryFn: () =>\n      // TODO: replace with an api client\n      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n        headers: {\n          Authorization: `Bearer ${token?.access_token}`,\n        },\n      })\n        .then(validateResponse)\n        .then(response => response.json())\n        .catch(error => {\n          if (error.message === 'Token expired') {\n            onTokenExpired()\n          }\n          return null\n        }),\n  })\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}

package/build/contexts/chat_context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.d.ts","sourceRoot":"","sources":["../../src/contexts/chat_context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,EAAE,GAAG,CAAA;CACX,CAAA;AAED,eAAO,MAAM,WAAW,uCAItB,CAAA"}

package/build/contexts/chat_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.js","sourceRoot":"","sources":["../../src/contexts/chat_context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe;IACrD,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;CACzB,CAAC,CAAA","sourcesContent":["import { createContext } from 'react'\nimport { OauthToken } from '../types'\n\ntype ContextValue = {\n  token: OauthToken | null\n  onTokenExpired: () => void\n  theme: any\n}\n\nexport const ChatContext = createContext<ContextValue>({\n  theme: null,\n  token: null,\n  onTokenExpired: () => {},\n})\n"]}

package/build/hooks/use_create_chat_theme.d.ts

@@ -0,0 +1,10 @@
+import { ColorSchemeName } from 'react-native';
+import { DefaultTheme } from '../utils/theme';
+import { DeepPartial } from '../types';
+interface CreateChatThemeProps {
+    theme?: DeepPartial<DefaultTheme>;
+    colorScheme?: ColorSchemeName;
+}
+export declare const useCreateChatTheme: ({ theme: customTheme, colorScheme: appColorScheme, }: CreateChatThemeProps) => any;
+export {};
+//# sourceMappingURL=use_create_chat_theme.d.ts.map

package/build/hooks/use_create_chat_theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_create_chat_theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use_create_chat_theme.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAgB,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAItC,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACjC,WAAW,CAAC,EAAE,eAAe,CAAA;CAC9B;AAED,eAAO,MAAM,kBAAkB,yDAG5B,oBAAoB,QAetB,CAAA"}

package/build/hooks/use_create_chat_theme.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { defaultTheme } from '../utils/theme';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+import { merge } from 'lodash';
+export const useCreateChatTheme = ({ theme: customTheme = {}, colorScheme: appColorScheme, }) => {
+    const internalColorScheme = useColorScheme() || 'light';
+    const colorScheme = appColorScheme || internalColorScheme;
+    const memoizedTheme = useMemo(() => {
+        return {
+            ...merge({}, defaultTheme(colorScheme), customTheme),
+            colors: {
+                ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),
+                ...tapestryAliasTokensColorMap[colorScheme],
+            },
+        };
+    }, [colorScheme, customTheme]);
+    return memoizedTheme;
+};
+//# sourceMappingURL=use_create_chat_theme.js.map

package/build/hooks/use_create_chat_theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_create_chat_theme.js","sourceRoot":"","sources":["../../src/hooks/use_create_chat_theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAgB,MAAM,gBAAgB,CAAA;AAE3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AAChG,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAO9B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EAAE,WAAW,GAAG,EAAE,EACvB,WAAW,EAAE,cAAc,GACN,EAAE,EAAE;IACzB,MAAM,mBAAmB,GAAG,cAAc,EAAE,IAAI,OAAO,CAAA;IACvD,MAAM,WAAW,GAAG,cAAc,IAAI,mBAAmB,CAAA;IAEzD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;YACpD,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC;gBACnE,GAAG,2BAA2B,CAAC,WAAW,CAAC;aAC5C;SACF,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9B,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA","sourcesContent":["import { useMemo } from 'react'\nimport { useColorScheme, ColorSchemeName } from 'react-native'\nimport { defaultTheme, DefaultTheme } from '../utils/theme'\nimport { DeepPartial } from '../types'\nimport { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'\nimport { merge } from 'lodash'\n\ninterface CreateChatThemeProps {\n  theme?: DeepPartial<DefaultTheme>\n  colorScheme?: ColorSchemeName\n}\n\nexport const useCreateChatTheme = ({\n  theme: customTheme = {},\n  colorScheme: appColorScheme,\n}: CreateChatThemeProps) => {\n  const internalColorScheme = useColorScheme() || 'light'\n  const colorScheme = appColorScheme || internalColorScheme\n\n  const memoizedTheme = useMemo(() => {\n    return {\n      ...merge({}, defaultTheme(colorScheme), customTheme),\n      colors: {\n        ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),\n        ...tapestryAliasTokensColorMap[colorScheme],\n      },\n    }\n  }, [colorScheme, customTheme])\n\n  return memoizedTheme\n}\n"]}

package/build/hooks/use_theme.d.ts

@@ -0,0 +1,3 @@
+import { ChatTheme } from '../utils/theme';
+export declare const useTheme: () => ChatTheme;
+//# sourceMappingURL=use_theme.d.ts.map

package/build/hooks/use_theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_theme.d.ts","sourceRoot":"","sources":["../../src/hooks/use_theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,eAAO,MAAM,QAAQ,QAAO,SAI3B,CAAA"}

package/build/hooks/use_theme.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { ChatContext } from '../contexts/chat_context';
+export const useTheme = () => {
+    const { theme } = useContext(ChatContext);
+    return theme;
+};
+//# sourceMappingURL=use_theme.js.map

package/build/hooks/use_theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_theme.js","sourceRoot":"","sources":["../../src/hooks/use_theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGtD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAc,EAAE;IACtC,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,OAAO,KAAK,CAAA;AACd,CAAC,CAAA","sourcesContent":["import { useContext } from 'react'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ChatTheme } from '../utils/theme'\n\nexport const useTheme = (): ChatTheme => {\n  const { theme } = useContext(ChatContext)\n\n  return theme\n}\n"]}

package/build/index.d.ts

@@ -1,5 +1,7 @@
 import { Conversations } from './components/conversations';
-import { ChatContext } from './context/chat_context';
+import { ChatContext } from './contexts/chat_context';
+import { useCreateChatTheme } from './hooks/use_create_chat_theme';
 import { OauthToken } from './types';
-export { ChatContext, Conversations, OauthToken as OathToken };
+import { TemporaryDefaultColorsType } from './utils/theme';
+export { ChatContext, Conversations, OauthToken as OathToken, TemporaryDefaultColorsType, useCreateChatTheme, };
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,IAAI,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,WAAW,EACX,aAAa,EACb,UAAU,IAAI,SAAS,EACvB,0BAA0B,EAC1B,kBAAkB,GACnB,CAAA"}

package/build/index.js

@@ -1,4 +1,5 @@
 import { Conversations } from './components/conversations';
-import { ChatContext } from './context/chat_context';
-export { ChatContext, Conversations };
+import { ChatContext } from './contexts/chat_context';
+import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+export { ChatContext, Conversations, useCreateChatTheme, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGpD,OAAO,EAAE,WAAW,EAAE,aAAa,EAA2B,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext } from './context/chat_context'\nimport { OauthToken } from './types'\n\nexport { ChatContext, Conversations, OauthToken as OathToken }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAIlE,OAAO,EACL,WAAW,EACX,aAAa,EAGb,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks/use_create_chat_theme'\nimport { OauthToken } from './types'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  ChatContext,\n  Conversations,\n  OauthToken as OathToken,\n  TemporaryDefaultColorsType,\n  useCreateChatTheme,\n}\n"]}

package/build/utils/theme.d.ts

@@ -0,0 +1,34 @@
+import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+export interface ChatTheme extends DefaultTheme {
+    colors: DefaultTheme['colors'] & (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark);
+}
+/** =============================================
+  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.
+
+  The default theme is intended to support two types of customizations:
+  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)
+  2. Any styles for a specific component. (Use only one level of nesting.)
+    ```
+      primaryButton: {
+        container: ViewStyle
+        text: TextStyle
+      }
+    ```
+============================================= */
+export interface DefaultTheme {
+    colors: ChatColors;
+    temporaryProductBadge: {
+        container: ViewStyle;
+        text: TextStyle;
+    };
+}
+export declare const defaultTheme: (colorScheme: ColorSchemeName) => DefaultTheme;
+export type TemporaryDefaultColorsType = Partial<ChatColors>;
+interface ChatColors {
+    name: string;
+    temporaryButtonBackgroundColor: string;
+    testColor: string;
+}
+export {};
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +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,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AAEhG,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,2BAA2B,CAAC,KAAK,GAAG,OAAO,2BAA2B,CAAC,IAAI,CAAC,CAAA;CACvF;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"}

package/build/utils/theme.js

@@ -0,0 +1,33 @@
+import { tokens } from '../vendor/tapestry/tokens';
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map';
+export const defaultTheme = (colorScheme) => {
+    const scheme = colorScheme || 'light';
+    return {
+        colors: chatThemeColorMap[scheme],
+        temporaryProductBadge: {
+            container: {
+                paddingHorizontal: tokens.spacing1,
+                backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,
+                borderWidth: tokens.borderSizeDefault,
+            },
+            text: {
+                textAlign: 'center',
+            },
+        },
+    };
+};
+const colorsChatLight = {
+    name: 'light',
+    temporaryButtonBackgroundColor: tokens.colorNeutral95,
+    testColor: 'red',
+};
+const colorsChatDark = {
+    name: 'dark',
+    temporaryButtonBackgroundColor: tokens.colorNeutral17,
+    testColor: 'blue',
+};
+const chatThemeColorMap = {
+    light: colorsChatLight,
+    dark: colorsChatDark,
+};
+//# sourceMappingURL=theme.js.map

package/build/utils/theme.js.map

@@ -0,0 +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,2BAA2B,EAAE,MAAM,oDAAoD,CAAA;AA6BhG,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,2BAA2B,CAAC,MAAM,CAAC,CAAC,mBAAmB;gBACxE,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 { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.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: tapestryAliasTokensColorMap[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"]}

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

@@ -0,0 +1,41 @@
+export declare const tapestryAliasTokensColorMap: {
+    light: {
+        name: string;
+        iconColorDefaultPrimary: string;
+        iconColorDefaultSecondary: string;
+        iconColorDefaultDim: string;
+        iconColorDefaultDisabled: string;
+        iconColorDefaultInverted: string;
+        fillColorNeutral000: string;
+        fillColorNeutral010: string;
+        fillColorNeutral020: string;
+        fillColorNeutral030: string;
+        fillColorNeutral040: string;
+        fillColorNeutral050Base: string;
+        fillColorNeutral060: string;
+        fillColorNeutral070: string;
+        fillColorNeutral080: string;
+        fillColorNeutral090: string;
+        fillColorNeutral100Inverted: string;
+    };
+    dark: {
+        name: string;
+        iconColorDefaultPrimary: string;
+        iconColorDefaultSecondary: string;
+        iconColorDefaultDim: string;
+        iconColorDefaultDisabled: string;
+        iconColorDefaultInverted: string;
+        fillColorNeutral000: string;
+        fillColorNeutral010: string;
+        fillColorNeutral020: string;
+        fillColorNeutral030: string;
+        fillColorNeutral040: string;
+        fillColorNeutral050Base: string;
+        fillColorNeutral060: string;
+        fillColorNeutral070: string;
+        fillColorNeutral080: string;
+        fillColorNeutral090: string;
+        fillColorNeutral100Inverted: string;
+    };
+};
+//# sourceMappingURL=tapestry_alias_tokens_color_map.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tapestry_alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tapestry_alias_tokens_color_map.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,2BAA2B;;cA1BhC,MAAM;iCACa,MAAM;mCACJ,MAAM;6BACZ,MAAM;kCACD,MAAM;kCACN,MAAM;6BAjDX,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;iCACF,MAAM;6BACV,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;qCACE,MAAM;;;cAkC7B,MAAM;iCACa,MAAM;mCACJ,MAAM;6BACZ,MAAM;kCACD,MAAM;kCACN,MAAM;6BAjDX,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;iCACF,MAAM;6BACV,MAAM;6BACN,MAAM;6BACN,MAAM;6BACN,MAAM;qCACE,MAAM;;CA+DpC,CAAA"}

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.js

@@ -0,0 +1,50 @@
+import { tokens } from './tokens';
+const neutralsLight = {
+    name: 'light',
+    fillColorNeutral000: tokens.colorNeutral12,
+    fillColorNeutral010: tokens.colorNeutral24,
+    fillColorNeutral020: tokens.colorNeutral45,
+    fillColorNeutral030: tokens.colorNeutral58,
+    fillColorNeutral040: tokens.colorNeutral81,
+    fillColorNeutral050Base: tokens.colorNeutral88,
+    fillColorNeutral060: tokens.colorNeutral93,
+    fillColorNeutral070: tokens.colorNeutral95,
+    fillColorNeutral080: tokens.colorNeutral97,
+    fillColorNeutral090: tokens.colorNeutral98,
+    fillColorNeutral100Inverted: tokens.colorNeutral100White,
+};
+const neutralsDark = {
+    name: 'dark',
+    fillColorNeutral000: tokens.colorNeutral98,
+    fillColorNeutral010: tokens.colorNeutral88,
+    fillColorNeutral020: tokens.colorNeutral68,
+    fillColorNeutral030: tokens.colorNeutral50,
+    fillColorNeutral040: tokens.colorNeutral32,
+    fillColorNeutral050Base: tokens.colorNeutral24,
+    fillColorNeutral060: tokens.colorNeutral19,
+    fillColorNeutral070: tokens.colorNeutral17,
+    fillColorNeutral080: tokens.colorNeutral15,
+    fillColorNeutral090: tokens.colorNeutral12,
+    fillColorNeutral100Inverted: tokens.colorNeutral7,
+};
+const semanticAliasesLight = {
+    name: 'light',
+    iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
+    iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
+    iconColorDefaultDim: neutralsLight.fillColorNeutral030,
+    iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,
+    iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,
+};
+const semanticAliasesDark = {
+    name: 'dark',
+    iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
+    iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
+    iconColorDefaultDim: neutralsDark.fillColorNeutral030,
+    iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,
+    iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,
+};
+export const tapestryAliasTokensColorMap = {
+    light: { ...neutralsLight, ...semanticAliasesLight },
+    dark: { ...neutralsDark, ...semanticAliasesDark },
+};
+//# sourceMappingURL=tapestry_alias_tokens_color_map.js.map

package/build/vendor/tapestry/tapestry_alias_tokens_color_map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tapestry_alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tapestry_alias_tokens_color_map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAqBjC,MAAM,aAAa,GAAkB;IACnC,IAAI,EAAE,OAAO;IACb,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,oBAAoB;CACzD,CAAA;AAED,MAAM,YAAY,GAAkB;IAClC,IAAI,EAAE,MAAM;IACZ,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,aAAa;CAClD,CAAA;AAWD,MAAM,oBAAoB,GAA0B;IAClD,IAAI,EAAE,OAAO;IACb,uBAAuB,EAAE,aAAa,CAAC,mBAAmB;IAC1D,yBAAyB,EAAE,aAAa,CAAC,mBAAmB;IAC5D,mBAAmB,EAAE,aAAa,CAAC,mBAAmB;IACtD,wBAAwB,EAAE,aAAa,CAAC,mBAAmB;IAC3D,wBAAwB,EAAE,aAAa,CAAC,2BAA2B;CACpE,CAAA;AAED,MAAM,mBAAmB,GAA0B;IACjD,IAAI,EAAE,MAAM;IACZ,uBAAuB,EAAE,YAAY,CAAC,mBAAmB;IACzD,yBAAyB,EAAE,YAAY,CAAC,mBAAmB;IAC3D,mBAAmB,EAAE,YAAY,CAAC,mBAAmB;IACrD,wBAAwB,EAAE,YAAY,CAAC,mBAAmB;IAC1D,wBAAwB,EAAE,YAAY,CAAC,2BAA2B;CACnE,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,GAAG,oBAAoB,EAAE;IACpD,IAAI,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,mBAAmB,EAAE;CAClD,CAAA","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n  name: string\n  fillColorNeutral000: string\n  fillColorNeutral010: string\n  fillColorNeutral020: string\n  fillColorNeutral030: string\n  fillColorNeutral040: string\n  fillColorNeutral050Base: string\n  fillColorNeutral060: string\n  fillColorNeutral070: string\n  fillColorNeutral080: string\n  fillColorNeutral090: string\n  fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n  name: 'light',\n  fillColorNeutral000: tokens.colorNeutral12,\n  fillColorNeutral010: tokens.colorNeutral24,\n  fillColorNeutral020: tokens.colorNeutral45,\n  fillColorNeutral030: tokens.colorNeutral58,\n  fillColorNeutral040: tokens.colorNeutral81,\n  fillColorNeutral050Base: tokens.colorNeutral88,\n  fillColorNeutral060: tokens.colorNeutral93,\n  fillColorNeutral070: tokens.colorNeutral95,\n  fillColorNeutral080: tokens.colorNeutral97,\n  fillColorNeutral090: tokens.colorNeutral98,\n  fillColorNeutral100Inverted: tokens.colorNeutral100White,\n}\n\nconst neutralsDark: NeutralColors = {\n  name: 'dark',\n  fillColorNeutral000: tokens.colorNeutral98,\n  fillColorNeutral010: tokens.colorNeutral88,\n  fillColorNeutral020: tokens.colorNeutral68,\n  fillColorNeutral030: tokens.colorNeutral50,\n  fillColorNeutral040: tokens.colorNeutral32,\n  fillColorNeutral050Base: tokens.colorNeutral24,\n  fillColorNeutral060: tokens.colorNeutral19,\n  fillColorNeutral070: tokens.colorNeutral17,\n  fillColorNeutral080: tokens.colorNeutral15,\n  fillColorNeutral090: tokens.colorNeutral12,\n  fillColorNeutral100Inverted: tokens.colorNeutral7,\n}\n\ninterface SemanticAliasesColors {\n  name: string\n  iconColorDefaultPrimary: string\n  iconColorDefaultSecondary: string\n  iconColorDefaultDim: string\n  iconColorDefaultDisabled: string\n  iconColorDefaultInverted: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n  name: 'light',\n  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n  iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n  iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n  iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n}\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n  name: 'dark',\n  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n  iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n  iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n  iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n}\n\nexport const tapestryAliasTokensColorMap = {\n  light: { ...neutralsLight, ...semanticAliasesLight },\n  dark: { ...neutralsDark, ...semanticAliasesDark },\n}\n"]}

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

@@ -0,0 +1,38 @@
+export declare const tokens: {
+    borderRadiusDefault: number;
+    spacingFourth: number;
+    spacingHalf: number;
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    spacing7: number;
+    borderRadiusSm: number;
+    borderRadiusMd: number;
+    borderRadiusLg: number;
+    borderRadiusXl: number;
+    borderRadiusRound: number;
+    borderSizeDefault: number;
+    borderSizeThick: number;
+    colorNeutral7: string;
+    colorNeutral12: string;
+    colorNeutral15: string;
+    colorNeutral17: string;
+    colorNeutral19: string;
+    colorNeutral24: string;
+    colorNeutral32: string;
+    colorNeutral45: string;
+    colorNeutral50: string;
+    colorNeutral58: string;
+    colorNeutral68: string;
+    colorNeutral81: string;
+    colorNeutral88: string;
+    colorNeutral93: string;
+    colorNeutral95: string;
+    colorNeutral97: string;
+    colorNeutral98: string;
+    colorNeutral100White: string;
+};
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AA4FA,eAAO,MAAM,MAAM;yBAPI,MAAM;mBAtCZ,MAAM;iBACR,MAAM;cACT,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;cACN,MAAM;oBACA,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;uBACH,MAAM;uBACN,MAAM;qBACR,MAAM;mBAzDR,MAAM;oBACL,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,MAAM;0BACA,MAAM;CA0E7B,CAAA"}

package/build/vendor/tapestry/tokens.js

@@ -0,0 +1,50 @@
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+const colorPrimitives = {
+    colorNeutral7: 'hsl(0, 0%, 7%)',
+    colorNeutral12: 'hsl(0, 0%, 12%)',
+    colorNeutral15: 'hsl(0, 0%, 15%)',
+    colorNeutral17: 'hsl(0, 0%, 17%)',
+    colorNeutral19: 'hsl(0, 0%, 19%)',
+    colorNeutral24: 'hsl(0, 0%, 24%)',
+    colorNeutral32: 'hsl(0, 0%, 32%)',
+    colorNeutral45: 'hsl(0, 0%, 45%)',
+    colorNeutral50: 'hsl(0, 0%, 50%)',
+    colorNeutral58: 'hsl(0, 0%, 58%)',
+    colorNeutral68: 'hsl(0, 0%, 68%)',
+    colorNeutral81: 'hsl(0, 0%, 81%)',
+    colorNeutral88: 'hsl(0, 0%, 88%)',
+    colorNeutral93: 'hsl(0, 0%, 93%)',
+    colorNeutral95: 'hsl(0, 0%, 95%)',
+    colorNeutral97: 'hsl(0, 0%, 97%)',
+    colorNeutral98: 'hsl(0, 0%, 98%)',
+    colorNeutral100White: 'hsl(0, 0%, 100%)',
+};
+const numericPrimtives = {
+    spacingFourth: 2,
+    spacingHalf: 4,
+    spacing1: 8,
+    spacing2: 16,
+    spacing3: 24,
+    spacing4: 32,
+    spacing5: 40,
+    spacing6: 48,
+    spacing7: 56,
+    borderRadiusSm: 2,
+    borderRadiusMd: 4,
+    borderRadiusLg: 8,
+    borderRadiusXl: 16,
+    borderRadiusRound: 56,
+    borderSizeDefault: 1,
+    borderSizeThick: 2,
+};
+const numericAliases = {
+    borderRadiusDefault: numericPrimtives.borderRadiusMd,
+};
+export const tokens = {
+    ...colorPrimitives,
+    ...numericPrimtives,
+    ...numericAliases,
+};
+//# sourceMappingURL=tokens.js.map

package/build/vendor/tapestry/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAuB1G,MAAM,eAAe,GAAmB;IACtC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,oBAAoB,EAAE,kBAAkB;CACzC,CAAA;AAqBD,MAAM,gBAAgB,GAAsB;IAC1C,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;CACnB,CAAA;AAMD,MAAM,cAAc,GAAmB;IACrC,mBAAmB,EAAE,gBAAgB,CAAC,cAAc;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,GAAG,eAAe;IAClB,GAAG,gBAAgB;IACnB,GAAG,cAAc;CAClB,CAAA","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface ColorPrimitves {\n  colorNeutral7: string\n  colorNeutral12: string\n  colorNeutral15: string\n  colorNeutral17: string\n  colorNeutral19: string\n  colorNeutral24: string\n  colorNeutral32: string\n  colorNeutral45: string\n  colorNeutral50: string\n  colorNeutral58: string\n  colorNeutral68: string\n  colorNeutral81: string\n  colorNeutral88: string\n  colorNeutral93: string\n  colorNeutral95: string\n  colorNeutral97: string\n  colorNeutral98: string\n  colorNeutral100White: string\n}\n\nconst colorPrimitives: ColorPrimitves = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n}\n\ninterface NumericPrimitives {\n  spacingFourth: number\n  spacingHalf: number\n  spacing1: number\n  spacing2: number\n  spacing3: number\n  spacing4: number\n  spacing5: number\n  spacing6: number\n  spacing7: number\n  borderRadiusSm: number\n  borderRadiusMd: number\n  borderRadiusLg: number\n  borderRadiusXl: number\n  borderRadiusRound: number\n  borderSizeDefault: number\n  borderSizeThick: number\n}\n\nconst numericPrimtives: NumericPrimitives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n}\n\ninterface NumericAliases {\n  borderRadiusDefault: number\n}\n\nconst numericAliases: NumericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n}\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0-rc.4",
+  "version": "1.3.0-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -14,6 +14,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "lodash": "*",
     "react": "*",
     "react-native": "*"
   },
@@ -22,8 +23,9 @@
     "@tanstack/react-query": "^5.66.0",
     "@typescript-eslint/parser": "^8.23.0",
     "expo-module-scripts": "^3.4.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "75d05da3bdb2dc2509914389d319df9b2868042f"
+  "gitHead": "b0ba2e1902e5749a90ccf1aaa0a925d80b712285"
 }

package/src/components/conversations.tsx

@@ -1,9 +1,10 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
 import React, { Suspense, useContext } from 'react'
 import { FlatList, StyleSheet, Text } from 'react-native'
-import { ChatContext } from '../context/chat_context'
+import { ChatContext } from '../contexts/chat_context'
 import { ConversationRecord } from '../types'
 import ErrorBoundary from './error_boundary'
+import { useTheme } from '../hooks/use_theme'
 
 type ConversationsResponse = {
   data: ConversationRecord[]
@@ -49,15 +50,18 @@ const Loaded = () => {
       ListEmptyComponent={<Text>No conversations</Text>}
       contentContainerStyle={styles.container}
       ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
-      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}
+      renderItem={({ item }) => <Text style={styles.listItem}>{item.attributes.title}</Text>}
     />
   )
 }
 
 const useStyles = () => {
+  const { colors } = useTheme()
+
   return StyleSheet.create({
-    container: { columnGap: 16 },
-    foo: { fontSize: 24 },
+    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+    foo: { fontSize: 24, color: colors.testColor },
+    listItem: { color: colors.fillColorNeutral020 },
   })
 }
 

package/src/hooks/use_create_chat_theme.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useColorScheme, ColorSchemeName } from 'react-native'
+import { defaultTheme, DefaultTheme } from '../utils/theme'
+import { DeepPartial } from '../types'
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+import { merge } from 'lodash'
+
+interface CreateChatThemeProps {
+  theme?: DeepPartial<DefaultTheme>
+  colorScheme?: ColorSchemeName
+}
+
+export const useCreateChatTheme = ({
+  theme: customTheme = {},
+  colorScheme: appColorScheme,
+}: CreateChatThemeProps) => {
+  const internalColorScheme = useColorScheme() || 'light'
+  const colorScheme = appColorScheme || internalColorScheme
+
+  const memoizedTheme = useMemo(() => {
+    return {
+      ...merge({}, defaultTheme(colorScheme), customTheme),
+      colors: {
+        ...merge({}, defaultTheme(colorScheme).colors, customTheme?.colors),
+        ...tapestryAliasTokensColorMap[colorScheme],
+      },
+    }
+  }, [colorScheme, customTheme])
+
+  return memoizedTheme
+}

package/src/hooks/use_theme.tsx

@@ -0,0 +1,9 @@
+import { useContext } from 'react'
+import { ChatContext } from '../contexts/chat_context'
+import { ChatTheme } from '../utils/theme'
+
+export const useTheme = (): ChatTheme => {
+  const { theme } = useContext(ChatContext)
+
+  return theme
+}

package/src/index.tsx

@@ -1,5 +1,13 @@
 import { Conversations } from './components/conversations'
-import { ChatContext } from './context/chat_context'
+import { ChatContext } from './contexts/chat_context'
+import { useCreateChatTheme } from './hooks/use_create_chat_theme'
 import { OauthToken } from './types'
+import { TemporaryDefaultColorsType } from './utils/theme'
 
-export { ChatContext, Conversations, OauthToken as OathToken }
+export {
+  ChatContext,
+  Conversations,
+  OauthToken as OathToken,
+  TemporaryDefaultColorsType,
+  useCreateChatTheme,
+}

package/src/types.d.ts

@@ -17,3 +17,9 @@ export type OauthToken = {
   person: any
   refresh_token: any
 }
+
+// Sets all the properties of of a deeply nested object to optional.
+// Example: `DeepPartial<ChatTheme>`
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}

package/src/utils/theme.ts

@@ -0,0 +1,73 @@
+import { TextStyle, ViewStyle, ColorSchemeName } from 'react-native'
+import { tokens } from '../vendor/tapestry/tokens'
+import { tapestryAliasTokensColorMap } from '../vendor/tapestry/tapestry_alias_tokens_color_map'
+
+export interface ChatTheme extends DefaultTheme {
+  colors: DefaultTheme['colors'] &
+    (typeof tapestryAliasTokensColorMap.light | typeof tapestryAliasTokensColorMap.dark)
+}
+
+/** =============================================
+  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.
+
+  The default theme is intended to support two types of customizations:
+  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)
+  2. Any styles for a specific component. (Use only one level of nesting.)
+    ```
+      primaryButton: {
+        container: ViewStyle
+        text: TextStyle
+      }
+    ```
+============================================= */
+
+export interface DefaultTheme {
+  colors: ChatColors
+  temporaryProductBadge: {
+    container: ViewStyle
+    text: TextStyle
+  }
+}
+
+export const defaultTheme = (colorScheme: ColorSchemeName): DefaultTheme => {
+  const scheme = colorScheme || 'light'
+
+  return {
+    colors: chatThemeColorMap[scheme],
+    temporaryProductBadge: {
+      container: {
+        paddingHorizontal: tokens.spacing1,
+        backgroundColor: tapestryAliasTokensColorMap[scheme].fillColorNeutral070,
+        borderWidth: tokens.borderSizeDefault,
+      },
+      text: {
+        textAlign: 'center',
+      },
+    },
+  }
+}
+
+export type TemporaryDefaultColorsType = Partial<ChatColors>
+
+interface ChatColors {
+  name: string
+  temporaryButtonBackgroundColor: string
+  testColor: string
+}
+
+const colorsChatLight: ChatColors = {
+  name: 'light',
+  temporaryButtonBackgroundColor: tokens.colorNeutral95,
+  testColor: 'red',
+}
+
+const colorsChatDark: ChatColors = {
+  name: 'dark',
+  temporaryButtonBackgroundColor: tokens.colorNeutral17,
+  testColor: 'blue',
+}
+
+const chatThemeColorMap = {
+  light: colorsChatLight,
+  dark: colorsChatDark,
+}

package/src/vendor/tapestry/tapestry_alias_tokens_color_map.ts

@@ -0,0 +1,82 @@
+import { tokens } from './tokens'
+
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+
+interface NeutralColors {
+  name: string
+  fillColorNeutral000: string
+  fillColorNeutral010: string
+  fillColorNeutral020: string
+  fillColorNeutral030: string
+  fillColorNeutral040: string
+  fillColorNeutral050Base: string
+  fillColorNeutral060: string
+  fillColorNeutral070: string
+  fillColorNeutral080: string
+  fillColorNeutral090: string
+  fillColorNeutral100Inverted: string
+}
+
+const neutralsLight: NeutralColors = {
+  name: 'light',
+  fillColorNeutral000: tokens.colorNeutral12,
+  fillColorNeutral010: tokens.colorNeutral24,
+  fillColorNeutral020: tokens.colorNeutral45,
+  fillColorNeutral030: tokens.colorNeutral58,
+  fillColorNeutral040: tokens.colorNeutral81,
+  fillColorNeutral050Base: tokens.colorNeutral88,
+  fillColorNeutral060: tokens.colorNeutral93,
+  fillColorNeutral070: tokens.colorNeutral95,
+  fillColorNeutral080: tokens.colorNeutral97,
+  fillColorNeutral090: tokens.colorNeutral98,
+  fillColorNeutral100Inverted: tokens.colorNeutral100White,
+}
+
+const neutralsDark: NeutralColors = {
+  name: 'dark',
+  fillColorNeutral000: tokens.colorNeutral98,
+  fillColorNeutral010: tokens.colorNeutral88,
+  fillColorNeutral020: tokens.colorNeutral68,
+  fillColorNeutral030: tokens.colorNeutral50,
+  fillColorNeutral040: tokens.colorNeutral32,
+  fillColorNeutral050Base: tokens.colorNeutral24,
+  fillColorNeutral060: tokens.colorNeutral19,
+  fillColorNeutral070: tokens.colorNeutral17,
+  fillColorNeutral080: tokens.colorNeutral15,
+  fillColorNeutral090: tokens.colorNeutral12,
+  fillColorNeutral100Inverted: tokens.colorNeutral7,
+}
+
+interface SemanticAliasesColors {
+  name: string
+  iconColorDefaultPrimary: string
+  iconColorDefaultSecondary: string
+  iconColorDefaultDim: string
+  iconColorDefaultDisabled: string
+  iconColorDefaultInverted: string
+}
+
+const semanticAliasesLight: SemanticAliasesColors = {
+  name: 'light',
+  iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
+  iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
+  iconColorDefaultDim: neutralsLight.fillColorNeutral030,
+  iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,
+  iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,
+}
+
+const semanticAliasesDark: SemanticAliasesColors = {
+  name: 'dark',
+  iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
+  iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
+  iconColorDefaultDim: neutralsDark.fillColorNeutral030,
+  iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,
+  iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,
+}
+
+export const tapestryAliasTokensColorMap = {
+  light: { ...neutralsLight, ...semanticAliasesLight },
+  dark: { ...neutralsDark, ...semanticAliasesDark },
+}

package/src/vendor/tapestry/tokens.ts

@@ -0,0 +1,97 @@
+// Copied from `@planningcenter/tapestry` package.
+// Defining these tokens locally is a temporary solution until the package supports mobile.
+// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs
+
+interface ColorPrimitves {
+  colorNeutral7: string
+  colorNeutral12: string
+  colorNeutral15: string
+  colorNeutral17: string
+  colorNeutral19: string
+  colorNeutral24: string
+  colorNeutral32: string
+  colorNeutral45: string
+  colorNeutral50: string
+  colorNeutral58: string
+  colorNeutral68: string
+  colorNeutral81: string
+  colorNeutral88: string
+  colorNeutral93: string
+  colorNeutral95: string
+  colorNeutral97: string
+  colorNeutral98: string
+  colorNeutral100White: string
+}
+
+const colorPrimitives: ColorPrimitves = {
+  colorNeutral7: 'hsl(0, 0%, 7%)',
+  colorNeutral12: 'hsl(0, 0%, 12%)',
+  colorNeutral15: 'hsl(0, 0%, 15%)',
+  colorNeutral17: 'hsl(0, 0%, 17%)',
+  colorNeutral19: 'hsl(0, 0%, 19%)',
+  colorNeutral24: 'hsl(0, 0%, 24%)',
+  colorNeutral32: 'hsl(0, 0%, 32%)',
+  colorNeutral45: 'hsl(0, 0%, 45%)',
+  colorNeutral50: 'hsl(0, 0%, 50%)',
+  colorNeutral58: 'hsl(0, 0%, 58%)',
+  colorNeutral68: 'hsl(0, 0%, 68%)',
+  colorNeutral81: 'hsl(0, 0%, 81%)',
+  colorNeutral88: 'hsl(0, 0%, 88%)',
+  colorNeutral93: 'hsl(0, 0%, 93%)',
+  colorNeutral95: 'hsl(0, 0%, 95%)',
+  colorNeutral97: 'hsl(0, 0%, 97%)',
+  colorNeutral98: 'hsl(0, 0%, 98%)',
+  colorNeutral100White: 'hsl(0, 0%, 100%)',
+}
+
+interface NumericPrimitives {
+  spacingFourth: number
+  spacingHalf: number
+  spacing1: number
+  spacing2: number
+  spacing3: number
+  spacing4: number
+  spacing5: number
+  spacing6: number
+  spacing7: number
+  borderRadiusSm: number
+  borderRadiusMd: number
+  borderRadiusLg: number
+  borderRadiusXl: number
+  borderRadiusRound: number
+  borderSizeDefault: number
+  borderSizeThick: number
+}
+
+const numericPrimtives: NumericPrimitives = {
+  spacingFourth: 2,
+  spacingHalf: 4,
+  spacing1: 8,
+  spacing2: 16,
+  spacing3: 24,
+  spacing4: 32,
+  spacing5: 40,
+  spacing6: 48,
+  spacing7: 56,
+  borderRadiusSm: 2,
+  borderRadiusMd: 4,
+  borderRadiusLg: 8,
+  borderRadiusXl: 16,
+  borderRadiusRound: 56,
+  borderSizeDefault: 1,
+  borderSizeThick: 2,
+}
+
+interface NumericAliases {
+  borderRadiusDefault: number
+}
+
+const numericAliases: NumericAliases = {
+  borderRadiusDefault: numericPrimtives.borderRadiusMd,
+}
+
+export const tokens = {
+  ...colorPrimitives,
+  ...numericPrimtives,
+  ...numericAliases,
+}

package/build/context/chat_context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat_context.d.ts","sourceRoot":"","sources":["../../src/context/chat_context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,EAAE,GAAG,CAAA;CACX,CAAA;AAED,eAAO,MAAM,WAAW,uCAItB,CAAA"}

package/build/context/chat_context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat_context.js","sourceRoot":"","sources":["../../src/context/chat_context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe;IACrD,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;CACzB,CAAC,CAAA","sourcesContent":["import { createContext } from 'react'\nimport { OauthToken } from '../types'\n\ntype ContextValue = {\n  token: OauthToken | null\n  onTokenExpired: () => void\n  theme: any\n}\n\nexport const ChatContext = createContext<ContextValue>({\n  theme: null,\n  token: null,\n  onTokenExpired: () => {},\n})\n"]}