Break out the SearchInput from the Table component so it can be used independently

src/components/SearchInput/SearchInput.stories.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SearchInput from './SearchInput.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SearchInput',
+    component: SearchInput,
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SearchInput {...args} />
+</Template>
+
+<Story name="Default" args="{{}}" />

src/components/SearchInput/SearchInput.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import MagnifyingGlass from './MagnifyingGlass.svelte';

src/components/SearchInput/stories/docs/component.md

@@ -0,0 +1,22 @@
+> **Welcome to your new component!** Use this template to build your component and customise its storybook.
+
+- Build your component in `SearchInput/SearchInput.svelte`.
+- Write your component's storybook in `SearchInput/SearchInput.stories.svelte`.
+- Don't forget to add your component to `src/index.js`:
+
+  ```javascript
+  // ...
+  export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
+  ```
+
+- Commit your component to a new branch and push it to GitHub! 🏁
+
+---
+
+```svelte
+<script>
+  import { SearchInput } from '@reuters-graphics/graphics-components';
+</script>
+
+<SearchInput />
+```

src/components/Table/Table.svelte

@@ -135,7 +135,7 @@
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
-  import Search from './Search.svelte';
+  import SearchInput from '../SearchInput/SearchInput.svelte';
   import Select from './Select.svelte';
   import SortArrow from './SortArrow.svelte';
   import { filterArray, paginateArray, getOptions } from './utils.js';
@@ -236,7 +236,7 @@
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <Search
+                <SearchInput
                   bind:searchPlaceholder
                   on:search="{handleSearchInput}"
                 />