@planningcenter/chat-react-native 4.3.0-rc.8 → 4.3.0-rc.9

package/build/screens/search/components/search_blank_states.d.ts

@@ -0,0 +1,7 @@
+export declare function SearchPromptBlankState(): import("react/jsx-runtime").JSX.Element;
+interface NoResultsBlankStateProps {
+    term: string;
+}
+export declare function NoResultsBlankState({ term }: NoResultsBlankStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=search_blank_states.d.ts.map

package/build/screens/search/components/search_blank_states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_blank_states.d.ts","sourceRoot":"","sources":["../../../../src/screens/search/components/search_blank_states.tsx"],"names":[],"mappings":"AAGA,wBAAgB,sBAAsB,4CAYrC;AAED,UAAU,wBAAwB;IAChC,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,2CAYrE"}

package/build/screens/search/components/search_blank_states.js

@@ -0,0 +1,72 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import BlankState from '../../../components/primitive/blank_state_primitive';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SearchPromptBlankState() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/_jsx(BlankState.Imagery, {
+      name: "general.search"
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsxs(BlankState.Root, {
+      children: [t0, /*#__PURE__*/_jsxs(BlankState.Content, {
+        children: [/*#__PURE__*/_jsx(BlankState.Heading, {
+          children: "Search chat"
+        }), /*#__PURE__*/_jsx(BlankState.Text, {
+          children: "Find conversations by title, or search for words from a message."
+        })]
+      })]
+    });
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+export function NoResultsBlankState(t0) {
+  const $ = _c(4);
+  const {
+    term
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx(BlankState.Imagery, {
+      name: "general.search"
+    });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx(BlankState.Heading, {
+      children: "No results"
+    });
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== term) {
+    t3 = /*#__PURE__*/_jsxs(BlankState.Root, {
+      children: [t1, /*#__PURE__*/_jsxs(BlankState.Content, {
+        children: [t2, /*#__PURE__*/_jsxs(BlankState.Text, {
+          children: ["Nothing matches \u201C", term, ".\u201D Try a conversation title, or a word from a message."]
+        })]
+      })]
+    });
+    $[2] = term;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+//# sourceMappingURL=search_blank_states.js.map

package/build/screens/search/components/search_blank_states.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_blank_states.js","names":["React","BlankState","jsx","_jsx","jsxs","_jsxs","SearchPromptBlankState","$","_c","t0","Symbol","for","Imagery","name","t1","Root","children","Content","Heading","Text","NoResultsBlankState","term","t2","t3"],"sources":["../../../../src/screens/search/components/search_blank_states.tsx"],"sourcesContent":["import React from 'react'\nimport BlankState from '../../../components/primitive/blank_state_primitive'\n\nexport function SearchPromptBlankState() {\n  return (\n    <BlankState.Root>\n      <BlankState.Imagery name=\"general.search\" />\n      <BlankState.Content>\n        <BlankState.Heading>Search chat</BlankState.Heading>\n        <BlankState.Text>\n          Find conversations by title, or search for words from a message.\n        </BlankState.Text>\n      </BlankState.Content>\n    </BlankState.Root>\n  )\n}\n\ninterface NoResultsBlankStateProps {\n  term: string\n}\n\nexport function NoResultsBlankState({ term }: NoResultsBlankStateProps) {\n  return (\n    <BlankState.Root>\n      <BlankState.Imagery name=\"general.search\" />\n      <BlankState.Content>\n        <BlankState.Heading>No results</BlankState.Heading>\n        <BlankState.Text>\n          Nothing matches &ldquo;{term}.&rdquo; Try a conversation title, or a word from a message.\n        </BlankState.Text>\n      </BlankState.Content>\n    </BlankState.Root>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,qDAAqD;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE5E,OAAO,SAAAC,uBAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAGDF,EAAA,gBAAAN,IAAA,CAAAF,UAAA,CAAAW,OAAA;MAAyBC,IAAgB,EAAhB;IAAgB,CAAE,CAAC;IAAAN,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,IAAAO,EAAA;EAAA,IAAAP,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAD9CG,EAAA,gBAAAT,KAAA,CAAAJ,UAAA,CAAAc,IAAA;MAAAC,QAAA,GACEP,EAA4C,eAC5CJ,KAAA,CAAAJ,UAAA,CAAAgB,OAAA;QAAAD,QAAA,gBACEb,IAAA,CAAAF,UAAA,CAAAiB,OAAA;UAAAF,QAAA,EAAoB;QAAW,CAAoB,CAAC,eACpDb,IAAA,CAAAF,UAAA,CAAAkB,IAAA;UAAAH,QAAA,EAAiB;QAEjB,CAAiB,CAAC;MAAA,CACA,CAAC;IAAA,CACN,CAAC;IAAAT,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAAA,OARlBO,EAQkB;AAAA;AAQtB,OAAO,SAAAM,oBAAAX,EAAA;EAAA,MAAAF,CAAA,GAAAC,EAAA;EAA6B;IAAAa;EAAA,IAAAZ,EAAkC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAGhEG,EAAA,gBAAAX,IAAA,CAAAF,UAAA,CAAAW,OAAA;MAAyBC,IAAgB,EAAhB;IAAgB,CAAE,CAAC;IAAAN,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAAA,IAAAe,EAAA;EAAA,IAAAf,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE1CW,EAAA,gBAAAnB,IAAA,CAAAF,UAAA,CAAAiB,OAAA;MAAAF,QAAA,EAAoB;IAAU,CAAoB,CAAC;IAAAT,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAhB,CAAA,QAAAc,IAAA;IAHvDE,EAAA,gBAAAlB,KAAA,CAAAJ,UAAA,CAAAc,IAAA;MAAAC,QAAA,GACEF,EAA4C,eAC5CT,KAAA,CAAAJ,UAAA,CAAAgB,OAAA;QAAAD,QAAA,GACEM,EAAmD,eACnDjB,KAAA,CAAAJ,UAAA,CAAAkB,IAAA;UAAAH,QAAA,GAAiB,wBACQ,EAACK,IAAI,EAAC,6DAC/B;QAAA,CAAiB,CAAC;MAAA,CACA,CAAC;IAAA,CACN,CAAC;IAAAd,CAAA,MAAAc,IAAA;IAAAd,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAA,OARlBgB,EAQkB;AAAA","ignoreList":[]}

package/build/screens/search/search_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAUvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAU3B"}
+{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAWvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAW3B"}

package/build/screens/search/search_screen.js

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { KeyboardView } from '../../components';
 import { composeOptions, withMinimalBack } from '../../components/display/platform_modal_header_buttons';
+import { SearchPromptBlankState } from './components/search_blank_states';
 import { SearchField } from './components/search_field';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SearchScreenOptions = ({
   navigation
 }) => composeOptions({
@@ -14,26 +15,41 @@ export const SearchScreenOptions = ({
   onPress: () => navigation.goBack()
 }));
 export function SearchScreen() {
-  const $ = _c(2);
+  const $ = _c(5);
   const [term, setTerm] = useState("");
   let t0;
   if ($[0] !== term) {
-    t0 = /*#__PURE__*/_jsx(KeyboardView, {
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.container,
-        testID: "search-screen",
-        children: /*#__PURE__*/_jsx(SearchField, {
-          term: term,
-          onChange: setTerm
-        })
-      })
+    t0 = /*#__PURE__*/_jsx(SearchField, {
+      term: term,
+      onChange: setTerm
     });
     $[0] = term;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  return t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx(SearchPromptBlankState, {});
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t0) {
+    t2 = /*#__PURE__*/_jsx(KeyboardView, {
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.container,
+        testID: "search-screen",
+        children: [t0, t1]
+      })
+    });
+    $[3] = t0;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
 const styles = StyleSheet.create({
   container: {

package/build/screens/search/search_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.js","names":["React","useState","StyleSheet","View","KeyboardView","composeOptions","withMinimalBack","SearchField","jsx","_jsx","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","term","setTerm","t0","children","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport React, { useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { KeyboardView } from '../../components'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\nimport { SearchField } from './components/search_field'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  const [term, setTerm] = useState('')\n\n  return (\n    <KeyboardView>\n      <View style={styles.container} testID=\"search-screen\">\n        <SearchField term={term} onChange={setTerm} />\n      </View>\n    </KeyboardView>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":";AAKA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SACEC,cAAc,EACdC,eAAe,QACV,wDAAwD;AAC/D,SAASC,WAAW,QAAQ,2BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEvD,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC;AACqC,CAAC,KACtCN,cAAc,CACZ;EAAEO,KAAK,EAAE,QAAQ;EAAEC,SAAS,EAAE;AAAO,CAAC,EACtCP,eAAe,CAAC;EAAEQ,OAAO,EAAEA,CAAA,KAAMH,UAAU,CAACI,MAAM,CAAC;AAAE,CAAC,CACxD,CAAC;AAEH,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EACL,OAAAC,IAAA,EAAAC,OAAA,IAAwBnB,QAAQ,CAAC,EAAE,CAAC;EAAA,IAAAoB,EAAA;EAAA,IAAAJ,CAAA,QAAAE,IAAA;IAGlCE,EAAA,gBAAAZ,IAAA,CAACL,YAAY;MAAAkB,QAAA,eACXb,IAAA,CAACN,IAAI;QAAQoB,KAAgB,EAAhBC,MAAM,CAAAC,SAAU;QAASC,MAAe,EAAf,eAAe;QAAAJ,QAAA,eACnDb,IAAA,CAACF,WAAW;UAAOY,IAAI,EAAJA,IAAI;UAAYC,QAAO,EAAPA;QAAO,CAAG;MAAC,CAC1C;IAAC,CACK,CAAC;IAAAH,CAAA,MAAAE,IAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAJfI,EAIe;AAAA;AAInB,MAAMG,MAAM,GAAGtB,UAAU,CAACyB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"search_screen.js","names":["React","useState","StyleSheet","View","KeyboardView","composeOptions","withMinimalBack","SearchPromptBlankState","SearchField","jsx","_jsx","jsxs","_jsxs","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","term","setTerm","t0","t1","Symbol","for","t2","children","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport React, { useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { KeyboardView } from '../../components'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\nimport { SearchPromptBlankState } from './components/search_blank_states'\nimport { SearchField } from './components/search_field'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  const [term, setTerm] = useState('')\n\n  return (\n    <KeyboardView>\n      <View style={styles.container} testID=\"search-screen\">\n        <SearchField term={term} onChange={setTerm} />\n        <SearchPromptBlankState />\n      </View>\n    </KeyboardView>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":";AAKA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SACEC,cAAc,EACdC,eAAe,QACV,wDAAwD;AAC/D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,WAAW,QAAQ,2BAA2B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC;AACqC,CAAC,KACtCT,cAAc,CACZ;EAAEU,KAAK,EAAE,QAAQ;EAAEC,SAAS,EAAE;AAAO,CAAC,EACtCV,eAAe,CAAC;EAAEW,OAAO,EAAEA,CAAA,KAAMH,UAAU,CAACI,MAAM,CAAC;AAAE,CAAC,CACxD,CAAC;AAEH,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EACL,OAAAC,IAAA,EAAAC,OAAA,IAAwBtB,QAAQ,CAAC,EAAE,CAAC;EAAA,IAAAuB,EAAA;EAAA,IAAAJ,CAAA,QAAAE,IAAA;IAK9BE,EAAA,gBAAAd,IAAA,CAACF,WAAW;MAAOc,IAAI,EAAJA,IAAI;MAAYC,QAAO,EAAPA;IAAO,CAAG,CAAC;IAAAH,CAAA,MAAAE,IAAA;IAAAF,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAL,CAAA,QAAAM,MAAA,CAAAC,GAAA;IAC9CF,EAAA,gBAAAf,IAAA,CAACH,sBAAsB,IAAE,CAAC;IAAAa,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAI,EAAA;IAH9BI,EAAA,gBAAAlB,IAAA,CAACN,YAAY;MAAAyB,QAAA,eACXjB,KAAA,CAACT,IAAI;QAAQ2B,KAAgB,EAAhBC,MAAM,CAAAC,SAAU;QAASC,MAAe,EAAf,eAAe;QAAAJ,QAAA,GACnDL,EAA8C,EAC9CC,EAA0B;MAAA,CACtB;IAAC,CACK,CAAC;IAAAL,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,OALfQ,EAKe;AAAA;AAInB,MAAMG,MAAM,GAAG7B,UAAU,CAACgC,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.3.0-rc.8",
+  "version": "4.3.0-rc.9",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "9d2cec9da1b024a2b572d2b0cd07efd62a9460be"
+  "gitHead": "4c3d10940f433b0e1722c68aafbbb81534bb21ce"
 }

package/src/screens/search/components/__tests__/search_blank_states.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { NoResultsBlankState, SearchPromptBlankState } from '../search_blank_states'
+
+describe('SearchPromptBlankState', () => {
+  it('renders the prompt heading', () => {
+    const view = render(<SearchPromptBlankState />)
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+})
+
+describe('NoResultsBlankState', () => {
+  it('renders the heading and the searched term', () => {
+    const view = render(<NoResultsBlankState term="budget" />)
+
+    expect(view.getByText('No results')).toBeTruthy()
+    expect(view.getByText(/Nothing matches “budget\.”/)).toBeTruthy()
+  })
+})

package/src/screens/search/components/search_blank_states.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import BlankState from '../../../components/primitive/blank_state_primitive'
+
+export function SearchPromptBlankState() {
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="general.search" />
+      <BlankState.Content>
+        <BlankState.Heading>Search chat</BlankState.Heading>
+        <BlankState.Text>
+          Find conversations by title, or search for words from a message.
+        </BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}
+
+interface NoResultsBlankStateProps {
+  term: string
+}
+
+export function NoResultsBlankState({ term }: NoResultsBlankStateProps) {
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="general.search" />
+      <BlankState.Content>
+        <BlankState.Heading>No results</BlankState.Heading>
+        <BlankState.Text>
+          Nothing matches &ldquo;{term}.&rdquo; Try a conversation title, or a word from a message.
+        </BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}

package/src/screens/search/search_screen.tsx

@@ -10,6 +10,7 @@ import {
   composeOptions,
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
+import { SearchPromptBlankState } from './components/search_blank_states'
 import { SearchField } from './components/search_field'
 
 export const SearchScreenOptions = ({
@@ -27,6 +28,7 @@ export function SearchScreen() {
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
+        <SearchPromptBlankState />
       </View>
     </KeyboardView>
   )