@planningcenter/chat-react-native 1.4.1 → 1.4.2-rc.0

package/build/components/error_boundary.d.ts

@@ -8,7 +8,7 @@ declare class ErrorBoundary extends React.Component<PropsWithChildren<{
     };
     componentDidCatch(error: any): void;
     handleError(error: any): void;
-    render(): React.ReactNode;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 }
 export default ErrorBoundary;
 //# sourceMappingURL=error_boundary.d.ts.map

package/build/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './conversations';
+export * from './error_boundary';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA"}

package/build/components/index.js

@@ -0,0 +1,3 @@
+export * from './conversations';
+export * from './error_boundary';
+//# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './conversations'\nexport * from './error_boundary'\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"api_provider.d.ts","sourceRoot":"","sources":["../../src/contexts/api_provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiC,MAAM,uBAAuB,CAAA;AAClF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,GAAG,EAAW,MAAM,kBAAkB,CAAA;AA0B/C,eAAO,MAAM,WAAW,aAMtB,CAAA;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,GAAkB,EAClB,KAAK,EACL,cAAc,GACf,EAAE,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,cAAc,EAAE,MAAM,IAAI,CAAA;CAAE,qBAM3E"}
+{"version":3,"file":"api_provider.d.ts","sourceRoot":"","sources":["../../src/contexts/api_provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAiC,MAAM,uBAAuB,CAAA;AAClF,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,GAAG,EAAW,MAAM,kBAAkB,CAAA;AAqB/C,eAAO,MAAM,WAAW,aAMtB,CAAA;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,GAAkB,EAClB,KAAK,EACL,cAAc,GACf,EAAE,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,cAAc,EAAE,MAAM,IAAI,CAAA;CAAE,qBAU3E"}

package/build/contexts/api_provider.js

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
+import React, { useEffect } from 'react';
+import apiRequest from '../utils/api';
 import { session } from '../utils/session';
 let handleTokenExpired;
 const defaultQueryFn = ({ queryKey }) => {
@@ -7,13 +8,8 @@ const defaultQueryFn = ({ queryKey }) => {
         throw new Error('No token present');
     }
     const url = `${session.baseUrl}${queryKey[0]}`;
-    return fetch(url, {
-        headers: {
-            Authorization: `Bearer ${session.token?.access_token}`,
-        },
-    })
-        .then(validateResponse)
-        .then(response => response.json())
+    return apiRequest(url)
+        .then(r => r.json)
         .catch(error => {
         if (error.message === 'Token expired') {
             handleTokenExpired();
@@ -32,13 +28,9 @@ export function ApiProvider({ children, env = 'production', token, onTokenExpire
     session.env = env;
     session.token = token;
     handleTokenExpired = onTokenExpired;
+    useEffect(() => {
+        queryClient.invalidateQueries();
+    }, [env, token]);
     return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }
-const validateResponse = (response) => {
-    const isExpired = response.status === 401;
-    if (isExpired) {
-        throw new Error('Token expired');
-    }
-    return response;
-};
 //# sourceMappingURL=api_provider.js.map

package/build/contexts/api_provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"api_provider.js","sourceRoot":"","sources":["../../src/contexts/api_provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAY,MAAM,uBAAuB,CAAA;AAClF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAO,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE/C,IAAI,kBAA8B,CAAA;AAElC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IAC9D,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;IACrC,CAAC;IAED,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IAE9C,OAAO,KAAK,CAAC,GAAG,EAAE;QAChB,OAAO,EAAE;YACP,aAAa,EAAE,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE;SACvD;KACF,CAAC;SACC,IAAI,CAAC,gBAAgB,CAAC;SACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACjC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;YACtC,kBAAkB,EAAE,CAAA;QACtB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,CAAA;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;IACzC,cAAc,EAAE;QACd,OAAO,EAAE;YACP,OAAO,EAAE,cAAc;SACxB;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,GAAG,GAAG,YAAY,EAClB,KAAK,EACL,cAAc,GAC4D;IAC1E,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;IACjB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,kBAAkB,GAAG,cAAc,CAAA;IAEnC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAA;AACnF,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IAEzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'\nimport React from 'react'\nimport { ViewProps } from 'react-native'\nimport { OAuthToken } from '../types'\nimport { ENV, session } from '../utils/session'\n\nlet handleTokenExpired: () => void\n\nconst defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {\n  if (!session.token) {\n    throw new Error('No token present')\n  }\n\n  const url = `${session.baseUrl}${queryKey[0]}`\n\n  return fetch(url, {\n    headers: {\n      Authorization: `Bearer ${session.token?.access_token}`,\n    },\n  })\n    .then(validateResponse)\n    .then(response => response.json())\n    .catch(error => {\n      if (error.message === 'Token expired') {\n        handleTokenExpired()\n      }\n      return null\n    })\n}\n\nexport const queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      queryFn: defaultQueryFn,\n    },\n  },\n})\n\nexport function ApiProvider({\n  children,\n  env = 'production',\n  token,\n  onTokenExpired,\n}: ViewProps & { env?: ENV; token?: OAuthToken; onTokenExpired: () => void }) {\n  session.env = env\n  session.token = token\n  handleTokenExpired = onTokenExpired\n\n  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}
+{"version":3,"file":"api_provider.js","sourceRoot":"","sources":["../../src/contexts/api_provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAY,MAAM,uBAAuB,CAAA;AAClF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,EAAO,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE/C,IAAI,kBAA8B,CAAA;AAElC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IAC9D,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;IACrC,CAAC;IAED,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IAE9C,OAAO,UAAU,CAAkB,GAAG,CAAC;SACpC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;SACjB,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;YACtC,kBAAkB,EAAE,CAAA;QACtB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,CAAA;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;IACzC,cAAc,EAAE;QACd,OAAO,EAAE;YACP,OAAO,EAAE,cAAc;SACxB;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,GAAG,GAAG,YAAY,EAClB,KAAK,EACL,cAAc,GAC4D;IAC1E,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;IACjB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,kBAAkB,GAAG,cAAc,CAAA;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,iBAAiB,EAAE,CAAA;IACjC,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;IAEhB,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAA;AACnF,CAAC","sourcesContent":["import { JSONAPIResponse } from '@planningcenter/chat-core'\nimport { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'\nimport React, { useEffect } from 'react'\nimport { ViewProps } from 'react-native'\nimport { OAuthToken } from '../types'\nimport apiRequest from '../utils/api'\nimport { ENV, session } from '../utils/session'\n\nlet handleTokenExpired: () => void\n\nconst defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {\n  if (!session.token) {\n    throw new Error('No token present')\n  }\n\n  const url = `${session.baseUrl}${queryKey[0]}`\n\n  return apiRequest<JSONAPIResponse>(url)\n    .then(r => r.json)\n    .catch(error => {\n      if (error.message === 'Token expired') {\n        handleTokenExpired()\n      }\n      return null\n    })\n}\n\nexport const queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      queryFn: defaultQueryFn,\n    },\n  },\n})\n\nexport function ApiProvider({\n  children,\n  env = 'production',\n  token,\n  onTokenExpired,\n}: ViewProps & { env?: ENV; token?: OAuthToken; onTokenExpired: () => void }) {\n  session.env = env\n  session.token = token\n  handleTokenExpired = onTokenExpired\n\n  useEffect(() => {\n    queryClient.invalidateQueries()\n  }, [env, token])\n\n  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n}\n"]}

package/build/contexts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './api_provider';
+export * from './chat_context';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/build/contexts/index.js

@@ -0,0 +1,3 @@
+export * from './api_provider';
+export * from './chat_context';
+//# sourceMappingURL=index.js.map

package/build/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './api_provider'\nexport * from './chat_context'\n"]}

package/build/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export { useTheme } from './use_theme';
+export * from './use_async_storage';
+export * from './use_theme';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA"}

package/build/hooks/index.js

@@ -1,2 +1,3 @@
-export { useTheme } from './use_theme';
+export * from './use_async_storage';
+export * from './use_theme';
 //# sourceMappingURL=index.js.map

package/build/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { useTheme } from './use_theme'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\n"]}

package/build/index.d.ts

@@ -1,8 +1,6 @@
-import { Conversations } from './components/conversations';
-import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { OAuthToken } from './types';
-import { baseUrlMap, uploadUrlMap } from './utils/session';
-import { TemporaryDefaultColorsType } from './utils/theme';
+export * from './components';
+export * from './contexts';
+export * from './hooks';
 export * from './screens';
-export { baseUrlMap, ChatContext, ChatProvider, Conversations, OAuthToken, TemporaryDefaultColorsType, uploadUrlMap, };
+export * from './utils';
 //# 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,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAC1D,cAAc,WAAW,CAAA;AAEzB,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,GACb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}

package/build/index.js

@@ -1,6 +1,6 @@
-import { Conversations } from './components/conversations';
-import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { baseUrlMap, uploadUrlMap } from './utils/session';
+export * from './components';
+export * from './contexts';
+export * from './hooks';
 export * from './screens';
-export { baseUrlMap, ChatContext, ChatProvider, Conversations, uploadUrlMap, };
+export * from './utils';
 //# 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,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEnE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE1D,cAAc,WAAW,CAAA;AAEzB,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,GACb,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\nexport * from './screens'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA","sourcesContent":["export * from './components'\nexport * from './contexts'\nexport * from './hooks'\nexport * from './screens'\nexport * from './utils'\n"]}

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

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

package/build/screens/display.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
 import { Image, Spinner, Text } from '../components/display';
+import { space } from '../utils/space';
 export function DisplayScreen() {
     const styles = useStyles();
     return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
@@ -28,18 +29,18 @@ const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
         scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
-        container: { gap: 16, padding: 24 },
+        container: { gap: space(2), padding: space(3) },
         listItem: { color: colors.fillColorNeutral020 },
         row: {
-            gap: 16,
+            gap: space(2),
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
             flexWrap: 'wrap',
         },
-        column: { gap: 32 },
+        column: { gap: space(4) },
         spinnerContainer: {
-            height: 20,
+            height: space(2.5),
         },
         image: {
             width: 100,

package/build/screens/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5D,MAAM,UAAU,aAAa;IAC3B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACjD;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EACpB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAClE;UAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC;YACN,GAAG,EAAE,uCAAuC;SAC7C,CAAC,CACF,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAExB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACtB;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CACzC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACvC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACzC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;QAC/C,GAAG,EAAE;YACH,GAAG,EAAE,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,MAAM;SACjB;QACD,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;QACnB,gBAAgB,EAAE;YAChB,MAAM,EAAE,EAAE;SACX;QACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Image, Spinner, Text } from '../components/display'\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: 'https://broken.url' }} style={styles.image} />\n          <Image\n            source={{\n              uri: 'https://picsum.photos/seed/picsum/200',\n            }}\n            style={styles.image}\n          />\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>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 16, padding: 24 },\n    listItem: { color: colors.fillColorNeutral020 },\n    row: {\n      gap: 16,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexWrap: 'wrap',\n    },\n    column: { gap: 32 },\n    spinnerContainer: {\n      height: 20,\n    },\n    image: {\n      width: 100,\n      height: 100,\n    },\n  })\n}\n"]}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,MAAM,UAAU,aAAa;IAC3B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACjD;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EACpB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAClE;UAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC;YACN,GAAG,EAAE,uCAAuC;SAC7C,CAAC,CACF,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAExB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACtB;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CACzC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACvC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACzC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE;QAC/C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;QAC/C,GAAG,EAAE;YACH,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;YACb,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,MAAM;SACjB;QACD,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE;QACzB,gBAAgB,EAAE;YAChB,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;SACnB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Image, Spinner, Text } from '../components/display'\nimport { space } from '../utils/space'\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: 'https://broken.url' }} style={styles.image} />\n          <Image\n            source={{\n              uri: 'https://picsum.photos/seed/picsum/200',\n            }}\n            style={styles.image}\n          />\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>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\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  })\n}\n"]}

package/build/utils/api.d.ts

@@ -0,0 +1,9 @@
+export default function apiRequest<T = unknown>(url: string, { method, data }?: {
+    method?: string | undefined;
+    data?: null | undefined;
+}): Promise<{
+    json: T;
+    ok: boolean;
+    response: Response;
+}>;
+//# sourceMappingURL=api.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/utils/api.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,OAAO,EAC5C,GAAG,EAAE,MAAM,EACX,EAAE,MAAc,EAAE,IAAW,EAAE;;;CAAK,GACnC,OAAO,CAAC;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,EAAE,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CAuBvD"}

package/build/utils/api.js

@@ -0,0 +1,36 @@
+import DeviceInfo from 'react-native-device-info';
+import { session } from './session';
+const brand = DeviceInfo.getBrand();
+const model = DeviceInfo.getModel();
+const systemName = DeviceInfo.getSystemName();
+const systemVersion = DeviceInfo.getSystemVersion();
+const readableVersion = DeviceInfo.getReadableVersion();
+const appName = DeviceInfo.getApplicationName();
+export default function apiRequest(url, { method = 'GET', data = null } = {}) {
+    const options = {
+        headers: {
+            Accept: 'application/vnd.api+json',
+            'Content-Type': 'application/json',
+            'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+            Authorization: `Bearer ${session.token?.access_token}`,
+        },
+        method,
+    };
+    if (data && method !== 'GET') {
+        options.body = JSON.stringify(data);
+    }
+    return fetch(url, options)
+        .then(validateResponse)
+        .then(response => response
+        .json()
+        .then(json => ({ json: json, ok: response.ok, response }))
+        .catch(() => ({ json: null, ok: response.ok, response })));
+}
+const validateResponse = (response) => {
+    const isExpired = response.status === 401;
+    if (isExpired) {
+        throw new Error('Token expired');
+    }
+    return response;
+};
+//# sourceMappingURL=api.js.map

package/build/utils/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../src/utils/api.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,UAAU,GAAG,UAAU,CAAC,aAAa,EAAE,CAAA;AAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAA;AACnD,MAAM,eAAe,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AACvD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AAE/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAW,EACX,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE;IAEpC,MAAM,OAAO,GAAgB;QAC3B,OAAO,EAAE;YACP,MAAM,EAAE,0BAA0B;YAClC,cAAc,EAAE,kBAAkB;YAClC,YAAY,EAAE,GAAG,OAAO,IAAI,eAAe,KAAK,KAAK,KAAK,KAAK,KAAK,UAAU,KAAK,aAAa,GAAG;YACnG,aAAa,EAAE,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE;SACvD;QACD,MAAM;KACP,CAAA;IAED,IAAI,IAAI,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC;IAED,OAAO,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;SACvB,IAAI,CAAC,gBAAgB,CAAC;SACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CACf,QAAQ;SACL,IAAI,EAAE;SACN,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;SAC9D,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CACjE,CAAA;AACL,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IAEzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import DeviceInfo from 'react-native-device-info'\nimport { session } from './session'\n\nconst brand = DeviceInfo.getBrand()\nconst model = DeviceInfo.getModel()\nconst systemName = DeviceInfo.getSystemName()\nconst systemVersion = DeviceInfo.getSystemVersion()\nconst readableVersion = DeviceInfo.getReadableVersion()\nconst appName = DeviceInfo.getApplicationName()\n\nexport default function apiRequest<T = unknown>(\n  url: string,\n  { method = 'GET', data = null } = {}\n): Promise<{ json: T; ok: boolean; response: Response }> {\n  const options: RequestInit = {\n    headers: {\n      Accept: 'application/vnd.api+json',\n      'Content-Type': 'application/json',\n      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,\n      Authorization: `Bearer ${session.token?.access_token}`,\n    },\n    method,\n  }\n\n  if (data && method !== 'GET') {\n    options.body = JSON.stringify(data)\n  }\n\n  return fetch(url, options)\n    .then(validateResponse)\n    .then(response =>\n      response\n        .json()\n        .then(json => ({ json: json as T, ok: response.ok, response }))\n        .catch(() => ({ json: null as T, ok: response.ok, response }))\n    )\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}

package/build/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './session';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

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

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

package/build/utils/index.js

@@ -0,0 +1,3 @@
+export * from './session';
+export * from './theme';
+//# sourceMappingURL=index.js.map

package/build/utils/index.js.map

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

package/build/utils/session.d.ts

@@ -26,6 +26,8 @@ export declare class Session {
     get isAuthenticated(): boolean;
     get baseUrl(): string;
     get uploadUrl(): string;
+    toString(): string;
+    static hydrate(sessionString: string): Session;
 }
 export declare const session: Session;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../src/utils/session.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,MAAM,MAAM,GAAG,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAA;AAE1D,eAAO,MAAM,UAAU;;;;CAItB,CAAA;AAED,eAAO,MAAM,YAAY;;;;CAIxB,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,GAAG,SAAS,CAAA;AAEjE;;;;GAIG;AACH,qBAAa,OAAO;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,KAAK,EAAE,UAAU,GAAG,SAAS,CAAA;gBAEjB,KAAK,CAAC,EAAE,YAAY;IAMhC,IAAI,eAAe,YAElB;IAED,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;CACF;AAED,eAAO,MAAM,OAAO,SAAsC,CAAA"}
+{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../src/utils/session.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,MAAM,MAAM,GAAG,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAA;AAE1D,eAAO,MAAM,UAAU;;;;CAItB,CAAA;AAED,eAAO,MAAM,YAAY;;;;CAIxB,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,GAAG,SAAS,CAAA;AAEjE;;;;GAIG;AACH,qBAAa,OAAO;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,KAAK,EAAE,UAAU,GAAG,SAAS,CAAA;gBAEjB,KAAK,CAAC,EAAE,YAAY;IAMhC,IAAI,eAAe,YAElB;IAED,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;IAED,QAAQ;IAIR,MAAM,CAAC,OAAO,CAAC,aAAa,EAAE,MAAM;CAQrC;AAED,eAAO,MAAM,OAAO,SAAsC,CAAA"}

package/build/utils/session.js

@@ -30,6 +30,18 @@ export class Session {
     get uploadUrl() {
         return uploadUrlMap[this.env];
     }
+    toString() {
+        return JSON.stringify({ env: this.env, token: this.token });
+    }
+    static hydrate(sessionString) {
+        try {
+            const props = JSON.parse(sessionString);
+            return new Session(props);
+        }
+        catch (error) {
+            return new Session();
+        }
+    }
 }
 export const session = new Session({ env: 'development' });
 //# sourceMappingURL=session.js.map

package/build/utils/session.js.map

@@ -1 +1 @@
-{"version":3,"file":"session.js","sourceRoot":"","sources":["../../src/utils/session.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sCAAsC;IAClD,OAAO,EAAE,8CAA8C;IACvD,WAAW,EAAE,qBAAqB;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,kDAAkD;IAC9D,OAAO,EAAE,0DAA0D;IACnE,WAAW,EAAE,kDAAkD;CAChE,CAAA;AAID;;;;GAIG;AACH,MAAM,OAAO,OAAO;IAClB,GAAG,CAAK;IACR,KAAK,CAAwB;IAE7B,YAAY,KAAoB;QAC9B,MAAM,EAAE,GAAG,GAAG,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAClD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;IAED,IAAI,OAAO;QACT,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,SAAS;QACX,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC/B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,CAAA","sourcesContent":["import { OAuthToken } from '../types'\n\nexport type ENV = 'production' | 'staging' | 'development'\n\nexport const baseUrlMap = {\n  production: 'https://api.planningcenteronline.com',\n  staging: 'https://api-staging.planningcenteronline.com',\n  development: 'http://api.pco.test',\n}\n\nexport const uploadUrlMap = {\n  production: 'https://upload.planningcenteronline.com/v2/files',\n  staging: 'https://upload-staging.planningcenteronline.com/v2/files',\n  development: 'https://upload.planningcenteronline.com/v2/files',\n}\n\ntype SessionProps = { env?: ENV; token?: OAuthToken } | undefined\n\n/**\n * Session class to track the environment and token\n * Not intended to make network requests or handle authentication\n * - returns urls for convenience only\n */\nexport class Session {\n  env: ENV\n  token: OAuthToken | undefined\n\n  constructor(props?: SessionProps) {\n    const { env = 'development', token } = props || {}\n    this.env = env\n    this.token = token\n  }\n\n  get isAuthenticated() {\n    return Boolean(this.token)\n  }\n\n  get baseUrl() {\n    return baseUrlMap[this.env]\n  }\n\n  get uploadUrl() {\n    return uploadUrlMap[this.env]\n  }\n}\n\nexport const session = new Session({ env: 'development' })\n"]}
+{"version":3,"file":"session.js","sourceRoot":"","sources":["../../src/utils/session.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sCAAsC;IAClD,OAAO,EAAE,8CAA8C;IACvD,WAAW,EAAE,qBAAqB;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,kDAAkD;IAC9D,OAAO,EAAE,0DAA0D;IACnE,WAAW,EAAE,kDAAkD;CAChE,CAAA;AAID;;;;GAIG;AACH,MAAM,OAAO,OAAO;IAClB,GAAG,CAAK;IACR,KAAK,CAAwB;IAE7B,YAAY,KAAoB;QAC9B,MAAM,EAAE,GAAG,GAAG,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAClD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;IAED,IAAI,OAAO;QACT,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,SAAS;QACX,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC/B,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IAC7D,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,aAAqB;QAClC,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;YACvC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;QAC3B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,OAAO,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,CAAA","sourcesContent":["import { OAuthToken } from '../types'\n\nexport type ENV = 'production' | 'staging' | 'development'\n\nexport const baseUrlMap = {\n  production: 'https://api.planningcenteronline.com',\n  staging: 'https://api-staging.planningcenteronline.com',\n  development: 'http://api.pco.test',\n}\n\nexport const uploadUrlMap = {\n  production: 'https://upload.planningcenteronline.com/v2/files',\n  staging: 'https://upload-staging.planningcenteronline.com/v2/files',\n  development: 'https://upload.planningcenteronline.com/v2/files',\n}\n\ntype SessionProps = { env?: ENV; token?: OAuthToken } | undefined\n\n/**\n * Session class to track the environment and token\n * Not intended to make network requests or handle authentication\n * - returns urls for convenience only\n */\nexport class Session {\n  env: ENV\n  token: OAuthToken | undefined\n\n  constructor(props?: SessionProps) {\n    const { env = 'development', token } = props || {}\n    this.env = env\n    this.token = token\n  }\n\n  get isAuthenticated() {\n    return Boolean(this.token)\n  }\n\n  get baseUrl() {\n    return baseUrlMap[this.env]\n  }\n\n  get uploadUrl() {\n    return uploadUrlMap[this.env]\n  }\n\n  toString() {\n    return JSON.stringify({ env: this.env, token: this.token })\n  }\n\n  static hydrate(sessionString: string) {\n    try {\n      const props = JSON.parse(sessionString)\n      return new Session(props)\n    } catch (error) {\n      return new Session()\n    }\n  }\n}\n\nexport const session = new Session({ env: 'development' })\n"]}

package/build/utils/space.d.ts

@@ -0,0 +1,3 @@
+export type SpacingValues = 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5;
+export declare function space(value: SpacingValues): number;
+//# sourceMappingURL=space.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../src/utils/space.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GACrB,IAAI,GACJ,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,CAAA;AAEP,wBAAgB,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAalD"}

package/build/utils/space.js

@@ -0,0 +1,22 @@
+import { tokens } from '../vendor/tapestry/tokens';
+export function space(value) {
+    if (value === 0.25)
+        return tokens.spacingFourth;
+    if (value === 0.5)
+        return tokens.spacingHalf;
+    if (value < 1 || value > 7.5)
+        return handleInvalidSpace(value);
+    // Reject fractional values that are not 0 or 0.5
+    const wholeValue = Math.floor(value);
+    const fractionalValue = value % 1;
+    if (fractionalValue !== 0 && fractionalValue !== 0.5)
+        return handleInvalidSpace(value);
+    // Deliver a whole value or add a half spacing token to it
+    const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0;
+    return tokens[`spacing${wholeValue}`] + remainderValue;
+}
+function handleInvalidSpace(value) {
+    console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`);
+    return 0;
+}
+//# sourceMappingURL=space.js.map

package/build/utils/space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAoBlD,MAAM,UAAU,KAAK,CAAC,KAAoB;IACxC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC,aAAa,CAAA;IAC/C,IAAI,KAAK,KAAK,GAAG;QAAE,OAAO,MAAM,CAAC,WAAW,CAAA;IAC5C,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG;QAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAE9D,iDAAiD;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACpC,MAAM,eAAe,GAAG,KAAK,GAAG,CAAC,CAAA;IACjC,IAAI,eAAe,KAAK,CAAC,IAAI,eAAe,KAAK,GAAG;QAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAEtF,0DAA0D;IAC1D,MAAM,cAAc,GAAG,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;IACvE,OAAO,MAAM,CAAC,UAAU,UAAU,EAAE,CAAC,GAAG,cAAc,CAAA;AACxD,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAa;IACvC,OAAO,CAAC,IAAI,CAAC,wBAAwB,KAAK,gDAAgD,CAAC,CAAA;IAC3F,OAAO,CAAC,CAAA;AACV,CAAC","sourcesContent":["import { tokens } from '../vendor/tapestry/tokens'\n\nexport type SpacingValues =\n  | 0.25\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 4.5\n  | 5\n  | 5.5\n  | 6\n  | 6.5\n  | 7\n  | 7.5\n\nexport function space(value: SpacingValues): number {\n  if (value === 0.25) return tokens.spacingFourth\n  if (value === 0.5) return tokens.spacingHalf\n  if (value < 1 || value > 7.5) return handleInvalidSpace(value)\n\n  // Reject fractional values that are not 0 or 0.5\n  const wholeValue = Math.floor(value)\n  const fractionalValue = value % 1\n  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)\n\n  // Deliver a whole value or add a half spacing token to it\n  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0\n  return tokens[`spacing${wholeValue}`] + remainderValue\n}\n\nfunction handleInvalidSpace(value: number) {\n  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)\n  return 0\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.4.1",
+  "version": "1.4.2-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,7 +17,8 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.4.0"
+    "@planningcenter/chat-core": "^1.4.2-rc.0",
+    "jest": "^29.4.0"
   },
   "peerDependencies": {
     "@react-navigation/elements": "*",
@@ -25,7 +26,8 @@
     "@tanstack/react-query": "^5.0.0",
     "lodash": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-device-info": "*"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.77.0",
@@ -36,7 +38,8 @@
     "expo-module-scripts": "^4.0.3",
     "lodash": "^4.17.21",
     "prettier": "^3.4.2",
-    "react-native": "0.74.5"
+    "react-native": "0.74.5",
+    "react-native-device-info": "^14.0.4"
   },
-  "gitHead": "469ceadce649e0dfa29e5c61281d1ed4821786cd"
+  "gitHead": "4d50439f57764d17bdb4c61e3c42036adcc9c7bc"
 }

package/src/__tests__/session.tsx

@@ -1,6 +1,15 @@
 import { OAuthToken } from '../types'
 import { Session } from '../utils/session'
 
+const token: OAuthToken = {
+  access_token: 'access_token',
+  refresh_token: 'refresh_token',
+  token_type: undefined,
+  created_at: 0,
+  expires_in: undefined,
+  scope: '',
+}
+
 describe('Session', () => {
   describe('constructor', () => {
     it('should track the environment', () => {
@@ -10,14 +19,6 @@ describe('Session', () => {
     })
 
     it('should track the token', () => {
-      const token: OAuthToken = {
-        access_token: 'access_token',
-        refresh_token: 'refresh_token',
-        token_type: undefined,
-        created_at: 0,
-        expires_in: undefined,
-        scope: '',
-      }
       const session = new Session({ token })
       expect(session.token).toEqual(token)
       expect(session.isAuthenticated).toEqual(true)
@@ -43,4 +44,38 @@ describe('Session', () => {
       expect(session.uploadUrl).toBe('https://upload-staging.planningcenteronline.com/v2/files')
     })
   })
+
+  describe('hydrate', () => {
+    describe('success', () => {
+      it('should return a hydrated Session instance', () => {
+        const session = new Session({ token })
+        expect(session.token).toEqual(token)
+        expect(session.isAuthenticated).toEqual(true)
+
+        const sessionString = session.toString()
+        const hydratedSession = Session.hydrate(sessionString)
+        expect(hydratedSession.token).toEqual(token)
+        expect(hydratedSession.isAuthenticated).toEqual(true)
+      })
+
+      it('should store the environment of hydrated Session instance', () => {
+        const env = 'production'
+        const session = new Session({ token, env })
+
+        const sessionString = session.toString()
+        const hydratedSession = Session.hydrate(sessionString)
+        expect(hydratedSession.env).toEqual(env)
+        expect(hydratedSession.token).toEqual(token)
+        expect(hydratedSession.isAuthenticated).toEqual(true)
+      })
+    })
+
+    describe('failure', () => {
+      it('should return a new Session instance', () => {
+        const session = Session.hydrate('')
+        expect(session.env).toBe('development')
+        expect(session.isAuthenticated).toBe(false)
+      })
+    })
+  })
 })

package/src/__tests__/utils/space.tsx

@@ -0,0 +1,60 @@
+import { space, SpacingValues } from '../../utils/space'
+import { tokens } from '../../vendor/tapestry/tokens'
+
+describe('space function', () => {
+  // Spy on console.warn to check for invalid inputs
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  const validTokenValues: Record<SpacingValues, number> = {
+    0.25: tokens.spacingFourth,
+    0.5: tokens.spacingHalf,
+    1: tokens.spacing1,
+    1.5: tokens.spacing1 + tokens.spacingHalf,
+    2: tokens.spacing2,
+    2.5: tokens.spacing2 + tokens.spacingHalf,
+    3: tokens.spacing3,
+    3.5: tokens.spacing3 + tokens.spacingHalf,
+    4: tokens.spacing4,
+    4.5: tokens.spacing4 + tokens.spacingHalf,
+    5: tokens.spacing5,
+    5.5: tokens.spacing5 + tokens.spacingHalf,
+    6: tokens.spacing6,
+    6.5: tokens.spacing6 + tokens.spacingHalf,
+    7: tokens.spacing7,
+    7.5: tokens.spacing7 + tokens.spacingHalf,
+  }
+
+  it('should return the correct token values for all valid SpacingValues', () => {
+    Object.entries(validTokenValues).forEach(([value, expected]) => {
+      expect(space(Number(value) as SpacingValues)).toBe(expected)
+    })
+  })
+
+  it('should warn and return 0 for an invalid value less than 1 (e.g., 0.8)', () => {
+    const result = space(0.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('0.8'))
+  })
+
+  it('should warn and return 0 for an invalid fractional value (e.g., 1.8)', () => {
+    const result = space(1.8 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('1.8'))
+  })
+
+  it('should warn and return 0 for a value greater than 7.5 (e.g., 19)', () => {
+    const result = space(19 as SpacingValues)
+    expect(result).toBe(0)
+    expect(console.warn).toHaveBeenCalledWith(warnText('19'))
+  })
+})
+
+function warnText(value: string) {
+  return `Invalid space value: ${value} — Must be a whole or half number between 1–7.`
+}

package/src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from './conversations'
+export * from './error_boundary'

package/src/contexts/api_provider.tsx

@@ -1,7 +1,9 @@
+import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { ViewProps } from 'react-native'
 import { OAuthToken } from '../types'
+import apiRequest from '../utils/api'
 import { ENV, session } from '../utils/session'
 
 let handleTokenExpired: () => void
@@ -13,13 +15,8 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
 
   const url = `${session.baseUrl}${queryKey[0]}`
 
-  return fetch(url, {
-    headers: {
-      Authorization: `Bearer ${session.token?.access_token}`,
-    },
-  })
-    .then(validateResponse)
-    .then(response => response.json())
+  return apiRequest<JSONAPIResponse>(url)
+    .then(r => r.json)
     .catch(error => {
       if (error.message === 'Token expired') {
         handleTokenExpired()
@@ -46,15 +43,9 @@ export function ApiProvider({
   session.token = token
   handleTokenExpired = onTokenExpired
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-}
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
+  useEffect(() => {
+    queryClient.invalidateQueries()
+  }, [env, token])
 
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './api_provider'
+export * from './chat_context'

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useTheme } from './use_theme'
+export * from './use_async_storage'
+export * from './use_theme'

package/src/index.tsx

@@ -1,16 +1,5 @@
-import { Conversations } from './components/conversations'
-import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { OAuthToken } from './types'
-import { baseUrlMap, uploadUrlMap } from './utils/session'
-import { TemporaryDefaultColorsType } from './utils/theme'
+export * from './components'
+export * from './contexts'
+export * from './hooks'
 export * from './screens'
-
-export {
-  baseUrlMap,
-  ChatContext,
-  ChatProvider,
-  Conversations,
-  OAuthToken,
-  TemporaryDefaultColorsType,
-  uploadUrlMap,
-}
+export * from './utils'

package/src/screens/display.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { useTheme } from '../hooks'
 import { Image, Spinner, Text } from '../components/display'
+import { space } from '../utils/space'
 
 export function DisplayScreen() {
   const styles = useStyles()
@@ -37,18 +38,18 @@ const useStyles = () => {
 
   return StyleSheet.create({
     scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
-    container: { gap: 16, padding: 24 },
+    container: { gap: space(2), padding: space(3) },
     listItem: { color: colors.fillColorNeutral020 },
     row: {
-      gap: 16,
+      gap: space(2),
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
-    column: { gap: 32 },
+    column: { gap: space(4) },
     spinnerContainer: {
-      height: 20,
+      height: space(2.5),
     },
     image: {
       width: 100,

package/src/utils/api.ts

@@ -0,0 +1,47 @@
+import DeviceInfo from 'react-native-device-info'
+import { session } from './session'
+
+const brand = DeviceInfo.getBrand()
+const model = DeviceInfo.getModel()
+const systemName = DeviceInfo.getSystemName()
+const systemVersion = DeviceInfo.getSystemVersion()
+const readableVersion = DeviceInfo.getReadableVersion()
+const appName = DeviceInfo.getApplicationName()
+
+export default function apiRequest<T = unknown>(
+  url: string,
+  { method = 'GET', data = null } = {}
+): Promise<{ json: T; ok: boolean; response: Response }> {
+  const options: RequestInit = {
+    headers: {
+      Accept: 'application/vnd.api+json',
+      'Content-Type': 'application/json',
+      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+      Authorization: `Bearer ${session.token?.access_token}`,
+    },
+    method,
+  }
+
+  if (data && method !== 'GET') {
+    options.body = JSON.stringify(data)
+  }
+
+  return fetch(url, options)
+    .then(validateResponse)
+    .then(response =>
+      response
+        .json()
+        .then(json => ({ json: json as T, ok: response.ok, response }))
+        .catch(() => ({ json: null as T, ok: response.ok, response }))
+    )
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './session'
+export * from './theme'

package/src/utils/session.ts

@@ -42,6 +42,19 @@ export class Session {
   get uploadUrl() {
     return uploadUrlMap[this.env]
   }
+
+  toString() {
+    return JSON.stringify({ env: this.env, token: this.token })
+  }
+
+  static hydrate(sessionString: string) {
+    try {
+      const props = JSON.parse(sessionString)
+      return new Session(props)
+    } catch (error) {
+      return new Session()
+    }
+  }
 }
 
 export const session = new Session({ env: 'development' })

package/src/utils/space.ts

@@ -0,0 +1,39 @@
+import { tokens } from '../vendor/tapestry/tokens'
+
+export type SpacingValues =
+  | 0.25
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 4.5
+  | 5
+  | 5.5
+  | 6
+  | 6.5
+  | 7
+  | 7.5
+
+export function space(value: SpacingValues): number {
+  if (value === 0.25) return tokens.spacingFourth
+  if (value === 0.5) return tokens.spacingHalf
+  if (value < 1 || value > 7.5) return handleInvalidSpace(value)
+
+  // Reject fractional values that are not 0 or 0.5
+  const wholeValue = Math.floor(value)
+  const fractionalValue = value % 1
+  if (fractionalValue !== 0 && fractionalValue !== 0.5) return handleInvalidSpace(value)
+
+  // Deliver a whole value or add a half spacing token to it
+  const remainderValue = fractionalValue === 0.5 ? tokens.spacingHalf : 0
+  return tokens[`spacing${wholeValue}`] + remainderValue
+}
+
+function handleInvalidSpace(value: number) {
+  console.warn(`Invalid space value: ${value} — Must be a whole or half number between 1–7.`)
+  return 0
+}