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

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,KAAoB,MAAM,OAAO,CAAA;AACxC,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,qBAU3E"}
+{"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, { 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();
@@ -37,11 +33,4 @@ export function ApiProvider({ children, env = 'production', token, onTokenExpire
     }, [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,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,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,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;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, { useEffect } 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  useEffect(() => {\n    queryClient.invalidateQueries()\n  }, [env, token])\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/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/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.2-rc.1",
+  "version": "1.5.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,7 +17,7 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.4.0"
+    "@planningcenter/chat-core": "^1.5.0-rc.0"
   },
   "peerDependencies": {
     "@react-navigation/elements": "*",
@@ -25,7 +25,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 +37,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": "bffd2651f686d7894cc0c8bfb4c0d7ae0dc2643e"
+  "gitHead": "be69b3cd1b00a27c3aec4682a6c77040efb61a91"
 }

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/contexts/api_provider.tsx

@@ -1,7 +1,9 @@
+import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
 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()
@@ -52,13 +49,3 @@ export function ApiProvider({
 
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
-
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
-}

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/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
+}